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

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

import React from 'react';
import ReactDOM from 'react-dom';
import createReactClass from 'create-react-class';
import moment from 'moment';
var DateInput = createReactClass({
  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 = moment(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.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.createElement("div", {
      className: "".concat(prefixCls, "-input-wrap")
    }, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-date-input-wrap")
    }, /*#__PURE__*/React.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.createElement("a", {
      role: "button",
      title: locale.clear,
      onClick: this.onClear
    }, clearIcon || /*#__PURE__*/React.createElement("span", {
      className: "".concat(prefixCls, "-clear-btn")
    })) : null);
  }
});
export default DateInput;
//# sourceMappingURL=DateInput.js.map