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

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

import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
import PropTypes from '../_util/vue-types';
import { isEmpty } from 'lodash';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import Dropdown from '../dropdown';
import Tree from '../tree';
import Tabs from '../tabs';
import TabPane from '../vc-tabs/src/TabPane';
import Scrollbar from '../scrollbar';
import TreeSelectInput from './TreeSelectInput';
import ResizeObserver from '../vc-resize-observer';

export default {
  name: 'IepTabTreeSelect',
  props: {
    replaceFields: PropTypes.object,
    data: PropTypes.array,
    placeholder: PropTypes.string
  },
  inject: {
    configProvider: { 'default': function _default() {
        return 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 (!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 (!isEmpty(item.data) && !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(_toConsumableArray(result), _toConsumableArray(_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 = !isEmpty(data) ? data.map(function (item, index) {
      return h(
        TabPane,
        { key: index, attrs: { tab: item.title, forceRender: true }
        },
        [h(
          'div',
          { 'class': prefixCls + '-tabs' },
          [h(
            'div',
            { 'class': prefixCls + '-tabs' },
            [h(
              Scrollbar,
              { 'class': prefixCls + '-scrollbar' },
              [h(Tree, {
                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(
      ResizeObserver,
      {
        on: {
          'resize': function resize(e) {
            _this4.updatePosition(e);
          }
        }
      },
      [h(
        'div',
        { 'class': prefixCls, ref: 'selectInput' },
        [h(
          Dropdown,
          dropdownProps,
          [h(TreeSelectInput, {
            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(
              Tabs,
              {
                on: {
                  'change': function change(e) {
                    return handleTabsChange(e);
                  }
                }
              },
              [tabVNodes]
            )]
          )]
        )]
      )]
    );
  }
};