save

Author: thinkasany

src/BaseSelect/index.tsx

@@ -294,9 +294,6 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     onKeyDown,
     onMouseDown,
 
-    classNames: selectClassNames,
-    styles,
-
     // Rest Props
     ...restProps
   } = props;
@@ -411,7 +408,12 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     [tokenSeparators],
   );
 
-  const { maxCount, rawValues } = React.useContext<SelectContextProps>(SelectContext) || {};
+  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) {

src/OptionList.tsx

@@ -60,6 +60,8 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
     listHeight,
     listItemHeight,
     optionRender,
+    classNames: contextClassNames,
+    styles: contextStyles,
   } = React.useContext(SelectContext);
 
   const itemPrefixCls = `${prefixCls}-item`;
@@ -327,6 +329,8 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
         direction={direction}
         innerProps={virtual ? null : a11yProps}
         showScrollBar={showScrollBar}
+        className={contextClassNames?.list}
+        style={contextStyles?.list}
       >
         {(item, itemIndex) => {
           const { group, groupOption, data, label, value } = item;
@@ -355,12 +359,18 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
           const mergedDisabled = disabled || (!selected && overMaxCount);
 
           const optionPrefixCls = `${itemPrefixCls}-option`;
-          const optionClassName = classNames(itemPrefixCls, optionPrefixCls, className, {
-            [`${optionPrefixCls}-grouped`]: groupOption,
-            [`${optionPrefixCls}-active`]: activeIndex === itemIndex && !mergedDisabled,
-            [`${optionPrefixCls}-disabled`]: mergedDisabled,
-            [`${optionPrefixCls}-selected`]: selected,
-          });
+          const optionClassName = classNames(
+            itemPrefixCls,
+            optionPrefixCls,
+            className,
+            contextClassNames?.item,
+            {
+              [`${optionPrefixCls}-grouped`]: groupOption,
+              [`${optionPrefixCls}-active`]: activeIndex === itemIndex && !mergedDisabled,
+              [`${optionPrefixCls}-disabled`]: mergedDisabled,
+              [`${optionPrefixCls}-selected`]: selected,
+            },
+          );
 
           const mergedLabel = getLabel(item);
 
@@ -393,7 +403,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
                   onSelectValue(value);
                 }
               }}
-              style={style}
+              style={{ ...contextStyles?.item, ...style }}
             >
               <div className={`${optionPrefixCls}-content`}>
                 {typeof optionRender === 'function'

src/Select.tsx

@@ -107,7 +107,7 @@ export type SelectHandler<ValueType, OptionType extends BaseOptionType = Default
 
 type ArrayElementType<T> = T extends (infer E)[] ? E : T;
 
-export type SemanticName = 'prefix' | 'suffix';
+export type SemanticName = 'prefix' | 'suffix' | 'item' | 'list' | 'input' | 'tag';
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType>
   extends BaseSelectPropsWithoutPrivate {
   prefixCls?: string;
@@ -207,7 +207,8 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
       labelInValue,
       onChange,
       maxCount,
-
+      classNames: selectClassNames,
+      styles,
       ...restProps
     } = props;
 
@@ -629,8 +630,12 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
         childrenAsData,
         maxCount,
         optionRender,
+        classNames: selectClassNames,
+        styles,
       };
     }, [
+      selectClassNames,
+      styles,
       maxCount,
       parsedOptions,
       displayOptions,

src/SelectContext.ts

@@ -6,11 +6,14 @@ import type {
   OnActiveValue,
   OnInternalSelect,
   SelectProps,
+  SemanticName,
 } from './Select';
 import type { FlattenOptionData } from './interface';
 
 // Use any here since we do not get the type during compilation
 export interface SelectContextProps {
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
   options: BaseOptionType[];
   optionRender?: SelectProps['optionRender'];
   flattenOptions: FlattenOptionData<BaseOptionType>[];

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';
 type InputRef = HTMLInputElement | HTMLTextAreaElement;
 
 interface InputProps {
@@ -57,6 +57,8 @@ const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (props, ref)
     open,
     attrs,
   } = props;
+  const { classNames: contextClassNames, styles: contextStyles } =
+    React.useContext(SelectContext) || {};
 
   let inputNode: React.ComponentElement<any, any> = inputElement || <input />;
 
@@ -80,7 +82,6 @@ const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (props, ref)
   inputNode = React.cloneElement(inputNode, {
     type: 'search',
     ...originProps,
-
     // Override over origin props
     id,
     ref: composeRef(ref, originRef as any),
@@ -89,7 +90,11 @@ const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (props, ref)
     autoComplete: autoComplete || 'off',
 
     autoFocus,
-    className: classNames(`${prefixCls}-selection-search-input`, inputNode?.props?.className),
+    className: classNames(
+      `${prefixCls}-selection-search-input`,
+      inputNode?.props?.className,
+      contextClassNames?.input,
+    ),
 
     role: 'combobox',
     'aria-expanded': open || false,
@@ -104,7 +109,7 @@ const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (props, ref)
     readOnly: !editable,
     unselectable: !editable ? 'on' : null,
 
-    style: { ...style, opacity: editable ? null : 0 },
+    style: { ...style, opacity: editable ? null : 0, ...contextStyles?.input },
 
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {
       onKeyDown(event);

tests/Select.test.tsx

@@ -2421,10 +2421,16 @@ describe('Select.Basic', () => {
     const customClassNames = {
       prefix: 'cutsom-prefix',
       suffix: 'custom-suffix',
+      list: 'custom-list',
+      item: 'custom-item',
+      input: 'custom-input',
     };
     const customStyle = {
       prefix: { color: 'red' },
       suffix: { color: 'green' },
+      list: { color: 'yellow' },
+      item: { color: 'blue' },
+      input: { color: 'black' },
     };
     const { container } = render(
       <Select
@@ -2441,11 +2447,23 @@ describe('Select.Basic', () => {
         ]}
       />,
     );
+
+    console.log(container.innerHTML);
+
     const prefix = container.querySelector('.rc-select-prefix');
     const suffix = container.querySelector('.rc-select-arrow');
-    expect(prefix).toHaveClass('cutsom-prefix');
-    expect(prefix).toHaveStyle('color: red');
-    expect(suffix).toHaveClass('custom-suffix');
-    expect(suffix).toHaveStyle('color: green');
+    const item = container.querySelector('.rc-select-item-option');
+    const list = container.querySelector('.rc-virtual-list');
+    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(item).toHaveClass(customClassNames.item);
+    expect(item).toHaveStyle(customStyle.item);
+    expect(list).toHaveClass(customClassNames.list);
+    expect(list).toHaveStyle(customStyle.list);
+    expect(input).toHaveClass(customClassNames.input);
+    expect(input).toHaveStyle(customStyle.input);
   });
 });