Revert "feat: Delete step interaction"

This reverts commit 721e52d.
oceanbase · Apr 29, 2024 · eb9dbec · eb9dbec
1 parent 721e52d
commit eb9dbec
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 7 deletions.
diff --git a/packages/ui/src/DateRanger/Ranger.tsx b/packages/ui/src/DateRanger/Ranger.tsx
@@ -62,10 +62,13 @@ export interface DateRangerProps
   value?: RangeValue;
   defaultValue?: RangeValue;
   size?: 'small' | 'large' | 'middle';
+  mode?: 'normal' | 'step';
   tooltipProps?: TooltipProps;
 }
 
 const prefix = getPrefix('date-ranger');
+const STEP_QUICK = 0;
+const STEP_CUSTOMIZE = 1;
 
 const Ranger = (props: DateRangerProps) => {
   const {
@@ -93,6 +96,7 @@ const Ranger = (props: DateRangerProps) => {
     size,
     //固定 rangeName
     stickRangeName = false,
+    mode = 'normal',
     tooltipProps,
     ...rest
   } = props;
@@ -118,12 +122,17 @@ const Ranger = (props: DateRangerProps) => {
         ?.range(isMoment ? moment() : dayjs()) as RangeValue)
   );
 
+  const isStepMode = mode === 'step';
+  const [step, setStep] = useState(STEP_QUICK);
+
   const [open, setOpen] = useState(false);
   const [tooltipOpen, setTooltipOpen] = useState(false);
   const refState = useRef({
     tooltipOpen,
+    step,
   });
   refState.current.tooltipOpen = tooltipOpen;
+  refState.current.step = step;
 
   // 没有 selects 时，回退到普通 RangePicker, 当前时间选项为自定义时，应该显示 RangePicker
   const [isPlay, setIsPlay] = useState(rangeName !== CUSTOMIZE);
@@ -299,14 +308,65 @@ const Ranger = (props: DateRangerProps) => {
             destroyPopupOnHide={true}
             // 存在缓存，会锁死里面的值
             onOpenChange={o => {
-              if (o === false && refState.current.tooltipOpen) {
+              if (
+                o === false &&
+                (refState.current.tooltipOpen || refState.current.step === STEP_CUSTOMIZE)
+              ) {
                 return;
               }
 
               setOpen(o);
             }}
+            dropdownRender={menu => {
+              if (step === STEP_CUSTOMIZE) {
+                return (
+                  <div
+                    style={{
+                      background: '#fff',
+                      padding: '6px 12px',
+                      boxShadow: token.boxShadowSecondary,
+                    }}
+                  >
+                    <a
+                      onClick={() => {
+                        setStep(STEP_QUICK);
+                      }}
+                    >
+                      返回上一层
+                    </a>
+                    <InternalPickerPanel
+                      defaultValue={innerValue}
+                      // @ts-ignore
+                      locale={locale.rcPicker}
+                      isMoment={isMoment}
+                      onOk={vList => {
+                        setIsPlay(false);
+                        rangeChange(
+                          vList.map(v => {
+                            return isMoment ? moment(v) : dayjs(v);
+                          }) as RangeValue
+                        );
+                        setStep(STEP_QUICK);
+                        closeTooltip();
+                      }}
+                      onCancel={() => {
+                        setStep(STEP_QUICK);
+                        closeTooltip();
+                      }}
+                    />
+                  </div>
+                );
+              }
+              return menu;
+            }}
             menu={{
               onClick: ({ key, domEvent }) => {
+                if (key === CUSTOMIZE && isStepMode) {
+                  // updateState 的修改会慢于 openChange 的判断，所以修改 refState.current.step 让 Dropdown 不要关闭
+                  refState.current.step = STEP_CUSTOMIZE;
+                  return setStep(STEP_CUSTOMIZE);
+                }
+
                 const selected = NEAR_TIME_LIST.find(_item => _item.name === key);
                 // 存在快捷选项切换为极简模式
                 if (selected?.range) {
@@ -330,7 +390,7 @@ const Ranger = (props: DateRangerProps) => {
                   return {
                     key: item.name,
                     label:
-                      item.name === CUSTOMIZE ? (
+                      item.name === CUSTOMIZE && !isStepMode ? (
                         <Tooltip
                           open={tooltipOpen}
                           arrow={false}
@@ -340,16 +400,12 @@ const Ranger = (props: DateRangerProps) => {
                             }
                           }}
                           placement="right"
-                          {...tooltipProps}
                           overlayStyle={{
                             maxWidth: 'none',
-                            ...tooltipProps?.overlayStyle,
                           }}
                           overlayInnerStyle={{
                             background: '#fff',
                             maxHeight: 'none',
-                            margin: 16,
-                            ...tooltipProps?.overlayInnerStyle,
                           }}
                           title={
                             <InternalPickerPanel
@@ -372,6 +428,7 @@ const Ranger = (props: DateRangerProps) => {
                               }}
                             />
                           }
+                          {...tooltipProps}
                         >
                           <Space size={8} style={isPlay ? {} : { width: 310 }}>
                             <span className={`${prefix}-label`}>{item.rangeLabel}</span>

diff --git a/packages/ui/src/DateRanger/demo/basic2.tsx b/packages/ui/src/DateRanger/demo/basic2.tsx
@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { DateRanger } from '@oceanbase/ui';
+import { Checkbox, Divider, Flex } from '@oceanbase/design';
+
+export default () => {
+  const options = [
+    // { label: 'hasPlay', value: 'hasPlay' },
+    { label: 'hasRewind', value: 'hasRewind' },
+    { label: 'hasForward', value: 'hasForward' },
+    // { label: 'hasZoomOut', value: 'hasZoomOut' },
+  ];
+
+  const [state, setState] = useState(options.map(item => item.value));
+
+  const onChange = checkedValue => {
+    setState(checkedValue);
+  };
+  const getValue = name => {
+    return state.some(v => v === name);
+  };
+
+  return (
+    <div>
+      <Flex gap="middle" vertical>
+        <Checkbox.Group options={options} value={state} onChange={onChange} />
+      </Flex>
+      <Divider children="preview" />
+      <DateRanger
+        mode="step"
+        hasForward={getValue('hasForward')}
+        // hasPlay={getValue('hasPlay')}
+        hasRewind={getValue('hasRewind')}
+        // hasZoomOut={getValue('hasZoomOut')}
+      />
+    </div>
+  );
+};
diff --git a/packages/ui/src/DateRanger/index.md b/packages/ui/src/DateRanger/index.md
@@ -7,7 +7,7 @@ nav:
 
 ## 代码演示
 
-<code src="./demo/basic.tsx" title="交互一"></code>
+<code src="./demo/basic.tsx" title="交互一"></code> <code src="./demo/basic2.tsx" title="交互二"></code>
 
 <!-- <code src="./demo/with-form.tsx" title="配合 Form 使用"></code>