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

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _isUndefined = require('lodash/isUndefined');

var _isUndefined2 = _interopRequireDefault(_isUndefined);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _Input = require('../Input');

var _Input2 = _interopRequireDefault(_Input);

var _TimeInput = require('./TimeInput.scss');

var _TimeInput2 = _interopRequireDefault(_TimeInput);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/**
 * An uncontrolled time input component with a stepper and am/pm support
 */
var TimePicker = (_temp = _class = function (_Component) {
  _inherits(TimePicker, _Component);

  function TimePicker(props) {
    _classCallCheck(this, TimePicker);

    var _this = _possibleConstructorReturn(this, (TimePicker.__proto__ || Object.getPrototypeOf(TimePicker)).call(this, props));

    _this.handleAmPmClick = function () {
      return !_this.props.disabled && _this.updateDate({ am: !_this.state.am });
    };

    _this.handleFocus = function (input) {
      return _this.setState({ focus: true, lastFocus: input });
    };

    _this.handleBlur = function () {
      _this.setState({ focus: false });
      _this.updateDate({ time: _this.state.text });
    };

    _this.handleInputChange = function (e) {
      // thats 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
      });
    };

    _this.handleHover = function (hover) {
      return _this.setState({ hover: hover });
    };

    _this.handleMinus = function () {
      return _this.timeStep(-1);
    };

    _this.handlePlus = function () {
      return _this.timeStep(1);
    };

    _this.handleInputBlur = function (_ref) {
      var target = _ref.target;

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

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

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

      _this.setState({ lastCaretIdx: caretIdx, lastFocusedTimeUnit: lastFocusedTimeUnit });
      _this.updateDate({ time: target.value });
    };

    _this.state = _extends({
      focus: false,
      lastCaretIdx: 0,
      hover: false
    }, _this.getInitTime(_this.props.defaultValue));
    return _this;
  }

  _createClass(TimePicker, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.defaultValue !== this.props.defaultValue) {
        this.setState(this.getInitTime(nextProps.defaultValue));
      }
    }
  }, {
    key: 'isAmPmMode',
    value: function isAmPmMode() {
      return !this.props.disableAmPm && (0, _moment2.default)('2016-04-03 13:14:00').format('LT').indexOf('PM') !== -1;
    }
  }, {
    key: 'getInitTime',
    value: function getInitTime(value) {
      var time = value || (0, _moment2.default)(),
          am = time.hours() < 12;

      var ampmMode = this.isAmPmMode();

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

      time = _normalizeTime.time;
      am = _normalizeTime.am;

      var text = this.formatTime(time, ampmMode);

      return { time: time, am: am, text: text, ampmMode: ampmMode };
    }
  }, {
    key: 'momentizeState',
    value: function momentizeState(timeSet) {
      var time = void 0,
          am = void 0;
      var ampmMode = this.state.ampmMode;


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

      var hours = time.hours();

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

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

      var momentized = (0, _moment2.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 : 20;
      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;

      return ampmMode ? time.format('hh:mm') : time.format('HH:mm');
    }
  }, {
    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, _isUndefined2.default)(am) ? this.state.am : am;
      var newTime = (0, _moment2.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 text = this.props.disabled && this.props.dashesWhenDisabled ? '-- : --' : this.state.text;

      var suffix = _react2.default.createElement(
        _Input2.default.Group,
        null,
        this.state.ampmMode && _react2.default.createElement(
          'span',
          {
            className: _TimeInput2.default.ampm,
            onClick: this.handleAmPmClick,
            'data-hook': 'am-pm-indicator'
          },
          this.state.am ? 'am' : 'pm'
        ),
        _react2.default.createElement(_Input2.default.Ticker, {
          upDisabled: this.props.disabled,
          downDisabled: this.props.disabled,
          onUp: this.handlePlus,
          onDown: this.handleMinus
        })
      );

      return _react2.default.createElement(
        'div',
        { className: _TimeInput2.default.input },
        _react2.default.createElement(_Input2.default, {
          ref: 'input',
          value: text,
          onFocus: this.handleFocus,
          onChange: this.handleInputChange,
          onBlur: this.handleInputBlur,
          suffix: suffix,
          dataHook: 'time-input',
          disabled: this.props.disabled
        })
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          style = _props.style,
          dataHook = _props.dataHook,
          rtl = _props.rtl,
          disabled = _props.disabled;
      var _state2 = this.state,
          focus = _state2.focus,
          hover = _state2.hover;


      return _react2.default.createElement(
        'div',
        {
          className: (0, _classnames2.default)(_TimeInput2.default.wrapper, _defineProperty({}, _TimeInput2.default.disabled, disabled)),
          style: style,
          'data-hook': dataHook
        },
        _react2.default.createElement(
          'div',
          {
            onMouseOver: function onMouseOver() {
              return _this2.handleHover(true);
            },
            onMouseOut: function onMouseOut() {
              return _this2.handleHover(false);
            },
            className: (0, _classnames2.default)(_TimeInput2.default.time, {
              focus: focus,
              hover: hover && !focus,
              rtl: rtl
            })
          },
          this.renderTimeTextbox()
        )
      );
    }
  }]);

  return TimePicker;
}(_react.Component), _class.displayName = 'TimePicker', _class.propTypes = {
  /** Should time be shown as "--:--" when disabled */
  dashesWhenDisabled: _propTypes2.default.bool,
  dataHook: _propTypes2.default.string,

  /** The control's starting time */
  defaultValue: _propTypes2.default.object,

  /** 24h mode  */
  disableAmPm: _propTypes2.default.bool,

  /** Is disabled  */
  disabled: _propTypes2.default.bool,

  /** Called upon blur */
  onChange: _propTypes2.default.func,

  /** Display in RTL  */
  rtl: _propTypes2.default.bool,

  style: _propTypes2.default.object
}, _class.defaultProps = {
  defaultValue: (0, _moment2.default)(),
  onChange: function onChange() {},
  style: {},
  disableAmPm: false,
  disabled: false,
  dashesWhenDisabled: false
}, _temp);
exports.default = TimePicker;