plain-design 0.0.97 → 1.0.0-beta.2

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

@@ -0,0 +1,618 @@
+/**
+ * 日期子组件注入父组件提供的值的时候的唯一标识
+ * @author  韦胜健
+ * @date    2020/12/7 20:43
+ */
+import {PDate, plainDate} from "../../../utils/plainDate";
+import {DateItemData, DefaultDateFormatString, eDateEmitRangeType, eDateView, eSlideTransitionDirection, tDatePublicPropsType} from "../date.utils";
+import {computed, inject, provide, reactive, useModel, watch} from "plain-design-composition";
+import {toArray} from "plain-utils/utils/toArray";
+
+export const DATE_PANEL_PROVIDER = '@@DATE_PANEL_PROVIDER';
+
+/**
+ * 判断对比类型
+ * @author  韦胜健
+ * @date    2021/1/19 9:22
+ */
+export enum UseDateJudgementView {
+  'Y' = 'Y',
+  'YM' = 'YM',
+  'YMD' = 'YMD',
+}
+
+/**
+ * 日期的自定义状态
+ * @author  韦胜健
+ * @date    2022/12/12 11:02
+ */
+type DateCustomStatus = {
+  active: () => PDate[],
+  disabled: () => { max: PDate | null, min: PDate | null },
+  start: () => PDate[],
+  end: () => PDate[],
+  hover: () => [PDate, PDate][],
+  tempStart: () => PDate[],
+  tempEnd: () => PDate[],
+  tempHover: () => [PDate, PDate][],
+}
+
+/**
+ * 顶层父面板向下提供的数据
+ * @author  韦胜健
+ * @date    2021/1/19 9:23
+ */
+type UseDateTopState = {
+  max: PDate | null,
+  min: PDate | null,
+  vpd: PDate | PDate[] | null,
+  range: {
+    hover: null | [PDate, PDate],
+    value: null | [PDate, PDate],
+    temp: null | [PDate, PDate]
+  },
+  isRange: boolean,
+  customStatus?: DateCustomStatus,
+}
+
+/**
+ * 面板派发的时间类型
+ * @author  韦胜健
+ * @date    2022/12/12 11:03
+ */
+export type UseDateEmit = {
+  onUpdateModelValue: (val?: string | string[], rangeType?: eDateEmitRangeType) => void,
+  onUpdateStart: (val?: string) => void,
+  onUpdateEnd: (val?: string) => void,
+  onUpdateView: (val: eDateView) => void,
+  onReady: (val: UseDateType) => void,
+}
+
+/**
+ * useDate得到的数据对象
+ * @author  韦胜健
+ * @date    2021/1/19 9:23
+ */
+export type UseDateType = {
+  parent: UseDateType | null,               /*父面板*/
+  jdView: UseDateJudgementView,             /*判断大小的单位*/
+  today: PDate,                             /*今天日期*/
+  displayFormat: string,                    /*显示格式化字符串*/
+  valueFormat: string,                      /*值格式化字符串*/
+
+  model: { value?: string | string[] },     /*绑定单值或者多值*/
+  startModel: { value?: string },           /*绑定范围选择开始值*/
+  endModel: { value?: string },             /*绑定范围选择结束值*/
+  viewModel: { value: eDateView },          /*绑定视图*/
+
+  /*内部状态*/
+  state: {
+    pd: {
+      vpd: null | PDate | PDate[],          /*绑定值格式化为PDate*/
+      spd: null | PDate,                    /*开始值格式化为PDate*/
+      epd: null | PDate,                    /*结束值格式化为PDate*/
+    },
+    selectDate: PDate,                      /*面板日期PDate*/
+    range: {
+      hover: null | [PDate, PDate],         /*范围选择时hover的PDate*/
+      value: null | [PDate, PDate],         /*范围选择时开始结束的PDate*/
+    },
+    slide: eSlideTransitionDirection,       /*切换的动画方向*/
+    topState: UseDateTopState,              /*顶层面板状态*/
+  },
+
+  setSelectDate: (pd: PDate) => void,       /*设置面板日期*/
+
+  /*获取日期的状态*/
+  getStatus: (pd: PDate) => {
+    now: boolean,                           /*是否为当前*/
+    disabled: boolean,                      /*是否为禁用*/
+    active: boolean,                        /*是否为激活*/
+    start: boolean,                         /*是否为开始日期*/
+    end: boolean,                           /*是否为结束日期*/
+    hover: boolean,                         /*是否处于范围选择（未确定）*/
+    range: boolean,                         /*是否处于范围选择（确定）*/
+    clickable: boolean,                     /*是否可点击*/
+    tempStart: boolean,                     /*是否为暂定开始日期*/
+    tempEnd: boolean,                       /*是否为暂定结束日期*/
+    tempHover: boolean,                     /*是否为暂定开始结束日期之间范围的日期*/
+  },
+  handler: {
+    onClick: (did: DateItemData) => void,       /*处理点击动作*/
+    onMouseenter: (did: DateItemData) => void,  /*处理鼠标进入动作*/
+  },
+}
+
+export function useDatePanel(
+  {
+    props,
+    jdView,
+    getSlide,
+    processPd,
+    emit,
+    customStatus,
+  }: {
+    props: tDatePublicPropsType,                                        /*面板日期属性*/
+    jdView: UseDateJudgementView,                                       /*面板判断大小单位*/
+    getSlide?: (pd: PDate) => eSlideTransitionDirection,                /*当前的动画滑动方向*/
+    /*process 不能处理多选的情况*/
+    processPd?: {
+      value?: (vpd: PDate) => PDate,                                    /*预处理单个PDate*/
+      range?: (spd: PDate, vpd: PDate) => { spd: PDate, epd: PDate },   /*预处理范围PDate*/
+    },
+    emit: UseDateEmit,                                                  /*派发事件*/
+    customStatus?: DateCustomStatus,                                    /*自定义的状态*/
+  }): UseDateType {
+
+  const defaultFormat = (() => {
+    if (jdView === UseDateJudgementView.Y) return DefaultDateFormatString.year;
+    if (jdView === UseDateJudgementView.YM) return DefaultDateFormatString.month;
+    if (jdView === UseDateJudgementView.YMD) return props.datetime ? DefaultDateFormatString.datetime : DefaultDateFormatString.date;
+  })();
+  const displayFormat = props.displayFormat || defaultFormat!;
+  const valueFormat = props.valueFormat || defaultFormat!;
+  const createPlainDate = (val: string) => plainDate(val, { displayFormat, valueFormat });
+
+  /**
+   * 顶层父面板
+   * @author  韦胜健
+   * @date    2020/12/7 20:48
+   */
+  const parent = inject<UseDateType | null>(DATE_PANEL_PROVIDER, null);
+
+  const today = plainDate.today(displayFormat, valueFormat);
+  const model = useModel(() => props.modelValue, emit.onUpdateModelValue, {
+    onChange: (val) => {
+      if (!!props.selectDate) {return;}
+      let pd: PDate;
+      if (!props.multiple) {
+        const value = val as string | undefined;
+        pd = !value ? today : today.useValue(value);
+      } else {
+        const value = val as string[] | undefined;
+        pd = !value || value.length === 0 ? today : today.useValue(value[0]);
+      }
+      !!getSlide && (state.slide = getSlide(pd));
+      useDateData.setSelectDate(pd);
+    }
+  });
+  const startModel = (!props.range || !!parent) ? model as { value?: string } : useModel(() => props.start, emit.onUpdateStart, {
+    onChange: (val) => {
+      if (!!props.selectDate) {return;}
+      const spd = !val ? null : today.useValue(val);
+      const epd = state.pd.epd;
+      state.range = {
+        hover: null,
+        value: !!spd && !!epd ? [spd, epd] : null,
+        temp: null,
+      };
+      !!getSlide && (state.slide = getSlide(spd || today));
+      useDateData.setSelectDate(spd || today);
+    }
+  });
+  const endModel = (!props.range || !!parent) ? model as { value?: string } : useModel(() => props.end, emit.onUpdateEnd, {
+    onChange: (val) => {
+      const spd = state.pd.spd;
+      const epd = !val ? null : today.useValue(val);
+      state.range = {
+        hover: null,
+        value: !!spd && !!epd ? [spd, epd] : null,
+        temp: null,
+      };
+    },
+  });
+  const viewModel = useModel(() => props.view, emit.onUpdateView);
+
+  const pd = computed(() => {
+    let vpd: null | PDate | PDate[];
+    if (!props.multiple) {
+      vpd = !model.value ? null : createPlainDate(model.value as string);
+    } else {
+      vpd = !model.value ? null : (model.value as string[]).map(item => createPlainDate(item));
+    }
+    return {
+      vpd,
+      spd: (!props.range || !!parent) ? null : (!startModel.value ? null : createPlainDate(startModel.value)),
+      epd: (!props.range || !!parent) ? null : (!endModel.value ? null : createPlainDate(endModel.value)),
+    };
+  });
+
+  const state = reactive({
+    pd,
+    selectDate: (() => {
+      let selectDate = props.selectDate;
+      if (!selectDate) {
+        const { vpd, spd } = pd.value;
+        if (!props.range) {
+          if (!props.multiple) {
+            const pd = vpd as PDate | null;
+            selectDate = pd || today;
+          } else {
+            const pd = vpd as PDate[] | null;
+            selectDate = (!!pd && pd.length > 0) ? pd[0] : today;
+          }
+        } else {
+          selectDate = spd || today;
+        }
+      }
+      if (!!props.selectDate) {
+        watch(() => props.selectDate, pd => {
+          if (!pd) {return;}// 肯定会有值
+          !!getSlide && (state.slide = getSlide(pd!));
+          useDateData.setSelectDate(pd!);
+        });
+      }
+      return selectDate;
+    })(),
+    range: (() => {
+      const { spd, epd } = pd.value;
+      return {
+        hover: null as null | [PDate, PDate],
+        value: (!!spd && !!epd) ? [spd, epd] as [PDate, PDate] : null,
+        temp: null as null | [PDate, PDate],
+      };
+    })(),
+    slide: eSlideTransitionDirection.next,
+    topState: computed((): UseDateTopState => {
+      if (!!parent) {
+        return parent.state.topState;
+      }
+      const { vpd } = pd.value;
+      return {
+        max: !props.max ? null : createPlainDate(props.max),
+        min: !props.min ? null : createPlainDate(props.min),
+        vpd,
+        range: state.range,
+        isRange: props.range,
+        customStatus,
+      };
+    }),
+  });
+
+  const handler = {
+    onClick: (did: DateItemData) => {
+      if (!parent) {
+        /*
+        *  没有父面板，表明当前面板为顶层面板
+        */
+        if (props.multiple) {
+          const display = did.pd.getValue();
+          /*
+          *  多选
+          */
+          let value = model.value as string[] | undefined;
+          if (!value || value.length === 0) {
+            value = [display];
+          } else {
+            const existIndex = value.findIndex((item) => item === display);
+            if (existIndex > -1) {
+              value.splice(existIndex, 1);
+            } else {
+              value.unshift(display);
+            }
+          }
+          model.value = [...value];
+        } else {
+          /*
+          *  非多选
+          */
+          if (!props.range) {
+            /*
+            *  单选
+            */
+            let { pd } = did;
+            if (!!processPd && !!processPd.value) pd = processPd.value(pd);
+            model.value = pd.getValue();
+          } else {
+            /*
+            *  范围选择
+            */
+            if (!state.range.hover) {
+              const { pd } = did;
+              let temp: null | [PDate, PDate] = !state.range.value ? null : [...state.range.value];
+
+              /*当前已经有范围值，重新选开始或者结束时间*/
+              if (!!temp) {
+                if (props.focusRangeType === eDateEmitRangeType.start) {
+                  /*重新选开始时间*/
+                  let [spd, epd] = temp;
+                  if (pd[jdView] <= epd[jdView]) {
+                    /*重选的开始时间合法*/
+                    spd = pd;
+                    if (!!processPd && !!processPd.range) {
+                      const data = processPd.range(spd, epd);
+                      spd = data.spd;
+                      epd = data.epd;
+                    }
+                    temp = [spd, epd];
+                    startModel.value = spd.getValue();
+                    emit.onUpdateModelValue(startModel.value, eDateEmitRangeType.start);
+                    state.range = {
+                      hover: [pd, pd],
+                      value: [...temp],
+                      temp,
+                    };
+                  } else {
+                    /*重选的开始时间不合法，走默认处理*/
+                    temp = null;
+                  }
+                } else if (props.focusRangeType === eDateEmitRangeType.end) {
+                  /*重新选结束时间*/
+                  let [spd, epd] = temp;
+                  if (pd[jdView] >= spd[jdView]) {
+                    /*重选的结束时间合法*/
+                    epd = pd;
+                    if (!!processPd && !!processPd.range) {
+                      const data = processPd.range(spd, epd);
+                      spd = data.spd;
+                      epd = data.epd;
+                    }
+                    temp = [spd, epd];
+                    endModel.value = epd.getValue();
+                    emit.onUpdateModelValue(endModel.value, eDateEmitRangeType.end);
+                    state.range = {
+                      hover: [pd, pd],
+                      value: [...temp],
+                      temp,
+                    };
+                  } else {
+                    /*重选的开始时间不合法，走默认处理*/
+                    temp = null;
+                  }
+                } else {
+                  /*do nothing*/
+                }
+              }
+
+              /*默认处理*/
+              state.range = {
+                hover: [pd, pd],
+                value: [pd, pd],
+                temp,
+              };
+            } else {
+              let [spd, epd] = state.range.hover;
+              if (!!processPd && !!processPd.range) {
+                const data = processPd.range(spd, epd);
+                spd = data.spd;
+                epd = data.epd;
+              }
+              startModel.value = spd.getValue();
+              endModel.value = epd.getValue();
+              state.range = {
+                hover: null,
+                value: [spd, epd],
+                temp: null,
+              };
+              emit.onUpdateModelValue(startModel.value, eDateEmitRangeType.start);
+              emit.onUpdateModelValue(endModel.value, eDateEmitRangeType.end);
+            }
+          }
+        }
+      } else {
+        let { pd } = did;
+        if (!!processPd && !!processPd.value) pd = processPd.value(pd);
+        model.value = pd.getValue();
+      }
+    },
+    onMouseenter: (did: DateItemData) => {
+      if (!!parent) {
+        return;
+      }
+      if (!!state.range.hover) {
+        const { pd } = did;
+        const mid = state.range.value![0]!;
+        state.range.hover = mid[jdView] > pd[jdView] ? [pd, mid] : [mid, pd];
+      }
+    },
+  };
+
+  const utils = {
+    /**
+     * 节点是否激活
+     * @author  韦胜健
+     * @date    2022/12/12 11:18
+     */
+    active: (pd: PDate): boolean => {
+      const { isRange, vpd, range } = state.topState;
+      let condition: PDate[] = [];
+      if (!!state.topState.customStatus && state.topState.customStatus.active) {
+        /*如果有顶层节点的customStatus.active控制，则使用顶层节点的控制*/
+        condition = state.topState.customStatus.active();
+      } else {
+        if (!isRange) {
+          /*不是范围选择，单选或者多选的每个日期都激活*/
+          if (!!vpd) {condition = toArray(vpd);}
+        } else {
+          /*是范围选择，只有开始日期和结束日期激活*/
+          if (!!range.value) {condition = [range.value[0], range.value[1]];}
+        }
+      }
+      /*判断当前节点是否处于激活的日期范围内*/
+      return !!condition.find(item => item[jdView] === pd[jdView]);
+    },
+    /**
+     * 节点是否禁用
+     * @author  韦胜健
+     * @date    2022/12/12 11:21
+     */
+    disabled: (pd: PDate): boolean => {
+      const { max, min } = (!!state.topState.customStatus && !!state.topState.customStatus.disabled) ? state.topState.customStatus.disabled() : state.topState;
+      if (!!max && max[jdView] < pd[jdView]) return true;
+      if (!!min && min[jdView] > pd[jdView]) return true;
+      if (!!props.isItemDisabled && props.isItemDisabled(pd, jdView)) {return true;}
+      return false;
+    },
+    /**
+     * 节点是否为开始节点
+     * @author  韦胜健
+     * @date    2022/12/12 11:21
+     */
+    start: (pd: PDate) => {
+      const { isRange, range: { hover, value } } = state.topState;
+      let condition: PDate[] = [];
+      if (!!state.topState.customStatus && !!state.topState.customStatus.start) {
+        /*如果有顶层节点的customStatus.start控制，则使用顶层节点的控制*/
+        condition = state.topState.customStatus.start();
+      } else {
+        /*只有范围选择才会有start节点*/
+        if (!!isRange) {
+          /*优先启用hover节点*/
+          if (!!hover) condition.push(hover[0]);
+          /*次则启用value节点*/
+          else if (!!value) condition.push(value[0]);
+        }
+      }
+      /*判断节点是否为开始的日期范围内*/
+      return condition.some(item => item[jdView] === pd[jdView]);
+    },
+    /**
+     * 节点是否为结束节点
+     * @author  韦胜健
+     * @date    2022/12/12 11:24
+     */
+    end: (pd: PDate) => {
+      const { isRange, range: { hover, value } } = state.topState;
+      let condition: PDate[] = [];
+      if (!!state.topState.customStatus && !!state.topState.customStatus.end) {
+        /*如果有顶层节点的customStatus.end控制，则使用顶层节点的控制*/
+        condition = state.topState.customStatus.end();
+      } else {
+        /*只有范围选择才会有end节点*/
+        if (!!isRange) {
+          /*优先启用hover节点*/
+          if (!!hover) condition.push(hover[1]);
+          /*次则启用value节点*/
+          else if (!!value) condition.push(value[1]);
+        }
+      }
+      /*判断节点是否为结束的日期范围内*/
+      return condition.some(item => item[jdView] === pd[jdView]);
+    },
+    /**
+     * 节点是否为hover的节点
+     * @author  韦胜健
+     * @date    2022/12/12 11:25
+     */
+    hover: (pd: PDate) => {
+      const { isRange, range: { hover, value } } = state.topState;
+      let condition: [PDate, PDate][] = [];
+      if (!!state.topState.customStatus && !!state.topState.customStatus.hover) {
+        /*如果有顶层节点的customStatus.hover控制，则使用顶层节点的控制*/
+        condition = state.topState.customStatus.hover();
+      } else {
+        /*只有范围选择才会有hover节点*/
+        if (!!isRange) {
+          if (!!hover || !!value) {
+            condition.push((hover || value)!);
+          }
+        }
+      }
+      return condition.some(([spd, epd]) => (spd[jdView] < pd[jdView] && epd[jdView] > pd[jdView]));
+    },
+    /**
+     * 是否为暂定开始日期
+     * @author  韦胜健
+     * @date    2022/12/12 11:29
+     */
+    tempStart: (pd: PDate) => {
+      const { isRange, range: { temp } } = state.topState;
+      let condition: PDate[] = [];
+      if (!!state.topState.customStatus && !!state.topState.customStatus.tempStart) {
+        /*如果有顶层节点的customStatus.tempStart控制，则使用顶层节点的控制*/
+        condition = state.topState.customStatus.tempStart();
+      } else {
+        /*只有范围选择才会有暂定start节点*/
+        if (!!isRange) {
+          /*优先启用hover节点*/
+          if (!!temp) condition.push(temp[0]);
+        }
+      }
+      /*判断节点是否为开始的日期范围内*/
+      return condition.some(item => item[jdView] === pd[jdView]);
+    },
+    /**
+     * 是否为暂定结束日期
+     * @author  韦胜健
+     * @date    2022/12/12 11:29
+     */
+    tempEnd: (pd: PDate) => {
+      const { isRange, range: { temp } } = state.topState;
+      let condition: PDate[] = [];
+      if (!!state.topState.customStatus && !!state.topState.customStatus.tempEnd) {
+        /*如果有顶层节点的customStatus.tempEnd控制，则使用顶层节点的控制*/
+        condition = state.topState.customStatus.tempEnd();
+      } else {
+        /*只有范围选择才会有end节点*/
+        if (!!isRange) {
+          /*优先启用hover节点*/
+          if (!!temp) condition.push(temp[1]);
+        }
+      }
+      /*判断节点是否为结束的日期范围内*/
+      return condition.some(item => item[jdView] === pd[jdView]);
+    },
+    /**
+     * 是否为暂定开始结束日期之间范围的日期
+     * @author  韦胜健
+     * @date    2022/12/12 11:29
+     */
+    tempHover: (pd: PDate) => {
+      const { isRange, range: { temp } } = state.topState;
+      let condition: [PDate, PDate][] = [];
+      if (!!state.topState.customStatus && !!state.topState.customStatus.tempHover) {
+        /*如果有顶层节点的customStatus.tempHover控制，则使用顶层节点的控制*/
+        condition = state.topState.customStatus.tempHover();
+      } else {
+        /*只有范围选择才会有hover节点*/
+        if (!!isRange) {
+          if (!!temp) {
+            condition.push(temp);
+          }
+        }
+      }
+      return condition.some(([spd, epd]) => (spd[jdView] < pd[jdView] && epd[jdView] > pd[jdView]));
+    },
+  };
+
+  const useDateData: UseDateType = {
+    parent,
+    jdView,
+    state,
+    today,
+    displayFormat,
+    valueFormat,
+
+    model,
+    startModel,
+    endModel,
+    viewModel,
+
+    setSelectDate: (pd) => state.selectDate = pd || today,
+    getStatus: (pd) => {
+      const disabled = utils.disabled(pd);
+      return {
+        now: today[jdView] === pd[jdView],
+        active: utils.active(pd),
+        disabled,
+        start: utils.start(pd),
+        end: utils.end(pd),
+        hover: utils.hover(pd),
+        range: !!state.topState.range,
+        clickable: (!!parent && parent.jdView !== jdView) || !disabled,
+        tempStart: utils.tempStart(pd),
+        tempEnd: utils.tempEnd(pd),
+        tempHover: utils.tempHover(pd),
+      };
+    },
+    handler,
+  };
+
+  /*只有最顶层日期组件才有资格控制子组件*/
+  if (!parent) {
+    provide(DATE_PANEL_PROVIDER, useDateData);
+    emit.onReady(useDateData);
+  }
+
+  return useDateData;
+}