feat(组件): 新增 SinglePicker 组件

src/app.tsx

@@ -9,7 +9,8 @@ class App extends Taro.Component {
       // 'pages/Transition/X',
       // 'pages/Popup/Popup',
       // 'pages/Picker/PickerView',
-      'pages/Picker/Picker',
+      // 'pages/Picker/Picker',
+      'pages/Picker/SinglePicker',
     ],
     window: {
       navigationBarTitleText: 'DEMO',

src/components/Picker/defaultProps.ts

@@ -0,0 +1,13 @@
+import { noop, omit } from 'vtils'
+import defaultProps from '../PickerView/defaultProps'
+
+export default {
+  ...omit(defaultProps, ['onChange']),
+  maskClosable: true as boolean,
+  title: '' as string,
+  noCancel: false as boolean,
+  cancelText: '取消' as string,
+  confirmText: '确定' as string,
+  onCancel: noop as () => void,
+  onConfirm: noop,
+}

src/components/Picker/index.tsx

@@ -1,22 +1,12 @@
 import { View } from '@tarojs/components'
-import { noop } from 'vtils'
 import { component } from '../component'
 import MPickerView, { Data } from '../PickerView'
 import MPopup from '../Popup'
-import defaultProps from '../PickerView/defaultProps'
 import _ from './index.module.scss'
+import defaultProps from './defaultProps'
 
 class MPicker<D extends Data, V extends (D extends Data<infer VV> ? VV : any) = any> extends component({
-  props: {
-    ...defaultProps,
-    maskClosable: true as boolean,
-    title: '' as string,
-    noCancel: false as boolean,
-    cancelText: '取消' as string,
-    confirmText: '确定' as string,
-    onCancel: noop as () => void,
-    onConfirm: noop,
-  },
+  props: defaultProps,
   state: {
     localVisible: false as boolean,
     localValue: [],

src/components/SinglePicker/defaultProps.ts

@@ -0,0 +1,7 @@
+import defaultProps from '../Picker/defaultProps'
+
+export default {
+  ...defaultProps,
+  data: [],
+  value: null,
+}

src/components/SinglePicker/index.tsx

@@ -0,0 +1,66 @@
+import { component } from '../component'
+import { NormalColData } from '../PickerView'
+import MPicker from '../Picker'
+import defaultProps from './defaultProps'
+import _ from './index.module.scss'
+
+class MSinglePicker<D extends NormalColData, V extends (D extends NormalColData<infer VV> ? VV : any) = any> extends component({
+  props: defaultProps,
+  state: {
+    localData: [],
+    localValue: [],
+  },
+})<{
+  data: D,
+  value?: V,
+  onConfirm?: (value: V) => void,
+}, {
+  localData: [D],
+  localValue: [V],
+}> {
+  componentWillMount() {
+    const { data, value } = this.props
+    this.setState({
+      localData: [data],
+      localValue: [value],
+    })
+  }
+
+  componentWillReceiveProps({ data, value }: MSinglePicker<D>['props']) {
+    this.setState({
+      localData: [data],
+      localValue: [value],
+    })
+  }
+
+  handleCancel = () => {
+    this.props.onCancel()
+  }
+
+  handleConfirm: MPicker<D[]>['props']['onConfirm'] = value => {
+    this.props.onConfirm(value[0])
+  }
+
+  render() {
+    const { maskClosable, itemHeight, visibleItemCount, noCancel, cancelText, confirmText, title } = this.props
+    const { localData, localValue } = this.state
+    return (
+      <MPicker
+        maskClosable={maskClosable}
+        data={localData}
+        value={localValue}
+        itemHeight={itemHeight}
+        visibleItemCount={visibleItemCount}
+        noCancel={noCancel}
+        cancelText={cancelText}
+        confirmText={confirmText}
+        title={title}
+        onCancel={this.handleCancel}
+        onConfirm={this.handleConfirm}>
+        {this.props.children}
+      </MPicker>
+    )
+  }
+}
+
+export default MSinglePicker

src/components/index.ts

@@ -2,5 +2,6 @@
 export { default as MPicker } from './Picker'
 export { default as MPickerView } from './PickerView'
 export { default as MPopup } from './Popup'
+export { default as MSinglePicker } from './SinglePicker'
 export { default as MSticky } from './Sticky'
 export { default as MTransition } from './Transition'

src/pages/Picker/SinglePicker.tsx

@@ -0,0 +1,53 @@
+import { View } from '@tarojs/components'
+import { component } from '../../components/component'
+import { MSinglePicker } from '../../components'
+
+let i = 0
+
+const getData = () => {
+  const flag = i++
+  return [
+    `中国${flag}`,
+    `日本${flag}`,
+    `美国${flag}`,
+    `俄罗斯${flag}`,
+  ].reduce((res, country) => {
+    res.push({
+      label: country,
+      value: country,
+    })
+    return res
+  }, [] as any)
+}
+
+export default class SinglePicker extends component({
+  state: {
+    data: getData(),
+    value: '日本0',
+  },
+}) {
+  handleChange: MSinglePicker<any, any>['props']['onConfirm'] = value => {
+    this.setState({ value })
+  }
+
+  render() {
+    const { data, value } = this.state
+    return (
+      <View style={{
+        fontSize: '16px',
+      }}>
+        <View style={{ fontWeight: 'bold', padding: '10px 0', marginBottom: '10px', borderBottom: '1px solid #eee' }}>
+          NormalPicker
+        </View>
+        <MSinglePicker
+          maskClosable={false}
+          title='选择一个国家'
+          data={data}
+          value={value}
+          onConfirm={this.handleChange}>
+          {JSON.stringify(value)}
+        </MSinglePicker>
+      </View>
+    )
+  }
+}