@beisen-platform/date-time/lib/index.js

import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "core-js/modules/es6.regexp.to-string";
import "core-js/modules/es6.object.to-string";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import DatePicker from './DatePicker';
import CommonLabel from '@beisen-platform/common-label';
import CloseIcon from '@beisen-platform/react-icons/lib/icons/Close.js';
var RangePicker = DatePicker.RangePicker;
var MonthPicker = DatePicker.MonthPicker;
var YearPicker = DatePicker.YearPicker;
import './index.css';

var DateTime =
/*#__PURE__*/
function (_Component) {
  _inherits(DateTime, _Component);

  function DateTime(props) {
    var _this;

    _classCallCheck(this, DateTime);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(DateTime).call(this, props));
    _this.state = {
      value: "",
      active: props.isActive ? props.isActive : false,
      isActiveStyle: false,
      isChange: false,
      isClear: false
    };
    _this.clearData = _this.clearData.bind(_assertThisInitialized(_this));
    _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
    _this.changeActive = _this.changeActive.bind(_assertThisInitialized(_this));
    _this.disabledDate = _this.disabledDate.bind(_assertThisInitialized(_this));
    _this.headInputMouseOver = _this.headInputMouseOver.bind(_assertThisInitialized(_this));
    _this.headInputMouseOut = _this.headInputMouseOut.bind(_assertThisInitialized(_this));
    _this.hiddenClose = _this.hiddenClose.bind(_assertThisInitialized(_this));
    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
    _this.changeActiveStyle = _this.changeActiveStyle.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(DateTime, [{
    key: "onChange",
    value: function onChange(value) {
      // const [startValue, endValue] = value
      // if(!startValue || !endValue || this.disabledDate(startValue) || this.disabledDate(endValue)){
      //   return
      // }
      var _this$props = this.props,
          dateStyle = _this$props.dateStyle,
          onChange = _this$props.onChange;
      var type = dateStyle;

      if (value) {
        onChange && onChange(value, true);
        type.indexOf("RangePicker") > -1 ? this.setState({
          value: [this.formatValue(value[0]), this.formatValue(value[1])],
          isChange: true,
          isClear: false
        }) : this.setState({
          value: this.formatValue(value),
          isChange: true,
          isClear: false
        });
      } else {
        this.setState({
          value: '',
          isChange: true,
          isClear: false
        });
        onChange && onChange('', true);
      }
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps) this.setState({
        active: nextProps.isActive,
        value: nextProps.value
      });
    }
  }, {
    key: "componentWillMount",
    value: function componentWillMount() {
      var _this$props2 = this.props,
          value = _this$props2.value,
          defaultValue = _this$props2.defaultValue;
      this.setState({
        value: value.length > 0 ? value : defaultValue
      });
    }
  }, {
    key: "formatValue",
    value: function formatValue(value) {
      var tempDate = new Date(value);
      var tempYear = tempDate.getFullYear().toString();
      var tempMonth = (tempDate.getMonth() + 1).toString();
      var tempDay = tempDate.getDate().toString();
      var tempHours = tempDate.getHours().toString();
      var tempMinutes = tempDate.getMinutes().toString();
      var tempSeconds = tempDate.getSeconds().toString();
      tempMonth = tempMonth.length == 1 ? '0' + tempMonth : tempMonth;
      tempDay = tempDay.length == 1 ? '0' + tempDay : tempDay;
      tempHours = tempHours.length == 1 ? '0' + tempHours : tempHours;
      tempMinutes = tempMinutes.length == 1 ? '0' + tempMinutes : tempMinutes;
      tempSeconds = tempSeconds.length == 1 ? '0' + tempSeconds : tempSeconds;
      var formatData = this.props.format.indexOf('-') >= 0 ? tempYear + "-" + tempMonth + "-" + tempDay : tempYear + "/" + tempMonth + "/" + tempDay;
      return formatData + " " + tempHours + ":" + tempMinutes + ":" + tempSeconds;
    }
  }, {
    key: "disabledDate",
    value: function disabledDate(current) {
      switch (this.props.disabledDate) {
        case "all":
          return current;

        case "beforeNotToday":
          // if(this.props.showTime){
          //   return current && current.getTime() < Date.now() - 86400;
          // }else {
          var now = new Date();

          var _current$fields = _slicedToArray(current.fields, 4),
              empty = _current$fields[0],
              yyyy = _current$fields[1],
              MM = _current$fields[2],
              dd = _current$fields[3];

          var nowNumber = now.getFullYear() * 10000 + now.getMonth() * 100 + now.getDate();
          var currentNumber = yyyy * 10000 + MM * 100 + dd;
          return currentNumber < nowNumber;
        // }

        case "beforeToday":
          return current && current.getTime() < Date.now();

        case "afterToday":
          return current && current.getTime() > Date.now();

        case "lasttwoweeks":
          return !(current.getTime() > Date.now() - 1209600000 && current.getTime() < Date.now());

        default:
          return !current;
      }
    }
  }, {
    key: "clearData",
    value: function clearData(event) {
      var _this$props3 = this.props,
          dateStyle = _this$props3.dateStyle,
          onChange = _this$props3.onChange;
      var clearValue = dateStyle == "RangePicker" ? [] : "";
      this.setState({
        value: clearValue,
        isClear: true
      });
      this.hiddenClose();
      onChange && onChange(dateStyle == "RangePicker" ? [] : "", true);
    }
  }, {
    key: "changeActive",
    value: function changeActive(val) {
      this.props.changeActive && this.props.changeActive(val);
    }
  }, {
    key: "headInputMouseOver",
    value: function headInputMouseOver(event) {
      var dom = findDOMNode(this.refs.DateTimeClose);

      if (dom && dom.style.display == 'block') {
        return;
      } else {
        this.changeStyle(true);
      }
    }
  }, {
    key: "headInputMouseOut",
    value: function headInputMouseOut(event) {
      var node = event.target;

      if (node.nodeName.toLowerCase() == 'span' && node.className.indexOf("date-time__input-close") >= 0) {
        return;
      } else {
        this.changeStyle(false);
      }
    }
  }, {
    key: "handleFocus",
    value: function handleFocus(event) {
      this.props.changeActive(true);
    }
  }, {
    key: "handleBlur",
    value: function handleBlur(event) {
      this.props.changeActive(false);
    }
  }, {
    key: "hiddenClose",
    value: function hiddenClose() {
      this.changeStyle(false);
    }
  }, {
    key: "changeActiveStyle",
    value: function changeActiveStyle() {
      this.setState({
        isActiveStyle: !this.state.isActiveStyle
      });
    }
  }, {
    key: "changeStyle",
    value: function changeStyle(bool) {
      var dateTime = this.refs.dateTimeRef;
      if (!dateTime) return;
      var close = dateTime.querySelector(".date-time__input-close");
      if (!close) return;
      var dom = document.getElementsByClassName("ant-calendar-picker-open")[0];
      var _this$props4 = this.props,
          readonly = _this$props4.readonly,
          disabled = _this$props4.disabled;
      var _this$state = this.state,
          value = _this$state.value,
          active = _this$state.active;
      var style = !readonly && !disabled && value.length != 0 && (bool || dom && active) ? "block" : "none";
      close.style.display = style;
    }
  }, {
    key: "renderCloseIcon",
    value: function renderCloseIcon() {
      if (this.props.showOutDel) {
        return React.createElement("span", {
          ref: "DateTimeClose",
          style: {
            "display": "none"
          },
          className: "date-time__input-close",
          onClick: this.clearData
        }, React.createElement(CloseIcon, null));
      } else {
        return null;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props5 = this.props,
          showStatus = _this$props5.showStatus,
          hidden = _this$props5.hidden,
          disabled = _this$props5.disabled,
          readonly = _this$props5.readonly,
          title = _this$props5.title,
          format = _this$props5.format,
          timeValue = _this$props5.timeValue,
          cmp_id = _this$props5.cmp_id,
          placeholder = _this$props5.placeholder,
          showTime = _this$props5.showTime,
          dateStyle = _this$props5.dateStyle,
          startPlaceholder = _this$props5.startPlaceholder,
          endPlaceholder = _this$props5.endPlaceholder,
          today = _this$props5.today,
          now = _this$props5.now,
          style = _this$props5.style,
          errorStatus = _this$props5.errorStatus,
          defaultValue = _this$props5.defaultValue,
          value = _this$props5.value,
          errorMsg = _this$props5.errorMsg,
          open = _this$props5.open,
          lablePos = _this$props5.lablePos,
          logicContainerId = _this$props5.logicContainerId;
      var active = this.state.active;
      var timeLabel = showStatus != 'search' && title && title.length > 0 ? React.createElement(CommonLabel, this.props) : "";
      var tempErrorMsg = "请填写正确信息",
          errorContent;

      if (errorStatus) {
        tempErrorMsg = errorMsg.length > 0 ? errorMsg : tempErrorMsg;
        errorContent = React.createElement("div", {
          className: 'base-input-show ' + (showStatus == 'search' ? 'search-label-margin' : '')
        }, React.createElement("span", {
          className: 'base-input-show-text input-pFoucus input-pError '
        }, tempErrorMsg));
      }

      var IsActive = {
        IsActive: active
      };
      var tempValue = value != undefined ? {
        value: this.state.value
      } : {};
      var tempDefaultValue = defaultValue.length > 0 ? {
        defaultValue: defaultValue
      } : {};
      var disabledTime = disabled ? " datetime-disabled" : "";
      var readonlyTime = readonly ? " datetime-readonly" : "";
      var tempDisabled = disabled ? true : readonly ? true : false;

      if (hidden) {
        return React.createElement("div", null);
      } else {
        switch (dateStyle) {
          case "RangePicker":
            return React.createElement("div", {
              ref: "dateTimeRef",
              className: 'date-time__content form-item ' + disabledTime + readonlyTime
            }, timeLabel, React.createElement("div", {
              className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : '')
            }, React.createElement(RangePicker, _extends({
              size: "",
              logicContainerId: logicContainerId
            }, tempValue, IsActive, {
              type: dateStyle,
              defaultValue: defaultValue,
              showTime: showTime,
              format: format,
              disabled: tempDisabled,
              onChange: this.onChange,
              onFocus: this.handleFocus,
              onBlur: this.handleBlur,
              placeholder: placeholder,
              disabledDate: this.disabledDate,
              style: style,
              errorStatus: errorStatus,
              changeActive: this.changeActive,
              startPlaceholder: startPlaceholder,
              endPlaceholder: endPlaceholder,
              now: now,
              readonly: readonly,
              today: today,
              showStatus: showStatus,
              lablePos: lablePos
            })), errorContent));

          case 'RangePickerMonth':
            return React.createElement("div", {
              ref: "dateTimeRef",
              className: 'date-time__content form-item ' + disabledTime + readonlyTime
            }, timeLabel, React.createElement("div", {
              className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : '')
            }, React.createElement(RangePicker, _extends({
              size: "",
              logicContainerId: logicContainerId
            }, tempValue, IsActive, {
              type: 'RangePickerMonth',
              defaultValue: defaultValue,
              showTime: showTime,
              format: format,
              disabled: tempDisabled,
              onChange: this.onChange,
              disabledDate: this.disabledDate,
              onFocus: this.handleFocus,
              onBlur: this.handleBlur,
              placeholder: placeholder,
              style: style,
              errorStatus: errorStatus,
              changeActive: this.changeActive,
              startPlaceholder: startPlaceholder,
              endPlaceholder: endPlaceholder,
              now: now,
              readonly: readonly,
              today: today,
              showStatus: showStatus,
              lablePos: lablePos
            })), errorContent));

          case 'RangePickerYear':
            return React.createElement("div", {
              ref: "dateTimeRef",
              className: 'date-time__content form-item ' + disabledTime + readonlyTime
            }, timeLabel, React.createElement("div", {
              className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : '')
            }, React.createElement(RangePicker, _extends({
              size: "",
              logicContainerId: logicContainerId
            }, tempValue, IsActive, {
              type: 'RangePickerYear',
              defaultValue: defaultValue,
              showTime: showTime,
              format: format,
              disabled: tempDisabled,
              onChange: this.onChange,
              onFocus: this.handleFocus,
              onBlur: this.handleBlur,
              placeholder: placeholder,
              disabledDate: this.disabledDate,
              style: style,
              errorStatus: errorStatus,
              changeActive: this.changeActive,
              startPlaceholder: startPlaceholder,
              endPlaceholder: endPlaceholder,
              now: now,
              lablePos: lablePos,
              readonly: readonly,
              today: today,
              showStatus: showStatus
            })), errorContent));

          case "MonthPicker":
            return React.createElement("div", {
              ref: "dateTimeRef",
              className: 'date-time__content form-item ' + disabledTime + readonlyTime
            }, timeLabel, React.createElement("div", {
              className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : ''),
              onMouseOver: this.headInputMouseOver,
              onMouseOut: this.headInputMouseOut
            }, React.createElement(MonthPicker, _extends({
              size: "",
              logicContainerId: logicContainerId,
              type: dateStyle,
              defaultValue: defaultValue
            }, tempValue, IsActive, {
              format: format,
              disabledDate: this.disabledDate,
              disabled: tempDisabled,
              onChange: this.onChange,
              onFocus: this.handleFocus,
              onBlur: this.handleBlur,
              hiddenClose: this.hiddenClose,
              changeActive: this.changeActive,
              placeholder: placeholder,
              style: style,
              readonly: readonly,
              lablePos: lablePos,
              errorStatus: errorStatus,
              showStatus: showStatus
            })), this.renderCloseIcon(), errorContent));

          case 'YearPicker':
            return React.createElement("div", {
              ref: "dateTimeRef",
              className: 'date-time__content form-item ' + disabledTime + readonlyTime
            }, timeLabel, React.createElement("div", {
              className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : ''),
              onMouseOver: this.headInputMouseOver,
              onMouseOut: this.headInputMouseOut
            }, React.createElement(YearPicker, _extends({
              logicContainerId: logicContainerId,
              size: "",
              yearPicker: true,
              defaultValue: defaultValue,
              type: dateStyle
            }, tempValue, IsActive, {
              format: format,
              disabled: tempDisabled,
              disabledDate: this.disabledDate,
              onChange: this.onChange,
              onFocus: this.handleFocus,
              onBlur: this.handleBlur,
              changeActive: this.changeActive,
              hiddenClose: this.hiddenClose,
              placeholder: placeholder,
              style: style,
              readonly: readonly,
              lablePos: lablePos,
              errorStatus: errorStatus,
              showStatus: showStatus
            })), this.renderCloseIcon(), errorContent));

          default:
            return React.createElement("div", {
              ref: "dateTimeRef",
              className: 'date-time__content form-item ' + disabledTime + readonlyTime
            }, timeLabel, React.createElement("div", {
              tabIndex: "0",
              className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : ''),
              onMouseOver: this.headInputMouseOver,
              onMouseOut: this.headInputMouseOut
            }, React.createElement(DatePicker, _extends({
              size: "",
              logicContainerId: logicContainerId
            }, IsActive, tempDefaultValue, tempValue, {
              showTime: showTime //由于性能打点需要而添加
              ,
              dateStyle: dateStyle //由于性能打点需要而添加
              ,
              cmp_id: cmp_id //由于性能打点需要而添加
              ,
              format: format,
              timeValue: timeValue,
              disabled: tempDisabled,
              changeActive: this.changeActive,
              onChange: this.onChange,
              onFocus: this.handleFocus,
              onBlur: this.handleBlur,
              placeholder: placeholder,
              disabledDate: this.disabledDate,
              hiddenClose: this.hiddenClose,
              showStatus: showStatus,
              readonly: readonly,
              lablePos: lablePos,
              open: open,
              style: style,
              errorStatus: errorStatus,
              changeActiveStyle: this.changeActiveStyle,
              removeSuffixIcon: this.props.removeSuffixIcon
            })), this.renderCloseIcon(), errorContent));
        }
      }
    }
  }]);

  return DateTime;
}(Component);

DateTime.defaultProps = {
  placeholder: "请选择",
  showOutDel: true,
  dateStyle: 'DatePicker',
  changeActive: function changeActive() {}
};
export { DateTime as default };