@cloudtower/eagle 0.28.0-dry → 0.28.0

package/dist/esm/coreX/DateRangePicker/AbsoluteDate.js

@@ -0,0 +1,177 @@
+import { cx } from '@linaria/core';
+import Button from '../../core/Button/index.js';
+import { Typo } from '../../core/Typo/index.js';
+import Calendar from './Calendar.js';
+import InputTime from './InputTime.js';
+import useMemoCompare from '../../hooks/useMemoCompare.js';
+import useParrotTranslation from '../../hooks/useParrotTranslation.js';
+import dayjs from 'dayjs';
+import { isEqual } from 'lodash';
+import React__default, { useState, useImperativeHandle, useEffect, useMemo, useRef } from 'react';
+import { copyDay, time2string } from './common.js';
+import { AbsoluteTimeStyle } from './DateRangePicker.style.js';
+
+function transformTime(type, day, boundaryDate) {
+  if (day) {
+    const _boundaryDate = dayjs(boundaryDate);
+    if (type === "start" && _boundaryDate.isValid()) {
+      const start = day.isBefore(_boundaryDate) ? _boundaryDate : day;
+      return [
+        time2string(start.hour()),
+        time2string(start.minute()),
+        time2string(start.second())
+      ];
+    }
+    if (type === "end" && _boundaryDate.isValid()) {
+      const end = day.isAfter(_boundaryDate) ? _boundaryDate : day;
+      return [
+        time2string(end.hour()),
+        time2string(end.minute()),
+        time2string(end.second())
+      ];
+    }
+  }
+  return ["", "", ""];
+}
+function updateDate(time, date) {
+  const [hour, minute, second] = time;
+  return copyDay(dayjs(date == null ? void 0 : date.format())).set("hour", parseInt(hour || "0")).set("minute", parseInt(minute || "0")).set("second", parseInt(second || "0"));
+}
+function checkMinAndMaxTimeRange(t, range, timeRange, minDate, maxDate) {
+  const [startDate, endDate] = range;
+  const [startTime, endTime] = timeRange;
+  if (!startDate && !endDate) {
+    return void 0;
+  }
+  if (!minDate && !maxDate) {
+    return void 0;
+  }
+  const _minDate = copyDay(dayjs(minDate));
+  const _maxDate = copyDay(dayjs(maxDate));
+  if (!_minDate.isValid() && !_maxDate.isValid()) {
+    return void 0;
+  }
+  if (startDate && _minDate.isValid() && startTime.filter(Boolean).length) {
+    const _startDate = copyDay(startDate).set("hour", parseInt(startTime[0] || "0")).set("minute", parseInt(startTime[1] || "")).set("second", parseInt(startTime[2] || "0"));
+    if (_startDate.isBefore(_minDate)) {
+      return t("components.set_start_time_failed", {
+        time: _minDate.format("HH:mm:ss")
+      });
+    }
+  }
+  if (endDate && _maxDate.isValid() && endTime.filter(Boolean).length) {
+    const _endDate = copyDay(endDate).set("hour", parseInt(endTime[0] || "0")).set("minute", parseInt(endTime[1] || "")).set("second", parseInt(endTime[2] || "0"));
+    if (_endDate.isAfter(_maxDate)) {
+      return t("components.set_end_time_failed", {
+        time: _maxDate.format("HH:mm:ss")
+      });
+    }
+  }
+  return void 0;
+}
+const Time = React__default.forwardRef((props, ref) => {
+  const { range, minDate, maxDate, onOk } = props;
+  const { t } = useParrotTranslation();
+  const initRange = useMemoCompare(range, (prev, next) => {
+    const prevStringList = prev == null ? void 0 : prev.map((item) => item == null ? void 0 : item.format());
+    const nextStringList = next == null ? void 0 : next.map((item) => item == null ? void 0 : item.format());
+    return isEqual(prevStringList, nextStringList);
+  });
+  const [startTime, setStartTime] = useState(
+    transformTime("start", initRange == null ? void 0 : initRange[0], minDate)
+  );
+  const [endTime, setEndTime] = useState(
+    transformTime("end", initRange == null ? void 0 : initRange[1], maxDate)
+  );
+  const [error, setError] = useState("");
+  const [start, end] = props.range;
+  const startDate = start == null ? void 0 : start.format("YYYY-MM-DD");
+  const endDate = end == null ? void 0 : end.format("YYYY-MM-DD");
+  function reset() {
+    setError("");
+    setStartTime(transformTime("start", initRange == null ? void 0 : initRange[0], minDate));
+    setEndTime(transformTime("end", initRange == null ? void 0 : initRange[1], maxDate));
+  }
+  useImperativeHandle(ref, () => ({ reset }));
+  useEffect(() => {
+    reset();
+  }, [initRange]);
+  const validateTimeRange = useMemo(() => {
+    if (startDate && endDate) {
+      let _startDate = copyDay(dayjs(startDate));
+      let _endDate = copyDay(dayjs(endDate));
+      _startDate = _startDate.set("hour", parseInt(startTime[0] || "0")).set("minute", parseInt(startTime[1] || "0")).set("second", parseInt(startTime[2] || "0"));
+      _endDate = _endDate.set("hour", parseInt(endTime[0] || "0")).set("minute", parseInt(endTime[1] || "0")).set("second", parseInt(endTime[2] || "0"));
+      return _startDate.valueOf() <= _endDate.valueOf();
+    }
+    return false;
+  }, [endDate, endTime, startDate, startTime]);
+  function handleOk() {
+    if (!startDate || !endDate) {
+      return;
+    }
+    const validateResult = checkMinAndMaxTimeRange(
+      t,
+      range,
+      [startTime, endTime],
+      minDate,
+      maxDate
+    );
+    if (validateResult) {
+      setError(validateResult);
+      return;
+    } else if (!validateTimeRange && start && end) {
+      setError(t("components.end_time_cannot_be_less_than_start_time"));
+      return;
+    } else {
+      setError("");
+    }
+    onOk([startTime, endTime]);
+  }
+  return /* @__PURE__ */ React__default.createElement(AbsoluteTimeStyle.Time, null, /* @__PURE__ */ React__default.createElement("div", { className: "time-input-main" }, /* @__PURE__ */ React__default.createElement("div", { className: "time-input-container" }, /* @__PURE__ */ React__default.createElement("div", { className: "start-time" }, /* @__PURE__ */ React__default.createElement("p", { className: cx("date", Typo.Label.l4_regular) }, startDate || t("components.start_date")), /* @__PURE__ */ React__default.createElement(
+    InputTime,
+    {
+      value: startTime,
+      danger: !!error,
+      onChange: setStartTime
+    }
+  )), /* @__PURE__ */ React__default.createElement("div", { className: cx("to", Typo.Label.l3_regular) }, t("components.to")), /* @__PURE__ */ React__default.createElement("div", { className: "end-time" }, /* @__PURE__ */ React__default.createElement("p", { className: cx("date", Typo.Label.l4_regular) }, endDate || t("components.end_date")), /* @__PURE__ */ React__default.createElement(InputTime, { value: endTime, danger: !!error, onChange: setEndTime }))), /* @__PURE__ */ React__default.createElement(Button, { disabled: !start || !end, type: "primary", onClick: handleOk }, t("components.confirm"))), error ? /* @__PURE__ */ React__default.createElement("p", { className: "time-input-error" }, error) : null);
+});
+const AbsoluteDate = React__default.forwardRef(
+  (props, ref) => {
+    const { range, minDate, maxDate, onChange, onOk } = props;
+    const timeRef = useRef(null);
+    useImperativeHandle(ref, () => {
+      var _a;
+      return { reset: (_a = timeRef.current) == null ? void 0 : _a.reset };
+    });
+    function handleOk(timeRange) {
+      const [startTime, endTime] = timeRange;
+      const nowDate = dayjs();
+      const startDate = updateDate(startTime, range[0] || nowDate);
+      const endDate = updateDate(endTime, range[1] || nowDate);
+      onOk == null ? void 0 : onOk([startDate, endDate]);
+    }
+    return /* @__PURE__ */ React__default.createElement(AbsoluteTimeStyle.Wrapper, null, /* @__PURE__ */ React__default.createElement(
+      Calendar,
+      {
+        range,
+        minDate,
+        maxDate,
+        onChange
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      Time,
+      {
+        ref: timeRef,
+        range,
+        minDate,
+        maxDate,
+        onOk: handleOk
+      }
+    ));
+  }
+);
+var AbsoluteDate$1 = AbsoluteDate;
+
+export { AbsoluteDate$1 as default };

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

@@ -0,0 +1,286 @@
+import { ArrowChevronUp16BoldBlueIcon, ArrowChevronDown16BoldBlueIcon } from '@cloudtower/icons-react';
+import { cx } from '@linaria/core';
+import Button from '../../core/Button/index.js';
+import Icon from '../../core/Icon/index.js';
+import Input from '../../core/Input/index.js';
+import { Typo } from '../../core/Typo/index.js';
+import useElementIntersectionRatio from '../../hooks/useElementIntersectionRatio.js';
+import useParrotTranslation from '../../hooks/useParrotTranslation.js';
+import dayjs from 'dayjs';
+import React__default, { useState, useEffect, useRef } from 'react';
+import { getDiffMonthAndDate, getTime, checkDateNotInRange, getClassNameForDateBlock } from './common.js';
+import { CalendarStyle } from './DateRangePicker.style.js';
+
+const Year = (props) => {
+  const { year, onChange } = props;
+  const { t } = useParrotTranslation();
+  const [tmpYear, setTmpYear] = useState(year);
+  const [edit, setEdit] = useState(false);
+  function handleChangeYear() {
+    if (tmpYear <= 1900 || tmpYear >= 2500) {
+      setTmpYear(year);
+      onChange(year);
+    } else {
+      onChange(tmpYear);
+    }
+    setEdit(false);
+  }
+  return /* @__PURE__ */ React__default.createElement(CalendarStyle.Year, null, /* @__PURE__ */ React__default.createElement("div", { className: cx("year-number", Typo.Label.l1_bold) }, edit ? /* @__PURE__ */ React__default.createElement(
+    Input,
+    {
+      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.createElement("span", { className: "year-number-text", onClick: () => setEdit(true) }, year), t("common.year")), /* @__PURE__ */ React__default.createElement("div", { className: "year-control" }, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      prefixIcon: /* @__PURE__ */ React__default.createElement(Icon, { src: ArrowChevronUp16BoldBlueIcon }),
+      size: "small",
+      type: "secondary",
+      shape: "circle",
+      onClick: () => onChange(year - 1)
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      prefixIcon: /* @__PURE__ */ React__default.createElement(Icon, { src: 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 = useRef(null);
+  const datesContainerRef = useRef(null);
+  const headerRef = 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;
+  useEffect(() => {
+    var _a2, _b2;
+    if (dayjs().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 = [getTime(initYear, month, date), null];
+    } else if (rangeStart && !rangeEnd) {
+      _range[1] = dayjs(
+        `${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 = [getTime(initYear, month, date), null];
+    }
+    onRangeChange(_range);
+  }
+  return /* @__PURE__ */ React__default.createElement("li", { className: "month-container", ref: containerRef }, /* @__PURE__ */ React__default.createElement(
+    "header",
+    {
+      className: cx(Typo.Label.l1_bold, isPinned && "pinned"),
+      ref: headerRef
+    },
+    initMonth.month,
+    t("common.month")
+  ), /* @__PURE__ */ React__default.createElement("div", { className: "dates-in-month", ref: datesContainerRef }, new Array(initMonth.firstDateOfDay).fill(null).map((value, index) => /* @__PURE__ */ React__default.createElement("span", { key: `blank-date-${index}`, className: "blank" })), initMonth.dates.map((date) => {
+    const _date = getTime(initYear, initMonth.month, date);
+    const dateNotIncludeInRange = checkDateNotInRange(
+      _date,
+      minDate,
+      maxDate
+    );
+    const disabled = Boolean(
+      rangeStart && !rangeEnd && rangeStart.valueOf() > _date.valueOf()
+    ) || !dateNotIncludeInRange;
+    const dateClassName = 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.createElement(
+      "span",
+      {
+        key: `date-${date}`,
+        className: 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.createElement("span", { className: cx("date-text", dateClassName) }, date)
+    );
+  })));
+};
+const Month = (props) => {
+  const { year, range, minDate, maxDate, onRangeChange } = props;
+  const monthContainerRef = useRef(null);
+  const [month, setMonth] = useState([]);
+  const [highlightDay, setHighlightDay] = useState(() => {
+    if (range[0] && range[1]) {
+      return getDiffMonthAndDate(range[0], range[1]);
+    }
+    return null;
+  });
+  const controlHighlightDay = range[0] && range[1] ? getDiffMonthAndDate(range[0], range[1]) : null;
+  useEffect(() => {
+    const monthAndDate = [];
+    for (let month2 = 1; month2 <= 12; month2++) {
+      const time = dayjs(`${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 = 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.createElement(
+    CalendarStyle.Month,
+    {
+      ref: monthContainerRef,
+      onMouseMove: handleMouseOutMonthUl
+    },
+    /* @__PURE__ */ React__default.createElement("ul", null, month.map((m) => /* @__PURE__ */ React__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.createElement(CalendarStyle.Week, null, /* @__PURE__ */ React__default.createElement("li", { className: Typo.Label.l1_regular }, t("components.monday-simple")), /* @__PURE__ */ React__default.createElement("li", { className: Typo.Label.l1_regular }, t("components.tuesday-simple")), /* @__PURE__ */ React__default.createElement("li", { className: Typo.Label.l1_regular }, t("components.wednesday-simple")), /* @__PURE__ */ React__default.createElement("li", { className: Typo.Label.l1_regular }, t("components.thursday-simple")), /* @__PURE__ */ React__default.createElement("li", { className: Typo.Label.l1_regular }, t("components.friday-simple")), /* @__PURE__ */ React__default.createElement("li", { className: Typo.Label.l1_regular }, t("components.saturday-simple")), /* @__PURE__ */ React__default.createElement("li", { className: Typo.Label.l1_regular }, t("components.sunday-simple")));
+};
+const Calendar = (props) => {
+  const { range: initRange, minDate, maxDate, onChange } = props;
+  const [year, setYear] = useState(dayjs().year());
+  const [range, setRange] = useState(
+    initRange || [null, null]
+  );
+  useEffect(() => {
+    setRange(initRange || [null, null]);
+  }, [initRange]);
+  function handleRangeChange(newRange) {
+    setRange(newRange);
+    onChange == null ? void 0 : onChange(newRange);
+  }
+  return /* @__PURE__ */ React__default.createElement(CalendarStyle.Wrapper, { className: "date-range-picker-calendar" }, /* @__PURE__ */ React__default.createElement(Year, { year, onChange: setYear }), /* @__PURE__ */ React__default.createElement(Week, null), /* @__PURE__ */ React__default.createElement(
+    Month,
+    {
+      year,
+      range,
+      minDate,
+      maxDate,
+      onRangeChange: handleRangeChange
+    }
+  ));
+};
+var Calendar$1 = Calendar;
+
+export { Calendar$1 as default };

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

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

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

@@ -0,0 +1,149 @@
+import { cx } from '@linaria/core';
+import { Typo } from '../../core/Typo/index.js';
+import React__default, { useState, useRef } from 'react';
+import { time2stringByUnit } from './common.js';
+import { InputTimeStyle } from './DateRangePicker.style.js';
+
+const InputTime = (props) => {
+  const { className, value, danger, error, onChange, onBlur } = props;
+  const [focus, setFocus] = useState(false);
+  const [time, setTime] = useState(["", "", ""]);
+  const hourInputRef = useRef(null);
+  const minuteInputRef = useRef(null);
+  const secondInputRef = useRef(null);
+  const currentTime = value || time;
+  function handleChangeHour(event) {
+    var _a;
+    const hour = 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 = 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 = 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] = 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] = 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] = 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.createElement(InputTimeStyle.Wrapper, { className }, /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: cx(
+        "input-time",
+        focus && "focus",
+        (error || danger) && "error"
+      )
+    },
+    /* @__PURE__ */ React__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.createElement("span", { className: cx("connect-symbol", !!currentTime[0] && "inputted") }, ":"),
+    /* @__PURE__ */ React__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.createElement("span", { className: cx("connect-symbol", !!currentTime[1] && "inputted") }, ":"),
+    /* @__PURE__ */ React__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.createElement("p", { className: cx("error-message", Typo.Label.l4_regular) }, error) : null);
+};
+var InputTime$1 = InputTime;
+
+export { InputTime$1 as default };