@cashub/ui-elv 1.0.2 → 1.0.4

package/datetimePicker/DatetimePickerV2.js

@@ -1,395 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _hooks = require("@cashub/hooks");
-var _utils = require("@cashub/utils");
-var _DateTimePickerContext = _interopRequireDefault(require("./subComponent/DateTimePickerContext"));
-var _Button = _interopRequireDefault(require("../button/Button"));
-var _Input = _interopRequireDefault(require("../form/Input"));
-var _Month = _interopRequireDefault(require("./accordion/Month"));
-var _Year = _interopRequireDefault(require("./accordion/Year"));
-var _TimePicker = _interopRequireDefault(require("./TimePicker"));
-var _GMTDate = _interopRequireDefault(require("./utils/GMTDate"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const DatetimePickerV2 = _ref => {
-  let {
-    selected,
-    fixedYear,
-    minDate,
-    maxDate,
-    onConfirm,
-    disabled,
-    onBlur
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const [toggleElement, setToggleElement] = (0, _react.useState)(null);
-  const [contentElement, setContentElement] = (0, _react.useState)(null);
-  const [inputValue, setInputValue] = (0, _react.useState)(selected ? (0, _utils.datetimeTFormat)(selected) : '');
-  const [selectedDate, setSelectedDate] = (0, _react.useState)(selected ? (0, _utils.datetimeTFormat)((0, _GMTDate.default)(selected)) : (0, _utils.datetimeTFormat)((0, _GMTDate.default)(new Date())));
-  const [confirmDate, setConfirmDate] = (0, _react.useState)(selected ? (0, _utils.datetimeTFormat)(selected) : '');
-  const [displayPicker, setDisplayPicker] = (0, _react.useState)(false);
-  const [time, setTime] = (0, _react.useState)(() => {
-    const date = new Date((0, _utils.datetimeTFormat)(selected ? selected : (0, _utils.formatDate)(new Date())));
-    if (!selected) date.setHours(0, 0, 0, 0);
-    return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
-  });
-  const [accordionCurrentDisplayType, setAccordionCurrentDisplayType] = (0, _react.useState)(null);
-  const {
-    styles,
-    attributes,
-    state,
-    update
-  } = (0, _hooks.useCustomPopper)(toggleElement, contentElement, {
-    strategy: 'absolute',
-    placement: 'bottom-start'
-  });
-  const context = {
-    fixedYear,
-    minDate,
-    maxDate,
-    selectedDate,
-    setSelectedDate,
-    setAccordionCurrentDisplayType
-  };
-  const handleToggle = () => {
-    if (displayPicker && onBlur) {
-      onBlur();
-    }
-    setDisplayPicker(!displayPicker);
-    update();
-  };
-  const handleDisplayAccordionContent = (0, _react.useCallback)(type => {
-    if (accordionCurrentDisplayType === type) {
-      setAccordionCurrentDisplayType(null);
-    } else {
-      setAccordionCurrentDisplayType(type);
-    }
-  }, [accordionCurrentDisplayType]);
-  const handleConfirm = (0, _react.useCallback)(() => {
-    if (!confirmDate) return;
-    setSelectedDate(confirmDate);
-    onConfirm(inputValue);
-    setDisplayPicker(false);
-    setAccordionCurrentDisplayType(null);
-    if (displayPicker && onBlur) {
-      onBlur();
-    }
-  }, [confirmDate, inputValue, onConfirm, onBlur, displayPicker]);
-  const handleChangeDate = (0, _react.useCallback)((daysOfMonthForSelectedDate, firstWeekOfMonth, dayIndex, day) => {
-    const date = new Date(selectedDate);
-    // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
-    date.setDate(1);
-    const selectedYear = date.getFullYear();
-    const selectedMonth = date.getMonth();
-    if (!fixedYear) {
-      if (dayIndex < firstWeekOfMonth && selectedYear >= 1) {
-        if (selectedMonth === 0) {
-          date.setFullYear(selectedYear - 1);
-          date.setMonth(11);
-        } else {
-          date.setMonth(selectedMonth - 1);
-        }
-      } else if (dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
-        if (selectedMonth === 11) {
-          date.setFullYear(selectedYear + 1);
-          date.setMonth(0);
-        } else {
-          date.setMonth(selectedMonth + 1);
-        }
-      }
-      date.setDate(day);
-      setSelectedDate((0, _utils.datetimeTFormat)(date));
-      setConfirmDate((0, _utils.datetimeTFormat)(date));
-    } else if (fixedYear) {
-      if (dayIndex < firstWeekOfMonth) {
-        if (selectedMonth === 0) {
-          return;
-        }
-        date.setMonth(selectedMonth - 1);
-      } else if (dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
-        if (selectedMonth === 11) {
-          return;
-        }
-        date.setMonth(selectedMonth + 1);
-      }
-      date.setDate(day);
-      setSelectedDate((0, _utils.datetimeTFormat)(date));
-      setConfirmDate((0, _utils.datetimeTFormat)(date));
-    }
-  }, [fixedYear, selectedDate]);
-  const handleDisabled = (0, _react.useCallback)((firstWeekOfMonth, lastWeekOfMonth, daysOfMonthForSelectedDate, dayIndex, day) => {
-    let [year, month] = selectedDate.split('-');
-    if (year === '0001' && month === '01' && firstWeekOfMonth >= dayIndex + 1) {
-      return true;
-    }
-    let myDay = day.toString();
-    if (myDay.length === 1) myDay = `0${myDay}`;
-    if (fixedYear) {
-      if (month === '01' && dayIndex + 1 <= firstWeekOfMonth) {
-        // disabledDateInJan
-        return dayIndex < firstWeekOfMonth;
-      } else if (month === '12' && day + firstWeekOfMonth < dayIndex + 1) {
-        // disabledDateInDec
-        return dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth;
-      }
-    }
-    if (month === '01' && firstWeekOfMonth !== 0 && dayIndex + 1 <= firstWeekOfMonth) {
-      year = (+year - 1).toString();
-    } else if (month === '12' && lastWeekOfMonth !== 6 && day + firstWeekOfMonth < dayIndex + 1) {
-      year = (+year + 1).toString();
-    }
-    month = firstWeekOfMonth >= dayIndex + 1 ? +month - 1 : daysOfMonthForSelectedDate + firstWeekOfMonth < dayIndex + 1 ? +month + 1 : +month;
-    if (month === 0) {
-      month = 12;
-    } else if (month === 13) {
-      month = 1;
-    }
-    if (year.length === 1) year = `000${year}`;
-    if (year.length === 2) year = `00${year}`;
-    if (year.length === 3) year = `0${year}`;
-    if (month.toString().length === 1) month = `0${month}`;else month = month.toString();
-    const compareMinDateDate = (0, _utils.formatDate)((0, _utils.datetimeTFormat)(new Date((0, _GMTDate.default)((0, _utils.formatDate)(new Date(`${year}-${month}-${myDay}`)), 'date')).setHours(23, 59, 59, 59)));
-    const compareMaxDateDate = (0, _utils.formatDate)((0, _utils.datetimeTFormat)(new Date((0, _GMTDate.default)((0, _utils.formatDate)(new Date(`${year}-${month}-${myDay}`)), 'date')).setHours(0, 0, 0, 0)));
-    if (minDate && !maxDate && minDate > compareMinDateDate) {
-      return true;
-    }
-    if (maxDate && !minDate && maxDate < compareMaxDateDate) {
-      return true;
-    }
-    if (maxDate && minDate && (minDate > compareMinDateDate || maxDate < compareMaxDateDate)) {
-      return true;
-    }
-    return false;
-  }, [fixedYear, minDate, maxDate, selectedDate]);
-  const handleSelectedDay = (0, _react.useCallback)((day, index, firstWeekOfMonth, lastWeekOfMonth, totalDays) => {
-    const selectedDateObj = new Date(selectedDate);
-    const confirmDateObj = new Date(confirmDate);
-    if (confirmDateObj.getFullYear() === selectedDateObj.getFullYear() && confirmDateObj.getMonth() === selectedDateObj.getMonth() && confirmDateObj.getDate() === day) {
-      if (index + 1 > firstWeekOfMonth && index < totalDays - (6 - lastWeekOfMonth)) {
-        return true;
-      }
-      return false;
-    }
-    return false;
-  }, [selectedDate, confirmDate]);
-  const days = (0, _react.useMemo)(() => {
-    let date = new Date(selectedDate);
-    // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
-    date.setDate(1);
-    date.setMonth(date.getMonth() + 1);
-    date.setDate(0);
-    const daysOfMonthForSelectedDate = date.getDate();
-    date = new Date(selectedDate);
-    date.setMonth(date.getMonth() + 1 - 1);
-    date.setDate(0);
-    const daysOfPrevioueMonthForSelectedDate = date.getDate();
-    date = new Date(selectedDate);
-    // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
-    date.setDate(1);
-    const firstWeekOfMonth = date.getDay();
-    date = new Date(selectedDate);
-    // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
-    date.setDate(1);
-    date.setMonth(date.getMonth() + 1);
-    date.setDate(0);
-    const lastWeekOfMonth = date.getDay();
-    const days = [];
-    for (const day of [...Array(daysOfMonthForSelectedDate).keys()]) {
-      days.push(day + 1);
-    }
-    if (firstWeekOfMonth !== 0) {
-      for (let index = daysOfPrevioueMonthForSelectedDate; index > daysOfPrevioueMonthForSelectedDate - firstWeekOfMonth; index -= 1) {
-        if (date.getFullYear() === 1 && date.getMonth() === 0) {
-          days.unshift(null);
-        } else {
-          days.unshift(index);
-        }
-      }
-    }
-    if (lastWeekOfMonth !== 6) {
-      for (let index = 1; index <= 6 - lastWeekOfMonth; index += 1) {
-        days.push(index);
-      }
-    }
-    return days.map((day, index, arr) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Day, {
-        disabled: handleDisabled(firstWeekOfMonth, lastWeekOfMonth, daysOfMonthForSelectedDate, index, day),
-        onClick: () => {
-          handleChangeDate(daysOfMonthForSelectedDate, firstWeekOfMonth, index, day);
-        },
-        selected: handleSelectedDay(day, index, firstWeekOfMonth, lastWeekOfMonth, arr.length, daysOfMonthForSelectedDate),
-        children: day
-      }, index);
-    });
-  }, [selectedDate, handleChangeDate, handleSelectedDay, handleDisabled]);
-  const weeks = (0, _react.useMemo)(() => {
-    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(week => /*#__PURE__*/(0, _jsxRuntime.jsx)(Week, {
-      children: week
-    }, week));
-  }, []);
-  (0, _react.useEffect)(() => {
-    if (!selected) return;
-    const date = (0, _utils.datetimeTFormat)(selected);
-    const [, time] = date.split('T');
-    setSelectedDate(date);
-    setConfirmDate(date);
-    setTime(time);
-  }, [selected]);
-  (0, _react.useEffect)(() => {
-    if (!confirmDate) return;
-    const date = (0, _utils.formatDate)(confirmDate, 'date');
-    setInputValue(`${date} ${time}`);
-  }, [confirmDate, time]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimePickerContext.default.Provider, {
-    value: context,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
-      onOutsideClick: handleConfirm,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PickerInput, {
-        ref: setToggleElement,
-        value: inputValue,
-        onClick: handleToggle,
-        readOnly: true,
-        disabled: disabled
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-        ...attributes.popper,
-        style: styles.popper,
-        placement: state && state.placement,
-        ref: setContentElement,
-        displayPicker: displayPicker,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Body, {
-          accordionCurrentDisplayType: accordionCurrentDisplayType,
-          children: [!fixedYear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Year.default, {
-            expand: accordionCurrentDisplayType === 'year',
-            handleDisplayAccordionContent: () => {
-              handleDisplayAccordionContent('year');
-            }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Month.default, {
-            expand: accordionCurrentDisplayType === 'month',
-            handleDisplayAccordionContent: () => {
-              handleDisplayAccordionContent('month');
-            },
-            confirmDate: confirmDate
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateContent, {
-            children: [weeks, days]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker.default, {
-            value: time,
-            onChange: setTime
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Footer, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmButton, {
-            fullWidth: true,
-            alignCenter: true,
-            onClick: handleConfirm,
-            children: t('Confirm')
-          })
-        })]
-      })]
-    })
-  });
-};
-const Wrapper = _styledComponents.default.div`
-  padding-bottom: var(--spacing-s);
-  background: var(--color-background1);
-  border-radius: var(--border-radius);
-  border: var(--border-width) solid var(--border-color);
-  box-shadow: var(--box-shadow);
-  overflow: hidden;
-  width: 286px;
-  z-index: 1;
-  color: var(--font-on-background);
-
-  display: ${_ref2 => {
-  let {
-    displayPicker
-  } = _ref2;
-  return displayPicker ? 'block' : 'none';
-}};
-`;
-const Week = _styledComponents.default.div`
-  height: 36px;
-  width: calc(100% / 7);
-  border-radius: var(--border-radius-s);
-  line-height: 36px;
-  text-align: center;
-`;
-const Body = _styledComponents.default.div`
-  ${_ref3 => {
-  let {
-    accordionCurrentDisplayType
-  } = _ref3;
-  return accordionCurrentDisplayType && (0, _styledComponents.css)`
-      height: 216px;
-    `;
-}}
-
-  overflow: hidden;
-  padding: ${_ref4 => {
-  let {
-    accordionCurrentDisplayType
-  } = _ref4;
-  return accordionCurrentDisplayType === 'year' ? ' 0 4px var(--spacing-s) var(--spacing-s)' : '0 var(--spacing-s) 0 var(--spacing-s)';
-}};
-`;
-const Footer = _styledComponents.default.div`
-  padding: 0 var(--spacing-s);
-`;
-const PickerInput = (0, _styledComponents.default)(_Input.default)`
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-`;
-const Day = _styledComponents.default.button`
-  width: calc(100% / 7);
-  height: 36px;
-  border-radius: var(--border-radius-s);
-  line-height: 36px;
-  text-align: center;
-  padding: 0;
-  border: 0;
-  background: var(--color-background1);
-  color: var(--font-on-background);
-  &:hover {
-    background: var(--color-primary);
-  }
-
-  ${_ref5 => {
-  let {
-    selected
-  } = _ref5;
-  return selected && 'background: var(--color-hover);';
-}}
-
-  ${_ref6 => {
-  let {
-    disabled
-  } = _ref6;
-  return disabled && (0, _styledComponents.css)`
-      color: var(--font-on-mute);
-      background: none;
-      &:hover {
-        background: none;
-      }
-    `;
-}}
-`;
-const ConfirmButton = (0, _styledComponents.default)(_Button.default)`
-  margin: 16px auto 0;
-`;
-const DateContent = _styledComponents.default.div`
-  display: flex;
-  flex-wrap: wrap;
-`;
-var _default = exports.default = DatetimePickerV2;

package/datetimePicker/TimePicker.js

@@ -1,317 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _fa = require("react-icons/fa");
-var _moment = _interopRequireDefault(require("moment"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _lodash = _interopRequireDefault(require("lodash.uniqueid"));
-var _utils = require("@cashub/utils");
-var _hooks = require("./hooks");
-var _pad = _interopRequireDefault(require("./utils/pad"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const LENGTH = 2;
-const PAD_STRING = '0';
-const TimePicker = _ref => {
-  let {
-    labelName = 'Time',
-    value,
-    onChange,
-    showSecond = true
-  } = _ref;
-  const [hourId] = (0, _react.useState)((0, _lodash.default)('hour-'));
-  const [time, setTime] = (0, _react.useState)(() => {
-    let time = (0, _moment.default)(value, 'HH:mm:ss');
-
-    // use current time when time value is invalid
-    if (!value || !time.isValid()) {
-      time = (0, _moment.default)();
-    }
-    return {
-      hour: (0, _pad.default)(time.hour(), LENGTH, PAD_STRING),
-      minute: (0, _pad.default)(time.minute(), LENGTH, PAD_STRING),
-      second: (0, _pad.default)(time.second(), LENGTH, PAD_STRING)
-    };
-  });
-  (0, _react.useEffect)(() => {
-    if (typeof onChange === 'function' && time.hour && time.minute && time.second) {
-      onChange(`${time.hour}:${time.minute}:${time.second}`);
-    }
-  }, [onChange, time.hour, time.minute, time.second]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
-      htmlFor: hourId,
-      children: labelName
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Hour, {
-      id: hourId,
-      value: time.hour,
-      setTime: setTime
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Minute, {
-      value: time.minute,
-      setTime: setTime
-    }), showSecond === true && /*#__PURE__*/(0, _jsxRuntime.jsx)(Second, {
-      value: time.second,
-      setTime: setTime
-    })]
-  });
-};
-const Hour = _ref2 => {
-  let {
-    id,
-    value,
-    setTime
-  } = _ref2;
-  const NAME = 'hour';
-  const MIN = 0;
-  const MAX = 23;
-  const increase = (0, _hooks.useIncrease)(MIN, MAX, setTime, {
-    name: NAME,
-    length: LENGTH,
-    padString: PAD_STRING
-  });
-  const decrease = (0, _hooks.useDecrease)(MIN, MAX, setTime, {
-    name: NAME,
-    length: LENGTH,
-    padString: PAD_STRING
-  });
-  const changeNumber = (0, _hooks.useChangeNumber)(MIN, MAX, setTime, NAME);
-  const handleKeyUp = useKeyUp(increase, decrease, MIN, MAX, setTime, NAME);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Section, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
-      type: "text",
-      id: id,
-      maxLength: "2",
-      value: value,
-      onChange: event => {
-        changeNumber(event.target.value);
-      },
-      onKeyUp: handleKeyUp,
-      onBlur: event => {
-        setTime(previous => {
-          const newState = {
-            ...previous
-          };
-          newState[NAME] = (0, _pad.default)(event.target.value, LENGTH, PAD_STRING);
-          return newState;
-        });
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Stepper, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
-        onClick: increase,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleUp, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
-        onClick: decrease,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleDown, {})
-      })]
-    })]
-  });
-};
-const Minute = _ref3 => {
-  let {
-    value,
-    setTime
-  } = _ref3;
-  const NAME = 'minute';
-  const MIN = 0;
-  const MAX = 59;
-  const [minuteId] = (0, _react.useState)((0, _lodash.default)(`${NAME}-`));
-  const increase = (0, _hooks.useIncrease)(MIN, MAX, setTime, {
-    name: NAME,
-    length: LENGTH,
-    padString: PAD_STRING
-  });
-  const decrease = (0, _hooks.useDecrease)(MIN, MAX, setTime, {
-    name: NAME,
-    length: LENGTH,
-    padString: PAD_STRING
-  });
-  const changeNumber = (0, _hooks.useChangeNumber)(MIN, MAX, setTime, NAME);
-  const handleKeyUp = useKeyUp(increase, decrease, MIN, MAX, setTime, NAME);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Delimiter, {
-      children: ":"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Section, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
-        type: "text",
-        id: minuteId,
-        maxLength: "2",
-        value: value,
-        onChange: event => {
-          changeNumber(event.target.value);
-        },
-        onKeyUp: handleKeyUp,
-        onBlur: event => {
-          setTime(previous => {
-            const newState = {
-              ...previous
-            };
-            newState[NAME] = (0, _pad.default)(event.target.value, LENGTH, PAD_STRING);
-            return newState;
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Stepper, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
-          onClick: increase,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleUp, {})
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
-          onClick: decrease,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleDown, {})
-        })]
-      })]
-    })]
-  });
-};
-const Second = _ref4 => {
-  let {
-    value,
-    setTime
-  } = _ref4;
-  const NAME = 'second';
-  const MIN = 0;
-  const MAX = 59;
-  const [secondId] = (0, _react.useState)((0, _lodash.default)(`${NAME}-`));
-  const increase = (0, _hooks.useIncrease)(MIN, MAX, setTime, {
-    name: NAME,
-    length: LENGTH,
-    padString: PAD_STRING
-  });
-  const decrease = (0, _hooks.useDecrease)(MIN, MAX, setTime, {
-    name: NAME,
-    length: LENGTH,
-    padString: PAD_STRING
-  });
-  const changeNumber = (0, _hooks.useChangeNumber)(MIN, MAX, setTime, NAME);
-  const handleKeyUp = useKeyUp(increase, decrease, MIN, MAX, setTime, NAME);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Delimiter, {
-      children: ":"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Section, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
-        type: "text",
-        id: secondId,
-        maxLength: "2",
-        value: value,
-        onChange: event => {
-          changeNumber(event.target.value);
-        },
-        onKeyUp: handleKeyUp,
-        onBlur: event => {
-          setTime(previous => {
-            const newState = {
-              ...previous
-            };
-            newState[NAME] = (0, _pad.default)(event.target.value, LENGTH, PAD_STRING);
-            return newState;
-          });
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Stepper, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
-          onClick: increase,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleUp, {})
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperButton, {
-          onClick: decrease,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleDown, {})
-        })]
-      })]
-    })]
-  });
-};
-const useKeyUp = (increase, decrease, min, max, setState, name) => {
-  return (0, _react.useCallback)(event => {
-    const key = event.keyCode;
-    switch (key) {
-      case _utils.KEY_CODE.UP:
-        increase();
-        break;
-      case _utils.KEY_CODE.DOWN:
-        decrease();
-        break;
-      case _utils.KEY_CODE.HOME:
-        setState(previous => {
-          const newState = {
-            ...previous
-          };
-          newState[name] = (0, _pad.default)(min, LENGTH, PAD_STRING);
-          return newState;
-        });
-        break;
-      case _utils.KEY_CODE.END:
-        setState(previous => {
-          const newState = {
-            ...previous
-          };
-          newState[name] = (0, _pad.default)(max, LENGTH, PAD_STRING);
-          return newState;
-        });
-        break;
-      default:
-        break;
-    }
-  }, [increase, decrease, min, max, setState, name]);
-};
-const Container = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const Label = _styledComponents.default.label`
-  display: inline-block;
-  color: var(--font-on-background);
-  font-size: var(--font-body1);
-  margin-right: 12px;
-`;
-const Section = _styledComponents.default.div`
-  display: inline-flex;
-  height: 36px;
-  width: 56px;
-  padding: calc(var(--spacing-xs) / 2) var(--spacing-xs);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius-s);
-  background: transparent;
-  color: var(--font-on-background);
-`;
-const Input = _styledComponents.default.input`
-  width: calc(100% - 4px - 12px);
-  border: none;
-  background: transparent;
-  color: inherit;
-
-  &:focus {
-    outline: none;
-  }
-`;
-const StepperButton = _styledComponents.default.div.attrs(() => ({
-  role: 'button'
-}))`
-  width: 12px;
-  height: 12px;
-
-  > svg {
-    width: 100%;
-    height: 100%;
-    vertical-align: top;
-  }
-
-  &:first-child {
-    margin-bottom: 2px;
-  }
-
-  &:hover {
-    color: var(--color-primary);
-  }
-`;
-const Stepper = _styledComponents.default.div`
-  margin-left: calc(var(--spacing-xs) / 2);
-`;
-const Delimiter = _styledComponents.default.span`
-  display: inline-block;
-  color: var(--font-on-background);
-  font-size: var(--font-body1);
-  width: 12px;
-  text-align: center;
-`;
-var _default = exports.default = TimePicker;