Merge pull request #940 from oceanbase/linhf/feat-daterange-rules

dengfuping · web-flow · commit efde70472b63 · 2025-01-15T20:02:12.000+08:00
feat(DateRanger): Open rules verification function
diff --git a/packages/ui/src/DateRanger/PickerPanel.tsx b/packages/ui/src/DateRanger/PickerPanel.tsx
@@ -27,18 +27,20 @@ import type { RangeValue } from './Ranger';
 type ValidateTrigger = 'submit' | 'valueChange';
 
 type MaybeArray<T> = T | T[];
-type ErrorType = 'endDate' | 'startDate' | 'endTime' | 'startTime';
+type ErrorType = 'endDate' | 'startDate' | 'endTime' | 'startTime' | 'all';
+
+const ALL_ERROR_TYPE_LIST = ['endDate', 'startDate', 'endTime', 'startTime'];
 
 export type Rule = {
   message: string;
-  validate: (value: string) => MaybeArray<ErrorType>;
+  validator: (value: [string, string] | []) => MaybeArray<ErrorType> | null | undefined;
 };
 
 export interface PickerPanelProps {
   value?: RangeValue;
   defaultValue?: RangeValue;
   tip?: string;
-  require?: boolean;
+  required?: boolean;
   rules?: Rule[];
   validateTrigger?: ValidateTrigger;
   onCancel: () => void;
@@ -60,7 +62,7 @@ const InternalPickerPanel = (props: PickerPanelProps) => {
     locale,
     tip,
     rules,
-    require = true,
+    required = true,
     onOk = noop,
     onCancel = noop,
     disabledDate,
@@ -441,30 +443,28 @@ const InternalPickerPanel = (props: PickerPanelProps) => {
               const start = `${startDate} ${startTime.format(TIME_FORMAT)}`;
               const end = `${endDate} ${endTime.format(TIME_FORMAT)}`;
 
-              onOk([start, end]);
-
-              // let errorList = [];
-              // let message = '';
-              // rules?.some(item => {
-              //   if (typeof item?.validator === 'function') {
-              //     const errorType = item.validator(start, end);
-              //     if (errorType) {
-              //       errorList = toArray(errorType);
-              //       message = item.message;
-              //       return true;
-              //     }
-              //   }
-              //   return false;
-              // });
+              let errorList = [];
+              let message = '';
+              rules?.some(item => {
+                if (typeof item?.validator === 'function') {
+                  const errorType = item.validator([start, end]);
+                  if (errorType) {
+                    errorList = Array.isArray(errorType) ? errorType : [errorType];
+                    message = item.message;
+                    return true;
+                  }
+                }
+                return false;
+              });
 
-              // if (errorList.length > 0) {
-              //   setErrorTypeList(errorList);
-              //   setErrorMessage(message);
-              // } else {
-              //   setErrorMessage('');
-              //   setErrorTypeList([]);
-              //   onOk([start, end]);
-              // }
+              if (errorList.length > 0) {
+                setErrorTypeList(errorList.includes('all') ? ALL_ERROR_TYPE_LIST : errorList);
+                setErrorMessage(message);
+              } else {
+                setErrorMessage('');
+                setErrorTypeList([]);
+                onOk([start, end]);
+              }
             });
           }}
         >
diff --git a/packages/ui/src/DateRanger/Ranger.tsx b/packages/ui/src/DateRanger/Ranger.tsx
@@ -88,7 +88,7 @@ export interface DateRangerProps
   defaultValue?: RangeValue;
   size?: 'small' | 'large' | 'middle';
   tooltipProps?: TooltipProps;
-  locale: any;
+  locale?: any;
 }
 
 const prefix = getPrefix('date-ranger');
@@ -574,4 +574,4 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
 export default LocaleWrapper({
   componentName: 'DateRanger',
   defaultLocale: zhCN,
-})(Ranger);
+})(Ranger) as typeof Ranger;
diff --git a/packages/ui/src/DateRanger/demo/rules.tsx b/packages/ui/src/DateRanger/demo/rules.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { DateRanger } from '@oceanbase/ui';
+import dayjs from 'dayjs';
+
+export default () => {
+  return (
+    <DateRanger
+      rules={[
+        {
+          validator(value) {
+            if (Math.abs(dayjs(value[0]).diff(dayjs(value[1]))) > 24 * 60 * 60 * 1000) {
+              return 'all';
+            }
+
+            return null;
+          },
+          message: '时间跨度不能超过一天',
+        },
+      ]}
+    />
+  );
+};
diff --git a/packages/ui/src/DateRanger/index.md b/packages/ui/src/DateRanger/index.md
@@ -11,6 +11,7 @@ nav:
 <code src="./demo/basic.tsx" title="基本"></code>
 <code src="./demo/simple-mode.tsx" title="极简模式"></code>
 <code src="./demo/with-form.tsx" title="配合 Form 使用"></code>
+<code src="./demo/rules.tsx" title="使用 rules 自定义校验"></code>
 <code src="./demo/selected.tsx" title="时间范围快捷选项"></code>
 <code src="./demo/default-value.tsx" title="指定默认值"></code>
 <code src="./demo/locale.tsx" title="国际化"></code>
@@ -20,7 +21,7 @@ nav:
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | :-- | :-- | :-- | :-- | :-- |
-| selects | 快速选择时间配置项 | RangeOption | [NEAR_1_MINUTES, NEAR_30_MINUTES, NEAR_1_HOURS,NEAR_3_HOURS, NEAR_6_HOURS, TODAY, LAST_3_DAYS] | - |
+| selects | 快速选择时间配置项 | [RangeOption](#rangeoption) | [NEAR_1_MINUTES, NEAR_30_MINUTES, NEAR_1_HOURS,NEAR_3_HOURS, NEAR_6_HOURS, TODAY, LAST_3_DAYS] | - |
 | value | DatePicker 控件的值 | Dayjs[] \| Moment[] | - | - |
 | onChange | value 变化时的回调函数 | (range: Dayjs[] \| Moment[]) => void | noop | - |
 | defaultValue | DatePicker 控件的默认值 | Dayjs[] \| Moment[] | - | - |
@@ -29,6 +30,7 @@ nav:
 | hasRewind | 后退按钮 | boolean | true | - |
 | hasForward | 前进按钮 | boolean | true | - |
 | hasSync | 刷新按钮 | boolean | true | - |
+| rules | 校验规则，设置字段的校验逻辑。[点击此处](#packages-ui-src-date-ranger-demo-rules)查看示例 | Rule[] | - | - |
 | hasTagInPicker | 在选项面板中是否展示Tag | boolean | false | - |
 | pastOnly | 只能选择过去时间 | boolean | false | - |
 | disabledDate | 不可选择的日期 | (currentDate: Dayjs \| Moment) => boolean | - | - |
@@ -38,7 +40,6 @@ nav:
 | hideSecond | 隐藏"秒” | boolean | false | - |
 | autoCalcRange | 自动计算时间范围并回显到选择器tag | boolean | false | - |
 | ref | updateCurrentTime 手动更新当前时间 | function | - | - |
-
 | 其他 antd/RangePicker 的 `props` | [antd-RangePicker](https://ant.design/components/date-picker-cn/#RangePicker) | - | - | - |
 
 ### RangeOption
@@ -49,3 +50,14 @@ nav:
 | name       | 快速选择的名称(英文) | string                    | -      | -    |
 | rangeLabel | 快速选择的区间简写   | string                    | -      | -    |
 | range      | 选中的时间区间       | () => Dayjs[] \| Moment[] | -      | -    |
+
+### Rule
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| :-- | :-- | :-- | :-- | :-- |
+| validator | 自定义校验，存在返回值时，会将对应位置标红并展示错误信息 | (value) => RuleErrorType \| RuleErrorType[] \| undefined | - | - |
+| message | 错误信息 | string | - | - |
+
+### RuleErrorType
+
+`'all' | 'startDate' |  'startTime' | 'endDate' |   'endTime' |`
diff --git a/packages/ui/src/DateRanger/index.ts b/packages/ui/src/DateRanger/index.ts
@@ -25,29 +25,28 @@ import InternalDateRanger from './Ranger';
 
 export * from './Ranger';
 
-const DateRanger = InternalDateRanger;
-
-// 内置 ranges
-DateRanger.NEAR_1_MINUTES = NEAR_1_MINUTES;
-DateRanger.NEAR_5_MINUTES = NEAR_5_MINUTES;
-DateRanger.NEAR_10_MINUTES = NEAR_10_MINUTES;
-DateRanger.NEAR_20_MINUTES = NEAR_20_MINUTES;
-DateRanger.NEAR_30_MINUTES = NEAR_30_MINUTES;
-DateRanger.NEAR_1_HOURS = NEAR_1_HOURS;
-DateRanger.NEAR_2_HOURS = NEAR_2_HOURS;
-DateRanger.NEAR_3_HOURS = NEAR_3_HOURS;
-DateRanger.NEAR_6_HOURS = NEAR_6_HOURS;
-DateRanger.NEAR_12_HOURS = NEAR_12_HOURS;
-DateRanger.TODAY = TODAY;
-DateRanger.LAST_1_DAY = LAST_1_DAY;
-DateRanger.LAST_3_DAYS = LAST_3_DAYS;
-DateRanger.YESTERDAY = YESTERDAY;
-DateRanger.THIS_WEEK = THIS_WEEK;
-DateRanger.LAST_WEEK = LAST_WEEK;
-DateRanger.THIS_MONTH = THIS_MONTH;
-DateRanger.LAST_MONTH = LAST_MONTH;
-DateRanger.THIS_YEAR = THIS_YEAR;
-DateRanger.LAST_YEAR = LAST_YEAR;
-DateRanger.NEXT_YEAR = NEXT_YEAR;
+const DateRanger = Object.assign(InternalDateRanger, {
+  NEAR_1_MINUTES,
+  NEAR_5_MINUTES,
+  NEAR_10_MINUTES,
+  NEAR_20_MINUTES,
+  NEAR_30_MINUTES,
+  NEAR_1_HOURS,
+  NEAR_2_HOURS,
+  NEAR_3_HOURS,
+  NEAR_6_HOURS,
+  NEAR_12_HOURS,
+  TODAY,
+  LAST_1_DAY,
+  LAST_3_DAYS,
+  YESTERDAY,
+  THIS_WEEK,
+  LAST_WEEK,
+  THIS_MONTH,
+  LAST_MONTH,
+  THIS_YEAR,
+  LAST_YEAR,
+  NEXT_YEAR,
+});
 
 export default DateRanger;
