Package Exports
- picker-react
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (picker-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
picker-react
group, multi and cascade pickers base on WEUI picker.
Support environment
- Modern browser and IE9+.
Applicable scene
- Mobile phone, the screen size in the mainstream (320x480 to 414x732);
- Whether with bottom navigation or not;
- Horizontal arrangement, it is recommended not to exceed the depth of four-level structure;
- Requirements of the word length in a certain range, too long can not be displayed completely;
- Interface data format needs to be strictly in accordance with the provisions of the format;
Remaining problem
- if the first one is disable, if chose another disable item in same column, it will jump to the first one disable;
Interface design
GroupPicker & CascadePicker
GroupPicker & CascadePicker has the same interface, but the data structure is different.
| property name | type | description |
|---|---|---|
| data * | Array | The data source of the Array selector, the default is []. |
| datamap | Object | The alias of the data source key. eg: {text: 'text', value: 'value', disable: 'disable', sub: 'sub'} |
| defaultSelectIndexs | Array | The default selection index of data. |
| selectIndexs | Array | Forces the selection of data. |
| onChange * | Function | Callback method, each time you change the selected value will run of the method. (selectIndexs, index, columnIndex) => {} |
| show * | Bool | Show or Hide the component. |
| transparent | Bool | Is the gray background transparent or not. |
| lang | Object | Text of Component Cancel button and OK button. { cancelBtn: 'Cancel', okBtn: 'Ok' } |
| onCancel * | Function | Callback method, click the Cancel button will run the method. |
| onOk * | Function | Callback method, click the OK button will run the method. (selectIndexs) => {} |
| onMaskClick | Function | Callback method, click on the gray background will run the method. |
Here to emphasize, GroupPicker data format is:
[
[
{
text: 'A1 (Disabled)',
value: 'A1',
disable: true
},
{
text: 'A2',
value: 'A2',
},
{
text: 'A3',
value: 'A3',
}
],
[
{
text: 'B1',
value: 'B1',
},
{
text: 'B2',
value: 'B2',
}
],
[
{
text: 'C1',
value: 'C1',
},
{
text: 'C2',
value: 'C2',
},
{
text: 'C3 (Disabled)',
value: 'C3',
disable: true,
},
{
text: 'C4',
value: 'C4',
},
],
]CascadePicker data format is:
[
{
text: '北京',
value: '110000',
sub: [
{
text: '北京市',
value: '110000',
sub:
[
{
text: '东城区',
value: '110101'
},
{
text: '西城区',
value: '110102'
},
{
text: '朝阳区',
value: '110105'
},
{
text: '丰台区',
value: '110106'
}
]
},
]
},
{
text: '河北省',
value: '130000',
sub: [
{
text: '石家庄市',
value: '130100',
sub: [
{
text: '市辖区',
value: '130101'
},
{
text: '长安区',
value: '130102'
},
{
text: '新华区',
value: '130103'
},
{
text: '桥西区',
value: '130104'
}
]
},
{
text: '唐山市',
value: '130200',
sub: [
{
text: '市辖区',
value: '130201'
},
{
text: '路南区',
value: '130202'
},
{
text: '路北区',
value: '130203'
},
{
text: '古冶区',
value: '130204'
}
]
}
]
}
]Install
npm install picker-react --saveExample
import React, {Component} from 'react';
import cnCity from './cnCity';
import {GroupPicker, CascadePicker} from 'picker-react';
class Picker extends Component {
constructor (props) {
super(props);
this.state = {
group_show: false,
group_value: '',
group_data: [
[
{
label: 'A1 (Disabled)',
value: 'A1',
disable: true
},
{
label: 'A2',
value: 'A2',
},
{
label: 'A3',
value: 'A3',
},
{
label: 'A4 (Disabled)',
value: 'A4',
disable: true
},
{
label: 'A5',
value: 'A5',
},
{
label: 'A6',
value: 'A6',
},
{
label: 'A7',
value: 'A7',
}
],
[
{
label: 'B1',
value: 'B1',
},
{
label: 'B2',
value: 'B2',
},
{
label: 'B3 (Disabled)',
value: 'B3',
disable: true,
},
{
label: 'B4',
value: 'B4',
},
],
[
{
label: 'C1',
value: 'C1',
},
{
label: 'C2',
value: 'C2',
},
{
label: 'C3 (Disabled)',
value: 'C3',
disable: true,
},
{
label: 'C4',
value: 'C4',
},
],
],
cascade_show: false,
cascade_value: '',
};
}
render() {
return (
<div className="picker">
<ul>
<li>
<span>GroupPicker</span>
<input
type="text"
onClick={e=>{
e.preventDefault()
this.setState({group_show: true})
}}
placeholder="Pick a item"
value={this.state.group_value}
readOnly={true}
/>
</li>
<li>
<span>CascadePicker</span>
<input type="text"
value={this.state.cascade_value}
onClick={ e=> {
e.preventDefault();
this.setState({cascade_show: true})
}}
placeholder="Chose Your cascade value"
readOnly={true}
/>
</li>
</ul>
<GroupPicker
data={this.state.group_data}
datamap={{text: 'label'}}
show={this.state.group_show}
onOk={selected=>{
let value = ''
selected.forEach( (s, i)=> {
value += this.state.group_data[i][s].value
})
this.setState({
group_value: value,
group_show: false
})
}}
onCancel={e=>this.setState({group_show: false})}
/>
<CascadePicker
data={cnCity}
datamap={{text: 'name', value: 'code', sub: 'sub'}}
show={this.state.cascade_show}
onOk={selected => {
let value = cnCity;
selected.forEach( (s, i)=> {
if(i === selected.length - 1) {
value = value[s].code
} else {
value = value[s].sub;
}
})
this.setState({
cascade_value: value,
cascade_show: false
})
}}
onCancel={e=>this.setState({cascade_show: false})}
/>
</div>
);
}
};
export default Picker;Local development
$ git clone https://github.com/ruoru/picker-react.git
$ npm install
$ npm start