@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
260 lines (259 loc) • 12.5 kB
JavaScript
import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
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 _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
import React, { useState } from "react";
import classNames from "classnames";
import { View } from "@tarojs/components";
import { Failure, Close } from "@nutui/icons-react-taro";
import Button from "../button/index";
import { Content, defaultContentProps } from "./content";
import { useConfig } from "../configprovider/configprovider";
import Overlay from "../overlay/index";
import { defaultOverlayProps } from "../overlay/overlay";
import { customEvents, useCustomEvent, useCustomEventsPath, useParams } from "../../hooks/taro/use-custom-event";
import { useLockScrollTaro } from "../../hooks/taro/use-lock-scoll";
import { mergeProps } from "../../utils/merge-props";
import { harmony } from "../../utils/taro/platform";
var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps, defaultContentProps), {
title: '',
content: '',
header: '',
footer: '',
cancelBadge: '',
confirmBadge: '',
confirmText: '',
cancelText: '',
hideConfirmButton: false,
hideCancelButton: false,
disableConfirmButton: false,
footerDirection: 'horizontal',
closeIconPosition: 'bottom',
closeIcon: false,
overlay: true,
overlayStyle: {},
overlayClassName: 'nut-dialog-overlay',
zIndex: 1200,
beforeCancel: function() {
return true;
},
beforeClose: function() {
return true;
},
onCancel: function() {},
onClose: function() {},
onConfirm: function() {},
onOverlayClick: function() {
return true;
}
});
export var BaseDialog = function(props) {
var _useParams = useParams(mergeProps(defaultProps, props)), _useParams_params = _useParams.params, id = _useParams_params.id, closeOnOverlayClick = _useParams_params.closeOnOverlayClick, confirmText = _useParams_params.confirmText, cancelText = _useParams_params.cancelText, children = _useParams_params.children, className = _useParams_params.className, closeIconPosition = _useParams_params.closeIconPosition, closeIcon = _useParams_params.closeIcon, content = _useParams_params.content, disableConfirmButton = _useParams_params.disableConfirmButton, footer = _useParams_params.footer, footerDirection = _useParams_params.footerDirection, header = _useParams_params.header, cancelBadge = _useParams_params.cancelBadge, confirmBadge = _useParams_params.confirmBadge, hideConfirmButton = _useParams_params.hideConfirmButton, hideCancelButton = _useParams_params.hideCancelButton, lockScroll = _useParams_params.lockScroll, overlay = _useParams_params.overlay, overlayStyle = _useParams_params.overlayStyle, overlayClassName = _useParams_params.overlayClassName, style = _useParams_params.style, title = _useParams_params.title, visible = _useParams_params.visible, zIndex = _useParams_params.zIndex, beforeCancel = _useParams_params.beforeCancel, beforeClose = _useParams_params.beforeClose, onClose = _useParams_params.onClose, onCancel = _useParams_params.onCancel, onConfirm = _useParams_params.onConfirm, onOverlayClick = _useParams_params.onOverlayClick, setParams = _useParams.setParams;
var classPrefix = 'nut-dialog';
var locale = useConfig().locale;
var _useState = _sliced_to_array(useState(false), 2), loading = _useState[0], setLoading = _useState[1];
useCustomEvent(id, function(param) {
var status = param.status, options = param.options;
setParams(_object_spread_props(_object_spread({}, options), {
visible: status
}));
});
var refObject = useLockScrollTaro(!!(visible && lockScroll));
var renderFooter = function() {
if (footer === null) return '';
var handleCancel = function(e) {
e.stopPropagation();
if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel())) return;
onCancel();
};
var handleOk = function(e) {
return _async_to_generator(function() {
var e1;
return _ts_generator(this, function(_state) {
switch(_state.label){
case 0:
e.stopPropagation();
setLoading(true);
_state.label = 1;
case 1:
_state.trys.push([
1,
3,
,
4
]);
return [
4,
onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(e)
];
case 2:
_state.sent();
setLoading(false);
onClose();
return [
3,
4
];
case 3:
e1 = _state.sent();
setLoading(false);
return [
3,
4
];
case 4:
return [
2
];
}
});
})();
};
var btnClass = hideCancelButton || hideConfirmButton ? "".concat(classPrefix, "-footer-block") : '';
var renderCancelOfVertical = function() {
return !hideCancelButton && /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-footer-cancel ").concat(btnClass),
onClick: function(e) {
return handleCancel(e);
}
}, cancelText || locale.cancel);
};
var renderCancel = function() {
return !hideCancelButton && /*#__PURE__*/ React.createElement(React.Fragment, null, cancelBadge ? /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-footer-cancel-container")
}, /*#__PURE__*/ React.createElement(Button, {
type: "default",
size: "large",
className: "".concat(classPrefix, "-footer-cancel ").concat(btnClass),
onClick: function(e) {
return handleCancel(e);
}
}, cancelText || locale.cancel), cancelBadge ? /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-footer-cancel-badge")
}, cancelBadge) : null) : /*#__PURE__*/ React.createElement(Button, {
type: "default",
size: "large",
className: "".concat(classPrefix, "-footer-cancel ").concat(btnClass),
onClick: function(e) {
return handleCancel(e);
}
}, cancelText || locale.cancel));
};
var renderConfirm = function() {
return !hideConfirmButton && /*#__PURE__*/ React.createElement(React.Fragment, null, confirmBadge ? /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-footer-ok-container")
}, /*#__PURE__*/ React.createElement(Button, {
type: "primary",
size: "large",
className: classNames("".concat(classPrefix, "-footer-ok ").concat(btnClass), {
disabled: disableConfirmButton
}),
disabled: disableConfirmButton,
onClick: function(e) {
return handleOk(e);
},
loading: loading
}, confirmText || locale.confirm), confirmBadge ? /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-footer-ok-badge")
}, confirmBadge) : null) : /*#__PURE__*/ React.createElement(Button, {
type: "primary",
size: "large",
className: classNames("".concat(classPrefix, "-footer-ok ").concat(btnClass), {
disabled: disableConfirmButton
}),
disabled: disableConfirmButton,
onClick: function(e) {
return handleOk(e);
},
loading: loading
}, confirmText || locale.confirm));
};
return footer || /*#__PURE__*/ React.createElement(React.Fragment, null, footerDirection === 'vertical' ? /*#__PURE__*/ React.createElement(React.Fragment, null, renderConfirm(), renderCancelOfVertical()) : /*#__PURE__*/ React.createElement(React.Fragment, null, renderCancel(), renderConfirm()));
};
var renderCloseIcon = function() {
if (!closeIcon) return null;
var handleClose = function() {
if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose())) return;
onClose();
};
var _obj;
var closeClasses = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-close"), true), _define_property(_obj, "".concat(classPrefix, "-close-").concat(closeIconPosition), true), _obj));
var systomIcon = closeIconPosition !== 'bottom' ? /*#__PURE__*/ React.createElement(Close, null) : /*#__PURE__*/ React.createElement(Failure, null);
return /*#__PURE__*/ React.createElement(View, {
className: closeClasses,
onClick: handleClose,
ariaRole: "button",
ariaLabel: locale.close,
// @ts-ignore
tabIndex: 0
}, /*#__PURE__*/ React.isValidElement(closeIcon) ? closeIcon : systomIcon);
};
var onHandleClickOverlay = function(e) {
if (closeOnOverlayClick && visible && e.target === e.currentTarget) {
var closed = onOverlayClick && onOverlayClick(e);
closed && onCancel();
}
};
var renderContent = function() {
var contentZIndex = harmony() ? zIndex + 1 : zIndex // 解决harmony层级问题
;
return (
// <CSSTransition
// in={visible}
// timeout={300}
// classNames="fadeDialog"
// unmountOnExit
// appear
// >
/*#__PURE__*/ (React.createElement(Content, {
className: className,
style: _object_spread_props(_object_spread({
zIndex: contentZIndex
}, style), {
display: visible ? 'block' : 'none'
}),
title: title,
header: header,
close: renderCloseIcon(),
footer: renderFooter(),
footerDirection: footerDirection,
visible: visible
}, content || children))
);
};
return /*#__PURE__*/ React.createElement(View, {
style: {
display: visible ? 'block' : 'none'
},
ref: refObject,
catchMove: lockScroll
}, overlay && /*#__PURE__*/ React.createElement(Overlay, {
zIndex: zIndex,
visible: visible,
style: overlayStyle,
className: overlayClassName,
closeOnOverlayClick: closeOnOverlayClick,
lockScroll: lockScroll,
onClick: onHandleClickOverlay
}), renderContent());
};
export function open(selector, options) {
// eslint-disable-next-line react-hooks/rules-of-hooks
var path = useCustomEventsPath(selector);
customEvents.trigger(path, {
status: true,
options: options
});
}
export function close(selector) {
// eslint-disable-next-line react-hooks/rules-of-hooks
var path = useCustomEventsPath(selector);
customEvents.trigger(path, {
status: false
});
}
BaseDialog.displayName = 'NutDialog';
BaseDialog.open = open;
BaseDialog.close = close;