plain-design 1.0.0-beta.147 → 1.0.0-beta.149

package/src/packages/components/TimePicker/createSeparateRangeTimeRender.tsx

@@ -1,104 +1,104 @@
-import {tTimeCompositionParams} from "./time.utils";
-import Input from "../Input";
-import {TimeRangePanelType} from "./panel/TimeRangePanel";
-import {TimePanel} from "./panel/TimePanel";
-import {handleKeyboard} from "@peryl/utils/keyboard";
-import {useRangeTimeRender} from "./useRangeTimeRender";
-import {createPopupEditor} from "../usePopupEditor";
-import {FixInput} from "../../utils/FixInput";
-import {iKeyboardEvent} from "@peryl/react-compose";
-import {renderInputModeTextRangeValue} from "../../utils/renderInputModeTextRangeValue";
-
-export function createSeparateRangeTimeRender(params: tTimeCompositionParams) {
-
-  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs, styleComputed } = params;
-
-  const { effects, refs, onRef, startModel, endModel, state, getInputAttrs, renderPickerFoot, utils, handler } = useRangeTimeRender({
-    ...params,
-    onBlur: () => {
-      startPopper.methods.hide();
-      endPopper.methods.hide();
-    },
-    onInputClear: (range) => {
-      utils.handleRangeType({ range, start: () => startModel.value = null, end: () => endModel.value = null });
-    },
-  });
-
-  const startPopper = createPopupEditor({
-    option: {
-      popperAttrs: getPublicPopperAttrs,
-      reference: () => !editComputed.value.editable ? null : refs.start,
-      popper: () => <>
-        <TimePanel
-          {...{
-            ...getInheritPublicTimeAttrs(),
-            modelValue: startModel.value,
-            defaultTime: props.defaultStartTime,
-            onChange: handler.onPickerUpdateStart,
-            onMousedownBasePanel: handler.onMousedownStartPanel,
-            onEnterColumn: type => handler.onEnterColumn(type, TimeRangePanelType.start),
-          }}
-        />
-        {renderPickerFoot()}
-      </>
-    },
-  });
-
-  const endPopper = createPopupEditor({
-    option: {
-      popperAttrs: getPublicPopperAttrs,
-      reference: () => !editComputed.value.editable ? null : refs.end,
-      popper: () => <>
-        <TimePanel
-          {...{
-            ...getInheritPublicTimeAttrs(),
-            modelValue: endModel.value,
-            defaultTime: props.defaultEndTime,
-            onChange: handler.onPickerUpdateEnd,
-            onMousedownBasePanel: handler.onMousedownEndPanel,
-            onEnterColumn: type => handler.onEnterColumn(type, TimeRangePanelType.end),
-          }}
-        />
-        {renderPickerFoot()}
-      </>
-    },
-  });
-
-  const customHandler = {
-    /**
-     * Input enter按键，打开或者关闭picker
-     * Input Esc按键，关闭picker
-     * @author  韦胜健
-     * @date    2022.7.3 19:29
-     */
-    onKeyboardInput: (e: iKeyboardEvent, range: TimeRangePanelType) => handleKeyboard<iKeyboardEvent>({
-      enter: () => {
-        utils.handleRangeType({ range, start: () => startPopper.methods.toggle(), end: () => endPopper.methods.toggle() });
-      },
-      esc: () => {
-        utils.handleRangeType({ range, start: () => startPopper.methods.hide(), end: () => endPopper.methods.hide() });
-      },
-    })(e),
-  };
-
-  effects.push(hooks.onRenderInput.use(() => (
-    <Input{...getInputAttrs()}>
-      {renderInputModeTextRangeValue({
-        styleComputed,
-        startValue: state.input.start,
-        endValue: state.input.end,
-        defaultRender: () => <>
-          <FixInput ref={onRef.start} type="text" placeholder={props.startPlaceholder} className="input-box input-fill" value={state.input.start} onInput={handler.onStartInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.start)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
-          <FixInput ref={onRef.end} type="text" placeholder={props.endPlaceholder} className="input-box input-fill" value={state.input.end} onInput={handler.onEndInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.end)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
-        </>
-      })}
-    </Input>
-  )));
-
-  effects.push(() => {
-    startPopper.methods.dispose();
-    endPopper.methods.dispose();
-  });
-
-  return effects.clear;
-}
+import {tTimeCompositionParams} from "./time.utils";
+import Input from "../Input";
+import {TimeRangePanelType} from "./panel/TimeRangePanel";
+import {TimePanel} from "./panel/TimePanel";
+import {handleKeyboard} from "@peryl/utils/keyboard";
+import {useRangeTimeRender} from "./useRangeTimeRender";
+import {createPopupEditor} from "../usePopupEditor";
+import {FixInput} from "../../utils/FixInput";
+import {iKeyboardEvent} from "@peryl/react-compose";
+import {renderInputModeTextRangeValue} from "../../utils/renderInputModeTextRangeValue";
+
+export function createSeparateRangeTimeRender(params: tTimeCompositionParams) {
+
+  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs, styleComputed } = params;
+
+  const { effects, refs, onRef, startModel, endModel, state, getInputAttrs, renderPickerFoot, utils, handler } = useRangeTimeRender({
+    ...params,
+    onBlur: () => {
+      startPopper.methods.hide();
+      endPopper.methods.hide();
+    },
+    onInputClear: (range) => {
+      utils.handleRangeType({ range, start: () => startModel.value = null, end: () => endModel.value = null });
+    },
+  });
+
+  const startPopper = createPopupEditor({
+    option: {
+      popperAttrs: getPublicPopperAttrs,
+      reference: () => !editComputed.value.editable ? null : refs.start,
+      popper: () => <>
+        <TimePanel
+          {...{
+            ...getInheritPublicTimeAttrs(),
+            modelValue: startModel.value,
+            defaultTime: props.defaultStartTime,
+            onChange: handler.onPickerUpdateStart,
+            onMousedownBasePanel: handler.onMousedownStartPanel,
+            onEnterColumn: type => handler.onEnterColumn(type, TimeRangePanelType.start),
+          }}
+        />
+        {renderPickerFoot()}
+      </>
+    },
+  });
+
+  const endPopper = createPopupEditor({
+    option: {
+      popperAttrs: getPublicPopperAttrs,
+      reference: () => !editComputed.value.editable ? null : refs.end,
+      popper: () => <>
+        <TimePanel
+          {...{
+            ...getInheritPublicTimeAttrs(),
+            modelValue: endModel.value,
+            defaultTime: props.defaultEndTime,
+            onChange: handler.onPickerUpdateEnd,
+            onMousedownBasePanel: handler.onMousedownEndPanel,
+            onEnterColumn: type => handler.onEnterColumn(type, TimeRangePanelType.end),
+          }}
+        />
+        {renderPickerFoot()}
+      </>
+    },
+  });
+
+  const customHandler = {
+    /**
+     * Input enter按键，打开或者关闭picker
+     * Input Esc按键，关闭picker
+     * @author  韦胜健
+     * @date    2022.7.3 19:29
+     */
+    onKeyboardInput: (e: iKeyboardEvent, range: TimeRangePanelType) => handleKeyboard<iKeyboardEvent>({
+      enter: () => {
+        utils.handleRangeType({ range, start: () => startPopper.methods.toggle(), end: () => endPopper.methods.toggle() });
+      },
+      esc: () => {
+        utils.handleRangeType({ range, start: () => startPopper.methods.hide(), end: () => endPopper.methods.hide() });
+      },
+    })(e),
+  };
+
+  effects.push(hooks.onRenderInput.use(() => (
+    <Input{...getInputAttrs()}>
+      {renderInputModeTextRangeValue({
+        styleComputed,
+        startValue: state.input.start,
+        endValue: state.input.end,
+        defaultRender: () => <>
+          <FixInput ref={onRef.start} type="text" placeholder={props.startPlaceholder} className="input-box input-fill" value={state.input.start} onInput={handler.onStartInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.start)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+          <FixInput ref={onRef.end} type="text" placeholder={props.endPlaceholder} className="input-box input-fill" value={state.input.end} onInput={handler.onEndInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.end)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+        </>
+      })}
+    </Input>
+  )));
+
+  effects.push(() => {
+    startPopper.methods.dispose();
+    endPopper.methods.dispose();
+  });
+
+  return effects.clear;
+}

package/src/packages/components/TimePicker/createSingleTimeRender.tsx

@@ -1,202 +1,202 @@
-import {TimePanel} from "./panel/TimePanel";
-import Input from "../Input";
-import {createEffectsOfReaction, getComponentCls, reactive, useModel, useRefs} from "@peryl/react-compose";
-import {delay} from "@peryl/utils/delay";
-import {PDate, plainDate} from "../../utils/plainDate";
-import {limitDatetimeTimePlainData, TimeLayoutToFormat, tTimeCompositionParams} from "./time.utils";
-import {TimePanelLayout} from "./panel/TimeBasePanel";
-import {debounce} from "@peryl/utils/debounce";
-import {useRenderReference} from "../../uses/useRenderReference";
-import {createPopupEditor} from "../usePopupEditor";
-
-export function createSingleTimeRender({ emit, props, hooks, displayPattern, today, maxmin, editComputed, slots, getPublicPopperAttrs, getInheritPublicTimeAttrs, formatString }: tTimeCompositionParams) {
-
-  const { effects, effectComputed } = createEffectsOfReaction();
-  const { refs, onRef } = useRefs({ input: Input }, { effects });
-  const reference = useRenderReference();
-  const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: () => delay().then(() => state.input = format.value?.getDisplay()) }, effects);
-  const format = effectComputed((): null | PDate => !model.value ? null : plainDate(model.value, formatString.value));
-  const state = reactive({
-    input: format.value?.getDisplay(),
-    hoverColumnType: null as null | TimePanelLayout,
-  });
-
-  const popper = createPopupEditor({
-    option: {
-      popperAttrs: getPublicPopperAttrs,
-      reference: () => !editComputed.value.editable ? null : (reference.getReference() || refs.input?.refs.el),
-      popper: () => <>
-        <TimePanel
-          {...{
-            ...getInheritPublicTimeAttrs(),
-            modelValue: model.value,
-            onChange: handler.onPickerChange,
-            onMousedownBasePanel: handler.onMousedownPicker,
-            onEnterColumn: handler.onEnterColumn,
-          }}
-        />
-        {slots.foot.isExist() && (
-          <div className={getComponentCls('time-foot')}>
-            {slots.foot()}
-          </div>
-        )}
-      </>
-    },
-  });
-
-  const utils = {
-    /**
-     * 应用新的值
-     * @author  韦胜健
-     * @date    2022.7.3 12:33
-     */
-    apply: (val: any, type: 'input' | 'picker') => {
-
-      /*如果输入值得来源是input，将display格式化为value*/
-      if (type === "input") {
-        state.hoverColumnType = null;
-        state.input = val;
-        if (!val) {
-          model.value = null;
-          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 = 'Hms';
-
-      /*检查最大最小值*/
-      let pd = limitDatetimeTimePlainData({ pd: today.value.useValue(val), maxmin, jdView });
-
-      model.value = pd.getValue();
-      if (type === "picker") {
-        state.input = pd.getDisplay();
-        utils.resetInputSelection();
-      }
-    },
-    /**
-     * 重设input的selection
-     * @author  韦胜健
-     * @date    2022.7.3 13:50
-     */
-    resetInputSelection: debounce(() => {
-      if (state.hoverColumnType == null) {return;}
-      const input = refs.input?.refs.input as HTMLInputElement | undefined;
-      if (!input) {return;}
-      const format = (TimeLayoutToFormat as any)[state.hoverColumnType];
-      const start = formatString.value.displayFormat.indexOf(format);
-      input.setSelectionRange(start, start + 2);
-    }, 100),
-  };
-
-  const handler = {
-    /**
-     * Input enter按键，打开或者关闭picker
-     * @author  韦胜健
-     * @date    2022.7.3 12:24
-     */
-    onInputEnter: () => {popper.methods.toggle();},
-    /**
-     * Input Esc按键，关闭picker
-     * @author  韦胜健
-     * @date    2022.7.3 12:25
-     */
-    onInputEsc: () => {popper.methods.hide();},
-    /**
-     * Input Focus事件，派发事件
-     * @author  韦胜健
-     * @date    2022.7.3 12:25
-     */
-    onInputFocus: (e: FocusEvent) => {emit.onFocus(e);},
-    /**
-     * 点击picker动作，立即让input重新获取焦点
-     * @author  韦胜健
-     * @date    2022.7.3 12:25
-     */
-    onMousedownPicker: () => {delay().then(() => refs.input?.focus());},
-    /**
-     * Input输入动作，检查是否有效，是则反馈到model.value中
-     * @author  韦胜健
-     * @date    2022.7.3 12:26
-     */
-    onInputChange: (val: any) => {utils.apply(val, 'input');},
-    /**
-     * Input失去焦点事件，将文本框的值重置为display的值，以避免显示输入不正确的值
-     * @author  韦胜健
-     * @date    2022.7.3 12:27
-     */
-    onInputBlur: (e: FocusEvent) => {
-      state.input = format.value?.getDisplay();
-      emit.onBlur(e);
-      popper.methods.hide();
-    },
-    /**
-     * picker值变化动作
-     * @author  韦胜健
-     * @date    2022.7.3 12:27
-     */
-    onPickerChange: (val: any) => {
-      utils.apply(val, 'picker');
-      const selectionStart = (refs.input?.refs.input as HTMLInputElement | undefined)?.selectionStart;
-      if (selectionStart == null) {return;}
-      delay(23).then(() => selectionStart != null && (refs.input?.refs.input?.setSelectionRange(selectionStart, selectionStart + 2)));
-    },
-    /**
-     * 进入某一列time column，输入框对应位置选中状态
-     * @author  韦胜健
-     * @date    2022.7.3 13:37
-     */
-    onEnterColumn: (type: TimePanelLayout) => {
-      state.hoverColumnType = type;
-      utils.resetInputSelection();
-    },
-    /**
-     * 处理input clear事件
-     * @author  韦胜健
-     * @date    2022.7.3 20:08
-     */
-    onInputClear: () => {
-      model.value = null;
-      state.input = undefined;
-    },
-  };
-
-  effects.push(hooks.onRenderInput.use(() => (
-    reference.renderReference({
-      slotExist: slots.default.isExist,
-      slotRender: slots.default,
-      defaultRender: () => (
-        <Input
-          className={getComponentCls('time-picker')}
-          ref={onRef.input}
-          suffixIcon="pi-clock-circle"
-          modelValue={state.input}
-          onChange={handler.onInputChange}
-          onFocus={handler.onInputFocus}
-          onBlur={handler.onInputBlur}
-          onEnter={handler.onInputEnter}
-          onEsc={handler.onInputEsc}
-          clearHandler={handler.onInputClear}
-          {...props.inputAttrs}
-        />
-      )
-    })
-  )));
-
-  effects.push(() => {popper.methods.dispose();});
-
-  return effects.clear;
-}
+import {TimePanel} from "./panel/TimePanel";
+import Input from "../Input";
+import {createEffectsOfReaction, getComponentCls, reactive, useModel, useRefs} from "@peryl/react-compose";
+import {delay} from "@peryl/utils/delay";
+import {PDate, plainDate} from "../../utils/plainDate";
+import {limitDatetimeTimePlainData, TimeLayoutToFormat, tTimeCompositionParams} from "./time.utils";
+import {TimePanelLayout} from "./panel/TimeBasePanel";
+import {debounce} from "@peryl/utils/debounce";
+import {useRenderReference} from "../../uses/useRenderReference";
+import {createPopupEditor} from "../usePopupEditor";
+
+export function createSingleTimeRender({ emit, props, hooks, displayPattern, today, maxmin, editComputed, slots, getPublicPopperAttrs, getInheritPublicTimeAttrs, formatString }: tTimeCompositionParams) {
+
+  const { effects, effectComputed } = createEffectsOfReaction();
+  const { refs, onRef } = useRefs({ input: Input }, { effects });
+  const reference = useRenderReference();
+  const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: () => delay().then(() => state.input = format.value?.getDisplay()) }, effects);
+  const format = effectComputed((): null | PDate => !model.value ? null : plainDate(model.value, formatString.value));
+  const state = reactive({
+    input: format.value?.getDisplay(),
+    hoverColumnType: null as null | TimePanelLayout,
+  });
+
+  const popper = createPopupEditor({
+    option: {
+      popperAttrs: getPublicPopperAttrs,
+      reference: () => !editComputed.value.editable ? null : (reference.getReference() || refs.input?.refs.el),
+      popper: () => <>
+        <TimePanel
+          {...{
+            ...getInheritPublicTimeAttrs(),
+            modelValue: model.value,
+            onChange: handler.onPickerChange,
+            onMousedownBasePanel: handler.onMousedownPicker,
+            onEnterColumn: handler.onEnterColumn,
+          }}
+        />
+        {slots.foot.isExist() && (
+          <div className={getComponentCls('time-foot')}>
+            {slots.foot()}
+          </div>
+        )}
+      </>
+    },
+  });
+
+  const utils = {
+    /**
+     * 应用新的值
+     * @author  韦胜健
+     * @date    2022.7.3 12:33
+     */
+    apply: (val: any, type: 'input' | 'picker') => {
+
+      /*如果输入值得来源是input，将display格式化为value*/
+      if (type === "input") {
+        state.hoverColumnType = null;
+        state.input = val;
+        if (!val) {
+          model.value = null;
+          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 = 'Hms';
+
+      /*检查最大最小值*/
+      let pd = limitDatetimeTimePlainData({ pd: today.value.useValue(val), maxmin, jdView });
+
+      model.value = pd.getValue();
+      if (type === "picker") {
+        state.input = pd.getDisplay();
+        utils.resetInputSelection();
+      }
+    },
+    /**
+     * 重设input的selection
+     * @author  韦胜健
+     * @date    2022.7.3 13:50
+     */
+    resetInputSelection: debounce(() => {
+      if (state.hoverColumnType == null) {return;}
+      const input = refs.input?.refs.input as HTMLInputElement | undefined;
+      if (!input) {return;}
+      const format = (TimeLayoutToFormat as any)[state.hoverColumnType];
+      const start = formatString.value.displayFormat.indexOf(format);
+      input.setSelectionRange(start, start + 2);
+    }, 100),
+  };
+
+  const handler = {
+    /**
+     * Input enter按键，打开或者关闭picker
+     * @author  韦胜健
+     * @date    2022.7.3 12:24
+     */
+    onInputEnter: () => {popper.methods.toggle();},
+    /**
+     * Input Esc按键，关闭picker
+     * @author  韦胜健
+     * @date    2022.7.3 12:25
+     */
+    onInputEsc: () => {popper.methods.hide();},
+    /**
+     * Input Focus事件，派发事件
+     * @author  韦胜健
+     * @date    2022.7.3 12:25
+     */
+    onInputFocus: (e: FocusEvent) => {emit.onFocus(e);},
+    /**
+     * 点击picker动作，立即让input重新获取焦点
+     * @author  韦胜健
+     * @date    2022.7.3 12:25
+     */
+    onMousedownPicker: () => {delay().then(() => refs.input?.focus());},
+    /**
+     * Input输入动作，检查是否有效，是则反馈到model.value中
+     * @author  韦胜健
+     * @date    2022.7.3 12:26
+     */
+    onInputChange: (val: any) => {utils.apply(val, 'input');},
+    /**
+     * Input失去焦点事件，将文本框的值重置为display的值，以避免显示输入不正确的值
+     * @author  韦胜健
+     * @date    2022.7.3 12:27
+     */
+    onInputBlur: (e: FocusEvent) => {
+      state.input = format.value?.getDisplay();
+      emit.onBlur(e);
+      popper.methods.hide();
+    },
+    /**
+     * picker值变化动作
+     * @author  韦胜健
+     * @date    2022.7.3 12:27
+     */
+    onPickerChange: (val: any) => {
+      utils.apply(val, 'picker');
+      const selectionStart = (refs.input?.refs.input as HTMLInputElement | undefined)?.selectionStart;
+      if (selectionStart == null) {return;}
+      delay(23).then(() => selectionStart != null && (refs.input?.refs.input?.setSelectionRange(selectionStart, selectionStart + 2)));
+    },
+    /**
+     * 进入某一列time column，输入框对应位置选中状态
+     * @author  韦胜健
+     * @date    2022.7.3 13:37
+     */
+    onEnterColumn: (type: TimePanelLayout) => {
+      state.hoverColumnType = type;
+      utils.resetInputSelection();
+    },
+    /**
+     * 处理input clear事件
+     * @author  韦胜健
+     * @date    2022.7.3 20:08
+     */
+    onInputClear: () => {
+      model.value = null;
+      state.input = undefined;
+    },
+  };
+
+  effects.push(hooks.onRenderInput.use(() => (
+    reference.renderReference({
+      slotExist: slots.default.isExist,
+      slotRender: slots.default,
+      defaultRender: () => (
+        <Input
+          className={getComponentCls('time-picker')}
+          ref={onRef.input}
+          suffixIcon="pi-clock-circle"
+          modelValue={state.input}
+          onChange={handler.onInputChange}
+          onFocus={handler.onInputFocus}
+          onBlur={handler.onInputBlur}
+          onEnter={handler.onInputEnter}
+          onEsc={handler.onInputEsc}
+          clearHandler={handler.onInputClear}
+          {...props.inputAttrs}
+        />
+      )
+    })
+  )));
+
+  effects.push(() => {popper.methods.dispose();});
+
+  return effects.clear;
+}