iep-ui/lib/iep-descriptions/IepDescriptions.js

An enterprise-class UI design language and Vue-based implementation

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

var _descriptionsTypes = require('./descriptionsTypes');

var _configConsumerProps = require('../config-provider/configConsumerProps');

var _lodash = require('lodash');

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

exports['default'] = {
  name: 'IepDescriptions',
  props: _descriptionsTypes.DescriptionsTypes,
  inject: {
    configProvider: { 'default': function _default() {
        return _configConsumerProps.ConfigConsumerProps;
      } }
  },
  methods: {
    getRowSpan: function getRowSpan(data) {
      var _this = this;

      var n = 0;
      data.forEach(function (item) {
        if ((0, _lodash.isEmpty)(item.children)) {
          return n;
        } else {
          n += item.children.length;
          _this.getRowSpan(item.children);
        }
      });
      return n;
    },
    renderTimetableItem: function renderTimetableItem(prefixCls, direction, data) {
      var _this2 = this;

      var h = this.$createElement;

      var result = [];
      data.forEach(function (item) {
        if (!item.children) {
          result.push(h(
            'div',
            { 'class': prefixCls + '-' + direction + '-header-item-cell' },
            [item.title]
          ));
        } else {
          var childrenVNodes = _this2.renderTimetableItem(prefixCls, direction, item.children);
          var itemVNodes = h(
            'div',
            { 'class': prefixCls + '-' + direction + '-header-item' },
            [h(
              'div',
              { 'class': prefixCls + '-' + direction + '-header-item-head' },
              [item.title]
            ), h(
              'div',
              { 'class': prefixCls + '-' + direction + '-header-item-body' },
              [childrenVNodes]
            )]
          );
          result.push(itemVNodes);
        }
      });
      return result;
    },
    getMaxFloor: function getMaxFloor(treeData) {
      var max = 0;
      function each(data, floor) {
        data.forEach(function (e) {
          e.floor = floor;
          if (floor > max) {
            max = floor;
          }
          if (e.children && e.children.length > 0) {
            each(e.children, floor + 1);
          }
        });
      }
      each(treeData, 0);
      return max;
    },
    renderTimetable: function renderTimetable(prefixCls) {
      var _this3 = this;

      var h = this.$createElement;
      var _$props = this.$props,
          columns = _$props.columns,
          direction = _$props.direction,
          verticalDataSource = _$props.verticalDataSource;

      var tempColumns = (0, _lodash.cloneDeep)(columns);
      tempColumns = tempColumns.map(function (item) {
        return item.children ? item : (0, _extends3['default'])({}, item, {
          children: []
        });
      });
      var rowMax = (0, _lodash.sortBy)(tempColumns, function (a) {
        return a.children;
      }).reverse();
      var childrenMaxItem = rowMax[0].children;
      var headerChildrenMaxItem = childrenMaxItem.map(function (item) {
        return item.children;
      }).flat();
      var keys = headerChildrenMaxItem.map(function (item) {
        return item.dataIndex;
      });
      var deep = this.getMaxFloor(tempColumns);
      var headerVNodes = h(
        'div',
        { 'class': prefixCls + '-' + direction + '-header' },
        [this.renderTimetableItem(prefixCls, direction, childrenMaxItem)]
      );

      var siderVNodes = rowMax.map(function (item, index) {
        return h(
          'div',
          {
            'class': prefixCls + '-' + direction + '-sider-item',
            style: {
              '--height': index === 0 ? deep * 40 + 'px' : '40px'
            }
          },
          [item.title]
        );
      });
      var VNodes = tempColumns.filter(function (item) {
        return item.dataIndex !== rowMax[0].dataIndex;
      }).reverse().map(function (item, index) {
        var bodyCellVNodes = keys.map(function (cKeys, cIndex) {
          var cItem = (0, _lodash.find)(headerChildrenMaxItem, function (e) {
            return e.dataIndex === cKeys;
          });
          var child = null;
          if (!(0, _lodash.isEmpty)(cItem) && cItem.customRender) {
            child = h('span', [cItem.customRender(verticalDataSource[item.dataIndex] && verticalDataSource[item.dataIndex][cKeys] ? verticalDataSource[item.dataIndex][cKeys] : null, verticalDataSource[item.dataIndex] || {}, cIndex)]);
          } else if (_this3.$scopedSlots[cKeys]) {
            child = h('span', [_this3.$scopedSlots[cKeys](verticalDataSource[item.dataIndex] && verticalDataSource[item.dataIndex][cKeys] ? verticalDataSource[item.dataIndex][cKeys] : '', verticalDataSource[item.dataIndex] || {}, cIndex)]);
          } else {
            child = h('span', [verticalDataSource[item.dataIndex] && verticalDataSource[item.dataIndex][cKeys] ? verticalDataSource[item.dataIndex][cKeys] : '--']);
          }

          return h(
            'div',
            { 'class': prefixCls + '-' + direction + '-body-cell' },
            [h('span', [child])]
          );
        });
        return h(
          'div',
          { 'class': prefixCls + '-' + direction + '-body-row' },
          [bodyCellVNodes]
        );
      });
      return h(
        'div',
        { 'class': prefixCls + '-' + direction },
        [h(
          'div',
          { 'class': prefixCls + '-' + direction + '-sider' },
          [siderVNodes]
        ), h(
          'div',
          { 'class': prefixCls + '-' + direction + '-layout' },
          [headerVNodes, h(
            'div',
            { 'class': prefixCls + '-' + direction + '-body' },
            [VNodes]
          )]
        )]
      );
    },
    renderVertical: function renderVertical(prefixCls) {
      var _this4 = this;

      var h = this.$createElement;
      var _$props2 = this.$props,
          columns = _$props2.columns,
          direction = _$props2.direction,
          verticalDataSource = _$props2.verticalDataSource,
          colSpan = _$props2.colSpan,
          labelWidth = _$props2.labelWidth;

      var tempColumns = (0, _lodash.chunk)(columns, colSpan > columns.length ? columns.length : colSpan);
      var finalColumns = !(0, _lodash.isEmpty)(tempColumns) ? tempColumns : [columns];
      var cellVNodes = finalColumns.map(function (item) {
        var itemVNodes = item.map(function (cItem, cIndex) {
          var child = null;
          if (cItem.customRender) {
            child = h(
              'span',
              { 'class': prefixCls + '-split-item-value-item' },
              [cItem.customRender(verticalDataSource[cItem.dataIndex] || '', verticalDataSource, cIndex)]
            );
          } else if (_this4.$scopedSlots[cItem.dataIndex]) {
            child = h(
              'span',
              { 'class': prefixCls + '-split-item-value-item' },
              [_this4.$scopedSlots[cItem.dataIndex](verticalDataSource[cItem.dataIndex] || '', verticalDataSource, cIndex)]
            );
          } else {
            child = h(
              'span',
              { 'class': prefixCls + '-split-item-value-item' },
              [verticalDataSource[cItem.dataIndex] || '--']
            );
          }

          return h(
            'div',
            { 'class': prefixCls + '-split-item', key: 'col_' + cItem.dataIndex + '_' + cIndex },
            [h(
              'div',
              {
                'class': prefixCls + '-split-item-label',
                style: {
                  '--width': parseInt(labelWidth) > 0 ? labelWidth + 'px' : 'none'
                }
              },
              [cItem.title]
            ), h(
              'div',
              { 'class': prefixCls + '-split-item-value' },
              [child]
            )]
          );
        });
        return h(
          'div',
          { 'class': prefixCls + '-split' },
          [itemVNodes]
        );
      });

      return h(
        'div',
        { 'class': prefixCls + '-' + direction },
        [cellVNodes]
      );
    },
    renderHorizontal: function renderHorizontal(prefixCls) {
      var _this5 = this;

      var h = this.$createElement;
      var _$props3 = this.$props,
          columns = _$props3.columns,
          direction = _$props3.direction,
          dataSource = _$props3.dataSource;

      var tableHeaderVNodes = columns.map(function (item) {
        var headerStyle = {
          '--align': item.align ? item.align !== 'center' ? 'flex-' + item.align : item.align : 'flex-left',
          '--flex': item.width && item.width > 0 ? '0 0 ' + item.width + 'px' : '1'
        };

        return h(
          'div',
          { 'class': prefixCls + '-header-item', key: item.dataIndex, style: headerStyle },
          [item.title]
        );
      });
      var tableFooterVNodes = dataSource.map(function (item, index) {
        var footerItemVNodes = columns.map(function (cItem) {
          var cellStyle = {
            '--align': cItem.align ? item.align !== 'center' ? 'flex-' + cItem.align : cItem.align : 'flex-left',
            '--flex': cItem.width && cItem.width > 0 ? '0 0 ' + cItem.width + 'px' : '1'
          };

          var child = null;
          if (cItem.customRender) {
            child = h(
              'span',
              { 'class': prefixCls + '-footer-cell-item-span' },
              [cItem.customRender(item[cItem.dataIndex] || '', item, index)]
            );
          } else if (_this5.$scopedSlots[cItem.dataIndex]) {
            child = h(
              'span',
              { 'class': prefixCls + '-footer-cell-item-span' },
              [_this5.$scopedSlots[cItem.dataIndex](item[cItem.dataIndex] || '', item, index)]
            );
          } else {
            child = h(
              'span',
              { 'class': prefixCls + '-footer-cell-item-span' },
              [item[cItem.dataIndex] || '--']
            );
          }

          return h(
            'div',
            {
              'class': prefixCls + '-footer-cell-item',
              style: cellStyle,
              key: 'col_' + cItem.dataIndex + '_' + index
            },
            [child]
          );
        });
        return h(
          'div',
          { 'class': prefixCls + '-footer-cell' },
          [footerItemVNodes]
        );
      });
      return h(
        'div',
        { 'class': prefixCls + '-' + direction },
        [h(
          'div',
          { 'class': prefixCls + '-header' },
          [tableHeaderVNodes]
        ), h(
          'div',
          { 'class': prefixCls + '-footer' },
          [tableFooterVNodes]
        )]
      );
    }
  },
  render: function render() {
    var h = arguments[0];
    var customizePrefixCls = this.prefixCls,
        $props = this.$props;
    var direction = $props.direction,
        bordered = $props.bordered;

    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('iep-descriptions', customizePrefixCls);
    var TableVNodes = '';
    switch (direction) {
      case 'horizontal':
        TableVNodes = this.renderHorizontal(prefixCls);
        break;
      case 'vertical':
        TableVNodes = this.renderVertical(prefixCls);
        break;
      case 'timetable':
        TableVNodes = this.renderTimetable(prefixCls);
        break;
    }

    return h(
      'div',
      { 'class': [prefixCls, bordered ? prefixCls + '-bordered' : ''] },
      [TableVNodes]
    );
  }
};