gui-one-nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
191 lines (190 loc) • 7.59 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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; }
import React__default, { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { CSSTransition } from 'react-transition-group';
import classNames from 'classnames';
import { d as defaultOverlayProps, O as Overlay } from './overlay.taro-be45fed5.js';
import { I as Icon } from './icon.taro-1d0d4fb7.js';
import { c as cn } from './bem-893ad28d.js';
import { C as ComponentDefaults } from './typings-1c5f2628.js';
var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
position: 'center',
transition: '',
style: {},
popClass: '',
closeable: false,
closeIconPosition: 'top-right',
closeIcon: 'close',
destroyOnClose: true,
teleport: null,
overlay: true,
round: false,
onOpen: function onOpen() {},
onClose: function onClose() {},
onClick: function onClick(e) {},
onOpened: function onOpened(e) {},
onClosed: function onClosed(e) {},
onClickOverlay: function onClickOverlay(e) {},
onClickCloseIcon: function onClickCloseIcon(e) {}
}, defaultOverlayProps);
var _zIndex = 2000;
var Popup = function Popup(props) {
var _classNames;
var children = props.children,
visible = props.visible,
overlay = props.overlay,
closeOnClickOverlay = props.closeOnClickOverlay,
overlayStyle = props.overlayStyle,
overlayClass = props.overlayClass,
zIndex = props.zIndex,
lockScroll = props.lockScroll,
duration = props.duration,
closeable = props.closeable,
closeIconPosition = props.closeIconPosition,
closeIcon = props.closeIcon,
style = props.style,
transition = props.transition,
round = props.round,
position = props.position,
popClass = props.popClass,
className = props.className,
destroyOnClose = props.destroyOnClose,
teleport = props.teleport,
onOpen = props.onOpen,
onClose = props.onClose,
onClickOverlay = props.onClickOverlay,
onClickCloseIcon = props.onClickCloseIcon,
onOpened = props.onOpened,
onClosed = props.onClosed,
onClick = props.onClick,
iconClassPrefix = props.iconClassPrefix,
iconFontClassName = props.iconFontClassName;
var _useState = useState(zIndex || _zIndex),
_useState2 = _slicedToArray(_useState, 2),
index = _useState2[0],
setIndex = _useState2[1];
var _useState3 = useState(visible),
_useState4 = _slicedToArray(_useState3, 2),
innerVisible = _useState4[0],
setInnerVisible = _useState4[1];
var _useState5 = useState(true),
_useState6 = _slicedToArray(_useState5, 2),
showChildren = _useState6[0],
setShowChildren = _useState6[1];
var _useState7 = useState(''),
_useState8 = _slicedToArray(_useState7, 2),
transitionName = _useState8[0],
setTransitionName = _useState8[1];
var b = cn('popup');
var baseStyle = {
zIndex: index,
animationDuration: "".concat(duration, "s")
};
var overlayStyles = _objectSpread(_objectSpread({}, overlayStyle), baseStyle);
var popStyles = _objectSpread(_objectSpread({}, style), baseStyle);
var classes = classNames((_classNames = {
round: round
}, _defineProperty(_classNames, "popup-".concat(position), true), _defineProperty(_classNames, "".concat(popClass), true), _defineProperty(_classNames, "".concat(className), true), _classNames), b(''));
var closeClasses = classNames(_defineProperty({
'nutui-popup__close-icon': true
}, "nutui-popup__close-icon--".concat(closeIconPosition), true));
var open = function open() {
if (!innerVisible) {
setInnerVisible(true);
setIndex(++_zIndex);
}
if (destroyOnClose) {
setShowChildren(true);
}
onOpen && onOpen();
};
var close = function close() {
if (innerVisible) {
setInnerVisible(false);
if (destroyOnClose) {
setTimeout(function () {
setShowChildren(false);
onClose && onClose();
}, Number(duration) * 1000);
}
}
};
var onHandleClickOverlay = function onHandleClickOverlay(e) {
if (closeOnClickOverlay) {
onClickOverlay && onClickOverlay(e);
close();
}
};
var onHandleClick = function onHandleClick(e) {
onClick && onClick(e);
};
var onHandleClickCloseIcon = function onHandleClickCloseIcon(e) {
onClickCloseIcon && onClickCloseIcon(e);
close();
};
var onHandleOpened = function onHandleOpened(e) {
onOpened && onOpened(e);
};
var onHandleClosed = function onHandleClosed(e) {
onClosed && onClosed(e);
};
var resolveContainer = function resolveContainer(getContainer) {
var container = typeof getContainer === 'function' ? getContainer() : getContainer;
return container || document.body;
};
var renderToContainer = function renderToContainer(getContainer, node) {
if (getContainer) {
var container = resolveContainer(getContainer);
return createPortal(node, container);
}
return node;
};
var renderPop = function renderPop() {
return React__default.createElement(CSSTransition, {
classNames: transitionName,
unmountOnExit: true,
timeout: 500,
"in": innerVisible,
onEntered: onHandleOpened,
onExited: onHandleClosed
}, React__default.createElement("div", {
style: popStyles,
className: classes,
onClick: onHandleClick
}, showChildren ? children : '', closeable ? React__default.createElement("div", {
className: closeClasses,
onClick: onHandleClickCloseIcon
}, React__default.createElement(Icon, {
classPrefix: iconClassPrefix,
fontClassName: iconFontClassName,
name: closeIcon,
size: "12px"
})) : ''));
};
var renderNode = function renderNode() {
return React__default.createElement(React__default.Fragment, null, overlay ? React__default.createElement(React__default.Fragment, null, React__default.createElement(Overlay, {
style: overlayStyles,
overlayClass: overlayClass,
visible: innerVisible,
closeOnClickOverlay: closeOnClickOverlay,
zIndex: zIndex,
lockScroll: lockScroll,
duration: duration,
onClick: onHandleClickOverlay
}), renderPop()) : React__default.createElement(React__default.Fragment, null, renderPop()));
};
useEffect(function () {
visible && open();
!visible && close();
}, [visible]);
useEffect(function () {
setTransitionName(transition || "popup-slide-".concat(position));
}, [position]);
return React__default.createElement(React__default.Fragment, null, renderToContainer(teleport, renderNode()));
};
Popup.defaultProps = defaultProps;
Popup.displayName = 'NutPopup';
export { Popup as P };