@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
89 lines • 5.98 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AnimatedDialog = AnimatedDialog;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_1 = require("react");
var AnimatedDialog_module_scss_1 = tslib_1.__importDefault(require("./AnimatedDialog.module.scss"));
var Dialog_1 = require("@fluentui/react/lib/Dialog");
var Icon_1 = require("@fluentui/react/lib/Icon");
var Button_1 = require("@fluentui/react/lib/Button");
var Spinner_1 = require("@fluentui/react/lib/Spinner");
// eslint-disable-next-line @typescript-eslint/no-require-imports
require('animate.css/animate.min.css');
var animationPrefix = "animate__";
var mainAnimationClass = "".concat(animationPrefix, "animated");
var defaultDialogAnimationClass = "".concat(animationPrefix, "bounceIn");
var defaultIconAnimationClass = "".concat(animationPrefix, "zoomIn");
function AnimatedDialog(props) {
var _this = this;
var _a = (0, react_1.useState)(props), dialogProps = _a[0], setDialogProps = _a[1];
var _b = (0, react_1.useState)(props.dialogContentProps), animatedDialogContentProps = _b[0], setAnimatedDialogContentProps = _b[1];
var _c = (0, react_1.useState)(null), animatedDialogFooter = _c[0], setAnimatedDialogFooter = _c[1];
var _d = (0, react_1.useState)(false), loading = _d[0], setLoading = _d[1];
var dialogAnimationInType = props.dialogAnimationInType, dialogAnimationOutType = props.dialogAnimationOutType, iconName = props.iconName, iconAnimationType = props.iconAnimationType, modalProps = props.modalProps, dialogContentProps = props.dialogContentProps, showAnimatedDialogFooter = props.showAnimatedDialogFooter, okButtonText = props.okButtonText, cancelButtonText = props.cancelButtonText;
var currentContainerClass = modalProps && modalProps.containerClassName;
var containerAnimationClass = "".concat(currentContainerClass, " ").concat(mainAnimationClass, " ").concat(animationPrefix, "fast");
var getAnimatedDialogFooter = function () {
return showAnimatedDialogFooter ?
React.createElement("div", { className: AnimatedDialog_module_scss_1.default.animatedDialogFooter },
React.createElement(Button_1.PrimaryButton, { onClick: function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
setLoading(true);
_b.label = 1;
case 1:
_b.trys.push([1, 3, , 4]);
return [4 /*yield*/, props.onOkClick()];
case 2:
_b.sent();
props.onSuccess();
return [3 /*break*/, 4];
case 3:
_a = _b.sent();
props.onError();
return [3 /*break*/, 4];
case 4:
setLoading(false);
return [2 /*return*/];
}
});
}); }, disabled: loading, text: !loading && (okButtonText ? okButtonText : "Ok"), iconProps: !loading && { iconName: 'CheckMark' } }, loading && React.createElement(Spinner_1.Spinner, { size: Spinner_1.SpinnerSize.medium })),
React.createElement(Button_1.DefaultButton, { onClick: props.onDismiss, text: cancelButtonText ? cancelButtonText : "Cancel", disabled: loading, iconProps: { iconName: 'Cancel' } })) : null;
};
(0, react_1.useEffect)(function () {
var title = dialogContentProps && dialogContentProps.title;
if (iconName) {
title =
React.createElement("div", { className: AnimatedDialog_module_scss_1.default.animatedDialogTitleContainer },
React.createElement(Icon_1.Icon, { iconName: iconName, className: iconAnimationType ?
"".concat(mainAnimationClass, " ").concat(animationPrefix).concat(iconAnimationType) :
"".concat(mainAnimationClass, " ").concat(defaultIconAnimationClass) }),
React.createElement("br", null),
React.createElement("span", null, dialogContentProps && dialogContentProps.title));
}
setAnimatedDialogContentProps(tslib_1.__assign(tslib_1.__assign({}, dialogContentProps), { title: title }));
}, []);
(0, react_1.useEffect)(function () {
setAnimatedDialogFooter(getAnimatedDialogFooter());
}, [loading]);
(0, react_1.useEffect)(function () {
var containerClassName = "".concat(containerAnimationClass, " ").concat(defaultDialogAnimationClass);
if (props.dialogAnimationInType) {
containerClassName = "".concat(containerAnimationClass, " ").concat(animationPrefix).concat(dialogAnimationInType);
}
if (props.hidden) {
containerClassName = "".concat(containerAnimationClass, " ");
containerClassName += dialogAnimationOutType ?
"".concat(animationPrefix).concat(dialogAnimationOutType) :
"".concat(animationPrefix, "zoomOut");
}
setDialogProps(tslib_1.__assign(tslib_1.__assign({}, props), { dialogContentProps: animatedDialogContentProps, modalProps: tslib_1.__assign(tslib_1.__assign({}, modalProps), { containerClassName: containerClassName }) }));
}, [props.hidden]);
return (React.createElement(Dialog_1.Dialog, tslib_1.__assign({}, dialogProps),
props.children,
animatedDialogFooter));
}
//# sourceMappingURL=AnimatedDialog.js.map