feat: add suffix and deprecate suffixIcon

README.md

@@ -126,7 +126,7 @@ Then open `http://localhost:8000`.
 | showTime | `boolean \| SharedTimeProps` | `false` | Enable time selection. |
 | showToday | `boolean` | - | Show the "today" button. |
 | styles | `SemanticStyles` | - | Semantic styles for root and popup slots. |
-| suffixIcon | `ReactNode` | - | Custom suffix icon. |
+| suffix | `ReactNode` | - | Custom suffix. |
 | onOpenChange | `(open: boolean) => void` | - | Triggered when popup open state changes. |
 | onPanelChange | `(value, mode) => void` | - | Triggered when panel mode changes. |
 

README.zh-CN.md

@@ -126,7 +126,7 @@ npm start
 | showTime | `boolean \| SharedTimeProps` | `false` | 启用时间选择。 |
 | showToday | `boolean` | - | 显示“今天”按钮。 |
 | styles | `SemanticStyles` | - | 根槽和弹层槽的语义样式。 |
-| suffixIcon | `ReactNode` | - | 自定义后缀图标。 |
+| suffix | `ReactNode` | - | 自定义后缀。 |
 | onOpenChange | `(open: boolean) => void` | - | 当弹层窗口打开状态改变时触发。 |
 | onPanelChange | `(value, mode) => void` | - | 当面板模式改变时触发。 |
 

docs/examples/basic.tsx

@@ -54,7 +54,7 @@ export default () => {
           <Picker<Moment>
             {...sharedProps}
             locale={zhCN}
-            suffixIcon="SUFFIX"
+            suffix="SUFFIX"
             rootClassName="bamboo"
             className="little"
             classNames={{

docs/examples/customize.tsx

@@ -123,7 +123,7 @@ class Customize extends React.Component<{}, DateRangeState> {
               allowClear
               prefix="Foobar"
               clearIcon={<span>X</span>}
-              suffixIcon={<span>O</span>}
+              suffix={<span>O</span>}
               prevIcon={<span>&lt;</span>}
               nextIcon={<span>&gt;</span>}
               superPrevIcon={<span>&lt;&lt;</span>}

docs/examples/range.tsx

@@ -61,7 +61,7 @@ export default () => {
             ref={rangePickerRef}
             defaultValue={[moment('1990-09-03'), moment('1989-11-28')]}
             clearIcon={<span>X</span>}
-            suffixIcon={<span>O</span>}
+            suffix={<span>O</span>}
             presets={[
               {
                 label: 'Last week',

docs/examples/time.tsx

@@ -33,7 +33,7 @@ export default () => {
       <Picker
         classNames={testClassNames}
         prefix="prefix"
-        suffixIcon="suffix"
+        suffix="suffix"
         defaultValue={defaultValue}
         picker="time"
         locale={zhCN}

src/PickerInput/RangePicker.tsx

@@ -218,7 +218,7 @@ function RangePicker<DateType extends object = any>(
     // Format
     inputReadOnly,
 
-    suffixIcon,
+    suffix,
 
     // Focus
     onFocus,
@@ -790,7 +790,7 @@ function RangePicker<DateType extends object = any>(
           className={clsx(filledProps.className, rootClassName, mergedClassNames.root)}
           style={{ ...mergedStyles.root, ...filledProps.style }}
           // Icon
-          suffixIcon={suffixIcon}
+          suffix={suffix}
           // Active
           activeIndex={focused || mergedOpen ? activeIndex : null}
           activeHelp={!!internalHoverValues}

src/PickerInput/Selector/Input.tsx

@@ -31,7 +31,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   active?: boolean;
   /** Used for single picker only */
   showActiveCls?: boolean;
-  suffixIcon?: React.ReactNode;
+  suffix?: React.ReactNode;
   value?: string;
   onChange: (value: string) => void;
   onSubmit: VoidFunction;
@@ -53,7 +53,7 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
     className,
     active,
     showActiveCls = true,
-    suffixIcon,
+    suffix,
     format,
     validateFormat,
     onChange,
@@ -417,7 +417,7 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
         className={classNames.input}
         style={styles.input}
       />
-      <Icon icon={suffixIcon} />
+      <Icon icon={suffix} />
       {clearIcon}
     </div>
   );

src/PickerInput/Selector/RangeSelector.tsx

@@ -61,7 +61,7 @@ function RangeSelector<DateType extends object = any>(
 
     prefix,
     clearIcon,
-    suffixIcon,
+    suffix,
     separator = '~',
     activeIndex,
     activeHelp,
@@ -270,7 +270,7 @@ function RangeSelector<DateType extends object = any>(
           date-range="end"
         />
         <div className={`${prefixCls}-active-bar`} style={activeBarStyle} />
-        <Icon icon={suffixIcon} />
+        <Icon icon={suffix} />
         {showClear && <ClearIcon icon={clearIcon} onClear={onClear} />}
       </div>
     </ResizeObserver>

src/PickerInput/Selector/SingleSelector/index.tsx

@@ -46,7 +46,7 @@ function SingleSelector<DateType extends object = any>(
 
     prefix,
     clearIcon,
-    suffixIcon,
+    suffix,
     activeHelp,
     allHelp,
 
@@ -184,7 +184,7 @@ function SingleSelector<DateType extends object = any>(
         autoFocus={autoFocus}
         tabIndex={tabIndex}
       />
-      <Icon icon={suffixIcon} />
+      <Icon icon={suffix} />
       {showClear && <ClearIcon icon={clearIcon} onClear={onClear} />}
     </>
   ) : (
@@ -193,7 +193,7 @@ function SingleSelector<DateType extends object = any>(
       {...getInputProps()}
       autoFocus={autoFocus}
       tabIndex={tabIndex}
-      suffixIcon={suffixIcon}
+      suffix={suffix}
       clearIcon={showClear && <ClearIcon icon={clearIcon} onClear={onClear} />}
       showActiveCls={false}
     />

src/PickerInput/SinglePicker.tsx

@@ -181,7 +181,7 @@ function Picker<DateType extends object = any>(
     // Format
     inputReadOnly,
 
-    suffixIcon,
+    suffix,
     removeIcon,
     tagRender,
 
@@ -694,7 +694,7 @@ function Picker<DateType extends object = any>(
           className={clsx(filledProps.className, rootClassName, mergedClassNames.root)}
           style={{ ...mergedStyles.root, ...filledProps.style }}
           // Icon
-          suffixIcon={suffixIcon}
+          suffix={suffix}
           removeIcon={removeIcon}
           tagRender={tagRender}
           // Active

src/PickerInput/hooks/useFilledProps.ts

@@ -24,6 +24,8 @@ type PickedProps<DateType extends object = any> = Pick<
   | 'order'
   | 'components'
   | 'inputRender'
+  | 'suffix'
+  | 'suffixIcon'
   | 'clearIcon'
   | 'allowClear'
   | 'needConfirm'
@@ -103,6 +105,8 @@ export default function useFilledProps<
     order = true,
     components = {},
     inputRender,
+    suffix,
+    suffixIcon,
     allowClear,
     clearIcon,
     needConfirm,
@@ -171,6 +175,7 @@ export default function useFilledProps<
       classNames,
       order,
       components: { input: inputRender, ...components },
+      suffix: suffix ?? suffixIcon,
       clearIcon: fillClearIcon(prefixCls, allowClear, clearIcon),
       showTime: mergedShowTime,
       value: values,

src/interface.tsx

@@ -316,13 +316,7 @@ export type SemanticName = 'root' | 'prefix' | 'input' | 'suffix';
 export type PreviewValueType = 'hover';
 
 export type PanelSemanticName =
-  | 'root'
-  | 'header'
-  | 'body'
-  | 'content'
-  | 'item'
-  | 'footer'
-  | 'container';
+  'root' | 'header' | 'body' | 'content' | 'item' | 'footer' | 'container';
 
 export interface SharedPickerProps<DateType extends object = any>
   extends
@@ -374,6 +368,8 @@ export interface SharedPickerProps<DateType extends object = any>
 
   // Icons
   prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  /** @deprecated Please use `suffix` instead. */
   suffixIcon?: React.ReactNode;
   allowClear?:
     | boolean
@@ -498,6 +494,8 @@ export interface SelectorProps<DateType = any> extends SharedHTMLAttrs {
 
   prefix?: React.ReactNode;
   clearIcon?: React.ReactNode;
+  suffix?: React.ReactNode;
+  /** @deprecated Please use `suffix` instead. */
   suffixIcon?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;

tests/picker.spec.tsx

@@ -396,7 +396,7 @@ describe('Picker.Basic', () => {
   it('not fire blur when click inside and is in focus', () => {
     const onBlur = jest.fn();
     const { container } = render(
-      <DayPicker onBlur={onBlur} suffixIcon={<div className="suffix-icon">X</div>} />,
+      <DayPicker onBlur={onBlur} suffix={<div className="suffix-icon">X</div>} />,
     );
 
     const $input = container.querySelector('input');
@@ -597,7 +597,7 @@ describe('Picker.Basic', () => {
     render(
       <DayPicker
         defaultValue={getDay('1990-09-03')}
-        suffixIcon={<span className="suffix-icon" />}
+        suffix={<span className="suffix-icon" />}
         clearIcon={<span className="suffix-icon" />}
         allowClear
       />,
@@ -608,6 +608,24 @@ describe('Picker.Basic', () => {
     );
   });
 
+  it('supports legacy suffixIcon and prefers suffix', () => {
+    const { container, rerender } = render(
+      <DayPicker suffixIcon={<span className="legacy-suffix" />} />,
+    );
+
+    expect(container.querySelector('.legacy-suffix')).toBeInTheDocument();
+
+    rerender(
+      <DayPicker
+        suffix={<span className="new-suffix" />}
+        suffixIcon={<span className="legacy-suffix" />}
+      />,
+    );
+
+    expect(container.querySelector('.new-suffix')).toBeInTheDocument();
+    expect(container.querySelector('.legacy-suffix')).not.toBeInTheDocument();
+  });
+
   it('inputRender', () => {
     render(<DayPicker inputRender={(props) => <input data-customize="yes" {...props} />} />);
 
@@ -1483,7 +1501,7 @@ describe('Picker.Basic', () => {
           popup: testPopupStyles,
         }}
         prefix="prefix"
-        suffixIcon="suffix"
+        suffix="suffix"
         defaultValue={defaultValue}
         picker="time"
         locale={zhCN}

tests/range.spec.tsx

@@ -829,7 +829,7 @@ describe('Picker.Range', () => {
     const { container } = render(
       <DayRangePicker
         defaultValue={[getDay('1990-09-03'), getDay('1990-09-03')]}
-        suffixIcon={<span className="suffix-icon" />}
+        suffix={<span className="suffix-icon" />}
         clearIcon={<span className="suffix-icon" />}
         allowClear
       />,
@@ -1870,7 +1870,7 @@ describe('Picker.Range', () => {
         allowClear
         defaultValue={[getDay('1990-09-03'), getDay('1989-11-28')]}
         clearIcon={<span>X</span>}
-        suffixIcon={<span>O</span>}
+        suffix={<span>O</span>}
       />,
     );
     openPicker(container, 1);
@@ -1906,7 +1906,7 @@ describe('Picker.Range', () => {
         allowClear
         defaultValue={[getDay('1990-09-03'), getDay('1989-11-28')]}
         clearIcon={<span>X</span>}
-        suffixIcon={<span>O</span>}
+        suffix={<span>O</span>}
       />,
     );
     openPicker(container, 1);
@@ -1969,7 +1969,7 @@ describe('Picker.Range', () => {
         allowClear
         defaultValue={[getDay('1990-09-03'), getDay('1989-11-28')]}
         clearIcon={<span>X</span>}
-        suffixIcon={<span>O</span>}
+        suffix={<span>O</span>}
       />,
     );
     openPicker(container, 1);