@synerise/ds-time-picker 0.6.17 → 0.6.18

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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

package/dist/TimePicker.js

@@ -7,6 +7,7 @@ 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'];
@@ -60,12 +61,37 @@ var TimePicker = function TimePicker(_ref) {
       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 getTimeString = function getTimeString(date) {
+    return dayjs(date).format(timeFormat);
+  }; // eslint-disable-next-line
+  // @ts-ignore
+
+
   React.useEffect(function () {
-    setLocalValue(value);
-  }, [value]);
+    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 + 1) : range(24),
+    options: use12HourClock ? range(12) : range(24),
     disabled: disabledHours,
     insertSeperator: true
   }, {
@@ -86,36 +112,23 @@ 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));
   };
 
   var handleChange = function handleChange(unit, newValue) {
-    if (!onChange) {
-      return;
+    if (unit === 'hour') {
+      setHour(newValue);
     }
 
-    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);
-      });
+    if (unit === 'minute') {
+      setMinute(newValue);
     }
 
-    var newDate = newDateObject.toDate();
-    setLocalValue(newDate);
-    onChange && onChange(newDate, getTimeString(newDate));
+    if (unit === 'second') {
+      setSecond(newValue);
+    }
   };
 
   var renderClockSwitch = function renderClockSwitch() {
@@ -131,6 +144,9 @@ 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
@@ -138,7 +154,7 @@ var TimePicker = function TimePicker(_ref) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: u.unit
     }, /*#__PURE__*/React.createElement(Unit, _extends({}, u, {
-      value: localValue,
+      value: timeValue,
       onSelect: function onSelect(newValue) {
         return handleChange(u.unit, newValue);
       }
@@ -149,6 +165,9 @@ var TimePicker = function TimePicker(_ref) {
     setLocalValue(undefined);
     setOpen(false);
     onChange && onChange(undefined, '');
+    setHour(undefined);
+    setMinute(undefined);
+    setSecond(undefined);
   }, [setOpen, setLocalValue, onChange]);
   var timePickerIcon = React.useMemo(function () {
     return (alwaysOpen || open) && dateString ? /*#__PURE__*/React.createElement(S.ClearIcon, {
@@ -165,10 +184,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');
+    }
+
     return placeholder || intl.formatMessage({
       id: 'DS.TIME-PICKER.PLACEHOLDER'
     });
-  }, [placeholder, intl]);
+  }, [placeholder, intl, hour, minute, second]);
 
   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.17",
+  "version": "0.6.18",
   "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.17",
+    "@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": "4a658911645846d1e329609ba9db06a7bc64962b"
+  "gitHead": "d787395998e479858cb58f6d56555e4c51fe45d5"
 }