@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
294 lines (293 loc) • 12.3 kB
JavaScript
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useEffect, useMemo, useRef, useState } from "react";
import classNames from "classnames";
import { createPortal } from "react-dom";
import { ArrowRadius } from "@nutui/icons-react";
import Popup from "../popup/index";
import { getRect } from "../../hooks/use-client-rect";
import { ComponentDefaults } from "../../utils/typings";
import useClickAway from "../../hooks/use-click-away";
import { canUseDom } from "../../utils/can-use-dom";
import { getAllScrollableParents } from "../../utils/get-scroll-parent";
import { useRtl } from "../configprovider";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
list: [],
theme: 'light',
location: 'bottom',
visible: false,
offset: [
0,
8
],
arrowOffset: 0,
targetId: '',
showArrow: true,
closeOnOutsideClick: true,
closeOnActionClick: true,
overlay: false,
onClick: function() {},
onOpen: function() {},
onClose: function() {}
});
var classPrefix = "nut-popover";
export var Popover = function(props) {
var rtl = useRtl();
var _ref = _object_spread({}, defaultProps, props), children = _ref.children, list = _ref.list, theme = _ref.theme, location = _ref.location, visible = _ref.visible, offset = _ref.offset, arrowOffset = _ref.arrowOffset, targetId = _ref.targetId, overlay = _ref.overlay, closeOnOutsideClick = _ref.closeOnOutsideClick, closeOnActionClick = _ref.closeOnActionClick, className = _ref.className, showArrow = _ref.showArrow, style = _ref.style, onClick = _ref.onClick, onOpen = _ref.onOpen, onClose = _ref.onClose, onSelect = _ref.onSelect, rest = _object_without_properties(_ref, [
"children",
"list",
"theme",
"location",
"visible",
"offset",
"arrowOffset",
"targetId",
"overlay",
"closeOnOutsideClick",
"closeOnActionClick",
"className",
"showArrow",
"style",
"onClick",
"onOpen",
"onClose",
"onSelect"
]);
var popoverRef = useRef(null);
var popoverContentRef = useRef(null);
var _useState = _sliced_to_array(useState(false), 2), showPopup = _useState[0], setShowPopup = _useState[1];
var _useState1 = _sliced_to_array(useState(), 2), wrapperPosition = _useState1[0], setWrapperPosition = _useState1[1];
useEffect(function() {
setShowPopup(visible);
if (visible) {
setTimeout(function() {
getWrapperPosition();
}, 0);
}
}, [
visible,
location
]);
var update = useRef(function(e) {
getWrapperPosition();
});
var targetSet = [];
var element = null;
if (canUseDom && targetId) {
element = document.querySelector("#".concat(targetId));
targetSet = [
element,
popoverContentRef.current
];
} else {
targetSet = [
popoverRef.current,
popoverContentRef.current
];
}
var scrollableParents = useMemo(function() {
return getAllScrollableParents(element || popoverRef.current);
}, [
element,
popoverRef.current
]);
useEffect(function() {
if (visible) {
scrollableParents.forEach(function(parent) {
parent.addEventListener('scroll', update.current, {
passive: true
});
});
} else {
scrollableParents.forEach(function(parent) {
return parent.removeEventListener('scroll', update.current);
});
}
}, [
visible
]);
useClickAway(function() {
onClick === null || onClick === void 0 ? void 0 : onClick();
onClose === null || onClose === void 0 ? void 0 : onClose();
}, targetSet, 'touchstart', true, visible, closeOnOutsideClick);
var getWrapperPosition = function() {
var rect = getRect(targetId ? document.querySelector("#".concat(targetId)) : popoverRef.current);
var distance = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
var width = rect.width, height = rect.height, right = rect.right, left = rect.left, top = rect.top;
setWrapperPosition({
width: width,
height: height,
left: rtl ? right : left,
top: top + distance,
right: rtl ? left : right
});
};
var classes = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-").concat(theme), theme === 'dark'), className);
var popoverArrow = function() {
var prefixCls = 'nut-popover-arrow';
var direction = location.split('-')[0];
return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(direction, " ").concat(prefixCls, "-").concat(location);
};
var getPopoverPosition = function() {
var _popoverContentRef_current, _popoverContentRef_current1;
var styles = {};
if (!wrapperPosition) {
styles.visibility = 'hidden';
return styles;
}
var popWidth = (_popoverContentRef_current = popoverContentRef.current) === null || _popoverContentRef_current === void 0 ? void 0 : _popoverContentRef_current.clientWidth;
var popHeight = (_popoverContentRef_current1 = popoverContentRef.current) === null || _popoverContentRef_current1 === void 0 ? void 0 : _popoverContentRef_current1.clientHeight;
var width = wrapperPosition.width, height = wrapperPosition.height, left = wrapperPosition.left, top = wrapperPosition.top, right = wrapperPosition.right;
var direction = location.split('-')[0];
var skew = location.split('-')[1];
var cross = 0;
var parallel = 0;
if (Array.isArray(offset) && offset.length === 2) {
var rtloffset = rtl ? -offset[0] : offset[0];
cross += +offset[1];
parallel += +rtloffset;
}
if (width) {
var dir = rtl ? 'right' : 'left';
if ([
'bottom',
'top'
].includes(direction)) {
var h = direction === 'bottom' ? height + cross : -(popHeight + cross);
styles.top = "".concat(top + h, "px");
if (!skew) {
styles[dir] = "".concat(-(popWidth - width) / 2 + wrapperPosition[dir] + parallel, "px");
}
if (skew === 'left') {
styles.left = "".concat(left + parallel, "px");
}
if (skew === 'right') {
styles.left = "".concat(right + parallel, "px");
}
}
if ([
'left',
'right'
].includes(direction)) {
var contentW = direction === 'left' ? -(popWidth + cross) : width + cross;
styles.left = "".concat(left + contentW, "px");
if (!skew) {
styles.top = "".concat(top - popHeight / 2 + height / 2 - 4 + parallel, "px");
}
if (skew === 'top') {
styles.top = "".concat(top + parallel, "px");
}
if (skew === 'bottom') {
styles.top = "".concat(top + height + parallel, "px");
}
}
}
styles.visibility = popWidth === 0 ? 'hidden' : 'initial';
return styles;
};
var popoverArrowStyle = function() {
var styles = {};
var direction = location.split('-')[0];
var skew = location.split('-')[1];
var base = 16;
if (arrowOffset !== 0) {
var dir = rtl ? 'right' : 'left';
var dir2 = rtl ? 'left' : 'right';
if ([
'bottom',
'top'
].includes(direction)) {
if (!skew) {
styles[dir] = "calc(50% + ".concat(arrowOffset, "px)");
}
if (skew === 'left') {
styles[dir] = "".concat(base + arrowOffset, "px");
}
if (skew === 'right') {
styles[dir2] = "".concat(base - arrowOffset, "px");
}
}
if ([
'left',
'right'
].includes(direction)) {
if (!skew) {
styles.top = "calc(50% - ".concat(arrowOffset, "px)");
}
if (skew === 'top') {
styles.top = "".concat(base - arrowOffset, "px");
}
if (skew === 'bottom') {
styles.bottom = "".concat(base + arrowOffset, "px");
}
}
}
return styles;
};
var handleSelect = function(item, index) {
if (!item.disabled) {
onSelect === null || onSelect === void 0 ? void 0 : onSelect(item, index);
}
if (closeOnActionClick) {
onClick === null || onClick === void 0 ? void 0 : onClick();
onClose === null || onClose === void 0 ? void 0 : onClose();
}
};
return /*#__PURE__*/ React.createElement(React.Fragment, null, !targetId && /*#__PURE__*/ React.createElement("div", {
className: "nut-popover-wrapper",
ref: popoverRef,
onClick: function() {
onClick === null || onClick === void 0 ? void 0 : onClick();
if (!visible) {
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
} else {
onClose === null || onClose === void 0 ? void 0 : onClose();
}
},
style: style
}, Array.isArray(children) ? children[0] : children), /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement("div", {
className: classes,
style: _object_spread({}, getPopoverPosition(), style)
}, /*#__PURE__*/ React.createElement(Popup, _object_spread({
className: "nut-popover-content nut-popover-content-".concat(location),
visible: showPopup,
overlay: overlay,
position: "none",
lockScroll: false
}, rest), /*#__PURE__*/ React.createElement("div", {
className: "nut-popover-content-group",
ref: popoverContentRef
}, showArrow && /*#__PURE__*/ React.createElement("div", {
className: popoverArrow(),
style: popoverArrowStyle()
}, /*#__PURE__*/ React.createElement(ArrowRadius, {
width: 8,
height: 4
})), Array.isArray(children) ? children[1] : null, list.map(function(item, index) {
var _item_action;
return /*#__PURE__*/ React.createElement("div", {
className: classNames({
'nut-popover-item': true,
'nut-popover-item-disabled': item.disabled
}, item.className),
key: item.key || index,
onClick: function() {
return handleSelect(item, index);
}
}, item.icon && /*#__PURE__*/ React.createElement("div", {
className: "nut-popover-item-icon"
}, item.icon), /*#__PURE__*/ React.createElement("div", {
className: "nut-popover-item-name"
}, item.name), ((_item_action = item.action) === null || _item_action === void 0 ? void 0 : _item_action.icon) && /*#__PURE__*/ React.createElement("div", {
className: "nut-popover-item-action-icon",
onClick: function(e) {
var _item_action_onClick, _item_action;
return (_item_action = item.action) === null || _item_action === void 0 ? void 0 : (_item_action_onClick = _item_action.onClick) === null || _item_action_onClick === void 0 ? void 0 : _item_action_onClick.call(_item_action, e);
}
}, item.action.icon));
})))), document.body));
};
Popover.displayName = 'NutPopover';