Merge pull request #929 from oceanbase/linhf/fix--daterange-close

fix(ui): DateRanger allowClear should work
oceanbase · Jan 14, 2025 · 9347202 · 9347202
2 parents 395b6dc + d96198e
commit 9347202
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 12 deletions.
diff --git a/packages/ui/src/DateRanger/PickerPanel.tsx b/packages/ui/src/DateRanger/PickerPanel.tsx
@@ -18,15 +18,12 @@ import {
   Space,
   TimePicker,
 } from '@oceanbase/design';
-import type { FormItemProps } from '@oceanbase/design';
 import { noop } from 'lodash';
 import moment from 'moment';
 import dayjs from 'dayjs';
-import { useUpdate } from 'ahooks';
-import { toArray } from '@oceanbase/util';
 import { getPrefix } from '../_util';
 import { DATE_TIME_MONTH_FORMAT, DATE_TIME_MONTH_FORMAT_CN } from './constant';
-type RangeValue = [Moment, Moment] | [Dayjs, Dayjs];
+import type { RangeValue } from './Ranger';
 type ValidateTrigger = 'submit' | 'valueChange';
 
 type MaybeArray<T> = T | T[];
@@ -58,7 +55,7 @@ const TIME_FORMAT = 'HH:mm:ss';
 
 const InternalPickerPanel = (props: PickerPanelProps) => {
   const {
-    defaultValue = [],
+    defaultValue,
     isMoment,
     locale,
     tip,
@@ -259,6 +256,7 @@ const InternalPickerPanel = (props: PickerPanelProps) => {
                 label={locale.startDate}
                 validateStatus={errorTypeMap['startDate']}
                 style={{ marginBottom: 8 }}
+                rules={[{ required: true }]}
               >
                 <Input
                   size="middle"
@@ -289,6 +287,7 @@ const InternalPickerPanel = (props: PickerPanelProps) => {
                 style={{ marginBottom: 8 }}
                 validateStatus={errorTypeMap['startTime']}
                 initialValue={defaultS || defaultTime}
+                rules={[{ required: true }]}
               >
                 <TimePicker
                   allowClear={false}
@@ -319,6 +318,7 @@ const InternalPickerPanel = (props: PickerPanelProps) => {
                 label={locale.endDate}
                 style={{ marginBottom: 0 }}
                 validateStatus={errorTypeMap['endDate']}
+                rules={[{ required: true }]}
               >
                 <Input
                   onBlur={e => {
@@ -348,6 +348,7 @@ const InternalPickerPanel = (props: PickerPanelProps) => {
                 style={{ marginBottom: 0 }}
                 validateStatus={errorTypeMap['endTime']}
                 initialValue={defaultE || defaultTime}
+                rules={[{ required: true }]}
               >
                 <TimePicker
                   allowClear={false}

diff --git a/packages/ui/src/DateRanger/Ranger.tsx b/packages/ui/src/DateRanger/Ranger.tsx
@@ -48,7 +48,7 @@ import './index.less';
 
 export type RangeName = 'customize' | string;
 
-export type RangeValue = [Moment, Moment] | [Dayjs, Dayjs];
+export type RangeValue = [Moment, Moment] | [Dayjs, Dayjs] | [] | null;
 
 export type RangeDateValue = {
   name: RangeName;
@@ -212,7 +212,6 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
     rangeChange(range);
     setRangeName(CUSTOMIZE);
   };
-
   const disabledFuture = (current: Moment | Dayjs) => {
     const futureDay = moment.isMoment(current) ? moment().endOf('day') : dayjs().endOf('day');
     // 禁止选择未来日期
@@ -304,7 +303,6 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
 
   const currentRange = selects.find(_item => _item.name === rangeName);
   const rangeLabel = rangeName === CUSTOMIZE ? getCustomizeRangeLabel() : currentRange?.rangeLabel;
-
   const label =
     rangeName === CUSTOMIZE
       ? getCustomizeLabel()
@@ -360,7 +358,7 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
                   {originNode}
                   <Divider type="vertical" style={{ height: 'auto', margin: '0px 4px 0px 0px' }} />
                   <InternalPickerPanel
-                    defaultValue={innerValue}
+                    defaultValue={innerValue || []}
                     // @ts-ignore
                     locale={locale}
                     disabledDate={pastOnly ? disabledFuture : disabledDate}
@@ -443,7 +441,7 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
               <DatePicker.RangePicker
                 className={classNames(`${prefix}-picker`)}
                 style={{
-                  pointerEvents: 'none',
+                  // pointerEvents: 'none',
                   border: 0,
                 }}
                 format={v => {
@@ -467,6 +465,7 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
                 suffixIcon={null}
                 // 透传 props 到 antd Ranger
                 {...omit(rest, 'value', 'onChange')}
+                open={false}
               />
             </span>
           )}

diff --git a/packages/ui/src/DateRanger/demo/basic.tsx b/packages/ui/src/DateRanger/demo/basic.tsx
@@ -26,6 +26,14 @@ export default () => {
       </Flex>
       <Divider children="preview" />
       <DateRanger
+        onChange={value => {
+          if (value) {
+            console.log(value[0].format(), value[1].format());
+          } else {
+            console.log(value);
+          }
+        }}
+        allowClear={true}
         hasForward={getValue('hasForward')}
         hasRewind={getValue('hasRewind')}
         hasNow={getValue('hasNow')}

diff --git a/packages/ui/src/DateRanger/demo/locale.tsx b/packages/ui/src/DateRanger/demo/locale.tsx
@@ -33,7 +33,7 @@ export default () => {
       </div>
       <ConfigProvider locale={locale}>
         <Space direction="vertical">
-          <DateRanger />
+          <DateRanger allowClear />
           <DateRanger simpleMode />
         </Space>
       </ConfigProvider>

diff --git a/packages/ui/src/DateRanger/index.less b/packages/ui/src/DateRanger/index.less
@@ -14,11 +14,19 @@
     // FIXED: 存在不生效情况
     .@{prefix}-picker {
       padding-left: 0px;
+      padding-right: 16px;
       border: 0px;
-      pointer-events: none;
       input {
         text-align: center;
       }
+      // 覆盖默认 antd 样式，定制出 RangerPicker 整体的感觉
+      .@{prefixCls}-picker-active-bar {
+        height: 0;
+      }
+
+      .@{prefixCls}-picker-input > input {
+        cursor: pointer;
+      }
     }
 
     &:hover {