wix-style-react/dist/src/TimeInput/TimeInput.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));

var _moment = _interopRequireDefault(require("moment"));

var _Text = _interopRequireDefault(require("../Text"));

var _Input = _interopRequireDefault(require("../Input"));

var _Box = _interopRequireDefault(require("../Box"));

var _TimeInputSt = require("./TimeInput.st.css");

var _constants = require("./constants");

var _context = require("../FontUpgrade/context");

var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

/**
 * An uncontrolled time input component with a stepper and am/pm support
 */
var TimeInput = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(TimeInput, _Component);

  var _super = _createSuper(TimeInput);

  function TimeInput(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, TimeInput);
    _this = _super.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleAmPmClick", function () {
      return !_this.props.disabled && _this._updateDate({
        am: !_this.state.am
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleFocus", function (input) {
      return _this.setState({
        focus: true,
        lastFocus: input
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleBlur", function () {
      _this.setState({
        focus: false
      });

      _this._updateDate({
        time: _this.state.text
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleInputChange", function (e) {
      // that is why cursor is jumping
      // https://github.com/facebook/react/issues/955#issuecomment-327069204
      var isDisabled = _this.props.disabled && _this.props.dashesWhenDisabled;
      var isInvalid = /[^0-9 :]/.test(e.target.value);

      if (isDisabled || isInvalid) {
        e.preventDefault();
        return;
      }

      return _this.setState({
        text: e.target.value
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleHover", function (hover) {
      return _this.setState({
        hover: hover
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleMinus", function () {
      return _this._timeStep(-1);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handlePlus", function () {
      return _this._timeStep(1);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleInputBlur", function (_ref) {
      var target = _ref.target;

      if (_this.props.disabled && _this.props.dashesWhenDisabled) {
        return;
      }

      var caretIdx = target.selectionEnd || 0;
      var lastFocusedTimeUnit;

      if (caretIdx >= 0) {
        lastFocusedTimeUnit = _this._getFocusedTimeUnit(caretIdx, target.value);
      }

      _this.setState({
        lastCaretIdx: caretIdx,
        lastFocusedTimeUnit: lastFocusedTimeUnit
      });

      _this._updateDate({
        time: target.value
      });
    });
    (0, _deprecationLog["default"])('<TimeInput /> is deprecated and will be removed in next major version. Please use <TimeInputNext /> instead. Check out how to migrate here: http://wix.to/q0BaCLQ ');
    _this.state = _objectSpread({
      focus: false,
      lastCaretIdx: 0,
      hover: false
    }, _this._getInitTime(_this.props.defaultValue, _this.props.showSeconds, _this.props.disableAmPm));
    return _this;
  }

  (0, _createClass2["default"])(TimeInput, [{
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      if (this._shouldUpdateState(nextProps)) {
        this.setState(this._getInitTime(nextProps.defaultValue, nextProps.showSeconds, nextProps.disableAmPm));
      }
    }
  }, {
    key: "_shouldUpdateState",
    value: function _shouldUpdateState(nextProps) {
      return nextProps.defaultValue !== this.props.defaultValue || nextProps.showSeconds !== this.props.showSeconds || nextProps.disableAmPm !== this.props.disableAmPm;
    }
  }, {
    key: "_isAmPmMode",
    value: function _isAmPmMode(disableAmPm) {
      return !disableAmPm && (0, _moment["default"])('2016-04-03 13:14:00').format('LT').indexOf('PM') !== -1;
    }
  }, {
    key: "_getInitTime",
    value: function _getInitTime(value, showSeconds, disableAmPm) {
      var time = value || (0, _moment["default"])(),
          am = time.hours() < 12;

      var ampmMode = this._isAmPmMode(disableAmPm);

      var _this$_normalizeTime = this._normalizeTime(am, time, ampmMode);

      time = _this$_normalizeTime.time;
      am = _this$_normalizeTime.am;

      var text = this._formatTime(time, ampmMode, showSeconds);

      return {
        time: time,
        am: am,
        text: text,
        ampmMode: ampmMode
      };
    }
  }, {
    key: "_momentizeState",
    value: function _momentizeState(timeSet) {
      var time, am;
      var ampmMode = this.state.ampmMode;

      if (timeSet) {
        time = timeSet.time;
        am = timeSet.am;
      } else {
        var _this$state = this.state;
        time = _this$state.time;
        am = _this$state.am;
      }

      var hours = time.hours();

      if (ampmMode && !am && hours < 12) {
        hours += 12;
      }

      if (ampmMode && am && hours === 12) {
        hours = 0;
      }

      var momentized = (0, _moment["default"])();
      momentized.hours(hours);
      momentized.minutes(time.minutes());
      momentized.seconds(0);
      return momentized;
    }
  }, {
    key: "_bubbleOnChange",
    value: function _bubbleOnChange(timeSet) {
      var time = this._momentizeState(timeSet);

      this.props.onChange(time);
    }
  }, {
    key: "_timeStep",
    value: function _timeStep(direction) {
      var time = this._momentizeState();

      var timeUnit = this.state.lastFocusedTimeUnit || 'minutes';
      var amount = timeUnit === 'hours' ? 1 : this.props.minutesStep;
      time.add(direction * amount, timeUnit);
      var am = time.hours() < 12;

      this._updateDate({
        am: am,
        time: time
      });
    }
  }, {
    key: "_formatTime",
    value: function _formatTime(time) {
      var ampmMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.state.ampmMode;
      var showSeconds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.props.showSeconds;
      var withSeconds = showSeconds ? ':ss' : '';
      return ampmMode ? time.format("hh:mm".concat(withSeconds)) : time.format("HH:mm".concat(withSeconds));
    }
  }, {
    key: "_getFocusedTimeUnit",
    value: function _getFocusedTimeUnit(caretIdx, currentValue) {
      var colonIdx = currentValue.indexOf(':');
      colonIdx = Math.max(0, colonIdx);
      return caretIdx <= colonIdx ? 'hours' : 'minutes';
    }
  }, {
    key: "_normalizeTime",
    value: function _normalizeTime(am, time) {
      var ampmMode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.state.ampmMode;
      var hours = time.hours();

      if (ampmMode) {
        if (hours === 0) {
          return {
            time: time.clone().hours(12),
            am: true
          };
        }

        if (hours > 12) {
          return {
            time: time.clone().hours(hours - 12),
            am: false
          };
        }
      }

      return {
        time: time.clone().hours(hours),
        am: am
      };
    }
  }, {
    key: "_updateDate",
    value: function _updateDate(_ref2) {
      var time = _ref2.time,
          am = _ref2.am;
      am = (0, _isUndefined["default"])(am) ? this.state.am : am;
      var newTime = (0, _moment["default"])(time, 'HH:mm');
      newTime = newTime.isValid() ? newTime : this.state.time;

      var normalizedTime = this._normalizeTime(am, newTime);

      time = normalizedTime.time;
      am = normalizedTime.am;

      var text = this._formatTime(time);

      this.setState({
        time: time,
        am: am,
        text: text
      });

      this._bubbleOnChange({
        time: time,
        am: am
      });
    }
  }, {
    key: "_renderTimeTextbox",
    value: function _renderTimeTextbox() {
      var _this2 = this;

      var _this$props = this.props,
          customSuffix = _this$props.customSuffix,
          disabled = _this$props.disabled,
          dashesWhenDisabled = _this$props.dashesWhenDisabled,
          width = _this$props.width,
          rtl = _this$props.rtl,
          status = _this$props.status,
          hideStatusSuffix = _this$props.hideStatusSuffix,
          statusMessage = _this$props.statusMessage,
          border = _this$props.border;
      var text = disabled && dashesWhenDisabled ? '-- : --' : this.state.text;

      var suffix = /*#__PURE__*/_react["default"].createElement(_Input["default"].Group, null, /*#__PURE__*/_react["default"].createElement(_context.FontUpgradeContext.Consumer, null, function (_ref3) {
        var isMadefor = _ref3.active;
        return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
          alignItems: "center",
          justifyContent: "space-between"
        }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
          verticalAlign: "middle",
          flexGrow: 0,
          marginRight: "6px"
        }, _this2.state.ampmMode && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
          weight: isMadefor ? 'thin' : 'normal',
          skin: disabled ? 'disabled' : 'standard',
          className: _TimeInputSt.classes.ampm,
          onClick: _this2._handleAmPmClick,
          dataHook: _constants.dataHooks.amPmIndicator
        }, _this2.state.am ? 'am' : 'pm')), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
          align: "right",
          verticalAlign: "middle",
          className: _TimeInputSt.classes.suffixEndWrapper
        }, customSuffix && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
          marginRight: "6px",
          width: "max-content"
        }, typeof customSuffix === 'string' ? /*#__PURE__*/_react["default"].createElement(_Text["default"], {
          weight: isMadefor ? 'thin' : 'normal',
          light: true,
          secondary: true,
          dataHook: _constants.dataHooks.customSuffix
        }, customSuffix) : /*#__PURE__*/_react["default"].createElement("span", {
          "data-hook": _constants.dataHooks.customSuffix
        }, customSuffix)), /*#__PURE__*/_react["default"].createElement(_Input["default"].Ticker, {
          upDisabled: disabled,
          downDisabled: disabled,
          onUp: _this2._handlePlus,
          onDown: _this2._handleMinus,
          dataHook: _constants.dataHooks.ticker
        })));
      }));

      return /*#__PURE__*/_react["default"].createElement(_Input["default"], {
        ref: "input",
        rtl: rtl,
        value: text,
        className: width === 'auto' ? _TimeInputSt.classes.input : undefined,
        onFocus: this._handleFocus,
        onChange: this._handleInputChange,
        onBlur: this._handleInputBlur,
        dataHook: _constants.dataHooks.input,
        disabled: disabled,
        suffix: suffix,
        border: border,
        status: status,
        hideStatusSuffix: hideStatusSuffix,
        statusMessage: statusMessage
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props2 = this.props,
          className = _this$props2.className,
          style = _this$props2.style,
          dataHook = _this$props2.dataHook,
          rtl = _this$props2.rtl,
          disabled = _this$props2.disabled,
          width = _this$props2.width,
          showSeconds = _this$props2.showSeconds;
      var _this$state2 = this.state,
          focus = _this$state2.focus,
          hover = _this$state2.hover;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _TimeInputSt.st)(_TimeInputSt.classes.root, {
          disabled: disabled,
          rtl: rtl,
          showSeconds: showSeconds
        }, className),
        style: style,
        "data-hook": dataHook
      }, /*#__PURE__*/_react["default"].createElement("div", {
        onMouseOver: function onMouseOver() {
          return _this3._handleHover(true);
        },
        onMouseOut: function onMouseOut() {
          return _this3._handleHover(false);
        },
        className: (0, _TimeInputSt.st)(_TimeInputSt.classes.time, {
          focus: focus,
          hover: hover && !focus,
          stretch: width === '100%'
        }, className)
      }, this._renderTimeTextbox()));
    }
  }]);
  return TimeInput;
}(_react.Component);

exports["default"] = TimeInput;
(0, _defineProperty2["default"])(TimeInput, "displayName", 'TimeInput');
(0, _defineProperty2["default"])(TimeInput, "propTypes", {
  /** Displays "--:--" instead of time when input is in a disabled state */
  dashesWhenDisabled: _propTypes["default"].bool,

  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes["default"].string,

  /** Defines the default starting time */
  defaultValue: _propTypes["default"].object,

  /** Enables 24h time format  */
  disableAmPm: _propTypes["default"].bool,

  /** Marks field as disabled  */
  disabled: _propTypes["default"].bool,

  /** Provides a handler that is called whenever input is updated */
  onChange: _propTypes["default"].func,

  /** Displays content in RTL  */
  rtl: _propTypes["default"].bool,

  /** Controls the width of the component. auto will resize the input to match width of its content, while 100% will take up the full parent container width. */
  width: _propTypes["default"].oneOf(['auto', '100%']),

  /** Defines the number of minutes to be changed on arrow click */
  minutesStep: _propTypes["default"].number,

  /** Pass a custom element in the area located before ticker */
  customSuffix: _propTypes["default"].node,

  /** Specify the status of a field */
  status: _propTypes["default"].oneOf(['error', 'warning', 'loading']),

  /** Hides status icon. Field will indicate error or warning with border colour change only. */
  hideStatusSuffix: _propTypes["default"].bool,

  /** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
  statusMessage: _propTypes["default"].node,

  /** Displays seconds */
  showSeconds: _propTypes["default"].bool
});
(0, _defineProperty2["default"])(TimeInput, "defaultProps", {
  defaultValue: (0, _moment["default"])(),
  onChange: function onChange() {},
  disableAmPm: false,
  disabled: false,
  dashesWhenDisabled: false,
  minutesStep: 20,
  width: 'auto',
  showSeconds: false
});