improve: mutual

oceanbase · Mar 27, 2024 · aed1faa · aed1faa
1 parent 70b4937
commit aed1faa
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 33 deletions.
diff --git a/packages/ui/src/DateRanger/Ranger.tsx b/packages/ui/src/DateRanger/Ranger.tsx
@@ -1,15 +1,21 @@
+import React, { useEffect, useRef, useState } from 'react';
 import { Button, DatePicker, Dropdown, Radio, Space, Tooltip, theme } from '@oceanbase/design';
+import type { TooltipProps } from '@oceanbase/design';
+import {
+  LeftOutlined,
+  PauseOutlined,
+  CaretRightOutlined,
+  RightOutlined,
+  ZoomOutOutlined,
+} from '@oceanbase/icons';
 import type { RangePickerProps } from '@oceanbase/design/es/date-picker';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import { findIndex, isNil, noop, omit } from 'lodash';
 import type { Moment } from 'moment';
 import moment from 'moment';
 import classNames from 'classnames';
-import { useInterval } from 'ahooks';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
 import LocaleWrapper from '../locale/LocaleWrapper';
-
 import { getPrefix } from '../_util';
 import {
   CUSTOMIZE,
@@ -24,17 +30,10 @@ import {
   YEAR_DATE_TIME_FORMAT,
   LAST_3_DAYS,
 } from './constant';
-import './index.less';
-import zhCN from './locale/zh-CN';
 import type { RangeOption } from './typing';
-import {
-  LeftOutlined,
-  PauseOutlined,
-  CaretRightOutlined,
-  RightOutlined,
-  ZoomOutOutlined,
-} from '@oceanbase/icons';
 import InternalPickerPanel from './PickerPanel';
+import zhCN from './locale/zh-CN';
+import './index.less';
 
 export type RangeName = 'customize' | string;
 
@@ -53,6 +52,7 @@ export interface DateRangerProps
   // ui 相关
   hasRewind?: boolean;
   hasPlay?: boolean;
+  hasNow?: boolean;
   hasForward?: boolean;
   hasZoomOut?: boolean;
   /** 是否只允许选择过去时间 */
@@ -63,6 +63,7 @@ export interface DateRangerProps
   defaultValue?: RangeValue;
   size?: 'small' | 'large' | 'middle';
   mode?: 'normal' | 'step';
+  tooltipProps?: TooltipProps;
 }
 
 const prefix = getPrefix('date-ranger');
@@ -85,6 +86,7 @@ const Ranger = (props: DateRangerProps) => {
     defaultQuickValue,
     hasRewind = true,
     hasPlay = false,
+    hasNow = true,
     hasForward = true,
     hasZoomOut = false,
     pastOnly = false,
@@ -95,6 +97,7 @@ const Ranger = (props: DateRangerProps) => {
     //固定 rangeName
     stickRangeName = false,
     mode = 'normal',
+    tooltipProps,
     ...rest
   } = props;
 
@@ -402,6 +405,7 @@ const Ranger = (props: DateRangerProps) => {
                           }}
                           overlayInnerStyle={{
                             background: '#fff',
+                            maxHeight: 'none',
                           }}
                           title={
                             <InternalPickerPanel
@@ -424,6 +428,7 @@ const Ranger = (props: DateRangerProps) => {
                               }}
                             />
                           }
+                          {...tooltipProps}
                         >
                           <Space size={8} style={isPlay ? {} : { width: 310 }}>
                             <span className={`${prefix}-label`}>{item.rangeLabel}</span>
@@ -509,7 +514,7 @@ const Ranger = (props: DateRangerProps) => {
               <LeftOutlined />
             </Radio.Button>
           )}
-          {hasPlay && (
+          {/* {hasPlay && (
             <Radio.Button
               value={'play'}
               style={{ paddingInline: 8 }}
@@ -520,7 +525,7 @@ const Ranger = (props: DateRangerProps) => {
             >
               {isPlay ? <PauseOutlined /> : <CaretRightOutlined />}
             </Radio.Button>
-          )}
+          )} */}
           {hasForward && (
             <Radio.Button
               value="stepForward"
@@ -545,14 +550,16 @@ const Ranger = (props: DateRangerProps) => {
           )}
         </Radio.Group>
       </Space>
-      <Button
-        style={{ paddingInline: 8 }}
-        onClick={() => {
-          setNow();
-        }}
-      >
-        当前
-      </Button>
+      {hasNow && (
+        <Button
+          style={{ paddingInline: 8 }}
+          onClick={() => {
+            setNow();
+          }}
+        >
+          当前
+        </Button>
+      )}
       {hasZoomOut && (
         <Button
           disabled={!nextRangeItem}

diff --git a/packages/ui/src/DateRanger/index.less b/packages/ui/src/DateRanger/index.less
@@ -3,20 +3,19 @@
 @prefix: ob-date-ranger;
 
 .@{prefix} {
-  .@{prefix}-picker {
-    padding-left: 0px;
-    border: 0px;
-
-    input {
-      text-align: center;
-    }
-  }
-
   .@{prefix}-wrapper {
     border: 1px solid @colorBorder;
     border-radius: 4px 0 0 4px;
     box-sizing: border-box;
-    min-width: 160px;
+    // FIXED: 存在不生效情况
+    .@{prefix}-picker {
+      padding-left: 0px;
+      border: 0px;
+      pointer-events: none;
+      input {
+        text-align: center;
+      }
+    }
   }
 
   .@{prefix}-play {

diff --git a/packages/ui/src/DateRanger/index.md b/packages/ui/src/DateRanger/index.md
@@ -25,9 +25,9 @@ nav:
 | defaultValue | DatePicker 控件的默认值 | Dayjs[] \| Moment[] | - | - |
 | defaultQuickValue | 快速选择的默认值（优先级低于 value/defaultValue） | string | - | - |
 | hasRewind | 后退按钮 | boolean | true | - |
-| hasPlay | 播放按钮 | boolean | true | - |
 | hasForward | 前进按钮 | boolean | true | - |
 | hasZoomOut | 缩小按钮（跨大时间范围） | boolean | true | - |
+| hasNow | 当前按钮 | boolean | true | - |
 | pastOnly | 只能选择过去时间 | boolean | false | - |
 | disabledDate | 不可选择的日期 | (currentDate: Dayjs \| Moment) => boolean | - | - |
 | 其他 antd/RangePicker 的 `props` | [antd-RangePicker](https://ant.design/components/date-picker-cn/#RangePicker) | - | - | - |