@beisen/ethos/lib/time-picker/index.js

beisencloud pc react components

'use strict';

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

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

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

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

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _TimePicker = require('./TimePicker');

var _TimePicker2 = _interopRequireDefault(_TimePicker);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _commonLabel = require('../common-label');

var _commonLabel2 = _interopRequireDefault(_commonLabel);

require('./index.scss');

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

var defaultTransaltion = {
  localeName: 'zh_CN'
};
var TimePointPicker = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(TimePointPicker, _Component);

  function TimePointPicker(props) {
    (0, _classCallCheck3.default)(this, TimePointPicker);

    var _this = (0, _possibleConstructorReturn3.default)(this, (TimePointPicker.__proto__ || (0, _getPrototypeOf2.default)(TimePointPicker)).call(this, props));

    var defualt = {
      active: false,
      stateValue: ""
    };

    _this.state = (0, _extends3.default)({}, defualt, props);
    _this.onClose = _this.onClose.bind(_this);
    _this.clearData = _this.clearData.bind(_this);
    _this.inputActive = _this.inputActive.bind(_this);
    _this.onChange = _this.onChange.bind(_this);
    _this.disabledHours = _this.disabledHours.bind(_this);
    _this.disabledMinutes = _this.disabledMinutes.bind(_this);
    _this.disabledSeconds = _this.disabledSeconds.bind(_this);
    _this.clearValue = _this.clearValue.bind(_this);
    _this.headInputMouseOver = _this.headInputMouseOver.bind(_this);
    _this.headInputMouseOut = _this.headInputMouseOut.bind(_this);
    _this.changeStyle = _this.changeStyle.bind(_this);
    _this.handleFocus = _this.handleFocus.bind(_this);
    _this.handleBlur = _this.handleBlur.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(TimePointPicker, [{
    key: 'onChange',
    value: function onChange(time) {
      this.props.onChange && this.props.onChange(time, true);
      this.setState({
        stateValue: time
      });
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.value != this.state.stateValue) {
        this.setState({
          stateValue: nextProps.value
        });
      }
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {
      var _props = this.props,
          value = _props.value,
          defaultValue = _props.defaultValue;

      this.setState({
        stateValue: value.length > 0 ? value : defaultValue
      });
      this.changeStyle(false);
    }
  }, {
    key: 'newArray',
    value: function newArray(start, end) {
      var result = [];
      for (var i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    }
  }, {
    key: 'disabledHours',
    value: function disabledHours() {
      //禁用小时的处理方法
      return this.disableTime(this.state.disabledHours, 24);
    }
  }, {
    key: 'disabledMinutes',
    value: function disabledMinutes() {
      //禁用分钟数据
      return this.disableTime(this.state.disabledMinutes, 60);
    }
  }, {
    key: 'disabledSeconds',
    value: function disabledSeconds() {
      //禁用秒数据
      return this.disableTime(this.state.disabledSeconds, 60);
    }
  }, {
    key: 'disableTime',
    value: function disableTime(disValue, sum) {
      //禁用分钟和秒的处理方法
      var that = this;
      var looper = function looper(options) {
        var time = that.newArray(0, 60);
        if (options[1] < options[0]) {
          var filterOne = [],
              filterTwo = [];
          filterOne = time.splice(0, options[1] + 1);
          filterTwo = time.splice(options[0] - filterOne.length, sum - filterOne.length);
          return filterOne.concat(filterTwo);
        } else {
          return time.splice(options[0], options[1] + 1 - options[0]);
        }
      };

      if (disValue.limit == "open") {
        if (disValue.value[0] instanceof Array) {
          var result = [];
          for (var i = 0; i < disValue.value.length; i++) {
            var item = looper(disValue.value[i]);
            result = result.concat(item);
          }
          return result;
        } else {
          return looper(disValue.value);
        }
      } else {
        return [];
      }
    }
  }, {
    key: 'clearData',
    value: function clearData(e) {
      e.stopPropagation();
      this.setState({
        stateValue: ""
      });
      this.props.onChange && this.props.onChange("", true);
    }
  }, {
    key: 'onClose',
    value: function onClose(event) {
      var self = this;
      var area = this.refs.timePickerComponent;
      if (!area.contains(event.target) && (document.querySelector(".ant-time-picker-panel") ? !document.querySelector(".ant-time-picker-panel").contains(event.target) : true)) {
        self.setState({
          active: false
        });
        var dateTime = this.refs.timePickerComponent;
        if (!dateTime) return;
        var close = dateTime.querySelector(".time-picker__container-close");
        if (close && close.style) close.style.display = 'none';
        document.removeEventListener('mousedown', self.onClose);
        this.props.onClose && this.props.onClose(false);
      }
    }
  }, {
    key: 'inputActive',
    value: function inputActive() {
      var _props2 = this.props,
          disabled = _props2.disabled,
          readonly = _props2.readonly;

      if (disabled || readonly) return false;
      this.setState({ active: true });
      this.refs.timepicker1.refs.timepicker2.refs.picker.click();
      document.removeEventListener('mousedown', this.onClose);
      document.addEventListener('mousedown', this.onClose);
    }
  }, {
    key: 'headInputMouseOver',
    value: function headInputMouseOver(event) {
      var dom = (0, _reactDom.findDOMNode)(this.refs.timePickerClose);
      if (dom && dom.style.display == 'block') {
        return;
      } else {
        this.changeStyle(true, event);
      }
    }
  }, {
    key: 'headInputMouseOut',
    value: function headInputMouseOut(event) {
      var node = event.target;
      if (node.nodeName.toLowerCase() == 'i') {
        return;
      } else {
        this.changeStyle(false, event);
      }
    }
  }, {
    key: 'handleFocus',
    value: function handleFocus(event) {
      this.setState({ active: true });
      window.timePickerTarget = event.target.className.indexOf('u-icon') > -1 ? event.target.parentNode.previousSibling : event.target;
      this.props.onOpen && this.props.onOpen(true);
    }
  }, {
    key: 'handleBlur',
    value: function handleBlur(event) {
      this.setState({ active: false });
    }
  }, {
    key: 'changeStyle',
    value: function changeStyle(bool, event, special) {
      var dateTime = this.refs.timePickerComponent;
      if (!dateTime) return;
      var close = dateTime.querySelector(".time-picker__container-close");
      var dom = document.getElementsByClassName("ant-time-picker-panel")[0];
      var _props3 = this.props,
          readonly = _props3.readonly,
          disabled = _props3.disabled;
      var _state = this.state,
          stateValue = _state.stateValue,
          active = _state.active;

      var style = stateValue.length != 0 && !readonly && !disabled && (bool || dom && active) ? "block" : "none";
      if (!special && special != undefined) style = 'none';
      if (close && close.style) close.style.display = style;
    }
  }, {
    key: 'clearValue',
    value: function clearValue(e) {
      e.stopPropagation();
      this.setState({
        stateValue: ""
      });
      this.changeStyle(false, event, false);
      this.props.onChange && this.props.onChange("", true);
    }
  }, {
    key: 'render',
    value: function render() {
      var _props4 = this.props,
          hideDisabledOptions = _props4.hideDisabledOptions,
          size = _props4.size,
          defaultValue = _props4.defaultValue,
          value = _props4.value,
          format = _props4.format,
          disabled = _props4.disabled,
          readonly = _props4.readonly,
          hidden = _props4.hidden,
          errorStatus = _props4.errorStatus,
          errorMsg = _props4.errorMsg,
          helpMsg = _props4.helpMsg,
          showStatus = _props4.showStatus,
          title = _props4.title,
          required = _props4.required,
          isRange = _props4.isRange,
          placeholder = _props4.placeholder,
          hiddenTip = _props4.hiddenTip,
          sideTip = _props4.sideTip,
          open = _props4.open,
          lablePos = _props4.lablePos,
          lableTxt = _props4.lableTxt,
          translation = _props4.translation;
      var _state2 = this.state,
          active = _state2.active,
          stateValue = _state2.stateValue,
          showClose = _state2.showClose;

      var timeLabel = showStatus != 'search' && title && title.length > 0 ? _react2.default.createElement(_commonLabel2.default, this.props) : "";

      var errorMessage = "请填写正确信息",
          errorContent = void 0;

      if (errorStatus) {
        errorMessage = errorMsg.length > 0 ? errorMsg : errorMessage;
        errorContent = _react2.default.createElement(
          'span',
          { className: 'form-item__explain' },
          errorMsg
        );
      }
      var timeDisabled = disabled;
      var valueObj = value != undefined ? { value: stateValue } : {};
      if (hidden) {
        return _react2.default.createElement(
          'div',
          null,
          ' '
        );
      } else {
        var timePickerClass = (0, _classnames2.default)({
          'form-item__control': true,
          'form-item__control_is-active': errorStatus || active && !readonly,
          'form-item__control_has-info': errorStatus && errorMsg,
          'form-item__control_has-error': errorStatus,
          'form-item__control_is-readonly': readonly
        });
        return _react2.default.createElement(
          'div',
          { className: 'time-picker__container form-item ' + (helpMsg ? "form-item__help" : "") + (readonly ? 'time-picker-readonly' : '') },
          _react2.default.createElement(
            'div',
            { className: errorStatus ? 'base-input-error-label' : '' },
            timeLabel,
            _react2.default.createElement(
              'div',
              { ref: 'timePickerComponent', className: timePickerClass, onClick: this.inputActive, onMouseOver: this.headInputMouseOver,
                onMouseOut: this.headInputMouseOut },
              _react2.default.createElement(_TimePicker2.default, (0, _extends3.default)({ onChange: this.onChange,
                ref: 'timepicker1',
                size: size }, valueObj, {
                defaultValue: defaultValue,
                format: format,
                placeholder: placeholder,
                disabled: timeDisabled,
                readonly: readonly,
                required: required,
                onFocus: this.handleFocus,
                onBlur: this.handleBlur,
                open: open,
                lablePos: lablePos,
                inputActive: errorStatus || active,
                disabledHours: this.disabledHours,
                hideDisabledOptions: hideDisabledOptions,
                disabledMinutes: this.disabledMinutes,
                disabledSeconds: this.disabledSeconds,
                translation: translation
              })),
              !readonly ? _react2.default.createElement(
                'span',
                { className: 'form-item__right-icon' },
                _react2.default.createElement('i', { ref: 'timePickerClose', style: { "display": "none" }, className: 'u-icon sys-icon-close time-picker__container-close', onClick: this.clearValue }),
                _react2.default.createElement('i', { className: 'u-icon sys-icon-form-shijian', onClick: this.handleFocus })
              ) : null,
              errorContent
            )
          )
        );
      }
    }
  }]);
  return TimePointPicker;
}(_react.Component), _class.defaultProps = {
  hiddenTip: false,
  sideTip: false,
  // placeholder:"请选择",
  translation: defaultTransaltion
}, _temp);


module.exports = TimePointPicker;