Merge pull request #885 from oceanbase/fix/date-ranger-desgin

improve(ui): DateRanger style
oceanbase · Dec 14, 2024 · f3bc49c · f3bc49c
2 parents 50361ac + 6206ef7
commit f3bc49c
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 65 deletions.
diff --git a/packages/ui/src/DateRanger/PickerPanel.tsx b/packages/ui/src/DateRanger/PickerPanel.tsx
@@ -289,6 +289,7 @@ const InternalPickerPanel = (props: PickerPanelProps) => {
                 initialValue={defaultS || defaultTime}
               >
                 <TimePicker
+                  allowClear={false}
                   suffixIcon={null}
                   needConfirm={false}
                   getPopupContainer={triggerNode => triggerNode.parentNode as HTMLElement}
@@ -347,6 +348,7 @@ const InternalPickerPanel = (props: PickerPanelProps) => {
                 initialValue={defaultE || defaultTime}
               >
                 <TimePicker
+                  allowClear={false}
                   suffixIcon={null}
                   needConfirm={false}
                   getPopupContainer={triggerNode => triggerNode.parentNode as HTMLElement}

diff --git a/packages/ui/src/DateRanger/Ranger.tsx b/packages/ui/src/DateRanger/Ranger.tsx
@@ -1,5 +1,14 @@
 import React, { useEffect, useRef, useState, useImperativeHandle } from 'react';
-import { Button, DatePicker, Divider, Dropdown, Radio, Space, theme } from '@oceanbase/design';
+import {
+  Button,
+  DatePicker,
+  Divider,
+  Dropdown,
+  Radio,
+  Space,
+  Tooltip,
+  theme,
+} from '@oceanbase/design';
 import type { TooltipProps, FormItemProps } from '@oceanbase/design';
 import {
   LeftOutlined,
@@ -32,9 +41,14 @@ import {
   LAST_3_DAYS,
   DATE_TIME_SECOND_FORMAT,
   YEAR_DATE_TIME_SECOND_FORMAT,
+  DATE_TIME_FORMAT_CN,
+  DATE_TIME_SECOND_FORMAT_CN,
+  YEAR_DATE_TIME_FORMAT_CN,
+  YEAR_DATE_TIME_SECOND_FORMAT_CN,
 } from './constant';
 import type { RangeOption } from './typing';
-import InternalPickerPanel, { Rule } from './PickerPanel';
+import type { Rule } from './PickerPanel';
+import InternalPickerPanel from './PickerPanel';
 import zhCN from './locale/zh-CN';
 import enUS from './locale/en-US';
 import './index.less';
@@ -125,6 +139,7 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
   } = props;
 
   const { token } = theme.useToken();
+  const isCn = locale.locale === 'zh_CN';
 
   // 是否为 moment 时间对象
   const isMoment =
@@ -153,6 +168,7 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
 
   const [open, setOpen] = useState(false);
   const [tooltipOpen, setTooltipOpen] = useState(false);
+  const [backRadioFocused, setBackRadioFocused] = useState(false);
   const refState = useRef({
     tooltipOpen,
   });
@@ -325,9 +341,20 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
       : selects[rangeNameIndex + 1];
 
   return (
-    <Space className={classNames(prefix)} style={rest.style}>
+    <Space
+      className={classNames({
+        [prefix]: true,
+        [`${prefix}-show-range`]: true,
+        [`${prefix}-back-radio-focused`]: backRadioFocused,
+      })}
+      style={rest.style}
+    >
       <Space size={0}>
-        <div className={`${prefix}-wrapper`}>
+        <div
+          className={classNames(`${prefix}-wrapper`, {
+            [`${prefix}-wrapper-has-jumper`]: hasRewind || hasForward,
+          })}
+        >
           <Dropdown
             trigger={['click']}
             open={open}
@@ -429,7 +456,7 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
             >
               {/* @ts-ignore  */}
               <DatePicker.RangePicker
-                className={`${prefix}-picker`}
+                className={classNames(`${prefix}-picker`)}
                 style={{
                   pointerEvents: 'none',
                   border: 0,
@@ -438,18 +465,21 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
                   // format 会影响布局，原先采用 v.year() === new Date().getFullYear() 进行判断，value 一共会传入三次(range0 range1 now), 会传入最新的时间导致判断异常
                   if (hideYear && isThisYear) {
                     return hideSecond
-                      ? v.format(DATE_TIME_FORMAT)
-                      : v.format(DATE_TIME_SECOND_FORMAT);
+                      ? v.format(isCn ? DATE_TIME_FORMAT_CN : DATE_TIME_FORMAT)
+                      : v.format(isCn ? DATE_TIME_SECOND_FORMAT_CN : DATE_TIME_SECOND_FORMAT);
                   }
                   return hideSecond
-                    ? v.format(YEAR_DATE_TIME_FORMAT)
-                    : v.format(YEAR_DATE_TIME_SECOND_FORMAT);
+                    ? v.format(isCn ? YEAR_DATE_TIME_FORMAT_CN : YEAR_DATE_TIME_FORMAT)
+                    : v.format(
+                        isCn ? YEAR_DATE_TIME_SECOND_FORMAT_CN : YEAR_DATE_TIME_SECOND_FORMAT
+                      );
                 }}
                 // @ts-ignore
                 value={innerValue}
                 onChange={datePickerChange}
                 allowClear={false}
                 size={size}
+                suffixIcon={null}
                 // 透传 props 到 antd Ranger
                 {...omit(rest, 'value', 'onChange')}
               />
@@ -462,57 +492,75 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
           buttonStyle="solid"
         >
           {hasRewind && (
-            <Radio.Button
-              value="stepBack"
-              style={{
-                paddingInline: 8,
-                borderInlineStart: 0,
-                borderRadius: 0,
-              }}
-              onClick={() => {
-                if (isPlay) {
-                  setIsPlay(false);
-                }
-
-                if (startTime && endTime) {
-                  const newStartTime = (startTime as Dayjs)
-                    .clone()
-                    .subtract(differenceMs, 'milliseconds');
-                  const newEndTime = startTime?.clone() as Dayjs;
-                  rangeChange([newStartTime, newEndTime]);
-                }
-              }}
+            <Tooltip
+              title={locale.jumpBack}
+              getPopupContainer={trigger => trigger.parentNode as HTMLElement}
             >
-              <LeftOutlined />
-            </Radio.Button>
-          )}
-          {hasForward && (
-            <Radio.Button
-              value="stepForward"
-              style={{ paddingInline: 8 }}
-              disabled={isPlay}
-              onClick={() => {
-                if (startTime && endTime) {
-                  const newStartTime = endTime.clone() as Dayjs;
-                  const newEndTime = (endTime as Dayjs).clone().add(differenceMs);
+              <Radio.Button
+                value="stepBack"
+                style={{
+                  paddingInline: 8,
+                  borderInlineStart: 0,
+                  borderTopLeftRadius: 0,
+                  borderBottomLeftRadius: 0,
+                }}
+                onMouseEnter={() => setBackRadioFocused(true)}
+                onMouseLeave={() => setBackRadioFocused(false)}
+                onClick={() => {
+                  if (isPlay) {
+                    setIsPlay(false);
+                  }
 
-                  if (newEndTime.isBefore(new Date())) {
+                  if (startTime && endTime) {
+                    const newStartTime = (startTime as Dayjs)
+                      .clone()
+                      .subtract(differenceMs, 'milliseconds');
+                    const newEndTime = startTime?.clone() as Dayjs;
                     rangeChange([newStartTime, newEndTime]);
-                  } else {
-                    setIsPlay(true);
-                    setNow();
                   }
-                }
-              }}
+                }}
+              >
+                <LeftOutlined />
+              </Radio.Button>
+            </Tooltip>
+          )}
+          {hasForward && (
+            <Tooltip
+              title={locale.jumpForward}
+              getPopupContainer={trigger => trigger.parentNode as HTMLElement}
             >
-              <RightOutlined />
-            </Radio.Button>
+              <Radio.Button
+                value="stepForward"
+                style={{
+                  paddingInline: 8,
+                  borderInlineStart: 0,
+                  borderTopLeftRadius: 0,
+                  borderBottomLeftRadius: 0,
+                }}
+                // disabled={isPlay}
+                onClick={() => {
+                  if (startTime && endTime) {
+                    const newStartTime = endTime.clone() as Dayjs;
+                    const newEndTime = (endTime as Dayjs).clone().add(differenceMs);
+
+                    if (newEndTime.isBefore(new Date())) {
+                      rangeChange([newStartTime, newEndTime]);
+                    } else {
+                      setIsPlay(true);
+                      setNow();
+                    }
+                  }
+                }}
+              >
+                <RightOutlined />
+              </Radio.Button>
+            </Tooltip>
           )}
         </Radio.Group>
       </Space>
-      {hasSync && (
+      {hasSync && rangeName !== CUSTOMIZE && (
         <Button
-          style={{ paddingInline: 8 }}
+          style={{ paddingInline: 8, color: token.colorTextSecondary }}
           onClick={() => {
             setNow();
           }}
@@ -523,6 +571,7 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
       {hasZoomOut && (
         <Button
           disabled={!nextRangeItem}
+          style={{ color: token.colorTextSecondary }}
           onClick={() => {
             setIsPlay(true);
             if (nextRangeItem) {

diff --git a/packages/ui/src/DateRanger/constant/index.ts b/packages/ui/src/DateRanger/constant/index.ts
@@ -15,10 +15,14 @@ const WEEK_UNIT = 'week';
 const MONTH_UNIT = 'month';
 const YEAR_UNIT = 'year';
 
-export const YEAR_DATE_TIME_SECOND_FORMAT = 'YYYY-MM-DD HH:mm:ss';
-export const YEAR_DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm';
-export const DATE_TIME_SECOND_FORMAT = 'MM-DD HH:mm:ss';
-export const DATE_TIME_FORMAT = 'MM-DD HH:mm';
+export const YEAR_DATE_TIME_SECOND_FORMAT = 'YYYY/MM/DD HH:mm:ss';
+export const YEAR_DATE_TIME_FORMAT = 'YYYY/MM/DD HH:mm';
+export const DATE_TIME_SECOND_FORMAT = 'MM/DD HH:mm:ss';
+export const DATE_TIME_FORMAT = 'MM/DD HH:mm';
+export const YEAR_DATE_TIME_SECOND_FORMAT_CN = 'YYYY-MM-DD HH:mm:ss';
+export const YEAR_DATE_TIME_FORMAT_CN = 'YYYY-MM-DD HH:mm';
+export const DATE_TIME_SECOND_FORMAT_CN = 'MM-DD HH:mm:ss';
+export const DATE_TIME_FORMAT_CN = 'MM-DD HH:mm';
 
 export const NEAR_1_MINUTES: RangeOption = {
   label: '近 1 分钟',

diff --git a/packages/ui/src/DateRanger/demo/updateCurrentTime.tsx b/packages/ui/src/DateRanger/demo/updateCurrentTime.tsx
@@ -10,6 +10,7 @@ type TimeRangeRef = {
 export default () => {
   const ref = useRef<TimeRangeRef>();
   const [timeRange, setTimeRange] = useState([]);
+  const format = 'YYYY-MM-DD HH:mm:ss';
   return (
     <div>
       <Flex gap="middle" align="center">
@@ -19,17 +20,14 @@ export default () => {
             ref.current.updateCurrentTime();
           }}
         >
-          更新最新时间
+          从外部更新时间
         </Button>
         {timeRange.length && (
           <span>
-            {`${dayjs(timeRange[0]).format('YYYY-MM-DD HH:mm:ss')} ~ ${dayjs(timeRange[1]).format(
-              'YYYY-MM-DD HH:mm:ss'
-            )}`}
+            {`${dayjs(timeRange[0]).format(format)} ~ ${dayjs(timeRange[1]).format(format)}`}
           </span>
         )}
       </Flex>
-
       <Divider children="preview" />
       <DateRanger
         ref={ref}

diff --git a/packages/ui/src/DateRanger/index.less b/packages/ui/src/DateRanger/index.less
@@ -4,11 +4,13 @@
 
 .@{prefix} {
   cursor: pointer;
+
   .@{prefix}-wrapper {
     border: 1px solid @colorBorder;
-    border-radius: 4px 0 0 4px;
     box-sizing: border-box;
     display: flex;
+    border-radius: ~'@{borderRadius}px';
+    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
     // FIXED: 存在不生效情况
     .@{prefix}-picker {
       padding-left: 0px;
@@ -18,6 +20,15 @@
         text-align: center;
       }
     }
+
+    &:hover {
+      border-color: @colorPrimaryBorderHover;
+    }
+  }
+
+  .@{prefix}-wrapper-has-jumper {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
   }
 
   .@{prefix}-play {
@@ -88,20 +99,43 @@
   }
 
   .@{prefix}-playback-control {
-    margin-left: 8px;
-
     .@{prefixCls}-radio-button-wrapper {
       padding-inline: 8px;
+      color: @colorTextSecondary;
+      transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &:hover {
+        border-color: @colorPrimaryBorderHover;
+
+        &::before {
+          background-color: @colorPrimaryBorderHover;
+        }
+      }
     }
   }
 }
 
 .@{prefix}-label {
-  background-color: rgb(226, 229, 237);
+  background-color: @colorFillSecondary;
+  color: @colorTextSecondary;
   display: inline-block;
   width: 60px;
   padding: 4px 0;
   border-radius: 4px;
   line-height: 1;
   text-align: center;
 }
+
+.@{prefix}-back-radio-focused {
+  .@{prefix}-wrapper {
+    border-right-color: @colorPrimaryBorderHover;
+  }
+
+  .@{prefix}-playback-control {
+    .@{prefixCls}-radio-button-wrapper:first-child {
+      + .@{prefixCls}-radio-button-wrapper::before {
+        background-color: @colorPrimaryBorderHover;
+      }
+    }
+  }
+}
diff --git a/packages/ui/src/DateRanger/index.md b/packages/ui/src/DateRanger/index.md
@@ -15,7 +15,7 @@ nav:
 
 <code src="./demo/default-value.tsx" title="指定默认值"></code>
 
-<code src="./demo/updateCurrentTime.tsx" title="更新当前时间"></code>
+<code src="./demo/updateCurrentTime.tsx" title="从外部更新时间"></code>
 
 ## API
 

diff --git a/packages/ui/src/DateRanger/locale/en-US.ts b/packages/ui/src/DateRanger/locale/en-US.ts
@@ -10,5 +10,7 @@ export default {
   cancel: 'cancel',
   confirm: 'confirm',
   current: 'current',
+  jumpBack: 'Previous Interval',
+  jumpForward: 'Next Interval',
   ...en_US,
 };
diff --git a/packages/ui/src/DateRanger/locale/zh-CN.ts b/packages/ui/src/DateRanger/locale/zh-CN.ts
@@ -10,5 +10,7 @@ export default {
   cancel: '取消',
   confirm: '确定',
   current: '当前',
+  jumpBack: '向前跳转一个时间区间',
+  jumpForward: '向后跳转一个时间区间',
   ...zh_CN,
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,7 @@ nav: @@
     <code src="./demo/default-value.tsx" title="指定默认值"></code>
-    <code src="./demo/updateCurrentTime.tsx" title="更新当前时间"></code>
+    <code src="./demo/updateCurrentTime.tsx" title="从外部更新时间"></code>
     ## API
@@ Expand Down @@