@ohu-mobile/core
Version:
400 lines (399 loc) • 16.8 kB
JavaScript
"use strict";
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); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _CloseCircleFilled2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/CloseCircleFilled"));
var _ArrowDownSFilled2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/ArrowDownSFilled"));
var _ArrowRightSOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/ArrowRightSOutlined"));
var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
var _CheckOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/CheckOutlined"));
var _BackOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/BackOutlined"));
var _defineComponent = require("../_utils/defineComponent");
var _Popup = _interopRequireDefault(require("../Popup"));
var _RadioList = _interopRequireDefault(require("../RadioList"));
var _CheckList = _interopRequireDefault(require("../CheckList"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _fieldMixin = require("../Form/fieldMixin");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var defaultPopupProps = {
position: 'bottom',
round: true
};
var fullScreenPopupProps = {
position: 'right',
fullscreen: true,
mask: false
};
var defaultPopupHeaderProps = {
center: true
};
var fullScreenPopupHeaderProps = {
closeIcon: _BackOutlined2.default,
closeIconPosition: 'left',
center: true
};
var _default = exports.default = (0, _defineComponent.defineComponent)('select').mixin((0, _fieldMixin.fieldMixin)('stateValue', 'value', true)).create({
model: {
prop: 'value',
event: 'change'
},
props: {
name: String,
visible: (0, _defineComponent.props)(Boolean).default(false),
value: _defineComponent.props.ofType().optional,
options: _defineComponent.props.ofType().default(function () {
return [];
}),
title: (0, _defineComponent.props)(String).optional,
multiple: (0, _defineComponent.props)(Boolean).default(false),
placeholder: (0, _defineComponent.props)(String).optional,
icon: _defineComponent.props.ofType().optional,
confirm: (0, _defineComponent.props)(Boolean).default(false),
minHeight: (0, _defineComponent.props)(String).default('auto'),
maxHeight: (0, _defineComponent.props)(String).default('auto'),
popupContentStyle: (0, _defineComponent.props)(Object).optional,
native: (0, _defineComponent.props)(Boolean).default(false),
outline: (0, _defineComponent.props)(Boolean).default(false),
noBorder: (0, _defineComponent.props)(Boolean).default(false),
fullScreen: (0, _defineComponent.props)(Boolean).default(false),
popupProps: _defineComponent.props.ofType().optional,
headerProps: _defineComponent.props.ofType().optional,
disabled: (0, _defineComponent.props)(Boolean).default(false),
allowClear: (0, _defineComponent.props)(Boolean).default(false),
beforeOpen: (0, _defineComponent.props)(Function).optional,
max: (0, _defineComponent.props)(Number).default(Infinity)
},
watch: {
value: function value(cur) {
this.stateValue = this.getCurrentStateValue(cur);
},
stateValue: function stateValue(cur) {
var currentOption = this.getCurrentSelectedOption(cur);
this.selectedOption = currentOption;
},
visible: function visible(cur) {
if (cur) {
this.open();
} else {
this.close();
}
}
},
computed: {
shouldConfirm: function shouldConfirm() {
return this.confirm || this.multiple;
},
checkedValue: function checkedValue() {
if (this.shouldConfirm) {
return this.unconfirmStateValue;
}
return this.stateValue;
}
},
data: function data() {
var _this = this;
var currentValue = this.getCurrentStateValue(this.initFieldValue(this.value));
var currentOption = this.getCurrentSelectedOption(currentValue);
var visible = this.disabled ? false : this.visible;
if (visible) {
this.$nextTick(function () {
_this.handleOpen();
});
}
return {
popupVisible: visible,
stateValue: currentValue,
selectedOption: currentOption,
unconfirmStateValue: undefined,
unconfirmSelectedOption: undefined,
delay: false,
opened: false
};
},
methods: {
setFieldValue: function setFieldValue(value) {
this.stateValue = this.getCurrentStateValue(value);
},
getCurrentStateValue: function getCurrentStateValue(value) {
if (!value) return;
if (this.multiple && !(value instanceof Array)) {
return [value];
}
if (this.multiple && this.value instanceof Array) {
return _toConsumableArray(this.value);
}
return value;
},
getCurrentSelectedOption: function getCurrentSelectedOption(value) {
if (!value) return;
if (this.multiple && value instanceof Array) {
return this.options.filter(function (option) {
return value.indexOf(option.value) >= 0;
});
}
return this.options.find(function (option) {
return option.value === value;
});
},
handleNativeChange: function handleNativeChange(e) {
var value = e.target.value;
var currentOption = this.options.find(function (option) {
return option.value === value;
});
if (currentOption) {
this.handleChange(value, currentOption);
}
},
handleChange: function handleChange(value, option) {
if (this.shouldConfirm) {
this.unconfirmSelectedOption = option;
this.unconfirmStateValue = value;
this.$emit('select', this.unconfirmStateValue, this.unconfirmSelectedOption);
return;
}
this.stateValue = value;
this.selectedOption = option;
this.emitChange();
},
handleConfirm: function handleConfirm() {
this.stateValue = this.unconfirmStateValue;
this.selectedOption = this.unconfirmSelectedOption;
this.emitChange();
this.$emit('confirm', this.stateValue, this.selectedOption);
},
handleAfterOpen: function handleAfterOpen() {
this.opened = true;
},
emitChange: function emitChange() {
this.$emit('change', this.stateValue, this.selectedOption);
this.close();
},
getControlNode: function getControlNode() {
var _this$selectedOption, _this$selectedOption2, _this$selectedOption3;
if (this.$scopedSlots.control) {
return this.$scopedSlots.control(this.selectedOption);
}
if (this.selectedOption instanceof Array) {
return this.selectedOption.map(function (option) {
return (option === null || option === void 0 ? void 0 : option.label) || (option === null || option === void 0 ? void 0 : option.value);
}).join('/');
}
return (_this$selectedOption = this.selectedOption) !== null && _this$selectedOption !== void 0 && _this$selectedOption.value ? ((_this$selectedOption2 = this.selectedOption) === null || _this$selectedOption2 === void 0 ? void 0 : _this$selectedOption2.label) || ((_this$selectedOption3 = this.selectedOption) === null || _this$selectedOption3 === void 0 ? void 0 : _this$selectedOption3.value) : '';
},
renderCheckList: function renderCheckList() {
var h = this.$createElement;
return this.multiple ? h(_CheckList.default, {
"attrs": {
"value": this.checkedValue,
"max": this.max,
"options": this.options
},
"on": {
"change": this.handleChange
}
}) : h(_RadioList.default, {
"attrs": {
"value": this.checkedValue,
"checkedIcon": _CheckOutlined2.default,
"unCheckedIcon": null,
"options": this.options
},
"on": {
"change": this.handleChange
}
});
},
renderNative: function renderNative() {
var _this2 = this;
var h = this.$createElement;
return h("select", {
"attrs": {
"disabled": this.disabled,
"name": this.fieldName || this.name
},
"on": {
"change": this.handleNativeChange
}
}, [this.options.map(function (_ref) {
var label = _ref.label,
value = _ref.value,
disabled = _ref.disabled;
return h("option", {
"attrs": {
"disabled": !!disabled
},
"domProps": {
"value": label,
"selected": value === _this2.stateValue
}
}, [value]);
})]);
},
renderPopup: function renderPopup(popupClass, contentStyle) {
var h = this.$createElement;
if (this.popupProps && this.popupProps.targetClass) {
popupClass.addClasses(this.popupProps.targetClass);
}
var nodeData = {
props: _objectSpread(_objectSpread(_objectSpread({}, this.fullScreen ? fullScreenPopupProps : defaultPopupProps), this.popupProps), {}, {
visible: this.popupVisible,
targetClass: popupClass
}),
on: {
open: this.open,
close: this.close,
afterOpen: this.handleAfterOpen
}
};
var headerNodeData = {
props: _objectSpread(_objectSpread(_objectSpread({}, this.fullScreen ? fullScreenPopupHeaderProps : defaultPopupHeaderProps), this.headerProps), {}, {
confirm: this.shouldConfirm
}),
on: {
confirm: this.handleConfirm
}
};
return h(_Popup.default, (0, _babelHelperVueJsxMergeProps.default)([{}, nodeData]), [this.title && h(_Popup.default.Header, (0, _babelHelperVueJsxMergeProps.default)([{}, headerNodeData]), [this.title]), h("div", {
"class": popupClass.element('content'),
"style": contentStyle
}, [this.$scopedSlots.content ? this.$scopedSlots.content({
opened: this.opened,
visible: this.popupVisible,
value: this.checkedValue,
handleChange: this.handleChange
}) : this.renderCheckList()])]);
},
open: function open() {
var _this3 = this;
if (this.popupVisible || this.delay) return;
if (this.beforeOpen) {
var shouldOpen = this.beforeOpen();
if (shouldOpen === false) {
return;
}
if (shouldOpen instanceof Promise) {
this.delay = true;
return shouldOpen.then(function (o) {
if (o) {
_this3.handleOpen();
}
_this3.delay = false;
}).catch(function () {
_this3.delay = false;
});
}
}
this.handleOpen();
},
handleOpen: function handleOpen() {
if (this.native || this.disabled) return;
if (this.shouldConfirm) {
this.unconfirmStateValue = this.stateValue;
this.unconfirmSelectedOption = this.selectedOption;
}
this.popupVisible = true;
this.$emit('show');
this.$emit('visibleChange', this.popupVisible);
},
close: function close() {
if (this.popupVisible === false) return;
this.popupVisible = false;
this.opened = false;
this.unconfirmSelectedOption = undefined;
this.unconfirmStateValue = undefined;
this.$emit('hide');
this.$emit('visibleChange', this.popupVisible);
},
handleClear: function handleClear(e) {
e.stopPropagation();
this.clear();
},
clear: function clear() {
this.stateValue = undefined;
this.unconfirmStateValue = undefined;
this.unconfirmSelectedOption = undefined;
this.selectedOption = undefined;
this.$emit('change', this.stateValue, this.selectedOption);
}
},
render: function render() {
var h = arguments[0];
var root = this.$rootCls();
var placeholder = this.placeholder,
icon = this.icon,
outline = this.outline,
noBorder = this.noBorder,
maxHeight = this.maxHeight,
minHeight = this.minHeight,
_native = this.native,
stateValue = this.stateValue,
disabled = this.disabled,
popupContentStyle = this.popupContentStyle;
root.is([disabled && 'disabled']);
var inputNode = root.element('input');
var inputControl = inputNode.element('control');
var placeholderNode = inputNode.element('placeholder');
var iconNode = inputNode.element('icon');
var popupNode = root.element('popup');
var controlContent = this.getControlNode();
var contentStyle = _objectSpread({
minHeight: minHeight,
maxHeight: maxHeight
}, popupContentStyle);
var iconType = icon;
if (iconType === undefined) {
iconType = this.fullScreen ? _ArrowRightSOutlined2.default : _ArrowDownSFilled2.default;
}
return h("div", {
"class": root
}, [!_native && this.renderPopup(popupNode, contentStyle), h("div", {
"class": inputNode.is([outline ? 'outline' : 'normal']).has([!noBorder && 'border']),
"on": {
"click": this.open
},
"attrs": {
"role": "button"
}
}, [controlContent && h("div", {
"class": inputControl
}, [controlContent]), placeholder && !controlContent && h("div", {
"class": placeholderNode
}, [placeholder]), this.allowClear && this.stateValue && h("div", {
"class": inputNode.element('icon').is('close'),
"on": {
"click": this.handleClear
}
}, [h(_Icon.default, {
"attrs": {
"type": _CloseCircleFilled2.default
}
})]), iconType && h("div", {
"class": iconNode
}, [h(_Icon.default, {
"attrs": {
"type": iconType
}
})]), !_native ? h("input", {
"attrs": {
"type": "hidden",
"name": this.fieldName || this.name
},
"domProps": {
"value": stateValue
}
}) : this.renderNative()])]);
}
});