@beisen/ethos/lib/date-time/createPicker.js

beisencloud pc react components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

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

var _extends3 = _interopRequireDefault(_extends2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

exports.default = createPicker;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _MonthCalendar = require('./rc-calendar/lib/MonthCalendar');

var _MonthCalendar2 = _interopRequireDefault(_MonthCalendar);

var _Picker = require('./rc-calendar/lib/Picker');

var _Picker2 = _interopRequireDefault(_Picker);

var _gregorianCalendar = require('gregorian-calendar');

var _gregorianCalendar2 = _interopRequireDefault(_gregorianCalendar);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

var _toolTip = require('../tool-tip');

var _toolTip2 = _interopRequireDefault(_toolTip);

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

function createPicker(TheCalendar) {
  return _react2.default.createClass({
    getInitialState: function getInitialState() {
      return {
        value: this.props.parseDateFromValue(this.props.value || this.props.defaultValue),
        tabId: Math.random(),
        pointerEvent: "auto",
        showHiddenTips: 'block',
        mouseTips: false
      };
    },
    componentDidMount: function componentDidMount() {
      this.setState({ inputTarget: (0, _reactDom.findDOMNode)(this.refs.picker) });
    },
    componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
      if (nextProps.value) {
        this.setState({
          value: nextProps.parseDateFromValue(nextProps.value)
        });
      } else {
        this.setState({
          value: ''
        });
      }
    },
    handleChange: function handleChange(value, isToday) {
      var props = this.props;
      if (!('value' in props)) {
        this.setState({ value: value });
      }
      if (props.format.indexOf('ss') < 0) {
        value.time -= value.fields[6] * 1000;
      }
      var timeValue = value ? new Date(value.getTime()) : null;
      var dateValue = value ? props.getFormatter().format(value) : '';

      if (!isToday && dateValue && this.props.timeValue && !window.timeChange && this.props.value.length == 0) {
        dateValue = dateValue.split(" ")[0] + ' ' + this.props.timeValue;
        timeValue = new Date(dateValue);
        //如果未改值直接点击确定按钮，将时分秒修改为传入值timeValue
      }
      props.onChange(timeValue, dateValue, isToday);
    },
    calendarOnKeyDown: function calendarOnKeyDown(e) {},
    clearShowInput: function clearShowInput() {},
    changeInput: function changeInput(val) {
      //同步input值
      this.setState({ value: val });
    },
    DateInputBlur: function DateInputBlur(e) {
      var self = this;
      if (e.target.className.indexOf("sys-icon-close") >= 0) {
        return;
      }
      var dom = document.getElementsByClassName("ant-calendar-picker-container")[0];
      if (!dom) {
        document.removeEventListener('mouseup', self.DateInputBlur);
        self.props.hiddenClose();
        self.setState({ InputActive: false });
      }
      var btn = e.target.className.indexOf("-btn") >= 0 && e.target.className.indexOf('-footer-btn') == -1;
      var month = e.target.className.indexOf("-panel-month") >= 0;
      var year = e.target.className.indexOf("-panel-year") >= 0;
      var date = e.target.className.indexOf("-date") >= 0;
      if (dom && dom.contains && (!dom.contains(e.target) || btn || year && this.props.type == "YearPicker" || month && this.props.type == "MonthPicker" || date && !this.props.showTime)) {
        self.setState({ InputActive: false });
        self.props.hiddenClose();
        document.removeEventListener('mouseup', self.DateInputBlur);
      }
    },
    onClear: function onClear() {
      this.props.onChange('');
    },
    DateInputClick: function DateInputClick() {
      var self = this;
      this.setState({ InputActive: true });
      document.removeEventListener('mouseup', self.DateInputBlur);
      document.addEventListener('mouseup', self.DateInputBlur);
    },
    handleFocus: function handleFocus() {
      this.setState({ InputActive: true });
    },
    onMouseTip: function onMouseTip() {
      var self = this;
      //解决点击输入框时光标错位，引起原因是输入框上有层div导致
      setTimeout(function () {
        self.setState({ mouseTips: true });
      }, 100);
    },
    tipsClick: function tipsClick() {
      this.setState({ pointerEvent: "none", showHiddenTips: 'none' });
    },
    handlerOut: function handlerOut(event) {
      this.setState({
        mouseTips: false
      });
      this.clearToolTipDom();
    },
    clearToolTipDom: function clearToolTipDom() {
      var dom_1 = document.getElementsByClassName('tooltip')[0];
      var dom_2 = document.getElementsByClassName('tooltip-arrow')[0];
      if (dom_1 && dom_2) {
        var parNode = dom_1.parentNode;
        parNode.removeChild(dom_1);
        parNode.removeChild(dom_2);
      }
    },
    render: function render() {
      var _classNames,
          _this = this;

      var props = this.props;
      var locale = props.locale;
      var _state = this.state,
          mouseTips = _state.mouseTips,
          pointerEvent = _state.pointerEvent,
          showHiddenTips = _state.showHiddenTips;
      // 以下两行代码
      // 给没有初始值的日期选择框提供本地化信息
      // 否则会以周日开始排

      var defaultCalendarValue = new _gregorianCalendar2.default(locale);
      defaultCalendarValue.setTime(Date.now());

      var placeholder = 'placeholder' in props ? props.placeholder : locale.lang.placeholder;

      var disabledTime = props.showTime ? props.disabledTime : null;

      var calendarClassName = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, 'ant-calendar-time', props.showTime), (0, _defineProperty3.default)(_classNames, 'ant-calendar-month', _MonthCalendar2.default === TheCalendar), _classNames));

      var pickerChangeHandler = {
        onChange: this.handleChange
      };

      var calendarHandler = {
        onOk: this.handleChange
      };

      if (props.showTime) {
        pickerChangeHandler.onChange = function (value) {
          // Click clear button
          if (value === null) {
            _this.handleChange(value);
          }
        };
      } else {
        calendarHandler = {};
      }

      var calendar = _react2.default.createElement(TheCalendar, (0, _extends3.default)({
        disabledDate: props.disabledDate,
        disabledTime: disabledTime,
        locale: locale.lang,
        lablePos: props.lablePos,
        timeValue: props.timeValue,
        type: props.type,
        onClear: this.onClear,
        yearPicker: props.yearPicker,
        timePicker: props.timePicker,
        changeInput: this.changeInput,
        defaultValue: defaultCalendarValue,
        dateInputPlaceholder: locale.lang.placeholder,
        onKeyDown: this.calendarOnKeyDown,
        clearShowInput: this.clearShowInput,
        clickDataTable: props.clickDataTable,
        prefixCls: 'ant-calendar',
        className: calendarClassName
      }, calendarHandler));

      // default width for showTime
      var pickerStyle = {};
      var showClassName = '',
          icon = _react2.default.createElement('span', { onMouseUp: this.DateInputClick, className: 'ant-calendar-picker-icon pc-sys-rili-svg' });

      if (props.showStatus == 'search') {
        icon = _react2.default.createElement('span', { className: 'icon-label' });
        showClassName = 'date-time-search-status ';
      }
      if (props.showStatus == 'searchBtn') {
        icon = _react2.default.createElement('span', { className: 'icon-label' });
        showClassName = 'date-time-search-status ';
      }
      var showStatus = this.props.showStatus;
      var testClass = (0, _classnames2.default)({
        'ant-calendar-picker': true,
        'ant-calendar-picker_has-error': !props.disabled && !props.disabled && this.props.errorStatus,
        'ant-calendar-picker-open': !props.disabled && !props.disabled && (this.state.InputActive || this.props.errorStatus)
      });
      return _react2.default.createElement(
        'span',
        { ref: 'picker', id: 'antInput', onMouseLeave: this.handlerOut, className: showClassName + testClass, style: (0, _extends3.default)({}, pickerStyle, props.style) },
        _react2.default.createElement(
          _Picker2.default,
          (0, _extends3.default)({}, this.props, {
            format: props.format,
            showTime: props.showTime //用于性能分析数据打点
            , dateStyle: props.dateStyle //用于性能分析数据打点
            , cmp_id: props.cmp_id //由于性能打点需要而添加
            , transitionName: props.transitionName,
            disabled: props.disabled,
            calendar: calendar,
            value: this.state.value,
            timeValue: props.timeValue,
            lablePos: props.lablePos,
            open: props.IsActive,
            inputTarget: this.state.inputTarget,
            popClose: this.popClose,
            prefixCls: 'ant-calendar-picker-container',
            style: props.popupStyle,
            align: props.align,
            showStatus: this.props.showStatus,
            getCalendarContainer: props.getCalendarContainer,
            onOpen: props.toggleOpen,
            changeInput: this.changeInput,
            onClose: props.toggleOpen
          }, pickerChangeHandler),
          function (_ref) {
            var value = _ref.value;

            if (showStatus == 'searchBtn') {
              return _react2.default.createElement('span', { className: 'search-btn sys-icon-gongzuorili' });
            } else {
              return _react2.default.createElement(
                'span',
                { style: { "width": "100%" } },
                mouseTips ? "" : _react2.default.createElement(
                  _toolTip2.default,
                  { title: value ? props.getFormatter().format(value) : '' },
                  _react2.default.createElement(
                    'div',
                    { className: 'date-time_is-hidden-tips', onMouseEnter: _this.onMouseTip, style: { pointerEvents: pointerEvent, display: showHiddenTips }, onClick: _this.tipsClick },
                    value ? props.getFormatter().format(value) : ''
                  )
                ),
                _react2.default.createElement('input', {
                  id: _this.state.tabId,
                  readOnly: props.disabled,
                  onMouseUp: _this.DateInputClick,
                  value: value ? props.getFormatter().format(value) : '',
                  placeholder: value ? '' : placeholder,
                  className: props.pickerInputClass + ' input-create-picker ' + (props.IsActive ? 'date-time__input_is-active' : ''),
                  'data-logtype': props.dateStyle == 'DatePicker' && !props.showTime ? 'click' : '',
                  'data-loglabel': 'DateTime-Show',
                  'data-logcmpid': props.cmp_id //用于性能打点收集行为分析数据
                }),
                !props.readonly ? icon : null
              );
            }
          }
        )
      );
    }
  });
}
module.exports = exports['default'];