feat: support prefix

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%;
@@ -101,7 +102,6 @@
   // -------------- Multiple ---------------
   &-multiple .@{select-prefix}-selector {
     display: flex;
-    flex-wrap: wrap;
     padding: 1px;
     border: 1px solid #000;
 
@@ -121,7 +121,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?: RenderNode;
   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?: RenderNode;
 
   // Tags
   maxTagCount?: number | 'responsive';
@@ -110,6 +111,7 @@ const Selector: React.ForwardRefRenderFunction<RefSelectorProps, SelectorProps>
     showSearch,
     tokenWithEnter,
     disabled,
+    prefix,
 
     autoClearSearchValue,
 
@@ -269,6 +271,7 @@ const Selector: React.ForwardRefRenderFunction<RefSelectorProps, SelectorProps>
       onClick={onClick}
       onMouseDown={onMouseDown}
     >
+      {prefix && <div className={`${prefixCls}-prefix`}>{typeof prefix === 'function' ? prefix(props): prefix}</div>}
       {selectNode}
     </div>
   );

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