@ohu-mobile/core
Version:
242 lines (241 loc) • 9.82 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
var _Popup = _interopRequireDefault(require("../Popup"));
var _Divider = _interopRequireDefault(require("../Divider"));
var _iconUtils = require("../_utils/icon-utils");
var _isPlainObject = _interopRequireDefault(require("../_utils/isPlainObject"));
var _defineComponent = require("../_utils/defineComponent");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var defaultCheckedFunc = function defaultCheckedFunc(checkedOption, option) {
if (checkedOption && !option) return true;
if (checkedOption && option) {
return checkedOption.value === option.value;
}
return false;
};
var DropMenuItem = (0, _defineComponent.defineComponent)('dropmenu-item').create({
props: {
title: String,
disabled: (0, _defineComponent.props)(Boolean).default(false),
options: _defineComponent.props.ofType().default(function () {
return [];
}),
checkIcon: _defineComponent.props.ofType().optional,
dropDownIcon: _defineComponent.props.ofType().optional,
checkedFunc: {
type: Function,
default: defaultCheckedFunc
},
popupClass: (0, _defineComponent.props)(String, Object, Array).optional,
popupStyle: _defineComponent.props.ofType().optional
},
data: function data() {
return {
popupVisible: false,
checkedOption: undefined,
opened: false
};
},
created: function created() {
this.checkedOption = this.getCheckedOption();
},
methods: {
getCheckedOption: function getCheckedOption() {
var checkedOption = undefined;
var key = this.getKey();
var index = this.getIndex();
var checkedValue = this.getCheckedValue();
if (this.options.length > 0 && checkedValue !== undefined) {
this.options.some(function (option) {
if (option.value === checkedValue) {
checkedOption = Object.assign({
key: key,
index: index
}, option);
return true;
}
return false;
});
}
return checkedOption;
},
getParent: function getParent() {
return this.$parent;
},
getDropMenuElement: function getDropMenuElement() {
// todo: turn to use optional chain
return this.getParent().$refs.dropMenu;
},
getIndex: function getIndex() {
return this.getParent().getMenuItemIndex(this);
},
getKey: function getKey() {
return this.$vnode.key;
},
getCheckedValue: function getCheckedValue() {
var _this$getParent = this.getParent(),
currentValue = _this$getParent.currentValue;
var key = this.getKey();
if (currentValue instanceof Array) {
return currentValue[this.getIndex()];
} else if ((0, _isPlainObject.default)(currentValue) && key) {
return currentValue[key];
}
},
close: function close() {
if (this.popupVisible) {
this.popupVisible = false;
}
},
handleVisibleChange: function handleVisibleChange(visible) {
this.popupVisible = visible;
if (visible === false) {
this.opened = false;
}
this.$emit('visibleChange', visible);
},
handleClick: function handleClick() {
if (this.disabled) return;
var currentVisible = this.popupVisible;
this.getParent().closeAllPopup();
this.popupVisible = !currentVisible;
},
triggerChange: function triggerChange(option) {
if (option.disabled) return;
if (option.index === undefined) {
option.index = this.getIndex();
}
if (option.key === undefined) {
option.key = this.getKey();
}
this.checkedOption = option;
this.getParent().triggerChange(option);
},
handlePopupOpen: function handlePopupOpen(e) {
var documentZIndex = e.documentZIndex;
this.getParent().zIndex = documentZIndex + 1;
this.$emit('open', e);
},
handleAfterOpen: function handleAfterOpen() {
this.opened = true;
}
},
render: function render() {
var _this = this;
var h = arguments[0];
var $scopedSlots = this.$scopedSlots,
title = this.title,
options = this.options,
disabled = this.disabled;
var _this$getParent2 = this.getParent(),
direction = _this$getParent2.direction,
itemActive = _this$getParent2.itemActive,
mask = _this$getParent2.mask,
popupClass = _this$getParent2.popupClass,
popupStyle = _this$getParent2.popupStyle,
checkIcon = _this$getParent2.checkIcon,
dropDownIcon = _this$getParent2.dropDownIcon;
var cls = this.$rootCls();
var popupContent;
var checkedText = title;
var hasCheckedOption = false;
var key = this.getKey();
var componentIndex = this.getIndex();
var checkedOption = this.checkedOption;
if ($scopedSlots.default) {
popupContent = $scopedSlots.default({
opened: this.opened,
checked: checkedOption,
options: this.options,
instance: this
});
if (checkedOption) {
hasCheckedOption = this.checkedFunc(checkedOption);
if (checkedOption.label) {
checkedText = checkedOption.label;
}
}
} else {
var icon = (0, _iconUtils.getIcon)(this.$createElement, this.checkIcon || checkIcon);
popupContent = options.reduce(function (result, option, index) {
var isCheck = _this.checkedFunc(checkedOption, option);
if (isCheck) {
hasCheckedOption = true;
}
if (isCheck && option.label) {
checkedText = option.label;
}
var optionCls = cls.block('option').is(isCheck && 'active').is(!!option.disabled && 'disabled');
result.push(h("div", {
"class": optionCls,
"on": {
"click": function click() {
return _this.triggerChange(_objectSpread({
index: componentIndex,
key: key
}, option));
}
}
}, [option.label, isCheck && icon]));
if (index < options.length - 1) {
result.push(h(_Divider.default));
}
return result;
}, []);
}
var dropMenuCls = cls.is((this.popupVisible || itemActive && hasCheckedOption) && 'active').is(disabled && 'disabled');
var iconCls = cls.element('icon').is((direction === 'up' ? !this.popupVisible : this.popupVisible) && 'up');
var popupCls = cls.block('options').addClasses(this.popupClass || popupClass);
var popupProps = {
props: {
visible: this.popupVisible,
targetClass: popupCls,
targetStyle: this.popupStyle || popupStyle,
getContainer: function getContainer() {
return _this.getDropMenuElement();
},
position: direction === 'up' ? 'top' : 'bottom',
marginThreshold: 0,
mask: mask,
anchor: function anchor() {
return _this.getDropMenuElement();
},
animate: direction === 'up' ? 'scale-down' : 'scale-up',
partialMask: direction === 'up' ? 'top' : 'bottom'
},
on: _objectSpread(_objectSpread({}, this.$listeners), {}, {
open: this.handlePopupOpen,
afterOpen: this.handleAfterOpen,
visibleChange: this.handleVisibleChange
})
};
var icon2 = (0, _iconUtils.getIcon)(this.$createElement, this.dropDownIcon || dropDownIcon);
if ($scopedSlots.title) {
checkedText = $scopedSlots.title({
defaultTitle: title,
checked: checkedOption
});
}
return h("div", {
"class": dropMenuCls,
"on": {
"click": this.handleClick
}
}, [h("span", {
"class": cls.element('text')
}, [checkedText]), h("i", {
"class": iconCls
}, [icon2]), h(_Popup.default, (0, _babelHelperVueJsxMergeProps.default)([{}, popupProps]), [popupContent])]);
}
});
var _default = exports.default = DropMenuItem;