Merge pull request #799 from wzc520pyfm/feat/ranger-support-quick-pic…

…ker-props feat(ui): [ranger] support rest props for quick picker
oceanbase · Oct 31, 2024 · 63b09a0 · 63b09a0
2 parents 270da16 + 3f26d44
commit 63b09a0
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/packages/ui/src/Ranger/QuickPicker.tsx b/packages/ui/src/Ranger/QuickPicker.tsx
@@ -22,7 +22,7 @@ interface SelectProps {
 
 export type QuickType = 'select' | 'dropdown';
 
-interface QuickPickerProps extends LocaleWrapperProps {
+export interface QuickPickerProps extends LocaleWrapperProps {
   selects: RangeOption[];
   type?: QuickType;
   onChange: (range: RangeValue) => void;
@@ -36,7 +36,14 @@ interface QuickPickerProps extends LocaleWrapperProps {
 
 const prefix = getPrefix('ranger-quick-picker');
 
-const RangeDropdown = ({ selects, onChange, value, customable, locale = {} }: SelectProps) => {
+const RangeDropdown = ({
+  selects,
+  onChange,
+  value,
+  customable,
+  locale = {},
+  ...rest
+}: SelectProps) => {
   const menu = (
     <Menu
       onClick={e => {
@@ -54,7 +61,7 @@ const RangeDropdown = ({ selects, onChange, value, customable, locale = {} }: Se
   const match = selects.find(item => item.name === value);
 
   return (
-    <Dropdown overlay={menu}>
+    <Dropdown overlay={menu} {...rest}>
       <Space style={{ cursor: 'pointer' }} className={classnames(prefix, `${prefix}-dropdown`)}>
         <ClockCircleOutlined />
         {locale[match?.name] || match?.name}
@@ -64,7 +71,15 @@ const RangeDropdown = ({ selects, onChange, value, customable, locale = {} }: Se
   );
 };
 
-const RangeSelect = ({ selects, onChange, value, customable, locale = {}, size }: SelectProps) => {
+const RangeSelect = ({
+  selects,
+  onChange,
+  value,
+  customable,
+  locale = {},
+  size,
+  ...rest
+}: SelectProps) => {
   const handleChange = (nextValue: string) => {
     onChange(nextValue);
   };
@@ -75,6 +90,7 @@ const RangeSelect = ({ selects, onChange, value, customable, locale = {}, size }
       onSelect={handleChange}
       value={value}
       size={size}
+      {...rest}
     >
       {selects.map(item => {
         return (

diff --git a/packages/ui/src/Ranger/Ranger.tsx b/packages/ui/src/Ranger/Ranger.tsx
@@ -18,7 +18,7 @@ import {
 } from './constant';
 import './index.less';
 import zhCN from './locale/zh-CN';
-import type { QuickType } from './QuickPicker';
+import type { QuickPickerProps, QuickType } from './QuickPicker';
 import QuickPicker from './QuickPicker';
 import type { RangeOption } from './typing';
 
@@ -46,6 +46,7 @@ export interface RangerProps
   value?: RangeValue;
   defaultValue?: RangeValue;
   size?: 'small' | 'large' | 'middle';
+  quickPickerProps?: QuickPickerProps;
 }
 
 const prefix = getPrefix('ranger');
@@ -65,6 +66,7 @@ const Ranger = (props: RangerProps) => {
     size,
     //固定rangeName
     stickRangeName = false,
+    quickPickerProps = {},
     ...rest
   } = props;
   // 是否为 moment 时间对象
@@ -77,7 +79,7 @@ const Ranger = (props: RangerProps) => {
   const [innerValue, setInnerValue] = useState<RangeValue>(value ?? defaultValue);
 
   const [rangeName, setRangeName] = useState(
-    value || defaultValue ? CUSTOMIZE : defaultQuickValue ?? selects?.[0]?.name
+    value || defaultValue ? CUSTOMIZE : (defaultQuickValue ?? selects?.[0]?.name)
   );
 
   const defaultInternalValue = useMemo(() => {
@@ -165,6 +167,7 @@ const Ranger = (props: RangerProps) => {
           locale={locale}
           isMoment={isMoment}
           size={size}
+          {...quickPickerProps}
         />
       )}
       {showRange && (

diff --git a/packages/ui/src/Ranger/index.md b/packages/ui/src/Ranger/index.md
@@ -31,6 +31,7 @@ nav:
 | mode | 渲染类型 | default \| mini | default | - |
 | pastOnly | 只能选择过去时间 | boolean | false | - |
 | disabledDate | 不可选择的日期 | (currentDate: Dayjs \| Moment) => boolean | - | - |
+| quickPickerProps | QuickPicker props | QuickPickerProps | - | - |
 | 其他 antd/RangePicker 的 `props` | [antd-RangePicker](https://ant.design/components/date-picker-cn/#RangePicker) | - | - | - |
 
 ### QuickPicker