feat(date-picker): 新增自定义触发器(#2891)

.changeset/hot-fans-beg.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(date-picker): 新增自定义触发器

.changeset/metal-squids-unite.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/date-picker": minor
+---
+
+feat: 新增自定义触发器

packages/ui/date-picker/src/DatePicker.tsx

@@ -78,6 +78,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
       cellRender,
       footerRender,
       strideSelectMode = 'auto',
+      customRender,
       ...otherProps
     },
     ref
@@ -441,6 +442,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
             setAttachEl={setAttachEl}
             dateRangeTimePanelNow={dateRangeTimePanelNow}
             invalid={invalid}
+            customRender={customRender}
           />
           <Popper
             {...(overlay || {})}

packages/ui/date-picker/src/components/root.tsx

@@ -15,6 +15,7 @@ const Root = ({
   setAttachEl,
   dateRangeTimePanelNow,
   invalid,
+  customRender,
 }: {
   onTrigger: (index: number) => void
   onClear: () => void
@@ -23,6 +24,7 @@ const Root = ({
   inputChangeEvent: InputChangeEvent
   dateRangeTimePanelNow: number
   invalid: boolean
+  customRender?: React.ReactNode | ((option: string[]) => React.ReactNode)
 }) => {
   const {
     i18n,
@@ -133,7 +135,28 @@ const Root = ({
     (invalid || !isValueValid) && `${prefixCls}__picker--invalid`
   )
 
-  return (
+  const dataValue = []
+  if (inputData[0]) {
+    dataValue.push(inputData[0].format('YYYY-MM-DD'))
+  }
+  if (inputData[1]) {
+    dataValue.push(inputData[1].format('YYYY-MM-DD'))
+  }
+
+  return customRender ? (
+    <div
+      ref={setAttachEl}
+      onClick={() => {
+        if (renderRange) {
+          onPickerClickEvent(1)
+        } else {
+          onPickerClickEvent(0)
+        }
+      }}
+    >
+      {typeof customRender === 'function' ? customRender(dataValue) : customRender}
+    </div>
+  ) : (
     <div className={_cls} ref={setAttachEl}>
       <div className={`${prefixCls}__picker__wrapper`}>
         <div

packages/ui/date-picker/src/types.ts

@@ -283,4 +283,8 @@ export interface DatePickerProps extends Omit<HiBaseHTMLProps<'div'>, 'placehold
    * @default 'auto'
    */
   strideSelectMode?: 'auto' | 'fixed'
+  /**
+   * 自定义触发器
+   */
+  customRender?: React.ReactNode | ((option: string[]) => React.ReactNode)
 }

packages/ui/date-picker/stories/custom-render.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import DatePicker from '../src'
+import Input from '@hi-ui/input'
+
+/**
+ * @title 自定义触发器
+ */
+export const CustomRender = () => {
+  return (
+    <>
+      <h1>日期</h1>
+      <div className="date-picker-custom-render__wrap">
+        <h2>基础</h2>
+        <DatePicker
+          style={{ width: 240 }}
+          onChange={(date, dateStr) => {
+            console.log('onChange', date, dateStr)
+          }}
+          onSelect={console.log}
+          customRender={(data) => {
+            return <Input value={data} readOnly placeholder="请选择" />
+          }}
+        />
+        <h2>日期时间范围</h2>
+        <DatePicker
+          style={{ width: 420 }}
+          type="daterange"
+          showTime
+          onChange={(date, dateStr) => {
+            console.log('onChange', date, dateStr)
+          }}
+          defaultValue={[new Date(), new Date()]}
+          customRender={(data) => {
+            return <Input value={`${data[0]}  ~  ${data[1]}`} readOnly placeholder="请选择" />
+          }}
+        />
+      </div>
+    </>
+  )
+}

packages/ui/date-picker/stories/index.stories.tsx

@@ -11,6 +11,7 @@ export * from './shortcut.stories'
 export * from './lunar.stories'
 export * from './size.stories'
 export * from './footer-render.stories'
+export * from './custom-render.stories'
 
 export default {
   title: 'Data Input/DatePicker',