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

package/src/packages/components/DatePicker/panel/DatePanelDate.tsx

@@ -1,278 +1,278 @@
-import {classnames, computed, createEventListener, designComponent, getComponentCls, iMouseEvent, PropType} from "plain-design-composition";
-import {DateItemData, DatePanelItemWrapper, DatePanelWrapper, DatePublicEmits, DatePublicProps, DefaultDateFormatString, eDateView, eDateViewSeq, eSlideTransitionDirection} from "../date.utils";
-import {PDate, plainDate} from "../../../utils/plainDate";
-import {UseDateJudgementView, useDatePanel} from "./useDatePanel";
-import {Button} from "../../Button";
-import {DatePanelMonth} from "./DatePanelMonth";
-import {zeroize} from "plain-utils/string/zeroize";
-import {TimePanel} from "../../TimePicker/panel/TimePanel";
-import {ThemeSize} from "../../../uses/useStyle";
-import i18n from "../../i18n";
-
-/**
- * 日期面板
- * @author  韦胜健
- * @date    2022/12/12 10:58
- */
-export const DatePanelDate = designComponent({
-  name: 'date-panel-date',
-  props: {
-    ...DatePublicProps,
-    view: { type: String as PropType<eDateView>, default: eDateView.date },
-  },
-  emits: {
-    ...DatePublicEmits,
-    // onUpdateModelValue: (val?: string, ipd?: PDate) => true,
-    onClick: (did: DateItemData) => true,
-    onMouseenter: (did: DateItemData) => true,
-    onSelectTime: (val: string) => true,
-    onSelectDateChange: (pd: PDate) => true,
-    onMouseleaveDateList: (e: iMouseEvent) => true,
-  },
-  setup({ props, event: { emit } }) {
-
-    const {
-      model,
-      state,
-      today,
-      getStatus,
-      displayFormat,
-      valueFormat,
-      viewModel,
-      setSelectDate,
-      handler,
-      parent,
-    } = useDatePanel({
-      props,
-      emit,
-      jdView: UseDateJudgementView.YMD,
-      processPd: {
-        value: (pd) => {
-          if (!props.datetime) return pd;
-          pd = pd.useHms(showTimePd.value);
-          if (!!state.topState.max && state.topState.max.YMDHms < pd.YMDHms) {pd = state.topState.max;}
-          if (!!state.topState.min && state.topState.min.YMDHms > pd.YMDHms) {pd = state.topState.min;}
-          return pd;
-        }
-      },
-    });
-
-    const utils = {
-      setSelectDate: (val: PDate | string | undefined, autoEmit = true) => {
-        let pd: PDate;
-        if (!val) {
-          pd = today;
-        } else {
-          pd = typeof val !== "string" ? val : today.useValue(val);
-        }
-        setSelectDate(pd);
-        if (autoEmit) {
-          emit.onSelectDateChange(pd);
-        }
-      }
-    };
-
-    const weekList = computed(() => {
-      const weeks = [
-        i18n('week.sunday').d('日'),
-        i18n('week.monday').d('一'),
-        i18n('week.tuesday').d('二'),
-        i18n('week.wednesday').d('三'),
-        i18n('week.thursday').d('四'),
-        i18n('week.friday').d('五'),
-        i18n('week.saturday').d('六'),
-      ];
-      return weeks.slice(props.firstWeekDay).concat(weeks.slice(0, props.firstWeekDay));
-    });
-
-    const dateList = computed(() => {
-      const { selectDate } = state;
-      let pd = today.useYMD([selectDate.year, selectDate.month, 1]);
-      const currentMonthFirstDate = pd.clone();
-      let weekDayDuration = currentMonthFirstDate.day - props.firstWeekDay;
-      let offsetDay = weekDayDuration === 0 ? 7 : weekDayDuration > 0 ? weekDayDuration : 7 + weekDayDuration;
-      let firstDateTime = new Date(currentMonthFirstDate.time! - (offsetDay) * 24 * 60 * 60 * 1000).getTime();
-      let list: DateItemData[] = [];
-      for (let i = 0; i < 42; i++) {
-        pd = pd.useTime(firstDateTime);
-        let item = {
-          label: pd.date,
-          pd,
-          ...getStatus(pd),
-          externals: {
-            isSelectMonth: pd.YM === selectDate.YM,
-          },
-        };
-        list.push(item);
-        firstDateTime += 24 * 60 * 60 * 1000;
-      }
-      return list;
-    });
-
-    const monthAttrs = computed(() => ({
-      modelValue: state.selectDate.getValue(),
-      displayFormat,
-      valueFormat,
-      view: viewModel.value,
-      onChange: externalHandler.onSelectMonthChange as any,
-    }));
-
-    const defaultTimePd = computed(() => {
-      const config = { displayFormat: DefaultDateFormatString.Hms, valueFormat: DefaultDateFormatString.Hms };
-      return !!props.defaultTime ?
-        plainDate(props.defaultTime, config) :
-        plainDate.today(config.displayFormat, config.valueFormat);
-    });
-
-    const showTimePd = computed(() => (state.pd.vpd as PDate | null) || defaultTimePd.value);
-
-    const timeAttrs = computed(() => {
-      const vpd = state.pd.vpd as PDate | null;
-      const timePd = vpd || defaultTimePd.value;
-      const attrs = {
-        modelValue: plainDate.format(timePd.getDate(), DefaultDateFormatString.Hms),
-        displayFormat: DefaultDateFormatString.Hms,
-        valueFormat: DefaultDateFormatString.Hms,
-        max: undefined as undefined | string,
-        min: undefined as undefined | string,
-        onChange: externalHandler.onSelectTime as any,
-      };
-      const { max, min } = state.topState;
-      if (!!vpd) {
-        /*限制最大最小值*/
-        if (!!max) {
-          if (max.YMD <= vpd.YMD) {
-            const maxPd = timePd.useHms(max);
-            attrs.max = plainDate.format(maxPd.getDate(), DefaultDateFormatString.Hms);
-          }
-        }
-        if (!!min) {
-          if (min.YMD >= vpd.YMD) {
-            const minPd = timePd.useHms(min);
-            attrs.min = plainDate.format(minPd.getDate(), DefaultDateFormatString.Hms);
-          }
-        }
-      }
-      return attrs;
-    });
-
-    const methods = {
-      /*上一年*/
-      prevYear() {utils.setSelectDate(state.selectDate.useYear(state.selectDate.year - 1));},
-      /*下一年*/
-      nextYear() {utils.setSelectDate(state.selectDate.useYear(state.selectDate.year + 1));},
-      /*上一月*/
-      prevMonth() {utils.setSelectDate(state.selectDate.useMonthDate(state.selectDate.month - 1, 1));},
-      /*下一月*/
-      nextMonth() {utils.setSelectDate(state.selectDate.useMonthDate(state.selectDate.month + 1, 1));},
-      /*切换视图*/
-      changeView: (view: eDateView) => {
-        if (view === viewModel.value) return;
-        const oldSeq = eDateViewSeq[viewModel.value];
-        const newSeq = eDateViewSeq[view];
-        state.slide = newSeq > oldSeq ? eSlideTransitionDirection.next : eSlideTransitionDirection.prev;
-        viewModel.value = view;
-      },
-    };
-
-    const externalHandler = {
-      onSelectMonthChange: (val: string) => {
-        utils.setSelectDate(state.selectDate.useValue(val));
-        methods.changeView(eDateView.date);
-      },
-      onSelectTime: (val: string) => {
-        if (!!parent) {return emit.onSelectTime(val);}
-        const timePd = defaultTimePd.value.useValue(val);
-        let vpd = state.pd.vpd as PDate | undefined || today;
-        vpd = vpd.useHms(timePd);
-        model.value = vpd.getValue();
-        emit.onSelectTime(val);
-      },
-      onClick: (did: DateItemData) => {
-        if (!!parent) {return emit.onClick(did);}
-        handler.onClick(did);
-      },
-      onMouseenter: (did: DateItemData) => {
-        if (!!parent) {return emit.onMouseenter(did);}
-        handler.onMouseenter(did);
-      },
-    };
-
-    const render = {
-      date: () => {
-        return DatePanelWrapper({
-          key: 'date',
-          className: getComponentCls("date-base-panel-date"),
-          left: (<>
-            <Button icon="pi-double-left" mode="text" size={ThemeSize.mini} onClick={methods.prevYear}/>
-            <Button icon="pi-left" mode="text" size={ThemeSize.mini} onClick={methods.prevMonth}/>
-          </>),
-          center: (<>
-            <span onClick={() => methods.changeView(eDateView.year)}>{state.selectDate.year}</span>
-            -
-            <span onClick={() => methods.changeView(eDateView.month)}>{zeroize(state.selectDate.month! + 1)}</span>
-            {!!props.datetime && (
-              <span className="date-base-panel-date-time-label" onClick={() => methods.changeView(eDateView.time)}>
-                {timeAttrs.value.modelValue}
-              </span>
-            )}
-          </>),
-          right: (<>
-            <Button icon="pi-right" mode="text" size={ThemeSize.mini} onClick={methods.nextMonth}/>
-            <Button icon="pi-double-right" mode="text" size={ThemeSize.mini} onClick={methods.nextYear}/>
-          </>),
-          content: (<>
-            <ul className="date-base-panel-date-week-list">
-              {weekList.value.map(item => (
-                <li className="date-base-panel-item date-base-panel-date-week-item" key={item}>
-                  <div><span>{item}</span></div>
-                </li>
-              ))}
-            </ul>
-            <ul className="date-base-panel-date-list" {...createEventListener({ onMouseLeave: emit.onMouseleaveDateList })}>
-              {dateList.value.map((item, index) => (
-                DatePanelItemWrapper({
-                  item,
-                  onClick: externalHandler.onClick,
-                  onMouseEnter: externalHandler.onMouseenter,
-                  Node: <div
-                    {...{
-                      // tag: 'li',
-                      className: classnames(['date-base-panel-date-item', { 'date-base-panel-date-item-other-month': !item.externals.isSelectMonth, }]),
-                      key: item.externals.isSelectMonth ? item.pd.date : `_${index}`,
-                    }}
-                  />,
-                })
-              ))}
-            </ul>
-          </>),
-        });
-      },
-      month: () => {
-        return <DatePanelMonth {...monthAttrs.value} direction="horizontal" key={viewModel.value}/>;
-      },
-      time: () => {
-        return DatePanelWrapper({
-          key: 'time',
-          className: 'date-base-panel-time',
-          center: (<>
-            <span onClick={() => methods.changeView(eDateView.date)}>
-              {showTimePd.value.year}-{zeroize(showTimePd.value.month! + 1)}-{zeroize(showTimePd.value.date!)}
-            </span>
-          </>),
-          content: <TimePanel {...timeAttrs.value}/>,
-        });
-      },
-    };
-
-    return {
-      render: () => (
-        <div className={`${getComponentCls("date-base-panel-date-wrapper")} ${getComponentCls("date-base-panel")}`}>
-          {/*<Transition name={getComponentCls(`transition-slide-${state.slide}`)}>*/}
-          {render[viewModel.value === eDateView.year ? eDateView.month : viewModel.value]()}
-          {/*</Transition>*/}
-        </div>
-      )
-    };
-  },
-});
+import {classnames, computed, createEventListener, designComponent, getComponentCls, iMouseEvent, PropType} from "plain-design-composition";
+import {DateItemData, DatePanelItemWrapper, DatePanelWrapper, DatePublicEmits, DatePublicProps, DefaultDateFormatString, eDateView, eDateViewSeq, eSlideTransitionDirection} from "../date.utils";
+import {PDate, plainDate} from "../../../utils/plainDate";
+import {UseDateJudgementView, useDatePanel} from "./useDatePanel";
+import {Button} from "../../Button";
+import {DatePanelMonth} from "./DatePanelMonth";
+import {zeroize} from "plain-utils/string/zeroize";
+import {TimePanel} from "../../TimePicker/panel/TimePanel";
+import {ThemeSize} from "../../../uses/useStyle";
+import i18n from "../../i18n";
+
+/**
+ * 日期面板
+ * @author  韦胜健
+ * @date    2022/12/12 10:58
+ */
+export const DatePanelDate = designComponent({
+  name: 'date-panel-date',
+  props: {
+    ...DatePublicProps,
+    view: { type: String as PropType<eDateView>, default: eDateView.date },
+  },
+  emits: {
+    ...DatePublicEmits,
+    // onUpdateModelValue: (val?: string, ipd?: PDate) => true,
+    onClick: (did: DateItemData) => true,
+    onMouseenter: (did: DateItemData) => true,
+    onSelectTime: (val: string) => true,
+    onSelectDateChange: (pd: PDate) => true,
+    onMouseleaveDateList: (e: iMouseEvent) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const {
+      model,
+      state,
+      today,
+      getStatus,
+      displayFormat,
+      valueFormat,
+      viewModel,
+      setSelectDate,
+      handler,
+      parent,
+    } = useDatePanel({
+      props,
+      emit,
+      jdView: UseDateJudgementView.YMD,
+      processPd: {
+        value: (pd) => {
+          if (!props.datetime) return pd;
+          pd = pd.useHms(showTimePd.value);
+          if (!!state.topState.max && state.topState.max.YMDHms < pd.YMDHms) {pd = state.topState.max;}
+          if (!!state.topState.min && state.topState.min.YMDHms > pd.YMDHms) {pd = state.topState.min;}
+          return pd;
+        }
+      },
+    });
+
+    const utils = {
+      setSelectDate: (val: PDate | string | undefined, autoEmit = true) => {
+        let pd: PDate;
+        if (!val) {
+          pd = today;
+        } else {
+          pd = typeof val !== "string" ? val : today.useValue(val);
+        }
+        setSelectDate(pd);
+        if (autoEmit) {
+          emit.onSelectDateChange(pd);
+        }
+      }
+    };
+
+    const weekList = computed(() => {
+      const weeks = [
+        i18n('week.sunday').d('日'),
+        i18n('week.monday').d('一'),
+        i18n('week.tuesday').d('二'),
+        i18n('week.wednesday').d('三'),
+        i18n('week.thursday').d('四'),
+        i18n('week.friday').d('五'),
+        i18n('week.saturday').d('六'),
+      ];
+      return weeks.slice(props.firstWeekDay).concat(weeks.slice(0, props.firstWeekDay));
+    });
+
+    const dateList = computed(() => {
+      const { selectDate } = state;
+      let pd = today.useYMD([selectDate.year, selectDate.month, 1]);
+      const currentMonthFirstDate = pd.clone();
+      let weekDayDuration = currentMonthFirstDate.day - props.firstWeekDay;
+      let offsetDay = weekDayDuration === 0 ? 7 : weekDayDuration > 0 ? weekDayDuration : 7 + weekDayDuration;
+      let firstDateTime = new Date(currentMonthFirstDate.time! - (offsetDay) * 24 * 60 * 60 * 1000).getTime();
+      let list: DateItemData[] = [];
+      for (let i = 0; i < 42; i++) {
+        pd = pd.useTime(firstDateTime);
+        let item = {
+          label: pd.date,
+          pd,
+          ...getStatus(pd),
+          externals: {
+            isSelectMonth: pd.YM === selectDate.YM,
+          },
+        };
+        list.push(item);
+        firstDateTime += 24 * 60 * 60 * 1000;
+      }
+      return list;
+    });
+
+    const monthAttrs = computed(() => ({
+      modelValue: state.selectDate.getValue(),
+      displayFormat,
+      valueFormat,
+      view: viewModel.value,
+      onChange: externalHandler.onSelectMonthChange as any,
+    }));
+
+    const defaultTimePd = computed(() => {
+      const config = { displayFormat: DefaultDateFormatString.Hms, valueFormat: DefaultDateFormatString.Hms };
+      return !!props.defaultTime ?
+        plainDate(props.defaultTime, config) :
+        plainDate.today(config.displayFormat, config.valueFormat);
+    });
+
+    const showTimePd = computed(() => (state.pd.vpd as PDate | null) || defaultTimePd.value);
+
+    const timeAttrs = computed(() => {
+      const vpd = state.pd.vpd as PDate | null;
+      const timePd = vpd || defaultTimePd.value;
+      const attrs = {
+        modelValue: plainDate.format(timePd.getDate(), DefaultDateFormatString.Hms),
+        displayFormat: DefaultDateFormatString.Hms,
+        valueFormat: DefaultDateFormatString.Hms,
+        max: undefined as undefined | string,
+        min: undefined as undefined | string,
+        onChange: externalHandler.onSelectTime as any,
+      };
+      const { max, min } = state.topState;
+      if (!!vpd) {
+        /*限制最大最小值*/
+        if (!!max) {
+          if (max.YMD <= vpd.YMD) {
+            const maxPd = timePd.useHms(max);
+            attrs.max = plainDate.format(maxPd.getDate(), DefaultDateFormatString.Hms);
+          }
+        }
+        if (!!min) {
+          if (min.YMD >= vpd.YMD) {
+            const minPd = timePd.useHms(min);
+            attrs.min = plainDate.format(minPd.getDate(), DefaultDateFormatString.Hms);
+          }
+        }
+      }
+      return attrs;
+    });
+
+    const methods = {
+      /*上一年*/
+      prevYear() {utils.setSelectDate(state.selectDate.useYear(state.selectDate.year - 1));},
+      /*下一年*/
+      nextYear() {utils.setSelectDate(state.selectDate.useYear(state.selectDate.year + 1));},
+      /*上一月*/
+      prevMonth() {utils.setSelectDate(state.selectDate.useMonthDate(state.selectDate.month - 1, 1));},
+      /*下一月*/
+      nextMonth() {utils.setSelectDate(state.selectDate.useMonthDate(state.selectDate.month + 1, 1));},
+      /*切换视图*/
+      changeView: (view: eDateView) => {
+        if (view === viewModel.value) return;
+        const oldSeq = eDateViewSeq[viewModel.value];
+        const newSeq = eDateViewSeq[view];
+        state.slide = newSeq > oldSeq ? eSlideTransitionDirection.next : eSlideTransitionDirection.prev;
+        viewModel.value = view;
+      },
+    };
+
+    const externalHandler = {
+      onSelectMonthChange: (val: string) => {
+        utils.setSelectDate(state.selectDate.useValue(val));
+        methods.changeView(eDateView.date);
+      },
+      onSelectTime: (val: string) => {
+        if (!!parent) {return emit.onSelectTime(val);}
+        const timePd = defaultTimePd.value.useValue(val);
+        let vpd = state.pd.vpd as PDate | undefined || today;
+        vpd = vpd.useHms(timePd);
+        model.value = vpd.getValue();
+        emit.onSelectTime(val);
+      },
+      onClick: (did: DateItemData) => {
+        if (!!parent) {return emit.onClick(did);}
+        handler.onClick(did);
+      },
+      onMouseenter: (did: DateItemData) => {
+        if (!!parent) {return emit.onMouseenter(did);}
+        handler.onMouseenter(did);
+      },
+    };
+
+    const render = {
+      date: () => {
+        return DatePanelWrapper({
+          key: 'date',
+          className: getComponentCls("date-base-panel-date"),
+          left: (<>
+            <Button icon="pi-double-left" mode="text" size={ThemeSize.mini} onClick={methods.prevYear}/>
+            <Button icon="pi-left" mode="text" size={ThemeSize.mini} onClick={methods.prevMonth}/>
+          </>),
+          center: (<>
+            <span onClick={() => methods.changeView(eDateView.year)}>{state.selectDate.year}</span>
+            -
+            <span onClick={() => methods.changeView(eDateView.month)}>{zeroize(state.selectDate.month! + 1)}</span>
+            {!!props.datetime && (
+              <span className="date-base-panel-date-time-label" onClick={() => methods.changeView(eDateView.time)}>
+                {timeAttrs.value.modelValue}
+              </span>
+            )}
+          </>),
+          right: (<>
+            <Button icon="pi-right" mode="text" size={ThemeSize.mini} onClick={methods.nextMonth}/>
+            <Button icon="pi-double-right" mode="text" size={ThemeSize.mini} onClick={methods.nextYear}/>
+          </>),
+          content: (<>
+            <ul className="date-base-panel-date-week-list">
+              {weekList.value.map(item => (
+                <li className="date-base-panel-item date-base-panel-date-week-item" key={item}>
+                  <div><span>{item}</span></div>
+                </li>
+              ))}
+            </ul>
+            <ul className="date-base-panel-date-list" {...createEventListener({ onMouseLeave: emit.onMouseleaveDateList })}>
+              {dateList.value.map((item, index) => (
+                DatePanelItemWrapper({
+                  item,
+                  onClick: externalHandler.onClick,
+                  onMouseEnter: externalHandler.onMouseenter,
+                  Node: <div
+                    {...{
+                      // tag: 'li',
+                      className: classnames(['date-base-panel-date-item', { 'date-base-panel-date-item-other-month': !item.externals.isSelectMonth, }]),
+                      key: item.externals.isSelectMonth ? item.pd.date : `_${index}`,
+                    }}
+                  />,
+                })
+              ))}
+            </ul>
+          </>),
+        });
+      },
+      month: () => {
+        return <DatePanelMonth {...monthAttrs.value} direction="horizontal" key={viewModel.value}/>;
+      },
+      time: () => {
+        return DatePanelWrapper({
+          key: 'time',
+          className: 'date-base-panel-time',
+          center: (<>
+            <span onClick={() => methods.changeView(eDateView.date)}>
+              {showTimePd.value.year}-{zeroize(showTimePd.value.month! + 1)}-{zeroize(showTimePd.value.date!)}
+            </span>
+          </>),
+          content: <TimePanel {...timeAttrs.value}/>,
+        });
+      },
+    };
+
+    return {
+      render: () => (
+        <div className={`${getComponentCls("date-base-panel-date-wrapper")} ${getComponentCls("date-base-panel")}`}>
+          {/*<Transition name={getComponentCls(`transition-slide-${state.slide}`)}>*/}
+          {render[viewModel.value === eDateView.year ? eDateView.month : viewModel.value]()}
+          {/*</Transition>*/}
+        </div>
+      )
+    };
+  },
+});