feat: styles prop

Author: 洋

src/Cascader.tsx

@@ -57,7 +57,7 @@ export interface DefaultOptionType extends BaseOptionType {
   disableCheckbox?: boolean;
 }
 
-interface BaseCascaderProps<OptionType extends BaseOptionType = DefaultOptionType>
+export interface BaseCascaderProps<OptionType extends BaseOptionType = DefaultOptionType>
   extends Omit<
     BaseSelectPropsWithoutPrivate,
     'tokenSeparators' | 'labelInValue' | 'mode' | 'showSearch'
@@ -97,8 +97,15 @@ interface BaseCascaderProps<OptionType extends BaseOptionType = DefaultOptionTyp
   /** @deprecated Use `dropdownClassName` instead */
   popupClassName?: string;
   dropdownClassName?: string;
+  /** @deprecated Use `styles.dropdownMenuColumn` instead */
   dropdownMenuColumnStyle?: React.CSSProperties;
 
+  // styles
+  styles?: {
+    dropdown?: React.CSSProperties;
+    dropdownMenuColumn?: React.CSSProperties;
+  };
+
   /** @deprecated Use `placement` instead */
   popupPlacement?: Placement;
   placement?: Placement;
@@ -197,6 +204,8 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
     popupVisible,
     open,
 
+    styles,
+
     popupClassName,
     dropdownClassName,
     dropdownStyle,
@@ -449,7 +458,7 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
       expandTrigger,
       expandIcon,
       loadingIcon,
-      dropdownMenuColumnStyle,
+      dropdownMenuColumnStyle: styles?.dropdownMenuColumn ?? dropdownMenuColumnStyle,
     }),
     [
       mergedOptions,
@@ -466,6 +475,7 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
       expandIcon,
       loadingIcon,
       dropdownMenuColumnStyle,
+      styles?.dropdownMenuColumn,
     ],
   );
 
@@ -476,13 +486,18 @@ const Cascader = React.forwardRef<CascaderRef, InternalCascaderProps>((props, re
 
   const mergedDropdownStyle: React.CSSProperties =
     // Search to match width
-    dropdownStyle ?? (mergedSearchValue && searchConfig.matchInputWidth) ?? emptyOptions
+    styles?.dropdown ??
+    dropdownStyle ??
+    (mergedSearchValue && searchConfig.matchInputWidth) ??
+    emptyOptions
       ? // Empty keep the width
         {
+          ...styles?.dropdown,
           ...dropdownStyle,
         }
       : {
           minWidth: 'auto',
+          ...styles?.dropdown,
           ...dropdownStyle,
         };
 

src/utils/warningPropsUtil.ts

@@ -1,8 +1,8 @@
 import warning from 'rc-util/lib/warning';
-import type { DefaultOptionType, FieldNames, InternalCascaderProps } from '../Cascader';
+import type { DefaultOptionType, FieldNames, BaseCascaderProps } from '../Cascader';
 
-function warningProps(props: InternalCascaderProps) {
-  const { onPopupVisibleChange, popupVisible, popupClassName, popupPlacement } = props;
+function warningProps(props: BaseCascaderProps) {
+  const { onPopupVisibleChange, popupVisible, popupClassName, popupPlacement,dropdownMenuColumnStyle} = props;
 
   warning(
     !onPopupVisibleChange,
@@ -17,6 +17,10 @@ function warningProps(props: InternalCascaderProps) {
     popupPlacement === undefined,
     '`popupPlacement` is deprecated. Please use `placement` instead.',
   );
+  warning(
+    dropdownMenuColumnStyle === undefined,
+    '`dropdownMenuColumnStyle` is deprecated. Please use `styles.dropdownMenuColumn` instead.',
+  );
 }
 
 // value in Cascader options should not be null

tests/index.spec.tsx

@@ -4,7 +4,7 @@ import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import { resetWarned } from 'rc-util/lib/warning';
 import React from 'react';
 import Cascader from '../src';
-import { addressOptions, addressOptionsForUneven, optionsForActiveMenuItems } from './demoOptions';
+import { addressOptions,addressOptionsForUneven,optionsForActiveMenuItems } from './demoOptions';
 import { mount } from './enzyme';
 
 describe('Cascader.Basic', () => {
@@ -655,7 +655,8 @@ describe('Cascader.Basic', () => {
         changeOnSelect
         expandTrigger="hover"
         options={addressOptionsForUneven}
-        onChange={onChange}>
+        onChange={onChange}
+      >
         <input readOnly />
       </Cascader>,
     );
@@ -684,7 +685,7 @@ describe('Cascader.Basic', () => {
     wrapper.update();
     expect(selectedValue).toBeFalsy();
     expect(wrapper.isOpen()).toBeTruthy();
-  })
+  });
 
   describe('focus test', () => {
     let domSpy;
@@ -803,9 +804,8 @@ describe('Cascader.Basic', () => {
           expect(activeItems).toHaveLength(2);
           expect(activeItems.last().text()).toEqual('高雄');
         });
-      })
+      });
     });
-
   });
 
   it('defaultValue not exist', () => {
@@ -1063,4 +1063,19 @@ describe('Cascader.Basic', () => {
     );
     errorSpy.mockReset();
   });
+
+  it('``in Cascader options should throw a warning', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => null);
+    mount(
+      <Cascader
+        dropdownMenuColumnStyle={{}}
+        options={[]}
+      />,
+    );
+
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: `dropdownMenuColumnStyle` is deprecated. Please use `styles.dropdownMenuColumn` instead.',
+    );
+    errorSpy.mockReset();
+  });
 });