From 4b184672ec37d5373c4595eed9c460f623b78518 Mon Sep 17 00:00:00 2001
From: linhf123 <wb-lhf780012@antgroup.com>
Date: Mon, 13 Jan 2025 16:14:48 +0800
Subject: [PATCH 1/3] fix(DateRanger): Add allowClear

---
 packages/ui/src/DateRanger/PickerPanel.tsx | 11 ++++++-----
 packages/ui/src/DateRanger/Ranger.tsx      |  9 ++++-----
 packages/ui/src/DateRanger/demo/basic.tsx  |  1 +
 packages/ui/src/DateRanger/demo/locale.tsx |  2 +-
 packages/ui/src/DateRanger/index.less      |  2 +-
 5 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/DateRanger/PickerPanel.tsx b/packages/ui/src/DateRanger/PickerPanel.tsx
index 45c689c15..12ff3e57e 100644
--- 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
index a8abd6410..d733ad30e 100644
--- 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
index 472a85b0b..58920e6f3 100644
--- a/packages/ui/src/DateRanger/demo/basic.tsx
+++ b/packages/ui/src/DateRanger/demo/basic.tsx
@@ -26,6 +26,7 @@ export default () => {
       </Flex>
       <Divider children="preview" />
       <DateRanger
+        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
index 91ce60ef3..76750a751 100644
--- 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
index aeb52bb0d..87365a95a 100644
--- a/packages/ui/src/DateRanger/index.less
+++ b/packages/ui/src/DateRanger/index.less
@@ -14,8 +14,8 @@
     // FIXED: 存在不生效情况
     .@{prefix}-picker {
       padding-left: 0px;
+      padding-right: 16px;
       border: 0px;
-      pointer-events: none;
       input {
         text-align: center;
       }

From 4c0b307ebb396ff3d124f8f6c329acae5793b37a Mon Sep 17 00:00:00 2001
From: linhf123 <wb-lhf780012@antgroup.com>
Date: Mon, 13 Jan 2025 16:33:55 +0800
Subject: [PATCH 2/3] docs(DateRanger): basic Demo log value

---
 packages/ui/src/DateRanger/demo/basic.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/ui/src/DateRanger/demo/basic.tsx b/packages/ui/src/DateRanger/demo/basic.tsx
index 58920e6f3..f3919bec3 100644
--- a/packages/ui/src/DateRanger/demo/basic.tsx
+++ b/packages/ui/src/DateRanger/demo/basic.tsx
@@ -26,6 +26,13 @@ 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')}

From d96198ee2cb19694148ccc0f18701013859a9d5c Mon Sep 17 00:00:00 2001
From: linhf123 <wb-lhf780012@antgroup.com>
Date: Tue, 14 Jan 2025 15:11:14 +0800
Subject: [PATCH 3/3] fix(DateRanger): The customized style makes DateRanger a
 whole.

---
 packages/ui/src/DateRanger/index.less | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/ui/src/DateRanger/index.less b/packages/ui/src/DateRanger/index.less
index 87365a95a..584c19e08 100644
--- a/packages/ui/src/DateRanger/index.less
+++ b/packages/ui/src/DateRanger/index.less
@@ -19,6 +19,14 @@
       input {
         text-align: center;
       }
+      // 覆盖默认 antd 样式，定制出 RangerPicker 整体的感觉
+      .@{prefixCls}-picker-active-bar {
+        height: 0;
+      }
+
+      .@{prefixCls}-picker-input > input {
+        cursor: pointer;
+      }
     }
 
     &:hover {