feat: support semantic for baseSelect (react-component#1133)

* feat: support semantic for baseSelect

* fix

* lint fix

* add test

* fix

* rm

* refactor: Remove SelectContext call from BaseSelect

* chore: fix lint

---------

Co-authored-by: 二货机器人 <[email protected]>

Author: thinkasany

src/BaseSelect/index.tsx

@@ -1,5 +1,5 @@
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
-import classNames from 'classnames';
+import cls from 'classnames';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
 import isMobile from '@rc-component/util/lib/isMobile';
@@ -27,8 +27,6 @@ import type { RefTriggerProps } from '../SelectTrigger';
 import SelectTrigger from '../SelectTrigger';
 import TransBtn from '../TransBtn';
 import { getSeparatedContent, isValidCount } from '../utils/valueUtil';
-import SelectContext from '../SelectContext';
-import type { SelectContextProps } from '../SelectContext';
 import Polite from './Polite';
 export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input';
 
@@ -130,22 +128,27 @@ export interface BaseSelectPrivateProps {
 export type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSelectPrivateProps>;
 
 export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttributes {
+  // Style
   className?: string;
   style?: React.CSSProperties;
   classNames?: Partial<Record<BaseSelectSemanticName, string>>;
   styles?: Partial<Record<BaseSelectSemanticName, React.CSSProperties>>;
-  title?: string;
+
+  // Selector
   showSearch?: boolean;
   tagRender?: (props: CustomTagProps) => React.ReactElement;
   direction?: 'ltr' | 'rtl';
-  maxLength?: number;
-  showScrollBar?: boolean | 'optional';
+  autoFocus?: boolean;
+  placeholder?: React.ReactNode;
+  maxCount?: number;
+
   // MISC
+  title?: string;
   tabIndex?: number;
-  autoFocus?: boolean;
   notFoundContent?: React.ReactNode;
-  placeholder?: React.ReactNode;
   onClear?: () => void;
+  maxLength?: number;
+  showScrollBar?: boolean | 'optional';
 
   choiceTransitionName?: string;
 
@@ -224,6 +227,8 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     id,
     prefixCls,
     className,
+    styles,
+    classNames,
     showSearch,
     tagRender,
     showScrollBar = 'optional',
@@ -236,6 +241,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     emptyOptions,
     notFoundContent = 'Not Found',
     onClear,
+    maxCount,
 
     // Mode
     mode,
@@ -408,15 +414,8 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     [tokenSeparators],
   );
 
-  const {
-    maxCount,
-    rawValues,
-    classNames: selectClassNames,
-    styles,
-  } = React.useContext<SelectContextProps>(SelectContext) || {};
-
   const onInternalSearch = (searchText: string, fromTyping: boolean, isCompositing: boolean) => {
-    if (multiple && isValidCount(maxCount) && rawValues?.size >= maxCount) {
+    if (multiple && isValidCount(maxCount) && displayValues.length >= maxCount) {
       return;
     }
     let ret = true;
@@ -426,7 +425,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     const separatedList = getSeparatedContent(
       searchText,
       tokenSeparators,
-      isValidCount(maxCount) ? maxCount - rawValues.size : undefined,
+      isValidCount(maxCount) ? maxCount - displayValues.length : undefined,
     );
 
     // Check if match the `tokenSeparators`
@@ -703,6 +702,8 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       multiple,
       toggleOpen: onToggleOpen,
       showScrollBar,
+      styles,
+      classNames,
     }),
     [
       props,
@@ -714,6 +715,8 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       multiple,
       onToggleOpen,
       showScrollBar,
+      styles,
+      classNames,
     ],
   );
 
@@ -728,7 +731,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   if (showSuffixIcon) {
     arrowNode = (
       <TransBtn
-        className={classNames(`${prefixCls}-arrow`, selectClassNames?.suffix, {
+        className={cls(`${prefixCls}-arrow`, classNames?.suffix, {
           [`${prefixCls}-arrow-loading`]: loading,
         })}
         style={styles?.suffix}
@@ -772,7 +775,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   const optionList = <OptionList ref={listRef} />;
 
   // ============================= Select =============================
-  const mergedClassName = classNames(prefixCls, className, {
+  const mergedClassName = cls(prefixCls, className, {
     [`${prefixCls}-focused`]: mockFocused,
     [`${prefixCls}-multiple`]: multiple,
     [`${prefixCls}-single`]: !multiple,
@@ -821,7 +824,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       ) : (
         <Selector
           {...props}
-          prefixClassName={selectClassNames?.prefix}
+          prefixClassName={classNames?.prefix}
           prefixStyle={styles?.prefix}
           domRef={selectorDomRef}
           prefixCls={prefixCls}

src/Select.tsx

@@ -208,7 +208,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
       labelInValue,
       onChange,
       maxCount,
-      classNames: selectClassNames,
+      classNames,
       styles,
       ...restProps
     } = props;
@@ -631,12 +631,10 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
         childrenAsData,
         maxCount,
         optionRender,
-        classNames: selectClassNames,
+        classNames,
         styles,
       };
     }, [
-      selectClassNames,
-      styles,
       maxCount,
       parsedOptions,
       displayOptions,
@@ -653,6 +651,8 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
       listItemHeight,
       childrenAsData,
       optionRender,
+      classNames,
+      styles,
     ]);
 
     // ========================== Warning ===========================
@@ -674,9 +674,13 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
           ref={ref}
           omitDomProps={OMIT_DOM_PROPS}
           mode={mode}
+          // >>> Style
+          classNames={classNames}
+          styles={styles}
           // >>> Values
           displayValues={displayValues}
           onDisplayValuesChange={onDisplayValuesChange}
+          maxCount={maxCount}
           // >>> Trigger
           direction={direction}
           // >>> Search

src/SelectContext.ts

@@ -11,6 +11,9 @@ import type {
 import type { FlattenOptionData } from './interface';
 
 // Use any here since we do not get the type during compilation
+/**
+ * SelectContext is only used for Select. BaseSelect should not consume this context.
+ */
 export interface SelectContextProps {
   classNames?: Partial<Record<SemanticName, string>>;
   styles?: Partial<Record<SemanticName, React.CSSProperties>>;

src/Selector/Input.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { composeRef } from '@rc-component/util/lib/ref';
 import { warning } from '@rc-component/util/lib/warning';
-import SelectContext from '../SelectContext';
+import useBaseProps from '../hooks/useBaseProps';
 type InputRef = HTMLInputElement | HTMLTextAreaElement;
 
 interface InputProps {
@@ -57,8 +57,8 @@ const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (props, ref)
     open,
     attrs,
   } = props;
-  const { classNames: contextClassNames, styles: contextStyles } =
-    React.useContext(SelectContext) || {};
+
+  const { classNames: contextClassNames, styles: contextStyles } = useBaseProps() || {};
 
   let inputNode: React.ComponentElement<any, any> = inputElement || <input />;
 

tests/Select.test.tsx

@@ -13,7 +13,8 @@ import type { ScrollConfig } from 'rc-virtual-list/lib/List';
 import React from 'react';
 import type { SelectProps } from '../src';
 import Select, { OptGroup, Option, useBaseProps } from '../src';
-import type { BaseSelectRef } from '../src/BaseSelect';
+import BaseSelect from '../src/BaseSelect';
+import type { BaseSelectRef, RefOptionListProps } from '../src/BaseSelect';
 import allowClearTest from './shared/allowClearTest';
 import blurTest from './shared/blurTest';
 import focusTest from './shared/focusTest';
@@ -2417,9 +2418,10 @@ describe('Select.Basic', () => {
     expect(onBlur).toHaveBeenCalledTimes(2);
     expect(inputElem.value).toEqual('bb');
   });
-  it('support classnames and styles', () => {
+
+  it('support classnames and styles for select', () => {
     const customClassNames = {
-      prefix: 'cutsom-prefix',
+      prefix: 'custom-prefix',
       suffix: 'custom-suffix',
       list: 'custom-list',
       listItem: 'custom-item',
@@ -2464,4 +2466,46 @@ describe('Select.Basic', () => {
     expect(input).toHaveClass(customClassNames.input);
     expect(input).toHaveStyle(customStyle.input);
   });
+
+  it('support classnames and styles for baseSelect', () => {
+    const customClassNames = {
+      prefix: 'custom-prefix',
+      suffix: 'custom-suffix',
+      input: 'custom-input',
+    };
+    const customStyle = {
+      prefix: { color: 'red' },
+      suffix: { color: 'green' },
+      input: { color: 'black' },
+    };
+    const OptionList = React.forwardRef<RefOptionListProps, any>((props, ref) => {
+      return <div ref={ref as unknown as React.Ref<HTMLDivElement>}>Option List</div>;
+    });
+    const { container } = render(
+      <BaseSelect
+        displayValues={[]}
+        prefixCls="rc-select"
+        id="base-select"
+        open
+        classNames={customClassNames}
+        styles={customStyle}
+        suffixIcon={<div>arrow</div>}
+        prefix="Foobar"
+        onDisplayValuesChange={() => {}}
+        searchValue=""
+        onSearch={() => {}}
+        OptionList={OptionList}
+        emptyOptions={false}
+      />,
+    );
+    const prefix = container.querySelector('.rc-select-prefix');
+    const suffix = container.querySelector('.rc-select-arrow');
+    const input = container.querySelector('.rc-select-selection-search-input');
+    expect(prefix).toHaveClass(customClassNames.prefix);
+    expect(prefix).toHaveStyle(customStyle.prefix);
+    expect(suffix).toHaveClass(customClassNames.suffix);
+    expect(suffix).toHaveStyle(customStyle.suffix);
+    expect(input).toHaveClass(customClassNames.input);
+    expect(input).toHaveStyle(customStyle.input);
+  });
 });