bright-components 9.31.0 → 10.0.0

package/dist/components/TimePicker/Time/TimeOverlay/index.js

@@ -15,7 +15,7 @@ var _reactAutobind = _interopRequireDefault(require("react-autobind"));
 
 var _BrandButton = _interopRequireDefault(require("../../../Button/BrandButton"));
 
-var _loopAround2 = _interopRequireDefault(require("../../utils/loopAround"));
+var _loopAround = _interopRequireDefault(require("../../utils/loopAround"));
 
 var _loopAroundMinutes = _interopRequireDefault(require("../../utils/loopAroundMinutes"));
 
@@ -43,64 +43,37 @@ var _IncrementNotice = _interopRequireDefault(require("../../Elements/IncrementN
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: block;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\ttext-align: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-content: space-around;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
+/* eslint max-lines: 0 */
 _pluralize.default.addIrregularRule('hr', 'hrs');
 
 _pluralize.default.addIrregularRule('min', 'mins');
 
-var PickerContainer = _styledComponents.default.div(_templateObject());
-
+const PickerContainer = _styledComponents.default.div`
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-content: space-around;
+`;
 PickerContainer.displayName = 'PickerContainer';
-
-var DurationLabel = _styledComponents.default.span(_templateObject2());
-
+const DurationLabel = _styledComponents.default.span`
+	display: block;
+`;
 DurationLabel.displayName = 'DurationLabel';
 
-var pad = function pad(value) {
-  return value < 10 ? "0" + value : value;
-};
+const pad = value => value < 10 ? `0${value}` : value;
 
-var getGATimeString = function getGATimeString(_ref) {
-  var hour = _ref.hour,
-      minute = _ref.minute;
-  return pad(hour) + ":" + pad(minute);
+const getGATimeString = _ref => {
+  let {
+    hour,
+    minute
+  } = _ref;
+  return `${pad(hour)}:${pad(minute)}`;
 };
 
-var TimePickerOverlay =
-/*#__PURE__*/
-function (_React$Component) {
-  _inheritsLoose(TimePickerOverlay, _React$Component);
-
-  function TimePickerOverlay(props) {
-    var _this;
-
-    _this = _React$Component.call(this, props) || this;
-    _this.state = {
+class TimePickerOverlay extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
       hasUserUsedArrowIcons: false,
       hasUserEnteredInputManually: false,
       minute: props.minute,
@@ -112,116 +85,119 @@ function (_React$Component) {
       console.warn('Minutes only duration picker should not be used with tickOver feature');
     }
 
-    (0, _reactAutobind.default)(_assertThisInitialized(_this));
-    return _this;
+    (0, _reactAutobind.default)(this);
   }
 
-  var _proto = TimePickerOverlay.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    var isDurationMinsOnly = this.props.isDurationMinsOnly;
+  componentDidMount() {
+    const {
+      isDurationMinsOnly
+    } = this.props;
 
     if (isDurationMinsOnly) {
       this._minuteInput.focus();
     } else {
       this._hourInput.focus();
     }
-  };
+  }
 
-  _proto.newTimeWillExceedMinTime = function newTimeWillExceedMinTime(key, step) {
-    var minTime = this.props.minTime;
-    var _this$state = this.state,
-        hour = _this$state.hour,
-        minute = _this$state.minute;
+  newTimeWillExceedMinTime(key, step) {
+    const {
+      minTime
+    } = this.props;
+    const {
+      hour,
+      minute
+    } = this.state;
 
     if (step > 0) {
       return false;
     }
 
-    var changeAmount = key === 'hour' ? step * 60 : step;
-    var newTime = hour * 60 + minute + changeAmount;
-    var minTimeMinutes = minTime.hour * 60 + minTime.minute;
+    const changeAmount = key === 'hour' ? step * 60 : step;
+    const newTime = hour * 60 + minute + changeAmount;
+    const minTimeMinutes = minTime.hour * 60 + minTime.minute;
     return newTime < minTimeMinutes;
-  };
+  }
 
-  _proto.newTimeWillExceedMaxTime = function newTimeWillExceedMaxTime(key, step) {
-    var maxTime = this.props.maxTime;
-    var _this$state2 = this.state,
-        hour = _this$state2.hour,
-        minute = _this$state2.minute;
+  newTimeWillExceedMaxTime(key, step) {
+    const {
+      maxTime
+    } = this.props;
+    const {
+      hour,
+      minute
+    } = this.state;
 
     if (step < 0) {
       return false;
     }
 
-    var changeAmount = key === 'hour' ? step * 60 : step;
-    var newTime = hour * 60 + minute + changeAmount;
-    var maxTimeMinutes = maxTime.hour * 60 + maxTime.minute;
+    const changeAmount = key === 'hour' ? step * 60 : step;
+    const newTime = hour * 60 + minute + changeAmount;
+    const maxTimeMinutes = maxTime.hour * 60 + maxTime.minute;
     return newTime > maxTimeMinutes;
-  };
-
-  _proto.change = function change(key) {
-    var _this2 = this;
-
-    return function (step) {
-      var _this2$setState;
-
-      var current = _this2.state[key];
-      var _this2$props = _this2.props,
-          minHours = _this2$props.minHours,
-          maxHours = _this2$props.maxHours,
-          minMinutes = _this2$props.minMinutes,
-          maxMinutes = _this2$props.maxMinutes,
-          tickOverEnabled = _this2$props.tickOverEnabled,
-          isDurationMinsOnly = _this2$props.isDurationMinsOnly,
-          minTime = _this2$props.minTime,
-          maxTime = _this2$props.maxTime;
-
-      if (minTime && _this2.newTimeWillExceedMinTime(key, step)) {
-        _this2.setState({
+  }
+
+  change(key) {
+    return step => {
+      const current = this.state[key];
+      const {
+        minHours,
+        maxHours,
+        minMinutes,
+        maxMinutes,
+        tickOverEnabled,
+        isDurationMinsOnly,
+        minTime,
+        maxTime
+      } = this.props;
+
+      if (minTime && this.newTimeWillExceedMinTime(key, step)) {
+        this.setState({
           hour: minTime.hour,
           minute: minTime.minute
         });
-
         return;
       }
 
-      if (maxTime && _this2.newTimeWillExceedMaxTime(key, step)) {
-        _this2.setState({
+      if (maxTime && this.newTimeWillExceedMaxTime(key, step)) {
+        this.setState({
           hour: maxTime.hour,
           minute: maxTime.minute
         });
-
         return;
       }
 
-      var result;
+      let result;
 
       if (key === 'minute') {
         if (isDurationMinsOnly) {
-          result = (0, _loopAround2.default)(current + step, minMinutes, maxMinutes, step);
+          result = (0, _loopAround.default)(current + step, minMinutes, maxMinutes, step);
         } else {
           result = (0, _loopAroundMinutes.default)(current + step);
         }
 
         if (tickOverEnabled) {
-          _this2.tickOver(result.status);
+          this.tickOver(result.status);
         }
       } else {
-        result = (0, _loopAround2.default)(current + step, minHours, maxHours, step);
+        result = (0, _loopAround.default)(current + step, minHours, maxHours, step);
       }
 
-      _this2.setState((_this2$setState = {}, _this2$setState[key] = result.value, _this2$setState));
+      this.setState({
+        [key]: result.value
+      });
     };
-  };
+  }
 
-  _proto.tickOver = function tickOver(status) {
+  tickOver(status) {
     if (status === _loopStatus.default.ASIS) return;
-    var _this$props = this.props,
-        minHours = _this$props.minHours,
-        maxHours = _this$props.maxHours,
-        stepHours = _this$props.stepHours;
-    var newHour = this.state.hour;
+    const {
+      minHours,
+      maxHours,
+      stepHours
+    } = this.props;
+    let newHour = this.state.hour;
 
     if (status === _loopStatus.default.OVER) {
       newHour += 1;
@@ -231,164 +207,164 @@ function (_React$Component) {
       newHour -= 1;
     }
 
-    var _loopAround = (0, _loopAround2.default)(newHour, minHours, maxHours, stepHours),
-        value = _loopAround.value;
-
+    const {
+      value
+    } = (0, _loopAround.default)(newHour, minHours, maxHours, stepHours);
     this.setState({
       hour: value
     });
-  };
+  }
 
-  _proto.incrementMinutes = function incrementMinutes() {
-    var stepMinutes = this.props.stepMinutes;
+  incrementMinutes() {
+    const {
+      stepMinutes
+    } = this.props;
     this.change('minute')(stepMinutes);
-  };
+  }
 
-  _proto.decrementMinutes = function decrementMinutes() {
-    var stepMinutes = this.props.stepMinutes;
+  decrementMinutes() {
+    const {
+      stepMinutes
+    } = this.props;
     this.change('minute')(-stepMinutes);
-  };
+  }
 
-  _proto.incrementHours = function incrementHours() {
-    var stepHours = this.props.stepHours;
+  incrementHours() {
+    const {
+      stepHours
+    } = this.props;
     this.change('hour')(stepHours);
-  };
+  }
 
-  _proto.decrementHours = function decrementHours() {
-    var stepHours = this.props.stepHours;
+  decrementHours() {
+    const {
+      stepHours
+    } = this.props;
     this.change('hour')(-stepHours);
-  };
-
-  _proto.render = function render() {
-    var _this3 = this;
-
-    var _this$props2 = this.props,
-        stepMinutes = _this$props2.stepMinutes,
-        minMinutes = _this$props2.minMinutes,
-        maxMinutes = _this$props2.maxMinutes,
-        stepHours = _this$props2.stepHours,
-        minHours = _this$props2.minHours,
-        maxHours = _this$props2.maxHours,
-        onApply = _this$props2.onApply,
-        onCancel = _this$props2.onCancel,
-        isDurationPicker = _this$props2.isDurationPicker,
-        isDurationMinsOnly = _this$props2.isDurationMinsOnly,
-        GA = _this$props2.GA;
-    var _this$state3 = this.state,
-        minute = _this$state3.minute,
-        hour = _this$state3.hour;
-    var showHoursPicker = !(isDurationPicker && isDurationMinsOnly);
+  }
+
+  render() {
+    const {
+      stepMinutes,
+      minMinutes,
+      maxMinutes,
+      stepHours,
+      minHours,
+      maxHours,
+      onApply,
+      onCancel,
+      isDurationPicker,
+      isDurationMinsOnly,
+      GA
+    } = this.props;
+    const {
+      minute,
+      hour
+    } = this.state;
+    const showHoursPicker = !(isDurationPicker && isDurationMinsOnly);
     return _react.default.createElement("div", null, _react.default.createElement(_Title.default, null, isDurationPicker ? 'Duration' : 'Time'), _react.default.createElement(_TitleUnderline.default, null), stepMinutes > 1 && _react.default.createElement(_IncrementNotice.default, null, stepMinutes, "-minute increments"), _react.default.createElement(PickerContainer, null, showHoursPicker && _react.default.createElement("div", null, _react.default.createElement(_UpIcon.default, {
-      onClick: function onClick() {
-        _this3.setState({
+      onClick: () => {
+        this.setState({
           hasUserUsedArrowIcons: true
         });
-
-        _this3.incrementHours();
+        this.incrementHours();
       }
     }), _react.default.createElement(_TimeInput.default, {
       value: hour,
-      setTime: function setTime(newTime, shouldApply) {
-        return _this3.setState({
-          hour: newTime
-        }, function () {
-          if (shouldApply) {
-            (0, _PickerGA.default)({
-              category: GA.category,
-              action: "Apply time (" + GA.action + ")",
-              label: getGATimeString(_this3.state)
-            });
-            onApply(_this3.state);
-          }
-        });
-      },
+      setTime: (newTime, shouldApply) => this.setState({
+        hour: newTime
+      }, () => {
+        if (shouldApply) {
+          (0, _PickerGA.default)({
+            category: GA.category,
+            action: `Apply time (${GA.action})`,
+            label: getGATimeString(this.state)
+          });
+          onApply(this.state);
+        }
+      }),
       min: minHours,
       max: maxHours,
       paddingLen: maxHours.toString().length,
       steps: stepHours,
-      setRef: function setRef(ref) {
-        _this3._hourInput = ref;
+      setRef: ref => {
+        this._hourInput = ref;
       },
-      hasUserEnteredInputManually: function hasUserEnteredInputManually() {
-        _this3.setState({
+      hasUserEnteredInputManually: () => {
+        this.setState({
           hasUserEnteredInputManually: true
         });
       },
       unit: "hours"
     }), isDurationPicker && _react.default.createElement(DurationLabel, null, (0, _pluralize.default)('Hr', hour)), _react.default.createElement(_DownIcon.default, {
-      onClick: function onClick() {
-        _this3.setState({
+      onClick: () => {
+        this.setState({
           hasUserUsedArrowIcons: true
         });
-
-        _this3.decrementHours();
+        this.decrementHours();
       }
     })), !isDurationPicker && _react.default.createElement(_PickerSeparator.default, null, ":"), _react.default.createElement("div", null, _react.default.createElement(_UpIcon.default, {
-      onClick: function onClick() {
-        _this3.setState({
+      onClick: () => {
+        this.setState({
           hasUserUsedArrowIcons: true
         });
-
-        _this3.incrementMinutes();
+        this.incrementMinutes();
       }
     }), _react.default.createElement(_TimeInput.default, {
       value: minute,
-      setTime: function setTime(newTime, shouldApply) {
-        return _this3.setState({
-          minute: newTime
-        }, function () {
-          if (shouldApply) {
-            (0, _PickerGA.default)({
-              category: GA.category,
-              action: "Apply time (" + GA.action + ")",
-              label: getGATimeString(_this3.state)
-            });
-            onApply(_this3.state);
-          }
-        });
-      },
+      setTime: (newTime, shouldApply) => this.setState({
+        minute: newTime
+      }, () => {
+        if (shouldApply) {
+          (0, _PickerGA.default)({
+            category: GA.category,
+            action: `Apply time (${GA.action})`,
+            label: getGATimeString(this.state)
+          });
+          onApply(this.state);
+        }
+      }),
       min: minMinutes,
       max: maxMinutes,
       paddingLen: maxMinutes.toString().length,
       steps: stepMinutes,
-      setRef: function setRef(ref) {
-        _this3._minuteInput = ref;
+      setRef: ref => {
+        this._minuteInput = ref;
       },
-      hasUserEnteredInputManually: function hasUserEnteredInputManually() {
-        _this3.setState({
+      hasUserEnteredInputManually: () => {
+        this.setState({
           hasUserEnteredInputManually: true
         });
       },
       unit: "minutes"
     }), isDurationPicker && _react.default.createElement(DurationLabel, null, (0, _pluralize.default)('Min', minute)), _react.default.createElement(_DownIcon.default, {
-      onClick: function onClick() {
-        _this3.setState({
+      onClick: () => {
+        this.setState({
           hasUserUsedArrowIcons: true
         });
-
-        _this3.decrementMinutes();
+        this.decrementMinutes();
       }
     }))), _react.default.createElement(_Actions.default, null, _react.default.createElement(_CancelLink.default, {
-      onClick: function onClick() {
+      onClick: () => {
         onCancel();
         (0, _PickerGA.default)({
           category: GA.category,
-          action: "Cancel time (" + GA.action + ")"
+          action: `Cancel time (${GA.action})`
         });
       }
     }, "Cancel"), _react.default.createElement(_BrandButton.default, {
-      onClick: function onClick() {
-        if (_this3.state.hasUserUsedArrowIcons && _this3.state.hasUserEnteredInputManually) {
+      onClick: () => {
+        if (this.state.hasUserUsedArrowIcons && this.state.hasUserEnteredInputManually) {
           (0, _PickerGA.default)({
             category: GA.category,
             action: 'Both Arrow and Manual input used'
           });
-        } else if (_this3.state.hasUserUsedArrowIcons) {
+        } else if (this.state.hasUserUsedArrowIcons) {
           (0, _PickerGA.default)({
             category: GA.category,
             action: 'Only arrows used'
           });
-        } else if (_this3.state.hasUserEnteredInputManually) {
+        } else if (this.state.hasUserEnteredInputManually) {
           (0, _PickerGA.default)({
             category: GA.category,
             action: 'Only Manual input used'
@@ -397,17 +373,16 @@ function (_React$Component) {
 
         (0, _PickerGA.default)({
           category: GA.category,
-          action: "Apply time (" + GA.action + ")",
-          label: getGATimeString(_this3.state)
+          action: `Apply time (${GA.action})`,
+          label: getGATimeString(this.state)
         });
-        onApply(_this3.state);
+        onApply(this.state);
       },
       "data-e2e": "time-apply"
     }, "Apply")));
-  };
+  }
 
-  return TimePickerOverlay;
-}(_react.default.Component);
+}
 
 TimePickerOverlay.displayName = 'TimePickerOverlay';
 TimePickerOverlay.propTypes = {