@synerise/ds-time-picker 0.6.16 → 0.6.19

package/CHANGELOG.md

@@ -3,6 +3,54 @@
 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)
+
+
+### Bug Fixes
+
+* **time-picker:** add ts-ignore ([3073779](https://github.com/Synerise/synerise-design/commit/30737798dc2bd6bfe74f4b534427da61af669948))
+* **time-picker:** add ts-ignore ([2389568](https://github.com/Synerise/synerise-design/commit/2389568a57523faf0bd84d3fdb760f25d5c3b8bb))
+* **time-picker:** change to use useMemo ([24cfb11](https://github.com/Synerise/synerise-design/commit/24cfb11566103009404788572bbc47b4478f23d5))
+* **time-picker:** fix changing time ([ab3281d](https://github.com/Synerise/synerise-design/commit/ab3281d093b791715cdea462b7e47f05ee7ad360))
+* **time-picker:** fix changing time ([a1c3507](https://github.com/Synerise/synerise-design/commit/a1c3507db5e361fc055e8e4afc79ad883046c99e))
+* **time-picker:** fix changing time ([ea969ed](https://github.com/Synerise/synerise-design/commit/ea969ed02617cbc9770aee607369b2280bea6544))
+* **time-picker:** fix changing time to not show local time ([7873cd7](https://github.com/Synerise/synerise-design/commit/7873cd76d82512ee5b73f2b72606140b3de5e353))
+* **time-picker:** fix dependencies and add ts-ignore ([4b0be58](https://github.com/Synerise/synerise-design/commit/4b0be584249ab1ba8b669c10c05aa4a11c9e0845))
+* **time-picker:** fix dependencies and add ts-ignore ([1771914](https://github.com/Synerise/synerise-design/commit/17719142d304cc8c11408641e24e7c16ffddac62))
+* **time-picker:** fix dependencies and add ts-ignore ([afee591](https://github.com/Synerise/synerise-design/commit/afee5910c173414d34660362864bf44714b3aabb))
+* **time-picker:** fix dependencies and add ts-ignore ([296476b](https://github.com/Synerise/synerise-design/commit/296476b90111532b82151b566f88222288890c16))
+* **time-picker:** fix prop ([221c648](https://github.com/Synerise/synerise-design/commit/221c64816a87ed371dddd03baaa4f0feb128698f))
+* **time-picker:** fix prop ([236c04e](https://github.com/Synerise/synerise-design/commit/236c04ea1e0aa9f32e0912ae0a646d9f7ea67ac5))
+* **time-picker:** fix scroll on selected time to pop on top in dropdown ([2c2eced](https://github.com/Synerise/synerise-design/commit/2c2eced6f65d022eb60a4edc07ee6c777d50fda3))
+* **time-picker:** fix showing data ([ac0816b](https://github.com/Synerise/synerise-design/commit/ac0816b977fba292f250a0a3b4035b5a70f9bfd2))
+* **time-picker:** fix showing data ([153c1b0](https://github.com/Synerise/synerise-design/commit/153c1b0f647da658c7f6680ac1fc357ebf5c59a9))
+* **time-picker:** remove console logs ([96903a4](https://github.com/Synerise/synerise-design/commit/96903a480933308254d7e9df04a4ff4cd0e0411d))
+* **time-picker:** scroll only if scrollTo is function ([358cd3d](https://github.com/Synerise/synerise-design/commit/358cd3d9e9a360ecc2062693c88e9a688aaffe72))
+
+
+
+
+
+## [0.6.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.6.16...@synerise/ds-time-picker@0.6.17) (2022-04-29)
+
+**Note:** Version bump only for package @synerise/ds-time-picker
+
+
+
+
+
 ## [0.6.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.6.15...@synerise/ds-time-picker@0.6.16) (2022-04-05)
 
 **Note:** Version bump only for package @synerise/ds-time-picker

package/dist/TimePicker.js

@@ -52,20 +52,19 @@ 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$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);
+  }; // eslint-disable-next-line
+  // @ts-ignore
 
-  var _React$useState3 = React.useState(defaultAM ? CLOCK_MODES.AM : CLOCK_MODES.PM),
-      clockMode = _React$useState3[0],
-      setClockMode = _React$useState3[1];
 
-  React.useEffect(function () {
-    setLocalValue(value);
-  }, [value]);
   var unitConfig = [{
     unit: 'hour',
-    options: use12HourClock ? range(12 + 1) : range(24),
+    options: use12HourClock ? range(12) : range(24),
     disabled: disabledHours,
     insertSeperator: true
   }, {
@@ -86,35 +85,26 @@ var TimePicker = function TimePicker(_ref) {
     });
   }, [units, unitConfig]);
 
-  var getTimeString = function getTimeString(date) {
-    return dayjs(date).format(timeFormat);
-  };
-
   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 (!onChange) {
-      return;
-    }
-
-    var newDateObject = dayjs(localValue || undefined).set(unit, newValue);
-    var res = defaultUnits.filter(function (u) {
-      return unitsToRender.find(function (val) {
-        return val.unit !== u;
-      });
-    });
-
-    if (res.length !== defaultUnits.length) {
-      res.forEach(function (u) {
-        newDateObject = dayjs(newDateObject).set(u, 0);
+    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);
       });
     }
 
-    var newDate = newDateObject.toDate();
-    setLocalValue(newDate);
+    var newDate = dateBuilder.toDate();
     onChange && onChange(newDate, getTimeString(newDate));
   };
 
@@ -138,18 +128,18 @@ var TimePicker = function TimePicker(_ref) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: u.unit
     }, /*#__PURE__*/React.createElement(Unit, _extends({}, u, {
-      value: localValue,
+      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, '');
-  }, [setOpen, setLocalValue, onChange]);
+  }, [setOpen, onChange]);
   var timePickerIcon = React.useMemo(function () {
     return (alwaysOpen || open) && dateString ? /*#__PURE__*/React.createElement(S.ClearIcon, {
       component: /*#__PURE__*/React.createElement(Tooltip, {
@@ -165,10 +155,14 @@ var TimePicker = function TimePicker(_ref) {
     });
   }, [open, dateString, clear, clearTooltip, alwaysOpen, disabled]);
   var placeholderValue = React.useMemo(function () {
+    if (value) {
+      return dayjs(value).format('HH:mm:ss');
+    }
+
     return placeholder || intl.formatMessage({
       id: 'DS.TIME-PICKER.PLACEHOLDER'
     });
-  }, [placeholder, intl]);
+  }, [placeholder, intl, value]);
 
   if (raw) {
     return overlay;

package/dist/Unit.js

@@ -20,13 +20,13 @@ var Unit = function Unit(_ref) {
   var selectedCellRef = React.useRef(null);
   var unitContainerRef = React.useRef(null);
 
-  var _React$useState2 = React.useState(true),
-      isFirstRender = _React$useState2[0],
-      setFirstRender = _React$useState2[1];
+  var _React$useState2 = React.useState(300),
+      containerHeight = _React$useState2[0],
+      setContainerHeight = _React$useState2[1];
 
-  var _React$useState3 = React.useState(300),
-      containerHeight = _React$useState3[0],
-      setContainerHeight = _React$useState3[1];
+  var _React$useState3 = React.useState(true),
+      isFirstRender = _React$useState3[0],
+      setFirstRender = _React$useState3[1];
 
   React.useEffect(function () {
     if (isFirstRender) {
@@ -49,9 +49,11 @@ var Unit = function Unit(_ref) {
   }, [unitContainerRef]);
   React.useEffect(function () {
     if (selectedCellRef.current && unitContainerRef.current) {
+      var _unitContainerRef$cur, _unitContainerRef$cur2;
+
       var offsetToParent = selectedCellRef.current.offsetTop - unitContainerRef.current.offsetTop;
       var scrollBehaviour = isFirstRender || !containerHeight ? 'auto' : 'smooth';
-      (unitContainerRef == null ? void 0 : unitContainerRef.current) && unitContainerRef.current.scrollTo({
+      (unitContainerRef == null ? void 0 : (_unitContainerRef$cur = unitContainerRef.current) == null ? void 0 : (_unitContainerRef$cur2 = _unitContainerRef$cur.scrollTo) == null ? void 0 : _unitContainerRef$cur2.call) && unitContainerRef.current.scrollTo({
         top: offsetToParent,
         behavior: scrollBehaviour
       });
@@ -71,7 +73,10 @@ var Unit = function Unit(_ref) {
       disabled: isDisabled,
       onClick: function onClick() {
         onSelect(option);
-        setForceUpdate(!forceUpdate);
+        setTimeout(function () {
+          // timeout is required to make sure that the ref is updated
+          setForceUpdate(!forceUpdate);
+        }, 50);
       },
       active: isSelected,
       ref: isSelected ? selectedCellRef : null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-time-picker",
-  "version": "0.6.16",
+  "version": "0.6.19",
   "description": "TimePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,10 +32,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-dropdown": "^0.17.16",
+    "@synerise/ds-dropdown": "^0.17.18",
     "@synerise/ds-icon": "^0.49.0",
     "@synerise/ds-input": "^0.18.10",
-    "@synerise/ds-search-bar": "^0.5.11",
+    "@synerise/ds-search-bar": "^0.6.0",
     "@synerise/ds-typography": "^0.12.2",
     "dayjs": "^1.8.19",
     "debounce": "^1.2.0"
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@types/debounce": "^1.2.0"
   },
-  "gitHead": "5793ce09feb88b36cc8ca1923ddfcb272b889cb0"
+  "gitHead": "b2b8c9f85179763159e3c83801b568943f132741"
 }