@ohu-mobile/core
Version:
316 lines (315 loc) • 14.6 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 _CloseOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/CloseOutlined"));
var _AddOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/AddOutlined"));
var _defineComponent = require("../_utils/defineComponent");
var _Button = _interopRequireWildcard(require("../Button/Button"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _variables = require("../_config/variables");
var _excluded = ["expand", "position", "direction", "mask", "label", "icon", "closeIcon", "text", "maskClosable", "maskTransition", "zIndex", "shadow"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
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 computeMaxRadius(x, y, w, h) {
return Math.sqrt(Math.max(Math.pow(x, 2) + Math.pow(y, 2), Math.pow(w - x, 2) + Math.pow(y, 2), Math.pow(w - x, 2) + Math.pow(h - y, 2), Math.pow(x, 2) + Math.pow(h - y, 2)));
}
var createFab = (0, _defineComponent.defineComponent)('fab');
var _default = exports.default = createFab.create({
model: {
prop: 'expand',
event: 'change'
},
props: _objectSpread(_objectSpread({}, _Button.buttonProps), {}, {
type: _defineComponent.props.ofType().default('primary'),
icon: (0, _defineComponent.props)(String, Object).default(function () {
return _AddOutlined2.default;
}),
closeIcon: (0, _defineComponent.props)(String, Object).default(function () {
return _CloseOutlined2.default;
}),
round: (0, _defineComponent.props)(Boolean).default(true),
inline: (0, _defineComponent.props)(Boolean).default(true),
expand: (0, _defineComponent.props)(Boolean).default(false),
position: (0, _defineComponent.props)(String).default('right-bottom'),
direction: (0, _defineComponent.props)(String).optional,
mask: (0, _defineComponent.props)(Boolean).default(false),
maskClosable: (0, _defineComponent.props)(Boolean).default(false),
maskTransition: (0, _defineComponent.props)(String).default('all 500ms cubic-bezier(0.19, 1, 0.22, 1)'),
label: (0, _defineComponent.props)(String).optional,
text: (0, _defineComponent.props)(String).optional,
zIndex: (0, _defineComponent.props)(Number).default(2),
shadow: (0, _defineComponent.props)(Boolean).default(true)
}),
watch: {
expand: function expand(cur) {
this.internalExpand = cur;
},
internalExpand: function internalExpand() {
this.ripple();
}
},
computed: {
currentPos: function currentPos() {
var _this$position$split = this.position.split('-'),
_this$position$split2 = _slicedToArray(_this$position$split, 2),
x = _this$position$split2[0],
y = _this$position$split2[1];
return [x || 'right', y || 'bottom'];
},
actionsDirection: function actionsDirection() {
if (this.direction) {
return this.direction;
}
var defaultDir = 'up';
var possibleDir = {
up: true,
down: true,
left: true,
right: true
};
var _this$currentPos = _slicedToArray(this.currentPos, 2),
x = _this$currentPos[0],
y = _this$currentPos[1];
if (x === 'left') {
delete possibleDir.left;
}
if (x === 'right') {
delete possibleDir.right;
}
if (y === 'top') {
delete possibleDir.up;
}
if (y === 'bottom') {
delete possibleDir.down;
}
var result = Object.keys(possibleDir);
if (result.length === 0) return defaultDir;
return result[0];
},
fabPosition: function fabPosition() {
var btn = this.$refs.button;
if (btn && btn.$el) {
return btn.$el.getBoundingClientRect();
}
},
labelDirection: function labelDirection() {
var _this$currentPos2 = _slicedToArray(this.currentPos, 2),
x = _this$currentPos2[0],
y = _this$currentPos2[1];
if (this.actionsDirection === 'up' || this.actionsDirection === 'down') {
if (x === 'left' || x === 'center') {
return 'right';
} else if (x === 'right') {
return 'left';
}
} else {
if (y === 'top') {
return 'bottom';
} else if (y === 'bottom' || y === 'center') {
return 'top';
}
}
return 'right';
},
hasAction: function hasAction() {
return !!this.$slots.default;
}
},
data: function data() {
return {
internalExpand: this.expand,
maskPosition: {}
};
},
methods: {
maskAnimate: function maskAnimate() {
var _this = this;
var minRadius = 0;
var rect = this.fabPosition;
if (rect) {
minRadius = Math.min(rect.width, rect.height);
}
if (minRadius !== 0) {
var style = {
transform: 'scale3d(1, 1, 1)',
borderRadius: minRadius + 'px',
width: minRadius + 'px',
height: minRadius + 'px',
transformOrigin: 'center'
};
if (!this.internalExpand) {
style.transition = this.maskTransition;
} else {
style.transition = 'none';
}
this.maskPosition = style;
}
this.$nextTick(function () {
_this.ripple();
});
},
ripple: function ripple() {
if (this.internalExpand) {
var x = 0;
var y = 0;
var minRadius = 0;
var innerWidth = window.innerWidth;
var innerHeight = window.innerHeight;
var rect = this.fabPosition;
if (rect) {
x = rect.x + rect.width / 2;
y = rect.y + rect.height / 2;
minRadius = Math.min(rect.width, rect.height);
}
var radius = computeMaxRadius(x, y, innerWidth, innerHeight);
var size = radius * 2;
var scale = (size + 100) / minRadius;
this.maskPosition = {
transform: "scale3d(".concat(scale, ", ").concat(scale, ", 1)"),
width: minRadius + 'px',
height: minRadius + 'px',
borderRadius: minRadius + 'px',
transformOrigin: 'center',
transition: this.maskTransition,
visibility: 'visible'
};
}
},
triggerChange: function triggerChange(expand, e) {
if (expand !== undefined) {
this.internalExpand = expand;
this.$emit('change', expand);
this.mask && this.maskAnimate();
}
this.$emit('click', e);
},
handleClick: function handleClick(e) {
e.stopPropagation();
if (this.hasAction) {
this.triggerChange(!this.internalExpand, e);
} else {
this.triggerChange(undefined, e);
}
},
close: function close() {
this.triggerChange(false);
},
open: function open() {
this.triggerChange(true);
}
},
mounted: function mounted() {
this.ripple();
},
render: function render() {
var _this2 = this;
var h = arguments[0];
var root = this.$rootCls();
var _this$$props = this.$props,
expand = _this$$props.expand,
position = _this$$props.position,
direction = _this$$props.direction,
mask = _this$$props.mask,
label = _this$$props.label,
icon = _this$$props.icon,
closeIcon = _this$$props.closeIcon,
text = _this$$props.text,
maskClosable = _this$$props.maskClosable,
maskTransition = _this$$props.maskTransition,
zIndex = _this$$props.zIndex,
shadow = _this$$props.shadow,
props = _objectWithoutProperties(_this$$props, _excluded);
if (position) {
root.is(position);
}
if (this.internalExpand) {
root.is('expand');
}
var iconClass = root.element('icon');
var actionClass = root.element('actions');
root.is(this.actionsDirection);
root.is("label-".concat(this.labelDirection));
shadow && root.is('shadow');
var maskNodeData = {
class: root.element('mask'),
style: this.maskPosition
};
if (maskClosable) {
maskNodeData.on = {
click: function click() {
_this2.triggerChange(false);
}
};
}
var rootStyle = {};
if (zIndex) {
rootStyle.zIndex = (this.internalExpand ? zIndex + 1 : zIndex).toString();
}
var actions = this.$slots.default;
return h("div", {
"class": root,
"style": rootStyle
}, [mask && h("div", (0, _babelHelperVueJsxMergeProps.default)([{}, maskNodeData])), this.label && h("span", {
"class": root.element('label')
}, [this.label]), h(_Button.default, (0, _babelHelperVueJsxMergeProps.default)([{}, {
class: !this.text ? 'is-icon-only' : undefined,
props: props,
ref: 'button',
on: {
click: this.handleClick
}
}]), [icon && (this.hasAction ? h("i", {
"class": iconClass
}, [h("transition", {
"attrs": {
"name": "".concat(_variables.$prefix, "spin")
}
}, [h(_Icon.default, {
"attrs": {
"type": icon
},
"directives": [{
name: "show",
value: !this.internalExpand
}]
})]), h("transition", {
"attrs": {
"name": "".concat(_variables.$prefix, "spin-reverse")
}
}, [h(_Icon.default, {
"attrs": {
"type": closeIcon || _CloseOutlined2.default
},
"directives": [{
name: "show",
value: this.internalExpand
}]
})])]) : h("i", {
"class": iconClass
}, [h(_Icon.default, {
"attrs": {
"type": icon
}
})])), text && h("span", [text])]), actions && h("div", {
"class": actionClass
}, [actions])]);
}
});