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

XiaoMi · Oct 20, 2023 · ddb8d0c · ddb8d0c
1 parent 28ef7b9
commit ddb8d0c
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 6 deletions.
diff --git a/.changeset/popular-cameras-burn.md b/.changeset/popular-cameras-burn.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/date-picker": minor
+---
+
+feat: add footerRender api
diff --git a/.changeset/red-carrots-jam.md b/.changeset/red-carrots-jam.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+DatePicker feat: add footerRender api
diff --git a/packages/ui/date-picker/src/DatePicker.tsx b/packages/ui/date-picker/src/DatePicker.tsx
@@ -74,6 +74,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
       invalid = false,
       onClose,
       cellRender,
+      footerRender,
       ...otherProps
     },
     ref
@@ -86,13 +87,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])
@@ -354,6 +357,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
           />
         )
       }
+
       return (
         <div className={popperCls}>
           {type.includes('range') || type === 'timeperiod' ? (
@@ -416,6 +420,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
           isInDateRangeTimeMode,
           size,
           cellRender,
+          footerRender,
         }}
       >
         <div className={cx(prefixCls, className)} {...otherProps}>

diff --git a/packages/ui/date-picker/src/components/date-range-time-panel.tsx b/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>
   )
 }
diff --git a/packages/ui/date-picker/src/types.ts b/packages/ui/date-picker/src/types.ts
@@ -261,4 +261,8 @@ export interface DatePickerProps extends Omit<HiBaseHTMLProps<'div'>, 'placehold
    * 自定义单元格内容
    */
   cellRender?: (colInfo: CalendarColInfo) => React.ReactNode
+  /**
+   * 自定义渲染页脚
+   */
+  footerRender?: (...actionContents: React.ReactElement[]) => React.ReactNode
 }
diff --git a/packages/ui/date-picker/stories/footer-render.stories.tsx b/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>
+    </>
+  )
+}
diff --git a/packages/ui/date-picker/stories/index.stories.tsx b/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',