diff --git a/README.md b/README.md index e500f50d5..6bd23b454 100644 --- a/README.md +++ b/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 diff --git a/assets/index.less b/assets/index.less index fb19012f7..0fb1e843b 100644 --- a/assets/index.less +++ b/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 { diff --git a/docs/demo/suffix.md b/docs/demo/suffix.md new file mode 100644 index 000000000..b45b57fb2 --- /dev/null +++ b/docs/demo/suffix.md @@ -0,0 +1,2 @@ +## suffix + \ No newline at end of file diff --git a/docs/examples/suffix.tsx b/docs/examples/suffix.tsx new file mode 100644 index 000000000..0b7ce74fc --- /dev/null +++ b/docs/examples/suffix.tsx @@ -0,0 +1,15 @@ +import React, { FC } from 'react'; +import Select from 'rc-select'; + +const SuffixDemo: FC = () => { + return ( + + ) +} + +export default SuffixDemo; \ No newline at end of file diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx index 23f4b2c81..a54d440f3 100644 --- a/src/BaseSelect.tsx +++ b/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>> Selector @@ -815,6 +820,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref{suffix}} ); } diff --git a/src/Select.tsx b/src/Select.tsx index 8ac3c8937..736bfee52 100644 --- a/src/Select.tsx +++ b/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'; diff --git a/src/Selector/index.tsx b/src/Selector/index.tsx index 3bd34c4df..cdb2fe250 100644 --- a/src/Selector/index.tsx +++ b/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; + + suffix?: ReactNode; } const Selector: React.RefForwardingComponent = (props, ref) => { diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 2105312e0..46a91439b 100644 --- a/tests/Select.test.tsx +++ b/tests/Select.test.tsx @@ -1789,4 +1789,12 @@ describe('Select.Basic', () => { .visibility, ).toBe('hidden'); }); + + it('should support suffix', () => { + const wrapper = mount(