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

vue-ant-patterns

'use strict';

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

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');

var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);

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

var _extends3 = _interopRequireDefault(_extends2);

var _vueTypes = require('ant-design-vue/lib/_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _propsUtil = require('ant-design-vue/lib/_util/props-util');

var _antDesignVue = require('ant-design-vue');

var _dContainer = require('../d-container');

var _dContainer2 = _interopRequireDefault(_dContainer);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _dIcon = require('../d-icon');

var _dIcon2 = _interopRequireDefault(_dIcon);

var _utils = require('../_utils');

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

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

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

  treeFilter: _vueTypes2['default'].bool.def(false),
  filterValue: _vueTypes2['default'].string
};

var SwitchTree = {
  name: 'DSwitchTree',
  props: (0, _extends3['default'])({}, 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 ((0, _propsUtil.hasProp)(this, 'openKeys')) {
      vOpenKeys = openKeys;
    } else if ((0, _propsUtil.hasProp)(this, 'defaultOpenKeys')) {
      vOpenKeys = defaultOpenKeys;
    }
    if ((0, _propsUtil.hasProp)(this, 'selectedKeys')) {
      vSelectedKeys = selectedKeys;
    } else if ((0, _propsUtil.hasProp)(this, 'defaultSelectedKeys')) {
      vSelectedKeys = defaultSelectedKeys;
    }

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

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

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

      this.menuData = (0, _utils.treeToList)(data);
      this.treeData = (0, _utils.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 = (0, _utils.relationHandler)(renderKey, item);
      var key = (0, _utils.relationHandler)(rel[0], item);
      var props = {
        key: key,
        attrs: {
          title: title,
          'data-id': key
        }
      };
      return h(
        MenuItem,
        props,
        [item.icon ? h(_dIcon2['default'], {
          attrs: { type: item.icon }
        }) : h(_dIcon2['default'], {
          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 = (0, _utils.relationHandler)(renderKey, it);
          var key = (0, _utils.relationHandler)(rel[0], it);
          var props = {
            key: key,
            attrs: {
              'data-id': key,
              'data-title': title
            }
          };
          return h(
            SubMenu,
            (0, _babelHelperVueJsxMergeProps2['default'])([props, on]),
            [h(
              'span',
              { slot: 'title' },
              [it.icon ? h(_dIcon2['default'], {
                attrs: { type: it.icon }
              }) : h(_dIcon2['default'], {
                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 = (0, _classnames2['default'])({
        // 'off-default-icon': !icon,
        'on-default-icon': !propsCheckble,
        'leaf-node': isLeaf,
        'no-select': selectable === false
      });
      var title = (0, _utils.relationHandler)(renderKey, item);

      if (treeFilter && filterValue && $scopedSlots && $scopedSlots.title) {
        title = $scopedSlots.title({ title: title });
      }
      var key = (0, _utils.relationHandler)(rel[0], item);
      var props = {
        key: key,
        props: {
          title: title,
          isLeaf: isLeaf,
          icon: function icon() {
            return _icon ? h(_dIcon2['default'], {
              attrs: { type: _icon }
            }) : h(_dIcon2['default'], {
              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 = (0, _extends3['default'])({}, evObj);
      }
      this.vOpenKeys = [].concat((0, _toConsumableArray3['default'])(expandedKeys));
      this.$emit('expand', (0, _extends3['default'])({ 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 = (0, _extends3['default'])({}, evObj, { key: evObj.node.eventKey });
        other.item = evObj.node;
        other.domEvent = evObj.nativeEvent;
        delete other.nativeEvent;
        delete other.node;
      } else {
        selectedKeys = args.selectedKeys;
        other = (0, _extends3['default'])({}, args, { selected: true });
      }
      this.vSelectedKeys = selectedKeys;
      this.$emit('selectChange', selectedKeys);
      this.$emit('select', (0, _extends3['default'])({ 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', (0, _extends3['default'])({}, 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((0, _toConsumableArray3['default'])(checkedKeys.checked || checkedKeys));
      this.$emit('check', { checkedKeys: checkedKeys, checked: checked, checkedNodes: checkedNodes, event: event, nativeEvent: nativeEvent, node: node });
      this.$emit('update:checkedKeys', [].concat((0, _toConsumableArray3['default'])(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: (0, _extends3['default'])({}, $listeners, {
        openChange: this.onExpand,
        select: this.onSelect
      }, menuEvent),
      ref: 'insRef'
    };

    var treeProps = {
      'class': (0, _classnames2['default'])((_cx = {}, (0, _defineProperty3['default'])(_cx, prefixCls, 1), (0, _defineProperty3['default'])(_cx, prefixCls + '-checkable', checkable), _cx)),
      props: {
        multiple: multiple,
        showLine: true,
        showIcon: true,
        defaultSelectedKeys: defaultSelectedKeys,
        defaultExpandedKeys: defaultOpenKeys ? [].concat((0, _toConsumableArray3['default'])(defaultOpenKeys)) : undefined,
        selectedKeys: vSelectedKeys,
        expandedKeys: vOpenKeys, // openKeys ? [...openKeys] : undefined,
        loadData: loadData,
        checkable: checkable,
        checkStrictly: checkStrictly,
        disabled: disabled,
        draggable: draggable,
        defaultCheckedKeys: vCheckedKeys,
        checkedKeys: vCheckedKeys
      },
      on: (0, _extends3['default'])({}, $listeners, {
        expand: this.onExpand,
        select: this.onSelect,
        check: this.onChecke
      }),
      scopedSlots: (0, _extends3['default'])({}, $scopedSlots),
      slots: (0, _extends3['default'])({}, $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 = (0, _classnames2['default'])({
      'overflow-x-auto': overflowXAuto,
      'overflow-y-auto': overflowYAuto
    });
    return h(
      _dContainer2['default'],
      { props: { grow: true, flex: true }, 'class': containerCls },
      [componentType === 'menu' ? h(
        _antDesignVue.Menu,
        (0, _babelHelperVueJsxMergeProps2['default'])([menuProps, {
          attrs: { inlineIndent: 12, mode: 'inline' }
        }]),
        [this.renderMenu()]
      ) : h(
        _antDesignVue.Tree,
        treeProps,
        [this.renderTree()]
      )]
    );
  }
};
SwitchTree.install = function (Vue) {
  Vue.component(SwitchTree.name, SwitchTree);
};
SwitchTree.defaultProps = SwitchTree;
exports['default'] = SwitchTree;
exports.switchTreeProps = switchTreeProps;