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

import "core-js/modules/es7.object.get-own-property-descriptors";
import "core-js/modules/es6.symbol";
import "core-js/modules/web.dom.iterable";
import "core-js/modules/es6.array.iterator";
import "core-js/modules/es6.object.to-string";
import "core-js/modules/es6.object.keys";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "core-js/modules/es6.regexp.split";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import React from 'react';
import MonthCalendar from './rc-calendar/lib/MonthCalendar';
import RcDatePicker from './rc-calendar/lib/Picker';
import GregorianCalendar from 'gregorian-calendar';
import classNames from 'classnames';
import { findDOMNode } from 'react-dom';
import ToolTip from "@beisen-platform/tool-tip";
import DateIcon from '@beisen-platform/react-icons/lib/icons/FormRiqi.js';
import createReactClass from '@beisen/create-react-class';
import uuid from 'uuid/v4';
export default function createPicker(TheCalendar) {
  return createReactClass({
    getInitialState: function getInitialState() {
      this.domId = uuid();
      return {
        value: this.props.parseDateFromValue(this.props.value || this.props.defaultValue),
        tabId: Math.random()
      };
    },
    componentDidMount: function componentDidMount() {
      this.setState({
        inputTarget: 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
        });
      }

      var dateValue = value ? props.getFormatter().format(value) : '';
      var timeValue = value && new Date(dateValue);

      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("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
      });
    },
    render: function render() {
      var _classNames,
          _this = this;

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

      var defaultCalendarValue = new GregorianCalendar(locale);
      defaultCalendarValue.setTime(Date.now());
      var placeholder = 'placeholder' in props ? props.placeholder : locale.lang.placeholder;
      var disabledTime = props.showTime ? props.disabledTime : null;
      var calendarClassName = classNames((_classNames = {}, _defineProperty(_classNames, 'ant-calendar-time', props.showTime), _defineProperty(_classNames, 'ant-calendar-month', MonthCalendar === 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 = React.createElement(TheCalendar, _extends({
        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: 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 = React.createElement("span", {
        onMouseUp: this.DateInputClick,
        className: "ant-calendar-picker-icon icon-form-riqi"
      }, React.createElement(DateIcon, null));

      if (props.showStatus == 'search') {
        icon = React.createElement("span", {
          className: "icon-label"
        });
        showClassName = 'date-time-search-status ';
      } // if(props.showStatus=='searchBtn'){
      //   icon = <span className='icon-label' />;
      //   showClassName = 'date-time-search-status ';
      // }
      // var showStatus = this.props.showStatus;


      var testClass = classNames({
        'ant-calendar-picker': true,
        'ant-calendar-picker_has-error': !props.disabled && this.props.errorStatus,
        'ant-calendar-picker-open': !props.disabled && (this.state.InputActive || this.props.errorStatus)
      });
      return React.createElement("span", {
        ref: "picker",
        id: this.domId,
        className: showClassName + testClass,
        style: _objectSpread({}, pickerStyle, {}, props.style)
      }, React.createElement(RcDatePicker, _extends({}, this.props, {
        logicContainerId: props.logicContainerId,
        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,
        inputTargetId: this.domId,
        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;
        // //TODO : showStatus这个状态是否可以移除了，不知道使用场景
        // if(showStatus=='searchBtn'){
        //   return (
        //     <span className='search-btn icon-gongzuorili'> <CalendarIcon /> </span>
        //   )
        // }else{
        return React.createElement("span", {
          style: {
            "width": "100%"
          }
        }, React.createElement(ToolTip, {
          title: value ? props.getFormatter().format(value) : ''
        }, React.createElement("div", {
          className: "date-time_is-hidden-tips"
        }, value ? props.getFormatter().format(value) : '')), React.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' : ''),
          style: props.removeSuffixIcon ? {
            maxWidth: '100%',
            width: '100%'
          } : null,
          "data-logtype": props.dateStyle == 'DatePicker' && !props.showTime ? 'click' : '',
          "data-loglabel": "DateTime-Show",
          "data-logcmpid": props.cmp_id //用于性能打点收集行为分析数据

        }), props.readonly || props.removeSuffixIcon ? null : icon); // }
      }));
    }
  });
}