Skip to content

Commit f623fc3

Browse files
committed
update picke and picker_column code
1 parent f621503 commit f623fc3

File tree

10 files changed

+297
-165
lines changed

10 files changed

+297
-165
lines changed

.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@ publish.sh
99
pendingtest
1010
.nyc_output
1111
dist
12-
build
12+
build
13+
yarn*

example/pages/picker/index.js

Lines changed: 106 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,93 @@
11
import React from 'react';
2-
import { Popup, Picker, CityPicker, Form, FormCell, CellBody, CellHeader, Label, Input } from '../../../build/packages';
2+
//import { Popup, Picker, CascadePicker, CityPicker, Form, FormCell, CellBody, CellHeader, Label, Input } from '../../../build/packages';
3+
import { Popup, Picker, CascadePicker, CityPicker, Form, FormCell, CellBody, CellHeader, Label, Input } from '../../../src';
34
import Page from '../../component/page';
45
import cnCity from './cnCity';
56

7+
68
class PickerDemo extends React.Component {
79

810
state = {
911
picker_show: false,
1012
picker_value: '',
1113
picker_group: [
12-
{
13-
items: [
14-
{
15-
label: 'Item1'
16-
},
17-
{
18-
label: 'Item2 (Disabled)',
19-
disabled: true
20-
},
21-
{
22-
label: 'Item3'
23-
},
24-
{
25-
label: 'Item4'
26-
},
27-
{
28-
label: 'Item5'
29-
}
30-
]
31-
}
14+
[
15+
{
16+
label: 'A1 (Disabled)',
17+
value: 'A1',
18+
disable: true
19+
},
20+
{
21+
label: 'A2',
22+
value: 'A2',
23+
},
24+
{
25+
label: 'A3',
26+
value: 'A3',
27+
},
28+
{
29+
label: 'A4 (Disabled)',
30+
value: 'A4',
31+
disable: true
32+
},
33+
{
34+
label: 'A5',
35+
value: 'A5',
36+
},
37+
{
38+
label: 'A6',
39+
value: 'A6',
40+
},
41+
{
42+
label: 'A7',
43+
value: 'A7',
44+
}
45+
],
46+
[
47+
{
48+
label: 'B1',
49+
value: 'B1',
50+
},
51+
{
52+
label: 'B2',
53+
value: 'B2',
54+
},
55+
{
56+
label: 'B3 (Disabled)',
57+
value: 'B3',
58+
disable: true,
59+
},
60+
{
61+
label: 'B4',
62+
value: 'B4',
63+
},
64+
],
65+
[
66+
{
67+
label: 'C1',
68+
value: 'C1',
69+
},
70+
{
71+
label: 'C2',
72+
value: 'C2',
73+
},
74+
{
75+
label: 'C3 (Disabled)',
76+
value: 'C3',
77+
disable: true,
78+
},
79+
{
80+
label: 'C4',
81+
value: 'C4',
82+
},
83+
],
84+
],
85+
picker_cascade: [
3286
],
3387
city_show: false,
34-
city_value: ''
88+
cascade_show: false,
89+
city_value: '',
90+
cascade_value: '',
3591
};
3692

3793
hide(){
@@ -70,7 +126,30 @@ class PickerDemo extends React.Component {
70126
show={this.state.city_show}
71127
/>
72128

73-
129+
<Form>
130+
<FormCell>
131+
<CellHeader>
132+
<Label>Cascade</Label>
133+
</CellHeader>
134+
<CellBody>
135+
<Input type="text"
136+
value={this.state.cascade_value}
137+
onClick={ e=> {
138+
e.preventDefault();
139+
this.setState({cascade_show: true})
140+
}}
141+
placeholder="Chose Your cascade value"
142+
readOnly={true}
143+
/>
144+
</CellBody>
145+
</FormCell>
146+
</Form>
147+
<CascadePicker
148+
data={cnCity}
149+
onCancel={e=>this.setState({cascade_show: false})}
150+
onOk={text=>this.setState({cascade_value: text, cascade_show: false})}
151+
show={this.state.cascade_show}
152+
/>
74153

75154
<Form>
76155
<FormCell>
@@ -93,17 +172,18 @@ class PickerDemo extends React.Component {
93172
</Form>
94173

95174
<Picker
96-
onChange={selected=>{
175+
onOk={selected=>{
97176
let value = ''
98177
selected.forEach( (s, i)=> {
99-
value = this.state.picker_group[i]['items'][s].label
178+
value += this.state.picker_group[i][s].value
100179
})
101180
this.setState({
102181
picker_value: value,
103182
picker_show: false
104183
})
105184
}}
106-
groups={this.state.picker_group}
185+
data={this.state.picker_group}
186+
datamap={{text: 'label'}}
107187
show={this.state.picker_show}
108188
onCancel={e=>this.setState({picker_show: false})}
109189
/>

package-lock.json

Lines changed: 64 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@
3535
"dependencies": {
3636
"babel-runtime": "^6.18.0",
3737
"prop-types": "^15.5.10",
38+
"react": "^16.2.0",
39+
"react-dom": "^16.2.0",
3840
"weui": "^1.1.0"
3941
},
4042
"devDependencies": {

src/components/picker/concatenation_picker.js renamed to src/components/picker/cascade_picker.js

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,8 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import Picker from './picker';
44

5-
/**
6-
* An city pick component build on top of picker
7-
*
8-
*/
9-
class ConcatenationPicker extends React.Component {
5+
6+
class CascadePicker extends React.Component {
107

118
static propTypes = {
129
/**
@@ -112,7 +109,6 @@ class ConcatenationPicker extends React.Component {
112109
}, ()=>cb());
113110
}
114111

115-
116112
updateGroup(item, i, groupIndex, selected, picker){
117113
this.updateDataBySelected(selected, ()=>{
118114
//update picker
@@ -137,15 +133,15 @@ class ConcatenationPicker extends React.Component {
137133
return (
138134
<Picker
139135
show={this.props.show}
140-
onGroupChange={this.updateGroup}
141-
onChange={this.handleChange}
136+
onColumnChange={this.updateGroup}
137+
onOk={this.handleChange}
142138
defaultSelect={this.state.selected}
143-
groups={this.state.groups}
139+
data={this.state.groups}
144140
onCancel={this.props.onCancel}
145141
lang={this.props.lang}
146142
/>
147143
);
148144
}
149145
}
150146

151-
export default ConcatenationPicker;
147+
export default CascadePicker;

src/components/picker/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import Picker from './picker';
22
import PickerColumn from './picker_column';
33
import CityPicker from './city_picker';
4+
import CascadePicker from './Cascade_picker';
45

56
export {
67
Picker,
78
PickerColumn,
8-
CityPicker
9+
CityPicker,
10+
CascadePicker,
911
};

0 commit comments

Comments
 (0)