@synerise/ds-time-picker 0.6.57 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.6.58...@synerise/ds-time-picker@0.7.0) (2023-03-20)
+
+
+### Bug Fixes
+
+* **data-format:** import types fix ([c3d20f2](https://github.com/Synerise/synerise-design/commit/c3d20f2bff43ce4605224c96b824a6f91662d961))
+
+
+### Features
+
+* **data-format:** data format tools in pickers plus new tools ([c4adbfe](https://github.com/Synerise/synerise-design/commit/c4adbfe563af93f9daffc7e0b327098432c5e31e))
+
+
+
+
+
+## [0.6.58](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.6.57...@synerise/ds-time-picker@0.6.58) (2023-03-08)
+
+**Note:** Version bump only for package @synerise/ds-time-picker
+
+
+
+
+
 ## [0.6.57](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.6.56...@synerise/ds-time-picker@0.6.57) (2023-03-06)
 
 **Note:** Version bump only for package @synerise/ds-time-picker

package/dist/TimePicker.d.ts

@@ -1,10 +1,6 @@
 import * as React from 'react';
-import { TimePickerProps } from './TimePicker.types';
-export declare const CLOCK_MODES: {
-    AM: string;
-    PM: string;
-};
-declare const _default: React.ForwardRefExoticComponent<Pick<TimePickerProps, "className" | "onChange" | "placeholder" | "disabled" | "value" | "trigger" | "placement" | "overlayClassName" | "units" | "defaultOpen" | "defaultAM" | "containerStyle" | "timeFormat" | "use12HourClock" | "alwaysOpen" | "dropdownProps" | "inputProps" | "disabledHours" | "disabledMinutes" | "disabledSeconds" | "clearTooltip" | "raw" | "onClockModeChange"> & {
+import { TimePickerProps } from './types/TimePicker.types';
+declare const _default: React.ForwardRefExoticComponent<Pick<TimePickerProps, "className" | "onChange" | "placeholder" | "disabled" | "value" | "trigger" | "placement" | "overlayClassName" | "use12HourClock" | "units" | "defaultOpen" | "containerStyle" | "timeFormat" | "alwaysOpen" | "dropdownProps" | "inputProps" | "disabledHours" | "disabledMinutes" | "disabledSeconds" | "clearTooltip" | "raw" | "onClockModeChange"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<TimePickerProps>;

package/dist/TimePicker.js

@@ -1,19 +1,19 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import * as React from 'react';
-import dayjs from 'dayjs';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { range } from 'lodash';
+import dayjs from 'dayjs';
+import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
 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 Unit from './Unit';
 import * as S from './TimePicker.styles';
-var defaultUnits = ['hour', 'minute', 'second'];
-export var CLOCK_MODES = {
-  AM: 'AM',
-  PM: 'PM'
-};
+import { handleTimeChange } from './utils/timePicker.utils';
+import { AM, CLOCK_MODES, HOUR, HOUR_12, MINUTE, PM, SECOND } from './constants/timePicker.constants';
+dayjs.extend(customParseFormatPlugin);
+var defaultUnits = [HOUR, MINUTE, SECOND];
 
 var TimePicker = function TimePicker(_ref) {
   var placement = _ref.placement,
@@ -22,7 +22,6 @@ var TimePicker = function TimePicker(_ref) {
       value = _ref.value,
       units = _ref.units,
       defaultOpen = _ref.defaultOpen,
-      defaultAM = _ref.defaultAM,
       onChange = _ref.onChange,
       _ref$containerStyle = _ref.containerStyle,
       containerStyle = _ref$containerStyle === void 0 ? {} : _ref$containerStyle,
@@ -52,28 +51,33 @@ var TimePicker = function TimePicker(_ref) {
       open = _React$useState[0],
       setOpen = _React$useState[1];
 
-  var _React$useState2 = React.useState(defaultAM ? CLOCK_MODES.AM : CLOCK_MODES.PM),
+  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 getTimeString = function getTimeString(date) {
-    return dayjs(date).format(timeFormat);
-  }; // eslint-disable-next-line
-  // @ts-ignore
-
-
+  var timeFormatByClockMode = React.useMemo(function () {
+    return timeFormat != null ? timeFormat : use12HourClock ? 'hh:mm:ss A' : 'HH:mm:ss';
+  }, [timeFormat, use12HourClock]);
+  var getTimeString = React.useCallback(function (date) {
+    return dayjs(date).format(timeFormatByClockMode);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [timeFormat, timeFormatByClockMode]);
   var unitConfig = [{
-    unit: 'hour',
-    options: use12HourClock ? range(12) : range(24),
+    unit: HOUR,
+    options: use12HourClock ? range(1, 13) : range(24),
     disabled: disabledHours,
     insertSeperator: true
   }, {
-    unit: 'minute',
+    unit: MINUTE,
     options: range(60),
     disabled: disabledMinutes,
     insertSeperator: true
   }, {
-    unit: 'second',
+    unit: SECOND,
     options: range(60),
     disabled: disabledSeconds,
     insertSeperator: !!use12HourClock
@@ -90,24 +94,19 @@ var TimePicker = function TimePicker(_ref) {
     !visible && onChange && onChange(value, getTimeString(value));
   };
 
-  var handleChange = function handleChange(unit, 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);
-      });
+  var handleChange = function handleChange(unit, newValue, clockModeChanged) {
+    if (clockModeChanged === void 0) {
+      clockModeChanged = false;
     }
 
-    var newDate = dateBuilder.toDate();
+    var newDate = handleTimeChange(value, unit, newValue, clockModeChanged, use12HourClock, clockMode, unitConfig);
     onChange && onChange(newDate, getTimeString(newDate));
   };
 
+  React.useEffect(function () {
+    handleChange(undefined, undefined, true); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [clockMode]);
+
   var renderClockSwitch = function renderClockSwitch() {
     return /*#__PURE__*/React.createElement(S.Unit, null, Object.values(CLOCK_MODES).map(function (mode) {
       return /*#__PURE__*/React.createElement(S.Cell, {
@@ -131,7 +130,8 @@ var TimePicker = function TimePicker(_ref) {
       value: value,
       onSelect: function onSelect(newValue) {
         return handleChange(u.unit, newValue);
-      }
+      },
+      use12HourClock: use12HourClock
     })), (index !== unitsToRender.length - 1 || !!use12HourClock) && /*#__PURE__*/React.createElement(S.UnitSeperator, null));
   }), use12HourClock && renderClockSwitch());
   var localValue = value;
@@ -156,13 +156,13 @@ 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 dayjs(value).format(timeFormatByClockMode);
     }
 
     return placeholder || intl.formatMessage({
       id: 'DS.TIME-PICKER.PLACEHOLDER'
     });
-  }, [placeholder, intl, value]);
+  }, [placeholder, intl, value, timeFormatByClockMode]);
 
   if (raw) {
     return overlay;
@@ -183,7 +183,7 @@ var TimePicker = function TimePicker(_ref) {
     disabled: disabled,
     className: "" + (alwaysOpen || open ? 'active' : ''),
     "data-testid": "tp-input",
-    value: use12HourClock && !!dateString ? dateString + " " + clockMode : dateString,
+    value: dateString,
     placeholder: placeholderValue,
     readOnly: true,
     icon1: timePickerIcon
@@ -192,7 +192,6 @@ var TimePicker = function TimePicker(_ref) {
 
 TimePicker.defaultProps = {
   placement: 'bottomLeft',
-  timeFormat: 'HH:mm:ss',
   trigger: ['click'],
   units: defaultUnits
 };

package/dist/Unit.d.ts

@@ -5,6 +5,7 @@ export declare type UnitConfig = {
     options: number[];
     disabled?: number[];
     insertSeperator?: boolean;
+    use12HourClock?: boolean;
 };
 export declare type UnitProps = UnitConfig & {
     value?: Date;

package/dist/Unit.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import dayjs from 'dayjs';
 import { debounce } from 'debounce';
 import Scrollbar from '@synerise/ds-scrollbar';
 import * as S from './TimePicker.styles';
+import { getUnitSelectedNumber } from './utils/unit.utils';
 var CELL_HEIGHT = 32;
 var DEBOUNCE_DELAY = 150;
 
@@ -11,8 +11,11 @@ var Unit = function Unit(_ref) {
       disabled = _ref.disabled,
       value = _ref.value,
       unit = _ref.unit,
-      onSelect = _ref.onSelect;
-  var selected = value && dayjs(value).get(unit);
+      onSelect = _ref.onSelect,
+      use12HourClock = _ref.use12HourClock;
+  var selected = React.useMemo(function () {
+    return getUnitSelectedNumber(value, unit, use12HourClock);
+  }, [unit, use12HourClock, value]);
 
   var _React$useState = React.useState(false),
       forceUpdate = _React$useState[0],

package/dist/constants/timePicker.constants.d.ts

@@ -0,0 +1,90 @@
+import dayjs from 'dayjs';
+import { ClockModes } from '../types/TimePicker.types';
+export declare const HOUR: dayjs.UnitType;
+export declare const MINUTE: dayjs.UnitType;
+export declare const SECOND: dayjs.UnitType;
+export declare const CLOCK_MODES: readonly ["AM", "PM"];
+export declare const PM: ClockModes;
+export declare const AM: ClockModes;
+export declare const HOUR_12 = 12;
+export declare const MAP_12_AM_TO_24_HOUR: {
+    0: number;
+    1: number;
+    2: number;
+    3: number;
+    4: number;
+    5: number;
+    6: number;
+    7: number;
+    8: number;
+    9: number;
+    10: number;
+    11: number;
+    12: number;
+    13: number;
+    14: number;
+    15: number;
+    16: number;
+    17: number;
+    18: number;
+    19: number;
+    20: number;
+    21: number;
+    22: number;
+    23: number;
+    24: number;
+};
+export declare const MAP_12_PM_TO_24_HOUR: {
+    0: number;
+    1: number;
+    2: number;
+    3: number;
+    4: number;
+    5: number;
+    6: number;
+    7: number;
+    8: number;
+    9: number;
+    10: number;
+    11: number;
+    12: number;
+    13: number;
+    14: number;
+    15: number;
+    16: number;
+    17: number;
+    18: number;
+    19: number;
+    20: number;
+    21: number;
+    22: number;
+    23: number;
+    24: number;
+};
+export declare const MAP_24_HOUR_TO_12: {
+    0: number;
+    1: number;
+    2: number;
+    3: number;
+    4: number;
+    5: number;
+    6: number;
+    7: number;
+    8: number;
+    9: number;
+    10: number;
+    11: number;
+    12: number;
+    13: number;
+    14: number;
+    15: number;
+    16: number;
+    17: number;
+    18: number;
+    19: number;
+    20: number;
+    21: number;
+    22: number;
+    23: number;
+    24: number;
+};

package/dist/constants/timePicker.constants.js

@@ -0,0 +1,88 @@
+export var HOUR = 'hour';
+export var MINUTE = 'minute';
+export var SECOND = 'second';
+export var CLOCK_MODES = ['AM', 'PM'];
+export var PM = 'PM';
+export var AM = 'AM';
+export var HOUR_12 = 12;
+export var MAP_12_AM_TO_24_HOUR = {
+  0: 12,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  6: 6,
+  7: 7,
+  8: 8,
+  9: 9,
+  10: 10,
+  11: 11,
+  12: 0,
+  13: 1,
+  14: 2,
+  15: 3,
+  16: 4,
+  17: 5,
+  18: 6,
+  19: 7,
+  20: 8,
+  21: 9,
+  22: 10,
+  23: 11,
+  24: 0
+};
+export var MAP_12_PM_TO_24_HOUR = {
+  0: 12,
+  1: 13,
+  2: 14,
+  3: 15,
+  4: 16,
+  5: 17,
+  6: 18,
+  7: 19,
+  8: 20,
+  9: 21,
+  10: 22,
+  11: 23,
+  12: 12,
+  13: 13,
+  14: 14,
+  15: 15,
+  16: 16,
+  17: 17,
+  18: 18,
+  19: 19,
+  20: 20,
+  21: 21,
+  22: 22,
+  23: 23,
+  24: 24
+};
+export var MAP_24_HOUR_TO_12 = {
+  0: 12,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  6: 6,
+  7: 7,
+  8: 8,
+  9: 9,
+  10: 10,
+  11: 11,
+  12: 12,
+  13: 1,
+  14: 2,
+  15: 3,
+  16: 4,
+  17: 5,
+  18: 6,
+  19: 7,
+  20: 8,
+  21: 9,
+  22: 10,
+  23: 11,
+  24: 12
+};

package/dist/index.d.ts

@@ -1 +1,3 @@
 export { default } from './TimePicker';
+export { AM, PM, HOUR_12, HOUR, CLOCK_MODES, MAP_12_AM_TO_24_HOUR, MAP_12_PM_TO_24_HOUR, MAP_24_HOUR_TO_12, } from './constants/timePicker.constants';
+export type { ClockModes, TimePickerProps } from './types/TimePicker.types';

package/dist/index.js

@@ -1 +1,2 @@
-export { default } from './TimePicker';
+export { default } from './TimePicker';
+export { AM, PM, HOUR_12, HOUR, CLOCK_MODES, MAP_12_AM_TO_24_HOUR, MAP_12_PM_TO_24_HOUR, MAP_24_HOUR_TO_12 } from './constants/timePicker.constants';

package/dist/{TimePicker.types.d.ts → types/TimePicker.types.d.ts}

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
 import { IntlShape } from 'react-intl';
-import { DropdownProps } from '@synerise/ds-dropdown/dist/Dropdown';
 import { InputProps } from 'antd/es/input/Input';
+import { DropdownProps } from '@synerise/ds-dropdown/dist/Dropdown';
+import { CLOCK_MODES } from '../constants/timePicker.constants';
+export declare type ClockModes = typeof CLOCK_MODES[number];
 export declare type TimePickerDisabledUnits = {
     disabledSeconds?: number[];
     disabledMinutes?: number[];
@@ -13,7 +15,6 @@ export declare type TimePickerProps = TimePickerDisabledUnits & {
     className?: string;
     clearTooltip?: string | React.ReactNode;
     containerStyle?: React.CSSProperties;
-    defaultAM?: boolean;
     defaultOpen?: boolean;
     disabled?: boolean;
     dropdownProps?: Partial<DropdownProps>;

package/dist/utils/timePicker.utils.d.ts

@@ -0,0 +1,3 @@
+import dayjs from 'dayjs';
+import { UnitConfig } from '../Unit';
+export declare const handleTimeChange: (value: Date | undefined, unit: dayjs.UnitType | undefined, newValue: number | undefined, clockModeChanged: boolean | undefined, use12HourClock: boolean | undefined, clockMode: string, unitConfig: UnitConfig[]) => Date;

package/dist/utils/timePicker.utils.js

@@ -0,0 +1,48 @@
+import dayjs from 'dayjs';
+import { AM, HOUR, HOUR_12, MAP_12_AM_TO_24_HOUR, MAP_12_PM_TO_24_HOUR, MINUTE, PM, SECOND } from '../constants/timePicker.constants';
+export var handleTimeChange = function handleTimeChange(value, unit, newValue, clockModeChanged, use12HourClock, clockMode, unitConfig) {
+  if (clockModeChanged === void 0) {
+    clockModeChanged = false;
+  }
+
+  var wasUndefined = value === undefined;
+  var dateBuilder = dayjs(value);
+
+  if (unit) {
+    dateBuilder = dateBuilder[unit](newValue);
+  }
+
+  var hourToMap = dateBuilder.get(HOUR);
+
+  if (use12HourClock) {
+    hourToMap = clockMode === AM ? MAP_12_AM_TO_24_HOUR[hourToMap] : MAP_12_PM_TO_24_HOUR[hourToMap];
+
+    if (unit === HOUR || clockModeChanged) {
+      dateBuilder = dateBuilder.set(HOUR, hourToMap);
+    }
+
+    if (clockMode === PM && hourToMap === HOUR_12) {
+      dateBuilder = dateBuilder.set(MINUTE, 0);
+      dateBuilder = dateBuilder.set(SECOND, 0);
+    }
+
+    if (clockMode === AM && hourToMap === HOUR_12) {
+      dateBuilder = dateBuilder.set(HOUR, hourToMap);
+    }
+  }
+
+  if (wasUndefined) {
+    // set remaining time fields to 0, HH:00:00, 00:mm:00, 00:00:ss
+    unitConfig.filter(function (unitDefinition) {
+      return unitDefinition.unit !== unit;
+    }).forEach(function (unitDefinition) {
+      return dateBuilder = dateBuilder[unitDefinition.unit](0);
+    });
+
+    if (use12HourClock && clockMode === PM) {
+      dateBuilder = dateBuilder.set(HOUR, HOUR_12);
+    }
+  }
+
+  return dateBuilder.toDate();
+};

package/dist/utils/unit.utils.d.ts

@@ -0,0 +1,2 @@
+import dayjs from 'dayjs';
+export declare const getUnitSelectedNumber: (value: Date | undefined, unit: dayjs.UnitType, use12HourClock: boolean | undefined) => number | undefined;

package/dist/utils/unit.utils.js

@@ -0,0 +1,16 @@
+import dayjs from 'dayjs';
+import { HOUR, HOUR_12, MAP_24_HOUR_TO_12 } from '../constants/timePicker.constants';
+export var getUnitSelectedNumber = function getUnitSelectedNumber(value, unit, use12HourClock) {
+  if (value === undefined) return undefined;
+  var result = value && dayjs(value).get(unit);
+
+  if (unit === HOUR && use12HourClock) {
+    if (!result) {
+      result = HOUR_12;
+    }
+
+    result = MAP_24_HOUR_TO_12[result];
+  }
+
+  return result;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-time-picker",
-  "version": "0.6.57",
+  "version": "0.7.0",
   "description": "TimePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,7 +32,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-dropdown": "^0.17.55",
+    "@synerise/ds-dropdown": "^0.17.57",
     "@synerise/ds-icon": "^0.54.0",
     "@synerise/ds-input": "^0.18.36",
     "@synerise/ds-search-bar": "^0.6.26",
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@types/debounce": "^1.2.0"
   },
-  "gitHead": "a9c9628df732abd42421880fd1aa61b7f7c580ee"
+  "gitHead": "41419f123b90134def2fecde455da13946fc2c0e"
 }