@synerise/ds-time-picker 0.7.14 → 0.7.16

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.7.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.7.15...@synerise/ds-time-picker@0.7.16) (2023-08-03)
+
+
+### Bug Fixes
+
+* **date-range-picker:** fixed issues with filter range picker (AM/PM) ([e480aab](https://github.com/Synerise/synerise-design/commit/e480aab7a05180df73723b2b774ebc859faec67b))
+
+
+
+
+
+## [0.7.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.7.14...@synerise/ds-time-picker@0.7.15) (2023-07-26)
+
+**Note:** Version bump only for package @synerise/ds-time-picker
+
+
+
+
+
 ## [0.7.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.7.13...@synerise/ds-time-picker@0.7.14) (2023-07-17)
 
 **Note:** Version bump only for package @synerise/ds-time-picker

package/dist/TimePicker.js

@@ -19,6 +19,7 @@ import { useDataFormat } from '@synerise/ds-data-format';
 import Unit from './Unit';
 import * as S from './TimePicker.styles';
 import { handleTimeChange } from './utils/timePicker.utils';
+import { getClockModeFromDate, getOppositeClockMode } from './utils/clockMode.utils';
 import { AM, CLOCK_MODES, HOUR, HOUR_12, MINUTE, PM, SECOND, DISABLE_CLOCK_MODE_HOUR } from './constants/timePicker.constants';
 dayjs.extend(customParseFormatPlugin);
 var defaultUnits = [HOUR, MINUTE, SECOND];
@@ -64,14 +65,6 @@ var TimePicker = function TimePicker(_ref) {
       open = _React$useState[0],
       setOpen = _React$useState[1];
 
-  var _React$useState2 = React.useState(function () {
-    var initialDate = dayjs(value);
-    var initialHour = initialDate.get(HOUR);
-    return initialHour >= HOUR_12 ? PM : AM;
-  }),
-      clockMode = _React$useState2[0],
-      setClockMode = _React$useState2[1];
-
   var is12HourClock = React.useMemo(function () {
     if (use12HourClock === undefined) return is12HoursClockFromDataFormat;
     return use12HourClock;
@@ -123,14 +116,23 @@ var TimePicker = function TimePicker(_ref) {
       clockModeChanged = false;
     }
 
+    var clockMode = getClockModeFromDate(value);
+
+    if (clockModeChanged) {
+      clockMode = getOppositeClockMode(clockMode);
+    }
+
     var newDate = handleTimeChange(value, unit, newValue, clockModeChanged, is12HourClock, clockMode, unitConfig);
     onChange && onChange(newDate, getTimeString(newDate));
   };
 
-  React.useEffect(function () {
-    handleChange(undefined, undefined, true); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [clockMode]);
+  var toggleClockModeChange = function toggleClockModeChange() {
+    handleChange(undefined, undefined, true);
+  };
+
   var isAmOrPmModeDisabled = useCallback(function (mode) {
+    var clockMode = getClockModeFromDate(value);
+
     if (!is12HourClock) {
       return false;
     }
@@ -152,16 +154,19 @@ var TimePicker = function TimePicker(_ref) {
     }
 
     return false;
-  }, [clockMode, disabledHours, is12HourClock]);
+  }, [value, disabledHours, is12HourClock]);
 
   var renderClockSwitch = function renderClockSwitch() {
+    var currentClockMode = getClockModeFromDate(value);
     return /*#__PURE__*/React.createElement(S.Unit, null, Object.values(CLOCK_MODES).map(function (mode) {
       return /*#__PURE__*/React.createElement(S.Cell, {
         key: mode,
-        active: clockMode === mode,
+        active: currentClockMode === mode,
         onClick: function onClick() {
-          setClockMode(mode);
-          onClockModeChange && onClockModeChange(mode);
+          if (currentClockMode !== mode) {
+            toggleClockModeChange();
+            onClockModeChange && onClockModeChange(mode);
+          }
         },
         disabled: isAmOrPmModeDisabled(mode)
       }, /*#__PURE__*/React.createElement(S.CellText, null, mode));

package/dist/utils/clockMode.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getClockModeFromDate: (date: Date | undefined) => string;
+export declare const getOppositeClockMode: (clockMode: string) => string;

package/dist/utils/clockMode.utils.js

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs';
+import { AM, HOUR, HOUR_12, PM } from '../constants/timePicker.constants';
+export var getClockModeFromDate = function getClockModeFromDate(date) {
+  var initialDate = dayjs(date);
+  var initialHour = initialDate.get(HOUR);
+  return initialHour >= HOUR_12 ? PM : AM;
+};
+export var getOppositeClockMode = function getOppositeClockMode(clockMode) {
+  return clockMode === PM ? AM : PM;
+};

package/dist/utils/timePicker.utils.js

@@ -20,10 +20,6 @@ export var handleTimeChange = function handleTimeChange(value, unit, newValue, c
     if (unit === HOUR || clockModeChanged) {
       dateBuilder = dateBuilder.set(HOUR, hourToMap);
     }
-
-    if (clockMode === AM && hourToMap === HOUR_12) {
-      dateBuilder = dateBuilder.set(HOUR, hourToMap);
-    }
   }
 
   if (wasUndefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-time-picker",
-  "version": "0.7.14",
+  "version": "0.7.16",
   "description": "TimePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -18,7 +18,7 @@
   "scripts": {
     "build": "npm run build:js && npm run build:css && npm run defs",
     "build:css": "node ../../../scripts/style/less.js",
-    "build:js": "babel --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:js": "babel --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx' --ignore '**/*.spec.ts' --ignore '**/*.spec.tsx' --ignore '**/*.spec.constants.ts' --ignore '**/*.spec.constants.tsx'",
     "build:watch": "npm run build:js -- --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "prepublish": "npm run build",
@@ -32,10 +32,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-dropdown": "^0.17.70",
-    "@synerise/ds-icon": "^0.57.0",
-    "@synerise/ds-input": "^0.18.44",
-    "@synerise/ds-search-bar": "^0.6.34",
+    "@synerise/ds-dropdown": "^0.17.71",
+    "@synerise/ds-icon": "^0.58.0",
+    "@synerise/ds-input": "^0.18.45",
+    "@synerise/ds-search-bar": "^0.6.35",
     "@synerise/ds-typography": "^0.12.8",
     "dayjs": "^1.8.19",
     "debounce": "^1.2.0"
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@types/debounce": "^1.2.0"
   },
-  "gitHead": "b2df0b45094602990b6ef46e20fb0eb655baf126"
+  "gitHead": "3879c41ef7a22df15d5cd80ceaa41ec56e551429"
 }