feat: Picker 系列组件重构及部分 API 调整

fjc0k · May 5, 2019 · 93d99fe · 93d99fe
1 parent cd55bcf
commit 93d99fe
Show file tree

Hide file tree

Showing 13 changed files with 423 additions and 755 deletions.
diff --git a/project.config.json b/project.config.json
@@ -1,5 +1,5 @@
 {
-	"miniprogramRoot": "dist/",
+	"miniprogramRoot": "dist/weapp/",
 	"projectname": "Mounted",
 	"description": "基于 Taro 的微信小程序组件库。",
 	"appid": "wx94954e09b616564f",

diff --git a/src/components/DatePicker/index.tsx b/src/components/DatePicker/index.tsx
@@ -1,8 +1,9 @@
 import MPicker from '../Picker'
 import Taro from '@tarojs/taro'
 import { CascadedData } from '../PickerView'
-import { component, RequiredProp } from '../component'
-import { formatTemplate, getDaysInMonth, memoize, noop, toDate } from 'vtils'
+import { component } from '../component'
+import { DatePickerProps } from './props'
+import { formatTemplate, getDaysInMonth, memoize, toDate } from 'vtils'
 
 const formatYMD = memoize(
   formatTemplate,
@@ -16,8 +17,6 @@ const formatYMD = memoize(
   },
 )
 
-const currentYear = new Date().getFullYear()
-
 /**
  * 日期选择器组件。
  *
@@ -33,198 +32,7 @@ const currentYear = new Date().getFullYear()
  * ```
  */
 class MDatePicker extends component({
-  props: {
-    /**
-     * 开始日期。可以是：
-     *
-     * - 字符串: `2019-2-03`
-     * - Unix 时间戳: `1554916837`
-     *
-     * @default `${currentYear - 10}-1-1`
-     */
-    startDate: `${currentYear - 10}-1-1` as string | number,
-
-    /**
-     * 结束日期。可以是：
-     *
-     * - 字符串: `2019-2-03`
-     * - Unix 时间戳: `1554916837`
-     *
-     * @default `${currentYear + 10}-12-31`
-     */
-    endDate: `${currentYear + 10}-12-31` as string | number,
-
-    /**
-     * 格式化年份。
-     *
-     * @example
-     *
-     * 'y' --> '2019'
-     * 'yy' --> '19'
-     * 'yyy' --> '019'
-     * 'yyyy' --> '2019'
-     * 'y年' --> '2019年'
-     *
-     * @default 'y'
-     */
-    formatYear: 'y' as string,
-
-    /**
-     * 格式化月份。
-     *
-     * @example
-     *
-     * 'm' --> '5'
-     * 'mm' --> '05'
-     * 'm月' --> '5月'
-     *
-     * @default 'm'
-     */
-    formatMonth: 'm' as string,
-
-    /**
-     * 格式化天数。
-     *
-     * @example
-     *
-     * 'd' --> '9'
-     * 'dd' --> '09'
-     * 'd日' --> '9日'
-     *
-     * @default 'd'
-     */
-    formatDay: 'd' as string,
-
-    /**
-     * 年份过滤器，调用 `reject()` 函数可跳过传入的年份。
-     *
-     * @default () => {}
-     */
-    onFilterYear: noop as (params: {
-      /** 年 */
-      year: number,
-      /** 跳过当前年份 */
-      reject: () => void,
-    }) => void,
-
-    /**
-     * 月份过滤器，调用 `reject()` 函数可跳过传入的月份。
-     *
-     * @default () => {}
-     */
-    onFilterMonth: noop as (params: {
-      /** 年 */
-      year: number,
-      /** 月 */
-      month: number,
-      /** 跳过当前月份 */
-      reject: () => void,
-    }) => void,
-
-    /**
-     * 日期过滤器，调用 `reject()` 函数可跳过传入的日期。
-     *
-     * @default () => {}
-     */
-    onFilterDay: noop as (params: {
-      /** 年 */
-      year: number,
-      /** 月 */
-      month: number,
-      /** 日 */
-      day: number,
-      /** 跳过当前日期 */
-      reject: () => void,
-    }) => void,
-
-    /**
-     * 选中的日期。
-     */
-    selectedDate: [] as any as RequiredProp<number[]>,
-
-    /**
-     * 单个条目高度。
-     *
-     * @default '2.5em'
-     */
-    itemHeight: '2.5em' as string,
-
-    /**
-     * 显示条目数量。
-     *
-     * @default 5
-     */
-    visibleItemCount: 5 as number,
-
-    /**
-     * 是否禁用。
-     *
-     * @default false
-     */
-    disabled: false as boolean,
-
-    /**
-     * 分隔符，用以分割列。
-     *
-     * @example
-     *
-     * '-' // 分隔符为 - 号
-     * '/' // 分隔符为 / 号
-     * ['-', ':'] // 分隔符依次为 - 号、: 号
-     *
-     * @default ''
-     */
-    separator: '' as string | number | Array<string | number>,
-
-    /**
-     * 是否可点击遮罩关闭。
-     *
-     * @default true
-     */
-    maskClosable: true as boolean,
-
-    /**
-     * 标题。
-     *
-     * @default ''
-     */
-    title: '' as string,
-
-    /**
-     * 是否无取消按钮。
-     *
-     * @default false
-     */
-    noCancel: false as boolean,
-
-    /**
-     * 取消文字。
-     *
-     * @default '取消'
-     */
-    cancelText: '取消' as string,
-
-    /**
-     * 确定文字。
-     *
-     * @default '确定'
-     */
-    confirmText: '确定' as string,
-
-    /**
-     * 点击取消事件。
-     *
-     * @default () => {}
-     */
-    onCancel: noop as () => void,
-
-    /**
-     * 点击确定事件。
-     *
-     * @default () => {}
-     */
-    onConfirm: noop as any as RequiredProp<(selectedDate: number[]) => void>,
-  },
+  props: DatePickerProps,
   state: {
     localData: [] as CascadedData,
     localSelectedIndexes: [] as number[],
@@ -250,10 +58,7 @@ class MDatePicker extends component({
   }
 
   updateLocalState(props: MDatePicker['props']) {
-    let pass = true
-    const reject = () => {
-      pass = false
-    }
+    let reject: boolean | void = false
 
     const startDate = toDate(props.startDate)
     const startYear = startDate.getFullYear()
@@ -272,11 +77,8 @@ class MDatePicker extends component({
     const yearList: CascadedData = []
     const selectedIndexes: number[] = []
     for (let year = startYear; year <= endYear; year++) {
-      this.props.onFilterYear({
-        year: year,
-        reject: reject,
-      })
-      if (pass) {
+      reject = props.filterYear && props.filterYear({ year: year })
+      if (reject !== true) {
         if (year === props.selectedDate[0]) {
           selectedIndexes[0] = yearList.length
         }
@@ -288,12 +90,11 @@ class MDatePicker extends component({
         })
         const months = year === endYear ? endMonth : 12
         for (let month = (year === startYear ? startMonth : 1); month <= months; month++) {
-          this.props.onFilterMonth({
+          reject = props.filterMonth && props.filterMonth({
             year: year,
             month: month,
-            reject: reject,
           })
-          if (pass) {
+          if (reject !== true) {
             if (month === props.selectedDate[1]) {
               selectedIndexes[1] = monthList.length
             }
@@ -305,13 +106,12 @@ class MDatePicker extends component({
             })
             const days = year === endYear && month === endMonth ? endDay : getDaysInMonth(month, year)
             for (let day = (year === startYear && month === startMonth ? startDay : 1); day <= days; day++) {
-              this.props.onFilterDay({
+              reject = props.filterDay && props.filterDay({
                 year: year,
                 month: month,
                 day: day,
-                reject: reject,
               })
-              if (pass) {
+              if (reject !== true) {
                 if (day === props.selectedDate[2]) {
                   selectedIndexes[2] = dayList.length
                 }
@@ -320,17 +120,17 @@ class MDatePicker extends component({
                   value: day,
                 })
               } else {
-                pass = true
+                reject = false
               }
             }
             selectedIndexes[2] = selectedIndexes[2] == null ? 0 : selectedIndexes[2]
           } else {
-            pass = true
+            reject = false
           }
         }
         selectedIndexes[1] = selectedIndexes[1] == null ? 0 : selectedIndexes[1]
       } else {
-        pass = true
+        reject = false
       }
     }
     selectedIndexes[0] = selectedIndexes[0] == null ? 0 : selectedIndexes[0]
@@ -341,10 +141,6 @@ class MDatePicker extends component({
     })
   }
 
-  handleCancel = () => {
-    this.props.onCancel()
-  }
-
   handleConfirm: MPicker['props']['onConfirm'] = selectedIndexes => {
     const { localData } = this.state
     const selectedDate: number[] = []
@@ -362,41 +158,20 @@ class MDatePicker extends component({
   }
 
   render() {
-    const {
-      maskClosable,
-      itemHeight,
-      visibleItemCount,
-      noCancel,
-      cancelText,
-      confirmText,
-      title,
-      disabled,
-      separator,
-      className,
-    } = this.props
     const {
       localData,
       localSelectedIndexes,
     } = this.state
-    return localData.length ? (
+
+    return !localData.length ? this.props.children : (
       <MPicker
-        maskClosable={maskClosable}
+        {...this.props}
         data={localData}
         selectedIndexes={localSelectedIndexes}
-        itemHeight={itemHeight}
-        visibleItemCount={visibleItemCount}
-        noCancel={noCancel}
-        cancelText={cancelText}
-        confirmText={confirmText}
-        title={title}
-        disabled={disabled}
-        separator={separator}
-        className={className}
-        onCancel={this.handleCancel}
         onConfirm={this.handleConfirm}>
         {this.props.children}
       </MPicker>
-    ) : this.props.children
+    )
   }
 }