@hitachivantara/uikit-react-lab 2.6.18

package/dist/modern/TimePicker/TimePicker.js

@@ -0,0 +1,394 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "core-js/modules/es.array.includes.js";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React from "react";
+import PropTypes from "prop-types";
+import { ClickAwayListener, Popper, withStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { HvTypography } from "@hitachivantara/uikit-react-core";
+import { Time as TimeIcon } from "@hitachivantara/uikit-react-icons";
+import UnitTimePicker from "./UnitTimePicker";
+import { TimePickerUnits, TimeFormat } from "./enums";
+import { getPeriodForDate } from "./timePickerUtils";
+import { getFormattedTime, getTimeFormatForLocale } from "./timePickerFormatter";
+import { getHoursForTimeFormat, getTimeWithFormat24 } from "./timePickerConverter";
+import PeriodPicker from "./PeriodPicker";
+import styles from "./styles";
+/**
+ * A TimePicker component with a popup used to choose the time, following specifications provided by Design System. Still in development.
+ */
+
+class HvTimePicker extends React.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "handleTimePopperClickAway", () => {
+      this.cancelTimeSelection();
+    });
+
+    _defineProperty(this, "handleTimeIconClick", event => {
+      const {
+        currentTarget
+      } = event;
+      const {
+        timePopperOpen
+      } = this.state;
+      this.setTimePopperState(currentTarget.parentElement, !timePopperOpen);
+    });
+
+    _defineProperty(this, "cancelTimeSelection", () => {
+      this.setTimePopperState(null, false);
+    });
+
+    _defineProperty(this, "handleHoursChange", hours => {
+      const {
+        selectedTime
+      } = this.state;
+
+      const newSelectedTime = _objectSpread(_objectSpread({}, selectedTime), {}, {
+        hours
+      });
+
+      this.onSelectedTimeChange(newSelectedTime);
+    });
+
+    _defineProperty(this, "handleMinutesChange", minutes => {
+      const {
+        selectedTime
+      } = this.state;
+
+      const newSelectedTime = _objectSpread(_objectSpread({}, selectedTime), {}, {
+        minutes
+      });
+
+      this.onSelectedTimeChange(newSelectedTime);
+    });
+
+    _defineProperty(this, "handleSecondsChange", seconds => {
+      const {
+        selectedTime
+      } = this.state;
+
+      const newSelectedTime = _objectSpread(_objectSpread({}, selectedTime), {}, {
+        seconds
+      });
+
+      this.onSelectedTimeChange(newSelectedTime);
+    });
+
+    _defineProperty(this, "handleChangePeriod", period => {
+      const {
+        selectedTime
+      } = this.state;
+
+      const newSelectedTime = _objectSpread(_objectSpread({}, selectedTime), {}, {
+        period
+      });
+
+      this.onSelectedTimeChange(newSelectedTime);
+    });
+
+    _defineProperty(this, "setTimePopperState", (anchor, open) => {
+      this.setState({
+        timePopperAnchor: anchor,
+        timePopperOpen: open
+      });
+    });
+
+    _defineProperty(this, "setTimePopperPlacement", placement => {
+      const {
+        timePopperPlacement
+      } = this.state;
+
+      if (timePopperPlacement !== placement) {
+        this.setState({
+          timePopperPlacement: placement
+        });
+      }
+    });
+
+    _defineProperty(this, "onSelectedTimeChange", selectedTime => {
+      const {
+        onChange
+      } = this.props;
+      const {
+        timeFormat
+      } = this.state;
+      this.setState({
+        selectedTime
+      });
+      const selectedTimeIn24Format = getTimeWithFormat24(selectedTime, timeFormat);
+      onChange(selectedTimeIn24Format);
+    });
+
+    _defineProperty(this, "getTimeFormat", () => {
+      const {
+        timeFormat,
+        locale
+      } = this.props;
+
+      if (timeFormat) {
+        return timeFormat;
+      }
+
+      return getTimeFormatForLocale(locale);
+    });
+
+    _defineProperty(this, "isPopperBelowParent", () => {
+      const {
+        timePopperPlacement
+      } = this.state;
+      return timePopperPlacement.includes("bottom");
+    });
+
+    _defineProperty(this, "renderLabel", () => {
+      const {
+        classes,
+        labels
+      } = this.props;
+      return /*#__PURE__*/React.createElement(HvTypography, {
+        variant: "labelText",
+        className: classes.label
+      }, labels.title);
+    });
+
+    _defineProperty(this, "renderInput", () => {
+      const {
+        classes,
+        labels
+      } = this.props;
+      const {
+        selectedTime,
+        timePopperOpen
+      } = this.state;
+      const isPopperBelow = this.isPopperBelowParent();
+      return /*#__PURE__*/React.createElement(React.Fragment, null, labels && labels.title && this.renderLabel(), /*#__PURE__*/React.createElement("div", {
+        className: clsx(classes.inputContainer, timePopperOpen ? isPopperBelow ? classes.inputPopperOpenedBelow : classes.inputPopperOpenedAbove : classes.inputPopperClosed)
+      }, /*#__PURE__*/React.createElement("input", {
+        ref: element => {
+          this.inputElement = element;
+        },
+        className: classes.input,
+        value: getFormattedTime(selectedTime),
+        placeholder: labels.placeholder,
+        type: "text",
+        readOnly: true
+      }), /*#__PURE__*/React.createElement(TimeIcon, {
+        className: classes.icon,
+        onClick: this.handleTimeIconClick
+      })));
+    });
+
+    _defineProperty(this, "renderPopper", () => {
+      const {
+        classes
+      } = this.props;
+      const {
+        timePopperOpen,
+        timePopperAnchor
+      } = this.state;
+      const isPopperBelow = this.isPopperBelowParent();
+      return /*#__PURE__*/React.createElement(Popper, {
+        className: clsx(classes.popper, isPopperBelow ? classes.popperBelow : classes.popperAbove),
+        open: timePopperOpen,
+        anchorEl: timePopperAnchor,
+        placement: "bottom-start",
+        disablePortal: true,
+        popperOptions: {
+          onCreate: data => {
+            this.setTimePopperPlacement(data.placement);
+          },
+          onUpdate: data => {
+            this.setTimePopperPlacement(data.placement);
+          }
+        }
+      }, this.renderTimePopperContent());
+    });
+
+    _defineProperty(this, "renderTimePopperContent", () => {
+      const {
+        classes
+      } = this.props;
+      const {
+        selectedTime,
+        timeFormat
+      } = this.state;
+      const separator = /*#__PURE__*/React.createElement("span", {
+        className: classes.separator
+      }, ":");
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes.timePopperContainer
+      }, /*#__PURE__*/React.createElement(UnitTimePicker, {
+        unit: timeFormat === TimeFormat.H24 ? TimePickerUnits.HOUR_24.type : TimePickerUnits.HOUR_12.type,
+        unitValue: selectedTime.hours,
+        onChangeUnitTimeValue: this.handleHoursChange
+      }), separator, /*#__PURE__*/React.createElement(UnitTimePicker, {
+        unit: TimePickerUnits.MINUTE.type,
+        unitValue: selectedTime.minutes,
+        onChangeUnitTimeValue: this.handleMinutesChange
+      }), separator, /*#__PURE__*/React.createElement(UnitTimePicker, {
+        unit: TimePickerUnits.SECOND.type,
+        unitValue: selectedTime.seconds,
+        onChangeUnitTimeValue: this.handleSecondsChange
+      }), timeFormat === TimeFormat.H12 && /*#__PURE__*/React.createElement("div", {
+        className: classes.periodContainer
+      }, /*#__PURE__*/React.createElement(PeriodPicker, {
+        onChangePeriod: this.handleChangePeriod,
+        period: selectedTime.period
+      })));
+    });
+
+    const {
+      onChange: _onChange,
+      hours: _hours,
+      minutes: _minutes,
+      seconds: _seconds,
+      period: _period
+    } = this.props;
+
+    const _timeFormat = this.getTimeFormat();
+
+    const _selectedTime = {
+      hours: getHoursForTimeFormat(_hours, _timeFormat),
+      minutes: _minutes,
+      seconds: _seconds,
+      period: _timeFormat === TimeFormat.H24 ? undefined : _period
+    };
+    this.state = {
+      timePopperOpen: false,
+      timePopperAnchor: null,
+      timePopperPlacement: "bottom-start",
+      timeFormat: _timeFormat,
+      selectedTime: _selectedTime
+    };
+
+    _onChange(getTimeWithFormat24(_selectedTime, _timeFormat));
+  }
+  /**
+   * Handles the event of clicking away from the Popper.
+   *
+   * @memberof HvTimePicker
+   */
+
+
+  /**
+   * Renders the TimePicker component.
+   *
+   * @returns
+   * @memberof HvTimePicker
+   */
+  render() {
+    const {
+      classes
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ClickAwayListener, {
+      onClickAway: this.handleTimePopperClickAway
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.timePickerContainer
+    }, this.renderInput(), this.renderPopper()));
+  }
+
+}
+
+process.env.NODE_ENV !== "production" ? HvTimePicker.propTypes = {
+  /**
+   * An Object containing the various text associated with the time picker.
+   */
+  labels: PropTypes.shape({
+    /**
+     * Time picker label (appears above the input)
+     */
+    title: PropTypes.string,
+
+    /**
+     * Time picker placeholder (appears in the input)
+     */
+    placeholder: PropTypes.string
+  }),
+
+  /**
+   * If the time should be presented in 12 or 24 hour format.
+   * If undefined, the component will use a format according to the passed locale.
+   * If defined, it will "override" the default value given by the locale
+   */
+  timeFormat: PropTypes.oneOf([TimeFormat.H12, TimeFormat.H24, undefined]),
+
+  /**
+   * Locale that will provide the time format(12 or 24 hour format)
+   * It is "overwritten" by the timeFormat prop
+   */
+  locale: PropTypes.string,
+
+  /**
+   * Default value for the hours picker
+   */
+  hours: PropTypes.number,
+
+  /**
+   * Default value for the minutes picker
+   */
+  minutes: PropTypes.number,
+
+  /**
+   * Default value for the seconds picker
+   */
+  seconds: PropTypes.number,
+
+  /**
+   * Default value for the period picker
+   */
+  period: PropTypes.string,
+
+  /**
+   * Callback function to be triggered when the input value is changed.
+   * It is invoked with a object param with the following props:
+   *  - hours (in a 24h format)
+   *  - minutes
+   *  - seconds
+   *  - period
+   *
+   * It is always invoked with the hours in a 24h format
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * A Jss Object used to override or extend the styles applied to the input/popper
+   */
+  classes: PropTypes.shape({
+    input: PropTypes.string,
+    inputPopperOpenedBelow: PropTypes.string,
+    inputPopperOpenedAbove: PropTypes.string,
+    inputPopperClosed: PropTypes.string,
+    inputContainer: PropTypes.string,
+    icon: PropTypes.string,
+    timePickerContainer: PropTypes.string,
+    label: PropTypes.string,
+    timePopperContainer: PropTypes.string,
+    popper: PropTypes.string,
+    popperBelow: PropTypes.string,
+    popperAbove: PropTypes.string,
+    separator: PropTypes.string,
+    periodContainer: PropTypes.string
+  }).isRequired
+} : void 0;
+HvTimePicker.defaultProps = {
+  labels: {
+    title: undefined,
+    placeholder: "hh:mm:ss"
+  },
+  timeFormat: undefined,
+  locale: "en",
+  hours: new Date().getHours(),
+  minutes: new Date().getMinutes(),
+  seconds: 0,
+  period: getPeriodForDate(),
+  onChange: () => {}
+};
+export default withStyles(styles, {
+  name: "HvTimePicker"
+})(HvTimePicker);
+//# sourceMappingURL=TimePicker.js.map

package/dist/modern/TimePicker/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","names":["React","PropTypes","ClickAwayListener","Popper","withStyles","clsx","HvTypography","Time","TimeIcon","UnitTimePicker","TimePickerUnits","TimeFormat","getPeriodForDate","getFormattedTime","getTimeFormatForLocale","getHoursForTimeFormat","getTimeWithFormat24","PeriodPicker","styles","HvTimePicker","Component","constructor","props","cancelTimeSelection","event","currentTarget","timePopperOpen","state","setTimePopperState","parentElement","hours","selectedTime","newSelectedTime","onSelectedTimeChange","minutes","seconds","period","anchor","open","setState","timePopperAnchor","placement","timePopperPlacement","onChange","timeFormat","selectedTimeIn24Format","locale","includes","classes","labels","label","title","isPopperBelow","isPopperBelowParent","renderLabel","inputContainer","inputPopperOpenedBelow","inputPopperOpenedAbove","inputPopperClosed","element","inputElement","input","placeholder","icon","handleTimeIconClick","popper","popperBelow","popperAbove","onCreate","data","setTimePopperPlacement","onUpdate","renderTimePopperContent","separator","timePopperContainer","H24","HOUR_24","type","HOUR_12","handleHoursChange","MINUTE","handleMinutesChange","SECOND","handleSecondsChange","H12","periodContainer","handleChangePeriod","getTimeFormat","undefined","render","handleTimePopperClickAway","timePickerContainer","renderInput","renderPopper","propTypes","shape","string","oneOf","number","func","isRequired","defaultProps","Date","getHours","getMinutes","name"],"sources":["../../../src/TimePicker/TimePicker.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { ClickAwayListener, Popper, withStyles } from \"@material-ui/core\";\nimport clsx from \"clsx\";\nimport { HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport UnitTimePicker from \"./UnitTimePicker\";\nimport { TimePickerUnits, TimeFormat } from \"./enums\";\nimport { getPeriodForDate } from \"./timePickerUtils\";\nimport { getFormattedTime, getTimeFormatForLocale } from \"./timePickerFormatter\";\nimport { getHoursForTimeFormat, getTimeWithFormat24 } from \"./timePickerConverter\";\nimport PeriodPicker from \"./PeriodPicker\";\nimport styles from \"./styles\";\n\n/**\n * A TimePicker component with a popup used to choose the time, following specifications provided by Design System. Still in development.\n */\nclass HvTimePicker extends React.Component {\n  constructor(props) {\n    super(props);\n\n    const { onChange, hours, minutes, seconds, period } = this.props;\n    const timeFormat = this.getTimeFormat();\n    const selectedTime = {\n      hours: getHoursForTimeFormat(hours, timeFormat),\n      minutes,\n      seconds,\n      period: timeFormat === TimeFormat.H24 ? undefined : period,\n    };\n\n    this.state = {\n      timePopperOpen: false,\n      timePopperAnchor: null,\n      timePopperPlacement: \"bottom-start\",\n      timeFormat,\n      selectedTime,\n    };\n\n    onChange(getTimeWithFormat24(selectedTime, timeFormat));\n  }\n\n  /**\n   * Handles the event of clicking away from the Popper.\n   *\n   * @memberof HvTimePicker\n   */\n  handleTimePopperClickAway = () => {\n    this.cancelTimeSelection();\n  };\n\n  /**\n   * Handles the click on the Time icon inside the input.\n   *\n   * @param {Object} event - on click event on the icon\n   * @memberof HvTimePicker\n   */\n  handleTimeIconClick = (event) => {\n    const { currentTarget } = event;\n    const { timePopperOpen } = this.state;\n    this.setTimePopperState(currentTarget.parentElement, !timePopperOpen);\n  };\n\n  /**\n   * Cancels the time selection and closes the Time popper.\n   *\n   * @memberof HvTimePicker\n   */\n  cancelTimeSelection = () => {\n    this.setTimePopperState(null, false);\n  };\n\n  /**\n   * Handles the change of the hours value\n   * @param {Number} hours - selected hours\n   * @memberof HvTimePicker\n   */\n  handleHoursChange = (hours) => {\n    const { selectedTime } = this.state;\n    const newSelectedTime = {\n      ...selectedTime,\n      hours,\n    };\n    this.onSelectedTimeChange(newSelectedTime);\n  };\n\n  /**\n   * Handles the change of the minutes value\n   * @param {Number} minutes - selected minutes\n   * @memberof HvTimePicker\n   */\n  handleMinutesChange = (minutes) => {\n    const { selectedTime } = this.state;\n    const newSelectedTime = {\n      ...selectedTime,\n      minutes,\n    };\n    this.onSelectedTimeChange(newSelectedTime);\n  };\n\n  /**\n   * Handles the change of the seconds value\n   * @param {Number} seconds - selected seconds\n   * @memberof HvTimePicker\n   */\n  handleSecondsChange = (seconds) => {\n    const { selectedTime } = this.state;\n    const newSelectedTime = {\n      ...selectedTime,\n      seconds,\n    };\n    this.onSelectedTimeChange(newSelectedTime);\n  };\n\n  /**\n   * Handles the change of the period (am/pm)\n   * @param {String} period - selected period\n   * @memberof HvTimePicker\n   */\n  handleChangePeriod = (period) => {\n    const { selectedTime } = this.state;\n    const newSelectedTime = {\n      ...selectedTime,\n      period,\n    };\n    this.onSelectedTimeChange(newSelectedTime);\n  };\n\n  /**\n   * Changes the popper open state according to the received flag.\n   *\n   * @param {element} anchor - Anchor element to append the popper\n   * @param {boolean} open - Opens / closes the popper according to this flag.\n   * @memberof HvTimePicker\n   */\n  setTimePopperState = (anchor, open) => {\n    this.setState({\n      timePopperAnchor: anchor,\n      timePopperOpen: open,\n    });\n  };\n\n  /**\n   * Changes the popper placement in the state\n   *\n   * @param {String} placement - Popper placement\n   * @memberof HvTimePicker\n   */\n  setTimePopperPlacement = (placement) => {\n    const { timePopperPlacement } = this.state;\n    if (timePopperPlacement !== placement) {\n      this.setState({\n        timePopperPlacement: placement,\n      });\n    }\n  };\n\n  /**\n   * Changes the selected time on the component state\n   * Also calls the onChange callback\n   * @param {Object} selectedTime - time object with the selected values for hours, minutes, seconds and period\n   */\n  onSelectedTimeChange = (selectedTime) => {\n    const { onChange } = this.props;\n    const { timeFormat } = this.state;\n    this.setState({\n      selectedTime,\n    });\n    const selectedTimeIn24Format = getTimeWithFormat24(selectedTime, timeFormat);\n    onChange(selectedTimeIn24Format);\n  };\n\n  /**\n   * Returns the appropriate time format (12 or 24) depending on the passed props(timeFormat and locale)\n   * @memberof HvTimePicker\n   */\n  getTimeFormat = () => {\n    const { timeFormat, locale } = this.props;\n    if (timeFormat) {\n      return timeFormat;\n    }\n    return getTimeFormatForLocale(locale);\n  };\n\n  /**\n   * Returns true if the popper is below the input and false otherwise\n   * @memberof HvTimePicker\n   */\n  isPopperBelowParent = () => {\n    const { timePopperPlacement } = this.state;\n    return timePopperPlacement.includes(\"bottom\");\n  };\n\n  /**\n   * Renderers\n   */\n\n  /**\n   * Renders the Label element.\n   *\n   * @memberof HvTimePicker\n   */\n  renderLabel = () => {\n    const { classes, labels } = this.props;\n    return (\n      <HvTypography variant=\"labelText\" className={classes.label}>\n        {labels.title}\n      </HvTypography>\n    );\n  };\n\n  /**\n   * Renders the input.\n   *\n   * @memberof HvTimePicker\n   */\n  renderInput = () => {\n    const { classes, labels } = this.props;\n    const { selectedTime, timePopperOpen } = this.state;\n    const isPopperBelow = this.isPopperBelowParent();\n    return (\n      <>\n        {labels && labels.title && this.renderLabel()}\n        <div\n          className={clsx(classes.inputContainer, {\n            [classes.inputPopperOpenedBelow]: timePopperOpen && isPopperBelow,\n            [classes.inputPopperOpenedAbove]: timePopperOpen && !isPopperBelow,\n            [classes.inputPopperClosed]: !timePopperOpen,\n          })}\n        >\n          <input\n            ref={(element) => {\n              this.inputElement = element;\n            }}\n            className={classes.input}\n            value={getFormattedTime(selectedTime)}\n            placeholder={labels.placeholder}\n            type=\"text\"\n            readOnly\n          />\n          <TimeIcon className={classes.icon} onClick={this.handleTimeIconClick} />\n        </div>\n      </>\n    );\n  };\n\n  /**\n   * Renders the Popper to choose the time\n   *\n   * @memberof HvTimePicker\n   */\n  renderPopper = () => {\n    const { classes } = this.props;\n    const { timePopperOpen, timePopperAnchor } = this.state;\n    const isPopperBelow = this.isPopperBelowParent();\n\n    return (\n      <Popper\n        className={clsx(classes.popper, {\n          [classes.popperBelow]: isPopperBelow,\n          [classes.popperAbove]: !isPopperBelow,\n        })}\n        open={timePopperOpen}\n        anchorEl={timePopperAnchor}\n        placement=\"bottom-start\"\n        disablePortal\n        popperOptions={{\n          onCreate: (data) => {\n            this.setTimePopperPlacement(data.placement);\n          },\n          onUpdate: (data) => {\n            this.setTimePopperPlacement(data.placement);\n          },\n        }}\n      >\n        {this.renderTimePopperContent()}\n      </Popper>\n    );\n  };\n\n  /**\n   * Renders the time popper content for time selection.\n   *\n   * @memberof HvTimePicker\n   */\n  renderTimePopperContent = () => {\n    const { classes } = this.props;\n    const { selectedTime, timeFormat } = this.state;\n\n    const separator = <span className={classes.separator}>:</span>;\n\n    return (\n      <div className={classes.timePopperContainer}>\n        <UnitTimePicker\n          unit={\n            timeFormat === TimeFormat.H24\n              ? TimePickerUnits.HOUR_24.type\n              : TimePickerUnits.HOUR_12.type\n          }\n          unitValue={selectedTime.hours}\n          onChangeUnitTimeValue={this.handleHoursChange}\n        />\n        {separator}\n        <UnitTimePicker\n          unit={TimePickerUnits.MINUTE.type}\n          unitValue={selectedTime.minutes}\n          onChangeUnitTimeValue={this.handleMinutesChange}\n        />\n        {separator}\n        <UnitTimePicker\n          unit={TimePickerUnits.SECOND.type}\n          unitValue={selectedTime.seconds}\n          onChangeUnitTimeValue={this.handleSecondsChange}\n        />\n        {timeFormat === TimeFormat.H12 && (\n          <div className={classes.periodContainer}>\n            <PeriodPicker onChangePeriod={this.handleChangePeriod} period={selectedTime.period} />\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  /**\n   * Renders the TimePicker component.\n   *\n   * @returns\n   * @memberof HvTimePicker\n   */\n  render() {\n    const { classes } = this.props;\n\n    return (\n      <ClickAwayListener onClickAway={this.handleTimePopperClickAway}>\n        <div className={classes.timePickerContainer}>\n          {this.renderInput()}\n          {this.renderPopper()}\n        </div>\n      </ClickAwayListener>\n    );\n  }\n}\n\nHvTimePicker.propTypes = {\n  /**\n   * An Object containing the various text associated with the time picker.\n   */\n  labels: PropTypes.shape({\n    /**\n     * Time picker label (appears above the input)\n     */\n    title: PropTypes.string,\n    /**\n     * Time picker placeholder (appears in the input)\n     */\n    placeholder: PropTypes.string,\n  }),\n  /**\n   * If the time should be presented in 12 or 24 hour format.\n   * If undefined, the component will use a format according to the passed locale.\n   * If defined, it will \"override\" the default value given by the locale\n   */\n  timeFormat: PropTypes.oneOf([TimeFormat.H12, TimeFormat.H24, undefined]),\n  /**\n   * Locale that will provide the time format(12 or 24 hour format)\n   * It is \"overwritten\" by the timeFormat prop\n   */\n  locale: PropTypes.string,\n  /**\n   * Default value for the hours picker\n   */\n  hours: PropTypes.number,\n  /**\n   * Default value for the minutes picker\n   */\n  minutes: PropTypes.number,\n  /**\n   * Default value for the seconds picker\n   */\n  seconds: PropTypes.number,\n  /**\n   * Default value for the period picker\n   */\n  period: PropTypes.string,\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a object param with the following props:\n   *  - hours (in a 24h format)\n   *  - minutes\n   *  - seconds\n   *  - period\n   *\n   * It is always invoked with the hours in a 24h format\n   */\n  onChange: PropTypes.func,\n  /**\n   * A Jss Object used to override or extend the styles applied to the input/popper\n   */\n  classes: PropTypes.shape({\n    input: PropTypes.string,\n    inputPopperOpenedBelow: PropTypes.string,\n    inputPopperOpenedAbove: PropTypes.string,\n    inputPopperClosed: PropTypes.string,\n    inputContainer: PropTypes.string,\n    icon: PropTypes.string,\n    timePickerContainer: PropTypes.string,\n    label: PropTypes.string,\n    timePopperContainer: PropTypes.string,\n    popper: PropTypes.string,\n    popperBelow: PropTypes.string,\n    popperAbove: PropTypes.string,\n    separator: PropTypes.string,\n    periodContainer: PropTypes.string,\n  }).isRequired,\n};\n\nHvTimePicker.defaultProps = {\n  labels: {\n    title: undefined,\n    placeholder: \"hh:mm:ss\",\n  },\n  timeFormat: undefined,\n  locale: \"en\",\n  hours: new Date().getHours(),\n  minutes: new Date().getMinutes(),\n  seconds: 0,\n  period: getPeriodForDate(),\n  onChange: () => {},\n};\n\nexport default withStyles(styles, { name: \"HvTimePicker\" })(HvTimePicker);\n"],"mappings":"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"}

package/dist/modern/TimePicker/UnitTimePicker/UnitTimePicker.js

@@ -0,0 +1,186 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { HvInput } from "@hitachivantara/uikit-react-core";
+import { DropUpXS as AddTimeIcon, DropDownXS as SubtractTimeIcon } from "@hitachivantara/uikit-react-icons";
+import { isUnitTimeInValidRange } from "../timePickerUtils";
+import { padTime } from "../timePickerFormatter";
+import { TimePickerUnits } from "../enums";
+
+class UnitTimePicker extends React.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "handleCurrentValueChange", (event, value) => {
+      const unitTime = value === "" ? value : Number(value);
+
+      if ((unitTime || unitTime === "") && unitTime.toString().length <= 2) {
+        this.changeTimeUnit(unitTime);
+      }
+    });
+
+    _defineProperty(this, "handleFocusChange", () => {
+      const {
+        isFocused
+      } = this.state;
+      this.setState({
+        isFocused: !isFocused
+      });
+    });
+
+    _defineProperty(this, "handleAddTime", () => {
+      const {
+        currentValue,
+        maxValue,
+        minValue
+      } = this.state;
+      let newUnitTime = currentValue === "" ? minValue : currentValue + 1;
+
+      if (newUnitTime > maxValue) {
+        newUnitTime = minValue;
+      }
+
+      this.changeTimeUnit(newUnitTime);
+    });
+
+    _defineProperty(this, "handleSubtractTime", () => {
+      const {
+        currentValue,
+        maxValue,
+        minValue
+      } = this.state;
+      let newUnitTime = currentValue === "" ? maxValue : currentValue - 1;
+
+      if (newUnitTime < minValue) {
+        newUnitTime = maxValue;
+      }
+
+      this.changeTimeUnit(newUnitTime);
+    });
+
+    _defineProperty(this, "changeTimeUnit", value => {
+      const {
+        onChangeUnitTimeValue
+      } = this.props;
+      this.setState({
+        currentValue: value
+      });
+
+      if (this.isUnitTimeValid(value)) {
+        onChangeUnitTimeValue(value);
+      }
+    });
+
+    _defineProperty(this, "isUnitTimeValid", unitTime => {
+      const {
+        unit
+      } = this.props;
+      const isValid = isUnitTimeInValidRange(unitTime, unit);
+      this.setState({
+        isValid
+      });
+      return isValid;
+    });
+
+    _defineProperty(this, "renderTimeUnit", () => {
+      const {
+        currentValue,
+        isFocused
+      } = this.state;
+      return isFocused ? currentValue.toString() : padTime(currentValue).toString();
+    });
+
+    this.state = {
+      minValue: TimePickerUnits[props.unit].min,
+      maxValue: TimePickerUnits[props.unit].max,
+      currentValue: props.unitValue,
+      isFocused: false,
+      isValid: true
+    };
+  }
+  /**
+   * Handles the unit time value change when it is done through a change on the input.
+   * It only reflects on the state if the number of digits is between 0 and 2
+   * @param {Number} value - new unit time value
+   * @memberof UnitTimePicker
+   */
+
+
+  /**
+   * Renders the UnitTimePicker
+   */
+  render() {
+    const {
+      classes
+    } = this.props;
+    const {
+      isValid
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.unitTimeContainer
+    }, /*#__PURE__*/React.createElement(AddTimeIcon, {
+      className: classes.addIcon,
+      onClick: this.handleAddTime
+    }), /*#__PURE__*/React.createElement(HvInput, {
+      disableClear: true,
+      className: classes.unitTime,
+      classes: {
+        input: classes.unitTimeInput,
+        root: classes.inputContainer,
+        inputRoot: clsx(classes.unitTimeInputRoot, !isValid && classes.unitTimeInputRootInvalid)
+      },
+      value: this.renderTimeUnit(),
+      onChange: this.handleCurrentValueChange,
+      onFocus: this.handleFocusChange,
+      onBlur: this.handleFocusChange,
+      validationIconVisible: false,
+      showInfo: false,
+      validation: this.validateUnitTime,
+      labels: {
+        placeholder: ""
+      }
+    }), /*#__PURE__*/React.createElement(SubtractTimeIcon, {
+      className: classes.subtractIcon,
+      onClick: this.handleSubtractTime
+    }));
+  }
+
+}
+
+process.env.NODE_ENV !== "production" ? UnitTimePicker.propTypes = {
+  /**
+   * A Jss Object used to override or extend the styles applied to the input/popper
+   */
+  classes: PropTypes.instanceOf(Object).isRequired,
+
+  /**
+   * Type of Unit time picker (hour, minute or second)
+   */
+  unit: PropTypes.oneOf([TimePickerUnits.HOUR_24.type, TimePickerUnits.HOUR_12.type, TimePickerUnits.MINUTE.type, TimePickerUnits.SECOND.type]).isRequired,
+
+  /**
+   * Default unit time value
+   */
+  unitValue: (otherProps, propName, componentName) => {
+    const minValue = TimePickerUnits[otherProps.unit].min;
+    const maxValue = TimePickerUnits[otherProps.unit].max;
+    const unitValue = otherProps[propName];
+
+    if (unitValue > maxValue || unitValue < minValue) {
+      return new Error(`Invalid prop ${propName} supplied to ${componentName}. Value not in the correct range ${minValue}-${maxValue}`);
+    }
+
+    return null;
+  },
+
+  /**
+   * Callback function called when the unit time value changes
+   */
+  onChangeUnitTimeValue: PropTypes.func.isRequired
+} : void 0;
+UnitTimePicker.defaultProps = {
+  unitValue: 0
+};
+export default UnitTimePicker;
+//# sourceMappingURL=UnitTimePicker.js.map

package/dist/modern/TimePicker/UnitTimePicker/UnitTimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnitTimePicker.js","names":["React","PropTypes","clsx","HvInput","DropUpXS","AddTimeIcon","DropDownXS","SubtractTimeIcon","isUnitTimeInValidRange","padTime","TimePickerUnits","UnitTimePicker","Component","constructor","props","event","value","unitTime","Number","toString","length","changeTimeUnit","isFocused","state","setState","currentValue","maxValue","minValue","newUnitTime","onChangeUnitTimeValue","isUnitTimeValid","unit","isValid","min","max","unitValue","render","classes","unitTimeContainer","addIcon","handleAddTime","input","unitTimeInput","root","inputContainer","inputRoot","unitTimeInputRoot","unitTimeInputRootInvalid","renderTimeUnit","handleCurrentValueChange","handleFocusChange","validateUnitTime","placeholder","subtractIcon","handleSubtractTime","propTypes","instanceOf","Object","isRequired","oneOf","HOUR_24","type","HOUR_12","MINUTE","SECOND","otherProps","propName","componentName","Error","func","defaultProps"],"sources":["../../../../src/TimePicker/UnitTimePicker/UnitTimePicker.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport { HvInput } from \"@hitachivantara/uikit-react-core\";\nimport {\n  DropUpXS as AddTimeIcon,\n  DropDownXS as SubtractTimeIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { isUnitTimeInValidRange } from \"../timePickerUtils\";\nimport { padTime } from \"../timePickerFormatter\";\nimport { TimePickerUnits } from \"../enums\";\n\nclass UnitTimePicker extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      minValue: TimePickerUnits[props.unit].min,\n      maxValue: TimePickerUnits[props.unit].max,\n      currentValue: props.unitValue,\n      isFocused: false,\n      isValid: true,\n    };\n  }\n\n  /**\n   * Handles the unit time value change when it is done through a change on the input.\n   * It only reflects on the state if the number of digits is between 0 and 2\n   * @param {Number} value - new unit time value\n   * @memberof UnitTimePicker\n   */\n  handleCurrentValueChange = (event, value) => {\n    const unitTime = value === \"\" ? value : Number(value);\n    if ((unitTime || unitTime === \"\") && unitTime.toString().length <= 2) {\n      this.changeTimeUnit(unitTime);\n    }\n  };\n\n  /**\n   * Handles the change on the focus of the input\n   * @memberof UnitTimePicker\n   */\n  handleFocusChange = () => {\n    const { isFocused } = this.state;\n\n    this.setState({\n      isFocused: !isFocused,\n    });\n  };\n\n  /**\n   * Handles the action to increase the unit time value\n   * If the new value surpasses the max allowed, it updates the time to the min value.\n   * @memberof UnitTimePicker\n   */\n  handleAddTime = () => {\n    const { currentValue, maxValue, minValue } = this.state;\n    let newUnitTime = currentValue === \"\" ? minValue : currentValue + 1;\n    if (newUnitTime > maxValue) {\n      newUnitTime = minValue;\n    }\n    this.changeTimeUnit(newUnitTime);\n  };\n\n  /**\n   * Handles the action to decrease the unit time value\n   * If the new value goes below the min allowed, it updates the time to the max value.\n   * @memberof UnitTimePicker\n   */\n  handleSubtractTime = () => {\n    const { currentValue, maxValue, minValue } = this.state;\n    let newUnitTime = currentValue === \"\" ? maxValue : currentValue - 1;\n    if (newUnitTime < minValue) {\n      newUnitTime = maxValue;\n    }\n    this.changeTimeUnit(newUnitTime);\n  };\n\n  /**\n   * Changes the time unit value in the state.\n   * The onChange callback is only called if the new value is a valid one (in the allowed range)\n   *\n   * @param {Number} value - new time unit value\n   * @memberof UnitTimePicker\n   */\n  changeTimeUnit = (value) => {\n    const { onChangeUnitTimeValue } = this.props;\n    this.setState({\n      currentValue: value,\n    });\n    if (this.isUnitTimeValid(value)) {\n      onChangeUnitTimeValue(value);\n    }\n  };\n\n  /**\n   * Checks if the unit time is valid, meaning that is between the min and max values for the specific unit time\n   * @memberof UnitTimePicker\n   */\n  isUnitTimeValid = (unitTime) => {\n    const { unit } = this.props;\n    const isValid = isUnitTimeInValidRange(unitTime, unit);\n    this.setState({\n      isValid,\n    });\n    return isValid;\n  };\n\n  /**\n   * Renderers\n   */\n\n  /**\n   * Renders the time unit value input in the correct format\n   * @memberof UnitTimePicker\n   */\n  renderTimeUnit = () => {\n    const { currentValue, isFocused } = this.state;\n    return isFocused ? currentValue.toString() : padTime(currentValue).toString();\n  };\n\n  /**\n   * Renders the UnitTimePicker\n   */\n  render() {\n    const { classes } = this.props;\n    const { isValid } = this.state;\n\n    return (\n      <div className={classes.unitTimeContainer}>\n        <AddTimeIcon className={classes.addIcon} onClick={this.handleAddTime} />\n        <HvInput\n          disableClear\n          className={classes.unitTime}\n          classes={{\n            input: classes.unitTimeInput,\n            root: classes.inputContainer,\n            inputRoot: clsx(classes.unitTimeInputRoot, {\n              [classes.unitTimeInputRootInvalid]: !isValid,\n            }),\n          }}\n          value={this.renderTimeUnit()}\n          onChange={this.handleCurrentValueChange}\n          onFocus={this.handleFocusChange}\n          onBlur={this.handleFocusChange}\n          validationIconVisible={false}\n          showInfo={false}\n          validation={this.validateUnitTime}\n          labels={{\n            placeholder: \"\",\n          }}\n        />\n        <SubtractTimeIcon className={classes.subtractIcon} onClick={this.handleSubtractTime} />\n      </div>\n    );\n  }\n}\n\nUnitTimePicker.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied to the input/popper\n   */\n  classes: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Type of Unit time picker (hour, minute or second)\n   */\n  unit: PropTypes.oneOf([\n    TimePickerUnits.HOUR_24.type,\n    TimePickerUnits.HOUR_12.type,\n    TimePickerUnits.MINUTE.type,\n    TimePickerUnits.SECOND.type,\n  ]).isRequired,\n  /**\n   * Default unit time value\n   */\n  unitValue: (otherProps, propName, componentName) => {\n    const minValue = TimePickerUnits[otherProps.unit].min;\n    const maxValue = TimePickerUnits[otherProps.unit].max;\n    const unitValue = otherProps[propName];\n    if (unitValue > maxValue || unitValue < minValue) {\n      return new Error(\n        `Invalid prop ${propName} supplied to ${componentName}. Value not in the correct range ${minValue}-${maxValue}`\n      );\n    }\n    return null;\n  },\n  /**\n   * Callback function called when the unit time value changes\n   */\n  onChangeUnitTimeValue: PropTypes.func.isRequired,\n};\n\nUnitTimePicker.defaultProps = {\n  unitValue: 0,\n};\n\nexport default UnitTimePicker;\n"],"mappings":"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"}

package/dist/modern/TimePicker/UnitTimePicker/index.js

@@ -0,0 +1,7 @@
+import withStyles from "@material-ui/core/styles/withStyles";
+import styles from "./styles";
+import UnitTimePicker from "./UnitTimePicker";
+export default withStyles(styles, {
+  name: "HvTimePickerUnitTimePicker"
+})(UnitTimePicker);
+//# sourceMappingURL=index.js.map

package/dist/modern/TimePicker/UnitTimePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["withStyles","styles","UnitTimePicker","name"],"sources":["../../../../src/TimePicker/UnitTimePicker/index.js"],"sourcesContent":["import withStyles from \"@material-ui/core/styles/withStyles\";\nimport styles from \"./styles\";\nimport UnitTimePicker from \"./UnitTimePicker\";\n\nexport default withStyles(styles, { name: \"HvTimePickerUnitTimePicker\" })(UnitTimePicker);\n"],"mappings":"AAAA,OAAOA,UAAP,MAAuB,qCAAvB;AACA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AAEA,eAAeF,UAAU,CAACC,MAAD,EAAS;EAAEE,IAAI,EAAE;AAAR,CAAT,CAAV,CAA2DD,cAA3D,CAAf"}