feat: support prefix (#1060)

Author: guoyunhe

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

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;

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

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<BaseSelectRef, BaseSelectProps>((props, ref)
 
     // Icons
     allowClear,
+    prefix,
     suffixIcon,
     clearIcon,
 
@@ -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}

src/Selector/SingleSelector.tsx

@@ -104,6 +104,8 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
           attrs={pickAttrs(props, true)}
           maxLength={combobox ? maxLength : undefined}
         />
+        {/* Display placeholder */}
+        {placeholderNode}
       </span>
 
       {/* Display value */}
@@ -119,8 +121,6 @@ const SingleSelector: React.FC<SelectorProps> = (props) => {
           {item.label}
         </span>
       ) : null}
-      {/* Display placeholder */}
-      {placeholderNode}
     </>
   );
 };

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<RefSelectorProps, SelectorProps>
     showSearch,
     tokenWithEnter,
     disabled,
+    prefix,
 
     autoClearSearchValue,
 
@@ -284,6 +286,7 @@ const Selector: React.ForwardRefRenderFunction<RefSelectorProps, SelectorProps>
       onClick={onClick}
       onMouseDown={onMouseDown}
     >
+      {prefix && <div className={`${prefixCls}-prefix`}>{prefix}</div>}
       {selectNode}
     </div>
   );

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(<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();

tests/__snapshots__/Combobox.test.tsx.snap

@@ -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>
@@ -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>

tests/__snapshots__/ssr.test.tsx.snap

@@ -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>"`;