@ttk/component/es/timeline/index.js

ttk组件库

import { _ as _extends } from '../extends-b1af4ff7.js';
import { _ as _defineProperty } from '../defineProperty-847730aa.js';
import React__default from 'react';
import { Timeline } from 'antd';
import classNames from 'classnames';
import { _ as _inherits, a as _getPrototypeOf, b as _possibleConstructorReturn, c as _classCallCheck, f as _typeof, d as _createClass } from '../getPrototypeOf-b95655c5.js';
import { _ as _objectWithoutProperties } from '../objectWithoutProperties-0c3c7796.js';
import Icon from '../icon';
import moment from 'moment';
import { is, fromJS } from 'immutable';
import '../_commonjsHelpers-471920d6.js';

var _excluded = ["handleSelectData"],
    _excluded2 = ["handleSelectData"],
    _excluded3 = ["handleSelectData"];

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(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var TimeLineComponent = /*#__PURE__*/function (_React$Component) {
  _inherits(TimeLineComponent, _React$Component);

  var _super = _createSuper(TimeLineComponent);

  function TimeLineComponent(_props) {
    var _this;

    _classCallCheck(this, TimeLineComponent);

    _this = _super.call(this, _props);

    _this.componentDidMount = function () {
      var _this$props = _this.props;
          _this$props.handleSelectData;
          var props = _objectWithoutProperties(_this$props, _excluded);

      _this.handleList(props); //this.setState(Object.assign({}, this.state, props), this.handleList)

    };

    _this.componentWillReceiveProps = function (nextProps) {
      nextProps.handleSelectData;
          var nprops = _objectWithoutProperties(nextProps, _excluded2);

      var _this$props2 = _this.props;
          _this$props2.handleSelectData;
          var tprops = _objectWithoutProperties(_this$props2, _excluded3);

      if (!is(fromJS(nprops), fromJS(tprops))) {
        _this.handleList(nprops); //this.setState(Object.assign({}, this.state, nprops), this.handleList)

      }
    };

    _this.handleList = function (props) {
      var stateObj = _objectSpread(_objectSpread({}, _this.state), props);

      var timeArr = [],
          startDate = stateObj.startDate,
          endDate = stateObj.endDate,
          currentDate = stateObj.currentDate,
          type = stateObj.type,
          enabledDate = stateObj.enabledDate,
          selectTimeData = stateObj.selectTimeData,
          queryData = stateObj.queryData,
          haveDataRang = stateObj.haveDataRang,
          maxEndDate = stateObj.maxEndDate,
          chargeNum = undefined; // 展示的内容

      if (type == 'month') {
        if (startDate && endDate) {
          var diffMonth = moment(endDate).diff(moment(startDate), 'month');
          if (diffMonth > 36) return null;

          if (startDate == endDate) {
            var year = moment(startDate).format('YYYY');
            var list = [+year - 1, +year, +year + 1];
            list.forEach(function (item) {
              timeArr.push({
                name: item,
                isTitle: true,
                id: item,
                value: item,
                isSelect: false
              });

              for (var i = 0; i < 12; i++) {
                var num = i < 9 ? '0' + (i + 1) : String(i + 1);
                timeArr.push({
                  name: item + '-' + num,
                  isTitle: false,
                  id: item + num,
                  value: num,
                  isSelect: false
                });
              }
            });
          } else {
            var beforeDate = moment(moment(startDate).subtract(Math.floor((36 - diffMonth) / 2), 'month')).format('YYYY-MM');

            for (var i = 0; i < 36; i++) {
              var time = moment(beforeDate).add(i + 1, 'month').format('YYYY-MM');
              var month = moment(time).month();

              var _year = moment(time).year();

              month = month < 9 ? '0' + (month + 1) : String(month + 1);

              if (month == 12) {
                timeArr.push({
                  name: time,
                  isTitle: false,
                  id: moment(time).format('YYYYMM'),
                  value: month,
                  isSelect: false
                });
                timeArr.push({
                  name: Number(_year) + 1,
                  isTitle: true,
                  id: Number(_year) + 1,
                  value: Number(_year) + 1,
                  isSelect: false
                });
              } else {
                timeArr.push({
                  name: time,
                  isTitle: false,
                  id: moment(time).format('YYYYMM'),
                  value: month,
                  isSelect: false
                });
              }
            }
          }
        } else {
          var _year2 = moment(currentDate).year();

          if (queryData) {
            _year2 = queryData.slice(0, 4);
          }

          var _list = [+_year2 - 1, +_year2, +_year2 + 1];

          _list.forEach(function (item) {
            timeArr.push({
              name: item,
              isTitle: true,
              id: item,
              value: item,
              isSelect: false
            });

            for (var _i = 0; _i < 12; _i++) {
              var num = _i < 9 ? '0' + (_i + 1) : String(_i + 1);
              timeArr.push({
                name: item + '-' + num,
                isTitle: false,
                id: item + num,
                value: num,
                isSelect: false
              });
            }
          });
        }
      } else if (type == 'quarter') {
        var _year3 = moment(currentDate).year();

        if (queryData) {
          _year3 = queryData.slice(0, 4);
        }

        var _list2 = [+_year3 - 1, +_year3, +_year3 + 1];

        _list2.forEach(function (item) {
          timeArr.push({
            name: item,
            isTitle: true,
            id: item,
            value: item,
            isSelect: false
          });

          for (var _i2 = 0; _i2 < 4; _i2++) {
            timeArr.push({
              name: "".concat(item, "\u5E74\u7B2C").concat(_i2 + 1, "\u5B63\u5EA6"),
              isTitle: false,
              id: item + '' + (_i2 + 1),
              value: "".concat(_i2 + 1, "\u5B63\u5EA6"),
              isSelect: false
            });
          }
        });
      } else if (type == 'halfYear') {
        var _year4 = moment(currentDate).year(); // let list = [+year-1, +year, +year+1]


        if (queryData) {
          _year4 = queryData.slice(0, 4);
        }

        var _list3 = [+_year4 - 2, +_year4 - 1, +_year4, +_year4 + 1, +_year4 + 2];

        _list3.forEach(function (item) {
          timeArr.push({
            name: item,
            isTitle: true,
            id: item,
            value: item
          });

          for (var _i3 = 0; _i3 < 2; _i3++) {
            var tip = _i3 % 2 == 0 ? '上半年' : '下半年';
            timeArr.push({
              name: "".concat(item, "\u5E74").concat(tip),
              isTitle: false,
              id: item + '' + (_i3 + 1),
              value: tip,
              isSelect: false
            });
          }
        });
      } //控制启用日期之前的不能选


      if (enabledDate) {
        timeArr.forEach(function (item, index) {
          item.disabled = false;
          var month = enabledDate.slice(4);
          var year = enabledDate.slice(0, 4);

          if (type == 'month') {
            if (Number(item.id) < Number(enabledDate)) {
              item.disabled = true;
            }

            if (startDate && endDate) {
              if (startDate == endDate) {
                if (item.name == startDate) {
                  item.isSelect = true;
                  chargeNum = index;
                }
              } else {
                if (item.name == startDate) {
                  chargeNum = index;
                }
              }
            }

            if (selectTimeData.length) {
              var obj = selectTimeData.find(function (ele) {
                var mon = ele.period < 10 ? "0".concat(ele.period) : ele.period + '';
                var date = ele.year + mon;
                if (date == item.id) return true;
              }); // if(obj) item.isHaveData = true //哪些有数据

              if (obj) {
                item.isHaveData = true; //哪些有数据(哪些是下拉选里的可选择的)
              } else {
                item.disabled = true; //（下拉选里没有的这里控制它不能选择）
              }

              var selectObj = selectTimeData.find(function (e) {
                return e.name == queryData;
              });

              if (selectObj) {
                var mon = selectObj.period < 10 ? "0".concat(selectObj.period) : selectObj.period + '';
                var date = selectObj.year + mon;

                if (item.id == date) {
                  item.isSelect = true;
                  chargeNum = index;
                }
              }
            }

            if (haveDataRang && +haveDataRang.minDataPeriod <= +item.id && item.id <= +haveDataRang.maxDataPeriod) {
              item.isHaveData = true;
            }

            if (maxEndDate && item.name > maxEndDate) item.disabled = true;
          } else {
            var fm = type == 'halfYear' ? 7 : 4;
            var quarter = parseInt(month / fm) + 1;

            if (Number(item.id) < Number('' + year + quarter)) {
              item.disabled = true;
            }

            if (selectTimeData.length) {
              var _obj = selectTimeData.find(function (ele) {
                return ele.name == item.name;
              }); // if(obj) item.isHaveData = true


              if (_obj) {
                item.isHaveData = true; //哪些有数据(哪些是下拉选里的可选择的)
              } else {
                item.disabled = true; //（下拉选里没有的这里控制它不能选择）
              }

              var _selectObj = selectTimeData.find(function (e) {
                return e.name == queryData;
              });

              if (_selectObj) {
                if (item.name == _selectObj.name) {
                  item.isSelect = true;
                  chargeNum = index;
                }
              }
            }
          }

          if (item.isTitle) {
            if (item.name < +year) {
              item.disabled = true;
            } else {
              item.disabled = false;
            }
          }
        });
      }

      _this.setState(_objectSpread(_objectSpread({}, stateObj), {}, {
        timeArr: timeArr
      }));

      _this.scrollTop(chargeNum);
    };

    _this.scrollTop = function (chargeNum) {
      if (_typeof(chargeNum) != undefined) {
        clearTimeout(_this.renderTime);
        _this.renderTime = setTimeout(function () {
          try {
            var domList = document.getElementsByClassName('ant-timeline-itemLi'),
                height = 0;

            for (var i in domList) {
              if (i < chargeNum + 1) {
                height += domList[i].offsetHeight;
              }
            }

            var leftLineDom = document.getElementsByClassName('mk-timeline-componentwrap')[0];
            leftLineDom.scrollTop = height - leftLineDom.offsetHeight / 2 + 10; //(当为选中状态时高度比较高所以为了更居中加10)

            leftLineDom = null;
          } catch (e) {}
        }, 10);
      }
    };

    _this.handleLiClick = function (currentLi) {
      if (currentLi.disabled) return;

      _this.handleList({
        queryData: currentLi.name,
        startDate: currentLi.name,
        endDate: currentLi.name
      }); // let { timeArr, type, enabledDate, startDate, endDate, selectTimeData, queryData, haveDataRang } = this.state, chargeNum = undefined
      // let newTimeArr = []
      // if (type == 'month') {
      //     let year = moment(currentLi.name).format('YYYY')
      //     let list = [+year - 1, +year, +year + 1]
      //     list.forEach(item => {
      //         newTimeArr.push({ name: item, isTitle: true, id: item, value: item, isSelect: false })
      //         for (let i = 0; i < 12; i++) {
      //             let num = i < 9 ? '0' + (i + 1) : String(i + 1)
      //             newTimeArr.push({ name: item + '-' + num, isTitle: false, id: item + num, value: num, isSelect: false })
      //         }
      //     })
      // } else if (type == 'quarter') {
      //     let year = moment(currentLi.name).year()
      //     let list = [+year - 1, +year, +year + 1]
      //     list.forEach(item => {
      //         timeArr.push({ name: item, isTitle: true, id: item, value: item, isSelect: false })
      //         for (let i = 0; i < 4; i++) {
      //             timeArr.push({ name: `${item}年第${i + 1}季度`, isTitle: false, id: item + '' + (i + 1), value: `${i + 1}季度`, isSelect: false })
      //         }
      //     })
      // } else if (type == 'halfYear') {
      //     let year = moment(currentLi.name).year()
      //     let list = [+year - 2, +year - 1, +year, +year + 1, +year + 2]
      //     list.forEach(item => {
      //         timeArr.push({ name: item, isTitle: true, id: item, value: item })
      //         for (let i = 0; i < 2; i++) {
      //             let tip = i % 2 == 0 ? '上半年' : '下半年'
      //             timeArr.push({ name: `${item}年${tip}`, isTitle: false, id: item + '' + (i + 1), value: tip, isSelect: false })
      //         }
      //     })
      // }
      // newTimeArr.forEach((item, index) => {
      //     if (item.id == currentLi.id) {
      //         item.isSelect = true
      //         chargeNum = index
      //     } else {
      //         item.isSelect = false
      //     }
      // })
      //控制启用日期之前的不能选
      // if (enabledDate) {
      //     newTimeArr.forEach((item, index) => {
      //         item.disabled = false
      //         let month = enabledDate.slice(4)
      //         let year = enabledDate.slice(0, 4)
      //         if (type == 'month') {
      //             if (Number(item.id) < Number(enabledDate)) {
      //                 item.disabled = true
      //             }
      //             if (startDate && endDate && startDate == endDate) {
      //                 if (item.name == startDate) {
      //                     item.isSelect = true
      //                     chargeNum = index
      //                 }
      //             }
      //             if (selectTimeData.length) {
      //                 let obj = selectTimeData.find(ele => {
      //                     let mon = ele.period < 10 ? `0${ele.period}` : ele.period + ''
      //                     let date = ele.year + mon
      //                     if (date == item.id) return true
      //                 })
      //                 // if(obj) item.isHaveData = true //哪些有数据
      //                 if (obj) {
      //                     item.isHaveData = true //哪些有数据(哪些是下拉选里的可选择的)
      //                 } else {
      //                     item.disabled = true //（下拉选里没有的这里控制它不能选择）
      //                 }
      //                 let selectObj = selectTimeData.find(e => e.name == queryData)
      //                 if (selectObj) {
      //                     let mon = selectObj.period < 10 ? `0${selectObj.period}` : selectObj.period + ''
      //                     let date = selectObj.year + mon
      //                     if (item.id == date) {
      //                         item.isSelect = true
      //                         chargeNum = index
      //                     }
      //                 }
      //                 // let mon = selectTimeData[0].period < 10 ? `0${selectTimeData[0].period}` : selectTimeData[0].period+''
      //                 // let date = selectTimeData[0].year + mon
      //                 // if(item.id == date) {
      //                 //     item.isSelect = true  
      //                 //     chargeNum = index
      //                 // }
      //             }
      //             if (haveDataRang && (+haveDataRang.minDataPeriod <= +item.id && item.id <= +haveDataRang.maxDataPeriod)) {
      //                 item.isHaveData = true
      //             }
      //         } else {
      //             let fm = type == 'halfYear' ? 7 : 4
      //             let quarter = parseInt(month / fm) + 1
      //             if (Number(item.id) < Number('' + year + quarter)) {
      //                 item.disabled = true
      //             }
      //             if (selectTimeData.length) {
      //                 let obj = selectTimeData.find(ele => ele.name == item.name)
      //                 // if(obj) item.isHaveData = true
      //                 if (obj) {
      //                     item.isHaveData = true //哪些有数据(哪些是下拉选里的可选择的)
      //                 } else {
      //                     item.disabled = true //（下拉选里没有的这里控制它不能选择）
      //                 }
      //                 // if(item.name == selectTimeData[0].name) {
      //                 //     item.isSelect = true
      //                 //     chargeNum = index
      //                 // }
      //                 let selectObj = selectTimeData.find(e => e.name == queryData)
      //                 if (selectObj) {
      //                     if (item.name == selectObj.name) {
      //                         item.isSelect = true
      //                         chargeNum = index
      //                     }
      //                 }
      //             }
      //         }
      //         if (item.isTitle) {
      //             if (item.name < +year) {
      //                 item.disabled = true
      //             } else {
      //                 item.disabled = false
      //             }
      //         }
      //     })
      // }
      // if (typeof chargeNum != undefined) {
      //     clearTimeout(this.renderTime)
      //     this.renderTime = setTimeout(() => {
      //         try {
      //             let domList = document.getElementsByClassName('ant-timeline-itemLi'),
      //                 height = 0
      //             for (let i in domList) {
      //                 if (i < chargeNum + 1) {
      //                     height += domList[i].offsetHeight
      //                 }
      //             }
      //             let leftLineDom = document.getElementsByClassName('mk-timeline-componentwrap')[0]
      //             leftLineDom.scrollTop = height - leftLineDom.offsetHeight / 2 + 10 //(当为选中状态时高度比较高所以为了更居中加10)
      //             leftLineDom = null
      //         } catch (e) {
      //         }
      //     }, 10)
      // }
      // this.setState({ timeArr: newTimeArr })
      //调查询接口


      _this.props.handleSelectData(currentLi.name);
    };

    _this.state = {
      type: 'month',
      //按什么查询
      endDate: '',
      //结束日期
      startDate: '',
      //开始日期
      disabled: '',
      //控制条件
      currentDate: moment().format('YYYY-MM'),
      //当前日期
      timeArr: [],
      //时间轴列表
      enabledDate: '',
      //企业启用期间
      selectTimeData: [],
      // 选择框内容
      queryData: '',
      //选择框所选的内容（查询条件）
      haveDataRang: null,
      //有数据的日期范围
      maxEndDate: '' //最大日期限制

    };
    return _this;
  }

  _createClass(TimeLineComponent, [{
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps, nextState) {
      return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState));
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$state = this.state,
          timeArr = _this$state.timeArr,
          type = _this$state.type,
          enabledDate = _this$state.enabledDate;

      if (timeArr.length) {
        return /*#__PURE__*/React__default.createElement("div", {
          className: "mk-timeline-componentwrap",
          style: {
            width: '80px'
          }
        }, /*#__PURE__*/React__default.createElement("ul", {
          className: "ulCss"
        }, /*#__PURE__*/React__default.createElement("li", {
          class: "ant-timeline-item ant-timeline-itemLi"
        }, /*#__PURE__*/React__default.createElement("div", {
          className: "ant-timeline-item-tail-title-head"
        })), timeArr.map(function (item) {
          if (item.isTitle) {
            return /*#__PURE__*/React__default.createElement("li", {
              key: item.name,
              class: item.disabled ? "ant-timeline-itemDis ant-timeline-itemLi" : "ant-timeline-item ant-timeline-itemLi"
            }, /*#__PURE__*/React__default.createElement("div", {
              className: "ant-timeline-item-tail-title"
            }), /*#__PURE__*/React__default.createElement("span", {
              className: "title"
            }, item.value), /*#__PURE__*/React__default.createElement(Icon, {
              type: "arrow-down"
            }));
          }

          return /*#__PURE__*/React__default.createElement("li", {
            key: item.name,
            class: item.disabled ? "ant-timeline-itemDis ant-timeline-itemLi" : "ant-timeline-item ant-timeline-itemLi",
            onClick: function onClick() {
              return _this2.handleLiClick(item);
            }
          }, /*#__PURE__*/React__default.createElement("div", {
            className: "ant-timeline-item-tail"
          }), type == 'month' && item.id == enabledDate ? /*#__PURE__*/React__default.createElement(Icon, {
            type: "qiyongriqi",
            fontFamily: "edficon",
            style: {
              fontSize: '16px',
              position: "absolute",
              top: '-3px',
              left: '-2px'
            },
            title: "\u542F\u7528\u65E5\u671F"
          }) : /*#__PURE__*/React__default.createElement("div", {
            className: item.isHaveData ? 'ant-timeline-item-head ant-timeline-item-head-blue' : 'ant-timeline-item-head',
            style: item.isSelect ? {
              display: 'none'
            } : {}
          }), /*#__PURE__*/React__default.createElement("div", {
            class: item.isSelect ? "ant-timeline-item-content ant-timeline-item-selectItem" : "ant-timeline-item-content",
            style: item.isSelect ? {
              width: '65px',
              padding: 0,
              textAlign: 'center'
            } : {}
          }, item.isSelect && type == 'month' ? item.name : item.value));
        })));
      } else {
        return null;
      }
    }
  }]);

  return TimeLineComponent;
}(React__default.Component);

function TimelineComponent(props) {
  var className = classNames(_defineProperty({
    'mk-timeline': true
  }, props.className, !!props.className));
  return /*#__PURE__*/React__default.createElement(Timeline, _extends({}, props, {
    className: className
  }));
}

TimelineComponent.Item = Timeline.Item;
TimelineComponent.TimeLineComponentGl = TimeLineComponent;

export { TimelineComponent as default };