feat: support suffix (#711)

Author: MadCcc

README.md

@@ -128,6 +128,7 @@ export default () => (
 | loading | show loading icon in arrow | Boolean | false |
 | virtual | Disable virtual scroll | Boolean | true |
 | direction | direction of dropdown | 'ltr' \| 'rtl' | 'ltr' |
+| suffix | suffix of select input | ReactNode | - |
 
 ### Methods
 

assets/index.less

@@ -253,6 +253,18 @@
       color: #999;
     }
   }
+
+  &-has-suffix {
+    .@{select-prefix}-arrow {
+      right: 16px;
+    }
+  }
+
+  &-suffix {
+    position: absolute;
+    right: 4px;
+    top: 0;
+  }
 }
 
 .@{select-prefix}-selection__choice-zoom {

docs/demo/suffix.md

@@ -0,0 +1,2 @@
+## suffix
+<code src="../examples/suffix.tsx">

docs/examples/suffix.tsx

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import Select from 'rc-select';
+
+const SuffixDemo: FC = () => {
+  return (
+    <Select suffix=":)">
+      {Array(10).fill(1).map((item, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Select.Option key={`pick me ${index}`} value={index}>{`pick me ${index}`}</Select.Option>
+      ))}
+    </Select>
+  )
+}
+
+export default SuffixDemo;

src/BaseSelect.tsx

@@ -16,6 +16,7 @@ import useDelayReset from './hooks/useDelayReset';
 import TransBtn from './TransBtn';
 import useLock from './hooks/useLock';
 import { BaseSelectContext } from './hooks/useBaseProps';
+import type { ReactNode } from 'react';
 
 const DEFAULT_OMIT_PROPS = [
   'value',
@@ -169,6 +170,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
   clearIcon?: RenderNode;
   /** Selector remove icon */
   removeIcon?: RenderNode;
+  suffix?: ReactNode;
 
   // >>> Dropdown
   animation?: string;
@@ -273,6 +275,8 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
     onKeyDown,
     onMouseDown,
 
+    suffix,
+
     // Rest Props
     ...restProps
   } = props;
@@ -718,6 +722,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
     [`${prefixCls}-open`]: mergedOpen,
     [`${prefixCls}-customize-input`]: customizeInputElement,
     [`${prefixCls}-show-search`]: mergedShowSearch,
+    [`${prefixCls}-has-suffix`]: suffix,
   });
 
   // >>> Selector
@@ -815,6 +820,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
 
         {arrowNode}
         {clearNode}
+        {suffix && <span className={`${prefixCls}-suffix`}>{suffix}</span>}
       </div>
     );
   }

src/Select.tsx

@@ -32,12 +32,17 @@
 import * as React from 'react';
 import warning from 'rc-util/lib/warning';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import type {
+  BaseSelectProps,
+  BaseSelectPropsWithoutPrivate,
+  BaseSelectRef,
+  DisplayValueType,
+  RenderNode,
+} from './BaseSelect';
 import BaseSelect, { isMultiple } from './BaseSelect';
-import type { DisplayValueType, RenderNode } from './BaseSelect';
 import OptionList from './OptionList';
 import Option from './Option';
 import OptGroup from './OptGroup';
-import type { BaseSelectRef, BaseSelectPropsWithoutPrivate, BaseSelectProps } from './BaseSelect';
 import useOptions from './hooks/useOptions';
 import SelectContext from './SelectContext';
 import useId from './hooks/useId';

src/Selector/index.tsx

@@ -9,6 +9,7 @@
  */
 
 import * as React from 'react';
+import type { ReactNode } from 'react';
 import { useRef } from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import type { ScrollTo } from 'rc-virtual-list/lib/List';
@@ -93,6 +94,8 @@ export interface SelectorProps {
    * This may be removed after React provides replacement of `findDOMNode`
    */
   domRef: React.Ref<HTMLDivElement>;
+
+  suffix?: ReactNode;
 }
 
 const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> = (props, ref) => {

tests/Select.test.tsx

@@ -1789,4 +1789,12 @@ describe('Select.Basic', () => {
         .visibility,
     ).toBe('hidden');
   });
+
+  it('should support suffix', () => {
+    const wrapper = mount(<Select suffix=":)" />);
+
+    expect(wrapper.find('.rc-select-has-suffix')).toBeTruthy();
+    expect(wrapper.find('.rc-select-suffix')).toBeTruthy();
+    expect(wrapper.find('.rc-select-suffix').text()).toEqual(':)');
+  });
 });