@data-driven-forms/carbon-component-mapper 3.12.2 → 3.13.0

package/esm/time-picker/time-picker.js

@@ -1,159 +1,18 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["input", "meta", "twelveHoursFormat", "timezones", "validateOnMount", "helperText", "WrapperProps"],
-    _excluded2 = ["showAs"];
-import React, { useState, useEffect, useRef } from 'react';
+var _excluded = ["useStringFormat"];
+import React from 'react';
 import PropTypes from 'prop-types';
-import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
-import CarbonTimePicker from "carbon-components-react/es/components/TimePicker/TimePicker.js";
-import TimePickerSelect from "carbon-components-react/es/components/TimePickerSelect/TimePickerSelect.js";
-import SelectItem from "carbon-components-react/es/components/SelectItem/SelectItem.js";
-import prepareProps from '../prepare-props';
-import HelperTextBlock from '../helper-text-block/helper-text-block';
+import TimePickerString from '../time-picker-string/time-picker-string';
+import TimePickerDate from '../time-picker-date';
 
-var TimePicker = function TimePicker(props) {
-  var _timezones$;
+var TimePicker = function TimePicker(_ref) {
+  var useStringFormat = _ref.useStringFormat,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  var _useFieldApi = useFieldApi(prepareProps(props)),
-      input = _useFieldApi.input,
-      meta = _useFieldApi.meta,
-      twelveHoursFormat = _useFieldApi.twelveHoursFormat,
-      timezones = _useFieldApi.timezones,
-      validateOnMount = _useFieldApi.validateOnMount,
-      helperText = _useFieldApi.helperText,
-      WrapperProps = _useFieldApi.WrapperProps,
-      rest = _objectWithoutProperties(_useFieldApi, _excluded);
-
-  var _useState = useState(timezones ? (_timezones$ = timezones[0]) === null || _timezones$ === void 0 ? void 0 : _timezones$.value : ''),
-      _useState2 = _slicedToArray(_useState, 2),
-      timezone = _useState2[0],
-      selectTimezone = _useState2[1];
-
-  var _useState3 = useState('AM'),
-      _useState4 = _slicedToArray(_useState3, 2),
-      format = _useState4[0],
-      selectFormat = _useState4[1];
-
-  var isMounted = useRef(false);
-  var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
-  var warnText = (meta.touched || validateOnMount) && meta.warning;
-  var finalValue = input.value;
-
-  if (input.value instanceof Date) {
-    var _timezones$find;
-
-    var _input$value$toLocale = input.value.toLocaleTimeString('en-us', {
-      hour12: !!twelveHoursFormat,
-      timeZone: timezones === null || timezones === void 0 ? void 0 : (_timezones$find = timezones.find(function (_ref) {
-        var value = _ref.value;
-        return value === timezone;
-      })) === null || _timezones$find === void 0 ? void 0 : _timezones$find.showAs
-    }).split(':'),
-        _input$value$toLocale2 = _slicedToArray(_input$value$toLocale, 2),
-        _input$value$toLocale3 = _input$value$toLocale2[0],
-        hours = _input$value$toLocale3 === void 0 ? '00' : _input$value$toLocale3,
-        _input$value$toLocale4 = _input$value$toLocale2[1],
-        minutes = _input$value$toLocale4 === void 0 ? '00' : _input$value$toLocale4;
-
-    finalValue = "".concat(String(hours).padStart(2, '0'), ":").concat(String(minutes).padStart(2, '0'));
-  }
-
-  var enhnancedOnBlur = function enhnancedOnBlur() {
-    var _finalValue;
-
-    var _ref2 = ((_finalValue = finalValue) === null || _finalValue === void 0 ? void 0 : _finalValue.split(':')) || [],
-        _ref3 = _slicedToArray(_ref2, 2),
-        _ref3$ = _ref3[0],
-        hours = _ref3$ === void 0 ? '00' : _ref3$,
-        _ref3$2 = _ref3[1],
-        minutes = _ref3$2 === void 0 ? '00' : _ref3$2;
-
-    if (!hours || isNaN(hours)) {
-      hours = '00';
-    }
-
-    if (!minutes || isNaN(minutes)) {
-      minutes = '00';
-    }
-
-    if (twelveHoursFormat) {
-      hours = hours % 12;
-
-      if (format === 'PM') {
-        hours = hours + 12;
-      }
-    } else {
-      hours = hours % 24;
-    }
-
-    minutes = minutes % 59;
-    var enhancedValue = new Date("Jan 1 2000 ".concat(hours, ":").concat(minutes, ":00 ").concat(timezone));
-    input.onChange(enhancedValue);
-    input.onBlur();
-  };
-
-  useEffect(function () {
-    if (isMounted.current === true) {
-      enhnancedOnBlur();
-    } else {
-      isMounted.current = true;
-    }
-  }, [timezone, format]);
-  return /*#__PURE__*/React.createElement("div", WrapperProps, /*#__PURE__*/React.createElement(CarbonTimePicker, _extends({}, input, {
-    value: finalValue,
-    onBlur: enhnancedOnBlur,
-    key: input.name,
-    id: input.name,
-    invalid: Boolean(invalid),
-    invalidText: invalid || ''
-  }, rest), twelveHoursFormat && /*#__PURE__*/React.createElement(TimePickerSelect, {
-    labelText: "Period",
-    id: "".concat(rest.id || input.name, "-12h"),
-    onChange: function onChange(_ref4) {
-      var value = _ref4.target.value;
-      return selectFormat(value);
-    }
-  }, /*#__PURE__*/React.createElement(SelectItem, {
-    value: "AM",
-    text: "AM"
-  }), /*#__PURE__*/React.createElement(SelectItem, {
-    value: "PM",
-    text: "PM"
-  })), timezones && /*#__PURE__*/React.createElement(TimePickerSelect, {
-    labelText: "Timezone",
-    id: "".concat(rest.id || input.name, "-timezones"),
-    onChange: function onChange(_ref5) {
-      var value = _ref5.target.value;
-      return selectTimezone(value);
-    }
-  }, timezones.map(function (_ref6) {
-    var showAs = _ref6.showAs,
-        tz = _objectWithoutProperties(_ref6, _excluded2);
-
-    return /*#__PURE__*/React.createElement(SelectItem, _extends({
-      key: tz.value,
-      text: tz.label
-    }, tz));
-  }))), /*#__PURE__*/React.createElement(HelperTextBlock, {
-    helperText: !invalid && helperText,
-    warnText: warnText
-  }));
+  return useStringFormat ? /*#__PURE__*/React.createElement(TimePickerString, props) : /*#__PURE__*/React.createElement(TimePickerDate, props);
 };
 
 TimePicker.propTypes = {
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isRequired: PropTypes.bool,
-  label: PropTypes.node,
-  labelText: PropTypes.node,
-  description: PropTypes.node,
-  twelveHoursFormat: PropTypes.bool,
-  timezones: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string.isRequired,
-    label: PropTypes.node.isRequired,
-    showAs: PropTypes.string.isRequired
-  })),
-  WrapperProps: PropTypes.object
+  useStringFormat: PropTypes.bool
 };
 export default TimePicker;

package/esm/time-picker-base/index.js

@@ -0,0 +1,2 @@
+export { default } from './time-picker-base';
+export * from './time-picker-base';

package/esm/time-picker-base/time-picker-base.js

@@ -0,0 +1,100 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["WrapperProps", "input", "enhnancedOnBlur", "enhancedOnChange", "finalValue", "invalid", "twelveHoursFormat", "timezones", "helperText", "warnText", "selectFormat", "selectTimezone"],
+    _excluded2 = ["showAs"];
+import React from 'react';
+import PropTypes from 'prop-types';
+import CarbonTimePicker from "carbon-components-react/es/components/TimePicker/TimePicker.js";
+import TimePickerSelect from "carbon-components-react/es/components/TimePickerSelect/TimePickerSelect.js";
+import SelectItem from "carbon-components-react/es/components/SelectItem/SelectItem.js";
+import HelperTextBlock from '../helper-text-block/helper-text-block';
+
+var TimePickerBase = function TimePickerBase(_ref) {
+  var WrapperProps = _ref.WrapperProps,
+      input = _ref.input,
+      enhnancedOnBlur = _ref.enhnancedOnBlur,
+      enhancedOnChange = _ref.enhancedOnChange,
+      finalValue = _ref.finalValue,
+      invalid = _ref.invalid,
+      twelveHoursFormat = _ref.twelveHoursFormat,
+      timezones = _ref.timezones,
+      helperText = _ref.helperText,
+      warnText = _ref.warnText,
+      selectFormat = _ref.selectFormat,
+      selectTimezone = _ref.selectTimezone,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", WrapperProps, /*#__PURE__*/React.createElement(CarbonTimePicker, _extends({}, input, enhnancedOnBlur && {
+    onBlur: enhnancedOnBlur
+  }, enhancedOnChange && {
+    onChange: function onChange(e) {
+      return enhancedOnChange(e.target.value);
+    }
+  }, {
+    onBlur: enhnancedOnBlur,
+    value: finalValue,
+    key: input.name,
+    id: input.name,
+    invalid: Boolean(invalid),
+    invalidText: invalid || ''
+  }, rest), twelveHoursFormat && /*#__PURE__*/React.createElement(TimePickerSelect, {
+    labelText: "Period",
+    id: "".concat(rest.id || input.name, "-12h"),
+    onChange: function onChange(_ref2) {
+      var value = _ref2.target.value;
+      return selectFormat(value);
+    }
+  }, /*#__PURE__*/React.createElement(SelectItem, {
+    value: "AM",
+    text: "AM"
+  }), /*#__PURE__*/React.createElement(SelectItem, {
+    value: "PM",
+    text: "PM"
+  })), timezones && /*#__PURE__*/React.createElement(TimePickerSelect, {
+    labelText: "Timezone",
+    id: "".concat(rest.id || input.name, "-timezones"),
+    onChange: function onChange(_ref3) {
+      var value = _ref3.target.value;
+      return selectTimezone(value);
+    }
+  }, timezones.map(function (_ref4) {
+    var showAs = _ref4.showAs,
+        tz = _objectWithoutProperties(_ref4, _excluded2);
+
+    return /*#__PURE__*/React.createElement(SelectItem, _extends({
+      key: tz.value,
+      text: tz.label
+    }, tz));
+  }))), /*#__PURE__*/React.createElement(HelperTextBlock, {
+    helperText: !invalid && helperText,
+    warnText: warnText
+  }));
+};
+
+TimePickerBase.propTypes = {
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  label: PropTypes.node,
+  labelText: PropTypes.node,
+  description: PropTypes.node,
+  twelveHoursFormat: PropTypes.bool,
+  timezones: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.node.isRequired,
+    showAs: PropTypes.string
+  })),
+  WrapperProps: PropTypes.object,
+  input: PropTypes.shape({
+    name: PropTypes.string
+  }).isRequired,
+  enhnancedOnBlur: PropTypes.func,
+  enhancedOnChange: PropTypes.func,
+  finalValue: PropTypes.any,
+  invalid: PropTypes.node,
+  helperText: PropTypes.node,
+  warnText: PropTypes.node,
+  selectFormat: PropTypes.func.isRequired,
+  selectTimezone: PropTypes.func.isRequired
+};
+export default TimePickerBase;

package/esm/time-picker-date/index.js

@@ -0,0 +1,2 @@
+export { default } from './time-picker-date';
+export * from './time-picker-date';

package/esm/time-picker-date/time-picker-date.js

@@ -0,0 +1,129 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["input", "meta", "twelveHoursFormat", "timezones", "validateOnMount", "helperText", "WrapperProps"];
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
+import prepareProps from '../prepare-props';
+import TimePickerBase from '../time-picker-base';
+
+var TimePickerDate = function TimePickerDate(props) {
+  var _timezones$;
+
+  var _useFieldApi = useFieldApi(prepareProps(props)),
+      input = _useFieldApi.input,
+      meta = _useFieldApi.meta,
+      twelveHoursFormat = _useFieldApi.twelveHoursFormat,
+      timezones = _useFieldApi.timezones,
+      validateOnMount = _useFieldApi.validateOnMount,
+      helperText = _useFieldApi.helperText,
+      WrapperProps = _useFieldApi.WrapperProps,
+      rest = _objectWithoutProperties(_useFieldApi, _excluded);
+
+  var _useState = useState(timezones ? (_timezones$ = timezones[0]) === null || _timezones$ === void 0 ? void 0 : _timezones$.value : ''),
+      _useState2 = _slicedToArray(_useState, 2),
+      timezone = _useState2[0],
+      selectTimezone = _useState2[1];
+
+  var _useState3 = useState('AM'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      format = _useState4[0],
+      selectFormat = _useState4[1];
+
+  var isMounted = useRef(false);
+  var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
+  var warnText = (meta.touched || validateOnMount) && meta.warning;
+  var finalValue = input.value;
+
+  if (input.value instanceof Date) {
+    var _timezones$find;
+
+    var _input$value$toLocale = input.value.toLocaleTimeString('en-us', {
+      hour12: !!twelveHoursFormat,
+      timeZone: timezones === null || timezones === void 0 ? void 0 : (_timezones$find = timezones.find(function (_ref) {
+        var value = _ref.value;
+        return value === timezone;
+      })) === null || _timezones$find === void 0 ? void 0 : _timezones$find.showAs
+    }).split(':'),
+        _input$value$toLocale2 = _slicedToArray(_input$value$toLocale, 2),
+        _input$value$toLocale3 = _input$value$toLocale2[0],
+        hours = _input$value$toLocale3 === void 0 ? '00' : _input$value$toLocale3,
+        _input$value$toLocale4 = _input$value$toLocale2[1],
+        minutes = _input$value$toLocale4 === void 0 ? '00' : _input$value$toLocale4;
+
+    finalValue = "".concat(String(hours).padStart(2, '0'), ":").concat(String(minutes).padStart(2, '0'));
+  }
+
+  var enhnancedOnBlur = function enhnancedOnBlur() {
+    var _finalValue;
+
+    var _ref2 = ((_finalValue = finalValue) === null || _finalValue === void 0 ? void 0 : _finalValue.split(':')) || [],
+        _ref3 = _slicedToArray(_ref2, 2),
+        _ref3$ = _ref3[0],
+        hours = _ref3$ === void 0 ? '00' : _ref3$,
+        _ref3$2 = _ref3[1],
+        minutes = _ref3$2 === void 0 ? '00' : _ref3$2;
+
+    if (!hours || isNaN(hours)) {
+      hours = '00';
+    }
+
+    if (!minutes || isNaN(minutes)) {
+      minutes = '00';
+    }
+
+    if (twelveHoursFormat) {
+      hours = hours % 12;
+
+      if (format === 'PM') {
+        hours = hours + 12;
+      }
+    } else {
+      hours = hours % 24;
+    }
+
+    minutes = minutes % 59;
+    var enhancedValue = new Date("Jan 1 2000 ".concat(hours, ":").concat(minutes, ":00 ").concat(timezone));
+    input.onChange(enhancedValue);
+    input.onBlur();
+  };
+
+  useEffect(function () {
+    if (isMounted.current === true) {
+      enhnancedOnBlur();
+    } else {
+      isMounted.current = true;
+    }
+  }, [timezone, format]);
+  return /*#__PURE__*/React.createElement(TimePickerBase, _extends({
+    WrapperProps: WrapperProps,
+    input: input,
+    enhnancedOnBlur: enhnancedOnBlur,
+    finalValue: finalValue,
+    invalid: invalid,
+    twelveHoursFormat: twelveHoursFormat,
+    timezones: timezones,
+    helperText: helperText,
+    warnText: warnText,
+    selectFormat: selectFormat,
+    selectTimezone: selectTimezone
+  }, rest));
+};
+
+TimePickerDate.propTypes = {
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  label: PropTypes.node,
+  labelText: PropTypes.node,
+  description: PropTypes.node,
+  twelveHoursFormat: PropTypes.bool,
+  timezones: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.node.isRequired,
+    showAs: PropTypes.string
+  })),
+  WrapperProps: PropTypes.object
+};
+export default TimePickerDate;

package/esm/time-picker-string/index.js

@@ -0,0 +1,2 @@
+export { default } from './time-picker-string';
+export * from './time-picker-string';

package/esm/time-picker-string/time-picker-string.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["input", "meta", "twelveHoursFormat", "timezones", "validateOnMount", "helperText", "WrapperProps", "useStringFormat"];
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import useFieldApi from "@data-driven-forms/react-form-renderer/use-field-api";
+import prepareProps from '../prepare-props';
+import TimePickerBase from '../time-picker-base';
+
+var TimePickerString = function TimePickerString(props) {
+  var _useFieldApi = useFieldApi(prepareProps(props)),
+      input = _useFieldApi.input,
+      meta = _useFieldApi.meta,
+      twelveHoursFormat = _useFieldApi.twelveHoursFormat,
+      timezones = _useFieldApi.timezones,
+      validateOnMount = _useFieldApi.validateOnMount,
+      helperText = _useFieldApi.helperText,
+      WrapperProps = _useFieldApi.WrapperProps,
+      useStringFormat = _useFieldApi.useStringFormat,
+      rest = _objectWithoutProperties(_useFieldApi, _excluded);
+
+  var _useState = useState(function () {
+    var _input$value$match, _timezones$;
+
+    return timezones ? ((_input$value$match = input.value.match(/ \w+$/)) === null || _input$value$match === void 0 ? void 0 : _input$value$match[0].trim()) || ((_timezones$ = timezones[0]) === null || _timezones$ === void 0 ? void 0 : _timezones$.value) : '';
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      timezone = _useState2[0],
+      selectTimezone = _useState2[1];
+
+  var _useState3 = useState(function () {
+    var _input$value$match2;
+
+    return ((_input$value$match2 = input.value.match(/ \w+ /)) === null || _input$value$match2 === void 0 ? void 0 : _input$value$match2[0].trim()) || 'AM';
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      format = _useState4[0],
+      selectFormat = _useState4[1];
+
+  var isMounted = useRef(false);
+  var invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
+  var warnText = (meta.touched || validateOnMount) && meta.warning;
+  var finalValue = input.value.replace(/ .*/, '');
+
+  var enhancedOnChange = function enhancedOnChange(value) {
+    return input.onChange("".concat(value, " ").concat(twelveHoursFormat ? format : '', " ").concat(timezones ? timezone : '').replace(/ {2}/, ' ').trim());
+  };
+
+  useEffect(function () {
+    if (isMounted.current === true) {
+      enhancedOnChange(finalValue);
+    } else {
+      isMounted.current = true;
+    }
+  }, [timezone, format]);
+  return /*#__PURE__*/React.createElement(TimePickerBase, _extends({
+    WrapperProps: WrapperProps,
+    input: input,
+    enhancedOnChange: enhancedOnChange,
+    finalValue: finalValue,
+    invalid: invalid,
+    twelveHoursFormat: twelveHoursFormat,
+    timezones: timezones,
+    helperText: helperText,
+    warnText: warnText,
+    selectFormat: selectFormat,
+    selectTimezone: selectTimezone
+  }, rest));
+};
+
+TimePickerString.propTypes = {
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  label: PropTypes.node,
+  labelText: PropTypes.node,
+  description: PropTypes.node,
+  twelveHoursFormat: PropTypes.bool,
+  timezones: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.node.isRequired,
+    showAs: PropTypes.string
+  })),
+  WrapperProps: PropTypes.object,
+  useStringFormat: PropTypes.bool
+};
+export default TimePickerString;

package/index.d.ts

@@ -36,6 +36,12 @@ export { default as TextField } from './text-field';
 export * from './text-field';
 export { default as Textarea } from './textarea';
 export * from './textarea';
+export { default as TimePickerBase } from './time-picker-base';
+export * from './time-picker-base';
+export { default as TimePickerDate } from './time-picker-date';
+export * from './time-picker-date';
+export { default as TimePickerString } from './time-picker-string';
+export * from './time-picker-string';
 export { default as TimePicker } from './time-picker';
 export * from './time-picker';
 export { default as WithDescription } from './with-description';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/carbon-component-mapper",
-  "version": "3.12.2",
+  "version": "3.13.0",
   "description": "Carbon React component mapper for Data Driven Forms.",
   "main": "index.js",
   "module": "esm/index.js",

package/time-picker/time-picker.d.ts

@@ -1,21 +1,13 @@
-import { ReactNode } from "react";
 import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
 
-import { FormGroupProps } from "../form-group";
+import { TimePickerDateProps } from "../time-picker-date";
+import { TimePickerStringProps } from "../time-picker-string";
 
-import { TimePickerProps as CarbonTimePickerProps, SelectItemProps } from 'carbon-components-react';
-
-export interface Timezone extends SelectItemProps {
-    value: string;
-    label?: string;
-}
-
-interface InternalTimePickerProps extends CarbonTimePickerProps {
-    twelveHoursFormat?: boolean;
-    timezones?: Timezone[];
+interface InternalTimePickerProps extends AnyObject{
+    useStringFormat?: boolean;
 }
 
-export type TimePickerProps = InternalTimePickerProps & FormGroupProps & UseFieldApiComponentConfig;
+export type TimePickerProps = InternalTimePickerProps & TimePickerDateProps & TimePickerStringProps & UseFieldApiComponentConfig;
 
 declare const TimePicker: React.ComponentType<TimePickerProps>;