feat(time-picker): 新增自定义触发器(XiaoMi#2899)

yang-x20 · Jun 14, 2024 · 83c933a · 83c933a
1 parent 9416cd0
commit 83c933a
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 38 deletions.
diff --git a/packages/ui/time-picker/src/TimePicker.tsx b/packages/ui/time-picker/src/TimePicker.tsx
@@ -65,6 +65,7 @@ export const TimePicker = forwardRef<HTMLDivElement | null, TimePickerProps>(
       overlay,
       size = 'md',
       invalid = false,
+      customRender,
     },
     ref
   ) => {
@@ -257,49 +258,62 @@ export const TimePicker = forwardRef<HTMLDivElement | null, TimePickerProps>(
 
     return (
       <div ref={ref} role={role} className={cls}>
-        <div ref={setAttachEl} className={`${prefixCls}__input-wrapper`}>
-          <Input
-            size={size}
-            isFitContent={appearance === 'unset'}
-            ref={inputRef}
-            onValidChange={setIsInputValid}
-            disabled={inputReadonly || disabled}
-            type={type}
-            placeholders={placeholder}
-            prefix={prefixCls}
-            format={format}
-            hourStep={hourStep}
-            secondStep={secondStep}
-            minuteStep={minuteStep}
-            disabledHours={disabledHours}
-            disabledMinutes={disabledMinutes}
-            disabledSeconds={disabledSeconds}
-            value={cacheValue}
-            onChange={onCacheChange}
-            onFocus={() => {
-              showPopperRef.current = true
-              setShowPopper(true)
-            }}
-          />
+        {customRender ? (
           <div
-            className={`${prefixCls}__function-button`}
+            ref={setAttachEl}
             onClick={() => {
-              showPopperRef.current = !showPopperRef.current
-              setShowPopper((pre) => !pre)
+              showPopperRef.current = true
+              setShowPopper(true)
             }}
           >
-            {showPopper ? (
-              <CloseCircleFilled
-                className={`${prefixCls}__close-button`}
-                onClick={() => {
-                  onCacheChange(type === 'single' ? [''] : ['', ''])
-                }}
-              />
-            ) : (
-              <TimeOutlined />
-            )}
+            {typeof customRender === 'function' ? customRender(cacheValue) : customRender}
           </div>
-        </div>
+        ) : (
+          <div ref={setAttachEl} className={`${prefixCls}__input-wrapper`}>
+            <Input
+              size={size}
+              isFitContent={appearance === 'unset'}
+              ref={inputRef}
+              onValidChange={setIsInputValid}
+              disabled={inputReadonly || disabled}
+              type={type}
+              placeholders={placeholder}
+              prefix={prefixCls}
+              format={format}
+              hourStep={hourStep}
+              secondStep={secondStep}
+              minuteStep={minuteStep}
+              disabledHours={disabledHours}
+              disabledMinutes={disabledMinutes}
+              disabledSeconds={disabledSeconds}
+              value={cacheValue}
+              onChange={onCacheChange}
+              onFocus={() => {
+                showPopperRef.current = true
+                setShowPopper(true)
+              }}
+            />
+            <div
+              className={`${prefixCls}__function-button`}
+              onClick={() => {
+                showPopperRef.current = !showPopperRef.current
+                setShowPopper((pre) => !pre)
+              }}
+            >
+              {showPopper ? (
+                <CloseCircleFilled
+                  className={`${prefixCls}__close-button`}
+                  onClick={() => {
+                    onCacheChange(type === 'single' ? [''] : ['', ''])
+                  }}
+                />
+              ) : (
+                <TimeOutlined />
+              )}
+            </div>
+          </div>
+        )}
+
         <Popper
           {...(overlay || {})}
           unmountOnClose={false}
@@ -409,6 +423,10 @@ export interface TimePickerProps extends ExtendType {
    * @default false
    */
   invalid?: boolean
+  /**
+   * 自定义触发器
+   */
+  customRender?: React.ReactNode | ((option: string[]) => React.ReactNode)
 }
 
 if (__DEV__) {

diff --git a/packages/ui/time-picker/stories/custom-renser.stories.tsx b/packages/ui/time-picker/stories/custom-renser.stories.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import TimePicker from '../src'
+import Input from '@hi-ui/input'
+
+/**
+ * @title 新增自定义触发器
+ */
+export const CustomRender = () => {
+  const [basicValue, setBasicValue] = useState<string | string[]>(['12:00:00'])
+  const [rangeValue, setRangeValue] = useState<string | string[]>(['11:11:11', '12:00:00'])
+
+  return (
+    <>
+      <h1>CustomRender-Basic</h1>
+      <div className="time-picker-basic__wrap">
+        <TimePicker
+          placeholder={['请选择时间']}
+          value={basicValue}
+          onChange={(e) => {
+            console.log('basic-default', e)
+            setBasicValue(e)
+          }}
+          customRender={(data) => {
+            return <Input value={data[0]} readOnly placeholder="请选择" />
+          }}
+        />
+      </div>
+      <h1>CustomRender-Range</h1>
+      <div className="time-picker-range__wrap">
+        <TimePicker
+          value={rangeValue}
+          placeholder={['请选择开始时间', '请选择结束时间']}
+          onChange={(value) => {
+            console.log('range-value', value)
+            setRangeValue(value)
+          }}
+          type="range"
+          customRender={(data) => {
+            return <Input value={data.join('-')} readOnly placeholder="请选择" />
+          }}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/time-picker/stories/index.stories.tsx b/packages/ui/time-picker/stories/index.stories.tsx
@@ -8,6 +8,7 @@ export * from './disabled.stories'
 export * from './range.stories'
 export * from './format.stories'
 export * from './custom-disabled.stories'
+export * from './custom-renser.stories'
 
 export default {
   title: 'Data Input/TimePicker',