feat: Update the latest time through the ref attribute

oceanbase · Nov 28, 2024 · b30ba64 · b30ba64
1 parent 6540de1
commit b30ba64
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 8 deletions.
diff --git a/packages/ui/src/DateRanger/Ranger.tsx b/packages/ui/src/DateRanger/Ranger.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useImperativeHandle } from 'react';
 import { Button, DatePicker, Divider, Dropdown, Radio, Space, theme } from '@oceanbase/design';
 import type { TooltipProps, FormItemProps } from '@oceanbase/design';
 import {
@@ -86,7 +86,7 @@ export interface DateRangerProps
 
 const prefix = getPrefix('date-ranger');
 
-const Ranger = (props: DateRangerProps) => {
+const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
   const {
     selects = [
       NEAR_1_MINUTES,
@@ -138,13 +138,18 @@ const Ranger = (props: DateRangerProps) => {
     value || defaultValue ? CUSTOMIZE : (defaultQuickValue ?? selects?.[0]?.name);
   const [rangeName, setRangeName] = useState(defaultRangeName);
 
-  const [innerValue, setInnerValue] = useState<RangeValue>(
-    value ??
+  const [innerValue, setInnerValue] = useState<RangeValue>(() => {
+    const initValue =
+      value ??
       defaultValue ??
       (selects
         .find(item => item.name === defaultRangeName)
-        ?.range(isMoment ? moment() : dayjs()) as RangeValue)
-  );
+        ?.range(isMoment ? moment() : dayjs()) as RangeValue);
+    if (onChange) {
+      onChange(initValue);
+    }
+    return initValue;
+  });
 
   const [open, setOpen] = useState(false);
   const [tooltipOpen, setTooltipOpen] = useState(false);
@@ -291,6 +296,10 @@ const Ranger = (props: DateRangerProps) => {
     }
   };
 
+  useImperativeHandle(ref, () => ({
+    updateCurrentTime: setNow,
+  }));
+
   const rangeLabel =
     rangeName === CUSTOMIZE
       ? getCustomizeRangeLabel()
@@ -455,7 +464,11 @@ const Ranger = (props: DateRangerProps) => {
           {hasRewind && (
             <Radio.Button
               value="stepBack"
-              style={{ paddingInline: 8, borderInlineStart: 0, borderRadius: 0 }}
+              style={{
+                paddingInline: 8,
+                borderInlineStart: 0,
+                borderRadius: 0,
+              }}
               onClick={() => {
                 if (isPlay) {
                   setIsPlay(false);
@@ -523,7 +536,7 @@ const Ranger = (props: DateRangerProps) => {
       )}
     </Space>
   );
-};
+});
 
 export default LocaleWrapper({
   componentName: 'DateRanger',

diff --git a/packages/ui/src/DateRanger/demo/updateCurrentTime.tsx b/packages/ui/src/DateRanger/demo/updateCurrentTime.tsx
@@ -0,0 +1,44 @@
+import { useState, useRef } from 'react';
+import { DateRanger } from '@oceanbase/ui';
+import { Divider, Flex, Button } from '@oceanbase/design';
+import dayjs from 'dayjs';
+
+type TimeRangeRef = {
+  updateCurrentTime: () => void;
+};
+
+export default () => {
+  const ref = useRef<TimeRangeRef>();
+  const [timeRange, setTimeRange] = useState([]);
+  return (
+    <div>
+      <Flex gap="middle" align="center">
+        <Button
+          onClick={() => {
+            console.log('ref: ', ref);
+            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'
+            )}`}
+          </span>
+        )}
+      </Flex>
+
+      <Divider children="preview" />
+      <DateRanger
+        ref={ref}
+        onChange={setTimeRange}
+        defaultQuickValue={DateRanger.NEAR_30_MINUTES.name}
+        hasRewind={false}
+        hasForward={false}
+        hasSync={false}
+      />
+    </div>
+  );
+};
diff --git a/packages/ui/src/DateRanger/index.md b/packages/ui/src/DateRanger/index.md
@@ -15,6 +15,8 @@ nav:
 
 <code src="./demo/default-value.tsx" title="指定默认值"></code>
 
+<code src="./demo/updateCurrentTime.tsx" title="更新当前时间"></code>
+
 ## API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -34,6 +36,8 @@ nav:
 | hideYear | 当时间范围在本年时，隐藏年份 | boolean | false | - |
 | hideSecond | 隐藏"秒” | boolean | false | - |
 | autoCalcRange | 自动计算时间范围并回显到选择器tag | boolean | false | - |
+| ref | updateCurrentTime 手动更新当前时间 | function | - | - |
+
 | 其他 antd/RangePicker 的 `props` | [antd-RangePicker](https://ant.design/components/date-picker-cn/#RangePicker) | - | - | - |
 
 ### RangeOption