WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit 8af2426

Browse files
ruoruruoru
ruoru
authored and
ruoru
committed
issue #218 update picke and picker_column code
1 parent f8b12cd commit 8af2426

File tree

10 files changed

+13445
-25
lines changed

10 files changed

+13445
-25
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: 176 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
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, GroupPicker, CityPicker, CascadePicker, 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: '',
11-
picker_group: [
13+
picker_data: [
1214
{
1315
items: [
1416
{
@@ -30,20 +32,137 @@ class PickerDemo extends React.Component {
3032
]
3133
}
3234
],
35+
36+
37+
38+
group_show: false,
39+
group_value: '',
40+
group_data: [
41+
[
42+
{
43+
label: 'A1 (Disabled)',
44+
value: 'A1',
45+
disable: true
46+
},
47+
{
48+
label: 'A2',
49+
value: 'A2',
50+
},
51+
{
52+
label: 'A3',
53+
value: 'A3',
54+
},
55+
{
56+
label: 'A4 (Disabled)',
57+
value: 'A4',
58+
disable: true
59+
},
60+
{
61+
label: 'A5',
62+
value: 'A5',
63+
},
64+
{
65+
label: 'A6',
66+
value: 'A6',
67+
},
68+
{
69+
label: 'A7',
70+
value: 'A7',
71+
}
72+
],
73+
[
74+
{
75+
label: 'B1',
76+
value: 'B1',
77+
},
78+
{
79+
label: 'B2',
80+
value: 'B2',
81+
},
82+
{
83+
label: 'B3 (Disabled)',
84+
value: 'B3',
85+
disable: true,
86+
},
87+
{
88+
label: 'B4',
89+
value: 'B4',
90+
},
91+
],
92+
[
93+
{
94+
label: 'C1',
95+
value: 'C1',
96+
},
97+
{
98+
label: 'C2',
99+
value: 'C2',
100+
},
101+
{
102+
label: 'C3 (Disabled)',
103+
value: 'C3',
104+
disable: true,
105+
},
106+
{
107+
label: 'C4',
108+
value: 'C4',
109+
},
110+
],
111+
],
112+
113+
33114
city_show: false,
34-
city_value: ''
115+
city_value: '',
116+
117+
cascade_show: false,
118+
cascade_value: '',
35119
};
36120

37121
hide(){
38122
this.setState({
39-
picker_show: false,
123+
group_show: false,
40124
city_show: false
41125
})
42126
}
43127

44128
render() {
45129
return (
46130
<Page className="picker" title="Picker" subTitle="多列选择器" >
131+
<Form>
132+
<FormCell>
133+
<CellHeader>
134+
<Label>Direct Picker</Label>
135+
</CellHeader>
136+
<CellBody>
137+
<Input
138+
type="text"
139+
onClick={e=>{
140+
e.preventDefault()
141+
this.setState({picker_show: true})
142+
}}
143+
placeholder="Pick a item"
144+
value={this.state.picker_value}
145+
readOnly={true}
146+
/>
147+
</CellBody>
148+
</FormCell>
149+
</Form>
150+
<Picker
151+
onChange={selected=>{
152+
let value = ''
153+
selected.forEach( (s, i)=> {
154+
value = this.state.picker_data[i]['items'][s].label
155+
})
156+
this.setState({
157+
picker_value: value,
158+
picker_show: false
159+
})
160+
}}
161+
groups={this.state.picker_data}
162+
show={this.state.picker_show}
163+
onCancel={e=>this.setState({picker_show: false})}
164+
/>
165+
47166
<Form>
48167
<FormCell>
49168
<CellHeader>
@@ -62,50 +181,88 @@ class PickerDemo extends React.Component {
62181
</CellBody>
63182
</FormCell>
64183
</Form>
65-
66184
<CityPicker
67185
data={cnCity}
68186
onCancel={e=>this.setState({city_show: false})}
187+
onOk={text=>this.setState({city_value: text, city_show: false})}
69188
onChange={text=>this.setState({city_value: text, city_show: false})}
70189
show={this.state.city_show}
71190
/>
72191

73-
74-
75192
<Form>
76193
<FormCell>
77194
<CellHeader>
78-
<Label>Direct Picker</Label>
195+
<Label>Group Picker</Label>
79196
</CellHeader>
80197
<CellBody>
81198
<Input
82199
type="text"
83200
onClick={e=>{
84201
e.preventDefault()
85-
this.setState({picker_show: true})
202+
this.setState({group_show: true})
86203
}}
87204
placeholder="Pick a item"
88-
value={this.state.picker_value}
205+
value={this.state.group_value}
89206
readOnly={true}
90207
/>
91208
</CellBody>
92209
</FormCell>
93210
</Form>
94-
95-
<Picker
96-
onChange={selected=>{
211+
<GroupPicker
212+
onOk={selected=>{
97213
let value = ''
98214
selected.forEach( (s, i)=> {
99-
value = this.state.picker_group[i]['items'][s].label
215+
value += this.state.group_data[i][s].value
100216
})
101217
this.setState({
102-
picker_value: value,
103-
picker_show: false
218+
group_value: value,
219+
group_show: false
104220
})
105221
}}
106-
groups={this.state.picker_group}
107-
show={this.state.picker_show}
108-
onCancel={e=>this.setState({picker_show: false})}
222+
data={this.state.group_data}
223+
datamap={{text: 'label'}}
224+
show={this.state.group_show}
225+
onCancel={e=>this.setState({group_show: false})}
226+
/>
227+
228+
<Form>
229+
<FormCell>
230+
<CellHeader>
231+
<Label>Cascade</Label>
232+
</CellHeader>
233+
<CellBody>
234+
<Input type="text"
235+
value={this.state.cascade_value}
236+
onClick={ e=> {
237+
e.preventDefault();
238+
this.setState({cascade_show: true})
239+
}}
240+
placeholder="Chose Your cascade value"
241+
readOnly={true}
242+
/>
243+
</CellBody>
244+
</FormCell>
245+
</Form>
246+
<CascadePicker
247+
data={cnCity}
248+
datamap={{text: 'name', value: 'code', sub: 'sub'}}
249+
onCancel={e=>this.setState({cascade_show: false})}
250+
onOk={selected => {
251+
let value = cnCity;
252+
253+
selected.forEach( (s, i)=> {
254+
if(i === selected.length - 1) {
255+
value = cnCity[s].code
256+
} else {
257+
value = value[s].sub;
258+
}
259+
})
260+
this.setState({
261+
cascade_value: value,
262+
cascade_show: false
263+
})
264+
}}
265+
show={this.state.cascade_show}
109266
/>
110267

111268
<br/>

0 commit comments

Comments
 (0)