plain-design 1.0.0-beta.9 → 1.0.0-beta.91

package/src/packages/components/DatePicker/useRangeDateRender.tsx

@@ -1,317 +1,318 @@
-import {eDateEmitRangeType, tDateCompositionPublicParams} from "./date.utils";
-import {TimeRangePanelType} from "../TimePicker/panel/TimeRangePanel";
-import {computed, getComponentCls, iHTMLInputElement, nextTick, reactive, useModel, useRefs} from "plain-design-composition";
-import Input from "../Input";
-import {delay} from "plain-utils/utils/delay";
-import {useFocusHandler} from "../../uses/useFocusHandler";
-import {PDate, plainDate} from "../../utils/plainDate";
-import {limitDatetimeTimePlainData} from "../TimePicker/time.utils";
-import {useRenderReference} from "../../uses/useRenderReference";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {iPopupEditor} from "../usePopupEditor";
-
-export function useRangeDateRender(
-  {
-    props,
-    emit,
-    onBlur,
-    slots,
-    displayPattern,
-    today,
-    onInputClear,
-    maxmin,
-    formatString,
-    getStartPopper,
-    getEndPopper,
-  }: tDateCompositionPublicParams & {
-    onBlur: () => void,
-    onInputClear?: (range: TimeRangePanelType) => void,
-    getStartPopper?: () => iPopupEditor,
-    getEndPopper?: () => iPopupEditor,
-  }) {
-  const { effects } = createEffects();
-  const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, });
-  const reference = useRenderReference();
-  const startModel = useModel(() => props.start, emit.onUpdateStart, { onChange: () => delay().then(() => state.input.start = format.value.start?.getDisplay()) });
-  const endModel = useModel(() => props.end, emit.onUpdateEnd, { onChange: () => delay().then(() => state.input.end = format.value.end?.getDisplay()) });
-
-  const { isFocus } = useFocusHandler({
-    getEls: () => [refs.start, refs.end],
-    /**
-     * Input失去焦点事件，将文本框的值重置为display的值，以避免显示输入不正确的值
-     * @author  韦胜健
-     * @date    2022.7.3 12:27
-     */
-    onBlur: async (e) => {
-      const { start: spd, end: epd } = format.value;
-      if (!props.separate) {
-        /*不是separate模式下，不允许开始以及结束时间一个有值一个没有值*/
-        if (!!spd && !epd) {
-          startModel.value = undefined;
-          await nextTick();
-        } else if (!spd && !!epd) {
-          endModel.value = undefined;
-          await nextTick();
-        }
-      }
-      state.input.start = format.value.start?.getDisplay();
-      state.input.end = format.value.end?.getDisplay();
-      emit.onBlur(e);
-      onBlur();
-    },
-    onFocus: emit.onFocus,
-  });
-
-  const format = computed((): { start: null | PDate, end: null | PDate } => ({
-    start: !startModel.value ? null : plainDate(startModel.value, formatString.value),
-    end: !endModel.value ? null : plainDate(endModel.value, formatString.value),
-  }));
-
-  const state = reactive({
-    input: {
-      start: format.value.start?.getDisplay(),
-      end: format.value.end?.getDisplay(),
-    },
-  });
-
-  const utils = {
-    handleRangeType: (config: { range: TimeRangePanelType, start: () => void, end: () => void }) => {config.range === TimeRangePanelType.start ? config.start() : config.end();},
-    apply: (val: string, type: 'input' | 'picker', range: TimeRangePanelType) => {
-
-      /**
-       * picker在update的时候，会一起派发update start以及update end，即使某个值可能没变
-       * 这里做一层控制，某个值没变化的时候，不往下处理
-       * @author  韦胜健
-       * @date    2022.7.3 19:59
-       */
-      if (type === "picker") {
-        if (range === TimeRangePanelType.start) {
-          if (val === startModel.value) {return;}
-        }
-        if (range === TimeRangePanelType.end) {
-          if (val === endModel.value) {return;}
-        }
-      }
-
-      /*如果输入值得来源是input，将display格式化为value*/
-      if (type === "input") {
-        utils.handleRangeType({ range, start: () => state.input.start = val, end: () => state.input.end = val });
-        if (!val) {
-          /*当清空input的值得时候，这里不做处理，因为开始时间与结束时间必须同时存在*/
-          // utils.handleRangeType({ range, start: () => startModel.value = null, end: () => endModel.value = null });
-          onInputClear?.(range);
-          return;
-        } else {
-          /*有值*/
-          if (!displayPattern.value.test(val)) {
-            /*输入值得格式与显示值格式不一致，不做任何处理*/
-            return;
-          } else {
-            /*将输入值格式化为实际值*/
-            let pd = today.value.useDisplay(val);
-            if (!pd.getDayJs().isValid()) {
-              /*输入值格式不正确，，什么是也不做*/
-              return;
-            }
-            val = pd.getValue();
-          }
-        }
-      }
-
-      const jdView = 'YMDHms';
-
-      /*检查最大最小值*/
-      let pd = limitDatetimeTimePlainData({ pd: today.value.useValue(val), maxmin, jdView });
-
-      utils.handleRangeType({
-        range,
-        start: () => {
-          startModel.value = pd.getValue();
-          emit.onUpdateModelValue(startModel.value, eDateEmitRangeType.start);
-          const { end: epd } = format.value;
-          if (!!epd && pd[jdView] > epd[jdView]) {
-            endModel.value = startModel.value;
-            emit.onUpdateModelValue(endModel.value, eDateEmitRangeType.end);
-            state.input.end = pd.getDisplay();
-          }
-          if (type === "picker") {
-            state.input.start = pd.getDisplay();
-
-            if (props.separate) {
-              getStartPopper?.().methods.hide();
-              if (!epd) {
-                delay().then(() => {focusRange.onStartChange();});
-              }
-            }
-          }
-        },
-        end: () => {
-          endModel.value = pd.getValue();
-          emit.onUpdateModelValue(endModel.value, eDateEmitRangeType.end);
-          const { start: spd } = format.value;
-          if (!!spd && pd[jdView] < spd[jdView]) {
-            startModel.value = endModel.value;
-            emit.onUpdateModelValue(startModel.value, eDateEmitRangeType.start);
-            state.input.start = pd.getDisplay();
-          }
-          if (type === "picker") {
-            state.input.end = pd.getDisplay();
-
-            if (props.separate) {
-              getEndPopper?.().methods.hide();
-              if (!spd) {
-                delay().then(() => {focusRange.onEndChange();});
-              }
-            }
-          }
-        },
-      });
-    },
-  };
-
-  /**
-   * 记录当前获取焦点的输入位置
-   * @author  韦胜健
-   * @date    2022/12/12 14:13
-   */
-  const focusRange = (() => {
-    const innerState = reactive({
-      rangeType: null as null | eDateEmitRangeType,
-      selectDate: null as null | PDate,
-    });
-    const utils = {
-      switch2Start: () => {
-        innerState.rangeType = eDateEmitRangeType.start;
-        innerState.selectDate = format.value.start;
-      },
-      switch2End: () => {
-        innerState.rangeType = eDateEmitRangeType.end;
-        innerState.selectDate = format.value.end;
-      },
-    };
-    const handler = {
-      onStartFocus: () => {
-        if (innerState.rangeType === eDateEmitRangeType.start) {return;}
-        utils.switch2Start();
-      },
-      onEndFocus: () => {
-        if (innerState.rangeType === eDateEmitRangeType.end) {return;}
-        utils.switch2End();
-      },
-      onMousedownStartPanel: () => {
-        if (props.separate) {
-          handler.onStartFocus();
-          refs.start?.focus();
-        } else {
-          refs[innerState.rangeType == eDateEmitRangeType.start ? 'start' : 'end']?.focus();
-        }
-      },
-      onMousedownEndPanel: () => {
-        if (props.separate) {
-          handler.onEndFocus();
-          refs.end?.focus();
-        } else {
-          refs[innerState.rangeType == eDateEmitRangeType.start ? 'start' : 'end']?.focus();
-        }
-      },
-      onStartChange: () => {
-        getStartPopper?.()?.methods.hide();
-        utils.switch2End();
-        refs.end?.focus();
-        getEndPopper?.()?.methods.show();
-      },
-      onEndChange: () => {
-        getEndPopper?.()?.methods.hide();
-        refs.start?.focus();
-        utils.switch2Start();
-        getStartPopper?.()?.methods.show();
-      },
-    };
-
-    return { innerState, ...handler };
-  })();
-
-  const handler = {
-    /**
-     * 处理picker更新 start值
-     * @author  韦胜健
-     * @date    2022.7.3 19:30
-     */
-    onPickerUpdateStart: (val: any) => {utils.apply(val, 'picker', TimeRangePanelType.start);},
-    /**
-     * 处理picker更新end值
-     * @author  韦胜健
-     * @date    2022.7.3 19:30
-     */
-    onPickerUpdateEnd: (val: any) => {utils.apply(val, 'picker', TimeRangePanelType.end);},
-    /**
-     * 处理start input更新start值
-     * @author  韦胜健
-     * @date    2022.7.3 19:31
-     */
-    onStartInputChange: (e: any) => {utils.apply(e.target.value, 'input', TimeRangePanelType.start);},
-    /**
-     * 处理end input更新end值
-     * @author  韦胜健
-     * @date    2022.7.3 19:31
-     */
-    onEndInputChange: (e: any) => {utils.apply(e.target.value, 'input', TimeRangePanelType.end);},
-    /**
-     * 点击start panel事件
-     * @author  韦胜健
-     * @date    2022.7.3 19:31
-     */
-    onMousedownStartPanel: () => {delay().then(() => focusRange.onMousedownStartPanel());},
-    /**
-     * 点击end panel事件
-     * @author  韦胜健
-     * @date    2022.7.3 19:31
-     */
-    onMousedownEndPanel: () => {delay().then(() => focusRange.onMousedownEndPanel());},
-    /**
-     * 处理Input的clear事件
-     * @author  韦胜健
-     * @date    2022.7.3 20:03
-     */
-    onInputClear: () => {
-      startModel.value = null as any;
-      endModel.value = null as any;
-      state.input.start = undefined;
-      state.input.end = undefined;
-      emit.onUpdateModelValue(startModel.value, eDateEmitRangeType.start);
-      emit.onUpdateModelValue(endModel.value, eDateEmitRangeType.end);
-    },
-  };
-
-  const renderPickerFoot = () => slots.foot.isExist() && (
-    <div className={getComponentCls('date-foot')} onMouseDown={handler.onMousedownStartPanel}>
-      {slots.foot()}
-    </div>
-  );
-
-  const getInputAttrs = () => ({
-    ref: onRef.input,
-    suffixIcon: 'pi-calendar',
-    placeValue: [startModel.value, endModel.value].join('-'),
-    isFocus: isFocus.value,
-    clearHandler: handler.onInputClear,
-    ...props.inputAttrs,
-  });
-
-  return {
-    effects,
-    refs,
-    onRef,
-    startModel,
-    endModel,
-    isFocus,
-    format,
-    state,
-    utils,
-    renderPickerFoot,
-    handler,
-    getInputAttrs,
-    reference,
-    focusRange,
-  };
-}
+import {eDateEmitRangeType, tDateCompositionPublicParams} from "./date.utils";
+import {TimeRangePanelType} from "../TimePicker/panel/TimeRangePanel";
+import {computed, getComponentCls, iHTMLInputElement, nextTick, reactive, useModel, useRefs} from "plain-design-composition";
+import Input from "../Input";
+import {delay} from "plain-utils/utils/delay";
+import {useFocusHandler} from "../../uses/useFocusHandler";
+import {PDate, plainDate} from "../../utils/plainDate";
+import {limitDatetimeTimePlainData} from "../TimePicker/time.utils";
+import {useRenderReference} from "../../uses/useRenderReference";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {iPopupEditor} from "../usePopupEditor";
+
+export function useRangeDateRender(
+  {
+    props,
+    emit,
+    onBlur,
+    slots,
+    displayPattern,
+    today,
+    onInputClear,
+    maxmin,
+    formatString,
+    getStartPopper,
+    getEndPopper,
+  }: tDateCompositionPublicParams & {
+    onBlur: () => void,
+    onInputClear?: (range: TimeRangePanelType) => void,
+    getStartPopper?: () => iPopupEditor,
+    getEndPopper?: () => iPopupEditor,
+  }) {
+  const { effects } = createEffects();
+  const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, });
+  const reference = useRenderReference();
+  const startModel = useModel(() => props.start, emit.onUpdateStart, { onChange: () => delay().then(() => state.input.start = format.value.start?.getDisplay()) });
+  const endModel = useModel(() => props.end, emit.onUpdateEnd, { onChange: () => delay().then(() => state.input.end = format.value.end?.getDisplay()) });
+
+  const { isFocus } = useFocusHandler({
+    getEls: () => [refs.start, refs.end],
+    /**
+     * Input失去焦点事件，将文本框的值重置为display的值，以避免显示输入不正确的值
+     * @author  韦胜健
+     * @date    2022.7.3 12:27
+     */
+    onBlur: async (e) => {
+      const { start: spd, end: epd } = format.value;
+      if (!props.separate) {
+        /*不是separate模式下，不允许开始以及结束时间一个有值一个没有值*/
+        if (!!spd && !epd) {
+          startModel.value = undefined;
+          await nextTick();
+        } else if (!spd && !!epd) {
+          endModel.value = undefined;
+          await nextTick();
+        }
+      }
+      state.input.start = format.value.start?.getDisplay();
+      state.input.end = format.value.end?.getDisplay();
+      emit.onBlur(e);
+      onBlur();
+    },
+    onFocus: emit.onFocus,
+  });
+
+  const format = computed((): { start: null | PDate, end: null | PDate } => ({
+    start: !startModel.value ? null : plainDate(startModel.value, formatString.value),
+    end: !endModel.value ? null : plainDate(endModel.value, formatString.value),
+  }));
+
+  const state = reactive({
+    input: {
+      start: format.value.start?.getDisplay(),
+      end: format.value.end?.getDisplay(),
+    },
+  });
+
+  const utils = {
+    handleRangeType: (config: { range: TimeRangePanelType, start: () => void, end: () => void }) => {config.range === TimeRangePanelType.start ? config.start() : config.end();},
+    apply: (val: string, type: 'input' | 'picker', range: TimeRangePanelType) => {
+
+      /**
+       * picker在update的时候，会一起派发update start以及update end，即使某个值可能没变
+       * 这里做一层控制，某个值没变化的时候，不往下处理
+       * @author  韦胜健
+       * @date    2022.7.3 19:59
+       */
+      if (type === "picker") {
+        if (range === TimeRangePanelType.start) {
+          if (val === startModel.value) {return;}
+        }
+        if (range === TimeRangePanelType.end) {
+          if (val === endModel.value) {return;}
+        }
+      }
+
+      /*如果输入值得来源是input，将display格式化为value*/
+      if (type === "input") {
+        utils.handleRangeType({ range, start: () => state.input.start = val, end: () => state.input.end = val });
+        if (!val) {
+          /*当清空input的值得时候，这里不做处理，因为开始时间与结束时间必须同时存在*/
+          // utils.handleRangeType({ range, start: () => startModel.value = null, end: () => endModel.value = null });
+          onInputClear?.(range);
+          return;
+        } else {
+          /*有值*/
+          if (!displayPattern.value.test(val)) {
+            /*输入值得格式与显示值格式不一致，不做任何处理*/
+            return;
+          } else {
+            /*将输入值格式化为实际值*/
+            let pd = today.value.useDisplay(val);
+            if (!pd.getDayJs().isValid()) {
+              /*输入值格式不正确，，什么是也不做*/
+              return;
+            }
+            val = pd.getValue();
+          }
+        }
+      }
+
+      const jdView = 'YMDHms';
+
+      /*检查最大最小值*/
+      let pd = limitDatetimeTimePlainData({ pd: today.value.useValue(val), maxmin, jdView });
+
+      utils.handleRangeType({
+        range,
+        start: () => {
+          startModel.value = pd.getValue();
+          emit.onUpdateModelValue(startModel.value, eDateEmitRangeType.start);
+          const { end: epd } = format.value;
+          if (!!epd && pd[jdView] > epd[jdView]) {
+            endModel.value = startModel.value;
+            emit.onUpdateModelValue(endModel.value, eDateEmitRangeType.end);
+            state.input.end = pd.getDisplay();
+          }
+          if (type === "picker") {
+            state.input.start = pd.getDisplay();
+
+            if (props.separate) {
+              getStartPopper?.().methods.hide();
+              if (!epd) {
+                delay().then(() => {focusRange.onStartChange();});
+              }
+            }
+          }
+        },
+        end: () => {
+          endModel.value = pd.getValue();
+          emit.onUpdateModelValue(endModel.value, eDateEmitRangeType.end);
+          const { start: spd } = format.value;
+          if (!!spd && pd[jdView] < spd[jdView]) {
+            startModel.value = endModel.value;
+            emit.onUpdateModelValue(startModel.value, eDateEmitRangeType.start);
+            state.input.start = pd.getDisplay();
+          }
+          if (type === "picker") {
+            state.input.end = pd.getDisplay();
+
+            if (props.separate) {
+              getEndPopper?.().methods.hide();
+              if (!spd) {
+                delay().then(() => {focusRange.onEndChange();});
+              }
+            }
+          }
+        },
+      });
+    },
+  };
+
+  /**
+   * 记录当前获取焦点的输入位置
+   * @author  韦胜健
+   * @date    2022/12/12 14:13
+   */
+  const focusRange = (() => {
+    const innerState = reactive({
+      rangeType: null as null | eDateEmitRangeType,
+      selectDate: null as null | PDate,
+    });
+    const utils = {
+      switch2Start: () => {
+        innerState.rangeType = eDateEmitRangeType.start;
+        innerState.selectDate = format.value.start;
+      },
+      switch2End: () => {
+        innerState.rangeType = eDateEmitRangeType.end;
+        innerState.selectDate = format.value.end;
+      },
+    };
+    const handler = {
+      onStartFocus: () => {
+        if (innerState.rangeType === eDateEmitRangeType.start) {return;}
+        utils.switch2Start();
+      },
+      onEndFocus: () => {
+        if (innerState.rangeType === eDateEmitRangeType.end) {return;}
+        utils.switch2End();
+      },
+      onMousedownStartPanel: () => {
+        if (props.separate) {
+          handler.onStartFocus();
+          refs.start?.focus();
+        } else {
+          refs[innerState.rangeType == eDateEmitRangeType.start ? 'start' : 'end']?.focus();
+        }
+      },
+      onMousedownEndPanel: () => {
+        if (props.separate) {
+          handler.onEndFocus();
+          refs.end?.focus();
+        } else {
+          refs[innerState.rangeType == eDateEmitRangeType.start ? 'start' : 'end']?.focus();
+        }
+      },
+      onStartChange: () => {
+        getStartPopper?.()?.methods.hide();
+        utils.switch2End();
+        refs.end?.focus();
+        getEndPopper?.()?.methods.show();
+      },
+      onEndChange: () => {
+        getEndPopper?.()?.methods.hide();
+        refs.start?.focus();
+        utils.switch2Start();
+        getStartPopper?.()?.methods.show();
+      },
+    };
+
+    return { innerState, ...handler };
+  })();
+
+  const handler = {
+    /**
+     * 处理picker更新 start值
+     * @author  韦胜健
+     * @date    2022.7.3 19:30
+     */
+    onPickerUpdateStart: (val: any) => {utils.apply(val, 'picker', TimeRangePanelType.start);},
+    /**
+     * 处理picker更新end值
+     * @author  韦胜健
+     * @date    2022.7.3 19:30
+     */
+    onPickerUpdateEnd: (val: any) => {utils.apply(val, 'picker', TimeRangePanelType.end);},
+    /**
+     * 处理start input更新start值
+     * @author  韦胜健
+     * @date    2022.7.3 19:31
+     */
+    onStartInputChange: (e: any) => {utils.apply(e.target.value, 'input', TimeRangePanelType.start);},
+    /**
+     * 处理end input更新end值
+     * @author  韦胜健
+     * @date    2022.7.3 19:31
+     */
+    onEndInputChange: (e: any) => {utils.apply(e.target.value, 'input', TimeRangePanelType.end);},
+    /**
+     * 点击start panel事件
+     * @author  韦胜健
+     * @date    2022.7.3 19:31
+     */
+    onMousedownStartPanel: () => {delay().then(() => focusRange.onMousedownStartPanel());},
+    /**
+     * 点击end panel事件
+     * @author  韦胜健
+     * @date    2022.7.3 19:31
+     */
+    onMousedownEndPanel: () => {delay().then(() => focusRange.onMousedownEndPanel());},
+    /**
+     * 处理Input的clear事件
+     * @author  韦胜健
+     * @date    2022.7.3 20:03
+     */
+    onInputClear: () => {
+      startModel.value = null as any;
+      endModel.value = null as any;
+      state.input.start = undefined;
+      state.input.end = undefined;
+      emit.onUpdateModelValue(startModel.value, eDateEmitRangeType.start);
+      emit.onUpdateModelValue(endModel.value, eDateEmitRangeType.end);
+    },
+  };
+
+  const renderPickerFoot = () => slots.foot.isExist() && (
+    <div className={getComponentCls('date-foot')} onMouseDown={handler.onMousedownStartPanel}>
+      {slots.foot()}
+    </div>
+  );
+
+  const getInputAttrs = () => ({
+    className: getComponentCls('date-picker'),
+    ref: onRef.input,
+    suffixIcon: 'pi-calendar',
+    placeValue: [startModel.value, endModel.value].join('-'),
+    isFocus: isFocus.value,
+    clearHandler: handler.onInputClear,
+    ...props.inputAttrs,
+  });
+
+  return {
+    effects,
+    refs,
+    onRef,
+    startModel,
+    endModel,
+    isFocus,
+    format,
+    state,
+    utils,
+    renderPickerFoot,
+    handler,
+    getInputAttrs,
+    reference,
+    focusRange,
+  };
+}