@seafile/seafile-calendar/lib/time/TimeInput.js

React Calendar

'use strict';

exports.__esModule = true;

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactLifecyclesCompat = require('react-lifecycles-compat');

var _dayjs = require('dayjs');

var _dayjs2 = _interopRequireDefault(_dayjs);

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

var customParseFormat = require('dayjs/plugin/customParseFormat');
_dayjs2['default'].extend(customParseFormat);

function formatTime(value, format) {
  if (!value) return '';
  var fmt = Array.isArray(format) ? format[0] : format || 'HH:mm';
  return value.format(fmt);
}

// Convert a loose numeric/time string into HH:mm
// Rules (similar spirit to DateInput.initializeStr):
// - Strip non-digits
// - If len <= 2 => treat as hour
// - If len > 2 => last two digits are minutes; preceding are hours
// - Clamp hours to [0,23], minutes to [0,59]
// - Return formatted HH:mm or '' when input is empty
function initializeTime(str) {
  if (typeof str !== 'string') return '';
  var digits = str.replace(/\D/g, '');
  if (!digits.length) return '';

  var hDigits = '';
  var mDigits = '';
  if (digits.length <= 2) {
    hDigits = digits;
  } else {
    hDigits = digits.slice(0, digits.length - 2);
    mDigits = digits.slice(-2);
  }

  var hour = parseInt(hDigits || '0', 10);
  var minute = parseInt(mDigits || '0', 10);
  if (Number.isNaN(hour)) hour = 0;
  if (Number.isNaN(minute)) minute = 0;

  if (hour > 23) hour = 23;
  if (minute > 59) minute = 59;

  var HH = String(hour).padStart(2, '0');
  var mm = String(minute).padStart(2, '0');
  return HH + ':' + mm;
}

var timeInputInstance = void 0;

var TimeInput = function (_React$Component) {
  (0, _inherits3['default'])(TimeInput, _React$Component);

  function TimeInput(props) {
    (0, _classCallCheck3['default'])(this, TimeInput);

    var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props));

    _this.onInputChange = function (event) {
      var str = event.target.value;
      var timeStr = initializeTime(str);

      if (!str || !timeStr) {
        _this.setState({ str: str });
        return;
      }

      var base = _this.props.selectedValue || _this.props.value || (0, _dayjs2['default'])();
      var parsed = (0, _dayjs2['default'])(timeStr, 'HH:mm');
      var next = base.clone().hour(parsed.hour()).minute(parsed.minute());

      _this.setState({ str: str });
      if (_this.props.onChange) {
        _this.props.onChange(next);
      }
    };

    _this.onKeyDown = function (event) {
      if (event.key === 'Enter' && _this.props.onSelect) {
        var timeStr = initializeTime(_this.state.str);
        if (!timeStr) return;
        var base = _this.props.selectedValue || _this.props.value || (0, _dayjs2['default'])();
        var parsed = (0, _dayjs2['default'])(timeStr, 'HH:mm');
        var next = base.clone().hour(parsed.hour()).minute(parsed.minute());
        _this.props.onSelect(next);
        event.preventDefault();
      }
    };

    _this.onFocus = function () {
      _this.setState({ hasFocus: true });
    };

    _this.onBlur = function () {
      var base = _this.props.selectedValue ? _this.props.selectedValue : _this.props.value || null;
      _this.setState({
        hasFocus: false,
        str: base ? formatTime(base, _this.props.format) : ''
      });
    };

    _this.saveRef = function (node) {
      timeInputInstance = node;
    };

    _this.state = {
      str: '',
      hasFocus: false
    };
    return _this;
  }

  TimeInput.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
    var newState = null;
    if (!state.hasFocus) {
      var base = nextProps.selectedValue || null;
      newState = { str: base ? formatTime(base, nextProps.format) : '' };
    }
    return newState;
  };

  TimeInput.getInstance = function getInstance() {
    return timeInputInstance;
  };

  TimeInput.prototype.render = function render() {
    var _props = this.props,
        prefixCls = _props.prefixCls,
        placeholder = _props.placeholder,
        inputMode = _props.inputMode,
        disabled = _props.disabled,
        className = _props.className;

    var inputCls = className || prefixCls + '-input';
    return _react2['default'].createElement(
      'div',
      { className: prefixCls + '-input-wrap' },
      _react2['default'].createElement(
        'div',
        { className: prefixCls + '-time-input-wrap' },
        _react2['default'].createElement('input', {
          id: 'time-input',
          ref: this.saveRef,
          className: inputCls,
          value: this.state.str,
          disabled: disabled,
          placeholder: placeholder,
          onChange: this.onInputChange,
          onKeyDown: this.onKeyDown,
          onFocus: this.onFocus,
          onBlur: this.onBlur,
          inputMode: inputMode
        })
      )
    );
  };

  return TimeInput;
}(_react2['default'].Component);

TimeInput.propTypes = {
  prefixCls: _propTypes2['default'].string,
  value: _propTypes2['default'].object,
  selectedValue: _propTypes2['default'].object,
  onChange: _propTypes2['default'].func,
  onSelect: _propTypes2['default'].func,
  placeholder: _propTypes2['default'].string,
  inputMode: _propTypes2['default'].string,
  format: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].arrayOf(_propTypes2['default'].string)]),
  disabled: _propTypes2['default'].bool,
  className: _propTypes2['default'].string
};
TimeInput.defaultProps = {
  format: 'HH:mm',
  placeholder: 'HH:mm'
};


(0, _reactLifecyclesCompat.polyfill)(TimeInput);

exports['default'] = TimeInput;
module.exports = exports['default'];