feat: support prefix prop (#884)

Author: guoyunhe

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>}

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)}

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>
   );

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;

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(

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