@synerise/ds-time-picker 0.7.0 → 0.7.2

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.7.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.7.1...@synerise/ds-time-picker@0.7.2) (2023-03-24)
+
+
+### Bug Fixes
+
+* **date-range-picker:** data format in date range picker usage fix ([0f17e68](https://github.com/Synerise/synerise-design/commit/0f17e68dbdf1d324e939e2dc45f5c5a454dc20f7))
+* **time-picker:** test fix ([ca3dd75](https://github.com/Synerise/synerise-design/commit/ca3dd75d9b39bc49ca571872528673945ead6a60))
+
+
+
+
+
+## [0.7.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.7.0...@synerise/ds-time-picker@0.7.1) (2023-03-21)
+
+
+### Bug Fixes
+
+* **data-format:** after review changes ([60ca685](https://github.com/Synerise/synerise-design/commit/60ca68551cf3724aebe4c5787bc0d02bb58ac1bf))
+* **data-format:** data format usage fixes ([fef43fc](https://github.com/Synerise/synerise-design/commit/fef43fce8a04a28caddbb7b4dbd68126013ee58d))
+* **time-picker:** time picker data format usage fix ([538edd2](https://github.com/Synerise/synerise-design/commit/538edd231839bc4e9d5259302a385189b492c48f))
+
+
+
+
+
 # [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)
 
 

package/dist/TimePicker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 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"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<TimePickerProps, "className" | "onChange" | "placeholder" | "disabled" | "value" | "trigger" | "placement" | "overlayClassName" | "use12HourClock" | "units" | "defaultOpen" | "containerStyle" | "timeFormat" | "valueFormatOptions" | "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,5 +1,11 @@
 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); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import * as React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { range } from 'lodash';
@@ -8,6 +14,7 @@ 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 { useDataFormat } from '@synerise/ds-data-format';
 import Unit from './Unit';
 import * as S from './TimePicker.styles';
 import { handleTimeChange } from './utils/timePicker.utils';
@@ -26,6 +33,7 @@ var TimePicker = function TimePicker(_ref) {
       _ref$containerStyle = _ref.containerStyle,
       containerStyle = _ref$containerStyle === void 0 ? {} : _ref$containerStyle,
       timeFormat = _ref.timeFormat,
+      valueFormatOptions = _ref.valueFormatOptions,
       use12HourClock = _ref.use12HourClock,
       alwaysOpen = _ref.alwaysOpen,
       _ref$dropdownProps = _ref.dropdownProps,
@@ -47,6 +55,10 @@ var TimePicker = function TimePicker(_ref) {
       onClockModeChange = _ref.onClockModeChange,
       intl = _ref.intl;
 
+  var _useDataFormat = useDataFormat(),
+      formatValue = _useDataFormat.formatValue,
+      is12HoursClockFromDataFormat = _useDataFormat.is12HoursClock;
+
   var _React$useState = React.useState(defaultOpen || false),
       open = _React$useState[0],
       setOpen = _React$useState[1];
@@ -59,16 +71,27 @@ var TimePicker = function TimePicker(_ref) {
       clockMode = _React$useState2[0],
       setClockMode = _React$useState2[1];
 
+  var is12HourClock = React.useMemo(function () {
+    if (use12HourClock === undefined) return is12HoursClockFromDataFormat;
+    return use12HourClock;
+  }, [is12HoursClockFromDataFormat, use12HourClock]);
   var timeFormatByClockMode = React.useMemo(function () {
-    return timeFormat != null ? timeFormat : use12HourClock ? 'hh:mm:ss A' : 'HH:mm:ss';
-  }, [timeFormat, use12HourClock]);
+    return timeFormat != null ? timeFormat : is12HourClock ? 'hh:mm:ss A' : 'HH:mm:ss';
+  }, [timeFormat, is12HourClock]);
   var getTimeString = React.useCallback(function (date) {
-    return dayjs(date).format(timeFormatByClockMode);
+    if (timeFormat) {
+      return dayjs(date).format(timeFormatByClockMode);
+    }
+
+    return formatValue(date, _objectSpread({
+      targetFormat: 'time',
+      second: 'numeric'
+    }, valueFormatOptions));
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [timeFormat, timeFormatByClockMode]);
+  [timeFormat, timeFormatByClockMode, formatValue]);
   var unitConfig = [{
     unit: HOUR,
-    options: use12HourClock ? range(1, 13) : range(24),
+    options: is12HourClock ? range(1, 13) : range(24),
     disabled: disabledHours,
     insertSeperator: true
   }, {
@@ -80,7 +103,7 @@ var TimePicker = function TimePicker(_ref) {
     unit: SECOND,
     options: range(60),
     disabled: disabledSeconds,
-    insertSeperator: !!use12HourClock
+    insertSeperator: is12HourClock
   }];
   var unitsToRender = React.useMemo(function () {
     var availableUnits = units != null && units.length ? units : defaultUnits;
@@ -99,7 +122,7 @@ var TimePicker = function TimePicker(_ref) {
       clockModeChanged = false;
     }
 
-    var newDate = handleTimeChange(value, unit, newValue, clockModeChanged, use12HourClock, clockMode, unitConfig);
+    var newDate = handleTimeChange(value, unit, newValue, clockModeChanged, is12HourClock, clockMode, unitConfig);
     onChange && onChange(newDate, getTimeString(newDate));
   };
 
@@ -131,9 +154,9 @@ var TimePicker = function TimePicker(_ref) {
       onSelect: function onSelect(newValue) {
         return handleChange(u.unit, newValue);
       },
-      use12HourClock: use12HourClock
-    })), (index !== unitsToRender.length - 1 || !!use12HourClock) && /*#__PURE__*/React.createElement(S.UnitSeperator, null));
-  }), use12HourClock && renderClockSwitch());
+      use12HourClock: is12HourClock
+    })), (index !== unitsToRender.length - 1 || is12HourClock) && /*#__PURE__*/React.createElement(S.UnitSeperator, null));
+  }), is12HourClock && renderClockSwitch());
   var localValue = value;
   var dateString = localValue && getTimeString(localValue);
   var clear = React.useCallback(function () {
@@ -156,13 +179,13 @@ var TimePicker = function TimePicker(_ref) {
   }, [open, dateString, clear, clearTooltip, alwaysOpen, disabled]);
   var placeholderValue = React.useMemo(function () {
     if (value) {
-      return dayjs(value).format(timeFormatByClockMode);
+      return getTimeString(value);
     }
 
     return placeholder || intl.formatMessage({
       id: 'DS.TIME-PICKER.PLACEHOLDER'
     });
-  }, [placeholder, intl, value, timeFormatByClockMode]);
+  }, [placeholder, intl, value, getTimeString]);
 
   if (raw) {
     return overlay;

package/dist/TimePicker.styles.js

@@ -25,7 +25,7 @@ export var UnitSeperator = styled.div.withConfig({
 export var CellText = styled(Label).withConfig({
   displayName: "TimePickerstyles__CellText",
   componentId: "yk19n0-4"
-})(["&&{width:18px;height:18px;text-align:center;color:", ";transition:color 0.3s;}"], function (props) {
+})(["&&{width:22px;height:18px;text-align:center;color:", ";transition:color 0.3s;}"], function (props) {
   return props.theme.palette['grey-600'];
 });
 export var Cell = styled.button.withConfig({

package/dist/Unit.d.ts

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

package/dist/types/TimePicker.types.d.ts

@@ -3,6 +3,7 @@ import dayjs from 'dayjs';
 import { IntlShape } from 'react-intl';
 import { InputProps } from 'antd/es/input/Input';
 import { DropdownProps } from '@synerise/ds-dropdown/dist/Dropdown';
+import { DateToFormatOptions } from '@synerise/ds-data-format';
 import { CLOCK_MODES } from '../constants/timePicker.constants';
 export declare type ClockModes = typeof CLOCK_MODES[number];
 export declare type TimePickerDisabledUnits = {
@@ -26,9 +27,16 @@ export declare type TimePickerProps = TimePickerDisabledUnits & {
     placeholder?: string;
     placement?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
     raw?: boolean;
+    /**
+     * @deprecated use `valueFormatOptions` instead
+     */
     timeFormat?: string;
     trigger?: ('click' | 'hover' | 'contextMenu')[];
     units?: dayjs.UnitType[];
+    /**
+     * @deprecated use DSProvider::dataFormatConfig instead
+     */
     use12HourClock?: boolean;
+    valueFormatOptions?: DateToFormatOptions;
     value?: Date;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-time-picker",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "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.57",
+    "@synerise/ds-dropdown": "^0.17.58",
     "@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": "41419f123b90134def2fecde455da13946fc2c0e"
+  "gitHead": "f6617e99a823599ee63f3d094b81cdbec3a979ea"
 }