feat: Picker 系列组件新增 separator 属性

fjc0k · Apr 12, 2019 · cd68159 · cd68159
1 parent a63ca47
commit cd68159
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 21 deletions.
diff --git a/src/components/DatePicker/index.tsx b/src/components/DatePicker/index.tsx
@@ -157,12 +157,25 @@ class MDatePicker extends component({
     visibleItemCount: 5 as number,
 
     /**
-     * 是否禁止选中
+     * 是否禁用。
      *
      * @default false
      */
     disabled: false as boolean,
 
+    /**
+     * 分隔符，用以分割列。
+     *
+     * @example
+     *
+     * '-' // 分隔符为 - 号
+     * '/' // 分隔符为 / 号
+     * ['-', ':'] // 分隔符依次为 - 号、: 号
+     *
+     * @default ''
+     */
+    separator: '' as string | number | Array<string | number>,
+
     /**
      * 是否可点击遮罩关闭。
      *
@@ -357,6 +370,8 @@ class MDatePicker extends component({
       cancelText,
       confirmText,
       title,
+      disabled,
+      separator,
       className,
     } = this.props
     const {
@@ -374,6 +389,8 @@ class MDatePicker extends component({
         cancelText={cancelText}
         confirmText={confirmText}
         title={title}
+        disabled={disabled}
+        separator={separator}
         className={className}
         onCancel={this.handleCancel}
         onConfirm={this.handleConfirm}>

diff --git a/src/components/Picker/index.tsx b/src/components/Picker/index.tsx
@@ -35,12 +35,26 @@ class MPicker extends component({
     visibleItemCount: 5 as number,
 
     /**
-     * 是否禁止选中。
+     * 是否禁用。
      *
      * @default false
      */
     disabled: false as boolean,
 
+    /**
+     * 分隔符，用以分割列。
+     *
+     * @example
+     *
+     * '-' // 分隔符为 - 号
+     * '至' // 分隔符为 至 字
+     * 0 // 分隔符为数字 0
+     * ['-', ':'] // 分隔符依次为 - 号、: 号
+     *
+     * @default ''
+     */
+    separator: '' as string | number | Array<string | number>,
+
     /**
      * 是否可点击遮罩关闭。
      *
@@ -158,9 +172,9 @@ class MPicker extends component({
   }
 
   render() {
-    const { maskClosable, data, itemHeight, visibleItemCount, noCancel, cancelText, confirmText, title, className } = this.props
+    const { maskClosable, data, itemHeight, visibleItemCount, noCancel, cancelText, confirmText, title, disabled, separator, className } = this.props
     const { localVisible, localSelectedIndexes } = this.state
-    return (
+    return disabled ? this.props.children : (
       <View className={className}>
         <View onClick={this.handleTriggerClick}>
           {this.props.children}
@@ -191,6 +205,7 @@ class MPicker extends component({
               selectedIndexes={localSelectedIndexes}
               itemHeight={itemHeight}
               visibleItemCount={visibleItemCount}
+              separator={separator}
               onPickStart={this.handlePickStart}
               onPickEnd={this.handlePickEnd}
               onChange={this.handlePickChange}

diff --git a/src/components/PickerView/index.scss b/src/components/PickerView/index.scss
@@ -15,4 +15,11 @@
       @include ellipsis;
     }
   }
+
+  &__separator {
+    pointer-events: none;
+    flex-grow: 0;
+    flex-basis: 2em;
+    flex-shrink: 0;
+  }
 }
diff --git a/src/components/PickerView/index.tsx b/src/components/PickerView/index.tsx
@@ -1,7 +1,8 @@
+/* eslint-disable react/no-array-index-key */
 import Taro from '@tarojs/taro'
+import { Block, PickerView, PickerViewColumn, View } from '@tarojs/components'
 import { clamp, isArray, isEqualArray, isNumber, noop, parseCSSValue } from 'vtils'
 import { component, RequiredProp } from '../component'
-import { PickerView, PickerViewColumn, View } from '@tarojs/components'
 
 /** 普通条目 */
 export interface NormalItem {
@@ -73,6 +74,20 @@ export default class MPickerView extends component({
      */
     disabled: false as boolean,
 
+    /**
+     * 分隔符，用以分割列。
+     *
+     * @example
+     *
+     * '-' // 分隔符为 - 号
+     * '至' // 分隔符为 至 字
+     * 0 // 分隔符为数字 0
+     * ['-', ':'] // 分隔符依次为 - 号、: 号
+     *
+     * @default ''
+     */
+    separator: '' as string | number | Array<string | number>,
+
     /**
      * 选中值改变事件。
      */
@@ -200,11 +215,38 @@ export default class MPickerView extends component({
     }
   }
 
-  handleChange = (e: { detail: { value: number[] } }) => {
+  normalizeSeparator(): Array<string | number> {
+    const { separator } = this.props
+    const separatorIsArray = isArray(separator)
+    const normalizedSeparator: Array<string | number> = []
+    for (let i = 0; i < this.state.normalizedData.length - 1; i++) {
+      normalizedSeparator.push(
+        separatorIsArray
+          ? separator[i]
+          : separator,
+      )
+    }
+    return normalizedSeparator.map(
+      separator => separator == null || separator === '' ? null : separator,
+    )
+  }
+
+  handleChange = (
+    separator: any[],
+    { detail: { value: selectedIndexes } }: { detail: { value: number[] } },
+  ) => {
     const { normalizedData } = this.state
 
+    // 去除 separator 的值
+    for (let i = 0, j = 0; i < normalizedData.length; i++) {
+      if (separator[j] != null) {
+        selectedIndexes.splice(i + j + 1, 1)
+        j++
+      }
+    }
+
     // fix: 尽管数据列数有变化，selectedIndexes 却仍是之前的长度
-    const selectedIndexes = e.detail.value.slice(0, normalizedData.length)
+    selectedIndexes = selectedIndexes.slice(0, normalizedData.length)
 
     this.setState({ localSelectedIndexes: selectedIndexes }, () => {
       if (this.isCascaded) {
@@ -234,27 +276,47 @@ export default class MPickerView extends component({
     const { disabled, className } = this.props
     const { normalizedData, localSelectedIndexes } = this.state
     const styles = this.computeStyles()
+    const normalizedSeparator = this.normalizeSeparator()
+
+    // 加上 separator 的值
+    const fullSelectedIndexes = localSelectedIndexes.slice()
+    for (let i = 0, j = 0; i < normalizedData.length; i++) {
+      if (normalizedSeparator[j] != null) {
+        fullSelectedIndexes.splice(i + j + 1, 0, 0)
+        j++
+      }
+    }
+
     return (
       <PickerView
-        value={localSelectedIndexes}
+        value={fullSelectedIndexes}
         className={`m-picker-view ${disabled && 'm-picker-view_disabled'} ${className}`}
         style={styles.view}
         indicatorStyle={`height:${styles.indicator.height}`}
         onPickStart={this.props.onPickStart}
         onPickEnd={this.props.onPickEnd}
-        onChange={this.handleChange}>
+        onChange={this.handleChange.bind(this, normalizedSeparator)}>
         {normalizedData.map((colData, colIndex) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <PickerViewColumn key={colIndex}>
-            {colData.map((item, itemIndex) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <View key={itemIndex} className='m-picker-view__item'>
-                <View className='m-picker-view__item__label'>
-                  {item.label}
+          <Block key={colIndex}>
+            <PickerViewColumn key='column'>
+              {colData.map((item, itemIndex) => (
+                <View key={itemIndex} className='m-picker-view__item'>
+                  <View className='m-picker-view__item__label'>
+                    {item.label}
+                  </View>
+                </View>
+              ))}
+            </PickerViewColumn>
+            {normalizedSeparator[colIndex] == null ? null : (
+              <PickerViewColumn key='separator' className='m-picker-view__separator'>
+                <View className='m-picker-view__item'>
+                  <View className='m-picker-view__item__label'>
+                    {normalizedSeparator[colIndex]}
+                  </View>
                 </View>
-              </View>
-            ))}
-          </PickerViewColumn>
+              </PickerViewColumn>
+            )}
+          </Block>
         ))}
       </PickerView>
     )

diff --git a/src/components/SinglePicker/index.tsx b/src/components/SinglePicker/index.tsx
@@ -37,7 +37,7 @@ class MSinglePicker extends component({
     visibleItemCount: 5 as number,
 
     /**
-     * 是否禁止选中
+     * 是否禁用。
      *
      * @default false
      */
@@ -129,6 +129,7 @@ class MSinglePicker extends component({
       cancelText,
       confirmText,
       title,
+      disabled,
       className,
     } = this.props
     const {
@@ -146,6 +147,7 @@ class MSinglePicker extends component({
         cancelText={cancelText}
         confirmText={confirmText}
         title={title}
+        disabled={disabled}
         className={className}
         onCancel={this.handleCancel}
         onConfirm={this.handleConfirm}>

diff --git a/src/components/TimePicker/index.tsx b/src/components/TimePicker/index.tsx
@@ -124,12 +124,23 @@ class MTimePicker extends component({
     visibleItemCount: 5 as number,
 
     /**
-     * 是否禁止选中
+     * 是否禁用。
      *
      * @default false
      */
     disabled: false as boolean,
 
+    /**
+     * 分隔符，用以分割列。
+     *
+     * @example
+     *
+     * ':' // 分隔符为 : 号
+     *
+     * @default ''
+     */
+    separator: '' as string | number,
+
     /**
      * 是否可点击遮罩关闭。
      *
@@ -298,6 +309,8 @@ class MTimePicker extends component({
       cancelText,
       confirmText,
       title,
+      disabled,
+      separator,
       className,
     } = this.props
     const {
@@ -315,6 +328,8 @@ class MTimePicker extends component({
         cancelText={cancelText}
         confirmText={confirmText}
         title={title}
+        disabled={disabled}
+        separator={separator}
         className={className}
         onCancel={this.handleCancel}
         onConfirm={this.handleConfirm}>

diff --git a/src/pages/PickerView.tsx b/src/pages/PickerView.tsx
@@ -41,12 +41,14 @@ export default class PickerView extends component({
       selectedIndexes: [0, 0],
       visibleItemCount: 5,
       disabled: false,
+      separator: '和',
     },
     cascaded: {
       data: heroData,
       selectedIndexes: [0, 0],
       visibleItemCount: 5,
       disabled: false,
+      separator: ':',
     },
   },
 }) {
@@ -100,6 +102,24 @@ export default class PickerView extends component({
               />
             )}
           />
+          <XItem
+            title='分隔符'
+            renderExtra={(
+              <Input
+                value={normal.separator}
+                placeholder='输入分隔符'
+                style={{ textAlign: 'right' }}
+                onInput={e => {
+                  this.setState(_ => ({
+                    normal: {
+                      ..._.normal,
+                      separator: e.detail.value,
+                    },
+                  }))
+                }}
+              />
+            )}
+          />
           <XItem
             title='是否禁用'
             renderExtra={(
@@ -122,6 +142,7 @@ export default class PickerView extends component({
               selectedIndexes={normal.selectedIndexes}
               visibleItemCount={normal.visibleItemCount}
               disabled={normal.disabled}
+              separator={normal.separator}
               onChange={selectedIndexes => {
                 this.setState(_ => ({
                   normal: {
@@ -167,6 +188,24 @@ export default class PickerView extends component({
               />
             )}
           />
+          <XItem
+            title='分隔符'
+            renderExtra={(
+              <Input
+                value={cascaded.separator}
+                placeholder='输入分隔符'
+                style={{ textAlign: 'right' }}
+                onInput={e => {
+                  this.setState(_ => ({
+                    cascaded: {
+                      ..._.cascaded,
+                      separator: e.detail.value,
+                    },
+                  }))
+                }}
+              />
+            )}
+          />
           <XItem
             title='是否禁用'
             renderExtra={(
@@ -189,6 +228,7 @@ export default class PickerView extends component({
               selectedIndexes={cascaded.selectedIndexes}
               visibleItemCount={cascaded.visibleItemCount}
               disabled={cascaded.disabled}
+              separator={cascaded.separator}
               onChange={selectedIndexes => {
                 this.setState(_ => ({
                   cascaded: {