feat: add suffix and deprecate suffixIcon

Author: QDyanbing

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