@synerise/ds-time-picker 0.6.18 → 0.6.19

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.19](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.6.18...@synerise/ds-time-picker@0.6.19) (2022-06-23)
+
+
+### Bug Fixes
+
+* **time-picker:** load initial values into the internal state ([7905253](https://github.com/Synerise/synerise-design/commit/7905253a7cf2e3bcbf4ca3ac1efb02fe72bc0aaf))
+* **time-picker:** simplify selecting time ([6ee5050](https://github.com/Synerise/synerise-design/commit/6ee50508f4fee04cefd70c11dd9c0625cbe01092))
+
+
+
+
+
 ## [0.6.18](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.6.17...@synerise/ds-time-picker@0.6.18) (2022-06-15)
 
 

package/dist/TimePicker.js

@@ -7,7 +7,6 @@ import Icon, { ClockM, Close3S } from '@synerise/ds-icon';
 import Dropdown from '@synerise/ds-dropdown';
 import Tooltip from '@synerise/ds-tooltip/dist/Tooltip';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { useMemo } from 'react';
 import Unit from './Unit';
 import * as S from './TimePicker.styles';
 var defaultUnits = ['hour', 'minute', 'second'];
@@ -53,25 +52,9 @@ var TimePicker = function TimePicker(_ref) {
       open = _React$useState[0],
       setOpen = _React$useState[1];
 
-  var _React$useState2 = React.useState(value),
-      localValue = _React$useState2[0],
-      setLocalValue = _React$useState2[1];
-
-  var _React$useState3 = React.useState(defaultAM ? CLOCK_MODES.AM : CLOCK_MODES.PM),
-      clockMode = _React$useState3[0],
-      setClockMode = _React$useState3[1];
-
-  var _React$useState4 = React.useState(undefined),
-      hour = _React$useState4[0],
-      setHour = _React$useState4[1];
-
-  var _React$useState5 = React.useState(undefined),
-      minute = _React$useState5[0],
-      setMinute = _React$useState5[1];
-
-  var _React$useState6 = React.useState(undefined),
-      second = _React$useState6[0],
-      setSecond = _React$useState6[1];
+  var _React$useState2 = React.useState(defaultAM ? CLOCK_MODES.AM : CLOCK_MODES.PM),
+      clockMode = _React$useState2[0],
+      setClockMode = _React$useState2[1];
 
   var getTimeString = function getTimeString(date) {
     return dayjs(date).format(timeFormat);
@@ -79,16 +62,6 @@ var TimePicker = function TimePicker(_ref) {
   // @ts-ignore
 
 
-  React.useEffect(function () {
-    if (hour !== undefined && minute !== undefined && second !== undefined) {
-      var newDate = dayjs().hour(hour).minute(minute).second(second).toDate();
-      setLocalValue(newDate);
-      onChange && onChange(newDate, getTimeString(newDate));
-    } // eslint-disable-next-line
-    // @ts-ignore
-
-  }, [hour, minute, second]); // eslint-disable-line react-hooks/exhaustive-deps
-
   var unitConfig = [{
     unit: 'hour',
     options: use12HourClock ? range(12) : range(24),
@@ -114,21 +87,25 @@ var TimePicker = function TimePicker(_ref) {
 
   var onVisibleChange = function onVisibleChange(visible) {
     setOpen(visible);
-    !visible && onChange && onChange(localValue, getTimeString(localValue));
+    !visible && onChange && onChange(value, getTimeString(value));
   };
 
   var handleChange = function handleChange(unit, newValue) {
-    if (unit === 'hour') {
-      setHour(newValue);
-    }
-
-    if (unit === 'minute') {
-      setMinute(newValue);
+    var wasUndefined = value === undefined;
+    var dateBuilder = dayjs(value);
+    dateBuilder = dateBuilder[unit](newValue);
+
+    if (wasUndefined) {
+      // set remaining time fields to 0, HH:00:00, 00:mm:00, 00:00:ss
+      unitConfig.filter(function (u) {
+        return u.unit !== unit;
+      }).forEach(function (unitDef) {
+        return dateBuilder = dateBuilder[unitDef.unit](0);
+      });
     }
 
-    if (unit === 'second') {
-      setSecond(newValue);
-    }
+    var newDate = dateBuilder.toDate();
+    onChange && onChange(newDate, getTimeString(newDate));
   };
 
   var renderClockSwitch = function renderClockSwitch() {
@@ -144,9 +121,6 @@ var TimePicker = function TimePicker(_ref) {
     }));
   };
 
-  var timeValue = useMemo(function () {
-    return localValue || dayjs().hour(hour || 0).minute(minute || 0).second(second || 0).toDate();
-  }, [localValue, hour, minute, second]);
   var overlay = /*#__PURE__*/React.createElement(S.OverlayContainer, {
     "data-testid": "tp-overlay-container",
     className: overlayClassName
@@ -154,21 +128,18 @@ var TimePicker = function TimePicker(_ref) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: u.unit
     }, /*#__PURE__*/React.createElement(Unit, _extends({}, u, {
-      value: timeValue,
+      value: value,
       onSelect: function onSelect(newValue) {
         return handleChange(u.unit, newValue);
       }
     })), (index !== unitsToRender.length - 1 || !!use12HourClock) && /*#__PURE__*/React.createElement(S.UnitSeperator, null));
   }), use12HourClock && renderClockSwitch());
+  var localValue = value;
   var dateString = localValue && getTimeString(localValue);
   var clear = React.useCallback(function () {
-    setLocalValue(undefined);
     setOpen(false);
     onChange && onChange(undefined, '');
-    setHour(undefined);
-    setMinute(undefined);
-    setSecond(undefined);
-  }, [setOpen, setLocalValue, onChange]);
+  }, [setOpen, onChange]);
   var timePickerIcon = React.useMemo(function () {
     return (alwaysOpen || open) && dateString ? /*#__PURE__*/React.createElement(S.ClearIcon, {
       component: /*#__PURE__*/React.createElement(Tooltip, {
@@ -184,14 +155,14 @@ var TimePicker = function TimePicker(_ref) {
     });
   }, [open, dateString, clear, clearTooltip, alwaysOpen, disabled]);
   var placeholderValue = React.useMemo(function () {
-    if (hour !== undefined || minute !== undefined || second !== undefined) {
-      return dayjs().hour(hour || 0).minute(minute || 0).second(second || 0).format('HH:mm:ss');
+    if (value) {
+      return dayjs(value).format('HH:mm:ss');
     }
 
     return placeholder || intl.formatMessage({
       id: 'DS.TIME-PICKER.PLACEHOLDER'
     });
-  }, [placeholder, intl, hour, minute, second]);
+  }, [placeholder, intl, value]);
 
   if (raw) {
     return overlay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-time-picker",
-  "version": "0.6.18",
+  "version": "0.6.19",
   "description": "TimePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@types/debounce": "^1.2.0"
   },
-  "gitHead": "d787395998e479858cb58f6d56555e4c51fe45d5"
+  "gitHead": "b2b8c9f85179763159e3c83801b568943f132741"
 }