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

package/dist/cjs/TimeField/TimeField.test.js

@@ -211,11 +211,11 @@ it('increment hour on arrow up', function () {
   }),
       hourInput = _setup15.hourInput;
 
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
 
   _userEvent["default"].type(hourInput, '{arrowup}');
 
-  expect(hourInput).toHaveValue("02");
+  expect(hourInput).toHaveValue('02');
 });
 it('increment hour if arrow up on minutes exceeds max value', function () {
   var _setup16 = setup({
@@ -225,11 +225,11 @@ it('increment hour if arrow up on minutes exceeds max value', function () {
       hourInput = _setup16.hourInput,
       minuteInput = _setup16.minuteInput;
 
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
 
   _userEvent["default"].type(minuteInput, '{arrowup}');
 
-  expect(hourInput).toHaveValue("02");
+  expect(hourInput).toHaveValue('02');
 });
 it('decrement hour on arrow down', function () {
   var _setup17 = setup({
@@ -238,11 +238,11 @@ it('decrement hour on arrow down', function () {
   }),
       hourInput = _setup17.hourInput;
 
-  expect(hourInput).toHaveValue("02");
+  expect(hourInput).toHaveValue('02');
 
   _userEvent["default"].type(hourInput, '{arrowdown}');
 
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
 });
 it('decrement hour if arrow down on minutes exceeds min value', function () {
   var _setup18 = setup({
@@ -252,11 +252,11 @@ it('decrement hour if arrow down on minutes exceeds min value', function () {
       hourInput = _setup18.hourInput,
       minuteInput = _setup18.minuteInput;
 
-  expect(hourInput).toHaveValue("02");
+  expect(hourInput).toHaveValue('02');
 
   _userEvent["default"].type(minuteInput, '{arrowdown}');
 
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
 });
 it('increment minute on arrow up', function () {
   var _setup19 = setup({
@@ -265,11 +265,11 @@ it('increment minute on arrow up', function () {
   }),
       minuteInput = _setup19.minuteInput;
 
-  expect(minuteInput).toHaveValue("42");
+  expect(minuteInput).toHaveValue('42');
 
   _userEvent["default"].type(minuteInput, '{arrowup}');
 
-  expect(minuteInput).toHaveValue("43");
+  expect(minuteInput).toHaveValue('43');
 });
 it('decrement minute on arrow down', function () {
   var _setup20 = setup({
@@ -278,11 +278,11 @@ it('decrement minute on arrow down', function () {
   }),
       minuteInput = _setup20.minuteInput;
 
-  expect(minuteInput).toHaveValue("43");
+  expect(minuteInput).toHaveValue('43');
 
   _userEvent["default"].type(minuteInput, '{arrowdown}');
 
-  expect(minuteInput).toHaveValue("42");
+  expect(minuteInput).toHaveValue('42');
 });
 it('set minute to min value if arrow up on minutes exceeds max value', function () {
   var _setup21 = setup({
@@ -291,11 +291,11 @@ it('set minute to min value if arrow up on minutes exceeds max value', function
   }),
       minuteInput = _setup21.minuteInput;
 
-  expect(minuteInput).toHaveValue("59");
+  expect(minuteInput).toHaveValue('59');
 
   _userEvent["default"].type(minuteInput, '{arrowup}');
 
-  expect(minuteInput).toHaveValue("00");
+  expect(minuteInput).toHaveValue('00');
 });
 it('set minute to max value if arrow down on minutes exceeds min value', function () {
   var _setup22 = setup({
@@ -304,11 +304,11 @@ it('set minute to max value if arrow down on minutes exceeds min value', functio
   }),
       minuteInput = _setup22.minuteInput;
 
-  expect(minuteInput).toHaveValue("00");
+  expect(minuteInput).toHaveValue('00');
 
   _userEvent["default"].type(minuteInput, '{arrowdown}');
 
-  expect(minuteInput).toHaveValue("59");
+  expect(minuteInput).toHaveValue('59');
 });
 it('toggle meridiem if arrow up on hour exceeds eleven', function () {
   var _setup23 = setup({
@@ -325,7 +325,7 @@ it('toggle meridiem if arrow up on hour exceeds eleven', function () {
 });
 it('toggle meridiem if arrow down on hour exceeds min value', function () {
   var _setup24 = setup({
-    hours: 1
+    hours: 0
   }),
       hourInput = _setup24.hourInput,
       meridiemInput = _setup24.meridiemInput;
@@ -342,11 +342,11 @@ it('set 12 hour clock to min value if arrow up on hour exceeds max value', funct
   }),
       hourInput = _setup25.hourInput;
 
-  expect(hourInput).toHaveValue("12");
+  expect(hourInput).toHaveValue('12');
 
   _userEvent["default"].type(hourInput, '{arrowup}');
 
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
 });
 it('set 24 hour clock to min value if arrow up on hour exceeds max value', function () {
   var _setup26 = setup({
@@ -355,11 +355,11 @@ it('set 24 hour clock to min value if arrow up on hour exceeds max value', funct
   }),
       hourInput = _setup26.hourInput;
 
-  expect(hourInput).toHaveValue("23");
+  expect(hourInput).toHaveValue('23');
 
   _userEvent["default"].type(hourInput, '{arrowup}');
 
-  expect(hourInput).toHaveValue("00");
+  expect(hourInput).toHaveValue('00');
 });
 it('set 12 hour clock to max value if arrow down on hour exceeds min value', function () {
   var _setup27 = setup({
@@ -367,11 +367,11 @@ it('set 12 hour clock to max value if arrow down on hour exceeds min value', fun
   }),
       hourInput = _setup27.hourInput;
 
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
 
   _userEvent["default"].type(hourInput, '{arrowdown}');
 
-  expect(hourInput).toHaveValue("12");
+  expect(hourInput).toHaveValue('12');
 });
 it('set 24 hour clock to max value if arrow down on hour exceeds min value', function () {
   var _setup28 = setup({
@@ -380,11 +380,11 @@ it('set 24 hour clock to max value if arrow down on hour exceeds min value', fun
   }),
       hourInput = _setup28.hourInput;
 
-  expect(hourInput).toHaveValue("00");
+  expect(hourInput).toHaveValue('00');
 
   _userEvent["default"].type(hourInput, '{arrowdown}');
 
-  expect(hourInput).toHaveValue("23");
+  expect(hourInput).toHaveValue('23');
 });
 it('does not change the value of hours on arrow up or arrow down if ignored', function () {
   var _setup29 = setup({
@@ -394,15 +394,15 @@ it('does not change the value of hours on arrow up or arrow down if ignored', fu
   }),
       hourInput = _setup29.hourInput;
 
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
 
   _userEvent["default"].type(hourInput, '{arrowup}');
 
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
 
   _userEvent["default"].type(hourInput, '{arrowdown}');
 
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
 });
 it('does not change the value of minutes on arrow up or arrow down if ignored', function () {
   var _setup30 = setup({
@@ -412,15 +412,15 @@ it('does not change the value of minutes on arrow up or arrow down if ignored',
   }),
       minuteInput = _setup30.minuteInput;
 
-  expect(minuteInput).toHaveValue("42");
+  expect(minuteInput).toHaveValue('42');
 
   _userEvent["default"].type(minuteInput, '{arrowup}');
 
-  expect(minuteInput).toHaveValue("42");
+  expect(minuteInput).toHaveValue('42');
 
   _userEvent["default"].type(minuteInput, '{arrowdown}');
 
-  expect(minuteInput).toHaveValue("42");
+  expect(minuteInput).toHaveValue('42');
 }); // ios
 
 it('renders iOS as a single input', function () {

package/dist/cjs/TimeField/legacy_TimeField.js

@@ -0,0 +1,274 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+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"));
+
+var _Input = _interopRequireDefault(require("../Input/Input"));
+
+var _InputBox = _interopRequireDefault(require("../Input/InputBox"));
+
+var _InputField = _interopRequireDefault(require("../Input/InputField"));
+
+var _NumberField = _interopRequireDefault(require("../NumberField"));
+
+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);
+
+  function TimeField(props) {
+    var _this;
+
+    _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 = {};
+      }
+
+      var _this$props$value = _this.props.value,
+          hours = _this$props$value[0],
+          minutes = _this$props$value[1];
+
+      if (time.hours !== undefined) {
+        hours = time.hours;
+      }
+
+      if (time.minutes !== undefined) {
+        minutes = time.minutes;
+      }
+
+      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;
+        }
+      }
+
+      _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) {
+      _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);
+      }
+
+      if (event.key === 'ArrowUp' && isTwelveHourClock && hour === isHourEleven) {
+        _this.toggleMeridiem();
+      }
+
+      if (event.key === 'ArrowUp' && hour === maxHour) {
+        _this.updateHours(1);
+      }
+
+      if (event.key === 'ArrowDown' && isTwelveHourClock && hour === minHour) {
+        _this.toggleMeridiem();
+      }
+
+      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 === 'ArrowLeft') {
+        _this.inputBox.focus(0);
+      }
+
+      if (event.key === 'ArrowRight') {
+        _this.inputBox.focus(2);
+      }
+
+      if (event.key === 'ArrowUp' && minute >= MAX_MINUTE) {
+        _this.updateMinutes(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;
+      }
+
+      if (event.key !== 'Tab' && !(event.metaKey && event.key === 'r')) {
+        event.preventDefault();
+      }
+
+      if (event.key === 'ArrowLeft') {
+        _this.inputBox.focus(1);
+      }
+
+      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)
+      });
+    }
+  };
+
+  _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: twelveHourClock ? 1 : 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
+    }));
+  };
+
+  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
+});
+var _default = TimeField;
+exports["default"] = _default;

package/dist/cjs/TimeField/utils.js

@@ -27,18 +27,12 @@ function addHoursToTime(time, hoursToAdd) {
 function addMinutesToTime(time, minutesToAdd) {
   var hours = time[0],
       minutes = time[1];
-  var nextMinutes = minutes + minutesToAdd;
-  var remainderMinutes = modulo(nextMinutes, MINUTES_IN_HOUR);
-
-  if (remainderMinutes >= 0) {
-    var nextHours = hours + Math.floor(nextMinutes / MINUTES_IN_HOUR);
-    hours = modulo(nextHours, HOURS_IN_DAY);
-    minutes = remainderMinutes;
-  } else {
-    minutes = nextMinutes;
-  }
-
-  return [hours, minutes];
+  var totalTimeInMinutes = hours * 60 + minutes;
+  var totalMinutesInDay = 24 * 60;
+  var newTime = parseInt(totalTimeInMinutes) + parseInt(minutesToAdd);
+  var newHours = newTime > totalMinutesInDay ? Math.floor(newTime / 60) - 24 : Math.floor(newTime / 60);
+  var newMinutes = newTime % 60;
+  return [newHours, newMinutes];
 }
 
 function addTimeToDate(date, time) {

package/dist/cjs/utils.js

@@ -21,6 +21,7 @@ exports.insertAtIndex = insertAtIndex;
 exports.isArray = isArray;
 exports.isElementInteractive = isElementInteractive;
 exports.isFunction = isFunction;
+exports.isNumber = isNumber;
 exports.isValueInArray = isValueInArray;
 exports.joinChildren = joinChildren;
 exports.lockScroll = lockScroll;
@@ -399,6 +400,14 @@ function isArray(value) {
 function isFunction(value) {
   return value && value.constructor === Function;
 }
+/**
+ * Determines if value is a number
+ */
+
+
+function isNumber(value) {
+  return /^[0-9]$/i.test(value);
+}
 /**
  * Determines if a value is present in an array by
  * performing a shallow equal check on each item.