feat(date-picker): add footerRender api (#2630)

.changeset/popular-cameras-burn.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/date-picker": minor
+---
+
+feat: add footerRender api

.changeset/red-carrots-jam.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+DatePicker feat: add footerRender api

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

@@ -74,6 +74,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
       invalid = false,
       onClose,
       cellRender,
+      footerRender,
       strideSelectMode = 'auto',
       ...otherProps
     },
@@ -87,13 +88,15 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
     const cacheDate = useRef<(moment.Moment | null)[]>([])
     const [inputFocus, setInputFocus] = useState(false)
     const [type, setType] = useState<DatePickerTypeEnum>(propType)
+
     useEffect(() => {
       moment.locale(locale === 'en-US' ? 'en' : 'zh-CN')
       // V4: 不使用 weekOffset 判断国际化语言
       // if (weekOffset !== undefined) {
       //   moment.locale(weekOffset === 0 ? 'en' : 'zh-CN')
       // }
     }, [locale, weekOffset])
+
     useEffect(() => {
       setType(propType)
     }, [propType])
@@ -355,6 +358,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
           />
         )
       }
+
       return (
         <div className={popperCls}>
           {type.includes('range') || type === 'timeperiod' ? (
@@ -417,6 +421,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
           isInDateRangeTimeMode,
           size,
           cellRender,
+          footerRender,
           strideSelectMode,
         }}
       >

packages/ui/date-picker/src/components/date-range-time-panel.tsx

@@ -13,7 +13,7 @@ interface DateRangeTimePanelProps {
 
 // 选择日期范围，并且希望选择时间
 export const DateRangeTimePanel = (props: DateRangeTimePanelProps) => {
-  const { outDate, onPick, disabledDate, prefixCls } = useContext(DPContext)
+  const { outDate, onPick, disabledDate, prefixCls, footerRender } = useContext(DPContext)
   const { nowIndex, onChangeNowIndex } = props
 
   const [range, setRange] = useState<CalenderSelectedRange>({
@@ -92,6 +92,16 @@ export const DateRangeTimePanel = (props: DateRangeTimePanelProps) => {
     return nowIndex === 0 ? !range.start : !range.end
   }, [nowIndex, range])
 
+  const footer = useMemo(() => {
+    const sureActionContent = (
+      <HiButton type="primary" disabled={isConfirmButtonDisabled} onClick={onConfirmButtonClick}>
+        确认
+      </HiButton>
+    )
+
+    return typeof footerRender === 'function' ? footerRender(sureActionContent) : sureActionContent
+  }, [footerRender, isConfirmButtonDisabled, onConfirmButtonClick])
+
   return (
     <React.Fragment>
       <Panel
@@ -100,11 +110,7 @@ export const DateRangeTimePanel = (props: DateRangeTimePanelProps) => {
         outDate={panelData}
         range={range}
       />
-      <div className={`${prefixCls}__date-range-time-bottom`}>
-        <HiButton type="primary" disabled={isConfirmButtonDisabled} onClick={onConfirmButtonClick}>
-          确认
-        </HiButton>
-      </div>
+      <div className={`${prefixCls}__date-range-time-bottom`}>{footer}</div>
     </React.Fragment>
   )
 }

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

@@ -262,6 +262,10 @@ export interface DatePickerProps extends Omit<HiBaseHTMLProps<'div'>, 'placehold
    * 自定义单元格内容
    */
   cellRender?: (colInfo: CalendarColInfo) => React.ReactNode
+  /**
+   * 自定义渲染页脚
+   */
+  footerRender?: (...actionContents: React.ReactElement[]) => React.ReactNode
   /**
    * 跨月选择模式
    * 'auto' 自动切换模式，跨月选择时自动切换到跨月的日期选择面板；

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import DatePicker from '../src'
+import Button from '@hi-ui/button'
+
+/**
+ * @title 自定义渲染页脚
+ */
+export const FooterRender = () => {
+  return (
+    <>
+      <h1>FooterRender</h1>
+      <div className="date-picker-footer-render__wrap">
+        <DatePicker
+          style={{ width: 240 }}
+          type="daterange"
+          showTime
+          footerRender={(sureActionContent) => (
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                width: '100%',
+              }}
+            >
+              <Button type="secondary" appearance="link">
+                自定义操作
+              </Button>
+              {sureActionContent}
+            </div>
+          )}
+          onChange={(date, dateStr) => {
+            console.log('onChange', date, dateStr)
+          }}
+          onSelect={console.log}
+        />
+      </div>
+    </>
+  )
+}

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

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