@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
229 lines (228 loc) • 11 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Dialog", {
enumerable: true,
get: function() {
return Dialog;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _ts_generator = require("@swc/helpers/_/_ts_generator");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _reacttransitiongroup = require("react-transition-group");
var _iconsreact = require("@nutui/icons-react");
var _button = /*#__PURE__*/ _interop_require_default._(require("../button"));
var _confirm = /*#__PURE__*/ _interop_require_default._(require("./confirm"));
var _overlay = /*#__PURE__*/ _interop_require_default._(require("../overlay"));
var _content = require("./content");
var _overlay1 = require("../overlay/overlay");
var _configprovider = require("../configprovider");
var _mergeprops = require("../../utils/merge-props");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overlay1.defaultOverlayProps, _content.defaultContentProps), {
title: '',
content: '',
header: '',
footer: '',
confirmText: '',
cancelText: '',
closeOnOverlayClick: true,
hideConfirmButton: false,
hideCancelButton: false,
disableConfirmButton: false,
footerDirection: 'horizontal',
lockScroll: true,
closeIconPosition: 'bottom',
closeIcon: false,
overlay: true,
overlayStyle: {},
overlayClassName: 'nut-dialog-overlay',
zIndex: 1200,
beforeCancel: function beforeCancel() {
return true;
},
beforeClose: function beforeClose() {
return true;
},
onCancel: function onCancel() {},
onClose: function onClose() {},
onOverlayClick: function onOverlayClick() {
return true;
}
});
var BaseDialog = function BaseDialog(props, ref) {
var _mergeProps = (0, _mergeprops.mergeProps)(defaultProps, props), closeOnOverlayClick = _mergeProps.closeOnOverlayClick, confirmText = _mergeProps.confirmText, cancelText = _mergeProps.cancelText, children = _mergeProps.children, className = _mergeProps.className, closeIconPosition = _mergeProps.closeIconPosition, closeIcon = _mergeProps.closeIcon, content = _mergeProps.content, disableConfirmButton = _mergeProps.disableConfirmButton, footer = _mergeProps.footer, footerDirection = _mergeProps.footerDirection, header = _mergeProps.header, hideConfirmButton = _mergeProps.hideConfirmButton, hideCancelButton = _mergeProps.hideCancelButton, lockScroll = _mergeProps.lockScroll, overlay = _mergeProps.overlay, overlayStyle = _mergeProps.overlayStyle, overlayClassName = _mergeProps.overlayClassName, style = _mergeProps.style, title = _mergeProps.title, visible = _mergeProps.visible, zIndex = _mergeProps.zIndex, beforeCancel = _mergeProps.beforeCancel, beforeClose = _mergeProps.beforeClose, onClose = _mergeProps.onClose, onCancel = _mergeProps.onCancel, onConfirm = _mergeProps.onConfirm, onOverlayClick = _mergeProps.onOverlayClick;
var classPrefix = 'nut-dialog';
var locale = (0, _configprovider.useConfig)().locale;
var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), loading = _useState[0], setLoading = _useState[1];
var renderFooter = function renderFooter() {
if (footer === null) return '';
var handleCancel = function 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();
onCancel();
};
var handleOk = /*#__PURE__*/ function() {
var _ref = (0, _async_to_generator._)(function(e) {
var e1;
return (0, _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
];
}
});
});
return function handleOk(e) {
return _ref.apply(this, arguments);
};
}();
var btnClass = hideCancelButton || hideConfirmButton ? "".concat(classPrefix, "-footer-block") : '';
var renderCancelOfVertical = function renderCancelOfVertical() {
return !hideCancelButton && /*#__PURE__*/ _react.default.createElement("div", {
style: {
order: 2
},
className: "".concat(classPrefix, "-footer-cancel ").concat(btnClass),
onClick: function onClick(e) {
return handleCancel(e);
}
}, cancelText || locale.cancel);
};
var renderCancel = function renderCancel() {
return !hideCancelButton && /*#__PURE__*/ _react.default.createElement(_button.default, {
type: "default",
size: "large",
className: "".concat(classPrefix, "-footer-cancel ").concat(btnClass),
onClick: function onClick(e) {
return handleCancel(e);
}
}, cancelText || locale.cancel);
};
var renderConfirm = function renderConfirm() {
return !hideConfirmButton && /*#__PURE__*/ _react.default.createElement(_button.default, {
type: "primary",
size: "large",
className: (0, _classnames.default)("".concat(classPrefix, "-footer-ok ").concat(btnClass), {
disabled: disableConfirmButton
}),
disabled: disableConfirmButton,
onClick: function onClick(e) {
return handleOk(e);
},
loading: loading
}, confirmText || locale.confirm);
};
return footer || /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, footerDirection === 'vertical' ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderConfirm(), renderCancelOfVertical()) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderCancel(), renderConfirm()));
};
var renderCloseIcon = function renderCloseIcon() {
if (!closeIcon) return null;
var handleCancel = function handleCancel() {
if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel())) return;
if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose())) return;
onClose();
onCancel();
};
var _obj;
var closeClasses = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-close"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-close-").concat(closeIconPosition), true), _obj));
var systomIcon = closeIconPosition !== 'bottom' ? /*#__PURE__*/ _react.default.createElement(_iconsreact.Close, null) : /*#__PURE__*/ _react.default.createElement(_iconsreact.Failure, null);
return /*#__PURE__*/ _react.default.createElement("div", {
className: closeClasses,
onClick: handleCancel
}, /*#__PURE__*/ _react.default.isValidElement(closeIcon) ? closeIcon : systomIcon);
};
var onHandleClickOverlay = function onHandleClickOverlay(e) {
if (closeOnOverlayClick && visible && e.target === e.currentTarget) {
var closed = onOverlayClick && onOverlayClick(e);
closed && onClose();
closed && onCancel();
}
};
var renderContent = function renderContent() {
return /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
in: visible,
timeout: 300,
classNames: "fadeDialog",
unmountOnExit: true,
appear: true
}, /*#__PURE__*/ _react.default.createElement(_content.Content, {
className: className,
style: (0, _object_spread._)({
zIndex: zIndex
}, style),
title: title,
header: header,
close: renderCloseIcon(),
footer: renderFooter(),
footerDirection: footerDirection,
visible: visible
}, content || children));
};
return /*#__PURE__*/ _react.default.createElement("div", {
style: {
display: visible ? 'block' : 'none'
}
}, overlay && /*#__PURE__*/ _react.default.createElement(_overlay.default, {
zIndex: zIndex,
visible: visible,
style: overlayStyle,
className: overlayClassName,
closeOnOverlayClick: closeOnOverlayClick,
lockScroll: lockScroll,
onClick: onHandleClickOverlay
}), renderContent());
};
var Dialog = /*#__PURE__*/ (0, _react.forwardRef)(BaseDialog);
Dialog.confirm = function(props) {
return (0, _confirm.default)(props);
};
[
'alert'
].forEach(function() {
;
Dialog.alert = function(props) {
return (0, _confirm.default)((0, _object_spread._)({}, props));
};
});
Dialog.displayName = 'NutDialog';