refactor: TimeSelect

migrate-from-v1.md

@@ -494,3 +494,9 @@
 #### Card
 #### Signature
 #### TimeSelect
+- 移除 height，通过 style 设置高度
+- title 类型修改为 ReactNode
+- onPannelChange 重命名为 onDateChange
+- 移除 dates、times，合并为 options，重新设计了数据结构
+- 增加 optionKey 用于自定义数据中的关键字
+- 移除 currentKey，新增 defaultValue 用于设置默认选项，支持时间选择

src/config.json

@@ -794,7 +794,7 @@
           "author": "szg2008"
         },
         {
-          "version": "1.0.0",
+          "version": "2.0.0",
           "name": "Toast",
           "type": "component",
           "tarodoc": true,
@@ -1095,7 +1095,7 @@
           "author": "songsong"
         },
         {
-          "version": "1.0.0",
+          "version": "2.0.0",
           "name": "TimeDetail",
           "type": "component",
           "cName": "配送时间",
@@ -1106,18 +1106,7 @@
           "author": "zhaoqian16"
         },
         {
-          "version": "1.0.0",
-          "name": "TimePannel",
-          "type": "component",
-          "cName": "配送时间",
-          "desc": "配送时间日期选择",
-          "sort": 7,
-          "show": false,
-          "exportEmpty": true,
-          "author": "zhaoqian16"
-        },
-        {
-          "version": "1.0.0",
+          "version": "2.0.0",
           "name": "TimeSelect",
           "type": "component",
           "cName": "配送时间",

src/packages/timedetail/index.ts

@@ -1,4 +1,3 @@
-import { TimeDetail, TimeType } from './timedetail'
+import { TimeDetail } from './timedetail'
 
 export default TimeDetail
-export type { TimeType }

src/packages/timedetail/timedetail.scss

@@ -1,51 +1,26 @@
-.nut-theme-dark {
-  .nut-timedetail {
-    background-color: $dark6;
-
-    &__detail {
-      &__list {
-        &__item {
-          background-color: $dark4;
-          color: $dark1;
-
-          &--curr {
-            color: $timeselect-timedetail-item-cur-text-color;
-          }
-        }
-      }
-    }
-  }
-}
-
 .nut-timedetail {
   display: flex;
   align-content: flex-start;
   flex-wrap: wrap;
   padding: 0 0 50px 13px;
 
   &__item {
-    width: 100px;
-    height: 50px;
-    line-height: 50px;
+    width: $timeselect-time-width;
+    height: $timeselect-time-height;
+    line-height: $timeselect-time-line-height;
     text-align: center;
-    margin-right: 10px;
-    margin-bottom: 10px;
-    background-color: $background-color;
-    color: $title-color;
-
-    &-active {
-      background-color: $dark-brand-color;
-    }
-
+    margin: $timeselect-time-margin;
+    background: $timeselect-time-background;
+    color: $timeselect-time-color;
     border-radius: 5px;
-    font-size: 14px;
+    font-size: $timeselect-time-font-size;
     border: 1px solid transparent;
     font-weight: 700;
-  }
 
-  &__item-active {
-    background-color: var(--nutui-brand-color-opacity);
-    border: 1px solid $primary-color;
-    color: $primary-color;
+    &.active {
+      background-color: $timeselect-time-active-background;
+      border: 1px solid $timeselect-time-active-color;
+      color: $timeselect-time-active-color;
+    }
   }
 }

src/packages/timedetail/timedetail.taro.tsx

@@ -1,67 +1,75 @@
-import React, { FunctionComponent, useEffect, useState } from 'react'
-import bem from '@/utils/bem'
-import { useConfig } from '@/packages/configprovider/configprovider.taro'
+import React, { FunctionComponent, useCallback, useMemo } from 'react'
+import classNames from 'classnames'
+import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import {
+  TimeType,
+  DateType,
+  OptionKeyType,
+} from '@/packages/timeselect/index.taro'
 
-export interface TimeType {
-  key?: string | number
-  list: string[]
-}
-export interface TimeDetailProps {
-  className?: string
-  currentKey: string | number
-  currentTime: TimeType[]
-  times: TimeType[]
-  select: (time: string) => void
+export interface TimeDetailProps extends BasicComponent {
+  activeDate: string
+  activeTime: DateType[]
+  options: DateType[]
+  optionKey: OptionKeyType
+  onSelect: (time: TimeType) => void
 }
 const defaultProps = {
-  className: '',
-  currentKey: 0,
-  currentTime: [] as TimeType[],
-  times: [],
-  select: () => null,
+  ...ComponentDefaults,
+  activeDate: '',
+  activeTime: [] as DateType[],
+  options: [],
+  optionKey: {
+    valueKey: 'value',
+    textKey: 'text',
+    childrenKey: 'children',
+  },
+  onSelect: () => {},
 } as TimeDetailProps
 export const TimeDetail: FunctionComponent<
-  Partial<TimeDetailProps> & React.HTMLAttributes<HTMLDivElement>
+  Partial<TimeDetailProps> &
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>
 > = (props) => {
-  const { locale } = useConfig()
-  const { children, times, className, currentKey, currentTime, select } = {
+  const { options, optionKey, className, activeDate, activeTime, onSelect } = {
     ...defaultProps,
     ...props,
   }
-  const b = bem('timedetail')
-  const [renderData, setRenderData] = useState<string[]>([])
-  useEffect(() => {
-    const currentData = times.find(
-      (timesItem: TimeType) => String(timesItem.key) === String(currentKey)
-    )
-    const renderData = currentData ? currentData.list : []
-    // 根据选中的日期回显当前日期可配送的时间
-    setRenderData(renderData)
-  }, [times, currentKey])
-  // 选中时间的回调
-  const handleTime = (time: string) => {
-    select(time)
-  }
-  // 选中的配送时间增加 active 类名
-  const getDetailClass = (item: string): string => {
-    let initClass = 'nut-timedetail__item'
-    const curTimeData = currentTime.find(
-      (item: TimeType) => String(item.key) === String(currentKey)
+  const classPrefix = 'nut-timedetail'
+  const timeList = useMemo(() => {
+    return (
+      options?.find(
+        (item: DateType) => item[optionKey.valueKey] === activeDate
+      ) || {
+        [optionKey.childrenKey]: [],
+      }
     )
-    if (curTimeData && curTimeData.list && curTimeData.list.includes(item)) {
-      initClass += ' nut-timedetail__item-active'
-    }
-    return initClass
-  }
+  }, [options, optionKey, activeDate])
+  const isActive = useCallback(
+    (timeKey: string) => {
+      const date = activeTime.find((item: DateType) => {
+        return item[optionKey.valueKey] === activeDate
+      })
+      if (date?.[optionKey.childrenKey]) {
+        const time = date?.[optionKey.childrenKey].find((time: TimeType) => {
+          return time[optionKey.valueKey] === timeKey
+        })
+        return time
+      }
+      return false
+    },
+    [activeTime, optionKey, activeDate]
+  )
   return (
-    <div className={`${b()} ${className || ''}`}>
-      {renderData.map((item: string, index: number) => (
+    <div className={classNames(classPrefix, className)}>
+      {timeList[optionKey.childrenKey].map((item: TimeType) => (
         <span
-          className={getDetailClass(item)}
-          key={item}
-          onClick={() => handleTime(item)}
+          className={classNames(`${classPrefix}__item`, {
+            active: isActive(item[optionKey.valueKey]),
+          })}
+          key={item[optionKey.valueKey]}
+          onClick={() => onSelect(item)}
         >
-          {item}
+          {item[optionKey.textKey]}
         </span>
       ))}
     </div>