@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
163 lines (162 loc) • 6.93 kB
JavaScript
import { a as __awaiter } from "./tslib.es6-iWu3F_1J.js";
import React__default, { useState } from "react";
import classNames from "classnames";
import { CSSTransition } from "react-transition-group";
import { View } from "@tarojs/components";
import { Close } from "@nutui/icons-react-taro";
import { B as Button } from "./button.taro-CixO32Hw.js";
import { u as useConfig } from "./configprovider.taro-DpK4IiCE.js";
import { u as useLockScrollTaro, O as Overlay } from "./overlay.taro-C8eXSsJH.js";
import { b as useParams, u as useCustomEvent, a as useCustomEventsPath, c as customEvents } from "./use-custom-event-DuP4onEm.js";
import { m as mergeProps } from "./merge-props-2rRqFlJz.js";
const Content = (props) => {
const { visible, title, header, footer, close: close2, footerDirection, onClick, children } = props;
const classPrefix = "nut-dialog";
const renderHeader = () => {
return title ? React__default.createElement("div", { className: `${classPrefix}-header` }, title) : null;
};
const renderFooter = () => {
return footer ? React__default.createElement("div", { className: classNames(`${classPrefix}-footer`, {
[footerDirection]: footerDirection
}) }, footer) : null;
};
const handleClick = (e) => {
onClick && onClick(e);
};
return React__default.createElement(
"div",
{ className: classNames(`${classPrefix}-outer`, props.className), style: props.style, onClick: (e) => handleClick(e) },
close2,
header,
React__default.createElement(
"div",
{ className: classPrefix, style: { display: visible ? "flex" : "none" } },
renderHeader(),
React__default.createElement(
"div",
{ className: `${classPrefix}-content` },
React__default.createElement(React__default.Fragment, null, children)
),
renderFooter()
)
);
};
Content.displayName = "NutContent";
const defaultProps = {
title: "",
content: "",
header: "",
footer: "",
confirmText: "",
cancelText: "",
overlay: true,
closeOnOverlayClick: true,
hideConfirmButton: false,
hideCancelButton: false,
disableConfirmButton: false,
footerDirection: "horizontal",
lockScroll: true,
closeIconPosition: "bottom",
closeIcon: false,
beforeCancel: () => true,
beforeClose: () => true,
onOverlayClick: () => true
};
const BaseDialog = (props) => {
const classPrefix = "nut-dialog";
const { locale } = useConfig();
const [loading, setLoading] = useState(false);
const { params: { id, className, style, visible, footer, title, header, content, children, footerDirection, hideConfirmButton, hideCancelButton, lockScroll, disableConfirmButton, closeOnOverlayClick, onOverlayClick, confirmText, cancelText, overlay, closeIconPosition, closeIcon, onClose, onCancel, onConfirm, beforeCancel, beforeClose }, setParams } = useParams(mergeProps(defaultProps, props));
useCustomEvent(id, ({ status, options }) => {
if (status) {
setParams(Object.assign(Object.assign({}, options), { visible: true }));
} else {
setParams(Object.assign(Object.assign({}, options), { visible: false }));
}
});
const refObject = useLockScrollTaro(!!(visible && lockScroll));
const renderFooter = () => {
if (footer === null)
return "";
const handleCancel = (e) => {
e.stopPropagation();
if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel()))
return;
if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose()))
return;
onClose === null || onClose === void 0 ? void 0 : onClose();
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
};
const handleOk = (e) => __awaiter(void 0, void 0, void 0, function* () {
e.stopPropagation();
setLoading(true);
try {
yield onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(e);
setLoading(false);
onClose === null || onClose === void 0 ? void 0 : onClose();
} catch (_a) {
setLoading(false);
}
});
return footer || React__default.createElement(
React__default.Fragment,
null,
!hideCancelButton && React__default.createElement(Button, { type: "default", className: `${classPrefix}-footer-cancel`, onClick: (e) => handleCancel(e) }, cancelText || locale.cancel),
!hideConfirmButton && React__default.createElement(Button, { type: "primary", className: classNames(`${classPrefix}-footer-ok`, {
disabled: disableConfirmButton
}), disabled: disableConfirmButton, onClick: (e) => handleOk(e), loading }, confirmText || locale.confirm)
);
};
const renderCloseIcon = () => {
if (!closeIcon)
return null;
const handleCancel = () => {
if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel()))
return;
if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose()))
return;
onClose === null || onClose === void 0 ? void 0 : onClose();
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
};
const closeClasses = classNames({
[`${classPrefix}-close`]: true,
[`${classPrefix}-close-${closeIconPosition}`]: true
});
return React__default.createElement(View, { className: closeClasses, onClick: handleCancel }, React__default.isValidElement(closeIcon) ? closeIcon : React__default.createElement(Close, null));
};
const onHandleClickOverlay = (e) => {
if (closeOnOverlayClick && visible && e.target === e.currentTarget) {
const closed = onOverlayClick && onOverlayClick();
closed && (onClose === null || onClose === void 0 ? void 0 : onClose());
closed && (onCancel === null || onCancel === void 0 ? void 0 : onCancel());
}
};
return React__default.createElement(
View,
{ style: { display: visible ? "block" : "none" }, ref: refObject, catchMove: lockScroll },
React__default.createElement(
React__default.Fragment,
null,
overlay ? React__default.createElement(Overlay, { visible, closeOnOverlayClick, lockScroll, onClick: onHandleClickOverlay, className: classNames("nut-dialog-overlay") }) : null,
React__default.createElement(
CSSTransition,
{ in: visible, timeout: 300, classNames: "fadeDialog", unmountOnExit: true, appear: true },
React__default.createElement(Content, { className, style, title, header, close: renderCloseIcon(), footer: renderFooter(), footerDirection, visible }, content || children)
)
)
);
};
function open(selector, options) {
const path = useCustomEventsPath(selector);
customEvents.trigger(path, { status: true, options });
}
function close(selector) {
const path = useCustomEventsPath(selector);
customEvents.trigger(path, { status: false });
}
BaseDialog.displayName = "NutDialog";
BaseDialog.open = open;
BaseDialog.close = close;
export {
BaseDialog as B
};