plain-design 1.0.0-beta.4 → 1.0.0-beta.5

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

@@ -1,136 +1,136 @@
-import {classnames, computed, designComponent, getComponentCls, iHTMLDivElement, onMounted, PropType, useModel, useRefList, useRefs} from 'plain-design-composition';
-import './time-base-column.scss';
-import {zeroize} from "plain-utils/string/zeroize";
-import {delay} from "plain-utils/utils/delay";
-import {findOne} from "plain-utils/object/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 'plain-design-composition';
+import './time-base-column.scss';
+import {zeroize} from "plain-utils/string/zeroize";
+import {delay} from "plain-utils/utils/delay";
+import {findOne} from "plain-utils/object/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;

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

@@ -1,172 +1,172 @@
-import {computed, designComponent, getComponentCls} from 'plain-design-composition';
-import './time-base-panel.scss';
-import {TimePublicProps} from "./time-panel.utils";
-import {plainDate} from "../../../utils/plainDate";
-import {TimeBaseColumn} from "./TimeBaseColumn";
-import {useTimeFormat} from "../time.utils";
-
-export enum TimePanelLayout {
-  h = 'hour',
-  m = 'minute',
-  s = 'second',
-}
-
-export const TimeBasePanel = designComponent({
-  name: 'time-base-panel',
-  props: {
-    modelValue: { type: String },
-    disableChangeOnScroll: { type: Boolean },// 是否禁用在滚动的时候触发更新值动作
-    ...TimePublicProps,
-  },
-  emits: {
-    onUpdateModelValue: (val: string | null) => true,
-    onEnterColumn: (type: TimePanelLayout) => true,
-  },
-  setup({ props, event }) {
-
-    const { formatString, layoutArray } = useTimeFormat(props);
-
-    const defaultTime = plainDate(props.defaultTime, formatString.value);
-
-    const formatData = computed(() => {
-      return {
-        value: !props.modelValue ? defaultTime : plainDate(props.modelValue, formatString.value),
-        max: !props.max ? null : plainDate(props.max, formatString.value),
-        min: !props.min ? null : plainDate(props.min, formatString.value),
-      };
-    });
-
-    const maxmin = computed(() => {
-
-      const max = {
-        hour: null as null | number,
-        minute: null as null | number,
-        second: null as null | number,
-      };
-      const min = {
-        hour: null as null | number,
-        minute: null as null | number,
-        second: null as null | number,
-      };
-
-      const { max: maxpd, min: minpd, value: vpd } = formatData.value;
-
-      if (!!maxpd) {
-        max.hour = maxpd.hour;
-        if (!vpd) {
-          // 有最大值，但是没有选择【时】的情况下，分以及秒不能选择任意选项
-          max.minute = -Infinity;
-          max.second = -Infinity;
-        } else {
-          if (vpd.hour < max.hour) {
-            // 有最大值，但是【时】没有达到最大值，此时分以及秒可以任意选择
-            max.minute = null;
-            max.second = null;
-          } else {
-            max.minute = maxpd.minute;
-            if (vpd.minute == null) {
-              max.second = -Infinity;
-            } else {
-              if (vpd.minute < max.minute!) {
-                max.second = null;
-              } else {
-                max.second = maxpd.second;
-              }
-            }
-          }
-        }
-      }
-
-      if (!!minpd) {
-        min.hour = minpd.hour;
-        if (!vpd) {
-          // 有最小值，但是没有选择【时】的情况下，分以及秒不能选择任意选项
-          min.minute = Infinity;
-          min.second = Infinity;
-        } else {
-          if (vpd.hour > min.hour) {
-            // 有最小值，但是【时】没有达到最小值，此时分以及秒可以任意选择
-            min.minute = null;
-            min.second = null;
-          } else {
-            min.minute = minpd.minute;
-            if (vpd.minute == null) {
-              min.second = Infinity;
-            } else {
-              if (vpd.minute > min.minute!) {
-                min.second = null;
-              } else {
-                min.second = minpd.second;
-              }
-            }
-          }
-        }
-      }
-
-      return {
-        max, min,
-      };
-    });
-
-    const checkDisabled = computed(() => !props.checkDisabled ? null : (num: number, layout: TimePanelLayout) => props.checkDisabled!(num, layout, formatData.value.value));
-
-    const custom = computed(() => !props.custom ? null : (layout: TimePanelLayout) => props.custom!(layout, formatData.value.value));
-
-    const handler = {
-      columnChange: (value: number, type: string) => {
-        // console.log('columnChange', {value, type})
-
-        let { value: vpd, max: maxpd, min: minpd } = formatData.value;
-
-        switch (type) {
-          case 'h':
-            vpd = vpd.useHour(value);
-            break;
-          case 'm':
-            vpd = vpd.useMinute(value);
-            break;
-          case 's':
-            vpd = vpd.useSecond(value);
-            break;
-        }
-
-        if (!!maxpd && vpd.Hms! > maxpd.Hms) {
-          vpd = maxpd;
-        }
-
-        if (!!minpd && vpd.Hms! < minpd.Hms) {
-          vpd = minpd;
-        }
-
-        event.emit.onUpdateModelValue(vpd.getValue());
-      }
-    };
-
-    return {
-      render: () => {
-        return (
-          <div className={getComponentCls('time-base-panel')}>
-            {layoutArray.value.map((layout: any) => (
-              <TimeBaseColumn
-                {...{
-                  key: layout,
-                  layout,
-                  modelValue: (formatData as any).value.value[(TimePanelLayout as any)[layout]],
-                  max: (maxmin as any).value.max[(TimePanelLayout as any)[layout]],
-                  min: (maxmin as any).value.min[(TimePanelLayout as any)[layout]],
-                  checkDisabled: checkDisabled.value!,
-                  custom: custom.value as any,
-                  onChange: (val: number) => handler.columnChange(val, layout),
-                  disableChangeOnScroll: props.disableChangeOnScroll,
-                  onMouseEnter: () => event.emit.onEnterColumn(layout),
-                }}
-              />
-            ))}
-          </div>
-        );
-      }
-    };
-  },
-});
-
-export default TimeBasePanel;
+import {computed, designComponent, getComponentCls} from 'plain-design-composition';
+import './time-base-panel.scss';
+import {TimePublicProps} from "./time-panel.utils";
+import {plainDate} from "../../../utils/plainDate";
+import {TimeBaseColumn} from "./TimeBaseColumn";
+import {useTimeFormat} from "../time.utils";
+
+export enum TimePanelLayout {
+  h = 'hour',
+  m = 'minute',
+  s = 'second',
+}
+
+export const TimeBasePanel = designComponent({
+  name: 'time-base-panel',
+  props: {
+    modelValue: { type: String },
+    disableChangeOnScroll: { type: Boolean },// 是否禁用在滚动的时候触发更新值动作
+    ...TimePublicProps,
+  },
+  emits: {
+    onUpdateModelValue: (val: string | null) => true,
+    onEnterColumn: (type: TimePanelLayout) => true,
+  },
+  setup({ props, event }) {
+
+    const { formatString, layoutArray } = useTimeFormat(props);
+
+    const defaultTime = plainDate(props.defaultTime, formatString.value);
+
+    const formatData = computed(() => {
+      return {
+        value: !props.modelValue ? defaultTime : plainDate(props.modelValue, formatString.value),
+        max: !props.max ? null : plainDate(props.max, formatString.value),
+        min: !props.min ? null : plainDate(props.min, formatString.value),
+      };
+    });
+
+    const maxmin = computed(() => {
+
+      const max = {
+        hour: null as null | number,
+        minute: null as null | number,
+        second: null as null | number,
+      };
+      const min = {
+        hour: null as null | number,
+        minute: null as null | number,
+        second: null as null | number,
+      };
+
+      const { max: maxpd, min: minpd, value: vpd } = formatData.value;
+
+      if (!!maxpd) {
+        max.hour = maxpd.hour;
+        if (!vpd) {
+          // 有最大值，但是没有选择【时】的情况下，分以及秒不能选择任意选项
+          max.minute = -Infinity;
+          max.second = -Infinity;
+        } else {
+          if (vpd.hour < max.hour) {
+            // 有最大值，但是【时】没有达到最大值，此时分以及秒可以任意选择
+            max.minute = null;
+            max.second = null;
+          } else {
+            max.minute = maxpd.minute;
+            if (vpd.minute == null) {
+              max.second = -Infinity;
+            } else {
+              if (vpd.minute < max.minute!) {
+                max.second = null;
+              } else {
+                max.second = maxpd.second;
+              }
+            }
+          }
+        }
+      }
+
+      if (!!minpd) {
+        min.hour = minpd.hour;
+        if (!vpd) {
+          // 有最小值，但是没有选择【时】的情况下，分以及秒不能选择任意选项
+          min.minute = Infinity;
+          min.second = Infinity;
+        } else {
+          if (vpd.hour > min.hour) {
+            // 有最小值，但是【时】没有达到最小值，此时分以及秒可以任意选择
+            min.minute = null;
+            min.second = null;
+          } else {
+            min.minute = minpd.minute;
+            if (vpd.minute == null) {
+              min.second = Infinity;
+            } else {
+              if (vpd.minute > min.minute!) {
+                min.second = null;
+              } else {
+                min.second = minpd.second;
+              }
+            }
+          }
+        }
+      }
+
+      return {
+        max, min,
+      };
+    });
+
+    const checkDisabled = computed(() => !props.checkDisabled ? null : (num: number, layout: TimePanelLayout) => props.checkDisabled!(num, layout, formatData.value.value));
+
+    const custom = computed(() => !props.custom ? null : (layout: TimePanelLayout) => props.custom!(layout, formatData.value.value));
+
+    const handler = {
+      columnChange: (value: number, type: string) => {
+        // console.log('columnChange', {value, type})
+
+        let { value: vpd, max: maxpd, min: minpd } = formatData.value;
+
+        switch (type) {
+          case 'h':
+            vpd = vpd.useHour(value);
+            break;
+          case 'm':
+            vpd = vpd.useMinute(value);
+            break;
+          case 's':
+            vpd = vpd.useSecond(value);
+            break;
+        }
+
+        if (!!maxpd && vpd.Hms! > maxpd.Hms) {
+          vpd = maxpd;
+        }
+
+        if (!!minpd && vpd.Hms! < minpd.Hms) {
+          vpd = minpd;
+        }
+
+        event.emit.onUpdateModelValue(vpd.getValue());
+      }
+    };
+
+    return {
+      render: () => {
+        return (
+          <div className={getComponentCls('time-base-panel')}>
+            {layoutArray.value.map((layout: any) => (
+              <TimeBaseColumn
+                {...{
+                  key: layout,
+                  layout,
+                  modelValue: (formatData as any).value.value[(TimePanelLayout as any)[layout]],
+                  max: (maxmin as any).value.max[(TimePanelLayout as any)[layout]],
+                  min: (maxmin as any).value.min[(TimePanelLayout as any)[layout]],
+                  checkDisabled: checkDisabled.value!,
+                  custom: custom.value as any,
+                  onChange: (val: number) => handler.columnChange(val, layout),
+                  disableChangeOnScroll: props.disableChangeOnScroll,
+                  onMouseEnter: () => event.emit.onEnterColumn(layout),
+                }}
+              />
+            ))}
+          </div>
+        );
+      }
+    };
+  },
+});
+
+export default TimeBasePanel;