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

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

@@ -1,65 +1,65 @@
-import {computed, designComponent} from "@peryl/react-compose";
-import {TimeBaseColumn} from "./panel/TimeBaseColumn";
-import {TimeBasePanel} from "./panel/TimeBasePanel";
-import {TimePanel} from "./panel/TimePanel";
-import {TimeRangePanel} from "./panel/TimeRangePanel";
-import {useStyle} from "../../uses/useStyle";
-import {useEdit} from "../../uses/useEdit";
-import {plainDate} from "../../utils/plainDate";
-import {createSingleTimeRender} from "./createSingleTimeRender";
-import {useTimeHooks} from "./useTimeHooks";
-import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
-import {createRangeTimeRender} from "./createRangeTimeRender";
-import './time.scss';
-import {createSeparateRangeTimeRender} from "./createSeparateRangeTimeRender";
-import {TimeEmitsOption, TimePropsOption, TimeSlotsOption, tTimeCompositionParams, useTimeFormat} from "./time.utils";
-import {TimePublicProps} from "./panel/time-panel.utils";
-import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter";
-import {useParentPopupId} from "../usePopup/utils/popup.utils";
-
-export const TimePicker = designComponent({
-  name: '-time',
-  expose: {
-    TimeRangePanel,
-    TimePanel,
-    TimeBasePanel,
-    TimeBaseColumn,
-    plainDate,
-  },
-  props: TimePropsOption,
-  emits: TimeEmitsOption,
-  slots: TimeSlotsOption,
-  setup({ props, slots, event: { emit } }) {
-
-    const { formatString, layoutArray } = useTimeFormat(props);
-    const hooks = useTimeHooks();
-    const displayPattern = computed(() => new RegExp('^' + formatString.value.displayFormat.replace(/[a-zA-Z]/g, '\\d') + '$'));
-    const today = computed(() => plainDate.today(formatString.value.displayFormat, formatString.value.valueFormat));
-    const maxmin = computed(() => ({ max: !props.max ? null : plainDate(props.max, formatString.value), min: !props.min ? null : plainDate(props.min, formatString.value), }));
-    const { styleComputed } = useStyle();
-    const { editComputed } = useEdit();
-    const parentPopupId = useParentPopupId();
-
-    const getPublicPopperAttrs = createPopupAttrsGetter(() => ({ offset: 2, noArrow: true, noPadding: true, popperSize: styleComputed.value.size, ...props.popperAttrs, parentId: parentPopupId, }));
-    const getInheritPublicTimeAttrs = () => (Object.keys(TimePublicProps).reduce((prev, key) => {
-      prev[key] = (props as any)[key];
-      return prev;
-    }, {} as any));
-
-    const timeCompositionParams: tTimeCompositionParams = { props, emit, hooks, displayPattern, maxmin, today, editComputed,styleComputed, slots, getPublicPopperAttrs, getInheritPublicTimeAttrs, formatString, layoutArray };
-
-    useWatchAutoClear(() => ({ range: props.range, separate: props.separate }), (data) => {
-      if (!data || (!data.range && !data.separate)) {
-        return createSingleTimeRender(timeCompositionParams);
-      } else {
-        return data.separate ?
-          (createSeparateRangeTimeRender(timeCompositionParams)) :
-          (createRangeTimeRender(timeCompositionParams));
-      }
-    });
-
-    return () => hooks.onRenderInput.exec(null);
-  },
-});
-
-export default TimePicker;
+import {computed, designComponent} from "@peryl/react-compose";
+import {TimeBaseColumn} from "./panel/TimeBaseColumn";
+import {TimeBasePanel} from "./panel/TimeBasePanel";
+import {TimePanel} from "./panel/TimePanel";
+import {TimeRangePanel} from "./panel/TimeRangePanel";
+import {useStyle} from "../../uses/useStyle";
+import {useEdit} from "../../uses/useEdit";
+import {plainDate} from "../../utils/plainDate";
+import {createSingleTimeRender} from "./createSingleTimeRender";
+import {useTimeHooks} from "./useTimeHooks";
+import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
+import {createRangeTimeRender} from "./createRangeTimeRender";
+import './time.scss';
+import {createSeparateRangeTimeRender} from "./createSeparateRangeTimeRender";
+import {TimeEmitsOption, TimePropsOption, TimeSlotsOption, tTimeCompositionParams, useTimeFormat} from "./time.utils";
+import {TimePublicProps} from "./panel/time-panel.utils";
+import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter";
+import {useParentPopupId} from "../usePopup/utils/popup.utils";
+
+export const TimePicker = designComponent({
+  name: '-time',
+  expose: {
+    TimeRangePanel,
+    TimePanel,
+    TimeBasePanel,
+    TimeBaseColumn,
+    plainDate,
+  },
+  props: TimePropsOption,
+  emits: TimeEmitsOption,
+  slots: TimeSlotsOption,
+  setup({ props, slots, event: { emit } }) {
+
+    const { formatString, layoutArray } = useTimeFormat(props);
+    const hooks = useTimeHooks();
+    const displayPattern = computed(() => new RegExp('^' + formatString.value.displayFormat.replace(/[a-zA-Z]/g, '\\d') + '$'));
+    const today = computed(() => plainDate.today(formatString.value.displayFormat, formatString.value.valueFormat));
+    const maxmin = computed(() => ({ max: !props.max ? null : plainDate(props.max, formatString.value), min: !props.min ? null : plainDate(props.min, formatString.value), }));
+    const { styleComputed } = useStyle();
+    const { editComputed } = useEdit();
+    const parentPopupId = useParentPopupId();
+
+    const getPublicPopperAttrs = createPopupAttrsGetter(() => ({ offset: 2, noArrow: true, noPadding: true, popperSize: styleComputed.value.size, ...props.popperAttrs, parentId: parentPopupId, }));
+    const getInheritPublicTimeAttrs = () => (Object.keys(TimePublicProps).reduce((prev, key) => {
+      prev[key] = (props as any)[key];
+      return prev;
+    }, {} as any));
+
+    const timeCompositionParams: tTimeCompositionParams = { props, emit, hooks, displayPattern, maxmin, today, editComputed,styleComputed, slots, getPublicPopperAttrs, getInheritPublicTimeAttrs, formatString, layoutArray };
+
+    useWatchAutoClear(() => ({ range: props.range, separate: props.separate }), (data) => {
+      if (!data || (!data.range && !data.separate)) {
+        return createSingleTimeRender(timeCompositionParams);
+      } else {
+        return data.separate ?
+          (createSeparateRangeTimeRender(timeCompositionParams)) :
+          (createRangeTimeRender(timeCompositionParams));
+      }
+    });
+
+    return () => hooks.onRenderInput.exec(null);
+  },
+});
+
+export default TimePicker;

package/src/packages/components/TimePicker/panel/TimeBaseColumn.tsx

@@ -1,136 +1,136 @@
-import {classnames, computed, designComponent, getComponentCls, iHTMLDivElement, onMounted, PropType, useModel, useRefList, useRefs} from '@peryl/react-compose';
-import './time-base-column.scss';
-import {zeroize} from "@peryl/utils/zeroize";
-import {delay} from "@peryl/utils/delay";
-import {findOne} from "@peryl/utils/findOne";
-import {EditProps, useEdit} from "../../../uses/useEdit";
-import Scroll from "../../Scroll";
-
-const size = 24;
-
-export const TimeBaseColumn = designComponent({
-  name: 'time-base-column',
-  inheritPropsType: iHTMLDivElement,
-  props: {
-    ...EditProps,
-
-    layout: { type: String, default: 'h' },   // 模式，h：时，m：分，s：秒
-    modelValue: { required: true },// 当前值
-    max: { type: Number },                    // 最大值
-    min: { type: Number },                    // 最小值
-    custom: { type: Function as PropType<(layout: string) => number[]> },// 自定义选项函数
-    checkDisabled: Function as PropType<(item: number, layout: any) => boolean>,// 用来判断选项是否禁用的函数
-    disableChangeOnScroll: { type: Boolean }, // 是否禁用在滚动的时候触发更新值动作
-  },
-  emits: {
-    onUpdateModelValue: (val: number) => true,
-    onClickItem: (i: number) => true,
-  },
-  setup({ props, event }) {
-
-    const { editComputed } = useEdit();
-
-    const { refs, onRef } = useRefs({ scroll: Scroll, });
-    const { refList: liList, onRefList } = useRefList<HTMLLIElement>();
-
-    const model = useModel(() => props.modelValue as any, event.emit.onUpdateModelValue, { onChange: () => delay().then(methods.resetPosition) });
-
-    const options = computed(() => {
-      if (!!props.custom) {
-        return props.custom(props.layout).map(item => zeroize(item, 2));
-      }
-      let count = props.layout === 'h' ? 24 : 60;
-      let options: string[] = [];
-      for (let i = 0; i < count; i++) {
-        options.push(zeroize(i, 2));
-      }
-      return options;
-    });
-
-    const methods = {
-      resetPosition: async () => {
-        let value = model.value || 0;
-        let start = 0;
-        let find = findOne(options.value, item => Number(item) == value, true) as { item: string, index: number };
-        if (!!find.item) {
-          start = find.index;
-          refs.scroll!.methods.scroll({ y: liList[start]?.offsetTop }, { noEmitScroll: true });
-        }
-      },
-    };
-
-    const utils = {
-      checkDisabled: (item: string | number) => {
-        item = Number(item);
-        if (editComputed.value.disabled) return true;
-        if (!!props.checkDisabled && props.checkDisabled(item, props.layout)) return true;
-
-        if (props.max != null && props.max < item) return true;
-        if (props.min != null && props.min > item) return true;
-        return false;
-      }
-    };
-
-    const handler = {
-      clickItem: (item: string | number) => {
-        item = Number(item);
-        if (utils.checkDisabled(item)) {
-          return;
-        }
-        model.value = item;
-        event.emit.onClickItem(item);
-        methods.resetPosition();
-      },
-      onScroll: (e: any) => {
-        if (props.disableChangeOnScroll) {
-          return;
-        }
-        let index = Math.max(0, Math.min(options.value.length - 1, Math.floor(e.target.scrollTop / size)));
-        const val = options.value[index] == null ? null : Number(options.value[index]);
-        if (val != null && val !== model.value && !utils.checkDisabled(val)) {
-          model.value = val;
-        }
-      }
-    };
-
-    onMounted(methods.resetPosition);
-
-    return {
-      render: () => (
-        <div className={getComponentCls('time-base-column')}>
-          <Scroll ref={onRef.scroll} onScroll={handler.onScroll}>
-            <ul className="time-base-column-list">
-              {[1, 2, 3].map((item, index) => (
-                <li
-                  ref={val => liList[index] = val as any}
-                  className="time-base-column-item"
-                  key={-item}/>)
-              )}
-
-              {options.value.map((item, index) => (
-                <li
-                  className={classnames([
-                    'time-base-column-item',
-                    'time-base-column-option-item',
-                    {
-                      'time-base-column-item-current': model.value != null && model.value == Number(item),
-                      'time-base-column-item-disabled': utils.checkDisabled(item),
-                    }
-                  ])}
-                  key={item}
-                  onClick={() => handler.clickItem(item)}
-                  ref={onRefList(index + 3)}>
-                  {item}
-                </li>
-              ))}
-
-              {[1, 2, 3].map(item => (<li className="time-base-column-item" key={-item - 3}/>))}
-            </ul>
-          </Scroll>
-        </div>
-      )
-    };
-  },
-});
-
-export default TimeBaseColumn;
+import {classnames, computed, designComponent, getComponentCls, iHTMLDivElement, onMounted, PropType, useModel, useRefList, useRefs} from '@peryl/react-compose';
+import './time-base-column.scss';
+import {zeroize} from "@peryl/utils/zeroize";
+import {delay} from "@peryl/utils/delay";
+import {findOne} from "@peryl/utils/findOne";
+import {EditProps, useEdit} from "../../../uses/useEdit";
+import Scroll from "../../Scroll";
+
+const size = 24;
+
+export const TimeBaseColumn = designComponent({
+  name: 'time-base-column',
+  inheritPropsType: iHTMLDivElement,
+  props: {
+    ...EditProps,
+
+    layout: { type: String, default: 'h' },   // 模式，h：时，m：分，s：秒
+    modelValue: { required: true },// 当前值
+    max: { type: Number },                    // 最大值
+    min: { type: Number },                    // 最小值
+    custom: { type: Function as PropType<(layout: string) => number[]> },// 自定义选项函数
+    checkDisabled: Function as PropType<(item: number, layout: any) => boolean>,// 用来判断选项是否禁用的函数
+    disableChangeOnScroll: { type: Boolean }, // 是否禁用在滚动的时候触发更新值动作
+  },
+  emits: {
+    onUpdateModelValue: (val: number) => true,
+    onClickItem: (i: number) => true,
+  },
+  setup({ props, event }) {
+
+    const { editComputed } = useEdit();
+
+    const { refs, onRef } = useRefs({ scroll: Scroll, });
+    const { refList: liList, onRefList } = useRefList<HTMLLIElement>();
+
+    const model = useModel(() => props.modelValue as any, event.emit.onUpdateModelValue, { onChange: () => delay().then(methods.resetPosition) });
+
+    const options = computed(() => {
+      if (!!props.custom) {
+        return props.custom(props.layout).map(item => zeroize(item, 2));
+      }
+      let count = props.layout === 'h' ? 24 : 60;
+      let options: string[] = [];
+      for (let i = 0; i < count; i++) {
+        options.push(zeroize(i, 2));
+      }
+      return options;
+    });
+
+    const methods = {
+      resetPosition: async () => {
+        let value = model.value || 0;
+        let start = 0;
+        let find = findOne(options.value, item => Number(item) == value, true) as { item: string, index: number };
+        if (!!find.item) {
+          start = find.index;
+          refs.scroll!.methods.scroll({ y: liList[start]?.offsetTop }, { noEmitScroll: true });
+        }
+      },
+    };
+
+    const utils = {
+      checkDisabled: (item: string | number) => {
+        item = Number(item);
+        if (editComputed.value.disabled) return true;
+        if (!!props.checkDisabled && props.checkDisabled(item, props.layout)) return true;
+
+        if (props.max != null && props.max < item) return true;
+        if (props.min != null && props.min > item) return true;
+        return false;
+      }
+    };
+
+    const handler = {
+      clickItem: (item: string | number) => {
+        item = Number(item);
+        if (utils.checkDisabled(item)) {
+          return;
+        }
+        model.value = item;
+        event.emit.onClickItem(item);
+        methods.resetPosition();
+      },
+      onScroll: (e: any) => {
+        if (props.disableChangeOnScroll) {
+          return;
+        }
+        let index = Math.max(0, Math.min(options.value.length - 1, Math.floor(e.target.scrollTop / size)));
+        const val = options.value[index] == null ? null : Number(options.value[index]);
+        if (val != null && val !== model.value && !utils.checkDisabled(val)) {
+          model.value = val;
+        }
+      }
+    };
+
+    onMounted(methods.resetPosition);
+
+    return {
+      render: () => (
+        <div className={getComponentCls('time-base-column')}>
+          <Scroll ref={onRef.scroll} onScroll={handler.onScroll}>
+            <ul className="time-base-column-list">
+              {[1, 2, 3].map((item, index) => (
+                <li
+                  ref={val => liList[index] = val as any}
+                  className="time-base-column-item"
+                  key={-item}/>)
+              )}
+
+              {options.value.map((item, index) => (
+                <li
+                  className={classnames([
+                    'time-base-column-item',
+                    'time-base-column-option-item',
+                    {
+                      'time-base-column-item-current': model.value != null && model.value == Number(item),
+                      'time-base-column-item-disabled': utils.checkDisabled(item),
+                    }
+                  ])}
+                  key={item}
+                  onClick={() => handler.clickItem(item)}
+                  ref={onRefList(index + 3)}>
+                  {item}
+                </li>
+              ))}
+
+              {[1, 2, 3].map(item => (<li className="time-base-column-item" key={-item - 3}/>))}
+            </ul>
+          </Scroll>
+        </div>
+      )
+    };
+  },
+});
+
+export default TimeBaseColumn;