feat(date-picker): 新增前缀后缀内容扩展(#2894)

.changeset/cyan-rules-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/date-picker": minor
+---
+
+feat: 新增前缀后缀内容扩展

.changeset/funny-zebras-pretend.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(date-picker): 新增前缀后缀内容扩展

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

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

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

@@ -15,6 +15,7 @@ const Root = ({
   setAttachEl,
   dateRangeTimePanelNow,
   invalid,
+  prefix,
 }: {
   onTrigger: (index: number) => void
   onClear: () => void
@@ -23,6 +24,7 @@ const Root = ({
   inputChangeEvent: InputChangeEvent
   dateRangeTimePanelNow: number
   invalid: boolean
+  prefix: React.ReactNode
 }) => {
   const {
     i18n,
@@ -136,6 +138,7 @@ const Root = ({
   return (
     <div className={_cls} ref={setAttachEl}>
       <div className={`${prefixCls}__picker__wrapper`}>
+        {prefix ? <span className={`${prefixCls}__prefix`}>{prefix}</span> : null}
         <div
           className={cx(
             `${prefixCls}__input-selector`,

packages/ui/date-picker/src/styles/date-picker.scss

@@ -234,6 +234,16 @@ $calendar-large-background-border-radius: $calendar-large-indicator-border-radiu
     overflow: hidden;
   }
 
+  &__prefix {
+    display: inline-flex;
+    margin-left: use-spacing(6);
+    align-items: center;
+    flex-shrink: 0;
+    color: use-color('gray', 700);
+    font-size: inherit;
+    text-align: center;
+  }
+
   &__input-selector {
     display: flex;
     border-radius: use-border-radius('normal');

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

@@ -283,4 +283,8 @@ export interface DatePickerProps extends Omit<HiBaseHTMLProps<'div'>, 'placehold
    * @default 'auto'
    */
   strideSelectMode?: 'auto' | 'fixed'
+  /**
+   * 选择框前置内容
+   */
+  prefix?: React.ReactNode
 }

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import DatePicker from '../src'
+import { AppStoreOutlined } from '@hi-ui/icons'
+
+/**
+ * @title 前置后置内容扩展
+ */
+export const Addon = () => {
+  return (
+    <div className="date-picker-addon__wrap">
+      <h2>Addon</h2>
+      <DatePicker
+        style={{ width: 240 }}
+        onChange={(date, dateStr) => {
+          console.log('onChange', date, dateStr)
+        }}
+        onSelect={console.log}
+        prefix={<AppStoreOutlined />}
+      />
+    </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 './addon.stories'
 
 export default {
   title: 'Data Input/DatePicker',