vue-ant-patterns/es/d-switch-tree/index.js

vue-ant-patterns

import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import _extends from 'babel-runtime/helpers/extends';
import PropTypes from 'ant-design-vue/es/_util/vue-types';
import { hasProp } from 'ant-design-vue/es/_util/props-util';
import { Menu, Tree } from 'ant-design-vue';
import Container from '../d-container';
import cx from 'classnames';
import Icon from '../d-icon';
import { listToTree, treeToList, relationHandler } from '../_utils';

var TreeNode = Tree.TreeNode;
var MenuItem = Menu.Item;
var SubMenu = Menu.SubMenu;

var switchTreeProps = {
  componentType: PropTypes.oneOf(['tree', 'menu']).def('menu'),
  prefixCls: PropTypes.string.def('depot-switch-tree'),
  // 展示类型, 默认 list
  type: PropTypes.oneOf(['list', 'tree']).def('tree'),
  size: PropTypes.oneOf(['small', 'large', 'default']).def('default'),
  width: String,
  multiple: PropTypes.bool,
  checkable: PropTypes.bool.def(false),
  checkedKeys: PropTypes.array,
  checkStrictly: PropTypes.bool,
  defaultCheckedKeys: PropTypes.array,
  // 源数据
  dataSource: PropTypes.array.def([]),
  // 默认展开的项
  defaultOpenKeys: PropTypes.array,
  // 默认选中的项
  defaultSelectedKeys: PropTypes.array,
  openKeys: PropTypes.array,
  selectedKeys: PropTypes.array,
  // 将树禁用
  disabled: PropTypes.bool,
  // 设置节点可拖拽
  draggable: PropTypes.bool,
  overflowXAuto: PropTypes.bool,
  overflowYAuto: PropTypes.bool.def(true),
  // 唯一key, 对应传递进来数据中的 key
  // menu 类型 一般会用 id
  // componentType 内部自动生成 0-0-1
  // onlyKeyName: PropTypes.string.def('id'),
  // 描述关系的 key
  rel: PropTypes.array.def(['id', 'parentId']),
  // 用于展示的 key, 字符串或者数组
  renderKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).def('name'),
  loadData: PropTypes.func,

  treeFilter: PropTypes.bool.def(false),
  filterValue: PropTypes.string
};

var SwitchTree = {
  name: 'DSwitchTree',
  props: _extends({}, switchTreeProps),
  model: {
    prop: 'selectedKeys',
    event: 'selectChange'
  },
  mounted: function mounted() {},
  data: function data() {
    var _$props = this.$props,
        dataSource = _$props.dataSource,
        defaultOpenKeys = _$props.defaultOpenKeys,
        openKeys = _$props.openKeys,
        defaultSelectedKeys = _$props.defaultSelectedKeys,
        selectedKeys = _$props.selectedKeys,
        defaultCheckedKeys = _$props.defaultCheckedKeys,
        checkedKeys = _$props.checkedKeys,
        rel = _$props.rel;


    var vOpenKeys = [];
    var vSelectedKeys = [];
    var vCheckedKeys = [];
    if (hasProp(this, 'openKeys')) {
      vOpenKeys = openKeys;
    } else if (hasProp(this, 'defaultOpenKeys')) {
      vOpenKeys = defaultOpenKeys;
    }
    if (hasProp(this, 'selectedKeys')) {
      vSelectedKeys = selectedKeys;
    } else if (hasProp(this, 'defaultSelectedKeys')) {
      vSelectedKeys = defaultSelectedKeys;
    }

    if (hasProp(this, 'checkedKeys')) {
      vCheckedKeys = checkedKeys;
    } else if (hasProp(this, 'defaultCheckedKeys')) {
      vCheckedKeys = defaultCheckedKeys;
    }

    return {
      vSelectedKeys: vSelectedKeys,
      vOpenKeys: vOpenKeys,
      vCheckedKeys: vCheckedKeys,
      menuData: treeToList(dataSource),
      treeData: listToTree(dataSource, {}, rel)
    };
  },

  watch: {
    dataSource: function dataSource(data) {
      var rel = this.$props.rel;

      this.menuData = treeToList(data);
      this.treeData = listToTree(data, {}, rel);
    },
    selectedKeys: function selectedKeys(_selectedKeys) {
      this.vSelectedKeys = _selectedKeys;
    },
    openKeys: function openKeys(vOpenKeys) {
      this.vOpenKeys = vOpenKeys;
    },
    checkedKeys: function checkedKeys(vCheckedKeys) {
      this.vCheckedKeys = vCheckedKeys;
    }
  },
  methods: {
    renderItiem: function renderItiem(item) {
      var h = this.$createElement;
      var rel = this.$props.rel;
      var renderKey = this.renderKey;

      var title = relationHandler(renderKey, item);
      var key = relationHandler(rel[0], item);
      var props = {
        key: key,
        attrs: {
          title: title,
          'data-id': key
        }
      };
      return h(
        MenuItem,
        props,
        [item.icon ? h(Icon, {
          attrs: { type: item.icon }
        }) : h(Icon, {
          attrs: { type: 'file' }
        }), title]
      );
    },
    renderSubMenu: function renderSubMenu() {},
    renderMenu: function renderMenu(data) {
      var _this = this;

      var h = this.$createElement;
      var menuData = this.menuData,
          renderKey = this.renderKey,
          treeData = this.treeData,
          type = this.type,
          rel = this.rel;

      var dataList = data || (type === 'list' ? menuData : treeData);

      if (type === 'list') {
        return menuData.map(function (it) {
          return _this.renderItiem(it);
        });
      }
      var on = {
        on: {
          titleClick: function titleClick(arg) {
            _this.$emit('subMenuClcik', arg);
          }
        }
      };
      return dataList.map(function (it) {
        if (it.children) {
          var title = relationHandler(renderKey, it);
          var key = relationHandler(rel[0], it);
          var props = {
            key: key,
            attrs: {
              'data-id': key,
              'data-title': title
            }
          };
          return h(
            SubMenu,
            _mergeJSXProps([props, on]),
            [h(
              'span',
              { slot: 'title' },
              [it.icon ? h(Icon, {
                attrs: { type: it.icon }
              }) : h(Icon, {
                attrs: { type: 'file' }
              }), h(
                'span',
                {
                  attrs: { title: title }
                },
                [title]
              )]
            ), _this.renderMenu(it.children)]
          );
        }
        return _this.renderItiem(it);
      });
    },
    renderTreeItem: function renderTreeItem(item) {
      var _this2 = this;

      var h = this.$createElement;
      var $scopedSlots = this.$scopedSlots,
          $slots = this.$slots,
          renderKey = this.renderKey,
          rel = this.rel,
          propsCheckble = this.checkable,
          treeFilter = this.treeFilter,
          filterValue = this.filterValue;
      var children = item.children,
          _icon = item.icon,
          disabled = item.disabled,
          pathCode = item.pathCode,
          isLeaf = item.isLeaf,
          selectable = item.selectable,
          checkable = item.checkable;

      var cls = cx({
        // 'off-default-icon': !icon,
        'on-default-icon': !propsCheckble,
        'leaf-node': isLeaf,
        'no-select': selectable === false
      });
      var title = relationHandler(renderKey, item);

      if (treeFilter && filterValue && $scopedSlots && $scopedSlots.title) {
        title = $scopedSlots.title({ title: title });
      }
      var key = relationHandler(rel[0], item);
      var props = {
        key: key,
        props: {
          title: title,
          isLeaf: isLeaf,
          icon: function icon() {
            return _icon ? h(Icon, {
              attrs: { type: _icon }
            }) : h(Icon, {
              attrs: { type: 'appstore' }
            });
          },
          disabled: disabled,
          selectable: selectable,
          checkable: checkable,
          dataRef: item
        },
        attrs: {
          dataId: key,
          dataPath: pathCode
        },
        'class': cls
      };

      return h(
        TreeNode,
        props,
        [children && children.length ? children.map(function (it) {
          return _this2.renderTreeItem(it);
        }) : null]
      );
    },
    renderTree: function renderTree() {
      var _this3 = this;

      var dataSource = this.dataSource;

      return dataSource.map(function (item) {
        return _this3.renderTreeItem(item);
      });
    },
    onExpand: function onExpand(args, evObj) {
      var componentType = this.$props.componentType;


      var expandedKeys = args;
      var other = {};
      if (componentType === 'tree') {
        other = _extends({}, evObj);
      }
      this.vOpenKeys = [].concat(_toConsumableArray(expandedKeys));
      this.$emit('expand', _extends({ expandedKeys: expandedKeys }, other, { componentType: componentType }));
      this.$emit('update:openKeys', expandedKeys);
    },
    onSelect: function onSelect(args, evObj) {
      var componentType = this.$props.componentType;

      var selectedKeys = [];
      var other = {};
      if (componentType === 'tree') {
        selectedKeys = args;
        other = _extends({}, evObj, { key: evObj.node.eventKey });
        other.item = evObj.node;
        other.domEvent = evObj.nativeEvent;
        delete other.nativeEvent;
        delete other.node;
      } else {
        selectedKeys = args.selectedKeys;
        other = _extends({}, args, { selected: true });
      }
      this.vSelectedKeys = selectedKeys;
      this.$emit('selectChange', selectedKeys);
      this.$emit('select', _extends({ selectedKeys: selectedKeys }, other, { componentType: componentType }));
    },
    onDeselect: function onDeselect(args) {
      var componentType = this.$props.componentType;
      var selectedKeys = args.selectedKeys;

      this.vSelectedKeys = selectedKeys;
      this.$emit('selectChange', selectedKeys);
      this.$emit('select', _extends({}, args, { selected: false, componentType: componentType }));
    },
    onChecke: function onChecke(checkedKeys, _ref) {
      var checked = _ref.checked,
          checkedNodes = _ref.checkedNodes,
          event = _ref.event,
          nativeEvent = _ref.nativeEvent,
          node = _ref.node;

      this.vCheckedKeys = [].concat(_toConsumableArray(checkedKeys.checked || checkedKeys));
      this.$emit('check', { checkedKeys: checkedKeys, checked: checked, checkedNodes: checkedNodes, event: event, nativeEvent: nativeEvent, node: node });
      this.$emit('update:checkedKeys', [].concat(_toConsumableArray(checkedKeys.checked || checkedKeys)));
    }
  },
  render: function render() {
    var _cx;

    var h = arguments[0];
    var prefixCls = this.prefixCls,
        vSelectedKeys = this.vSelectedKeys,
        vOpenKeys = this.vOpenKeys,
        multiple = this.multiple,
        checkable = this.checkable,
        checkStrictly = this.checkStrictly,
        vCheckedKeys = this.vCheckedKeys,
        defaultOpenKeys = this.defaultOpenKeys,
        defaultSelectedKeys = this.defaultSelectedKeys,
        componentType = this.componentType,
        loadData = this.loadData,
        disabled = this.disabled,
        draggable = this.draggable,
        overflowXAuto = this.overflowXAuto,
        overflowYAuto = this.overflowYAuto,
        $listeners = this.$listeners,
        $scopedSlots = this.$scopedSlots,
        $slots = this.$slots;

    var menuEvent = {};

    if (multiple && componentType === 'menu') {
      menuEvent.deselect = this.onDeselect;
    }
    var menuProps = {
      'class': prefixCls,
      props: {
        multiple: multiple,
        defaultOpenKeys: defaultOpenKeys,
        defaultSelectedKeys: defaultSelectedKeys,
        openKeys: vOpenKeys,
        selectedKeys: vSelectedKeys
      },
      on: _extends({}, $listeners, {
        openChange: this.onExpand,
        select: this.onSelect
      }, menuEvent),
      ref: 'insRef'
    };

    var treeProps = {
      'class': cx((_cx = {}, _defineProperty(_cx, prefixCls, 1), _defineProperty(_cx, prefixCls + '-checkable', checkable), _cx)),
      props: {
        multiple: multiple,
        showLine: true,
        showIcon: true,
        defaultSelectedKeys: defaultSelectedKeys,
        defaultExpandedKeys: defaultOpenKeys ? [].concat(_toConsumableArray(defaultOpenKeys)) : undefined,
        selectedKeys: vSelectedKeys,
        expandedKeys: vOpenKeys, // openKeys ? [...openKeys] : undefined,
        loadData: loadData,
        checkable: checkable,
        checkStrictly: checkStrictly,
        disabled: disabled,
        draggable: draggable,
        defaultCheckedKeys: vCheckedKeys,
        checkedKeys: vCheckedKeys
      },
      on: _extends({}, $listeners, {
        expand: this.onExpand,
        select: this.onSelect,
        check: this.onChecke
      }),
      scopedSlots: _extends({}, $scopedSlots),
      slots: _extends({}, $slots),
      ref: 'insRef'
    };
    /* 
      如果未传递 selectedKeys openKeys
      则不在向下传递这两个受控属性
    */
    // if (!hasProp(this, 'selectedKeys')) {
    //   delete menuProps.props.selectedKeys;
    //   delete treeProps.props.selectedKeys;
    // }

    // if (!hasProp(this, 'openKeys')) {
    //   delete menuProps.props.openKeys;
    //   delete treeProps.props.expandedKeys;
    // }
    var containerCls = cx({
      'overflow-x-auto': overflowXAuto,
      'overflow-y-auto': overflowYAuto
    });
    return h(
      Container,
      { props: { grow: true, flex: true }, 'class': containerCls },
      [componentType === 'menu' ? h(
        Menu,
        _mergeJSXProps([menuProps, {
          attrs: { inlineIndent: 12, mode: 'inline' }
        }]),
        [this.renderMenu()]
      ) : h(
        Tree,
        treeProps,
        [this.renderTree()]
      )]
    );
  }
};
SwitchTree.install = function (Vue) {
  Vue.component(SwitchTree.name, SwitchTree);
};
SwitchTree.defaultProps = SwitchTree;
export default SwitchTree;
export { switchTreeProps };