feat: timeselect 组件增加 onSelect onPannelChange onTimeChange 事件 (#362)

jdf2e · Oct 24, 2022 · 479b212 · 479b212
1 parent 9f7cb2a
commit 479b212
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 42 deletions.
diff --git a/src/packages/timeselect/demo.taro.tsx b/src/packages/timeselect/demo.taro.tsx
@@ -87,9 +87,9 @@ const TimeSelectDemo = () => {
           currentKey={currentKey}
           dates={dates}
           times={times}
-          select={handleSelect}
-          pannelChange={handlePannelChange}
-          timeChange={handleTimeChange}
+          onSelect={handleSelect}
+          onPannelChange={handlePannelChange}
+          onTimeChange={handleTimeChange}
         />
       </div>
     </>

diff --git a/src/packages/timeselect/demo.tsx b/src/packages/timeselect/demo.tsx
@@ -85,9 +85,9 @@ const TimeSelectDemo = () => {
           currentKey={currentKey}
           dates={dates}
           times={times}
-          select={handleSelect}
-          pannelChange={handlePannelChange}
-          timeChange={handleTimeChange}
+          onSelect={handleSelect}
+          onPannelChange={handlePannelChange}
+          onTimeChange={handleTimeChange}
         />
       </div>
     </>

diff --git a/src/packages/timeselect/doc.en-US.md b/src/packages/timeselect/doc.en-US.md
@@ -69,9 +69,9 @@ const TimeSelectDemo = () => {
           currentKey={currentKey}
           dates={dates}
           times={times}
-          select={handleSelect}
-          pannelChange={handlePannelChange}
-          timeChange={handleTimeChange}
+          onSelect={handleSelect}
+          onPannelChange={handlePannelChange}
+          onTimeChange={handleTimeChange}
         />
       </div>
     </>
@@ -113,8 +113,8 @@ export default TimeSelectDemo
 
 ### TimeSelect Event
 
-| Event | Description                                                                                                       | required | callback args                         |
-|--------------|-------------------------------------------------------------------------------------------------------------------|----------|---------------------------------------|
-| select       | Callback after closing the mask                                                                                   | true     | `list: []`                            |
-| pannelChange | Click the date callback in the left column, and internally update the data through setCurrentKey, setCurrentTime  | false    | `pannelKey: string 、number, list: []` |
-| timeChange   | Click the time callback, and internally update the data through setCurrentKey, setCurrentTime                                                                     | false                | `time: string, list: []`              |
+| Event                  | Description                                                                                                       | required | callback args                         |
+|------------------------|-------------------------------------------------------------------------------------------------------------------|----------|---------------------------------------|
+| onSelect`v1.3.8`       | Callback after closing the mask                                                                                   | true     | `list: []`                            |
+| onPannelChange`v1.3.8` | Click the date callback in the left column, and internally update the data through setCurrentKey, setCurrentTime  | false    | `pannelKey: string 、number, list: []` |
+| onTimeChange`v1.3.8`         | Click the time callback, and internally update the data through setCurrentKey, setCurrentTime                                                                     | false                | `time: string, list: []`              |
diff --git a/src/packages/timeselect/doc.md b/src/packages/timeselect/doc.md
@@ -69,9 +69,9 @@ const TimeSelectDemo = () => {
           currentKey={currentKey}
           dates={dates}
           times={times}
-          select={handleSelect}
-          pannelChange={handlePannelChange}
-          timeChange={handleTimeChange}
+          onSelect={handleSelect}
+          onPannelChange={handlePannelChange}
+          onTimeChange={handleTimeChange}
         />
       </div>
     </>
@@ -113,8 +113,11 @@ export default TimeSelectDemo
 
 ### TimeSelect Event
 
-| 名称  | 说明    | 是否必传       | 回调参数    |
-|-------|----------|--------|-------------|
-| select | 关闭遮罩之后的回调 | 是 | `list: []` |
-| pannelChange | 点击左栏日期回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `pannelKey: string 、number, list: []` |
-| timeChange | 点击时间回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `time: string, list: []` |
+| 名称                     | 说明    | 是否必传       | 回调参数    |
+|------------------------|----------|--------|-------------|
+| select`废弃`                 | 关闭遮罩之后的回调 | 是 | `list: []` |
+| pannelChange`废弃`           | 点击左栏日期回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `pannelKey: string 、number, list: []` |
+| timeChange`废弃`         | 点击时间回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `time: string, list: []` |
+| onSelect`v1.3.8`       | 关闭遮罩之后的回调 | 是 | `list: []` |
+| onPannelChange`v1.3.8` | 点击左栏日期回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `pannelKey: string 、number, list: []` |
+| onTimeChange`v1.3.8`   | 点击时间回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `time: string, list: []` |
diff --git a/src/packages/timeselect/doc.zh-TW.md b/src/packages/timeselect/doc.zh-TW.md
@@ -69,9 +69,9 @@ const TimeSelectDemo = () => {
           currentKey={currentKey}
           dates={dates}
           times={times}
-          select={handleSelect}
-          pannelChange={handlePannelChange}
-          timeChange={handleTimeChange}
+          onSelect={handleSelect}
+          onPannelChange={handlePannelChange}
+          onTimeChange={handleTimeChange}
         />
       </div>
     </>
@@ -115,6 +115,9 @@ export default TimeSelectDemo
 
 | 名称  | 说明    | 是否必传       | 回调参数    |
 |-------|----------|--------|-------------|
-| select | 关闭遮罩之后的回调 | 是 | `list: []` |
-| pannelChange | 点击左栏日期回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `pannelKey: string 、number, list: []` |
-| timeChange | 点击时间回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `time: string, list: []` |
+| select`废弃`                 | 关闭遮罩之后的回调 | 是 | `list: []` |
+| pannelChange`废弃`           | 点击左栏日期回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `pannelKey: string 、number, list: []` |
+| timeChange`废弃`         | 点击时间回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `time: string, list: []` |
+| onSelect`v1.3.8`       | 关闭遮罩之后的回调 | 是 | `list: []` |
+| onPannelChange`v1.3.8` | 点击左栏日期回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `pannelKey: string 、number, list: []` |
+| onTimeChange`v1.3.8`   | 点击时间回调，内部通过 setCurrentKey、setCurrentTime 更新数据 | 否 | `time: string, list: []` |
diff --git a/src/packages/timeselect/timeselect.taro.tsx b/src/packages/timeselect/timeselect.taro.tsx
@@ -12,6 +12,7 @@ export interface DateType {
 }
 export interface TimeSelectProps {
   className?: string
+  style: React.CSSProperties
   visible?: boolean
   height?: string
   multiple?: boolean
@@ -26,9 +27,16 @@ export interface TimeSelectProps {
     selectTimeData: TimeType[]
   ) => void
   timeChange?: (time: string, selectTimeData: TimeType[]) => void
+  onSelect?: (selectTimeData: TimeType[]) => void
+  onPannelChange?: (
+    pannelKey: string | number,
+    selectTimeData: TimeType[]
+  ) => void
+  onTimeChange?: (time: string, selectTimeData: TimeType[]) => void
 }
 const defaultProps = {
   className: '',
+  style: {},
   visible: false,
   height: '20%',
   multiple: false,
@@ -38,12 +46,11 @@ const defaultProps = {
   dates: [],
   times: [],
 } as TimeSelectProps
-export const TimeSelect: FunctionComponent<
-  Partial<TimeSelectProps> & React.HTMLAttributes<HTMLDivElement>
-> = (props) => {
+export const TimeSelect: FunctionComponent<Partial<TimeSelectProps>> = (
+  props
+) => {
   const { locale } = useConfig()
   const {
-    children,
     visible,
     className,
     height,
@@ -56,6 +63,9 @@ export const TimeSelect: FunctionComponent<
     select,
     pannelChange,
     timeChange,
+    onSelect,
+    onPannelChange,
+    onTimeChange,
   } = {
     ...defaultProps,
     ...props,
@@ -80,7 +90,11 @@ export const TimeSelect: FunctionComponent<
 
   // popup 的关闭回调, 执行 select 函数更改外部 visible
   const closeFun = () => {
-    select && select(activeTime)
+    if (onSelect) {
+      onSelect(activeTime)
+    } else if (select) {
+      select(activeTime)
+    }
   }
   // 选择配送时间回调
   const handleSelectTime = (time: string) => {
@@ -104,7 +118,11 @@ export const TimeSelect: FunctionComponent<
     const resultTimeData = [...activeTime]
     resultTimeData.splice(curIndex, 1, curTimeData)
     setActiveTime(resultTimeData)
-    timeChange && timeChange(time, resultTimeData)
+    if (onTimeChange) {
+      onTimeChange(time, resultTimeData)
+    } else if (timeChange) {
+      timeChange(time, resultTimeData)
+    }
   }
   // 选择日期的回调
   const handleChange = (pannelKey: string | number) => {
@@ -131,7 +149,11 @@ export const TimeSelect: FunctionComponent<
         ])
       }
     }
-    pannelChange && pannelChange(pannelKey, resultTimeData)
+    if (onPannelChange) {
+      onPannelChange(pannelKey, resultTimeData)
+    } else if (pannelChange) {
+      pannelChange(pannelKey, resultTimeData)
+    }
   }
   // 选中的日期增加 active 类名
   const getTimePannelClass = (dataItem: DateType) => {

diff --git a/src/packages/timeselect/timeselect.tsx b/src/packages/timeselect/timeselect.tsx
@@ -12,6 +12,7 @@ export interface DateType {
 }
 export interface TimeSelectProps {
   className?: string
+  style: React.CSSProperties
   visible?: boolean
   height?: string
   multiple?: boolean
@@ -26,9 +27,16 @@ export interface TimeSelectProps {
     selectTimeData: TimeType[]
   ) => void
   timeChange?: (time: string, selectTimeData: TimeType[]) => void
+  onSelect?: (selectTimeData: TimeType[]) => void
+  onPannelChange?: (
+    pannelKey: string | number,
+    selectTimeData: TimeType[]
+  ) => void
+  onTimeChange?: (time: string, selectTimeData: TimeType[]) => void
 }
 const defaultProps = {
   className: '',
+  style: {},
   visible: false,
   height: '20%',
   multiple: false,
@@ -38,12 +46,11 @@ const defaultProps = {
   dates: [],
   times: [],
 } as TimeSelectProps
-export const TimeSelect: FunctionComponent<
-  Partial<TimeSelectProps> & React.HTMLAttributes<HTMLDivElement>
-> = (props) => {
+export const TimeSelect: FunctionComponent<Partial<TimeSelectProps>> = (
+  props
+) => {
   const { locale } = useConfig()
   const {
-    children,
     visible,
     className,
     height,
@@ -56,6 +63,9 @@ export const TimeSelect: FunctionComponent<
     select,
     pannelChange,
     timeChange,
+    onSelect,
+    onPannelChange,
+    onTimeChange,
   } = {
     ...defaultProps,
     ...props,
@@ -80,7 +90,11 @@ export const TimeSelect: FunctionComponent<
 
   // popup 的关闭回调, 执行 select 函数更改外部 visible
   const closeFun = () => {
-    select && select(activeTime)
+    if (onSelect) {
+      onSelect(activeTime)
+    } else if (select) {
+      select(activeTime)
+    }
   }
   // 选择配送时间回调
   const handleSelectTime = (time: string) => {
@@ -104,7 +118,11 @@ export const TimeSelect: FunctionComponent<
     const resultTimeData = [...activeTime]
     resultTimeData.splice(curIndex, 1, curTimeData)
     setActiveTime(resultTimeData)
-    timeChange && timeChange(time, resultTimeData)
+    if (onTimeChange) {
+      onTimeChange(time, resultTimeData)
+    } else if (timeChange) {
+      timeChange(time, resultTimeData)
+    }
   }
   // 选择日期的回调
   const handleChange = (pannelKey: string | number) => {
@@ -131,7 +149,11 @@ export const TimeSelect: FunctionComponent<
         ])
       }
     }
-    pannelChange && pannelChange(pannelKey, resultTimeData)
+    if (onPannelChange) {
+      onPannelChange(pannelKey, resultTimeData)
+    } else if (pannelChange) {
+      pannelChange(pannelKey, resultTimeData)
+    }
   }
   // 选中的日期增加 active 类名
   const getTimePannelClass = (dataItem: DateType) => {