@cashub/ui-elv 1.0.0

package/datetimePicker/accordion/Month.js

@@ -0,0 +1,254 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _io = require("react-icons/io");
+var _md = require("react-icons/md");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _utils = require("@cashub/utils");
+var _DateTimePickerContext = _interopRequireDefault(require("../subComponent/DateTimePickerContext"));
+var _constant = require("../provider/constant");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
+const Month = _ref => {
+  let {
+    expand,
+    handleDisplayAccordionContent
+  } = _ref;
+  const {
+    selectedDate,
+    setSelectedDate,
+    minDate,
+    maxDate,
+    fixedYear,
+    setAccordionCurrentDisplayType
+  } = (0, _react.useContext)(_DateTimePickerContext.default);
+  const handleChangeMonth = (0, _react.useCallback)(month => {
+    // switch to the first day of the target month
+    const date = new Date(selectedDate);
+    date.setDate(1);
+    date.setMonth(month);
+    setSelectedDate((0, _utils.datetimeTFormat)(date));
+    setAccordionCurrentDisplayType(null);
+  }, [setAccordionCurrentDisplayType, setSelectedDate, selectedDate]);
+  const changeToPreviousMonth = () => {
+    const date = new Date(selectedDate);
+    handleChangeMonth(date.getMonth() <= 0 ? 11 : date.getMonth() - 1);
+  };
+  const changeToNextMonth = () => {
+    const date = new Date(selectedDate);
+    handleChangeMonth(date.getMonth() >= 11 ? 0 : date.getMonth() + 1);
+  };
+  const handleMonthItemDisable = (0, _react.useCallback)(month => {
+    let minDayDate;
+    let maxDayDate;
+    if (minDate) {
+      minDayDate = new Date((0, _utils.datetimeTFormat)(minDate));
+      minDayDate.setMonth(month);
+      minDayDate.setFullYear(new Date(selectedDate).getFullYear());
+    }
+    if (maxDate) {
+      maxDayDate = maxDate && new Date((0, _utils.datetimeTFormat)(maxDate));
+      maxDayDate.setFullYear(new Date(selectedDate).getFullYear());
+      maxDayDate.setMonth(month);
+    }
+    if (minDate !== undefined && maxDate !== undefined) {
+      return !(new Date((0, _utils.datetimeTFormat)(minDate)) <= minDayDate && maxDayDate <= new Date((0, _utils.datetimeTFormat)(maxDate)));
+    } else if (minDate) {
+      return !((0, _utils.datetimeTFormat)(minDate) <= (0, _utils.datetimeTFormat)(minDayDate));
+    } else if (maxDate) {
+      return !((0, _utils.datetimeTFormat)(maxDayDate) <= (0, _utils.datetimeTFormat)(maxDate));
+    }
+    return false;
+  }, [maxDate, minDate, selectedDate]);
+  const handleDisableArrow = (0, _react.useCallback)(arrowType => {
+    const date = new Date(selectedDate);
+    const selectedMonth = date.getMonth();
+    date.setDate(1);
+    if (arrowType === 'previous') {
+      date.setMonth(selectedMonth - 1 < 0 ? 11 : selectedMonth - 1);
+    } else {
+      date.setMonth(selectedMonth + 1 > 11 ? 0 : selectedMonth + 1);
+    }
+    if (fixedYear && !minDate && !maxDate || !minDate && !maxDate) {
+      return false;
+    }
+    const minDate1st = minDate && new Date((0, _utils.datetimeTFormat)(minDate));
+    const maxDate1st = maxDate && new Date((0, _utils.datetimeTFormat)(maxDate));
+    if (minDate && !maxDate) {
+      minDate1st.setDate(1);
+      minDate1st.setHours(0, 0, 0, 0);
+      return !(minDate1st <= date);
+    } else if (maxDate && !minDate) {
+      maxDate1st.setDate(1);
+      maxDate1st.setHours(23, 59, 59, 0);
+      return !(maxDate1st >= date);
+    } else if (minDate && maxDate) {
+      minDate1st.setDate(1);
+      minDate1st.setHours(0, 0, 0, 0);
+      maxDate1st.setDate(1);
+      maxDate1st.setHours(23, 59, 59, 0);
+      return !(minDate1st <= date && maxDate1st >= date);
+    }
+  }, [fixedYear, maxDate, minDate, selectedDate]);
+  const monthContent = (0, _react.useMemo)(() => {
+    const selectedMonth = new Date(selectedDate).getMonth();
+    return _constant.MONTH.map((month, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+      selected: selectedMonth === index,
+      onClick: () => {
+        handleChangeMonth(index);
+      },
+      disabled: handleMonthItemDisable(index),
+      children: month.text
+    }, month.number));
+  }, [selectedDate, handleChangeMonth, handleMonthItemDisable]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+        onClick: changeToPreviousMonth,
+        disabled: handleDisableArrow('previous'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdArrowBackIosNew, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: _constant.MONTH[new Date(selectedDate).getMonth()].text
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+        onClick: changeToNextMonth,
+        disabled: handleDisableArrow('next'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdArrowForwardIos, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+        $rotate: expand,
+        right: true,
+        onClick: handleDisplayAccordionContent,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_io.IoMdArrowDropup, {})
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Body, {
+      expand: expand,
+      fixedYear: fixedYear,
+      children: monthContent
+    })]
+  });
+};
+const Header = _styledComponents.default.div`
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  position: relative;
+
+  > div {
+    width: 72px;
+    line-height: 36px;
+    text-align: center;
+  }
+
+  &::before {
+    content: '';
+    border-bottom: var(--border-width) solid var(--border-color);
+    position: absolute;
+    width: 300px;
+    bottom: 0;
+    z-index: 1;
+    right: -16px;
+  }
+`;
+const IconButton = _styledComponents.default.button`
+  width: 36px;
+  height: 36px;
+  background: var(--color-background1);
+  border: none;
+  color: var(--font-on-background);
+  padding: 0;
+  transition: 0.3s;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+
+  ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && (0, _styledComponents.css)`
+      opacity: 0.5;
+
+      &:hover {
+        color: var(--font-on-background);
+      }
+    `;
+}}
+
+  ${_ref3 => {
+  let {
+    right,
+    $rotate
+  } = _ref3;
+  return right && `
+    position: absolute;
+    right: 0;
+    ${$rotate && (0, _styledComponents.css)`
+        transform: rotate(180deg);
+      `}
+  `;
+}}
+`;
+const Body = _styledComponents.default.div`
+  flex-wrap: wrap;
+  height: 0;
+  width: 100%;
+  display: ${_ref4 => {
+  let {
+    expand
+  } = _ref4;
+  return expand ? 'flex' : 'none';
+}};
+
+  ${_ref5 => {
+  let {
+    fixedYear
+  } = _ref5;
+  return (0, _styledComponents.css)`
+      min-height: ${fixedYear ? '192' : '144'}px;
+    `;
+}}
+  transition: .3s;
+
+  transition: 0.3s;
+`;
+const Item = _styledComponents.default.button`
+  width: calc(100% / 3);
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  border-radius: var(--border-radius-s);
+  padding: 0;
+  border: none;
+  color: var(--font-on-background);
+  background: var(--color-background1);
+
+  &:hover {
+    ${_ref6 => {
+  let {
+    disabled
+  } = _ref6;
+  return !disabled && 'background: var(--color-primary)';
+}}
+  }
+
+  ${_ref7 => {
+  let {
+    disabled
+  } = _ref7;
+  return disabled && 'color: var(--font-on-mute)';
+}}
+
+  ${_ref8 => {
+  let {
+    selected
+  } = _ref8;
+  return selected && 'background: var(--color-hover)';
+}}
+`;
+var _default = exports.default = Month;

package/datetimePicker/accordion/Year.js

@@ -0,0 +1,284 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _io = require("react-icons/io");
+var _md = require("react-icons/md");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _utils = require("@cashub/utils");
+var _DateTimePickerContext = _interopRequireDefault(require("../subComponent/DateTimePickerContext"));
+var _scrollbar = _interopRequireDefault(require("../../styles/mixin/scrollbar"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
+const Year = _ref => {
+  let {
+    expand,
+    handleDisplayAccordionContent
+  } = _ref;
+  const {
+    fixedYear,
+    minDate,
+    maxDate,
+    selectedDate,
+    setSelectedDate,
+    setAccordionCurrentDisplayType
+  } = (0, _react.useContext)(_DateTimePickerContext.default);
+  const bodyRef = (0, _react.useRef)(null);
+  const selectedYearRef = (0, _react.useRef)(null);
+  const [yearArr, setYearArr] = (0, _react.useState)([]);
+  const minYear = minDate ? new Date((0, _utils.datetimeTFormat)(minDate)).getFullYear() : 1;
+  const maxYear = maxDate ? new Date((0, _utils.datetimeTFormat)(maxDate)).getFullYear() : null;
+  const handleChangeYear = (0, _react.useCallback)(year => {
+    const date = new Date(selectedDate);
+    date.setFullYear(year);
+    setSelectedDate((0, _utils.datetimeTFormat)(date));
+    setAccordionCurrentDisplayType(null);
+  }, [selectedDate, setAccordionCurrentDisplayType, setSelectedDate]);
+  const changeToPreviousYear = (0, _react.useCallback)(() => {
+    const date = new Date(selectedDate);
+    if (date.getFullYear() > 1) {
+      handleChangeYear(date.getFullYear() - 1);
+    }
+  }, [selectedDate, handleChangeYear]);
+  const changeToNextYear = (0, _react.useCallback)(() => {
+    const date = new Date(selectedDate);
+    handleChangeYear(date.getFullYear() + 1);
+  }, [selectedDate, handleChangeYear]);
+  const handleYearItemDisable = (0, _react.useCallback)(year => {
+    if (minDate !== undefined && maxDate !== undefined) {
+      return !(minYear <= year && year <= maxYear);
+    }
+    if (minDate) {
+      return minYear > year;
+    } else if (maxDate) {
+      return maxYear < year;
+    }
+    return false;
+  }, [minYear, maxYear, maxDate, minDate]);
+  const handleDisableArrow = (0, _react.useCallback)(arrowType => {
+    const data = new Date(selectedDate);
+    if (arrowType === 'previous') {
+      return minYear > data.getFullYear() - 1;
+    } else if (arrowType === 'next') {
+      if (maxYear) {
+        return maxYear < data.getFullYear() + 1;
+      }
+      return false;
+    }
+  }, [selectedDate, minYear, maxYear]);
+  const yearContent = (0, _react.useMemo)(() => {
+    const data = new Date(selectedDate);
+    return yearArr.map((year, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+      ref: data.getFullYear() === year ? selectedYearRef : null,
+      selected: data.getFullYear() === year,
+      onClick: () => {
+        handleChangeYear(year);
+      },
+      disabled: handleYearItemDisable(year),
+      children: year
+    }, index));
+  }, [selectedDate, yearArr, handleChangeYear, handleYearItemDisable]);
+  (0, _react.useEffect)(() => {
+    const data = new Date(selectedDate);
+    if (!fixedYear) {
+      const start = data.getFullYear() - 16 > 0 ? data.getFullYear() - 16 : 1;
+      const end = data.getFullYear() + 16;
+      const yearRange = (0, _utils.generateRange)(start, end);
+      setYearArr(yearRange);
+    }
+  }, [fixedYear, selectedDate]);
+  const scroll = (0, _react.useCallback)(() => {
+    if (bodyRef?.current && selectedYearRef?.current) {
+      const body = bodyRef.current;
+      if (body.scrollTop + body.clientHeight >= body.scrollHeight - 90) {
+        body.removeEventListener('scroll', scroll);
+        setTimeout(() => {
+          setYearArr(previousParams => {
+            body.addEventListener('scroll', scroll);
+            const addYearRange = (0, _utils.generateRange)(previousParams[previousParams.length - 1] + 1, previousParams[previousParams.length - 1] + 15);
+            return [...previousParams, ...addYearRange];
+          });
+        }, 400);
+      } else if (body.scrollTop < 50) {
+        body.removeEventListener('scroll', scroll);
+        setTimeout(() => {
+          setYearArr(previousParams => {
+            body.addEventListener('scroll', scroll);
+            if (previousParams[0] - 15 <= 0) {
+              const addYearRange = (0, _utils.generateRange)(previousParams[0] - (previousParams[0] - 1), previousParams[0] - 1);
+              return [...addYearRange, ...previousParams];
+            }
+            setTimeout(() => {
+              body.scrollTo({
+                top: body.scrollTop + 96
+              });
+            }, 400);
+            const addYearRange = (0, _utils.generateRange)(previousParams[0] - 15, previousParams[0] - 1);
+            return [...addYearRange, ...previousParams];
+          });
+        }, 400);
+      }
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    bodyRef.current.addEventListener('scroll', scroll);
+  }, [scroll]);
+  (0, _react.useEffect)(() => {
+    if (expand && bodyRef?.current && selectedYearRef?.current) {
+      bodyRef.current.scrollTo({
+        top: selectedYearRef.current.offsetTop - bodyRef.current.offsetTop
+      });
+    }
+  }, [expand]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+        onClick: changeToPreviousYear,
+        disabled: handleDisableArrow('previous'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdArrowBackIosNew, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: new Date(selectedDate).getFullYear()
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+        onClick: changeToNextYear,
+        disabled: handleDisableArrow('next'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdArrowForwardIos, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+        $rotate: expand,
+        right: true,
+        onClick: handleDisplayAccordionContent,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_io.IoMdArrowDropup, {})
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Body, {
+      expand: expand,
+      fixedYear: fixedYear,
+      ref: bodyRef,
+      children: yearContent
+    })]
+  });
+};
+const Header = _styledComponents.default.div`
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  position: relative;
+
+  > div {
+    width: 72px;
+    line-height: 36px;
+    text-align: center;
+  }
+
+  &::before {
+    content: '';
+    border-bottom: var(--border-width) solid var(--border-color);
+    position: absolute;
+    width: 300px;
+    bottom: 0;
+    z-index: 1;
+    right: -16px;
+  }
+`;
+const IconButton = _styledComponents.default.button`
+  width: 36px;
+  height: 36px;
+  background: var(--color-background1);
+  border: none;
+  color: var(--font-on-background);
+  padding: 0;
+  transition: 0.3s;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+
+  ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && (0, _styledComponents.css)`
+      opacity: 0.5;
+
+      &:hover {
+        color: var(--font-on-background);
+      }
+    `;
+}}
+
+  ${_ref3 => {
+  let {
+    right,
+    $rotate
+  } = _ref3;
+  return right && `
+    position: absolute;
+    right: 0;
+    ${$rotate && (0, _styledComponents.css)`
+        transform: rotate(180deg);
+      `}
+  `;
+}}
+`;
+const Body = _styledComponents.default.div`
+  flex-wrap: wrap;
+  height: 0;
+  width: 100%;
+  display: ${_ref4 => {
+  let {
+    expand
+  } = _ref4;
+  return expand ? 'flex' : 'none';
+}};
+  transition: 0.3s;
+  overflow-y: scroll;
+  gap: 12px 0;
+  ${_scrollbar.default}
+
+  ${_ref5 => {
+  let {
+    fixedYear
+  } = _ref5;
+  return (0, _styledComponents.css)`
+      height: ${fixedYear ? '144' : '192'}px};
+    `;
+}}
+`;
+const Item = _styledComponents.default.button`
+  width: calc(100% / 3);
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  border-radius: var(--border-radius-s);
+  padding: 0;
+  border: none;
+  color: var(--font-on-background);
+  background: var(--color-background1);
+
+  &:hover {
+    ${_ref6 => {
+  let {
+    disabled
+  } = _ref6;
+  return !disabled && 'background: var(--color-primary);';
+}}
+  }
+
+  ${_ref7 => {
+  let {
+    disabled
+  } = _ref7;
+  return disabled && 'color: var(--font-on-mute)';
+}}
+
+  ${_ref8 => {
+  let {
+    selected
+  } = _ref8;
+  return selected && 'background: var(--color-hover)';
+}}
+`;
+var _default = exports.default = Year;

package/datetimePicker/hooks/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useChangeNumber", {
+  enumerable: true,
+  get: function () {
+    return _useChangeNumber.default;
+  }
+});
+Object.defineProperty(exports, "useDecrease", {
+  enumerable: true,
+  get: function () {
+    return _useDecrease.default;
+  }
+});
+Object.defineProperty(exports, "useIncrease", {
+  enumerable: true,
+  get: function () {
+    return _useIncrease.default;
+  }
+});
+var _useIncrease = _interopRequireDefault(require("./useIncrease"));
+var _useDecrease = _interopRequireDefault(require("./useDecrease"));
+var _useChangeNumber = _interopRequireDefault(require("./useChangeNumber"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/datetimePicker/hooks/useChangeNumber.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _utils = require("@cashub/utils");
+const useChangeNumber = (min, max, setState, name) => {
+  return (0, _react.useCallback)(number => {
+    let value = String(number);
+
+    // update value when value is a valid value
+    if (value.length > 0) {
+      // if value is not a integer, then remove last char
+      if (!(0, _utils.isInteger)(value)) {
+        value = value.substring(0, value.length - 1);
+      }
+
+      // use min value instead when exceed minimum
+      if (value.length >= String(min).length && value < min) {
+        value = min;
+      }
+
+      // use max value instead when exceed maximum
+      if (value > max) {
+        value = max;
+      }
+    }
+    setState(previous => {
+      if (name && typeof previous === 'object') {
+        const newState = {
+          ...previous
+        };
+        newState[name] = value;
+        return newState;
+      }
+      return value;
+    });
+  }, [min, max, setState, name]);
+};
+var _default = exports.default = useChangeNumber;

package/datetimePicker/hooks/useDecrease.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _pad = _interopRequireDefault(require("../utils/pad"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const useDecrease = function (min, max, setState) {
+  let config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  const {
+    name,
+    length,
+    padString
+  } = config;
+  return (0, _react.useCallback)(() => {
+    setState(previous => {
+      if (name && typeof previous === 'object') {
+        let value = parseInt(previous[name], 10) - 1;
+        if (value < min) {
+          value = max;
+        }
+        const newState = {
+          ...previous
+        };
+        newState[name] = (0, _pad.default)(value, length, padString);
+        return newState;
+      }
+      let value = parseInt(previous, 10) - 1;
+      if (value < min) {
+        value = max;
+      }
+      return (0, _pad.default)(value, length, padString);
+    });
+  }, [min, max, setState, name, length, padString]);
+};
+var _default = exports.default = useDecrease;

package/datetimePicker/hooks/useIncrease.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _pad = _interopRequireDefault(require("../utils/pad"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const useIncrease = function (min, max, setState) {
+  let config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  const {
+    name,
+    length,
+    padString
+  } = config;
+  return (0, _react.useCallback)(() => {
+    setState(previous => {
+      if (name && typeof previous === 'object') {
+        let value = parseInt(previous[name], 10) + 1;
+        if (value > max) {
+          value = min;
+        }
+        const newState = {
+          ...previous
+        };
+        newState[name] = (0, _pad.default)(value, length, padString);
+        return newState;
+      }
+      let value = parseInt(previous, 10) + 1;
+      if (value > max) {
+        value = min;
+      }
+      return (0, _pad.default)(value, length, padString);
+    });
+  }, [min, max, setState, name, length, padString]);
+};
+var _default = exports.default = useIncrease;