feat: support classNames and styles (#587)

Author: thinkasany

examples/search.tsx

@@ -2,6 +2,21 @@ import React from 'react';
 import '../assets/index.less';
 import Cascader from '../src';
 
+const testClassNames = {
+  prefix: 'test-prefix',
+  suffix: 'test-suffix',
+  input: 'test-input',
+  popup: {
+    list: 'test-popup-list',
+    listItem: 'test-popup-list-item',
+  },
+};
+const testStyles = {
+  popup: {
+    list: { background: 'red' },
+    listItem: { color: 'yellow' },
+  },
+};
 const addressOptions = [
   {
     label: '福建',
@@ -68,6 +83,10 @@ const addressOptions = [
 const Demo = () => {
   return (
     <Cascader
+      prefix="prefix"
+      suffixIcon={() => 'icon'}
+      classNames={testClassNames}
+      styles={testStyles}
       options={addressOptions}
       showSearch
       style={{ width: 300 }}

src/Cascader.tsx

@@ -71,9 +71,9 @@ interface BaseCascaderProps<
   OptionType extends DefaultOptionType = DefaultOptionType,
   ValueField extends keyof OptionType = keyof OptionType,
 > extends Omit<
-  BaseSelectPropsWithoutPrivate,
-  'tokenSeparators' | 'labelInValue' | 'mode' | 'showSearch'
-> {
+    BaseSelectPropsWithoutPrivate,
+    'tokenSeparators' | 'labelInValue' | 'mode' | 'showSearch'
+  > {
   // MISC
   id?: string;
   prefixCls?: string;
@@ -129,8 +129,8 @@ export type ValueType<
   ValueField extends keyof OptionType = keyof OptionType,
 > = keyof OptionType extends ValueField
   ? unknown extends OptionType['value']
-  ? OptionType[ValueField]
-  : OptionType['value']
+    ? OptionType[ValueField]
+    : OptionType['value']
   : OptionType[ValueField];
 
 export type GetValueType<
@@ -146,11 +146,19 @@ export type GetOptionType<
   Multiple extends boolean | React.ReactNode = false,
 > = false extends Multiple ? OptionType[] : OptionType[][];
 
+type SemanticName = 'input' | 'prefix' | 'suffix';
+type PopupSemantic = 'list' | 'listItem';
 export interface CascaderProps<
   OptionType extends DefaultOptionType = DefaultOptionType,
   ValueField extends keyof OptionType = keyof OptionType,
   Multiple extends boolean | React.ReactNode = false,
 > extends BaseCascaderProps<OptionType, ValueField> {
+  styles?: Partial<Record<SemanticName, React.CSSProperties>> & {
+    popup?: Partial<Record<PopupSemantic, React.CSSProperties>>;
+  };
+  classNames?: Partial<Record<SemanticName, string>> & {
+    popup?: Partial<Record<PopupSemantic, string>>;
+  };
   checkable?: Multiple;
   value?: GetValueType<OptionType, ValueField, Multiple>;
   defaultValue?: GetValueType<OptionType, ValueField, Multiple>;
@@ -216,6 +224,9 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
     popupMenuColumnStyle,
     popupStyle: customPopupStyle,
 
+    classNames,
+    styles,
+
     placement,
 
     onPopupVisibleChange,
@@ -372,7 +383,6 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
     onPopupVisibleChange?.(nextVisible);
   };
 
-
   // ========================== Warning ===========================
   if (process.env.NODE_ENV !== 'production') {
     warningNullOptions(mergedOptions, mergedFieldNames);
@@ -381,6 +391,8 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
   // ========================== Context ===========================
   const cascaderContext = React.useMemo(
     () => ({
+      classNames,
+      styles,
       options: mergedOptions,
       fieldNames: mergedFieldNames,
       values: checkedValues,
@@ -424,12 +436,12 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
   const popupStyle: React.CSSProperties =
     // Search to match width
     (mergedSearchValue && searchConfig.matchInputWidth) ||
-      // Empty keep the width
-      emptyOptions
+    // Empty keep the width
+    emptyOptions
       ? {}
       : {
-        minWidth: 'auto',
-      };
+          minWidth: 'auto',
+        };
 
   return (
     <CascaderContext.Provider value={cascaderContext}>
@@ -441,6 +453,16 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
         prefixCls={prefixCls}
         autoClearSearchValue={autoClearSearchValue}
         popupMatchSelectWidth={popupMatchSelectWidth}
+        classNames={{
+          prefix: classNames?.prefix,
+          suffix: classNames?.suffix,
+          input: classNames?.input,
+        }}
+        styles={{
+          prefix: styles?.prefix,
+          suffix: styles?.suffix,
+          input: styles?.input,
+        }}
         popupStyle={{
           ...popupStyle,
           ...customPopupStyle,

src/OptionList/Column.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 import type { DefaultOptionType, SingleValueType } from '../Cascader';
 import CascaderContext from '../context';
@@ -53,6 +53,8 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
     loadingIcon,
     popupMenuColumnStyle,
     optionRender,
+    classNames,
+    styles,
   } = React.useContext(CascaderContext);
 
   const hoverOpen = expandTrigger === 'hover';
@@ -117,7 +119,12 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
 
   // ============================ Render ============================
   return (
-    <ul className={menuPrefixCls} ref={menuRef} role="menu">
+    <ul
+      className={cls(menuPrefixCls, classNames?.popup?.list)}
+      style={styles?.popup?.list}
+      ref={menuRef}
+      role="menu"
+    >
       {optionInfoList.map(
         ({
           disabled,
@@ -163,14 +170,14 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
           return (
             <li
               key={fullPathKey}
-              className={classNames(menuItemPrefixCls, {
+              className={cls(menuItemPrefixCls, classNames?.popup?.listItem, {
                 [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
                 [`${menuItemPrefixCls}-active`]:
                   activeValue === value || activeValue === fullPathKey,
                 [`${menuItemPrefixCls}-disabled`]: isOptionDisabled(disabled),
                 [`${menuItemPrefixCls}-loading`]: isLoading,
               })}
-              style={popupMenuColumnStyle}
+              style={{ ...popupMenuColumnStyle, ...styles?.popup?.listItem }}
               role="menuitemcheckbox"
               title={title}
               aria-checked={checked}

src/context.ts

@@ -22,6 +22,8 @@ export interface CascaderContextProps {
   loadingIcon?: React.ReactNode;
   popupMenuColumnStyle?: React.CSSProperties;
   optionRender?: CascaderProps['optionRender'];
+  classNames?: CascaderProps['classNames'];
+  styles?: CascaderProps['styles'];
 }
 
 const CascaderContext = React.createContext<CascaderContextProps>({} as CascaderContextProps);

tests/semantic.spec.tsx

@@ -0,0 +1,53 @@
+import { render } from '@testing-library/react';
+
+import React from 'react';
+import Cascader from '../src';
+
+describe('Cascader.Search', () => {
+  it('Should support semantic', () => {
+    const testClassNames = {
+      prefix: 'test-prefix',
+      suffix: 'test-suffix',
+      input: 'test-input',
+      popup: {
+        list: 'test-popup-list',
+        listItem: 'test-popup-list-item',
+      },
+    };
+    const testStyles = {
+      prefix: { color: 'green' },
+      suffix: { color: 'blue' },
+      input: { color: 'purple' },
+      popup: {
+        list: { background: 'red' },
+        listItem: { color: 'yellow' },
+      },
+    };
+    const { container } = render(
+      <Cascader
+        classNames={testClassNames}
+        styles={testStyles}
+        prefix="prefix"
+        suffixIcon={() => 'icon'}
+        open
+        options={[{ label: 'bamboo', value: 'bamboo' }]}
+        optionRender={option => `${option.label} - test`}
+      />,
+    );
+    const input = container.querySelector('.rc-cascader-selection-search-input');
+    const prefix = container.querySelector('.rc-cascader-prefix');
+    const suffix = container.querySelector('.rc-cascader-arrow');
+    const list = container.querySelector('.rc-cascader-menu');
+    const listItem = container.querySelector('.rc-cascader-menu-item');
+    expect(input).toHaveStyle(testStyles.input);
+    expect(prefix).toHaveStyle(testStyles.prefix);
+    expect(suffix).toHaveStyle(testStyles.suffix);
+    expect(list).toHaveStyle(testStyles.popup.list);
+    expect(listItem).toHaveStyle(testStyles.popup.listItem);
+    expect(input?.className).toContain(testClassNames.input);
+    expect(prefix?.className).toContain(testClassNames.prefix);
+    expect(suffix?.className).toContain(testClassNames.suffix);
+    expect(list?.className).toContain(testClassNames.popup.list);
+    expect(listItem?.className).toContain(testClassNames.popup.listItem);
+  });
+});