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

package/dist/cjs/TimeField/TimeField.js

@@ -27,10 +27,13 @@ var _utils = require("../utils");
 
 var _utils2 = require("./utils");
 
+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,
-      isIOS = _ref.isIOS,
+      _ref$isIOS = _ref.isIOS,
+      isIOS = _ref$isIOS === void 0 ? false : _ref$isIOS,
       max = _ref.max,
       min = _ref.min,
       onChange = _ref.onChange,
@@ -236,13 +239,18 @@ var TimeField = function TimeField(_ref) {
     return onChange([hours, minutes]);
   };
 
-  var handleIOSChange = function handleIOSChange(event) {
+  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];
 
-    setHours(hours);
-    setMinutes(minutes);
+    if (hours || minutes) {
+      setHours(hours);
+      setMinutes(minutes);
+    } else {
+      setHours(0);
+      setMinutes(0);
+    }
   };
 
   (0, _react.useEffect)(function () {
@@ -254,11 +262,11 @@ var TimeField = function TimeField(_ref) {
 
     updateTime([hours, minutes]);
   }, [hours, minutes]);
-  return isIOS ? /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({}, restProps, {
+  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: handleIOSChange
+    onChange: handleMobileChange
   })) : /*#__PURE__*/_react["default"].createElement(_InputBox["default"], (0, _extends2["default"])({
     ref: ref,
     inline: true

package/dist/esm/TimeField/TimeField.js

@@ -8,6 +8,7 @@ import InputField from '../Input/InputField';
 import NumberField from '../NumberField';
 import { noop, padNumber } from '../utils';
 import { addHoursToTime, addMinutesToTime, addTimeToDate, getTimeFromDate } from './utils';
+var isMobile = typeof window !== 'undefined' ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) : false;
 
 var _ref2 = /*#__PURE__*/React.createElement(Box, {
   as: "span",
@@ -19,7 +20,8 @@ var _ref2 = /*#__PURE__*/React.createElement(Box, {
 var TimeField = function TimeField(_ref) {
   var ignoredKeys = _ref.ignoredKeys,
       interval = _ref.interval,
-      isIOS = _ref.isIOS,
+      _ref$isIOS = _ref.isIOS,
+      isIOS = _ref$isIOS === void 0 ? false : _ref$isIOS,
       max = _ref.max,
       min = _ref.min,
       onChange = _ref.onChange,
@@ -226,13 +228,18 @@ var TimeField = function TimeField(_ref) {
     return onChange([hours, minutes]);
   };
 
-  var handleIOSChange = function handleIOSChange(event) {
+  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];
 
-    setHours(hours);
-    setMinutes(minutes);
+    if (hours || minutes) {
+      setHours(hours);
+      setMinutes(minutes);
+    } else {
+      setHours(0);
+      setMinutes(0);
+    }
   };
 
   useEffect(function () {
@@ -244,11 +251,11 @@ var TimeField = function TimeField(_ref) {
 
     updateTime([hours, minutes]);
   }, [hours, minutes]);
-  return isIOS ? /*#__PURE__*/React.createElement(Input, _extends({}, restProps, {
+  return isMobile || isIOS ? /*#__PURE__*/React.createElement(Input, _extends({}, restProps, {
     type: "time",
     autoWidth: hours + ":" + padNumber(minutes, 2) + " " + meridiem,
     value: padNumber(hours, 2) + ":" + padNumber(minutes, 2),
-    onChange: handleIOSChange
+    onChange: handleMobileChange
   })) : /*#__PURE__*/React.createElement(InputBox, _extends({
     ref: ref,
     inline: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.9.0-rc.2",
+  "version": "2.9.0-rc.3",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/TimeField/TimeField.tsx

@@ -5,7 +5,7 @@ import Input from '../Input/Input'
 import InputBox from '../Input/InputBox'
 import InputField from '../Input/InputField'
 import NumberField from '../NumberField'
-import { isIOS, noop, padNumber, isNumber } from '../utils'
+import { noop, padNumber } from '../utils'
 
 import {
   addHoursToTime,
@@ -49,10 +49,17 @@ type TimeFieldProps = {
   value: [number, number]
 }
 
+const isMobile =
+  typeof window !== 'undefined'
+    ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+        navigator.userAgent
+      )
+    : false
+
 const TimeField = ({
   ignoredKeys,
   interval,
-  isIOS,
+  isIOS = false,
   max,
   min,
   onChange,
@@ -241,10 +248,16 @@ const TimeField = ({
     return onChange([hours, minutes])
   }
 
-  const handleIOSChange = (event: any) => {
+  const handleMobileChange = (event: any) => {
     const [hours, minutes] = event.target.value.split(':')
-    setHours(hours)
-    setMinutes(minutes)
+
+    if (hours || minutes) {
+      setHours(hours)
+      setMinutes(minutes)
+    } else {
+      setHours(0)
+      setMinutes(0)
+    }
   }
 
   useEffect(() => {
@@ -256,13 +269,13 @@ const TimeField = ({
     updateTime([hours, minutes])
   }, [hours, minutes])
 
-  return isIOS ? (
+  return isMobile || isIOS ? (
     <Input
       {...restProps}
       type="time"
       autoWidth={`${hours}:${padNumber(minutes, 2)} ${meridiem}`}
       value={`${padNumber(hours, 2)}:${padNumber(minutes, 2)}`}
-      onChange={handleIOSChange}
+      onChange={handleMobileChange}
     />
   ) : (
     <InputBox ref={ref} inline {...restProps}>