@ohu-mobile/core/lib-rem/DropMenu/DropMenu.js

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.baseDropMenuName = exports.baseDropMenuItemName = void 0;
var _ArrowDownSOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/ArrowDownSOutlined"));
var _CheckOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/CheckOutlined"));
var _Divider = _interopRequireDefault(require("../Divider"));
var _vnode = require("../_utils/vnode");
var _Popup = require("../Popup");
var _isPlainObject = _interopRequireDefault(require("../_utils/isPlainObject"));
var _variables = require("../_config/variables");
var _defineComponent = require("../_utils/defineComponent");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var baseDropMenuName = exports.baseDropMenuName = "".concat(_variables.$prefix, "dropmenu");
var baseDropMenuItemName = exports.baseDropMenuItemName = "".concat(baseDropMenuName, "-item");
var dropMenuInnerCls = "".concat(baseDropMenuName, "__inner");
var DropMenu = (0, _defineComponent.defineComponent)('dropmenu').create({
  props: {
    defaultValue: (0, _defineComponent.props)(Object, Array).default(function () {
      return {};
    }),
    direction: _defineComponent.props.ofStringLiterals('up', 'down').default('down'),
    divider: (0, _defineComponent.props)(Boolean).default(true),
    border: (0, _defineComponent.props)(Boolean).default(true),
    itemActive: (0, _defineComponent.props)(Boolean).default(true),
    mask: (0, _defineComponent.props)(Boolean).default(true),
    popupClass: (0, _defineComponent.props)(String, Object, Array).optional,
    popupStyle: _defineComponent.props.ofType().optional,
    checkIcon: _defineComponent.props.ofType().default(function () {
      return _CheckOutlined2.default;
    }),
    dropDownIcon: _defineComponent.props.ofType().default(function () {
      return _ArrowDownSOutlined2.default;
    })
  },
  computed: {
    isObjectValue: function isObjectValue() {
      return (0, _isPlainObject.default)(this.defaultValue);
    }
  },
  data: function data() {
    return {
      zIndex: _Popup.manager.zIndex + 10000,
      currentValue: this.defaultValue,
      selectedOptions: {},
      menuItems: []
    };
  },
  watch: {
    $children: function $children() {
      this.menuItems = this.getMenuItems();
    }
  },
  mounted: function mounted() {
    this.menuItems = this.getMenuItems();
    this.initSelectedOptions();
  },
  methods: {
    getSelectedOptions: function getSelectedOptions() {
      return this.selectedOptions;
    },
    getSelectedValues: function getSelectedValues() {
      return this.currentValue;
    },
    initSelectedOptions: function initSelectedOptions() {
      var _this = this;
      this.menuItems.map(function (item) {
        var option = item.checkedOption;
        if (option) {
          if (_this.isObjectValue && item.$vnode.key) {
            _this.selectedOptions[item.$vnode.key] = option;
          } else if (!_this.isObjectValue) {
            _this.selectedOptions[item.getIndex()] = option;
          }
        }
      });
    },
    getMenuItems: function getMenuItems() {
      return this.$children.filter(function (item) {
        return (0, _vnode.isTargetComponent)(item.$vnode, baseDropMenuItemName);
      });
    },
    getMenuItemIndex: function getMenuItemIndex(menuItem) {
      return this.getMenuItems().indexOf(menuItem);
    },
    closeAllPopup: function closeAllPopup() {
      this.getMenuItems().map(function (item) {
        item.close();
      });
    },
    triggerChange: function triggerChange(event) {
      var value = event.value,
        key = event.key,
        index = event.index;
      if (this.currentValue instanceof Array) {
        this.$set(this.currentValue, index, value);
        this.selectedOptions[index] = event;
      } else if ((0, _isPlainObject.default)(this.currentValue) && key) {
        this.currentValue[key] = value;
        this.selectedOptions[key] = event;
      }
      this.closeAllPopup();
      this.$emit('itemChange', event);
      this.$emit('change', this.currentValue);
    }
  },
  render: function render() {
    var h = arguments[0];
    var $slots = this.$slots,
      divider = this.divider;
    var inner = [];
    if ($slots.default) {
      var nodes = (0, _vnode.getVNodesByName)($slots.default, baseDropMenuItemName);
      nodes.map(function (item, index) {
        if (item.componentOptions && item.componentOptions.propsData) {
          item.componentOptions.propsData;
        }
        inner.push(item);
        if (index < nodes.length - 1 && divider) {
          inner.push(h(_Divider.default, {
            "attrs": {
              "vertical": true
            }
          }));
        }
      });
    }
    var style = {
      position: 'relative',
      zIndex: this.zIndex.toString()
    };
    return h("div", {
      "class": baseDropMenuName,
      "ref": "dropMenu"
    }, [h("div", {
      "class": dropMenuInnerCls,
      "style": style
    }, [inner]), this.border && h(_Divider.default)]);
  }
});
var _default = exports.default = DropMenu;