@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
158 lines • 7.53 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["show", "duration", "round", "closeable", "transition", "zIndex", "closeIcon", "closeIconPosition", "position", "safeAreaInsetBottom", "safeAreaInsetTop", "children", "onBeforeEnter", "onBeforeLeave", "onAfterEnter", "onAfterLeave", "onEnter", "onLeave", "onClose", "setOuterShow", "style", "className"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
/* eslint-disable react/prop-types */
import { View } from '@tarojs/components';
import { useState, useEffect, useCallback } from 'react';
import * as utils from '../wxs/utils';
import { get } from '../default-props';
import VanIcon from './../icon';
import * as computed from './wxs';
import { useTransition } from './../mixins/transition';
import VanOverlay from './../overlay';
import VanRootPortal from './../root-portal';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
function PopupInner(props) {
var _useState = useState(get().Popup),
_useState2 = _slicedToArray(_useState, 1),
d = _useState2[0];
var _d$props = _objectSpread(_objectSpread({}, d), props),
show = _d$props.show,
_d$props$duration = _d$props.duration,
duration = _d$props$duration === void 0 ? 300 : _d$props$duration,
round = _d$props.round,
closeable = _d$props.closeable,
transition = _d$props.transition,
zIndex = _d$props.zIndex,
_d$props$closeIcon = _d$props.closeIcon,
closeIcon = _d$props$closeIcon === void 0 ? 'cross' : _d$props$closeIcon,
_d$props$closeIconPos = _d$props.closeIconPosition,
closeIconPosition = _d$props$closeIconPos === void 0 ? 'top-right' : _d$props$closeIconPos,
_d$props$position = _d$props.position,
position = _d$props$position === void 0 ? 'center' : _d$props$position,
_d$props$safeAreaInse = _d$props.safeAreaInsetBottom,
safeAreaInsetBottom = _d$props$safeAreaInse === void 0 ? true : _d$props$safeAreaInse,
_d$props$safeAreaInse2 = _d$props.safeAreaInsetTop,
safeAreaInsetTop = _d$props$safeAreaInse2 === void 0 ? false : _d$props$safeAreaInse2,
children = _d$props.children,
onBeforeEnter = _d$props.onBeforeEnter,
onBeforeLeave = _d$props.onBeforeLeave,
onAfterEnter = _d$props.onAfterEnter,
onAfterLeave = _d$props.onAfterLeave,
onEnter = _d$props.onEnter,
onLeave = _d$props.onLeave,
onClose = _d$props.onClose,
setOuterShow = _d$props.setOuterShow,
style = _d$props.style,
className = _d$props.className,
others = _objectWithoutProperties(_d$props, _excluded);
var _onAfterLeave = useCallback(function () {
onAfterLeave === null || onAfterLeave === void 0 ? void 0 : onAfterLeave();
setTimeout(function () {
setOuterShow === null || setOuterShow === void 0 ? void 0 : setOuterShow(false);
}, 0);
}, [onAfterLeave, setOuterShow]);
var _onClickCloseIcon = useCallback(function () {
onClose === null || onClose === void 0 ? void 0 : onClose();
}, [onClose]);
var _useTransition = useTransition({
show: show,
duration: transition === 'none' ? 0 : duration,
name: transition || position,
onBeforeEnter: onBeforeEnter,
onBeforeLeave: onBeforeLeave,
onAfterEnter: onAfterEnter,
onAfterLeave: _onAfterLeave,
onEnter: onEnter,
onLeave: onLeave
}),
inited = _useTransition.inited,
currentDuration = _useTransition.currentDuration,
classes = _useTransition.classes,
display = _useTransition.display,
onTransitionEnd = _useTransition.onTransitionEnd;
var getClassName = useCallback(function (name) {
return name.replace(/([A-Z])/g, function (_, $1) {
return '-' + ($1 === null || $1 === void 0 ? void 0 : $1.toLowerCase());
});
}, []);
return /*#__PURE__*/_jsx(_Fragment, {
children: inited && /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({
className: classes + ' ' + utils.bem('popup', [position, {
round: round,
safe: safeAreaInsetBottom,
safeTop: safeAreaInsetTop
}]) + " ".concat(className || ''),
style: utils.style([computed.popupStyle({
zIndex: zIndex,
currentDuration: currentDuration,
display: display
}), style]),
onTransitionEnd: onTransitionEnd
}, others), {}, {
children: [children, closeable &&
/*#__PURE__*/
// @ts-check
_jsx(VanIcon, {
name: closeIcon,
className: 'close-icon-class van-popup__close-icon van-popup__close-icon--' + getClassName(closeIconPosition),
onClick: _onClickCloseIcon
})]
}))
});
}
export function Popup(props) {
var show = props.show,
_props$duration = props.duration,
duration = _props$duration === void 0 ? 300 : _props$duration,
zIndex = props.zIndex,
_props$rootPortal = props.rootPortal,
rootPortal = _props$rootPortal === void 0 ? false : _props$rootPortal,
_props$overlay = props.overlay,
overlay = _props$overlay === void 0 ? true : _props$overlay,
_props$lockScroll = props.lockScroll,
lockScroll = _props$lockScroll === void 0 ? true : _props$lockScroll,
overlayStyle = props.overlayStyle,
_props$closeOnClickOv = props.closeOnClickOverlay,
closeOnClickOverlay = _props$closeOnClickOv === void 0 ? true : _props$closeOnClickOv,
onClickOverlay = props.onClickOverlay,
onClose = props.onClose;
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
innerShow = _useState4[0],
setInnerShow = _useState4[1];
useEffect(function () {
if (show) {
setInnerShow(true);
}
}, [show]);
var _onClickOverlay = useCallback(function () {
onClickOverlay === null || onClickOverlay === void 0 ? void 0 : onClickOverlay();
if (closeOnClickOverlay) {
onClose === null || onClose === void 0 ? void 0 : onClose();
}
}, [closeOnClickOverlay, onClickOverlay, onClose]);
return /*#__PURE__*/_jsxs(VanRootPortal, {
enable: rootPortal,
children: [/*#__PURE__*/_jsx(View, {
children: overlay && /*#__PURE__*/_jsx(VanOverlay, {
show: show,
zIndex: zIndex,
style: overlayStyle,
duration: duration,
onClick: _onClickOverlay,
lockScroll: lockScroll
})
}), /*#__PURE__*/_jsx(View, {
children: innerShow ? /*#__PURE__*/_jsx(PopupInner, _objectSpread({
setOuterShow: setInnerShow
}, props)) : /*#__PURE__*/_jsx(_Fragment, {})
})]
});
}
export default Popup;