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

package/dist/esm/TimeField/TimeField.js

@@ -1,277 +1,304 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React, { Component } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Box from '../Box';
 import Input from '../Input/Input';
 import InputBox from '../Input/InputBox';
 import InputField from '../Input/InputField';
 import NumberField from '../NumberField';
-import { isIOS, noop, padNumber } from '../utils';
-import { HOURS_TO_NOON, HOURS_IN_DAY, addHoursToTime, addMinutesToTime, addTimeToDate, getMeridiem, getTimeFromDate } from './utils';
-var MIN_MINUTE = 0;
-var MAX_MINUTE = 59;
+import { noop, padNumber } from '../utils';
+import { addHoursToTime, addMinutesToTime, addTimeToDate, getTimeFromDate } from './utils';
 
-var _ref = /*#__PURE__*/React.createElement(Box, {
+var _ref2 = /*#__PURE__*/React.createElement(Box, {
   as: "span",
   width: 0.5,
   textAlign: "center",
   userSelect: "none"
 }, ":");
 
-var TimeField = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(TimeField, _Component);
-
-  function TimeField(props) {
-    var _this;
-
-    _this = _Component.call(this, props) || this;
-
-    _defineProperty(_assertThisInitialized(_this), "setInputBoxRef", function (component) {
-      _this.inputBox = component;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "updateTime", function (time) {
-      if (time === void 0) {
-        time = {};
+var TimeField = function TimeField(_ref) {
+  var ignoredKeys = _ref.ignoredKeys,
+      interval = _ref.interval,
+      isIOS = _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 = _objectWithoutPropertiesLoose(_ref, ["ignoredKeys", "interval", "isIOS", "max", "min", "onChange", "twelveHourClock", "value"]);
+
+  var ref = useRef(null);
+
+  var _useState = useState(value[0]),
+      hours = _useState[0],
+      setHours = _useState[1];
+
+  var _useState2 = useState(value[1]),
+      minutes = _useState2[0],
+      setMinutes = _useState2[1];
+
+  var _useState3 = useState(hours < 12 ? 'AM' : 'PM'),
+      meridiem = _useState3[0],
+      setMeridiem = _useState3[1];
+
+  var _useState4 = 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);
       }
-
-      var _this$props$value = _this.props.value,
-          hours = _this$props$value[0],
-          minutes = _this$props$value[1];
-
-      if (time.hours !== undefined) {
-        hours = time.hours;
+    } else {
+      if (updatedHours < 0) {
+        setHours(23);
+        setHoursDisplay(23);
+      } else {
+        setHours(updatedHours);
+        setHoursDisplay(updatedHours);
       }
+    }
+  };
 
-      if (time.minutes !== undefined) {
-        minutes = time.minutes;
-      }
+  var incrementHoursBy = function incrementHoursBy(amount) {
+    var updatedHours = hours + 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 (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);
       }
-
-      _this.props.onChange([hours, minutes]);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "updateHours", function (amount) {
-      _this.props.onChange(addHoursToTime(_this.props.value, amount));
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "updateMinutes", function (amount) {
-      _this.props.onChange(addMinutesToTime(_this.props.value, amount));
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "toggleMeridiem", function () {
-      _this.setState(function (state) {
-        return {
-          meridiem: state.meridiem === 'AM' ? 'PM' : 'AM'
-        };
-      }, _this.updateTime);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleHoursChange", function (hours) {
-      if (_this.twelveHourClock && hours === 0) {
-        _this.updateTime({
-          hours: 12
-        });
+    } else {
+      if (updatedHours < 24) {
+        setHours(updatedHours);
+        setHoursDisplay(updatedHours);
       } else {
-        _this.updateTime({
-          hours: hours
-        });
+        setHours(0);
+        setHoursDisplay(0);
       }
-    });
+    }
+  };
 
-    _defineProperty(_assertThisInitialized(_this), "handleHoursKeyDown", function (event) {
-      var hour = Number(event.target.value);
-      var isTwelveHourClock = _this.props.twelveHourClock;
-      var isHourEleven = HOURS_TO_NOON - 1;
-      var maxHour = isTwelveHourClock ? HOURS_TO_NOON : HOURS_IN_DAY - 1;
-      var minHour = isTwelveHourClock ? 1 : 0;
+  var decrementMinutesBy = function decrementMinutesBy(amount) {
+    var updatedMinutes = minutes - amount;
 
-      if (event.key === 'ArrowRight') {
-        _this.inputBox.focus(1);
-      }
+    if (updatedMinutes >= 0) {
+      setMinutes(updatedMinutes);
+    } else {
+      setMinutes(59);
+      decrementHoursBy(1);
+    }
+  };
 
-      if (event.key === 'ArrowUp' && isTwelveHourClock && hour === isHourEleven) {
-        _this.toggleMeridiem();
-      }
+  var incrementMinutesBy = function incrementMinutesBy(amount) {
+    var updatedMinutes = minutes + amount;
 
-      if (event.key === 'ArrowUp' && hour === maxHour) {
-        _this.updateHours(1);
-      }
+    if (updatedMinutes <= 59) {
+      setMinutes(updatedMinutes);
+    } else {
+      setMinutes(0);
+      incrementHoursBy(1);
+    }
+  };
 
-      if (event.key === 'ArrowDown' && isTwelveHourClock && hour === minHour) {
-        _this.toggleMeridiem();
+  var toggleMeridiem = function toggleMeridiem() {
+    if (meridiem === 'AM') {
+      setMeridiem('PM');
+
+      if (hours >= 0 && hours <= 12) {
+        setHours(hours + 12);
       }
+    } else {
+      setMeridiem('AM');
 
-      if (event.key === 'ArrowDown' && hour === minHour) {
-        _this.updateHours(-1);
+      if (hours >= 12 && hours < 24) {
+        setHours(hours - 12);
       }
-    });
+    }
+  };
 
-    _defineProperty(_assertThisInitialized(_this), "handleMinutesChange", function (minutes) {
-      _this.updateTime({
-        minutes: minutes
-      });
-    });
+  var handleHoursKeyDown = function handleHoursKeyDown(event) {
+    if (ignoredKeys && ignoredKeys.includes(event.key)) {
+      return;
+    }
 
-    _defineProperty(_assertThisInitialized(_this), "handleMinutesKeyDown", function (event) {
-      var minute = Number(event.target.value);
+    if (event.key === 'Backspace') {
+      event.preventDefault();
+    }
 
-      if (_this.props.ignoredKeys.includes(event.key)) {
-        return;
-      }
+    if (event.key === 'ArrowRight') {
+      ref.current.node.children[2].focus();
+    }
 
-      if (event.key === 'ArrowLeft') {
-        _this.inputBox.focus(0);
-      }
+    if (event.key === 'ArrowUp') {
+      incrementHoursBy(1);
+    }
 
-      if (event.key === 'ArrowRight') {
-        _this.inputBox.focus(2);
-      }
+    if (event.key === 'ArrowDown') {
+      decrementHoursBy(1);
+    }
+  };
 
-      if (event.key === 'ArrowUp' && minute >= MAX_MINUTE) {
-        _this.updateMinutes(1);
-      }
+  var handleHoursChange = function handleHoursChange(e) {
+    setHoursDisplay(e);
+    !twelveHourClock && setHours(e);
+  };
 
-      if (event.key === 'ArrowDown' && minute <= MIN_MINUTE) {
-        _this.updateMinutes(-1);
-      }
-    });
+  var handleHoursBlur = function handleHoursBlur(e) {
+    var updatedHoursValue = parseInt(e.target.value);
 
-    _defineProperty(_assertThisInitialized(_this), "handleAMPMKeyDown", function (event) {
-      if (_this.props.ignoredKeys.includes(event.key)) {
-        return;
+    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 !== 'Tab' && !(event.metaKey && event.key === 'r')) {
-        event.preventDefault();
-      }
+  var handleMinutesKeyDown = function handleMinutesKeyDown(event) {
+    if (event.key === 'ArrowLeft') {
+      ref.current.node.children[0].focus();
+    }
 
-      if (event.key === 'ArrowLeft') {
-        _this.inputBox.focus(1);
-      }
+    if (event.key === 'ArrowRight') {
+      ref.current.node.children[3].focus();
+    }
 
-      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();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_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: 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: getMeridiem(this.props.value)
-      });
+    if (event.key === 'ArrowUp') {
+      incrementMinutesBy(1);
     }
-  };
 
-  _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 = _objectWithoutPropertiesLoose(_this$props, ["ignoredKeys", "value", "min", "max", "interval", "onChange", "twelveHourClock", "isIOS"]);
-
-    var hours = value[0],
-        minutes = value[1];
-    return isIOS ? /*#__PURE__*/React.createElement(Input, _extends({}, restProps, {
-      type: "time",
-      autoWidth: hours + ":" + padNumber(minutes, 2) + " " + this.state.meridiem,
-      value: padNumber(hours, 2) + ":" + padNumber(minutes, 2),
-      onChange: this.handleIOSChange
-    })) : /*#__PURE__*/React.createElement(InputBox, _extends({
-      ref: this.setInputBoxRef,
-      inline: true
-    }, restProps), /*#__PURE__*/React.createElement(NumberField, {
-      autoWidth: false,
-      fontVariantNumeric: "tabular-nums",
-      moveFocusOnMax: true,
-      value: twelveHourClock ? hours % HOURS_TO_NOON || HOURS_TO_NOON : hours,
-      min: 0,
-      max: twelveHourClock ? HOURS_TO_NOON : HOURS_IN_DAY - 1,
-      pad: 2,
-      grow: 0,
-      width: "2ch",
-      textAlign: "center",
-      "aria-label": "Hours",
-      onChange: this.handleHoursChange,
-      onKeyDown: this.handleHoursKeyDown,
-      ignoredKeys: ignoredKeys
-    }), _ref, /*#__PURE__*/React.createElement(NumberField, {
-      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.createElement(InputField, {
-      highlightOnInteraction: true,
-      value: this.state.meridiem,
-      grow: 0,
-      width: "2em",
-      textAlign: "center",
-      "aria-label": "AM/PM",
-      onChange: noop // prevent React warnings
-      ,
-      onKeyDown: this.handleAMPMKeyDown
-    }));
+    if (event.key === 'ArrowDown') {
+      decrementMinutesBy(1);
+    }
   };
 
-  return TimeField;
-}(Component);
+  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();
+    }
 
-_defineProperty(TimeField, "addHoursToTime", addHoursToTime);
+    if (event.key.toLowerCase() === 'a' && meridiem === 'PM' || event.key.toLowerCase() === 'p' && meridiem === 'AM' || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      toggleMeridiem();
+    }
+  };
 
-_defineProperty(TimeField, "addMinutesToTime", addMinutesToTime);
+  var updateTime = function updateTime(time) {
+    var hours = time[0],
+        minutes = time[1];
+    return onChange([hours, minutes]);
+  };
 
-_defineProperty(TimeField, "addTimeToDate", addTimeToDate);
+  var handleIOSChange = function handleIOSChange(event) {
+    var _event$target$value$s = event.target.value.split(':'),
+        hours = _event$target$value$s[0],
+        minutes = _event$target$value$s[1];
 
-_defineProperty(TimeField, "getTimeFromDate", getTimeFromDate);
+    setHours(hours);
+    setMinutes(minutes);
+  };
 
-_defineProperty(TimeField, "defaultProps", {
-  twelveHourClock: true,
-  ignoredKeys: [],
-  isIOS: isIOS
-});
+  useEffect(function () {
+    if (hours < 12) {
+      setMeridiem('AM');
+    } else {
+      setMeridiem('PM');
+    }
 
+    updateTime([hours, minutes]);
+  }, [hours, minutes]);
+  return isIOS ? /*#__PURE__*/React.createElement(Input, _extends({}, restProps, {
+    type: "time",
+    autoWidth: hours + ":" + padNumber(minutes, 2) + " " + meridiem,
+    value: padNumber(hours, 2) + ":" + padNumber(minutes, 2),
+    onChange: handleIOSChange
+  })) : /*#__PURE__*/React.createElement(InputBox, _extends({
+    ref: ref,
+    inline: true
+  }, restProps), /*#__PURE__*/React.createElement(NumberField, {
+    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
+  }), _ref2, /*#__PURE__*/React.createElement(NumberField, {
+    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.createElement(InputField, {
+    highlightOnInteraction: true,
+    value: meridiem,
+    grow: 0,
+    width: "2em",
+    textAlign: "center",
+    "aria-label": "AM/PM",
+    onChange: noop,
+    onKeyDown: handleAMPMKeyDown
+  }));
+};
+
+TimeField.addHoursToTime = addHoursToTime;
+TimeField.addMinutesToTime = addMinutesToTime;
+TimeField.addTimeToDate = addTimeToDate;
+TimeField.getTimeFromDate = getTimeFromDate;
 export default TimeField;