issue #218 update picke and picker_column code

Author: ruoru

.gitignore

@@ -9,4 +9,5 @@ publish.sh
 pendingtest
 .nyc_output
 dist
-build
+build
+yarn*

example/pages/picker/index.js

@@ -1,37 +1,93 @@
 import React from 'react';
-import { Popup, Picker, CityPicker, Form, FormCell, CellBody, CellHeader, Label, Input } from '../../../build/packages';
+//import { Popup, Picker, CascadePicker, CityPicker, Form, FormCell, CellBody, CellHeader, Label, Input } from '../../../build/packages';
+import { Popup, Picker, CascadePicker, CityPicker, Form, FormCell, CellBody, CellHeader, Label, Input } from '../../../src';
 import Page from '../../component/page';
 import cnCity from './cnCity';
 
+
 class PickerDemo extends React.Component {
 
     state = {
         picker_show: false,
         picker_value: '',
         picker_group: [
-            {
-                items: [
-                    {
-                        label: 'Item1'
-                    },
-                    {
-                        label: 'Item2 (Disabled)',
-                        disabled: true
-                    },
-                    {
-                        label: 'Item3'
-                    },
-                    {
-                        label: 'Item4'
-                    },
-                    {
-                        label: 'Item5'
-                    }
-                ]
-            }
+            [
+                {
+                    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',
+                },
+            ],
+        ],
+        picker_cascade: [
         ],
         city_show: false,
-        city_value: ''
+        cascade_show: false,
+        city_value: '',
+        cascade_value: '',
     };
 
     hide(){
@@ -66,11 +122,50 @@ class PickerDemo extends React.Component {
                 <CityPicker
                     data={cnCity}
                     onCancel={e=>this.setState({city_show: false})}
+                    onOk={text=>this.setState({city_value: text, city_show: false})}
                     onChange={text=>this.setState({city_value: text, city_show: false})}
                     show={this.state.city_show}
                 />
 
+                <Form>
+                    <FormCell>
+                        <CellHeader>
+                            <Label>Cascade</Label>
+                        </CellHeader>
+                        <CellBody>
+                            <Input type="text"
+                                value={this.state.cascade_value}
+                                onClick={ e=> {
+                                    e.preventDefault();
+                                    this.setState({cascade_show: true})
+                                }}
+                                placeholder="Chose Your cascade value"
+                                readOnly={true}
+                            />
+                        </CellBody>
+                    </FormCell>
+                </Form>
+                <CascadePicker
+                    data={cnCity}
+                    datamap={{text: 'name', value: 'code', sub: 'sub'}}
+                    onCancel={e=>this.setState({cascade_show: false})}
+                    onOk={selected => {
+                        let value = cnCity;
 
+                        selected.forEach( (s, i)=> {
+                            if(i === selected.length - 1) {
+                                value = cnCity[s].code
+                            } else {
+                                value = value[s].sub;
+                            }
+                        })
+                        this.setState({
+                            cascade_value: value,
+                            cascade_show: false
+                        })
+                    }}
+                    show={this.state.cascade_show}
+                />
 
                 <Form>
                     <FormCell>
@@ -93,17 +188,18 @@ class PickerDemo extends React.Component {
                 </Form>
 
                 <Picker
-                    onChange={selected=>{
+                    onOk={selected=>{
                         let value = ''
                         selected.forEach( (s, i)=> {
-                            value = this.state.picker_group[i]['items'][s].label
+                            value += this.state.picker_group[i][s].value
                         })
                         this.setState({
                             picker_value: value,
                             picker_show: false
                         })
                     }}
-                    groups={this.state.picker_group}
+                    data={this.state.picker_group}
+                    datamap={{text: 'label'}}
                     show={this.state.picker_show}
                     onCancel={e=>this.setState({picker_show: false})}
                 />