@chaoswise/ui 3.0.17 → 3.0.19

package/lib/TimeRangeSlider/TimeRangeSliderCmp/utils/generate/dayjs.js

@@ -0,0 +1,260 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
+import isSameOrAfter_dayjs from "dayjs/plugin/isSameOrAfter";
+dayjs.extend(isSameOrAfter_dayjs);
+dayjs.extend(duration);
+import { round } from "lodash-es";
+// 获取所有日期 最近30天: 年月日
+// 第一天和最后一天合并成一天(上部分)
+export var getAllDates = function getAllDates(date, days) {
+  var currentDate = date;
+  var allDates = [];
+  for (var i = 0; i <= days; i++) {
+    var _date = currentDate.clone().subtract(i, "days");
+    allDates.unshift(_date);
+  }
+  return allDates;
+};
+
+// 将日期数据转化为需要的格式(上部分)
+export var getConvertedDateData = function getConvertedDateData(dates, singleWidth, days) {
+  var convertedDateData = [];
+  var recordYYYY = "";
+  var left = 0; // 上一次的总left
+  var lastWidth = 0; // 上一次的宽度
+  dates.forEach(function (date, index) {
+    var YYYY = date.format("YYYY");
+    var MM_DD = date.format("MM-DD");
+    var DD = date.format("DD");
+    var isStartYYYY = false;
+    if (recordYYYY !== YYYY) {
+      recordYYYY = YYYY;
+      isStartYYYY = true;
+    }
+    var _getDateInfo = getDateInfo(date, index, left, singleWidth, lastWidth, days),
+      resLeft = _getDateInfo.resLeft,
+      percentage = _getDateInfo.percentage,
+      width = _getDateInfo.width;
+    left = resLeft;
+    lastWidth = width;
+    convertedDateData.push({
+      YYYY: YYYY,
+      MM_DD: MM_DD,
+      DD: DD,
+      isStartYYYY: isStartYYYY,
+      date: date,
+      position: {
+        left: left,
+        percentage: percentage,
+        width: width
+      }
+    });
+  });
+  return convertedDateData;
+};
+// 获取传入日期的相关数据(上部分)
+var getDateInfo = function getDateInfo(date, index, left, singleWidth, lastWidth, days) {
+  var millisecondsOfTheDay = dayjs.duration(1, "days").valueOf(); // 一天的毫秒数 86400000
+  var millisecondsOfTheDate = dayjs(date).valueOf(); // 传入日期的毫秒数
+  var millisecondsOfTheDateStart = dayjs(date).startOf("day").valueOf(); // 传入日期的开始时间的毫秒数
+  var millisecondsOfTheDateEnd = dayjs(date).endOf("day").valueOf(); // 传入日期的结束时间的毫秒数
+  var diffTime = millisecondsOfTheDay; // 时间差
+  var percentage = 1; // 所占比例
+  if (index === 0) {
+    // 时间轴开始位置
+    diffTime = millisecondsOfTheDateEnd - millisecondsOfTheDate;
+  } else if (index === days) {
+    // 时间轴结束位置
+    diffTime = millisecondsOfTheDate - millisecondsOfTheDateStart;
+  }
+  percentage = round(diffTime / millisecondsOfTheDay, 2); // 小数点后两位四舍五入
+  var width = round(percentage * singleWidth, 2);
+  var resLeft = round(Number(left + lastWidth), 2);
+  return {
+    percentage: percentage,
+    resLeft: resLeft,
+    width: width
+  };
+};
+// 根据left位置获取日期(上部分)
+export var getDateInfoByPositionInfo = function getDateInfoByPositionInfo(left, allWidth, currentMoment, days) {
+  var millisecondsOfRecentlyMonth = dayjs.duration(days, "days").valueOf(); // 默认为30天的毫秒数 2592000000
+  var millisecondsOfRecentlyMonthStart = currentMoment.clone().subtract(days, "days").valueOf(); // 默认为最近30天的开始时间的毫秒数
+  var diffTime = round(left / allWidth * millisecondsOfRecentlyMonth);
+  var millisecondsOfTheDate = Number(diffTime);
+  var startDate = dayjs(Number(millisecondsOfTheDate + millisecondsOfRecentlyMonthStart));
+  var endDate = startDate.clone().add(1, "days");
+  return {
+    startDate: startDate,
+    endDate: endDate
+  };
+};
+// 根据日期获取left位置(上部分)
+export var getPositionInfoByDateInfo = function getPositionInfoByDateInfo(date, allWidth, currentMoment, days) {
+  var millisecondsOfRecentlyMonth = dayjs.duration(days, "days").valueOf(); // 默认30天的毫秒数 2592000000
+  var millisecondsOfTheDate = dayjs(date).valueOf(); // 传入日期的毫秒数
+  var millisecondsOfRecentlyMonthStart = currentMoment.clone().subtract(days, "days").valueOf(); // 默认最近30天的开始时间的毫秒数
+  var diffTime = millisecondsOfTheDate - millisecondsOfRecentlyMonthStart;
+  var left = round(diffTime / millisecondsOfRecentlyMonth * allWidth, 2);
+  return left;
+};
+
+// 第一小时和最后一小时合并成一小时(下部分)
+export var getAllTimeDates = function getAllTimeDates(date) {
+  var currentTimeDates = date.clone();
+  var allTimeDates = [];
+  for (var i = 0; i < 25; i++) {
+    var _date2 = currentTimeDates.clone().subtract(i, "hours");
+    allTimeDates.unshift(_date2);
+  }
+  return allTimeDates;
+};
+// 根据结束日期获取最近一天内的时间并转化为需要的格式(下部分)
+export var getConvertedTimeDateDataByEndDate = function getConvertedTimeDateDataByEndDate(dates) {
+  var convertedDateData = [];
+  var recordNewDay = "";
+  dates.forEach(function (date, index) {
+    var YYYY = date.format("YYYY");
+    var MM_DD = date.format("MM-DD");
+    var DD = date.format("DD");
+    var HH_MM = date.format("HH:mm");
+    var isNewDay = false;
+    if (recordNewDay !== MM_DD) {
+      recordNewDay = MM_DD;
+      isNewDay = true;
+    }
+    convertedDateData.push({
+      YYYY: YYYY,
+      MM_DD: MM_DD,
+      DD: DD,
+      HH_MM: HH_MM,
+      isNewDay: isNewDay,
+      date: date
+    });
+  });
+  return convertedDateData;
+};
+var getValueOfDateByDate = function getValueOfDateByDate(date) {
+  return dayjs(date).valueOf();
+};
+// 根据日期时间获取相关位置(下部分)
+export var getPositionInfoByTimeDateInfo = function getPositionInfoByTimeDateInfo(date, allWidth, currentMoment, recordTimeDateWrapper, days) {
+  var width = 0;
+  var left = 0;
+  if ((date === null || date === void 0 ? void 0 : date.length) !== 2 || (recordTimeDateWrapper === null || recordTimeDateWrapper === void 0 ? void 0 : recordTimeDateWrapper.length) !== 2) {
+    return {
+      left: left,
+      width: width
+    };
+  }
+  var millisecondsOfRecentlyMonth = dayjs.duration(days, "days").valueOf(); // 默认30天的毫秒数 2592000000
+  var millisecondsOfTheDateStart = getValueOfDateByDate(date[0]); // 传入日期的毫秒数开始值
+  var millisecondsOfTheDateEnd = getValueOfDateByDate(date[1]); // 传入日期的毫秒数结束值
+  var millisecondsOfTheDateRecordTimeDataStart = getValueOfDateByDate(recordTimeDateWrapper[0]); // 容器轴开始时间点的毫秒数
+  var millisecondsOfRecentlyMonthStart = currentMoment.clone().subtract(days, "days").valueOf(); // 默认最近30天的开始时间的毫秒数
+  var diffTimeStart = millisecondsOfTheDateStart - millisecondsOfRecentlyMonthStart; // 传入日期于默认最近30天开始时间的毫秒差
+  var diffTimeEnd = millisecondsOfTheDateEnd - millisecondsOfRecentlyMonthStart; // 传入日期于默认最近30天开始时间的毫秒差
+  var diffTimeRecordTimeStart = millisecondsOfTheDateRecordTimeDataStart - millisecondsOfRecentlyMonthStart; // 容器轴开始时间点于默认最近30天开始时间的毫秒差
+  var leftStart = round(diffTimeStart / millisecondsOfRecentlyMonth * allWidth * days, 2); // 传入日期的未处理数据left
+  var leftEnd = round(diffTimeEnd / millisecondsOfRecentlyMonth * allWidth * days, 2); // 传入日期的未处理数据left
+  var leftWrapperStart = round(diffTimeRecordTimeStart / millisecondsOfRecentlyMonth * allWidth * days, 2); // 容器轴开始时间未处理数据left
+  width = round(leftEnd - leftStart, 2);
+  left = round(leftStart - leftWrapperStart, 2);
+  return {
+    width: width,
+    left: left
+  };
+};
+// 传入left和width获取日期(下部分)
+export var getTimeDateInfoByPositionInfo = function getTimeDateInfoByPositionInfo(left, width, allWidth, currentMoment, recordTimeDateWrapper, days) {
+  var millisecondsOfRecentlyMonth = dayjs.duration(days, "days").valueOf(); // 默认为30天的毫秒数 2592000000
+  var millisecondsOfRecentlyMonthStart = currentMoment.clone().subtract(days, "days").valueOf(); // 默认为最近30天的开始时间的毫秒数
+  var millisecondsOfTheDateRecordTimeDataStart = getValueOfDateByDate(recordTimeDateWrapper[0]); // 容器轴开始时间点的毫秒数
+  var diffTimeRecordTimeStart = millisecondsOfTheDateRecordTimeDataStart - millisecondsOfRecentlyMonthStart; // 容器轴开始时间点于默认最近30天开始时间的毫秒差
+  var leftWrapperStart = round(diffTimeRecordTimeStart / millisecondsOfRecentlyMonth * allWidth * days, 2); // 容器轴开始时间未处理数据left
+  var leftStart = round(left + leftWrapperStart, 2); // 传入日期的未处理数据left
+  var leftEnd = round(leftStart + width, 2); // 传入日期的未处理数据left
+  var millisecondsOfTheDateStart = round(leftStart / allWidth / days * millisecondsOfRecentlyMonth);
+  var millisecondsOfTheDateEnd = round(leftEnd / allWidth / days * millisecondsOfRecentlyMonth);
+  var startDate = dayjs(Number(millisecondsOfTheDateStart + millisecondsOfRecentlyMonthStart));
+  var endDate = dayjs(Number(millisecondsOfTheDateEnd + millisecondsOfRecentlyMonthStart));
+  return {
+    startDate: startDate,
+    endDate: endDate
+  };
+};
+
+// 检查一个 dayjs 是否在另一个 dayjs 之后或与之相同。
+export var isSameOrAfter = function isSameOrAfter(date1, date2) {
+  return dayjs(date1).isSameOrAfter(date2);
+};
+
+// 获取鼠标位置距离目标元素左侧的距离
+export var getOffsetLeft = function getOffsetLeft(e, currentTargetRef) {
+  var _currentTargetRef$cur;
+  var mouseX = e.clientX; // 获取鼠标距离浏览器窗口左侧的距离
+  var elemX = (_currentTargetRef$cur = currentTargetRef.current) === null || _currentTargetRef$cur === void 0 ? void 0 : _currentTargetRef$cur.getBoundingClientRect().left; // 获取元素距离浏览器窗口左侧的距离
+  var left = mouseX - elemX; // 计算鼠标位置距离元素左侧的距离
+  return left;
+};
+export var getBottomSliderHoverInfo = function getBottomSliderHoverInfo(left, bottomSliderInfoRef, timeSliderWidth, currentMomentRef, recordTimeDateWrapper, days) {
+  var width = bottomSliderInfoRef.current.width;
+  left = left - width / 2;
+  var date = getTimeDateInfoByPositionInfo(left, width, timeSliderWidth, currentMomentRef.current, recordTimeDateWrapper, days);
+  var resStartDate = date.startDate;
+  var resEndDate = date.endDate;
+  var startDate = currentMomentRef.current.clone().subtract(days, "days");
+  var isSameOrAfterStart = isSameOrAfter(resStartDate, startDate);
+  var isSameOrAfterEnd = isSameOrAfter(currentMomentRef.current, resEndDate);
+  var millisecondsOfTheStartDate = dayjs(date.startDate).valueOf(); // 开始日期的毫秒数
+  var millisecondsOfTheEndDate = dayjs(date.endDate).valueOf(); // 传入日期的毫秒数
+  var timeDiff = millisecondsOfTheEndDate - millisecondsOfTheStartDate; // 传入日期与开始日期的毫秒差
+  if (!isSameOrAfterStart) {
+    resStartDate = startDate;
+    resEndDate = resStartDate.clone().add(timeDiff, "milliseconds");
+  }
+  if (!isSameOrAfterEnd) {
+    resEndDate = currentMomentRef.current;
+    resStartDate = currentMomentRef.current.clone().subtract(timeDiff, "milliseconds");
+  }
+  var newTimeDate = [resStartDate, resEndDate];
+  var positionInfo = getPositionInfoByTimeDateInfo(newTimeDate, timeSliderWidth, currentMomentRef.current, recordTimeDateWrapper, days);
+  return _objectSpread(_objectSpread({}, positionInfo), {}, {
+    date: newTimeDate
+  });
+};
+
+// 计算输入框时间跨度
+export var computeTimeSpan = function computeTimeSpan(value) {
+  // 当前传入日期的时间
+  var timeDiff = value[1].diff(value[0], "s");
+  if (timeDiff >= 60) {
+    timeDiff = Number(timeDiff + 1);
+  }
+  var duration = dayjs.duration(timeDiff, "s");
+  var _duration$$d = duration.$d,
+    years = _duration$$d.years,
+    months = _duration$$d.months,
+    days = _duration$$d.days,
+    hours = _duration$$d.hours,
+    minutes = _duration$$d.minutes,
+    seconds = _duration$$d.seconds; // dayjs参数:$d
+  var timeSpan = "";
+  if (days) {
+    timeSpan += "".concat(days, "d");
+  }
+  if (hours) {
+    timeSpan += "".concat(hours, "h");
+  }
+  if (minutes) {
+    timeSpan += "".concat(minutes, "m");
+  }
+  return timeSpan;
+};
+export default dayjs;

package/lib/TimeRangeSlider/TimeRangeSliderCmp/utils/{index.js → generate/moment.js}

@@ -252,4 +252,5 @@ export var computeTimeSpan = function computeTimeSpan(value) {
     timeSpan += "".concat(minutes, "m");
   }
   return timeSpan;
-};
+};
+export default moment;

package/lib/TimeRangeSlider/TimeSpan/index.js

@@ -8,7 +8,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React from "react";
 import { CaretLeftOutlined, CaretRightOutlined, ZoomInOutlined } from "@ant-design/icons";
-import { getChangeDate } from "../utils";
+import { getChangeDate } from "../utils/generate/dayjs";
 import useConfigContext from "../../useConfigContext";
 import { useIntl } from "../../locales";
 import classnames from "classnames";

package/lib/TimeRangeSlider/index.js

@@ -1,7 +1,7 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 import _Popover from "@chaoswise/ui/lib/Popover";
 import _Input from "@chaoswise/ui/lib/Input";
-import _message from "@chaoswise/ui/lib/message";
+import _message2 from "@chaoswise/ui/lib/message";
 var _excluded = ["timeDomain", "number", "unit", "isRecently", "value"],
   _excluded2 = ["value", "timeDomain", "number", "unit", "isRecently"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -27,8 +27,7 @@ import TimeRangeSliderCmp from "./TimeRangeSliderCmp";
 import Refresh from "./Refresh";
 import CalendarSvg from "./assets/Calendar";
 import useConfigContext from "../useConfigContext";
-import { echoInputValue, getUnit, judgeType, getChangeUnitDate, isInvalidDate, funcValueChangeArrayValue, getCorrectValue, getFinalDateOption, getTruthDateCount, isLessThanMinTimeSpan, isExceedMaxTimeSpan, isWithinTimeSpan, getYears, computedRecentlyValue } from "./utils";
-import { formatMessage } from "../utils";
+import { echoInputValue, getUnit, judgeType, getChangeUnitDate, isInvalidDate, funcValueChangeArrayValue, getCorrectValue, getFinalDateOption, getTruthDateCount, isLessThanMinTimeSpan, isExceedMaxTimeSpan, isWithinTimeSpan, getYears, computedRecentlyValue } from "./utils/generate/dayjs";
 import useStyle from "./styles/index.style";
 import { useIntl } from "../locales";
 var TimeRangeSlider = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -66,6 +65,10 @@ var TimeRangeSlider = /*#__PURE__*/forwardRef(function (props, ref) {
     timeSpanBoundary = _timeSpanOption$timeS2 === void 0 ? 24 * 60 * 60 : _timeSpanOption$timeS2,
     _timeSpanOption$days = timeSpanOption.days,
     days = _timeSpanOption$days === void 0 ? 30 : _timeSpanOption$days;
+  var _message$useMessage = _message2.useMessage(),
+    _message$useMessage2 = _slicedToArray(_message$useMessage, 2),
+    message = _message$useMessage2[0],
+    contextHolder = _message$useMessage2[1];
   var intl = useIntl();
   var _ref = (intl === null || intl === void 0 ? void 0 : intl.options) || {},
     _ref$currentLocale = _ref.currentLocale,
@@ -387,15 +390,15 @@ var TimeRangeSlider = /*#__PURE__*/forwardRef(function (props, ref) {
       if (!isInvalidDate_) {
         var passValue = returnValue.value;
         if (isLessThanMinTimeSpan(passValue, timeSpanBoundaryStart)) {
-          _message.error("小于限制的最小时间跨度，请重新输入");
+          message.error("小于限制的最小时间跨度，请重新输入");
           return;
         }
         if (isExceedMaxTimeSpan(passValue, timeSpanBoundary)) {
-          _message.error(intl.get("e8a046c4-4611-47b9-bef0-cb46de7dd733").d("超过了限制的最大时间跨度，请重新输入"));
+          message.error(intl.get("e8a046c4-4611-47b9-bef0-cb46de7dd733").d("超过了限制的最大时间跨度，请重新输入"));
           return;
         }
         if (!isWithinTimeSpan(passValue, days)) {
-          _message.error("不在要求的时间跨度之内,请重新输入");
+          message.error("不在要求的时间跨度之内,请重新输入");
           return;
         }
         _onChange(returnValue);
@@ -404,7 +407,7 @@ var TimeRangeSlider = /*#__PURE__*/forwardRef(function (props, ref) {
           setRecordDateValue(returnValue);
         }
       } else {
-        _message.error(intl.get("e2008629-6fc2-4222-b28c-ada43aa79a74").d("不符合输入格式,请重新输入"));
+        message.error(intl.get("e2008629-6fc2-4222-b28c-ada43aa79a74").d("不符合输入格式,请重新输入"));
       }
     } else {
       var finalDateOption = getFinalDateOption(inputValue);
@@ -416,15 +419,15 @@ var TimeRangeSlider = /*#__PURE__*/forwardRef(function (props, ref) {
         });
         var _passValue = _returnValue.value;
         if (isLessThanMinTimeSpan(_passValue, timeSpanBoundaryStart)) {
-          _message.error("小于限制的最小时间跨度，请重新输入");
+          message.error("小于限制的最小时间跨度，请重新输入");
           return;
         }
         if (isExceedMaxTimeSpan(_passValue, timeSpanBoundary)) {
-          _message.error(intl.get("e8a046c4-4611-47b9-bef0-cb46de7dd733").d("超过了限制的最大时间跨度，请重新输入"));
+          message.error(intl.get("e8a046c4-4611-47b9-bef0-cb46de7dd733").d("超过了限制的最大时间跨度，请重新输入"));
           return;
         }
         if (!isWithinTimeSpan(_passValue, days)) {
-          _message.error("不在要求的时间跨度之内,请重新输入");
+          message.error("不在要求的时间跨度之内,请重新输入");
           return;
         }
         _onChange(_returnValue);
@@ -433,7 +436,7 @@ var TimeRangeSlider = /*#__PURE__*/forwardRef(function (props, ref) {
           setRecordDateValue(_returnValue);
         }
       } else {
-        _message.error(formatMessage(intl.get("e2008629-6fc2-4222-b28c-ada43aa79a74").d("不符合输入格式,请重新输入")));
+        message.error(intl.get("e2008629-6fc2-4222-b28c-ada43aa79a74").d("不符合输入格式,请重新输入"));
       }
     }
     isInputRef.current = false;
@@ -466,10 +469,10 @@ var TimeRangeSlider = /*#__PURE__*/forwardRef(function (props, ref) {
     isHasDate: isHasDate,
     isClickAutoRefresh: isClickAutoRefresh
   });
-  return wrapCSSVar( /*#__PURE__*/React.createElement("div", {
+  return wrapCSSVar(/*#__PURE__*/React.createElement("div", {
     className: classnames(hashId, cssVarCls, "".concat(prefixCls, "-time-range-slider-wrapper"), classNameWrapper),
     ref: calendarRef
-  }, /*#__PURE__*/React.createElement("div", {
+  }, contextHolder, /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-time-range-slider-box-wrapper")
   }, /*#__PURE__*/React.createElement(_Input, {
     prefix: inputPrefix,