@quintoandar-tokko/input-hours 1.0.91

package/lib/index.js

@@ -0,0 +1,277 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputHours = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _box = require("@quintoandar-tokko/box");
+var _icons = require("@quintoandar-tokko/icons");
+var _text = require("@quintoandar-tokko/text");
+var _input = require("@quintoandar-tokko/input");
+var _hooks = require("@quintoandar-tokko/hooks");
+var _dateFns = require("date-fns");
+var _theme = _interopRequireDefault(require("@quintoandar-tokko/theme"));
+var _excluded = ["inputTime", "arrayInput", "variant", "error", "keepArray", "val", "listenTime", "isSelected"];
+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 _getRequireWildcardCache(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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+var defaultHours = [];
+for (var i = 0; i < 24; i++) {
+  for (var j = 0; j < 4; j++) {
+    defaultHours.push("".concat(i < 10 ? '0' + i : i, ":").concat(j === 0 ? '00' : 15 * j));
+  }
+}
+var InputHours = exports.InputHours = function InputHours(_ref) {
+  var _InputContRef$current;
+  var _ref$inputTime = _ref.inputTime,
+    inputTime = _ref$inputTime === void 0 ? new Date() : _ref$inputTime,
+    _ref$arrayInput = _ref.arrayInput,
+    arrayInput = _ref$arrayInput === void 0 ? defaultHours : _ref$arrayInput,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$keepArray = _ref.keepArray,
+    keepArray = _ref$keepArray === void 0 ? false : _ref$keepArray,
+    _ref$val = _ref.val,
+    val = _ref$val === void 0 ? function () {} : _ref$val,
+    _ref$listenTime = _ref.listenTime,
+    listenTime = _ref$listenTime === void 0 ? new Date() : _ref$listenTime,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var InputContRef = (0, _react.useRef)(null);
+  var listItemsRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showDD = _useState2[0],
+    setShowDD = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    time = _useState4[0],
+    setTime = _useState4[1];
+  var _useState5 = (0, _react.useState)(variant),
+    _useState6 = _slicedToArray(_useState5, 2),
+    inputVariant = _useState6[0],
+    setInputVariant = _useState6[1];
+  (0, _react.useEffect)(function () {
+    setInputVariant(error ? 'focus' : 'default');
+  }, [error]);
+  (0, _hooks.useOnClickOutside)(InputContRef, function () {
+    return setShowDD(false);
+  });
+  var handleShowDD = function handleShowDD() {
+    return setShowDD(!showDD);
+  };
+  var hoursFormatRef = (0, _react.useRef)({
+    hours: 0,
+    minutes: 0,
+    seter: inputTime
+  });
+  var handleChangeTime = function handleChangeTime(theTime) {
+    setTime((0, _dateFns.format)(theTime, 'HH:mm'));
+    hoursFormatRef.current.seter = theTime;
+    val(hoursFormatRef.current.seter);
+  };
+  var handleArrows = function handleArrows(min) {
+    var seter = hoursFormatRef.current.seter;
+    if ((0, _dateFns.format)(seter, 'mm') % 15 && !keepArray) {
+      handleChangeTime((0, _dateFns.set)(seter, {
+        minutes: 0
+      }));
+    } else {
+      hoursFormatRef.current = _objectSpread(_objectSpread({}, hoursFormatRef.current), {}, {
+        seter: (0, _dateFns.addMinutes)(seter, min)
+      });
+      handleChangeTime((0, _dateFns.addMinutes)(seter, min));
+    }
+  };
+  var handleInputChange = function handleInputChange(event) {
+    var regex = /^[0-9]+$/;
+    var newValue = event.target.value.replace(/[^0-9]/g, '');
+    if (regex.test(newValue) || event.target.value === '') {
+      hoursFormatRef.current = _objectSpread(_objectSpread({}, hoursFormatRef.current), {}, {
+        hours: Number(newValue.substring(0, 2)) | 0,
+        minutes: Number(newValue.substring(2, 4)) | 0
+      });
+      var _hoursFormatRef$curre = hoursFormatRef.current,
+        hours = _hoursFormatRef$curre.hours,
+        minutes = _hoursFormatRef$curre.minutes;
+      if (hours >= 0 && hours <= 23 && minutes >= 0 && minutes <= 59) {
+        hoursFormatRef.current = _objectSpread(_objectSpread({}, hoursFormatRef.current), {}, {
+          seter: (0, _dateFns.set)(inputTime, {
+            hours: hours,
+            minutes: minutes
+          })
+        });
+        setTime(newValue);
+      }
+    }
+  };
+  var handleBlur = function handleBlur() {
+    handleChangeTime(hoursFormatRef.current.seter);
+    setInputVariant(error ? 'focus' : 'default');
+  };
+  var handleClickTime = function handleClickTime(h) {
+    var seter = (0, _dateFns.set)(inputTime, {
+      hours: h.substring(0, 2),
+      minutes: h.substring(3, 5)
+    });
+    handleChangeTime(seter);
+  };
+  var handleInitialTime = function handleInitialTime() {
+    var restTime = (0, _dateFns.format)(inputTime, 'mm') % 15;
+    var interval = restTime < 15 ? 30 : 15;
+    if (!isSelected) {
+      hoursFormatRef.current = _objectSpread(_objectSpread({}, hoursFormatRef.current), {}, {
+        seter: (0, _dateFns.addMinutes)(inputTime, interval - restTime)
+      });
+      handleChangeTime((0, _dateFns.addMinutes)(inputTime, interval - restTime));
+    } else {
+      handleChangeTime(inputTime);
+    }
+  };
+  var handleScroll = function handleScroll() {
+    var index = arrayInput.map(function (item) {
+      return item.substring(0, 5);
+    }).indexOf(time) * 26 - 52;
+    listItemsRef.current.scrollTop = index;
+  };
+  (0, _react.useEffect)(function () {
+    var currentTime = (0, _dateFns.format)(new Date(), 'HH:mm');
+    var input = (0, _dateFns.format)(listenTime, 'HH:mm');
+    if (currentTime !== input) {
+      handleClickTime(input);
+    }
+  }, [listenTime]);
+  (0, _react.useEffect)(function () {
+    handleInitialTime();
+  }, []);
+  (0, _react.useEffect)(function () {
+    handleScroll();
+  }, [time, listItemsRef.current]);
+  var compareArrayIndex = function compareArrayIndex(item) {
+    var cleanArray = arrayInput.map(function (i) {
+      return i.substring(0, 5);
+    });
+    return cleanArray.indexOf(item.substring(0, 5)) === cleanArray.indexOf(time);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    as: "form",
+    tx: "inputHours",
+    variant: inputVariant,
+    __css: {
+      position: 'relative',
+      width: 'fit-content',
+      borderRadius: '8px',
+      border: 'solid 1px transparent'
+    },
+    ref: InputContRef,
+    onClick: handleShowDD
+  }, /*#__PURE__*/_react["default"].createElement(_input.Input, _extends({}, props, {
+    className: "inputHourDisplay",
+    prefix: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+      icon: "icon-reloj",
+      fontSize: "14px"
+    }),
+    suffix: /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+      icon: "icon-dropdown",
+      fontSize: "14px",
+      style: {
+        cursor: 'pointer'
+      }
+    }),
+    maxLength: "4",
+    onChange: handleInputChange,
+    onFocus: function onFocus() {
+      return setInputVariant('active');
+    },
+    onBlur: handleBlur,
+    value: time,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter') {
+        e.target.blur();
+        handleBlur();
+        setShowDD(false);
+      }
+      if (e.key === 'ArrowDown') {
+        handleArrows(15);
+      }
+      if (e.key === 'ArrowUp') {
+        handleArrows(-15);
+      }
+    }
+  })), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+    as: "ul",
+    ref: listItemsRef,
+    className: "List",
+    __css: {
+      width: (_InputContRef$current = InputContRef.current) === null || _InputContRef$current === void 0 ? void 0 : _InputContRef$current.offsetWidth,
+      zIndex: '100',
+      backgroundColor: '#FFF',
+      visibility: showDD ? 'visible' : 'hidden',
+      position: 'absolute',
+      height: '140px',
+      overflow: 'auto',
+      top: '35px',
+      boxShadow: '4px 4px 12px rgba(87, 95, 99, 0.1)',
+      borderRadius: '8px',
+      padding: '0px',
+      listStyle: 'none',
+      overscrollBehavior: 'contain',
+      '::-webkit-scrollbar': {
+        width: '4px'
+      },
+      '::-webkit-scrollbar-track': {
+        '-webkit-border-radius': '4px',
+        background: 'transparent'
+      },
+      '::-webkit-scrollbar-thumb': {
+        '-webkit-border-radius': '4px',
+        background: '#6F838D'
+      }
+    }
+  }, arrayInput.map(function (h, i) {
+    return /*#__PURE__*/_react["default"].createElement(_box.Box, {
+      key: i,
+      as: "li",
+      tx: "liInputHours",
+      variant: compareArrayIndex(h) ? 'selected' : '',
+      __css: {
+        padding: '4px 7px',
+        cursor: 'pointer',
+        ':hover': {
+          backgroundColor: _theme["default"].colors.neutralGray8,
+          color: _theme["default"].colors.neutralGray1
+        },
+        ':first-child': {
+          borderRadius: '8px 8px 0px 0px'
+        },
+        ':last-child': {
+          borderRadius: '0px 0px 8px 8px'
+        }
+      },
+      onClick: function onClick() {
+        return handleClickTime(h);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_text.Text, {
+      variant: "body.fontSize14"
+    }, h));
+  })));
+};

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@quintoandar-tokko/input-hours",
+  "version": "1.0.91",
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "files": [
+    "lib"
+  ],
+  "dependencies": {
+    "@quintoandar-tokko/box": "^1.2.286",
+    "@quintoandar-tokko/icons": "^1.2.317",
+    "date-fns": "2.30.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "3c5995a3482c9cd1b428a69e135c934c37bce2ae"
+}