From 070ef284c696853ee556a800fbec628c9731074b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B9=A4=E4=BB=99?= <guoyunhe.gyh@alibaba-inc.com>
Date: Mon, 21 Oct 2024 14:33:57 +0800
Subject: [PATCH] feat: support prefix prop

---
 docs/examples/customize.tsx                       |  1 +
 src/PickerInput/Selector/RangeSelector.tsx        |  2 ++
 src/PickerInput/Selector/SingleSelector/index.tsx |  2 ++
 src/interface.tsx                                 |  3 +++
 tests/picker.spec.tsx                             | 10 ++++++++++
 tests/range.spec.tsx                              | 10 ++++++++++
 6 files changed, 28 insertions(+)

diff --git a/docs/examples/customize.tsx b/docs/examples/customize.tsx
index c94e499a4..a60fc597d 100644
--- a/docs/examples/customize.tsx
+++ b/docs/examples/customize.tsx
@@ -121,6 +121,7 @@ class Customize extends React.Component<{}, DateRangeState> {
               // format="YYYY/MM/DD"
               format={['YYYY-MM-DD', 'YYYY/MM/DD']}
               allowClear
+              prefix="Foobar"
               clearIcon={<span>X</span>}
               suffixIcon={<span>O</span>}
               prevIcon={<span>&lt;</span>}
diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx
index 96124cf29..7cd36bd29 100644
--- a/src/PickerInput/Selector/RangeSelector.tsx
+++ b/src/PickerInput/Selector/RangeSelector.tsx
@@ -52,6 +52,7 @@ function RangeSelector<DateType extends object = any>(
   const {
     id,
 
+    prefix,
     clearIcon,
     suffixIcon,
     separator = '~',
@@ -238,6 +239,7 @@ function RangeSelector<DateType extends object = any>(
           onMouseDown?.(e);
         }}
       >
+        {prefix && <div className={`${prefixCls}-prefix`}>{prefix}</div>}
         <Input
           ref={inputStartRef}
           {...getInputProps(0)}
diff --git a/src/PickerInput/Selector/SingleSelector/index.tsx b/src/PickerInput/Selector/SingleSelector/index.tsx
index 5cb0cb900..5efc84daf 100644
--- a/src/PickerInput/Selector/SingleSelector/index.tsx
+++ b/src/PickerInput/Selector/SingleSelector/index.tsx
@@ -43,6 +43,7 @@ function SingleSelector<DateType extends object = any>(
 
     open,
 
+    prefix,
     clearIcon,
     suffixIcon,
     activeHelp,
@@ -224,6 +225,7 @@ function SingleSelector<DateType extends object = any>(
         onMouseDown?.(e);
       }}
     >
+      {prefix && <div className={`${prefixCls}-prefix`}>{prefix}</div>}
       {selectorNode}
     </div>
   );
diff --git a/src/interface.tsx b/src/interface.tsx
index d43fe1cb7..02b055030 100644
--- a/src/interface.tsx
+++ b/src/interface.tsx
@@ -302,6 +302,7 @@ export type SharedHTMLAttrs = Omit<
   | 'max'
   | 'onKeyDown'
   | 'size'
+  | 'prefix'
 >;
 
 export type PickerFocusEventHandler = (e: React.FocusEvent<HTMLElement>, info: BaseInfo) => void;
@@ -354,6 +355,7 @@ export interface SharedPickerProps<DateType extends object = any>
       };
 
   // Icons
+  prefix?: React.ReactNode;
   suffixIcon?: React.ReactNode;
   allowClear?:
     | boolean
@@ -468,6 +470,7 @@ export type OnOpenChange = (open: boolean, config?: OpenConfig) => void;
 export interface SelectorProps<DateType = any> extends SharedHTMLAttrs {
   picker: PickerMode;
 
+  prefix?: React.ReactNode;
   clearIcon?: React.ReactNode;
   suffixIcon?: React.ReactNode;
   className?: string;
diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
index eb8a58b22..227b31172 100644
--- a/tests/picker.spec.tsx
+++ b/tests/picker.spec.tsx
@@ -582,6 +582,16 @@ describe('Picker.Basic', () => {
     });
   });
 
+  it('prefix', () => {
+    render(
+      <DayPicker
+        prefix={<span className="prefix" />}
+        allowClear
+      />,
+    );
+    expect(document.querySelector('.prefix')).toBeInTheDocument();
+  });
+
   it('icon', () => {
     expect(errorSpy).not.toHaveBeenCalled();
     render(
diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
index a9c87fb7d..db5660154 100644
--- a/tests/range.spec.tsx
+++ b/tests/range.spec.tsx
@@ -704,6 +704,16 @@ describe('Picker.Range', () => {
     expect(isOpen()).toBeFalsy();
   });
 
+  it('prefix', () => {
+    render(
+      <DayRangePicker
+        prefix={<span className="prefix" />}
+        allowClear
+      />,
+    );
+    expect(document.querySelector('.prefix')).toBeInTheDocument();
+  });
+
   it('icon', () => {
     const { container } = render(
       <DayRangePicker