@planningcenter/tapestry-react 2.9.0-rc.1 → 2.9.0-rc.3

package/dist/cjs/TimeField/TimeField.js

@@ -11,12 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _Box = _interopRequireDefault(require("../Box"));
@@ -33,248 +27,302 @@ var _utils = require("../utils");
 
 var _utils2 = require("./utils");
 
-var MIN_MINUTE = 0;
-var MAX_MINUTE = 59;
-
-var TimeField = /*#__PURE__*/function (_Component) {
-  (0, _inheritsLoose2["default"])(TimeField, _Component);
+var isMobile = typeof window !== 'undefined' ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) : false;
+
+var TimeField = function TimeField(_ref) {
+  var ignoredKeys = _ref.ignoredKeys,
+      interval = _ref.interval,
+      _ref$isIOS = _ref.isIOS,
+      isIOS = _ref$isIOS === void 0 ? false : _ref$isIOS,
+      max = _ref.max,
+      min = _ref.min,
+      onChange = _ref.onChange,
+      _ref$twelveHourClock = _ref.twelveHourClock,
+      twelveHourClock = _ref$twelveHourClock === void 0 ? true : _ref$twelveHourClock,
+      value = _ref.value,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["ignoredKeys", "interval", "isIOS", "max", "min", "onChange", "twelveHourClock", "value"]);
+  var ref = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(value[0]),
+      hours = _useState[0],
+      setHours = _useState[1];
+
+  var _useState2 = (0, _react.useState)(value[1]),
+      minutes = _useState2[0],
+      setMinutes = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(hours < 12 ? 'AM' : 'PM'),
+      meridiem = _useState3[0],
+      setMeridiem = _useState3[1];
+
+  var _useState4 = (0, _react.useState)(twelveHourClock && hours > 12 ? hours - 12 : hours),
+      hoursDisplay = _useState4[0],
+      setHoursDisplay = _useState4[1];
+
+  var decrementHoursBy = function decrementHoursBy(amount) {
+    var updatedHours = hours - amount;
+
+    if (twelveHourClock) {
+      if (updatedHours > 12) {
+        setHours(updatedHours);
+        setHoursDisplay(updatedHours - 12);
+      } else if (updatedHours <= 12 && updatedHours > 0) {
+        setHours(updatedHours);
+        setHoursDisplay(updatedHours);
+      } else if (updatedHours === 0) {
+        setHours(updatedHours);
+        setHoursDisplay(12);
+      } else {
+        setHours(23);
+        setHoursDisplay(11);
+      }
+    } else {
+      if (updatedHours < 0) {
+        setHours(23);
+        setHoursDisplay(23);
+      } else {
+        setHours(updatedHours);
+        setHoursDisplay(updatedHours);
+      }
+    }
+  };
 
-  function TimeField(props) {
-    var _this;
+  var incrementHoursBy = function incrementHoursBy(amount) {
+    var updatedHours = hours + amount;
 
-    _this = _Component.call(this, props) || this;
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setInputBoxRef", function (component) {
-      _this.inputBox = component;
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateTime", function (time) {
-      if (time === void 0) {
-        time = {};
+    if (twelveHourClock) {
+      if (updatedHours > 0 && updatedHours <= 12) {
+        setHours(updatedHours);
+        setHoursDisplay(updatedHours);
+      } else if (updatedHours > 12 && updatedHours < 24) {
+        setHours(updatedHours);
+        setHoursDisplay(updatedHours - 12);
+      } else {
+        setHours(0);
+        setHoursDisplay(12);
+      }
+    } else {
+      if (updatedHours < 24) {
+        setHours(updatedHours);
+        setHoursDisplay(updatedHours);
+      } else {
+        setHours(0);
+        setHoursDisplay(0);
       }
+    }
+  };
 
-      var _this$props$value = _this.props.value,
-          hours = _this$props$value[0],
-          minutes = _this$props$value[1];
+  var decrementMinutesBy = function decrementMinutesBy(amount) {
+    var updatedMinutes = minutes - amount;
 
-      if (time.hours !== undefined) {
-        hours = time.hours;
-      }
+    if (updatedMinutes >= 0) {
+      setMinutes(updatedMinutes);
+    } else {
+      setMinutes(59);
+      decrementHoursBy(1);
+    }
+  };
 
-      if (time.minutes !== undefined) {
-        minutes = time.minutes;
-      }
+  var incrementMinutesBy = function incrementMinutesBy(amount) {
+    var updatedMinutes = minutes + amount;
 
-      if (_this.props.twelveHourClock && !_this.props.isIOS) {
-        if (hours > 11 && _this.state.meridiem === 'AM') {
-          hours -= 12;
-        } else if (hours < 12 && _this.state.meridiem === 'PM') {
-          hours += 12;
-        }
-      }
+    if (updatedMinutes <= 59) {
+      setMinutes(updatedMinutes);
+    } else {
+      setMinutes(0);
+      incrementHoursBy(1);
+    }
+  };
 
-      _this.props.onChange([hours, minutes]);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateHours", function (amount) {
-      _this.props.onChange((0, _utils2.addHoursToTime)(_this.props.value, amount));
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateMinutes", function (amount) {
-      _this.props.onChange((0, _utils2.addMinutesToTime)(_this.props.value, amount));
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleMeridiem", function () {
-      _this.setState(function (state) {
-        return {
-          meridiem: state.meridiem === 'AM' ? 'PM' : 'AM'
-        };
-      }, _this.updateTime);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleHoursChange", function (hours) {
-      if (_this.twelveHourClock && hours === 0) {
-        _this.updateTime({
-          hours: 12
-        });
-      } else {
-        _this.updateTime({
-          hours: hours
-        });
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleHoursKeyDown", function (event) {
-      var hour = Number(event.target.value);
-      var isTwelveHourClock = _this.props.twelveHourClock;
-      var isHourEleven = _utils2.HOURS_TO_NOON - 1;
-      var maxHour = isTwelveHourClock ? _utils2.HOURS_TO_NOON : _utils2.HOURS_IN_DAY - 1;
-      var minHour = isTwelveHourClock ? 1 : 0;
-
-      if (event.key === 'ArrowRight') {
-        _this.inputBox.focus(1);
-      }
+  var toggleMeridiem = function toggleMeridiem() {
+    if (meridiem === 'AM') {
+      setMeridiem('PM');
 
-      if (event.key === 'ArrowUp' && isTwelveHourClock && hour === isHourEleven) {
-        _this.toggleMeridiem();
+      if (hours >= 0 && hours <= 12) {
+        setHours(hours + 12);
       }
+    } else {
+      setMeridiem('AM');
 
-      if (event.key === 'ArrowUp' && hour === maxHour) {
-        _this.updateHours(1);
+      if (hours >= 12 && hours < 24) {
+        setHours(hours - 12);
       }
+    }
+  };
 
-      if (event.key === 'ArrowDown' && isTwelveHourClock && hour === minHour) {
-        _this.toggleMeridiem();
-      }
+  var handleHoursKeyDown = function handleHoursKeyDown(event) {
+    if (ignoredKeys && ignoredKeys.includes(event.key)) {
+      return;
+    }
 
-      if (event.key === 'ArrowDown' && hour === minHour) {
-        _this.updateHours(-1);
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMinutesChange", function (minutes) {
-      _this.updateTime({
-        minutes: minutes
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMinutesKeyDown", function (event) {
-      var minute = Number(event.target.value);
-
-      if (_this.props.ignoredKeys.includes(event.key)) {
-        return;
-      }
+    if (event.key === 'Backspace') {
+      event.preventDefault();
+    }
 
-      if (event.key === 'ArrowLeft') {
-        _this.inputBox.focus(0);
-      }
+    if (event.key === 'ArrowRight') {
+      ref.current.node.children[2].focus();
+    }
 
-      if (event.key === 'ArrowRight') {
-        _this.inputBox.focus(2);
-      }
+    if (event.key === 'ArrowUp') {
+      incrementHoursBy(1);
+    }
 
-      if (event.key === 'ArrowUp' && minute >= MAX_MINUTE) {
-        _this.updateMinutes(1);
-      }
+    if (event.key === 'ArrowDown') {
+      decrementHoursBy(1);
+    }
+  };
 
-      if (event.key === 'ArrowDown' && minute <= MIN_MINUTE) {
-        _this.updateMinutes(-1);
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAMPMKeyDown", function (event) {
-      if (_this.props.ignoredKeys.includes(event.key)) {
-        return;
-      }
+  var handleHoursChange = function handleHoursChange(e) {
+    setHoursDisplay(e);
+    !twelveHourClock && setHours(e);
+  };
 
-      if (event.key !== 'Tab' && !(event.metaKey && event.key === 'r')) {
-        event.preventDefault();
-      }
+  var handleHoursBlur = function handleHoursBlur(e) {
+    var updatedHoursValue = parseInt(e.target.value);
 
-      if (event.key === 'ArrowLeft') {
-        _this.inputBox.focus(1);
+    if (twelveHourClock) {
+      if (updatedHoursValue === 0) {
+        setHours(0);
+        setHoursDisplay(12);
+      } else if (hours <= 12) {
+        setHours(updatedHoursValue);
+        setHoursDisplay(updatedHoursValue);
+      } else {
+        setHours(updatedHoursValue + 12);
+        setHoursDisplay(updatedHoursValue);
       }
+    } else {
+      setHours(updatedHoursValue);
+      setHoursDisplay(updatedHoursValue);
+    }
+  };
 
-      if (event.key.toLowerCase() === 'a' && _this.state.meridiem === 'PM' || event.key.toLowerCase() === 'p' && _this.state.meridiem === 'AM' || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-        _this.toggleMeridiem();
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleIOSChange", function (event) {
-      var _event$target$value$s = event.target.value.split(':'),
-          hours = _event$target$value$s[0],
-          minutes = _event$target$value$s[1];
-
-      _this.updateTime({
-        hours: +hours,
-        minutes: +minutes
-      });
-    });
-    _this.state = {
-      meridiem: (0, _utils2.getMeridiem)(props.value)
-    };
-    return _this;
-  }
-
-  var _proto = TimeField.prototype;
-
-  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
-    if (lastProps.value[0] !== this.props.value[0]) {
-      this.setState({
-        meridiem: (0, _utils2.getMeridiem)(this.props.value)
-      });
+  var handleMinutesKeyDown = function handleMinutesKeyDown(event) {
+    if (event.key === 'ArrowLeft') {
+      ref.current.node.children[0].focus();
+    }
+
+    if (event.key === 'ArrowRight') {
+      ref.current.node.children[3].focus();
+    }
+
+    if (event.key === 'ArrowUp') {
+      incrementMinutesBy(1);
     }
+
+    if (event.key === 'ArrowDown') {
+      decrementMinutesBy(1);
+    }
+  };
+
+  var handleAMPMKeyDown = function handleAMPMKeyDown(event) {
+    if (ignoredKeys && ignoredKeys.includes(event.key)) {
+      return;
+    }
+
+    if (event.key !== 'Tab' && !(event.metaKey && event.key === 'r')) {
+      event.preventDefault();
+    }
+
+    if (event.key === 'ArrowLeft') {
+      ref.current.node.children[2].focus();
+    }
+
+    if (event.key.toLowerCase() === 'a' && meridiem === 'PM' || event.key.toLowerCase() === 'p' && meridiem === 'AM' || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      toggleMeridiem();
+    }
+  };
+
+  var updateTime = function updateTime(time) {
+    var hours = time[0],
+        minutes = time[1];
+    return onChange([hours, minutes]);
   };
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        ignoredKeys = _this$props.ignoredKeys,
-        value = _this$props.value,
-        min = _this$props.min,
-        max = _this$props.max,
-        interval = _this$props.interval,
-        onChange = _this$props.onChange,
-        twelveHourClock = _this$props.twelveHourClock,
-        isIOS = _this$props.isIOS,
-        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["ignoredKeys", "value", "min", "max", "interval", "onChange", "twelveHourClock", "isIOS"]);
-    var hours = value[0],
-        minutes = value[1];
-    return isIOS ? /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({}, restProps, {
-      type: "time",
-      autoWidth: hours + ":" + (0, _utils.padNumber)(minutes, 2) + " " + this.state.meridiem,
-      value: (0, _utils.padNumber)(hours, 2) + ":" + (0, _utils.padNumber)(minutes, 2),
-      onChange: this.handleIOSChange
-    })) : /*#__PURE__*/_react["default"].createElement(_InputBox["default"], (0, _extends2["default"])({
-      ref: this.setInputBoxRef,
-      inline: true
-    }, restProps), /*#__PURE__*/_react["default"].createElement(_NumberField["default"], {
-      autoWidth: false,
-      fontVariantNumeric: "tabular-nums",
-      moveFocusOnMax: true,
-      value: twelveHourClock ? hours % _utils2.HOURS_TO_NOON || _utils2.HOURS_TO_NOON : hours,
-      min: 0,
-      max: twelveHourClock ? _utils2.HOURS_TO_NOON : _utils2.HOURS_IN_DAY - 1,
-      pad: 2,
-      grow: 0,
-      width: "2ch",
-      textAlign: "center",
-      "aria-label": "Hours",
-      onChange: this.handleHoursChange,
-      onKeyDown: this.handleHoursKeyDown,
-      ignoredKeys: ignoredKeys
-    }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-      as: "span",
-      width: 0.5,
-      textAlign: "center",
-      userSelect: "none"
-    }, ":"), /*#__PURE__*/_react["default"].createElement(_NumberField["default"], {
-      autoWidth: false,
-      fontVariantNumeric: "tabular-nums",
-      moveFocusOnMax: true,
-      value: minutes,
-      min: MIN_MINUTE,
-      max: MAX_MINUTE,
-      pad: 2,
-      grow: 0,
-      width: "2ch",
-      textAlign: "center",
-      "aria-label": "Minutes",
-      onChange: this.handleMinutesChange,
-      onKeyDown: this.handleMinutesKeyDown,
-      ignoredKeys: ignoredKeys
-    }), twelveHourClock && /*#__PURE__*/_react["default"].createElement(_InputField["default"], {
-      highlightOnInteraction: true,
-      value: this.state.meridiem,
-      grow: 0,
-      width: "2em",
-      textAlign: "center",
-      "aria-label": "AM/PM",
-      onChange: _utils.noop // prevent React warnings
-      ,
-      onKeyDown: this.handleAMPMKeyDown
-    }));
+  var handleMobileChange = function handleMobileChange(event) {
+    var _event$target$value$s = event.target.value.split(':'),
+        hours = _event$target$value$s[0],
+        minutes = _event$target$value$s[1];
+
+    if (hours || minutes) {
+      setHours(hours);
+      setMinutes(minutes);
+    } else {
+      setHours(0);
+      setMinutes(0);
+    }
   };
 
-  return TimeField;
-}(_react.Component);
-
-(0, _defineProperty2["default"])(TimeField, "addHoursToTime", _utils2.addHoursToTime);
-(0, _defineProperty2["default"])(TimeField, "addMinutesToTime", _utils2.addMinutesToTime);
-(0, _defineProperty2["default"])(TimeField, "addTimeToDate", _utils2.addTimeToDate);
-(0, _defineProperty2["default"])(TimeField, "getTimeFromDate", _utils2.getTimeFromDate);
-(0, _defineProperty2["default"])(TimeField, "defaultProps", {
-  twelveHourClock: true,
-  ignoredKeys: [],
-  isIOS: _utils.isIOS
-});
+  (0, _react.useEffect)(function () {
+    if (hours < 12) {
+      setMeridiem('AM');
+    } else {
+      setMeridiem('PM');
+    }
+
+    updateTime([hours, minutes]);
+  }, [hours, minutes]);
+  return isMobile || isIOS ? /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({}, restProps, {
+    type: "time",
+    autoWidth: hours + ":" + (0, _utils.padNumber)(minutes, 2) + " " + meridiem,
+    value: (0, _utils.padNumber)(hours, 2) + ":" + (0, _utils.padNumber)(minutes, 2),
+    onChange: handleMobileChange
+  })) : /*#__PURE__*/_react["default"].createElement(_InputBox["default"], (0, _extends2["default"])({
+    ref: ref,
+    inline: true
+  }, restProps), /*#__PURE__*/_react["default"].createElement(_NumberField["default"], {
+    autoWidth: false,
+    fontVariantNumeric: "tabular-nums",
+    moveFocusOnMax: true,
+    value: hoursDisplay,
+    min: 0,
+    max: twelveHourClock ? 12 : 23,
+    pad: 2,
+    grow: 0,
+    width: "2ch",
+    textAlign: "center",
+    "aria-label": "Hours",
+    onChange: handleHoursChange,
+    onKeyDown: handleHoursKeyDown,
+    onBlur: handleHoursBlur,
+    ignoredKeys: ignoredKeys
+  }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    as: "span",
+    width: 0.5,
+    textAlign: "center",
+    userSelect: "none"
+  }, ":"), /*#__PURE__*/_react["default"].createElement(_NumberField["default"], {
+    autoWidth: false,
+    fontVariantNumeric: "tabular-nums",
+    moveFocusOnMax: true,
+    value: minutes,
+    min: 0,
+    max: 59,
+    pad: 2,
+    grow: 0,
+    width: "2ch",
+    textAlign: "center",
+    "aria-label": "Minutes",
+    onChange: function onChange(e) {
+      return setMinutes(e);
+    },
+    onKeyDown: handleMinutesKeyDown,
+    ignoredKeys: ignoredKeys
+  }), twelveHourClock && /*#__PURE__*/_react["default"].createElement(_InputField["default"], {
+    highlightOnInteraction: true,
+    value: meridiem,
+    grow: 0,
+    width: "2em",
+    textAlign: "center",
+    "aria-label": "AM/PM",
+    onChange: _utils.noop,
+    onKeyDown: handleAMPMKeyDown
+  }));
+};
+
+TimeField.addHoursToTime = _utils2.addHoursToTime;
+TimeField.addMinutesToTime = _utils2.addMinutesToTime;
+TimeField.addTimeToDate = _utils2.addTimeToDate;
+TimeField.getTimeFromDate = _utils2.getTimeFromDate;
 var _default = TimeField;
 exports["default"] = _default;