@cloudtower/eagle 0.28.0-dry → 0.28.0

package/dist/cjs/coreX/DateRangePicker/Calendar.js

@@ -0,0 +1,293 @@
+'use strict';
+
+var iconsReact = require('@cloudtower/icons-react');
+var core = require('@linaria/core');
+var index$2 = require('../../core/Button/index.js');
+var index$3 = require('../../core/Icon/index.js');
+var index$1 = require('../../core/Input/index.js');
+var index = require('../../core/Typo/index.js');
+var useElementIntersectionRatio = require('../../hooks/useElementIntersectionRatio.js');
+var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
+var dayjs = require('dayjs');
+var React = require('react');
+var common = require('./common.js');
+var DateRangePicker_style = require('./DateRangePicker.style.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const Year = (props) => {
+  const { year, onChange } = props;
+  const { t } = useParrotTranslation();
+  const [tmpYear, setTmpYear] = React.useState(year);
+  const [edit, setEdit] = React.useState(false);
+  function handleChangeYear() {
+    if (tmpYear <= 1900 || tmpYear >= 2500) {
+      setTmpYear(year);
+      onChange(year);
+    } else {
+      onChange(tmpYear);
+    }
+    setEdit(false);
+  }
+  return /* @__PURE__ */ React__default.default.createElement(DateRangePicker_style.CalendarStyle.Year, null, /* @__PURE__ */ React__default.default.createElement("div", { className: core.cx("year-number", index.Typo.Label.l1_bold) }, edit ? /* @__PURE__ */ React__default.default.createElement(
+    index$1,
+    {
+      className: "year-number-input",
+      value: tmpYear,
+      onChange: (event) => {
+        const newYear = parseInt(event.target.value);
+        if (Number.isInteger(newYear)) {
+          setTmpYear(newYear);
+        } else {
+          setTmpYear(year);
+        }
+      },
+      onBlur: handleChangeYear,
+      onKeyDown: (event) => {
+        if (event.keyCode === 13) {
+          handleChangeYear();
+        }
+      }
+    }
+  ) : /* @__PURE__ */ React__default.default.createElement("span", { className: "year-number-text", onClick: () => setEdit(true) }, year), t("common.year")), /* @__PURE__ */ React__default.default.createElement("div", { className: "year-control" }, /* @__PURE__ */ React__default.default.createElement(
+    index$2,
+    {
+      prefixIcon: /* @__PURE__ */ React__default.default.createElement(index$3, { src: iconsReact.ArrowChevronUp16BoldBlueIcon }),
+      size: "small",
+      type: "secondary",
+      shape: "circle",
+      onClick: () => onChange(year - 1)
+    }
+  ), /* @__PURE__ */ React__default.default.createElement(
+    index$2,
+    {
+      prefixIcon: /* @__PURE__ */ React__default.default.createElement(index$3, { src: iconsReact.ArrowChevronDown16BoldBlueIcon }),
+      size: "small",
+      type: "secondary",
+      shape: "circle",
+      onClick: () => onChange(year + 1)
+    }
+  )));
+};
+const MonthItem = (props) => {
+  var _a, _b, _c;
+  const {
+    year: initYear,
+    month: initMonth,
+    range,
+    highlightDay,
+    minDate,
+    maxDate,
+    parentElement,
+    onRangeChange,
+    onMouseEnter
+  } = props;
+  const { t } = useParrotTranslation();
+  const containerRef = React.useRef(null);
+  const datesContainerRef = React.useRef(null);
+  const headerRef = React.useRef(null);
+  const entry = useElementIntersectionRatio(datesContainerRef, parentElement);
+  const mapOfHighlightDay = highlightDay.reduce(
+    (map, day, currentIndex) => {
+      map.set(day, currentIndex);
+      return map;
+    },
+    /* @__PURE__ */ new Map()
+  );
+  const scrollTop = ((_a = parentElement == null ? void 0 : parentElement.current) == null ? void 0 : _a.scrollTop) || 0;
+  const offsetTop = ((_b = datesContainerRef.current) == null ? void 0 : _b.offsetTop) || 0;
+  const headerHeight = ((_c = headerRef.current) == null ? void 0 : _c.offsetHeight) || 0;
+  const isPinned = scrollTop - offsetTop + headerHeight > 0 && (entry == null ? void 0 : entry.isIntersecting);
+  const [rangeStart, rangeEnd] = range;
+  React.useEffect(() => {
+    var _a2, _b2;
+    if (dayjs__default.default().month() + 1 === initMonth.month && containerRef.current && !rangeStart && !rangeEnd) {
+      (_a2 = containerRef.current) == null ? void 0 : _a2.scrollIntoView();
+    } else if (rangeStart && rangeEnd && rangeEnd.month() + 1 === initMonth.month) {
+      (_b2 = containerRef.current) == null ? void 0 : _b2.scrollIntoView({
+        block: "center"
+      });
+    }
+  }, []);
+  function clickDate(date) {
+    let _range = [...range];
+    const month = initMonth.month;
+    if (!rangeStart && !rangeEnd) {
+      _range = [common.getTime(initYear, month, date), null];
+    } else if (rangeStart && !rangeEnd) {
+      _range[1] = dayjs__default.default(
+        `${initYear}-${month}-${date} 23:59:59`,
+        "YYYY-M-D HH:mm:ss"
+      );
+      _range = _range.sort((a, b) => {
+        return ((a == null ? void 0 : a.valueOf()) || 0) - ((b == null ? void 0 : b.valueOf()) || 0);
+      });
+    } else if (rangeStart && rangeEnd) {
+      _range = [common.getTime(initYear, month, date), null];
+    }
+    onRangeChange(_range);
+  }
+  return /* @__PURE__ */ React__default.default.createElement("li", { className: "month-container", ref: containerRef }, /* @__PURE__ */ React__default.default.createElement(
+    "header",
+    {
+      className: core.cx(index.Typo.Label.l1_bold, isPinned && "pinned"),
+      ref: headerRef
+    },
+    initMonth.month,
+    t("common.month")
+  ), /* @__PURE__ */ React__default.default.createElement("div", { className: "dates-in-month", ref: datesContainerRef }, new Array(initMonth.firstDateOfDay).fill(null).map((value, index) => /* @__PURE__ */ React__default.default.createElement("span", { key: `blank-date-${index}`, className: "blank" })), initMonth.dates.map((date) => {
+    const _date = common.getTime(initYear, initMonth.month, date);
+    const dateNotIncludeInRange = common.checkDateNotInRange(
+      _date,
+      minDate,
+      maxDate
+    );
+    const disabled = Boolean(
+      rangeStart && !rangeEnd && rangeStart.valueOf() > _date.valueOf()
+    ) || !dateNotIncludeInRange;
+    const dateClassName = common.getClassNameForDateBlock(
+      range,
+      _date,
+      mapOfHighlightDay,
+      disabled
+    );
+    const highlightIndex = mapOfHighlightDay.get(
+      _date.format("YYYY-MM-DD")
+    );
+    const isFirstDayInWeek = _date.day() === 1;
+    const isLastDayInWeek = _date.day() === 0;
+    const isFirstDayInMonth = _date.date() === 1;
+    const isLastDayInMonth = _date.date() === _date.daysInMonth();
+    const isLastDayIsSingleDayInWeek = isLastDayInMonth && isFirstDayInWeek;
+    const isFirstHighlight = highlightIndex === 0 || isFirstDayInWeek || isFirstDayInMonth || isLastDayIsSingleDayInWeek;
+    const isLastHighlight = highlightIndex === Math.max(mapOfHighlightDay.size - 1, 0) || isLastDayInWeek || isLastDayInMonth;
+    return /* @__PURE__ */ React__default.default.createElement(
+      "span",
+      {
+        key: `date-${date}`,
+        className: core.cx(
+          "date-block",
+          dateClassName,
+          isFirstHighlight && "first-highlight",
+          isLastHighlight && "last-highlight"
+        ),
+        onClick: () => {
+          if (disabled) {
+            return;
+          }
+          clickDate(date);
+        },
+        onMouseEnter: () => {
+          if (disabled) {
+            onMouseEnter(null);
+          } else if (rangeStart && !rangeEnd) {
+            onMouseEnter(_date);
+          }
+        }
+      },
+      /* @__PURE__ */ React__default.default.createElement("span", { className: core.cx("date-text", dateClassName) }, date)
+    );
+  })));
+};
+const Month = (props) => {
+  const { year, range, minDate, maxDate, onRangeChange } = props;
+  const monthContainerRef = React.useRef(null);
+  const [month, setMonth] = React.useState([]);
+  const [highlightDay, setHighlightDay] = React.useState(() => {
+    if (range[0] && range[1]) {
+      return common.getDiffMonthAndDate(range[0], range[1]);
+    }
+    return null;
+  });
+  const controlHighlightDay = range[0] && range[1] ? common.getDiffMonthAndDate(range[0], range[1]) : null;
+  React.useEffect(() => {
+    const monthAndDate = [];
+    for (let month2 = 1; month2 <= 12; month2++) {
+      const time = dayjs__default.default(`${year}-${month2}`, "YYYY-M");
+      const allDateInMonth = time.daysInMonth();
+      const dates = new Array(allDateInMonth).fill(1).map((value, index) => index + 1);
+      const firstDateOfDay = time.set("date", dates[0]).day();
+      monthAndDate.push({
+        month: month2,
+        dates,
+        firstDateOfDay: Math.max(firstDateOfDay - 1, 0)
+      });
+    }
+    setMonth(monthAndDate);
+  }, [year]);
+  function handleMouseEnterDate(date) {
+    if (range[0] && date) {
+      const diffDay = common.getDiffMonthAndDate(range[0], date);
+      setHighlightDay(diffDay);
+    } else {
+      setHighlightDay(null);
+    }
+  }
+  function handleMouseOutMonthUl(event) {
+    if (!range[0] || range[1] || !event.target) {
+      return;
+    }
+    if (event.target.classList.contains("disabled")) {
+      return;
+    }
+    if (!event.target.classList.contains("date")) {
+      setHighlightDay(null);
+    }
+  }
+  return /* @__PURE__ */ React__default.default.createElement(
+    DateRangePicker_style.CalendarStyle.Month,
+    {
+      ref: monthContainerRef,
+      onMouseMove: handleMouseOutMonthUl
+    },
+    /* @__PURE__ */ React__default.default.createElement("ul", null, month.map((m) => /* @__PURE__ */ React__default.default.createElement(
+      MonthItem,
+      {
+        key: m.month,
+        year,
+        month: m,
+        range,
+        minDate,
+        maxDate,
+        highlightDay: highlightDay || controlHighlightDay || [],
+        parentElement: monthContainerRef,
+        onRangeChange,
+        onMouseEnter: handleMouseEnterDate
+      }
+    )))
+  );
+};
+const Week = () => {
+  const { t } = useParrotTranslation();
+  return /* @__PURE__ */ React__default.default.createElement(DateRangePicker_style.CalendarStyle.Week, null, /* @__PURE__ */ React__default.default.createElement("li", { className: index.Typo.Label.l1_regular }, t("components.monday-simple")), /* @__PURE__ */ React__default.default.createElement("li", { className: index.Typo.Label.l1_regular }, t("components.tuesday-simple")), /* @__PURE__ */ React__default.default.createElement("li", { className: index.Typo.Label.l1_regular }, t("components.wednesday-simple")), /* @__PURE__ */ React__default.default.createElement("li", { className: index.Typo.Label.l1_regular }, t("components.thursday-simple")), /* @__PURE__ */ React__default.default.createElement("li", { className: index.Typo.Label.l1_regular }, t("components.friday-simple")), /* @__PURE__ */ React__default.default.createElement("li", { className: index.Typo.Label.l1_regular }, t("components.saturday-simple")), /* @__PURE__ */ React__default.default.createElement("li", { className: index.Typo.Label.l1_regular }, t("components.sunday-simple")));
+};
+const Calendar = (props) => {
+  const { range: initRange, minDate, maxDate, onChange } = props;
+  const [year, setYear] = React.useState(dayjs__default.default().year());
+  const [range, setRange] = React.useState(
+    initRange || [null, null]
+  );
+  React.useEffect(() => {
+    setRange(initRange || [null, null]);
+  }, [initRange]);
+  function handleRangeChange(newRange) {
+    setRange(newRange);
+    onChange == null ? void 0 : onChange(newRange);
+  }
+  return /* @__PURE__ */ React__default.default.createElement(DateRangePicker_style.CalendarStyle.Wrapper, { className: "date-range-picker-calendar" }, /* @__PURE__ */ React__default.default.createElement(Year, { year, onChange: setYear }), /* @__PURE__ */ React__default.default.createElement(Week, null), /* @__PURE__ */ React__default.default.createElement(
+    Month,
+    {
+      year,
+      range,
+      minDate,
+      maxDate,
+      onRangeChange: handleRangeChange
+    }
+  ));
+};
+var Calendar$1 = Calendar;
+
+module.exports = Calendar$1;

package/dist/cjs/coreX/DateRangePicker/DateRangePicker.style.js

@@ -0,0 +1,84 @@
+'use strict';
+
+var react = require('@linaria/react');
+
+const CalendarWrapper = /*#__PURE__*/react.styled('div')({
+  name: "CalendarWrapper",
+  class: "E_c1kchka8",
+  propsAsIs: false
+});
+const CalendarYearWrapper = /*#__PURE__*/react.styled('div')({
+  name: "CalendarYearWrapper",
+  class: "E_ctdb951",
+  propsAsIs: false
+});
+const CalendarWeekWrapper = /*#__PURE__*/react.styled('ul')({
+  name: "CalendarWeekWrapper",
+  class: "E_cvgtyx0",
+  propsAsIs: false
+});
+const CalendarMonthWrapper = /*#__PURE__*/react.styled('div')({
+  name: "CalendarMonthWrapper",
+  class: "E_crprfvb",
+  propsAsIs: false
+});
+const CalendarStyle = {
+  Wrapper: CalendarWrapper,
+  Year: CalendarYearWrapper,
+  Week: CalendarWeekWrapper,
+  Month: CalendarMonthWrapper
+};
+const InputTimeWrapper = /*#__PURE__*/react.styled('div')({
+  name: "InputTimeWrapper",
+  class: "E_ipbxcfl",
+  propsAsIs: false
+});
+const InputTimeStyle = {
+  Wrapper: InputTimeWrapper
+};
+const AbsoluteTimeWrapper = /*#__PURE__*/react.styled('div')({
+  name: "AbsoluteTimeWrapper",
+  class: "E_a120uq8m",
+  propsAsIs: false
+});
+const AbsoluteTimeSectionWrapper = /*#__PURE__*/react.styled('div')({
+  name: "AbsoluteTimeSectionWrapper",
+  class: "E_a15s9m0d",
+  propsAsIs: false
+});
+const AbsoluteTimeStyle = {
+  Wrapper: AbsoluteTimeWrapper,
+  Time: AbsoluteTimeSectionWrapper
+};
+const RelativeTimeWrapper = /*#__PURE__*/react.styled('div')({
+  name: "RelativeTimeWrapper",
+  class: "E_r5hl59d",
+  propsAsIs: false
+});
+const RelativeTimeStyle = {
+  Wrapper: RelativeTimeWrapper
+};
+const DateRangePickerWrapper = /*#__PURE__*/react.styled('div')({
+  name: "DateRangePickerWrapper",
+  class: "E_dhqt3dw",
+  propsAsIs: false
+});
+const DateRangePickerPopover = "E_d956d92";
+const DateRangePickerHistory = /*#__PURE__*/react.styled('div')({
+  name: "DateRangePickerHistory",
+  class: "E_d1tc7lgk",
+  propsAsIs: false
+});
+const DateRangePickerStyle = {
+  Wrapper: DateRangePickerWrapper,
+  Popover: DateRangePickerPopover,
+  History: DateRangePickerHistory
+};
+const ResetPopoverStyle = "E_rzaik16";
+
+exports.AbsoluteTimeStyle = AbsoluteTimeStyle;
+exports.CalendarStyle = CalendarStyle;
+exports.DateRangePickerStyle = DateRangePickerStyle;
+exports.InputTimeStyle = InputTimeStyle;
+exports.RelativeTimeStyle = RelativeTimeStyle;
+exports.ResetPopoverStyle = ResetPopoverStyle;

package/dist/cjs/coreX/DateRangePicker/InputTime.js

@@ -0,0 +1,155 @@
+'use strict';
+
+var core = require('@linaria/core');
+var index = require('../../core/Typo/index.js');
+var React = require('react');
+var common = require('./common.js');
+var DateRangePicker_style = require('./DateRangePicker.style.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const InputTime = (props) => {
+  const { className, value, danger, error, onChange, onBlur } = props;
+  const [focus, setFocus] = React.useState(false);
+  const [time, setTime] = React.useState(["", "", ""]);
+  const hourInputRef = React.useRef(null);
+  const minuteInputRef = React.useRef(null);
+  const secondInputRef = React.useRef(null);
+  const currentTime = value || time;
+  function handleChangeHour(event) {
+    var _a;
+    const hour = common.time2stringByUnit(event.target.value, "h");
+    const _time = [...currentTime];
+    _time[0] = hour;
+    setTime(_time);
+    onChange == null ? void 0 : onChange(_time);
+    if (_time[0].length === 2) {
+      (_a = minuteInputRef.current) == null ? void 0 : _a.focus();
+    }
+  }
+  function handleChangeMinute(event) {
+    var _a;
+    const minute = common.time2stringByUnit(event.target.value, "m");
+    const _time = [...currentTime];
+    _time[1] = minute;
+    setTime(_time);
+    onChange == null ? void 0 : onChange(_time);
+    if (_time[1].length === 2) {
+      (_a = secondInputRef.current) == null ? void 0 : _a.focus();
+    }
+  }
+  function handleChangeSecond(event) {
+    const second = common.time2stringByUnit(event.target.value, "s");
+    const _time = [...currentTime];
+    _time[2] = second;
+    setTime(_time);
+    onChange == null ? void 0 : onChange(_time);
+  }
+  function handleBlurHour(event) {
+    const hour = parseInt(event.target.value);
+    const _time = [...currentTime];
+    if (Number.isInteger(hour)) {
+      _time[0] = common.time2stringByUnit(event.target.value, "h");
+      setTime(_time);
+    }
+    onBlur == null ? void 0 : onBlur(_time);
+    setFocus(false);
+  }
+  function handleBlurMinute(event) {
+    const minute = parseInt(event.target.value);
+    const _time = [...currentTime];
+    if (Number.isInteger(minute)) {
+      _time[1] = common.time2stringByUnit(event.target.value, "m");
+      setTime(_time);
+    }
+    onBlur == null ? void 0 : onBlur(_time);
+    setFocus(false);
+  }
+  function handleBlurSecond(event) {
+    const second = parseInt(event.target.value);
+    const _time = [...currentTime];
+    if (Number.isInteger(second)) {
+      _time[2] = common.time2stringByUnit(event.target.value, "s");
+      setTime(_time);
+    }
+    onBlur == null ? void 0 : onBlur(_time);
+    setFocus(false);
+  }
+  function handleMinuteKeyDown(event) {
+    var _a;
+    if (event.keyCode === 8 || event.keyCode === 46) {
+      if (!event.target.value) {
+        (_a = hourInputRef.current) == null ? void 0 : _a.focus();
+      }
+    }
+  }
+  function handleSecondKeyDown(event) {
+    var _a;
+    if (event.keyCode === 8 || event.keyCode === 46) {
+      if (!event.target.value) {
+        (_a = minuteInputRef.current) == null ? void 0 : _a.focus();
+      }
+    }
+  }
+  return /* @__PURE__ */ React__default.default.createElement(DateRangePicker_style.InputTimeStyle.Wrapper, { className }, /* @__PURE__ */ React__default.default.createElement(
+    "div",
+    {
+      className: core.cx(
+        "input-time",
+        focus && "focus",
+        (error || danger) && "error"
+      )
+    },
+    /* @__PURE__ */ React__default.default.createElement(
+      "input",
+      {
+        ref: hourInputRef,
+        type: "text",
+        className: "hour",
+        placeholder: "hh",
+        maxLength: 2,
+        value: currentTime[0],
+        onChange: handleChangeHour,
+        onFocus: () => setFocus(true),
+        onBlur: handleBlurHour
+      }
+    ),
+    /* @__PURE__ */ React__default.default.createElement("span", { className: core.cx("connect-symbol", !!currentTime[0] && "inputted") }, ":"),
+    /* @__PURE__ */ React__default.default.createElement(
+      "input",
+      {
+        ref: minuteInputRef,
+        type: "text",
+        className: "minute",
+        placeholder: "mm",
+        maxLength: 2,
+        value: currentTime[1],
+        onChange: handleChangeMinute,
+        onFocus: () => setFocus(true),
+        onBlur: handleBlurMinute,
+        onKeyDown: handleMinuteKeyDown
+      }
+    ),
+    /* @__PURE__ */ React__default.default.createElement("span", { className: core.cx("connect-symbol", !!currentTime[1] && "inputted") }, ":"),
+    /* @__PURE__ */ React__default.default.createElement(
+      "input",
+      {
+        ref: secondInputRef,
+        type: "text",
+        className: "second",
+        placeholder: "ss",
+        maxLength: 2,
+        value: currentTime[2],
+        onChange: handleChangeSecond,
+        onFocus: () => setFocus(true),
+        onBlur: handleBlurSecond,
+        onKeyDown: handleSecondKeyDown
+      }
+    )
+  ), error ? /* @__PURE__ */ React__default.default.createElement("p", { className: core.cx("error-message", index.Typo.Label.l4_regular) }, error) : null);
+};
+var InputTime$1 = InputTime;
+
+module.exports = InputTime$1;

package/dist/cjs/coreX/DateRangePicker/RelativeTime.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var core = require('@linaria/core');
+var index = require('../../core/Input/index.js');
+var index$1 = require('../../core/Typo/index.js');
+var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
+var React = require('react');
+var Highlighter = require('react-highlight-words');
+var common = require('./common.js');
+var DateRangePicker_style = require('./DateRangePicker.style.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Highlighter__default = /*#__PURE__*/_interopDefault(Highlighter);
+
+const HighlightKeywordStyle = "E_h1ol2wl7";
+const RelativeTime = props => {
+  const {
+    value,
+    config,
+    search,
+    onChange
+  } = props;
+  const {
+    t
+  } = useParrotTranslation();
+  const configRef = React.useRef(config || common.BASIC_RELATIVE_TIME_CONFIG);
+  const [keyword, setKeyword] = React.useState("");
+  const configList = configRef.current.filter(config2 => {
+    const text = common.getDateText(config2, t);
+    return text.indexOf(keyword) > -1;
+  });
+  return /* @__PURE__ */React__default.default.createElement(DateRangePicker_style.RelativeTimeStyle.Wrapper, null, search ? /* @__PURE__ */React__default.default.createElement(index, {
+    value: keyword,
+    allowClear: true,
+    placeholder: t("components.search_relative_time_placeholder"),
+    onChange: event => setKeyword(event.target.value)
+  }) : null, /* @__PURE__ */React__default.default.createElement("ul", {
+    className: core.cx("past-time-list", !search && "no-search")
+  }, configList.map((config2, index) => {
+    const selected = config2.unit === (value == null ? void 0 : value.unit) && config2.value === (value == null ? void 0 : value.value);
+    const text = common.getDateText(config2, t);
+    return /* @__PURE__ */React__default.default.createElement("li", {
+      key: index,
+      className: core.cx(index$1.Typo.Label.l2_regular, selected && "selected", config2.disabled && "disabled"),
+      onClick: () => onChange == null ? void 0 : onChange(config2)
+    }, /* @__PURE__ */React__default.default.createElement(Highlighter__default.default, {
+      highlightClassName: core.cx(HighlightKeywordStyle, "highlight"),
+      searchWords: [keyword],
+      autoEscape: true,
+      textToHighlight: text
+    }));
+  })));
+};
+var RelativeTime$1 = RelativeTime;
+
+module.exports = RelativeTime$1;