@meve/ui/es/menu-item-group/index.js

Argon design system components library

import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _extends from "@babel/runtime/helpers/esm/extends";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import Icon from '../icon';
import Ripple from '../ripple';
import { isFunction, isPlainObject, isString } from '../utils/shared';
import { createNamespace } from '../utils/create';
import { createChildrenMixin, createParentMixin } from '../utils/mixins/relation';
import { doubleRaf, toPxNum } from '../utils/elements';
import { nextTick } from '../utils/components';
import { props } from './props';




var _createNamespace = createNamespace('menu-item-group'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var MenuItemGroupPlugin = createComponent({
  mixins: [createChildrenMixin('menu', {
    parentKey: 'menuParent',
    childrenKey: 'menuItemGroups'
  }), createParentMixin('menuItemGroup', {
    childrenKey: 'menuItemGroups'
  }), createChildrenMixin('menuItemGroup', {
    parentKey: 'menuItemGroupParent',
    childrenKey: 'menuItemGroups'
  }), createParentMixin('menuItemGroup', {
    childrenKey: 'menuItems'
  })],
  directives: {
    Ripple: Ripple
  },
  props: props,
  data: function data() {
    return {
      expanded: false,
      listHeight: 0,
      level: 0
    };
  },
  mounted: function mounted() {
    this.updateLevel();
  },
  updated: function updated() {
    this.updateLevel();
  },
  methods: {
    renderIcon: function renderIcon() {
      var h = this.$createElement;

      if (this.hasSlots('icon')) {
        return this.slots('icon');
      }

      var icon = this.icon;

      if (isFunction(icon)) {
        return icon(this.$createElement);
      }

      if (isPlainObject(icon)) {
        return h(Icon, {
          "class": namespace('__icon'),
          "attrs": {
            "menu-item-group-cover": true
          },
          "props": _extends({}, icon)
        });
      }

      if (isString(icon)) {
        return h(Icon, {
          "class": namespace('__icon'),
          "attrs": {
            "menu-item-group-cover": true,
            "name": icon
          }
        });
      }
    },
    renderLabel: function renderLabel() {
      var h = this.$createElement;

      if (this.hasSlots('label')) {
        return this.slots('label');
      }

      var label = this.label;

      if (isFunction(label)) {
        return label(this.$createElement);
      }

      return h("div", {
        "class": namespace('__label')
      }, [label]);
    },
    handleClick: function handleClick() {
      if (this.disabled) {
        return;
      }

      this.menuParent.onGroupChange(this);
    },
    reduce: function reduce() {
      if (!this.expanded) {
        return;
      }

      this.menuItemGroups.forEach(function (child) {
        return child.reduce();
      });
      this.expanded = false;
      this.syncParentHeight(this.menuItemGroupParent, -this.listHeight);
      this.listHeight = 0;
    },
    syncParentHeight: function syncParentHeight(parent, height) {
      if (parent) {
        parent.listHeight += height;
        this.syncParentHeight(parent.menuItemGroupParent, height);
      }
    },
    expand: function expand() {
      var _this = this;

      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                if (!_this.expanded) {
                  _context.next = 2;
                  break;
                }

                return _context.abrupt("return");

              case 2:
                if (!_this.menuItemGroupParent) {
                  _context.next = 5;
                  break;
                }

                _context.next = 5;
                return _this.menuItemGroupParent.expand();

              case 5:
                _this.expanded = true;
                _context.next = 8;
                return _this.tickExpandAnimation();

              case 8:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }))();
    },
    tickExpandAnimation: function tickExpandAnimation() {
      var _this2 = this;

      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
        var _this2$$refs$list$off, _this2$$refs$list;

        var listHeight;
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                _this2.listHeight = -1;
                _context2.next = 3;
                return nextTick();

              case 3:
                listHeight = (_this2$$refs$list$off = (_this2$$refs$list = _this2.$refs.list) == null ? void 0 : _this2$$refs$list.offsetHeight) != null ? _this2$$refs$list$off : 0;
                _this2.listHeight = 0;
                _context2.next = 7;
                return doubleRaf();

              case 7:
                _this2.listHeight = listHeight;

                _this2.syncParentHeight(_this2.menuItemGroupParent, listHeight);

              case 9:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2);
      }))();
    },
    updateLevel: function updateLevel() {
      var level = 0;
      var groupParent = this.menuItemGroupParent;

      while (groupParent) {
        level++;
        groupParent = groupParent.menuItemGroupParent;
      }

      this.level = level;
    }
  },
  render: function render() {
    var _this3 = this;

    var h = arguments[0];
    var disabled = this.disabled,
        listHeight = this.listHeight,
        expanded = this.expanded,
        level = this.level,
        menuParent = this.menuParent;
    return h("div", {
      "class": [namespace(), 'm--box']
    }, [h("div", {
      "class": [namespace('__trigger'), disabled ? namespace('--disabled') : null, expanded ? namespace('--trigger-expanded') : null],
      "directives": [{
        name: "ripple",
        value: {
          disabled: disabled
        }
      }],
      "on": _extends({}, {
        "click": function click($event) {
          for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
            attrs[_key - 1] = arguments[_key];
          }

          _this3.handleClick.apply(_this3, [$event].concat(attrs));
        }
      })
    }, [h("div", {
      "class": namespace('__indent'),
      "style": {
        paddingLeft: (level - 1) * toPxNum(menuParent.indent) + "px"
      }
    }), this.renderIcon(), this.renderLabel(), h(Icon, {
      "class": [namespace('__arrow'), expanded ? namespace('--arrow-expanded') : null],
      "attrs": {
        "menu-item-group-cover": true,
        "name": "menu-down"
      }
    })]), h("div", {
      "ref": "list",
      "class": [namespace('__list'), namespace('--list-height-transition')],
      "style": {
        height: listHeight >= 0 ? listHeight + "px" : undefined
      }
    }, [this.slots()])]);
  }
});
export var _MenuItemGroupComponent = MenuItemGroupPlugin;
export default MenuItemGroupPlugin;