Skip to content

Commit

Permalink
feat: support prefix
Browse files Browse the repository at this point in the history
  • Loading branch information
guoyunhe committed Oct 10, 2024
1 parent 7925a25 commit f4a53f3
Show file tree
Hide file tree
Showing 9 changed files with 33 additions and 16 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 | - |
Expand Down
3 changes: 1 addition & 2 deletions assets/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@

.@{select-prefix}-selection-search {
width: 100%;
position: relative;

&-input {
width: 100%;
Expand Down Expand Up @@ -102,7 +103,6 @@
// -------------- Multiple ---------------
&-multiple .@{select-prefix}-selector {
display: flex;
flex-wrap: wrap;
padding: 1px;
border: 1px solid #000;

Expand All @@ -122,7 +122,6 @@
.@{select-prefix}-selection-overflow {
display: flex;
flex-wrap: wrap;
width: 100%;

&-item {
flex: none;
Expand Down
2 changes: 2 additions & 0 deletions docs/examples/custom-icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ class CustomIconComponent extends React.Component {
value={value}
mode="combobox"
backfill
prefix="Foobar"
suffixIcon={({ searchValue }) => {
if (searchValue) {
return '😺';
Expand Down Expand Up @@ -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)}
Expand Down
3 changes: 3 additions & 0 deletions src/BaseSelect/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri

// >>> Icons
allowClear?: boolean | { clearIcon?: RenderNode };
prefix?: React.ReactNode;
suffixIcon?: RenderNode;
/**
* Clear all icon
Expand Down Expand Up @@ -259,6 +260,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)

// Icons
allowClear,
prefix,
suffixIcon,
clearIcon,

Expand Down Expand Up @@ -795,6 +797,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
inputElement={customizeInputElement}
ref={selectorRef}
id={id}
prefix={prefix}
showSearch={mergedShowSearch}
autoClearSearchValue={autoClearSearchValue}
mode={mode}
Expand Down
4 changes: 2 additions & 2 deletions src/Selector/SingleSelector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,8 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
attrs={pickAttrs(props, true)}
maxLength={combobox ? maxLength : undefined}
/>
{/* Display placeholder */}
{placeholderNode}
</span>

{/* Display value */}
Expand All @@ -119,8 +121,6 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
{item.label}
</span>
) : null}
{/* Display placeholder */}
{placeholderNode}
</>
);
};
Expand Down
3 changes: 3 additions & 0 deletions src/Selector/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export interface SelectorProps {
disabled?: boolean;
placeholder?: React.ReactNode;
removeIcon?: RenderNode;
prefix?: React.ReactNode;

// Tags
maxTagCount?: number | 'responsive';
Expand Down Expand Up @@ -110,6 +111,7 @@ const Selector: React.ForwardRefRenderFunction<RefSelectorProps, SelectorProps>
showSearch,
tokenWithEnter,
disabled,
prefix,

autoClearSearchValue,

Expand Down Expand Up @@ -284,6 +286,7 @@ const Selector: React.ForwardRefRenderFunction<RefSelectorProps, SelectorProps>
onClick={onClick}
onMouseDown={onMouseDown}
>
{prefix && <div className={`${prefixCls}-prefix`}>{prefix}</div>}
{selectNode}
</div>
);
Expand Down
11 changes: 10 additions & 1 deletion tests/Multiple.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -374,6 +374,15 @@ describe('Select.Multiple', () => {
expect(container.querySelector('.rc-select-arrow')).toBeTruthy();
});

it('show static prefix', () => {
render(<Select mode="multiple" value={['']} prefix="Foobar">
<Option value={1}>1</Option>
<Option value={2}>2</Option>
</Select>);

expect(screen.findByText('Foobar')).toBeTruthy();
});

it('block input when fast backspace', () => {
jest.useFakeTimers();
const onChange = jest.fn();
Expand Down
20 changes: 10 additions & 10 deletions tests/__snapshots__/Combobox.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ exports[`Select.Combobox renders controlled correctly 1`] = `
type="search"
value=""
/>
</span>
<span
class="rc-select-selection-placeholder"
>
Search
<span
class="rc-select-selection-placeholder"
>
Search
</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -56,11 +56,11 @@ exports[`Select.Combobox renders correctly 1`] = `
type="search"
value=""
/>
</span>
<span
class="rc-select-selection-placeholder"
>
Search
<span
class="rc-select-selection-placeholder"
>
Search
</span>
</span>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion tests/__snapshots__/ssr.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Select.SSR should work 1`] = `"<div class="rc-select rc-select-single"><div class="rc-select-selector"><span class="rc-select-selection-search"><input type="search" autoComplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="undefined_list" aria-autocomplete="list" aria-controls="undefined_list" readonly="" unselectable="on" style="opacity:0" value=""/></span><span class="rc-select-selection-placeholder"></span></div></div>"`;
exports[`Select.SSR should work 1`] = `"<div class="rc-select rc-select-single"><div class="rc-select-selector"><span class="rc-select-selection-search"><input type="search" autoComplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="undefined_list" aria-autocomplete="list" aria-controls="undefined_list" readonly="" unselectable="on" style="opacity:0" value=""/><span class="rc-select-selection-placeholder"></span></span></div></div>"`;

0 comments on commit f4a53f3

Please sign in to comment.