@yoka-ui/ui 1.0.1

package/dist/es/components/YkRangeDateWithVS/YkRangeDateWithVSRange.js

@@ -0,0 +1,576 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/components/YkRangeDateWithVS/YkRangeDateWithVSRange.tsx
+import { Anchor, ConfigProvider, DatePicker, Flex, Popover, Tooltip, theme } from "antd";
+import classNames from "classnames";
+import dayjs from "dayjs";
+import { findIndex, isEqual } from "lodash";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import styles from "./styles";
+var itemCheckIconClass = (className) => {
+  return classNames("iconfont", className, styles.active);
+};
+var past = (n, picker, today = false) => [dayjs().subtract(n, picker).startOf(picker), today ? dayjs() : dayjs().subtract(n, picker).endOf(picker)];
+var dateOptions = [
+  { label: "今天", value: () => past(0, "day", true) },
+  { label: "昨天", value: () => past(1, "day") },
+  { label: "本周", value: () => past(0, "week", true) },
+  { label: "上周", value: () => past(1, "week") },
+  { label: "本月", value: () => past(0, "month", true) },
+  { label: "上月", value: () => past(1, "month") },
+  { label: "今年", value: () => past(0, "year", true) },
+  { label: "去年", value: () => past(1, "year") },
+  { label: "近7天", value: () => past(6, "day", true) },
+  { label: "近14天", value: () => past(13, "day", true) },
+  { label: "近30天", value: () => past(29, "day", true) },
+  { label: "近60天", value: () => past(59, "day", true) },
+  { label: "近90天", value: () => past(89, "day", true) },
+  { label: "近180天", value: () => past(179, "day", true) },
+  {
+    label: "前7天",
+    value: () => [dayjs().subtract(7, "day").startOf("day"), dayjs().subtract(1, "day").endOf("day")]
+  },
+  {
+    label: "前14天",
+    value: () => [dayjs().subtract(14, "day").startOf("day"), dayjs().subtract(1, "day").endOf("day")]
+  },
+  {
+    label: "前30天",
+    value: () => [dayjs().subtract(30, "day").startOf("day"), dayjs().subtract(1, "day").endOf("day")]
+  },
+  {
+    label: "前60天",
+    value: () => [dayjs().subtract(60, "day").startOf("day"), dayjs().subtract(1, "day").endOf("day")]
+  }
+];
+var weekOptions = [
+  { label: "本周", value: () => past(0, "week", true) },
+  { label: "上周", value: () => past(1, "week") },
+  { label: "近3周", value: () => past(2, "week", true) },
+  { label: "近4周", value: () => past(3, "week", true) },
+  { label: "近5周", value: () => past(4, "week", true) },
+  { label: "近6周", value: () => past(5, "week", true) },
+  { label: "近7周", value: () => past(6, "week", true) },
+  { label: "近14周", value: () => past(13, "week", true) },
+  { label: "近30周", value: () => past(29, "week", true) },
+  { label: "近60周", value: () => past(59, "week", true) },
+  {
+    label: "前2周",
+    value: () => [dayjs().subtract(2, "week").startOf("week"), dayjs().subtract(1, "week").endOf("week")]
+  },
+  {
+    label: "前3周",
+    value: () => [dayjs().subtract(3, "week").startOf("week"), dayjs().subtract(1, "week").endOf("week")]
+  },
+  {
+    label: "前4周",
+    value: () => [dayjs().subtract(4, "week").startOf("week"), dayjs().subtract(1, "week").endOf("week")]
+  },
+  {
+    label: "前5周",
+    value: () => [dayjs().subtract(5, "week").startOf("week"), dayjs().subtract(1, "week").endOf("week")]
+  }
+];
+var monthOptions = [
+  { label: "本月", value: () => past(0, "month", true) },
+  { label: "上月", value: () => past(1, "month") },
+  { label: "今年", value: () => past(0, "year", true) },
+  { label: "去年", value: () => past(1, "year") },
+  { label: "近3月", value: () => past(2, "month", true) },
+  { label: "近4月", value: () => past(3, "month", true) },
+  { label: "近5月", value: () => past(4, "month", true) },
+  { label: "近6月", value: () => past(5, "month", true) },
+  { label: "近7月", value: () => past(6, "month", true) },
+  { label: "近8月", value: () => past(7, "month", true) },
+  { label: "近9月", value: () => past(8, "month", true) },
+  { label: "近10月", value: () => past(9, "month", true) },
+  { label: "近11月", value: () => past(10, "month", true) },
+  { label: "近12月", value: () => past(11, "month", true) },
+  {
+    label: "前2月",
+    value: () => [dayjs().subtract(2, "month").startOf("month"), dayjs().subtract(1, "month").endOf("month")]
+  },
+  {
+    label: "前3月",
+    value: () => [dayjs().subtract(3, "month").startOf("month"), dayjs().subtract(1, "month").endOf("month")]
+  },
+  {
+    label: "前4月",
+    value: () => [dayjs().subtract(4, "month").startOf("month"), dayjs().subtract(1, "month").endOf("month")]
+  },
+  {
+    label: "前5月",
+    value: () => [dayjs().subtract(5, "month").startOf("month"), dayjs().subtract(1, "month").endOf("month")]
+  },
+  {
+    label: "前6月",
+    value: () => [dayjs().subtract(6, "month").startOf("month"), dayjs().subtract(1, "month").endOf("month")]
+  },
+  {
+    label: "前7月",
+    value: () => [dayjs().subtract(7, "month").startOf("month"), dayjs().subtract(1, "month").endOf("month")]
+  },
+  {
+    label: "前8月",
+    value: () => [dayjs().subtract(8, "month").startOf("month"), dayjs().subtract(1, "month").endOf("month")]
+  },
+  {
+    label: "前9月",
+    value: () => [dayjs().subtract(9, "month").startOf("month"), dayjs().subtract(1, "month").endOf("month")]
+  },
+  {
+    label: "前10月",
+    value: () => [dayjs().subtract(10, "month").startOf("month"), dayjs().subtract(1, "month").endOf("month")]
+  },
+  {
+    label: "前11月",
+    value: () => [dayjs().subtract(11, "month").startOf("month"), dayjs().subtract(1, "month").endOf("month")]
+  },
+  {
+    label: "前12月",
+    value: () => [dayjs().subtract(12, "month").startOf("month"), dayjs().subtract(1, "month").endOf("month")]
+  }
+];
+var startWeekOption = [
+  { label: "近7天", value: () => past(6, "day", true) },
+  { label: "近14天", value: () => past(13, "day", true) },
+  { label: "近21天", value: () => past(20, "day", true) },
+  { label: "近28天", value: () => past(27, "day", true) },
+  { label: "近98天", value: () => past(97, "day", true) },
+  { label: "近210天", value: () => past(209, "day", true) }
+];
+var startMonthOption = [
+  { label: "近30天", value: () => past(29, "day", true) },
+  { label: "近60天", value: () => past(59, "day", true) },
+  { label: "近90天", value: () => past(89, "day", true) },
+  { label: "近120天", value: () => past(119, "day", true) },
+  { label: "近150天", value: () => past(149, "day", true) },
+  { label: "近180天", value: () => past(179, "day", true) },
+  { label: "近210天", value: () => past(209, "day", true) },
+  { label: "近240天", value: () => past(239, "day", true) },
+  { label: "近270天", value: () => past(269, "day", true) },
+  { label: "近300天", value: () => past(299, "day", true) },
+  { label: "近330天", value: () => past(329, "day", true) },
+  { label: "近360天", value: () => past(359, "day", true) }
+];
+var pickerMap = {
+  按自然周: "week",
+  按自然月: "month",
+  按周: "week",
+  按月: "month"
+};
+var optionsMap = {
+  按日: { options: dateOptions, default: () => past(14, "day", true) },
+  按周: { options: weekOptions, default: () => past(13, "week", true) },
+  按月: { options: monthOptions, default: () => past(11, "month", true) },
+  按自然周: { options: weekOptions, default: () => past(13, "week", true) },
+  按自然月: { options: monthOptions, default: () => past(11, "month", true) },
+  按起始周: {
+    options: startWeekOption,
+    default: () => past(14 * 7 - 1, "day", true)
+  },
+  按起始月: {
+    options: startMonthOption,
+    default: () => past(12 * 30 - 1, "day", true)
+  }
+};
+var YkRangeDateWithVSRange = ({
+  timeType,
+  rangeDate,
+  timeOptions,
+  dateCompare,
+  getPopupContainer,
+  onChange,
+  disabledDate = void 0,
+  presetsOptions = void 0,
+  milestoneFilterType = 1,
+  milestone = [],
+  holidays = [],
+  rangeDisplayLabel
+}) => {
+  const { token } = theme.useToken();
+  const hasCustomRangeDisplay = rangeDisplayLabel != null;
+  const triggerWrapRef = useRef(null);
+  const [groupOpen, setGroupOpen] = useState(false);
+  const [isChange, setIsChange] = useState(false);
+  const filterType = milestoneFilterType;
+  const [cacheRangeDate, setCacheRangeDate] = useState([null, null]);
+  const [cacheTimeType, setCacheTimeType] = useState(timeType);
+  const [groupIndex, setGroupIndex] = useState(null);
+  const picker = cacheTimeType && pickerMap[cacheTimeType] ? pickerMap[cacheTimeType] : "date";
+  const options = presetsOptions ? presetsOptions : optionsMap[cacheTimeType] ? optionsMap[cacheTimeType].options : optionsMap["按日"].options;
+  const showProjectNode = useMemo(() => {
+    return !timeType.includes("周") && !timeType.includes("月") && !cacheTimeType.includes("周") && !cacheTimeType.includes("月") || cacheTimeType.includes("日");
+  }, [timeType, cacheTimeType]);
+  const timeOptionAnchors = (timeOptions == null ? void 0 : timeOptions.map((v) => {
+    return {
+      key: v,
+      title: v,
+      href: v
+    };
+  })) || [];
+  const initRangeDate = () => {
+    setCacheRangeDate(rangeDate);
+    setCacheTimeType(timeType);
+    setIsChange(false);
+  };
+  useEffect(() => {
+    if (groupOpen) {
+      setGroupIndex(
+        findIndex(options, (item) => {
+          var _a;
+          return isEqual(
+            (_a = item.value()) == null ? void 0 : _a.map((v) => v == null ? void 0 : v.format("YYYY-MM-DD")),
+            cacheRangeDate == null ? void 0 : cacheRangeDate.map((v) => v == null ? void 0 : v.format("YYYY-MM-DD"))
+          );
+        })
+      );
+    } else if (!isChange) {
+      initRangeDate();
+    }
+  }, [cacheTimeType, groupOpen]);
+  useEffect(() => {
+    initRangeDate();
+  }, [rangeDate, timeType]);
+  useEffect(() => {
+    if (!groupOpen)
+      return;
+    const onPointerDownCapture = (e) => {
+      var _a;
+      const el = e.target;
+      if (!(el instanceof Element))
+        return;
+      if ((_a = triggerWrapRef.current) == null ? void 0 : _a.contains(el))
+        return;
+      if (el.closest("[data-yk-range-date-with-vs-panel]"))
+        return;
+      if (styles.globalItemDatePanel && el.closest(`.${styles.globalItemDatePanel}`))
+        return;
+      setGroupOpen(false);
+    };
+    window.addEventListener("pointerdown", onPointerDownCapture, true);
+    return () => window.removeEventListener("pointerdown", onPointerDownCapture, true);
+  }, [groupOpen]);
+  const customFormat = (value) => {
+    return `${dayjs(value).format("YYYY-MM-DD")}`;
+  };
+  const milestoneSelected = (id) => {
+    var _a;
+    const dates = ((_a = milestone.find((m) => m.id === id)) == null ? void 0 : _a.range_day.map((m) => dayjs(m))) || [];
+    let [start, end] = dates;
+    if (end > dayjs().endOf("day"))
+      end = dayjs().endOf("day");
+    setIsChange(true);
+    setCacheRangeDate([start, end]);
+    onChange({
+      rangeDate: [start, end],
+      timeType: cacheTimeType
+    });
+    setGroupOpen(false);
+  };
+  const checkPresets = (v) => {
+    if (cacheRangeDate && dayjs(v[0]).format("YYYY-MM-DD") === dayjs(cacheRangeDate[0]).format("YYYY-MM-DD") && dayjs(v[1]).format("YYYY-MM-DD") === dayjs(cacheRangeDate[1]).format("YYYY-MM-DD")) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+  const popoverContent = (event) => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          height: 30,
+          lineHeight: "30px",
+          textAlign: "left",
+          color: "#666",
+          padding: "0 10px 0 10px",
+          fontSize: 12
+        }
+      },
+      event.tag + " " + (event.range_day[0] === event.range_day[1] ? event.range_day[0] : event.range_day.join(" ~ "))
+    );
+  };
+  const milestoneListFilter = milestone.filter((f) => f.type === filterType).filter((f) => dayjs(f.range_day[0]) <= dayjs().endOf("day")).filter((f) => dayjs(f.range_day[0]) >= dayjs().startOf("year").subtract(1, "year")).sort(
+    (a, b) => dayjs(b.range_day[0]).valueOf() - dayjs(a.range_day[0]).valueOf()
+  );
+  const milestoneList = /* @__PURE__ */ React.createElement("div", { className: styles.milestoneListBox }, milestoneListFilter.map((v) => {
+    return /* @__PURE__ */ React.createElement(
+      Popover,
+      {
+        key: v.id,
+        trigger: "hover",
+        placement: "right",
+        zIndex: token.zIndexPopupBase + 120,
+        getPopupContainer: () => document.body,
+        styles: {
+          root: {
+            // width: 200,
+          },
+          body: {
+            borderRadius: 2,
+            padding: 0
+          }
+        },
+        content: popoverContent(v)
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          "data-track": true,
+          id: `milestoneListItem-${v.id}`,
+          key: v.id,
+          className: classNames(
+            styles.milestoneListItem,
+            checkPresets(v.range_day.map((m) => dayjs(m))) && styles.milestoneListActive
+          ),
+          style: {
+            textAlign: "left",
+            padding: "0 10px",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          },
+          onClick: () => {
+            milestoneSelected(v.id);
+          }
+        },
+        v.tag
+      )
+    );
+  }));
+  const dateGourpRender = (panelNode) => {
+    return /* @__PURE__ */ React.createElement("div", { "data-yk-range-date-with-vs-panel": true }, dateCompare && /* @__PURE__ */ React.createElement("div", { className: styles.ykRangeDateWithVsHeader }, /* @__PURE__ */ React.createElement(
+      Anchor,
+      {
+        className: styles.ykRangeDateWithVsHeaderAnchor,
+        direction: "horizontal",
+        items: timeOptionAnchors,
+        getCurrentAnchor: () => cacheTimeType,
+        onClick: (event, link) => {
+          event.preventDefault();
+          event.stopPropagation();
+          setCacheTimeType(link.href);
+          const defaultFn = optionsMap[link.href] ? optionsMap[link.href].default : optionsMap["按日"].default;
+          setCacheRangeDate(defaultFn());
+        }
+      }
+    )), /* @__PURE__ */ React.createElement(Flex, null, milestoneListFilter && milestoneListFilter.length > 0 && showProjectNode ? /* @__PURE__ */ React.createElement("div", { className: classNames(styles.milestoneList, "scroll-reset") }, milestoneList) : null, /* @__PURE__ */ React.createElement("div", { className: styles.ykRangeDateWithVsGroup }, /* @__PURE__ */ React.createElement("div", { className: styles.ykRangeDateWithVsPanel }, panelNode))));
+  };
+  let hasSelect = false;
+  if (milestoneListFilter && milestoneListFilter.length > 0) {
+    milestoneListFilter.forEach((item) => {
+      if (checkPresets(item.range_day.map((m) => dayjs(m))) && picker === "date" && showProjectNode) {
+        hasSelect = true;
+      }
+    });
+  }
+  const presetsNode = options.map((v, i) => {
+    return {
+      label: /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(
+            "ant-picker-presets-li",
+            groupIndex === i && !hasSelect && "ant-picker-presets-li-item"
+          ),
+          onClick: () => {
+            setGroupIndex(i);
+          }
+        },
+        v.label
+      ),
+      value: v.value
+    };
+  });
+  const resolvePopupContainer = getPopupContainer != null ? getPopupContainer : () => document.body;
+  const dateTags = (milestoneListFilter || []).concat(holidays || []).map((m) => {
+    return __spreadProps(__spreadValues({}, m), {
+      date: m.range_day[0]
+    });
+  });
+  const dateTagsMap = {};
+  dateTags.forEach((m) => {
+    if (dateTagsMap[m.date]) {
+      dateTagsMap[m.date].push(m);
+    } else {
+      dateTagsMap[m.date] = [m];
+    }
+  });
+  const eventsTooltips = (date) => {
+    const dateStr = dayjs(date).format("YYYY-MM-DD");
+    const tags = dateTagsMap[dateStr] || [];
+    const lastTag = tags.length > 0 ? tags.reduce(
+      (prev, curr) => dayjs(prev.created_at).isAfter(dayjs(curr.created_at)) ? prev : curr
+    ) : null;
+    return lastTag ? /* @__PURE__ */ React.createElement(
+      Tooltip,
+      {
+        placement: "right",
+        title: lastTag.tag + " " + (lastTag.range_day[0] === lastTag.range_day[1] ? lastTag.range_day[0] : lastTag.range_day.join(" ~ ")),
+        color: "#fff",
+        styles: {
+          root: {
+            maxWidth: 270
+          },
+          body: {
+            borderRadius: 2,
+            color: "#666"
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", { key: lastTag.id, className: styles.ykRangeDateWithVsTag }, lastTag.tag)
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+  };
+  const cellRender = (current, info) => {
+    if (info.type !== "date") {
+      return info.originNode;
+    }
+    if (typeof current === "number" || typeof current === "string") {
+      return /* @__PURE__ */ React.createElement("div", { className: "ant-picker-cell-inner" }, current);
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames("ant-picker-cell-inner"),
+        style: { width: 45, height: 40, lineHeight: holidays && holidays.length > 0 ? "26px" : "40px", fontSize: 12 }
+      },
+      current.date(),
+      holidays && holidays.length > 0 && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            bottom: 2,
+            height: 16,
+            width: "100%",
+            fontSize: "12px",
+            lineHeight: "16px",
+            whiteSpace: "nowrap"
+          }
+        },
+        eventsTooltips(current)
+      )
+    );
+  };
+  const rangePicker = /* @__PURE__ */ React.createElement(
+    DatePicker.RangePicker,
+    {
+      id: "ykRangeDateWithVsRange",
+      classNames: {
+        popup: {
+          root: styles.globalItemDatePanel
+        }
+      },
+      styles: {
+        root: {
+          opacity: hasCustomRangeDisplay ? 0 : 1
+        }
+      },
+      getPopupContainer: resolvePopupContainer,
+      disabledDate: disabledDate ? disabledDate : (current) => {
+        return current && current > dayjs().endOf("day");
+      },
+      inputReadOnly: hasCustomRangeDisplay,
+      open: groupOpen,
+      picker,
+      cellRender,
+      value: cacheRangeDate,
+      panelRender: dateGourpRender,
+      presets: presetsNode,
+      variant: "borderless",
+      allowClear: false,
+      format: customFormat,
+      showWeek: false,
+      separator: "~",
+      className: styles.globalItemDate,
+      suffixIcon: false,
+      onCalendarChange: (dates) => {
+        if (!dates)
+          return;
+        const [v0, v1] = dates;
+        setIsChange(true);
+        const start = v0 ? v0.startOf(picker) : null;
+        let end = null;
+        if (v1) {
+          const endRaw = v1.endOf(picker);
+          end = endRaw > dayjs() ? dayjs() : endRaw;
+        }
+        setCacheRangeDate([start, end]);
+      },
+      onChange: (val) => {
+        if (!val || !val[0] && !val[1]) {
+          setIsChange(true);
+          setCacheRangeDate([null, null]);
+          onChange({
+            rangeDate: [null, null],
+            timeType: cacheTimeType
+          });
+          return;
+        }
+        const [v0, v1] = val;
+        if (v0 && !v1) {
+          setIsChange(true);
+          setCacheRangeDate([v0.startOf(picker), null]);
+          return;
+        }
+        if (!v0 && v1) {
+          setIsChange(true);
+          const end2 = v1.endOf(picker) > dayjs() ? dayjs() : v1.endOf(picker);
+          setCacheRangeDate([null, end2]);
+          return;
+        }
+        const start = v0.startOf(picker);
+        const end = v1.endOf(picker) > dayjs() ? dayjs() : v1.endOf(picker);
+        setIsChange(true);
+        setCacheRangeDate([start, end]);
+        onChange({
+          rangeDate: [start, end],
+          timeType: cacheTimeType
+        });
+      },
+      onOpenChange: (open) => {
+        setGroupOpen(open);
+      }
+    }
+  );
+  return /* @__PURE__ */ React.createElement("div", { ref: triggerWrapRef, className: classNames(styles.globalMl, styles.globalItem) }, dateCompare && !!options.length && /* @__PURE__ */ React.createElement("label", { onClick: () => setGroupOpen(true), className: styles.globalItemDateTerm }, /* @__PURE__ */ React.createElement("span", { style: { marginRight: "5px", fontSize: 14 } }, timeType), /* @__PURE__ */ React.createElement("i", { style: { marginRight: "10px" }, className: classNames("iconfont icon-xiala1") })), /* @__PURE__ */ React.createElement("i", { className: itemCheckIconClass("icon-riqi1"), style: { fontSize: 14 } }), /* @__PURE__ */ React.createElement(
+    ConfigProvider,
+    {
+      theme: {
+        components: {
+          DatePicker: {
+            cellWidth: 60,
+            cellHeight: 40,
+            timeColumnWidth: 40
+          }
+        },
+        token: {}
+      }
+    },
+    hasCustomRangeDisplay ? /* @__PURE__ */ React.createElement("div", { className: styles.rangePickerCustomDisplay }, /* @__PURE__ */ React.createElement("span", { className: styles.rangePickerCustomDisplayLabel }, rangeDisplayLabel), rangePicker) : rangePicker
+  ));
+};
+var YkRangeDateWithVSRange_default = YkRangeDateWithVSRange;
+export {
+  YkRangeDateWithVSRange_default as default
+};
+//# sourceMappingURL=YkRangeDateWithVSRange.js.map