chore: add some components props (#4769)

dream-num · Mar 5, 2025 · d3950d5 · d3950d5
1 parent 5099acf
commit d3950d5
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/packages/design/src/components/cascader-list/CascaderList.tsx b/packages/design/src/components/cascader-list/CascaderList.tsx
@@ -44,10 +44,20 @@ export interface ICascaderListProps {
      * The callback function that is triggered when the value is changed
      */
     onChange: (value: string[]) => void;
+
+    /**
+     * The class name of the content
+     */
+    contentClassName?: string;
+
+    /**
+     * The class name of the wrapper
+     */
+    wrapperClassName?: string;
 }
 
 export function CascaderList(props: ICascaderListProps) {
-    const { value, options = [], onChange } = props;
+    const { value, options = [], onChange, contentClassName, wrapperClassName } = props;
 
     const { locale } = useContext(ConfigContext);
 
@@ -84,11 +94,11 @@ export function CascaderList(props: ICascaderListProps) {
     }
 
     return (
-        <section className={styles.cascaderList}>
+        <section className={clsx(styles.cascaderList, wrapperClassName)}>
             {activeOptions.map((options, index) =>
                 options.length
                     ? (
-                        <ul key={index} className={styles.cascaderListBoard}>
+                        <ul key={index} className={clsx(styles.cascaderListBoard, contentClassName)}>
                             {options.map((option) => (
                                 <li
                                     key={option.value}

diff --git a/packages/design/src/components/date-range-picker/DateRangePicker.tsx b/packages/design/src/components/date-range-picker/DateRangePicker.tsx
@@ -15,15 +15,15 @@
  */
 
 import type { dayjs } from '@univerjs/core';
-import type { NoUndefinedRangeValueType } from 'rc-picker/lib/PickerInput/RangePicker';
+import type { NoUndefinedRangeValueType, RangePickerProps } from 'rc-picker/lib/PickerInput/RangePicker';
 import { CalendarSingle, GuideSingle } from '@univerjs/icons';
 import { RangePicker } from 'rc-picker';
 import generateConfig from 'rc-picker/lib/generate/dayjs';
 import React, { useContext } from 'react';
 import { ConfigContext } from '../config-provider/ConfigProvider';
 import styles from './index.module.less';
 
-export interface IDateRangePickerProps {
+export interface IDateRangePickerProps extends Omit<RangePickerProps<dayjs.Dayjs>, 'value' | 'onChange' | 'locale' | 'generateConfig' | 'prefixCls'> {
     /**
      * The value of the date picker.
      */
@@ -36,7 +36,7 @@ export interface IDateRangePickerProps {
 }
 
 export function DateRangePicker(props: IDateRangePickerProps) {
-    const { value, onChange } = props;
+    const { value, onChange, ...ext } = props;
 
     const { locale } = useContext(ConfigContext);
 
@@ -48,6 +48,7 @@ export function DateRangePicker(props: IDateRangePickerProps) {
 
     return (
         <RangePicker<dayjs.Dayjs>
+            {...ext}
             value={value}
             prefixCls={styles.dateRangePicker}
             generateConfig={generateConfig}

diff --git a/packages/design/src/components/input-number/InputNumber.tsx b/packages/design/src/components/input-number/InputNumber.tsx
@@ -99,6 +99,11 @@ export interface IInputNumberProps {
      * @param e
      */
     onPressEnter?: InputNumberProps['onPressEnter'];
+
+    /**
+     * The classNames of the input
+     */
+    classNames?: InputNumberProps['classNames'];
 }
 
 export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>((props, ref) => {
@@ -117,6 +122,7 @@ export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>((prop
         onPressEnter,
         onBlur,
         onFocus,
+        classNames,
     } = props;
 
     function handleChange(value: number | null) {
@@ -130,6 +136,7 @@ export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>((prop
             ref={ref}
             prefixCls={styles.inputNumber}
             className={className}
+            classNames={classNames}
             value={value}
             max={max}
             min={min}

diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts
@@ -53,3 +53,4 @@ export { render, unmount } from './helper/react-dom';
 export { isBrowser } from './helper/is-browser';
 export { DropdownMenu, type IDropdownProps } from './components/dropdown-menu';
 export { Separator } from './components/separator';
+export { DateRangePicker } from './components/date-range-picker';