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

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

@@ -1,172 +1,172 @@
-import {computed, designComponent, getComponentCls} from '@peryl/react-compose';
-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 '@peryl/react-compose';
+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;

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

@@ -1,94 +1,94 @@
-import './time-range-panel.scss';
-import {TimePublicProps} from "./time-panel.utils";
-import {computed, designComponent, iMouseEvent, PropType, RenderNode, useModel} from "@peryl/react-compose";
-import TimeRangePanel, {TimeRangePanelType} from "./TimeRangePanel";
-import {delay} from "@peryl/utils/delay";
-import TimeBasePanel, {TimePanelLayout} from "./TimeBasePanel";
-
-export const TimePanelProps = {
-  modelValue: { type: String as PropType<string | null | undefined> },
-  start: { type: String as PropType<string | null | undefined> },
-  end: { type: String as PropType<string | null | undefined> },
-  range: { type: Boolean },
-  separate: { type: Boolean },
-  ...TimePublicProps,
-};
-
-export const TimePanel = designComponent({
-  name: 'time-panel',
-  props: {
-    ...TimePanelProps,
-    foot: { type: Function as PropType<() => RenderNode> },
-  },
-  emits: {
-    onUpdateModelValue: (val: string | undefined, type: TimeRangePanelType) => true,
-    onUpdateStart: (val?: string | null | undefined) => true,
-    onUpdateEnd: (val?: string | null | undefined) => true,
-
-    onMousedownBasePanel: (e: iMouseEvent) => true,
-    onMousedownStartPanel: (e: MouseEvent) => true,
-    onMousedownEndPanel: (e: MouseEvent) => true,
-    onEnterColumn: (type: TimePanelLayout, range?: TimeRangePanelType) => true,
-  },
-  setup({ props, event: { emit } }) {
-
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue as any);
-    const start = useModel(() => props.start, emit.onUpdateStart);
-    const end = useModel(() => props.end, emit.onUpdateEnd);
-
-    const handler = {
-      onBaseChange: async (val?: string) => {
-        await delay();
-        model.value = val;
-      },
-      onRangeChange: async (val: string | undefined, type: TimeRangePanelType) => {
-        await delay();
-        if (type === TimeRangePanelType.start) {
-          start.value = val;
-        } else if (type === TimeRangePanelType.end) {
-          end.value = val;
-        }
-        emit.onUpdateModelValue(val, type);
-      },
-    };
-
-    const binding = computed(() => {
-
-      const publicProps = Object.keys(TimePublicProps).reduce((ret: any, key) => {
-        ret[key] = (props as any)[key];
-        return ret;
-      }, {});
-
-      return {
-        base: {
-          ...publicProps,
-          modelValue: model.value,
-          onChange: handler.onBaseChange,
-          onMouseDown: emit.onMousedownBasePanel,
-          onEnterColumn: emit.onEnterColumn,
-        },
-        range: {
-          ...publicProps,
-          start: start.value,
-          end: end.value,
-          onChange: handler.onRangeChange,
-          onMousedownStartPanel: emit.onMousedownStartPanel,
-          onMousedownEndPanel: emit.onMousedownEndPanel,
-          onEnterColumn: emit.onEnterColumn,
-        },
-      };
-    });
-
-    return {
-      render: () => <>
-        {!props.range ?
-          <TimeBasePanel className="time-panel" {...binding.value.base} key="base"/> :
-          <TimeRangePanel className="time-panel" {...binding.value.range} key="range"/>}
-        {!!props.foot && <div className="time-panel-foot" onMouseDown={emit.onMousedownBasePanel}>
-          {props.foot()}
-        </div>}
-      </>
-    };
-
-  },
-});
+import './time-range-panel.scss';
+import {TimePublicProps} from "./time-panel.utils";
+import {computed, designComponent, iMouseEvent, PropType, RenderNode, useModel} from "@peryl/react-compose";
+import TimeRangePanel, {TimeRangePanelType} from "./TimeRangePanel";
+import {delay} from "@peryl/utils/delay";
+import TimeBasePanel, {TimePanelLayout} from "./TimeBasePanel";
+
+export const TimePanelProps = {
+  modelValue: { type: String as PropType<string | null | undefined> },
+  start: { type: String as PropType<string | null | undefined> },
+  end: { type: String as PropType<string | null | undefined> },
+  range: { type: Boolean },
+  separate: { type: Boolean },
+  ...TimePublicProps,
+};
+
+export const TimePanel = designComponent({
+  name: 'time-panel',
+  props: {
+    ...TimePanelProps,
+    foot: { type: Function as PropType<() => RenderNode> },
+  },
+  emits: {
+    onUpdateModelValue: (val: string | undefined, type: TimeRangePanelType) => true,
+    onUpdateStart: (val?: string | null | undefined) => true,
+    onUpdateEnd: (val?: string | null | undefined) => true,
+
+    onMousedownBasePanel: (e: iMouseEvent) => true,
+    onMousedownStartPanel: (e: MouseEvent) => true,
+    onMousedownEndPanel: (e: MouseEvent) => true,
+    onEnterColumn: (type: TimePanelLayout, range?: TimeRangePanelType) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue as any);
+    const start = useModel(() => props.start, emit.onUpdateStart);
+    const end = useModel(() => props.end, emit.onUpdateEnd);
+
+    const handler = {
+      onBaseChange: async (val?: string) => {
+        await delay();
+        model.value = val;
+      },
+      onRangeChange: async (val: string | undefined, type: TimeRangePanelType) => {
+        await delay();
+        if (type === TimeRangePanelType.start) {
+          start.value = val;
+        } else if (type === TimeRangePanelType.end) {
+          end.value = val;
+        }
+        emit.onUpdateModelValue(val, type);
+      },
+    };
+
+    const binding = computed(() => {
+
+      const publicProps = Object.keys(TimePublicProps).reduce((ret: any, key) => {
+        ret[key] = (props as any)[key];
+        return ret;
+      }, {});
+
+      return {
+        base: {
+          ...publicProps,
+          modelValue: model.value,
+          onChange: handler.onBaseChange,
+          onMouseDown: emit.onMousedownBasePanel,
+          onEnterColumn: emit.onEnterColumn,
+        },
+        range: {
+          ...publicProps,
+          start: start.value,
+          end: end.value,
+          onChange: handler.onRangeChange,
+          onMousedownStartPanel: emit.onMousedownStartPanel,
+          onMousedownEndPanel: emit.onMousedownEndPanel,
+          onEnterColumn: emit.onEnterColumn,
+        },
+      };
+    });
+
+    return {
+      render: () => <>
+        {!props.range ?
+          <TimeBasePanel className="time-panel" {...binding.value.base} key="base"/> :
+          <TimeRangePanel className="time-panel" {...binding.value.range} key="range"/>}
+        {!!props.foot && <div className="time-panel-foot" onMouseDown={emit.onMousedownBasePanel}>
+          {props.foot()}
+        </div>}
+      </>
+    };
+
+  },
+});