@planningcenter/tapestry-react 2.9.0-rc.4 → 2.9.0-rc.7

package/dist/esm/TimeField/legacy_TimeField.js

@@ -1,271 +0,0 @@
-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 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;
-
-var _ref = /*#__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 _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]);
-    });
-
-    _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) {
-      _this.updateTime({
-        hours: hours
-      });
-    });
-
-    _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;
-
-      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);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMinutesChange", function (minutes) {
-      _this.updateTime({
-        minutes: minutes
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_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);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_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();
-      }
-    });
-
-    _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)
-      });
-    }
-  };
-
-  _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: twelveHourClock ? 1 : 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
-    }));
-  };
-
-  return TimeField;
-}(Component);
-
-_defineProperty(TimeField, "addHoursToTime", addHoursToTime);
-
-_defineProperty(TimeField, "addMinutesToTime", addMinutesToTime);
-
-_defineProperty(TimeField, "addTimeToDate", addTimeToDate);
-
-_defineProperty(TimeField, "getTimeFromDate", getTimeFromDate);
-
-_defineProperty(TimeField, "defaultProps", {
-  twelveHourClock: true,
-  ignoredKeys: [],
-  isIOS: isIOS
-});
-
-export default TimeField;

package/src/TimeField/legacy_TimeField.js

@@ -1,278 +0,0 @@
-// @flow
-import React, { Component } 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'
-
-const MIN_MINUTE = 0
-const MAX_MINUTE = 59
-
-type Props = {
-  /**
-   * An array of keys to ignore when pushed.
-   * ex: ["ArrowUp", "ArrowDown"].
-   */
-  ignoredKeys: string[],
-
-  /**
-   * Render native time input, defaults to `true` if user platform is an iOS device, otherwise `false`.
-   */
-  isIOS: boolean,
-
-  /**
-   * Receives new time from typing or navigating with up and down arrow keys.
-   */
-  onChange: (time: string) => null,
-
-  /**
-   * Displays time based on a 12 hour clock, `true` by default.
-   */
-  twelveHourClock: boolean,
-
-  /**
-   * The controlled value passed to the internal input.
-   * Accepts an array of [hours, minutes] based on a 24 hour clock.
-   */
-  value: Array<number, number>,
-}
-
-class TimeField extends Component<Props> {
-  static addHoursToTime = addHoursToTime
-
-  static addMinutesToTime = addMinutesToTime
-
-  static addTimeToDate = addTimeToDate
-
-  static getTimeFromDate = getTimeFromDate
-
-  static defaultProps = {
-    twelveHourClock: true,
-    ignoredKeys: [],
-    isIOS,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      meridiem: getMeridiem(props.value),
-    }
-  }
-
-  componentDidUpdate(lastProps) {
-    if (lastProps.value[0] !== this.props.value[0]) {
-      this.setState({
-        meridiem: getMeridiem(this.props.value),
-      })
-    }
-  }
-
-  setInputBoxRef = (component) => {
-    this.inputBox = component
-  }
-
-  updateTime = (time = {}) => {
-    let [hours, minutes] = this.props.value
-    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])
-  }
-
-  updateHours = (amount) => {
-    this.props.onChange(addHoursToTime(this.props.value, amount))
-  }
-
-  updateMinutes = (amount) => {
-    this.props.onChange(addMinutesToTime(this.props.value, amount))
-  }
-
-  toggleMeridiem = () => {
-    this.setState(
-      (state) => ({ meridiem: state.meridiem === 'AM' ? 'PM' : 'AM' }),
-      this.updateTime
-    )
-  }
-
-  handleHoursChange = (hours) => {
-    this.updateTime({ hours })
-  }
-
-  handleHoursKeyDown = (event) => {
-    const hour = Number(event.target.value)
-    const isTwelveHourClock = this.props.twelveHourClock
-    const isHourEleven = HOURS_TO_NOON - 1
-    const maxHour = isTwelveHourClock ? HOURS_TO_NOON : HOURS_IN_DAY - 1
-    const 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)
-    }
-  }
-
-  handleMinutesChange = (minutes) => {
-    this.updateTime({ minutes })
-  }
-
-  handleMinutesKeyDown = (event) => {
-    const 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)
-    }
-  }
-
-  handleAMPMKeyDown = (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()
-    }
-  }
-
-  handleIOSChange = (event) => {
-    const [hours, minutes] = event.target.value.split(':')
-    this.updateTime({ hours: +hours, minutes: +minutes })
-  }
-
-  render() {
-    const {
-      ignoredKeys,
-      value,
-      min,
-      max,
-      interval,
-      onChange,
-      twelveHourClock,
-      isIOS,
-      ...restProps
-    } = this.props
-    const [hours, minutes] = value
-    return isIOS ? (
-      <Input
-        {...restProps}
-        type="time"
-        autoWidth={`${hours}:${padNumber(minutes, 2)} ${this.state.meridiem}`}
-        value={`${padNumber(hours, 2)}:${padNumber(minutes, 2)}`}
-        onChange={this.handleIOSChange}
-      />
-    ) : (
-      <InputBox ref={this.setInputBoxRef} inline {...restProps}>
-        <NumberField
-          autoWidth={false}
-          fontVariantNumeric="tabular-nums"
-          moveFocusOnMax
-          value={
-            twelveHourClock ? hours % HOURS_TO_NOON || HOURS_TO_NOON : hours
-          }
-          min={twelveHourClock ? 1 : 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 }}
-        />
-        <Box as="span" width={0.5} textAlign="center" userSelect="none">
-          :
-        </Box>
-        <NumberField
-          autoWidth={false}
-          fontVariantNumeric="tabular-nums"
-          moveFocusOnMax
-          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 }}
-        />
-        {twelveHourClock && (
-          <InputField
-            highlightOnInteraction
-            value={this.state.meridiem}
-            grow={0}
-            width="2em"
-            textAlign="center"
-            aria-label="AM/PM"
-            onChange={noop} // prevent React warnings
-            onKeyDown={this.handleAMPMKeyDown}
-          />
-        )}
-      </InputBox>
-    )
-  }
-}
-
-export default TimeField