choerodon-ui/lib/rc-components/calendar/date/DateInput.js

An enterprise-class UI design language and React-based implementation

"use strict";

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

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

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

var _reactDom = _interopRequireDefault(require("react-dom"));

var _createReactClass = _interopRequireDefault(require("create-react-class"));

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

var DateInput = (0, _createReactClass["default"])({
  displayName: "DateInput",
  getInitialState: function getInitialState() {
    var selectedValue = this.props.selectedValue;
    return {
      str: selectedValue && selectedValue.format(this.props.format) || '',
      invalid: false
    };
  },
  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
    this.cachedSelectionStart = this.dateInputInstance.selectionStart;
    this.cachedSelectionEnd = this.dateInputInstance.selectionEnd; // when popup show, click body will call this, bug!

    var selectedValue = nextProps.selectedValue;
    this.setState({
      str: selectedValue && selectedValue.format(nextProps.format) || '',
      invalid: false
    });
  },
  componentDidUpdate: function componentDidUpdate() {
    if (!this.state.invalid) {
      this.dateInputInstance.setSelectionRange(this.cachedSelectionStart, this.cachedSelectionEnd);
    }
  },
  onInputChange: function onInputChange(event) {
    var str = event.target.value;
    this.setState({
      str: str
    });
    var value;
    var _this$props = this.props,
        disabledDate = _this$props.disabledDate,
        format = _this$props.format,
        onChange = _this$props.onChange;

    if (str) {
      var parsed = (0, _moment["default"])(str, format, true);

      if (!parsed.isValid()) {
        this.setState({
          invalid: true
        });
        return;
      }

      value = this.props.value.clone();
      value.year(parsed.year()).month(parsed.month()).date(parsed.date()).hour(parsed.hour()).minute(parsed.minute()).second(parsed.second());

      if (value && (!disabledDate || !disabledDate(value))) {
        var originalValue = this.props.selectedValue;

        if (originalValue && value) {
          if (!originalValue.isSame(value)) {
            onChange(value);
          }
        } else if (originalValue !== value) {
          onChange(value);
        }
      } else {
        this.setState({
          invalid: true
        });
        return;
      }
    } else {
      onChange(null);
    }

    this.setState({
      invalid: false
    });
  },
  onClear: function onClear() {
    this.setState({
      str: ''
    });
    this.props.onClear(null);
  },
  getRootDOMNode: function getRootDOMNode() {
    return _reactDom["default"].findDOMNode(this);
  },
  focus: function focus() {
    if (this.dateInputInstance) {
      this.dateInputInstance.focus();
    }
  },
  saveDateInput: function saveDateInput(dateInput) {
    this.dateInputInstance = dateInput;
  },
  render: function render() {
    var props = this.props;
    var _this$state = this.state,
        invalid = _this$state.invalid,
        str = _this$state.str;
    var locale = props.locale,
        prefixCls = props.prefixCls,
        placeholder = props.placeholder,
        clearIcon = props.clearIcon;
    var invalidClass = invalid ? "".concat(prefixCls, "-input-invalid") : '';
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-input-wrap")
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(prefixCls, "-date-input-wrap")
    }, /*#__PURE__*/_react["default"].createElement("input", {
      ref: this.saveDateInput,
      className: "".concat(prefixCls, "-input ").concat(invalidClass),
      value: str,
      disabled: props.disabled,
      placeholder: placeholder,
      onChange: this.onInputChange
    })), props.showClear ? /*#__PURE__*/_react["default"].createElement("a", {
      role: "button",
      title: locale.clear,
      onClick: this.onClear
    }, clearIcon || /*#__PURE__*/_react["default"].createElement("span", {
      className: "".concat(prefixCls, "-clear-btn")
    })) : null);
  }
});
var _default = DateInput;
exports["default"] = _default;
//# sourceMappingURL=DateInput.js.map