add onPickerChange api #345

ant-design · Oct 9, 2016 · 69e142c · 69e142c
1 parent 86657fa
commit 69e142c
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 8 deletions.
diff --git a/components/picker/PropsType.tsx b/components/picker/PropsType.tsx
@@ -12,6 +12,7 @@ interface Props {
   prefixCls?: string;
   pickerPrefixCls?: string;
   popupPrefixCls?: string;
+  onPickerChange?: (values) => void;
 }
 
 export default Props;
diff --git a/components/picker/demo/basic.md b/components/picker/demo/basic.md
@@ -7,29 +7,67 @@ title: 基本
 
 ````jsx
 import { Picker, List } from 'antd-mobile';
+import { createForm } from 'rc-form';
 
 import district from 'site/data/district';
-import { createForm } from 'rc-form';
+import province from 'site/data/province-lite';
 
 let Test = React.createClass({
   getInitialState() {
     return {
       data: [],
+      cols: 1,
     };
   },
   onClick() {
-    console.log('start loading data');
     setTimeout(() => {
       this.setState({
-        data: district,
+        data: province,
       });
     }, 500);
   },
-  setVal() {
-    this.props.form.setFieldsValue({
-      district: ['340000', '340800', '340822'],
+  onPickerChange(val) {
+    console.log(val);
+    let colNum = 1;
+    const d = [...this.state.data];
+    if (val[0] === 'zj') {
+      d.forEach(i => {
+        if (i.value === 'zj') {
+          colNum = 2;
+          if (!i.children) {
+            i.children = [{
+              value: 'zj-nb',
+              label: '宁波',
+            }, {
+              value: 'zj-hz',
+              label: '杭州',
+            }];
+          } else if (val[1] === 'zj-hz') {
+            i.children.forEach(j => {
+              if (j.value === 'zj-hz') {
+                j.children = [{
+                  value: 'zj-hz-xh',
+                  label: '西湖区',
+                }];
+              }
+            });
+            colNum = 3;
+          }
+        }
+      });
+    } else {
+      colNum = 1;
+    }
+    this.setState({
+      data: d,
+      cols: colNum,
     });
   },
+  // setVal() {
+  //   this.props.form.setFieldsValue({
+  //     district: ['340000', '340800', '340822'],
+  //   });
+  // },
   render() {
     const { getFieldProps } = this.props.form;
     return (<div>
@@ -39,7 +77,10 @@ let Test = React.createClass({
         })}>
           <List.Item arrow="horizontal">省市区选择</List.Item>
         </Picker>
-        <Picker data={this.state.data} cols={2} {...getFieldProps('district2')}>
+        <Picker data={this.state.data} cols={this.state.cols}
+          {...getFieldProps('district2')}
+          onPickerChange={this.onPickerChange}
+        >
           <List.Item arrow="horizontal" onClick={this.onClick}>省市选择(异步加载)</List.Item>
         </Picker>
         <Picker data={district} cols={1} {...getFieldProps('district3')} className="forss">

diff --git a/components/picker/index.md b/components/picker/index.md
@@ -21,6 +21,7 @@ english: Picker
 | format  | 格式化选中的值  | Function | `(values) => { return values.join(','); } ` |
 | cols    | 列数        | Number |  `3`  |
 | onChange | 选中后的回调   | Function(value) ,如果使用[rc-form](https://github.com/react-component/form),一般不需要自己处理| - |
+| onPickerChange | 每列数据选择变化后的回调   | Function(value) | - |
 | children| 通常是List.Item | Object |  List.Item  |
 | okText  | 选中的文案 | String |  `确定`  |
 | dismissText  | 取消选中的文案 | String |  `取消`  |

diff --git a/components/picker/index.web.tsx b/components/picker/index.web.tsx
@@ -50,6 +50,7 @@ export default class Picker extends React.Component<tsPropsType, any> {
         pickerPrefixCls={props.pickerPrefixCls}
         data={props.data}
         cols={props.cols}
+        onChange={props.onPickerChange}
       />
     );
     return (

diff --git a/site/data/province.js b/site/data/province.js
@@ -1,5 +1,7 @@
 /* eslint comma-dangle:0 */
-
+/**
+ * data for ListView.IndexedList
+ */
 const data = [{
   value: '11',
   label: '北京市',