From 7d9400562793433c85cabce6735576a648126ce5 Mon Sep 17 00:00:00 2001 From: Guo Yunhe Date: Thu, 10 Oct 2024 11:01:15 +0800 Subject: [PATCH] feat: support prefix (#1060) --- README.md | 1 + assets/index.less | 3 +-- docs/examples/custom-icon.tsx | 2 ++ src/BaseSelect/index.tsx | 3 +++ src/Selector/SingleSelector.tsx | 4 ++-- src/Selector/index.tsx | 3 +++ tests/Multiple.test.tsx | 11 ++++++++++- tests/__snapshots__/Combobox.test.tsx.snap | 20 ++++++++++---------- tests/__snapshots__/ssr.test.tsx.snap | 2 +- 9 files changed, 33 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 6b0c20587..6898d7ce3 100644 --- a/README.md +++ b/README.md @@ -121,6 +121,7 @@ export default () => ( | showAction | actions trigger the dropdown to show | String[]? | - | | autoFocus | focus select after mount | boolean | - | | autoClearSearchValue | auto clear search input value when multiple select is selected/deselected | boolean | true | +| prefix | specify the select prefix icon or text | ReactNode | - | | suffixIcon | specify the select arrow icon | ReactNode | - | | clearIcon | specify the clear icon | ReactNode | - | | removeIcon | specify the remove icon | ReactNode | - | diff --git a/assets/index.less b/assets/index.less index 20088686a..f2eb17b87 100644 --- a/assets/index.less +++ b/assets/index.less @@ -72,6 +72,7 @@ .@{select-prefix}-selection-search { width: 100%; + position: relative; &-input { width: 100%; @@ -102,7 +103,6 @@ // -------------- Multiple --------------- &-multiple .@{select-prefix}-selector { display: flex; - flex-wrap: wrap; padding: 1px; border: 1px solid #000; @@ -122,7 +122,6 @@ .@{select-prefix}-selection-overflow { display: flex; flex-wrap: wrap; - width: 100%; &-item { flex: none; diff --git a/docs/examples/custom-icon.tsx b/docs/examples/custom-icon.tsx index ededd54b5..b82aff553 100644 --- a/docs/examples/custom-icon.tsx +++ b/docs/examples/custom-icon.tsx @@ -103,6 +103,7 @@ class CustomIconComponent extends React.Component { value={value} mode="combobox" backfill + prefix="Foobar" suffixIcon={({ searchValue }) => { if (searchValue) { return '😺'; @@ -193,6 +194,7 @@ class Test extends React.Component { onChange={this.onChange} onFocus={() => console.log('focus')} tokenSeparators={[' ', ',']} + prefix="Foobar" suffixIcon={getSvg(arrowPath)} clearIcon={getSvg(clearPath)} removeIcon={getSvg(clearPath)} diff --git a/src/BaseSelect/index.tsx b/src/BaseSelect/index.tsx index b1390f98b..a2a15e8c7 100644 --- a/src/BaseSelect/index.tsx +++ b/src/BaseSelect/index.tsx @@ -173,6 +173,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri // >>> Icons allowClear?: boolean | { clearIcon?: RenderNode }; + prefix?: React.ReactNode; suffixIcon?: RenderNode; /** * Clear all icon @@ -259,6 +260,7 @@ const BaseSelect = React.forwardRef((props, ref) // Icons allowClear, + prefix, suffixIcon, clearIcon, @@ -795,6 +797,7 @@ const BaseSelect = React.forwardRef((props, ref) inputElement={customizeInputElement} ref={selectorRef} id={id} + prefix={prefix} showSearch={mergedShowSearch} autoClearSearchValue={autoClearSearchValue} mode={mode} diff --git a/src/Selector/SingleSelector.tsx b/src/Selector/SingleSelector.tsx index 7fd7f69be..4fe56b86b 100644 --- a/src/Selector/SingleSelector.tsx +++ b/src/Selector/SingleSelector.tsx @@ -104,6 +104,8 @@ const SingleSelector: React.FC = (props) => { attrs={pickAttrs(props, true)} maxLength={combobox ? maxLength : undefined} /> + {/* Display placeholder */} + {placeholderNode} {/* Display value */} @@ -119,8 +121,6 @@ const SingleSelector: React.FC = (props) => { {item.label} ) : null} - {/* Display placeholder */} - {placeholderNode} ); }; diff --git a/src/Selector/index.tsx b/src/Selector/index.tsx index 8a622bb25..47a59a3ab 100644 --- a/src/Selector/index.tsx +++ b/src/Selector/index.tsx @@ -72,6 +72,7 @@ export interface SelectorProps { disabled?: boolean; placeholder?: React.ReactNode; removeIcon?: RenderNode; + prefix?: React.ReactNode; // Tags maxTagCount?: number | 'responsive'; @@ -110,6 +111,7 @@ const Selector: React.ForwardRefRenderFunction showSearch, tokenWithEnter, disabled, + prefix, autoClearSearchValue, @@ -284,6 +286,7 @@ const Selector: React.ForwardRefRenderFunction onClick={onClick} onMouseDown={onMouseDown} > + {prefix &&
{prefix}
} {selectNode} ); diff --git a/tests/Multiple.test.tsx b/tests/Multiple.test.tsx index e63b67739..bd9230da5 100644 --- a/tests/Multiple.test.tsx +++ b/tests/Multiple.test.tsx @@ -19,7 +19,7 @@ import { keyUp, } from './utils/common'; import allowClearTest from './shared/allowClearTest'; -import { fireEvent, render } from '@testing-library/react'; +import { fireEvent, render, screen } from '@testing-library/react'; describe('Select.Multiple', () => { injectRunAllTimers(jest); @@ -374,6 +374,15 @@ describe('Select.Multiple', () => { expect(container.querySelector('.rc-select-arrow')).toBeTruthy(); }); + it('show static prefix', () => { + render(); + + expect(screen.findByText('Foobar')).toBeTruthy(); + }); + it('block input when fast backspace', () => { jest.useFakeTimers(); const onChange = jest.fn(); diff --git a/tests/__snapshots__/Combobox.test.tsx.snap b/tests/__snapshots__/Combobox.test.tsx.snap index 43deee073..806f9ea71 100644 --- a/tests/__snapshots__/Combobox.test.tsx.snap +++ b/tests/__snapshots__/Combobox.test.tsx.snap @@ -23,11 +23,11 @@ exports[`Select.Combobox renders controlled correctly 1`] = ` type="search" value="" /> - - - Search + + Search + @@ -56,11 +56,11 @@ exports[`Select.Combobox renders correctly 1`] = ` type="search" value="" /> - - - Search + + Search + diff --git a/tests/__snapshots__/ssr.test.tsx.snap b/tests/__snapshots__/ssr.test.tsx.snap index 60c144098..de916d8db 100644 --- a/tests/__snapshots__/ssr.test.tsx.snap +++ b/tests/__snapshots__/ssr.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Select.SSR should work 1`] = `"
"`; +exports[`Select.SSR should work 1`] = `"
"`;