iep-ui/lib/iep-tab-tree-select/IepTabTreeSelect.js

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

'use strict';

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

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _vueTypes = require('../_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _lodash = require('lodash');

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

var _dropdown = require('../dropdown');

var _dropdown2 = _interopRequireDefault(_dropdown);

var _tree = require('../tree');

var _tree2 = _interopRequireDefault(_tree);

var _tabs = require('../tabs');

var _tabs2 = _interopRequireDefault(_tabs);

var _TabPane = require('../vc-tabs/src/TabPane');

var _TabPane2 = _interopRequireDefault(_TabPane);

var _scrollbar = require('../scrollbar');

var _scrollbar2 = _interopRequireDefault(_scrollbar);

var _TreeSelectInput = require('./TreeSelectInput');

var _TreeSelectInput2 = _interopRequireDefault(_TreeSelectInput);

var _vcResizeObserver = require('../vc-resize-observer');

var _vcResizeObserver2 = _interopRequireDefault(_vcResizeObserver);

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

exports['default'] = {
  name: 'IepTabTreeSelect',
  props: {
    replaceFields: _vueTypes2['default'].object,
    data: _vueTypes2['default'].array,
    placeholder: _vueTypes2['default'].string
  },
  inject: {
    configProvider: { 'default': function _default() {
        return _configConsumerProps.ConfigConsumerProps;
      } }
  },
  data: function data() {
    this._checkedKeys = {};
    this._checkedNodes = {};
    return {
      visible: false,
      tabsDisabled: false,
      activeKey: 0,
      checkedKeys: [],
      checkedNodes: [],
      title: undefined
    };
  },

  watch: {
    data: {
      handler: function handler(e) {
        var _this = this;

        this._checkedKeys = {};
        this._checkedNodes = {};
        e.forEach(function (item, index) {
          _this._checkedKeys[index] = item.value || [];
        });
        this.checkedKeys = e[0].value || [];
        if (!(0, _lodash.isEmpty)(e)) {
          var key = this.$props.replaceFields ? this.$props.replaceFields.key : 'key';
          var title = this.$props.replaceFields ? this.$props.replaceFields.title : 'title';
          e.forEach(function (item, index) {
            if (!(0, _lodash.isEmpty)(item.data) && !(0, _lodash.isEmpty)(item.value)) {
              _this._checkedNodes[index] = _this.polymerizeNodes(item.data, item.value, key, title);
            }
          });
          this.checkedNodes = Object.values(this._checkedNodes);
        }
      },

      immediate: true
    }
  },
  methods: {
    polymerizeNodes: function polymerizeNodes(e, value, key, title) {
      var _this2 = this;

      var result = [];
      e.forEach(function (item) {
        if (item[key] && value.includes(item[key])) {
          result.push({
            key: item[key],
            title: item[title]
          });
        }
        if (item.children) {
          result = [].concat((0, _toConsumableArray3['default'])(result), (0, _toConsumableArray3['default'])(_this2.polymerizeNodes(item.children, value, key, title)));
        }
      });
      return result;
    },
    handleClose: function handleClose(e) {
      var _this3 = this;

      var index = this.checkedKeys.findIndex(function (c) {
        return c === e.key;
      });
      if (index > -1) {
        this.checkedKeys.splice(index, 1);
      }
      Object.keys(this._checkedKeys).forEach(function (item) {
        var cacheNodeIndex = _this3._checkedKeys[item].findIndex(function (c) {
          return c.key === e.key;
        });
        if (cacheNodeIndex > -1) {
          _this3._checkedKeys[item].splice(cacheNodeIndex, 1);
        }
      });

      Object.keys(this._checkedNodes).forEach(function (item) {
        var cacheNodeIndex = _this3._checkedNodes[item].findIndex(function (c) {
          return c.key === e.key;
        });
        if (cacheNodeIndex > -1) {
          _this3._checkedNodes[item].splice(cacheNodeIndex, 1);
        }
      });
      this.checkedNodes = Object.values(this._checkedNodes);
    },
    updatePosition: function updatePosition(e) {
      if (this.$refs.tabTreeSelectDropdown && this.$refs.tabTreeSelectDropdown.parentNode) {
        this.$refs.tabTreeSelectDropdown.parentNode.style.top = e.height + 4 + 'px';
        this.$refs.tabTreeSelectDropdown.parentNode.style.minWidth = e.width + 'px';
      }
    },
    handleDropdown: function handleDropdown(e) {
      this.visible = e;
      this.$emit('change', {
        nodes: this._checkedNodes,
        keys: this._checkedKeys
      });
    },
    handleTabsChange: function handleTabsChange(e) {
      this.activeKey = e;
      this.checkedKeys = this._checkedKeys[e];
    },
    handleTreeChange: function handleTreeChange(checkedKeys, e) {
      var checkedNodesPositions = e.checkedNodesPositions;

      var keys = checkedNodesPositions.filter(function (e) {
        return !e.isHaveChildren;
      }).map(function (item) {
        return item.nodeKey;
      });
      var checkedNodes = checkedNodesPositions.filter(function (e) {
        return !e.isHaveChildren;
      }).map(function (e) {
        return {
          key: e.nodeKey,
          title: e.nodeTitle
        };
      });
      this.checkedKeys = keys;
      this._checkedKeys[this.activeKey] = keys;
      this._checkedNodes[this.activeKey] = checkedNodes;
      this.checkedNodes = Object.values(this._checkedNodes);
    }
  },
  render: function render() {
    var _this4 = this;

    var h = arguments[0];
    var customizePrefixCls = this.prefixCls,
        visible = this.visible,
        handleDropdown = this.handleDropdown,
        data = this.data,
        replaceFields = this.replaceFields,
        handleTabsChange = this.handleTabsChange,
        checkedKeys = this.checkedKeys,
        handleTreeChange = this.handleTreeChange,
        checkedNodes = this.checkedNodes,
        placeholder = this.placeholder,
        handleClose = this.handleClose;


    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('iep-tab-treeselect', customizePrefixCls);

    var dropdownProps = {
      props: {
        trigger: ['click'],
        visible: visible
        // getPopupContainer: () => this.$el,
      },
      on: {
        visibleChange: function visibleChange(e) {
          return handleDropdown(e);
        }
      }
    };
    var tabVNodes = !(0, _lodash.isEmpty)(data) ? data.map(function (item, index) {
      return h(
        _TabPane2['default'],
        { key: index, attrs: { tab: item.title, forceRender: true }
        },
        [h(
          'div',
          { 'class': prefixCls + '-tabs' },
          [h(
            'div',
            { 'class': prefixCls + '-tabs' },
            [h(
              _scrollbar2['default'],
              { 'class': prefixCls + '-scrollbar' },
              [h(_tree2['default'], {
                attrs: {
                  multiple: true,
                  flatNodes: true,
                  checkedKeys: checkedKeys,
                  checkable: true,
                  'replace-fields': replaceFields,
                  'tree-data': item.data
                },
                on: {
                  'check': function check(selectedKeys, e) {
                    return handleTreeChange(selectedKeys, e);
                  }
                }
              })]
            )]
          )]
        )]
      );
    }) : null;

    return h(
      _vcResizeObserver2['default'],
      {
        on: {
          'resize': function resize(e) {
            _this4.updatePosition(e);
          }
        }
      },
      [h(
        'div',
        { 'class': prefixCls, ref: 'selectInput' },
        [h(
          _dropdown2['default'],
          dropdownProps,
          [h(_TreeSelectInput2['default'], {
            attrs: {
              active: visible,
              prefix: prefixCls,

              select: checkedNodes,
              placeholder: placeholder
            },
            on: {
              'close': function close(e) {
                return handleClose(e);
              }
            }
          }), h(
            'div',
            { 'class': prefixCls + '-wrapper', slot: 'overlay', ref: 'tabTreeSelectDropdown' },
            [h(
              _tabs2['default'],
              {
                on: {
                  'change': function change(e) {
                    return handleTabsChange(e);
                  }
                }
              },
              [tabVNodes]
            )]
          )]
        )]
      )]
    );
  }
};