@ohos-ports/sprucelabs-react-heartwood-components 9.1.0-beta.0

package/lib/components/Forms/components/DatePicker/DatePicker.js

@@ -0,0 +1,236 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("react-dates/initialize");
+
+var _reactDates = require("react-dates");
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var ArrowNext = function ArrowNext(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
+  }));
+};
+
+ArrowNext.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var ArrowBack = function ArrowBack(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
+  }));
+};
+
+ArrowBack.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var DatePicker =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(DatePicker, _Component);
+
+  function DatePicker(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, DatePicker);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(DatePicker).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleFocus", function () {
+      _this.setState(function (prevState) {
+        return {
+          isFocused: !prevState.isFocused
+        };
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleFocusChange", function (focusedInput) {
+      _this.setState({
+        // Force the focusedInput to always be truthy so that dates are always selectable
+        focusedInput: !focusedInput ? 'startDate' : focusedInput
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDateChange",
+    /*#__PURE__*/
+    function () {
+      var _ref = (0, _asyncToGenerator2["default"])(
+      /*#__PURE__*/
+      _regenerator["default"].mark(function _callee(date) {
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _this.datePickerRef.current.setState({
+                  currentMonth: date
+                });
+
+                _this.setState({
+                  date: date
+                });
+
+                if (_this.props.onSelectDate) {
+                  _this.props.onSelectDate(date);
+                }
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDatesChange",
+    /*#__PURE__*/
+    function () {
+      var _ref3 = (0, _asyncToGenerator2["default"])(
+      /*#__PURE__*/
+      _regenerator["default"].mark(function _callee2(_ref2) {
+        var startDate, endDate;
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                startDate = _ref2.startDate, endDate = _ref2.endDate;
+
+                _this.setState({
+                  startDate: startDate,
+                  endDate: endDate
+                });
+
+                if (_this.props.onSelectDateRange) {
+                  _this.props.onSelectDateRange({
+                    startDate: startDate,
+                    endDate: endDate
+                  });
+                }
+
+              case 3:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+
+      return function (_x2) {
+        return _ref3.apply(this, arguments);
+      };
+    }());
+    _this.state = {
+      isFocused: true,
+      date: _this.props.date || (0, _moment["default"])(),
+      startDate: _this.props.initialStartDate,
+      endDate: _this.props.initialEndDate,
+      focusedInput: 'startDate'
+    };
+    _this.datePickerRef = _react["default"].createRef();
+    return _this;
+  }
+
+  (0, _createClass2["default"])(DatePicker, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.props.date !== nextProps.date) {
+        this.setState({
+          date: nextProps.date
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$state = this.state,
+          isFocused = _this$state.isFocused,
+          focusedInput = _this$state.focusedInput,
+          date = _this$state.date,
+          startDate = _this$state.startDate,
+          endDate = _this$state.endDate;
+      var _this$props = this.props,
+          kind = _this$props.kind,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props, ["kind"]);
+      return kind === 'singleDate' ? _react["default"].createElement(_reactDates.DayPickerSingleDateController, (0, _extends2["default"])({
+        ref: this.datePickerRef,
+        date: date,
+        initialVisibleMonth: function initialVisibleMonth() {
+          return date;
+        },
+        focused: isFocused,
+        onDateChange: function onDateChange(date) {
+          return _this2.handleDateChange(date);
+        },
+        onFocusChange: this.toggleFocus,
+        navNext: _react["default"].createElement(ArrowNext, null),
+        navPrev: _react["default"].createElement(ArrowBack, null),
+        hideKeyboardShortcutsPanel: true
+      }, rest)) : _react["default"].createElement(_reactDates.DayPickerRangeController, (0, _extends2["default"])({
+        onDatesChange: this.handleDatesChange,
+        onFocusChange: this.handleFocusChange,
+        focusedInput: focusedInput,
+        startDate: startDate,
+        endDate: endDate,
+        navNext: _react["default"].createElement(ArrowNext, null),
+        navPrev: _react["default"].createElement(ArrowBack, null),
+        hideKeyboardShortcutsPanel: true
+      }, rest));
+    }
+  }]);
+  return DatePicker;
+}(_react.Component);
+
+exports["default"] = DatePicker;
+(0, _defineProperty2["default"])(DatePicker, "defaultProps", {
+  kind: 'singleDate',
+  initialStartDate: null,
+  initialEndDate: null,
+  daySize: 40
+});
+//# sourceMappingURL=DatePicker.js.map

package/lib/components/Forms/components/DatePicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Forms/components/DatePicker/DatePicker.js"],"names":["ArrowNext","ArrowBack","DatePicker","props","setState","prevState","isFocused","focusedInput","date","datePickerRef","current","currentMonth","onSelectDate","startDate","endDate","onSelectDateRange","state","initialStartDate","initialEndDate","React","createRef","nextProps","kind","rest","handleDateChange","toggleFocus","handleDatesChange","handleFocusChange","Component","daySize"],"mappings":"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","sourcesContent":["// @flow\nimport React, { Component } from 'react'\nimport 'react-dates/initialize'\nimport {\n\tDayPickerSingleDateController,\n\tDayPickerRangeController\n} from 'react-dates'\nimport moment from 'moment'\nimport ArrowNext from '../../../../../static/assets/icons/ic_arrow_forward.svg'\nimport ArrowBack from '../../../../../static/assets/icons/ic_arrow_back.svg'\n\nexport type Props = {\n\tkind: 'singleDate' | 'dateRange',\n\tonSelectDate?: Function,\n\tonSelectDateRange?: Function,\n\tdate?: Object,\n\tinitialStartDate?: Object,\n\tinitialEndDate?: Object,\n\tdaySize?: number\n}\n\ntype State = {\n\tdate: Object,\n\tstartDate: Object,\n\tendDate: Object,\n\tisFocused: boolean,\n\tfocusedInput: string\n}\n\nexport default class DatePicker extends Component<Props, State> {\n\tdatePickerRef: any\n\n\tstatic defaultProps = {\n\t\tkind: 'singleDate',\n\t\tinitialStartDate: null,\n\t\tinitialEndDate: null,\n\t\tdaySize: 40\n\t}\n\n\tconstructor(props) {\n\t\tsuper(props)\n\t\tthis.state = {\n\t\t\tisFocused: true,\n\t\t\tdate: this.props.date || moment(),\n\t\t\tstartDate: this.props.initialStartDate,\n\t\t\tendDate: this.props.initialEndDate,\n\t\t\tfocusedInput: 'startDate'\n\t\t}\n\n\t\tthis.datePickerRef = React.createRef()\n\t}\n\n\tcomponentWillReceiveProps(nextProps) {\n\t\tif (this.props.date !== nextProps.date) {\n\t\t\tthis.setState({ date: nextProps.date })\n\t\t}\n\t}\n\n\ttoggleFocus = () => {\n\t\tthis.setState(prevState => ({\n\t\t\tisFocused: !prevState.isFocused\n\t\t}))\n\t}\n\n\thandleFocusChange = focusedInput => {\n\t\tthis.setState({\n\t\t\t// Force the focusedInput to always be truthy so that dates are always selectable\n\t\t\tfocusedInput: !focusedInput ? 'startDate' : focusedInput\n\t\t})\n\t}\n\n\thandleDateChange = async (date: any) => {\n\t\tthis.datePickerRef.current.setState({ currentMonth: date })\n\n\t\tthis.setState({\n\t\t\tdate\n\t\t})\n\t\tif (this.props.onSelectDate) {\n\t\t\tthis.props.onSelectDate(date)\n\t\t}\n\t}\n\n\thandleDatesChange = async ({ startDate, endDate }) => {\n\t\tthis.setState({\n\t\t\tstartDate,\n\t\t\tendDate\n\t\t})\n\n\t\tif (this.props.onSelectDateRange) {\n\t\t\tthis.props.onSelectDateRange({ startDate, endDate })\n\t\t}\n\t}\n\n\trender() {\n\t\tconst { isFocused, focusedInput, date, startDate, endDate } = this.state\n\t\tconst { kind, ...rest } = this.props\n\n\t\treturn kind === 'singleDate' ? (\n\t\t\t<DayPickerSingleDateController\n\t\t\t\tref={this.datePickerRef}\n\t\t\t\tdate={date}\n\t\t\t\tinitialVisibleMonth={() => date}\n\t\t\t\tfocused={isFocused}\n\t\t\t\tonDateChange={date => this.handleDateChange(date)}\n\t\t\t\tonFocusChange={this.toggleFocus}\n\t\t\t\tnavNext={<ArrowNext />}\n\t\t\t\tnavPrev={<ArrowBack />}\n\t\t\t\thideKeyboardShortcutsPanel={true}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t) : (\n\t\t\t<DayPickerRangeController\n\t\t\t\tonDatesChange={this.handleDatesChange}\n\t\t\t\tonFocusChange={this.handleFocusChange}\n\t\t\t\tfocusedInput={focusedInput}\n\t\t\t\tstartDate={startDate}\n\t\t\t\tendDate={endDate}\n\t\t\t\tnavNext={<ArrowNext />}\n\t\t\t\tnavPrev={<ArrowBack />}\n\t\t\t\thideKeyboardShortcutsPanel={true}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t)\n\t}\n}\n"],"file":"DatePicker.js"}

package/lib/components/Forms/components/DomainInput/DomainInput.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TextInput = _interopRequireDefault(require("../TextInput/TextInput"));
+
+// TODO: May be better as a stateful component in order to trim itself
+var DomainInput = function DomainInput(props) {
+  var id = props.id,
+      rest = (0, _objectWithoutProperties2["default"])(props, ["id"]);
+  return _react["default"].createElement(_TextInput["default"], (0, _extends2["default"])({
+    id: id
+  }, rest));
+};
+
+var _default = DomainInput;
+exports["default"] = _default;
+//# sourceMappingURL=DomainInput.js.map

package/lib/components/Forms/components/DomainInput/DomainInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Forms/components/DomainInput/DomainInput.js"],"names":["DomainInput","props","id","rest"],"mappings":";;;;;;;;;;;;;AAEA;;AACA;;AAFA;AASA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAkB;AAAA,MAC7BC,EAD6B,GACbD,KADa,CAC7BC,EAD6B;AAAA,MACtBC,IADsB,6CACbF,KADa;AAErC,SAAO,gCAAC,qBAAD;AAAW,IAAA,EAAE,EAAEC;AAAf,KAAuBC,IAAvB,EAAP;AACA,CAHD;;eAKeH,W","sourcesContent":["// @flow\n// TODO: May be better as a stateful component in order to trim itself\nimport React from 'react'\nimport TextInput from '../TextInput/TextInput'\n\ntype Props = {\n\t/** Unique identifier */\n\tid: string\n}\n\nconst DomainInput = (props: Props) => {\n\tconst { id, ...rest } = props\n\treturn <TextInput id={id} {...rest} />\n}\n\nexport default DomainInput\n"],"file":"DomainInput.js"}

package/lib/components/Forms/components/DurationInput/DurationInput.js

@@ -0,0 +1,270 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _lodash = require("lodash");
+
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+
+var _Autosuggest = _interopRequireDefault(require("../Autosuggest/Autosuggest"));
+
+var _Button = _interopRequireDefault(require("../../../Button/Button"));
+
+var DurationInput =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(DurationInput, _Component);
+  (0, _createClass2["default"])(DurationInput, null, [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      if (props.value !== state.prevPropsValue) {
+        return {
+          prevPropsValue: props.value,
+          value: DurationInput.minutesToStr(props.value)
+        };
+      }
+
+      return null;
+    }
+  }]);
+
+  function DurationInput(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, DurationInput);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(DurationInput).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderSuggestion", function (suggestion) {
+      if (suggestion.isEmptyMessage) {
+        var _this$props = _this.props,
+            noResultsTitle = _this$props.noResultsTitle,
+            noResultsSubtitle = _this$props.noResultsSubtitle;
+        return _react["default"].createElement("div", {
+          className: "autosuggest__no-results"
+        }, _react["default"].createElement("p", {
+          className: "autosuggest__no-results-title"
+        }, noResultsTitle), _react["default"].createElement("p", {
+          className: "autosuggest__no-results-subtitle"
+        }, noResultsSubtitle));
+      }
+
+      return _react["default"].createElement(_Button["default"], {
+        isSmall: true,
+        className: "autosuggest__list-item-inner",
+        text: suggestion.text
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "generateSuggestions", (0, _memoizeOne["default"])(function (min, max, skip) {
+      return (0, _lodash.range)(min, max + skip, skip).map(function (minutes) {
+        var duration = DurationInput.minutesToStr(minutes);
+        return {
+          text: duration,
+          search: duration.replace(/[^0-9hm]/g, ''),
+          minutes: minutes
+        };
+      });
+    }));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "strToMinutes", function (str) {
+      var _this$props2 = _this.props,
+          minMinutes = _this$props2.minMinutes,
+          maxMinutes = _this$props2.maxMinutes,
+          skipMinutes = _this$props2.skipMinutes;
+
+      var suggestions = _this.generateSuggestions(minMinutes, maxMinutes, skipMinutes);
+
+      var idx = (0, _lodash.findIndex)(suggestions, function (suggestion) {
+        return suggestion.text === str;
+      });
+      var suggestion = suggestions[idx];
+      return suggestion.minutes;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (e) {
+      var value = e.target.value;
+
+      _this.setState({
+        value: value
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBlur", function (e) {
+      var _this$props3 = _this.props,
+          onBlur = _this$props3.onBlur,
+          onChange = _this$props3.onChange,
+          required = _this$props3.required;
+
+      if (!required && (!value || value.length === 0)) {
+        _this.setState({
+          value: '',
+          validationError: null
+        });
+
+        onChange && onChange(null, e);
+      }
+
+      var value = e.target.value;
+
+      var matches = _this.searchSuggestions(value);
+
+      if (value.length > 0 && matches.length > 0) {
+        _this.setState({
+          value: matches[0].text,
+          validationError: null
+        }); // only fire on change if the new value is valid
+
+
+        onChange && onChange(_this.strToMinutes(matches[0].text), e);
+      } else if (required && value.length > 0) {
+        _this.setState({
+          validationError: 'You must select a valid duration.'
+        });
+      }
+
+      onBlur && onBlur(e);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelectSuggestion", function (e, suggestion) {
+      var onChange = _this.props.onChange;
+      var value = suggestion.suggestionValue;
+
+      _this.setState({
+        value: value
+      });
+
+      var matches = _this.searchSuggestions(value);
+
+      if (value.length > 0 && matches.length > 0) {
+        _this.setState({
+          value: matches[0].text,
+          validationError: null
+        }); // only fire on change if the new value is valid
+
+
+        onChange && onChange(_this.strToMinutes(matches[0].text), e);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleGetSuggestions", function (value) {
+      var matches = _this.searchSuggestions(value); // Here you could add click events to buttons or whatever else they need
+      // No Results Message
+
+
+      if (matches.length === 0) {
+        return [{
+          text: 'NO RESULTS',
+          isEmptyMessage: true
+        }];
+      }
+
+      return matches;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "searchSuggestions", (0, _memoizeOne["default"])(function (value) {
+      var _this$props4 = _this.props,
+          minMinutes = _this$props4.minMinutes,
+          maxMinutes = _this$props4.maxMinutes,
+          skipMinutes = _this$props4.skipMinutes;
+      var search = value.replace(/[^0-9hm]/g, ''); // we typed something, but it was nothing valid
+
+      if (value.length > 0 && search.length === 0) {
+        return [];
+      }
+
+      var suggestions = _this.generateSuggestions(minMinutes, maxMinutes, skipMinutes);
+
+      var results = suggestions.filter(function (suggestion) {
+        return suggestion.search.search(search) > -1;
+      });
+      return results;
+    }));
+    _this.state = {
+      value: props.defaultValue || props.value ? DurationInput.minutesToStr(props.defaultValue || props.value) : '',
+      prevPropsValue: props.value,
+      validationError: null
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(DurationInput, [{
+    key: "render",
+    value: function render() {
+      var _this$props5 = this.props,
+          minMinutes = _this$props5.minMinutes,
+          maxMinutes = _this$props5.maxMinutes,
+          skipMinutes = _this$props5.skipMinutes,
+          error = _this$props5.error,
+          placeholder = _this$props5.placeholder,
+          props = (0, _objectWithoutProperties2["default"])(_this$props5, ["minMinutes", "maxMinutes", "skipMinutes", "error", "placeholder"]);
+      var _this$state = this.state,
+          value = _this$state.value,
+          validationError = _this$state.validationError;
+      var suggestions = this.generateSuggestions(minMinutes, maxMinutes, skipMinutes);
+      return _react["default"].createElement(_Autosuggest["default"], (0, _extends2["default"])({
+        inputProps: {
+          value: value,
+          onChange: this.handleChange,
+          onBlur: this.handleBlur
+        },
+        error: validationError || error,
+        defaultSuggestions: suggestions,
+        shouldRenderSuggestions: function shouldRenderSuggestions() {
+          return true;
+        },
+        renderSuggestion: this.renderSuggestion,
+        getSuggestionValue: function getSuggestionValue(value) {
+          return value.text;
+        },
+        getSuggestions: this.handleGetSuggestions,
+        onSuggestionSelected: this.handleSelectSuggestion,
+        placeholder: placeholder && typeof placeholder === 'number' ? DurationInput.minutesToStr(placeholder) : placeholder
+      }, props));
+    }
+  }]);
+  return DurationInput;
+}(_react.Component);
+
+exports["default"] = DurationInput;
+(0, _defineProperty2["default"])(DurationInput, "defaultProps", {
+  minMinutes: 5,
+  maxMinutes: 180,
+  skipMinutes: 5,
+  noResultsTitle: 'Invalid duration.',
+  noResultsSubtitle: 'Please adjust your search and try again.'
+});
+(0, _defineProperty2["default"])(DurationInput, "minutesToStr", function (num) {
+  var hours = Math.floor(num / 60);
+  var minutes = num % 60;
+  var value = '';
+
+  if (hours > 0) {
+    value += "".concat(hours, "hr");
+  }
+
+  if (minutes > 0) {
+    value += "".concat(minutes, "min");
+  }
+
+  return value.trim();
+});
+//# sourceMappingURL=DurationInput.js.map

package/lib/components/Forms/components/DurationInput/DurationInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Forms/components/DurationInput/DurationInput.js"],"names":["DurationInput","props","state","value","prevPropsValue","minutesToStr","suggestion","isEmptyMessage","noResultsTitle","noResultsSubtitle","text","min","max","skip","map","minutes","duration","search","replace","str","minMinutes","maxMinutes","skipMinutes","suggestions","generateSuggestions","idx","e","target","setState","onBlur","onChange","required","length","validationError","matches","searchSuggestions","strToMinutes","suggestionValue","results","filter","defaultValue","error","placeholder","handleChange","handleBlur","renderSuggestion","handleGetSuggestions","handleSelectSuggestion","Component","num","hours","Math","floor","trim"],"mappings":"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","sourcesContent":["// @flow\nimport React, { Component } from 'react'\nimport { range, findIndex } from 'lodash'\nimport memoize from 'memoize-one'\n\nimport Autosuggest from '../Autosuggest/Autosuggest'\nimport Button from '../../../Button/Button'\n\nimport type { Props as AutoSuggestProps } from '../Autosuggest/Autosuggest'\n\ntype Props = {\n\t/** minimum time someone can select */\n\tminMinutes?: number,\n\n\t/** maximum time someone can select */\n\tmaxMinutes?: number,\n\n\t/** when generating suggestions, how much much time is there between suggestions */\n\tskipMinutes?: number,\n\n\t/** Default value (in minutes)  */\n\tdefaultValue?: number,\n\n\t/** placeholder to be formatted nicely (expects minutes) */\n\tplaceholder?: string,\n\n\t/** title rendered when no results are found */\n\tnoResultsTitle?: string,\n\n\t/** subtitle rendered when no results are found */\n\tnoResultsSubtitle?: string,\n\n\t/** pass an error message to the input, this is show only after a valid duration is selected */\n\terror?: string,\n\n\t/** is this field required? */\n\trequired?: boolean,\n\n\t/** a slighly different onChange */\n\tonChange?: (durationInMinutes: number | null, e: KeyboardEvent) => {}\n} & AutoSuggestProps\n\ntype State = {\n\tvalue: ?string,\n\tprevPropsValue: ?string,\n\tvalidationError: ?string\n}\n\nexport default class DurationInput extends Component<Props, State> {\n\tstatic defaultProps = {\n\t\tminMinutes: 5,\n\t\tmaxMinutes: 180,\n\t\tskipMinutes: 5,\n\t\tnoResultsTitle: 'Invalid duration.',\n\t\tnoResultsSubtitle: 'Please adjust your search and try again.'\n\t}\n\n\tstatic getDerivedStateFromProps(props, state) {\n\t\tif (props.value !== state.prevPropsValue) {\n\t\t\treturn {\n\t\t\t\tprevPropsValue: props.value,\n\t\t\t\tvalue: DurationInput.minutesToStr(props.value)\n\t\t\t}\n\t\t}\n\t\treturn null\n\t}\n\n\tstatic minutesToStr = (num: number): string => {\n\t\tlet hours = Math.floor(num / 60)\n\t\tlet minutes = num % 60\n\n\t\tlet value = ''\n\n\t\tif (hours > 0) {\n\t\t\tvalue += `${hours}hr`\n\t\t}\n\n\t\tif (minutes > 0) {\n\t\t\tvalue += `${minutes}min`\n\t\t}\n\n\t\treturn value.trim()\n\t}\n\n\tconstructor(props: Props) {\n\t\tsuper(props)\n\t\tthis.state = {\n\t\t\tvalue:\n\t\t\t\tprops.defaultValue || props.value\n\t\t\t\t\t? DurationInput.minutesToStr(props.defaultValue || props.value)\n\t\t\t\t\t: '',\n\t\t\tprevPropsValue: props.value,\n\t\t\tvalidationError: null\n\t\t}\n\t}\n\n\trenderSuggestion = (suggestion: any) => {\n\t\tif (suggestion.isEmptyMessage) {\n\t\t\tconst { noResultsTitle, noResultsSubtitle } = this.props\n\t\t\treturn (\n\t\t\t\t<div className=\"autosuggest__no-results\">\n\t\t\t\t\t<p className=\"autosuggest__no-results-title\">{noResultsTitle}</p>\n\t\t\t\t\t<p className=\"autosuggest__no-results-subtitle\">\n\t\t\t\t\t\t{noResultsSubtitle}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t)\n\t\t}\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tisSmall\n\t\t\t\tclassName=\"autosuggest__list-item-inner\"\n\t\t\t\ttext={suggestion.text}\n\t\t\t/>\n\t\t)\n\t}\n\n\tgenerateSuggestions = memoize((min, max, skip) => {\n\t\treturn range(min, max + skip, skip).map(minutes => {\n\t\t\tconst duration = DurationInput.minutesToStr(minutes)\n\t\t\treturn {\n\t\t\t\ttext: duration,\n\t\t\t\tsearch: duration.replace(/[^0-9hm]/g, ''),\n\t\t\t\tminutes\n\t\t\t}\n\t\t})\n\t})\n\n\tstrToMinutes = (str: string): number => {\n\t\tconst { minMinutes, maxMinutes, skipMinutes } = this.props\n\t\tconst suggestions = this.generateSuggestions(\n\t\t\tminMinutes,\n\t\t\tmaxMinutes,\n\t\t\tskipMinutes\n\t\t)\n\t\tconst idx = findIndex(suggestions, suggestion => suggestion.text === str)\n\n\t\tconst suggestion = suggestions[idx]\n\t\treturn suggestion.minutes\n\t}\n\n\thandleChange = e => {\n\t\tconst { value } = e.target\n\t\tthis.setState({ value })\n\t}\n\n\thandleBlur = e => {\n\t\tconst { onBlur, onChange, required } = this.props\n\n\t\tif (!required && (!value || value.length === 0)) {\n\t\t\tthis.setState({ value: '', validationError: null })\n\t\t\tonChange && onChange(null, e)\n\t\t}\n\n\t\tconst value = e.target.value\n\t\tconst matches = this.searchSuggestions(value)\n\n\t\tif (value.length > 0 && matches.length > 0) {\n\t\t\tthis.setState({ value: matches[0].text, validationError: null })\n\t\t\t// only fire on change if the new value is valid\n\t\t\tonChange && onChange(this.strToMinutes(matches[0].text), e)\n\t\t} else if (required && value.length > 0) {\n\t\t\tthis.setState({ validationError: 'You must select a valid duration.' })\n\t\t}\n\n\t\tonBlur && onBlur(e)\n\t}\n\n\thandleSelectSuggestion = (e: KeyboardEvent, suggestion: Object) => {\n\t\tconst { onChange } = this.props\n\n\t\tconst value = suggestion.suggestionValue\n\n\t\tthis.setState({ value })\n\t\tconst matches = this.searchSuggestions(value)\n\n\t\tif (value.length > 0 && matches.length > 0) {\n\t\t\tthis.setState({ value: matches[0].text, validationError: null })\n\t\t\t// only fire on change if the new value is valid\n\t\t\tonChange && onChange(this.strToMinutes(matches[0].text), e)\n\t\t}\n\t}\n\n\thandleGetSuggestions = value => {\n\t\tconst matches = this.searchSuggestions(value)\n\t\t// Here you could add click events to buttons or whatever else they need\n\t\t// No Results Message\n\t\tif (matches.length === 0) {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\ttext: 'NO RESULTS',\n\t\t\t\t\tisEmptyMessage: true\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t\treturn matches\n\t}\n\n\tsearchSuggestions = memoize(\n\t\t(value): Array<string> => {\n\t\t\tconst { minMinutes, maxMinutes, skipMinutes } = this.props\n\n\t\t\tconst search = value.replace(/[^0-9hm]/g, '')\n\n\t\t\t// we typed something, but it was nothing valid\n\t\t\tif (value.length > 0 && search.length === 0) {\n\t\t\t\treturn []\n\t\t\t}\n\n\t\t\tconst suggestions = this.generateSuggestions(\n\t\t\t\tminMinutes,\n\t\t\t\tmaxMinutes,\n\t\t\t\tskipMinutes\n\t\t\t)\n\n\t\t\tconst results = suggestions.filter(\n\t\t\t\tsuggestion => suggestion.search.search(search) > -1\n\t\t\t)\n\n\t\t\treturn results\n\t\t}\n\t)\n\n\trender() {\n\t\tconst {\n\t\t\tminMinutes,\n\t\t\tmaxMinutes,\n\t\t\tskipMinutes,\n\t\t\terror,\n\t\t\tplaceholder,\n\t\t\t...props\n\t\t} = this.props\n\n\t\tconst { value, validationError } = this.state\n\n\t\tconst suggestions = this.generateSuggestions(\n\t\t\tminMinutes,\n\t\t\tmaxMinutes,\n\t\t\tskipMinutes\n\t\t)\n\n\t\treturn (\n\t\t\t<Autosuggest\n\t\t\t\tinputProps={{\n\t\t\t\t\tvalue,\n\t\t\t\t\tonChange: this.handleChange,\n\t\t\t\t\tonBlur: this.handleBlur\n\t\t\t\t}}\n\t\t\t\terror={validationError || error}\n\t\t\t\tdefaultSuggestions={suggestions}\n\t\t\t\tshouldRenderSuggestions={() => true}\n\t\t\t\trenderSuggestion={this.renderSuggestion}\n\t\t\t\tgetSuggestionValue={value => value.text}\n\t\t\t\tgetSuggestions={this.handleGetSuggestions}\n\t\t\t\tonSuggestionSelected={this.handleSelectSuggestion}\n\t\t\t\tplaceholder={\n\t\t\t\t\tplaceholder && typeof placeholder === 'number'\n\t\t\t\t\t\t? DurationInput.minutesToStr(placeholder)\n\t\t\t\t\t\t: placeholder\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t)\n\t}\n}\n"],"file":"DurationInput.js"}