vue-ant-patterns/es/d-header-menu/index.js

vue-ant-patterns

import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import _extends from 'babel-runtime/helpers/extends';
import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
import { Dropdown, Menu, Button } from 'ant-design-vue';
import IconButton from '../d-icon-button';
import Icon from '../d-icon';
import PropTypes from 'ant-design-vue/es/_util/vue-types';

var SubMenu = Menu.SubMenu;


function noop() {}
var LogoBox = {
  name: 'DHeaderMenu',
  props: {
    prefixCls: PropTypes.string.def('depot-header-menu'),
    menuList: PropTypes.array.def([]),
    defaultOpenKeys: PropTypes.array.def([]),
    defaultSelectedKeys: PropTypes.array.def([]),
    selectedKeys: PropTypes.array.def([]),
    overlayClassName: PropTypes.string.def(''),
    theme: PropTypes.string.def('dark'),
    renderKeys: PropTypes.object.def({})
    // isRoot: PropTypes.func,
  },
  model: {
    prop: 'selectedKeys',
    event: 'select'
  },
  data: function data() {
    var _$props = this.$props,
        selectedKeys = _$props.selectedKeys,
        defaultSelectedKeys = _$props.defaultSelectedKeys;

    return {
      vSelectedKeys: [].concat(_toConsumableArray(defaultSelectedKeys), _toConsumableArray(selectedKeys))
    };
  },

  watch: {
    selectedKeys: function selectedKeys(v) {
      this.vSelectedKeys = [].concat(_toConsumableArray(v || []));
    }
  },
  methods: {
    getMenuItem: function getMenuItem(menuList) {
      var h = this.$createElement;

      var _ = this;
      var prefixCls = this.prefixCls,
          renderKeys = this.renderKeys;

      var subMenuTitleClass = prefixCls + '-submenu-title';

      var title = renderKeys.title || 'name';
      var key = renderKeys.key || 'id';
      var url = renderKeys.url || 'url';
      var id = renderKeys.id || 'id';
      var parentId = renderKeys.parentId || 'parentId';
      var funcId = renderKeys.funcId || 'funcId';
      var icon = renderKeys.icon || 'icon';

      return menuList.map(function (it) {
        if (it.children && it.children.length) {
          return h(
            SubMenu,
            {
              key: it[key],
              attrs: { 'data-key': it[key],
                url: it[url],
                'func-id': it[funcId],
                'parent-id': it[parentId],
                disabled: !!it.disabled,
                title: it[title]
              }
            },
            [h(
              'span',
              { slot: 'title', 'class': subMenuTitleClass, attrs: { title: it[title] }
              },
              [it.icon ? h(Icon, {
                attrs: { type: it[icon] }
              }) : null, h(
                'span',
                { 'class': 'title-box' },
                [it[title]]
              )]
            ), _.getMenuItem(it.children)]
          );
        }
        return h(
          Menu.Item,
          {
            key: it[key],
            attrs: { 'data-key': it[key],
              title: it[title],
              url: it[url],
              'parent-id': it[parentId],
              'func-id': it[funcId],
              disabled: !!it.disabled
            }
          },
          [it[icon] ? h(Icon, {
            attrs: { type: it[icon] }
          }) : null, h(
            'span',
            { 'class': 'title-box' },
            [it[title]]
          )]
        );
      });
    },
    select: function select(_ref) {
      var item = _ref.item,
          key = _ref.key,
          selectedKeys = _ref.selectedKeys;

      this.vSelectedKeys = [].concat(_toConsumableArray(selectedKeys));
      this.$emit('select', { item: item, key: key, selectedKeys: selectedKeys });
    }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    var prefixCls = this.prefixCls,
        $listeners = this.$listeners,
        overlayClassName = this.overlayClassName,
        defaultOpenKeys = this.defaultOpenKeys,
        defaultSelectedKeys = this.defaultSelectedKeys,
        vSelectedKeys = this.vSelectedKeys,
        theme = this.theme;


    var overlayCls = ['logo-box-overlay', 'depot-header-dropdown', overlayClassName];
    var divProps = {
      'class': prefixCls
    };

    var menuProps = {
      props: {
        theme: theme,
        defaultOpenKeys: defaultOpenKeys,
        defaultSelectedKeys: defaultSelectedKeys,
        selectedKeys: vSelectedKeys,
        selectable: true
      },
      on: _extends({}, $listeners, {
        select: function select(arg) {
          _this.select(arg);
        },
        visibleChange: function visibleChange(visible) {
          _this.$emit('visibleChange', visible);
        }
      })
    };

    var dropDownProps = {
      'class': prefixCls,
      props: {
        // trigger: ['click'],
        overlayClassName: overlayCls.join(' ')
      },
      on: _extends({}, $listeners)
    };
    return h(
      'div',
      divProps,
      [h(
        Dropdown,
        dropDownProps,
        [h(IconButton, [h(Icon, {
          attrs: { type: 'menu' }
        })]), h(
          Menu,
          _mergeJSXProps([{ slot: 'overlay' }, menuProps]),
          [this.getMenuItem(this.menuList)]
        )]
      )]
    );
  }
};

LogoBox.install = function (Vue) {
  Vue.component(LogoBox.name, LogoBox);
};

export default LogoBox;