@appbuckets/react-ui-smart-components
Version:
UI Extended Components that work with @appbuckets/react-client and @appbuckets/react-ui
402 lines (399 loc) • 13.7 kB
JavaScript
import {
__assign,
__read,
__awaiter,
__generator,
} from '../_virtual/_tslib.js';
import * as React from 'react';
import { useMountedState } from '@appbuckets/react-ui-core';
import Box from '@appbuckets/react-ui/Box';
import Button from '@appbuckets/react-ui/Button';
import Header from '@appbuckets/react-ui/Header';
import Modal from '@appbuckets/react-ui/Modal';
import QuerySuspenseError from '../QuerySuspenseError/QuerySuspenseError.js';
import useActionBuilder from './lib/useActionBuilder.js';
import useActionNotification from './lib/useActionNotifications.js';
import assertUniqueComponentName from '../utils/assertUniqueComponentName.js';
/* --------
* Builder Function Definition
* -------- */
function buildConfirmAction(configuration) {
var _this = this;
// ----
// Deconstruct base configuration object
// ----
var // Strict
// Content Element
ConfirmContent = configuration.Content,
defaultDefinedDisplayName = configuration.displayName,
// Buttons
defaultDefinedCancelButton = configuration.cancelButton,
defaultDefinedSubmitButton = configuration.submitButton,
// Action Notification
defaultDefinedToastSettings = configuration.toast,
// Local
// Props Builder
defaultPropsBuilder = configuration.defaultProps,
overridePropsBuilder = configuration.overrideProps;
// ----
// Check multiple displayName in development mode only
// ----
assertUniqueComponentName(defaultDefinedDisplayName, 'confirm');
// ----
// Define the Built Component
// ----
var Confirm = function (userDefinedProps) {
// ----
// Build Component Props
// ----
/** Compute default props */
var defaultProps =
typeof defaultPropsBuilder === 'function'
? defaultPropsBuilder(userDefinedProps)
: defaultPropsBuilder;
/** Compute override props */
var overrideProps =
typeof overridePropsBuilder === 'function'
? overridePropsBuilder(
__assign(__assign({}, defaultProps), userDefinedProps)
)
: overridePropsBuilder;
/** Merge all props into a single props object */
var props = __assign(
__assign(__assign({}, defaultProps), userDefinedProps),
overrideProps
);
// ----
// Deconstruct Props
// ----
var // Buttons
userDefinedCancelButton = props.cancelButton,
userDefinedSubmitButton = props.submitButton,
// Modal Props
renderAsModal = props.modal,
userDefinedModalProps = props.modalProps;
// ----
// Hooks and State Definition
// ----
var _a =
// eslint-disable-next-line max-len
useActionBuilder(configuration, props),
actionHelpers = _a.actionHelpers,
couldRenderActionButton = _a.couldRenderActionButton,
open = _a.open,
handleModalOpen = _a.handleModalOpen,
handleModalClose = _a.handleModalClose,
trigger = _a.trigger,
onCancel = _a.onCancel,
onCompleted = _a.onCompleted,
onSubmit = _a.onSubmit,
onSubmitError = _a.onSubmitError;
var notify = useActionNotification(
actionHelpers.toast,
__assign({}, defaultDefinedToastSettings)
);
var _b = __read(useMountedState(false), 2),
isPerformingAction = _b[0],
setIsPerformingAction = _b[1];
// ----
// Assertion
// ----
React.useEffect(
function () {
/** Assert isPerformingAction is falsy on open */
if (renderAsModal && open) {
setIsPerformingAction(false);
}
},
[renderAsModal, open, setIsPerformingAction]
);
// ----
// Handlers
// ----
var handleSubmitClick = function (event) {
return __awaiter(_this, void 0, void 0, function () {
var result, error_1, catchFunctionError_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 5, , 11]);
result = null;
/** Change the Internal State */
setIsPerformingAction(true);
if (!(typeof onSubmit === 'function')) return [3 /*break*/, 2];
return [4 /*yield*/, onSubmit(actionHelpers, props)];
case 1:
/** Await the result */
result = _a.sent();
_a.label = 2;
case 2:
if (!(typeof onCompleted === 'function')) return [3 /*break*/, 4];
/** Await function completion */
return [4 /*yield*/, onCompleted(result, actionHelpers, props)];
case 3:
/** Await function completion */
_a.sent();
_a.label = 4;
case 4:
/** Raise the Submitted Notification */
notify.raiseOnSubmitted();
/** If has been rendered as modal, close it */
if (renderAsModal) {
handleModalClose(event, userDefinedModalProps || {});
} else {
setIsPerformingAction(false);
}
return [3 /*break*/, 11];
case 5:
error_1 = _a.sent();
/** Raise the onError notification */
notify.raiseOnError(error_1);
/** If there is no function set to catch the error, purge the loading state */
if (typeof onSubmitError !== 'function') {
setIsPerformingAction(false);
return [2 /*return*/];
}
_a.label = 6;
case 6:
_a.trys.push([6, 8, 9, 10]);
/** Await catch error function */
return [
4 /*yield*/,
onSubmitError(error_1, actionHelpers, props),
];
case 7:
/** Await catch error function */
_a.sent();
/** Restore State */
setIsPerformingAction(false);
return [3 /*break*/, 10];
case 8:
catchFunctionError_1 = _a.sent();
/** Log error in development mode only */
if (process.env.NODE_ENV === 'development') {
global.console.warn(
'[ @appbuckets/react-ui-smart-components ] : an error occurred on onSubmitError handler.',
catchFunctionError_1
);
}
return [3 /*break*/, 10];
case 9:
/** Restore State */
setIsPerformingAction(false);
return [7 /*endfinally*/];
case 10:
return [3 /*break*/, 11];
case 11:
return [2 /*return*/];
}
});
});
};
var handleCancelClick = function (event) {
return __awaiter(_this, void 0, void 0, function () {
var error_2;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 3, , 4]);
if (!(typeof onCancel === 'function')) return [3 /*break*/, 2];
/** Change the Internal State */
setIsPerformingAction(true);
/** Fire the onCancel Handler */
return [4 /*yield*/, onCancel(actionHelpers, props)];
case 1:
/** Fire the onCancel Handler */
_a.sent();
_a.label = 2;
case 2:
/** Close the Modal is Confirm is rendered as it */
if (renderAsModal) {
handleModalClose(event, userDefinedModalProps || {});
} else {
setIsPerformingAction(false);
}
/** Raise the onCanceled Notification */
notify.raiseOnCanceled();
return [3 /*break*/, 4];
case 3:
error_2 = _a.sent();
/** Remove the Internal State */
setIsPerformingAction(false);
/** Log error in development mode only */
if (process.env.NODE_ENV === 'development') {
global.console.warn(
'[ @appbuckets/react-ui-smart-components ] : an error occurred on onCancel handler.',
error_2
);
}
return [3 /*break*/, 4];
case 4:
return [2 /*return*/];
}
});
});
};
// ----
// Buttons Definition
// ----
var cancelButton = (function () {
/** Check if cancel button must be render */
if (
!couldRenderActionButton(
userDefinedCancelButton,
defaultDefinedCancelButton
)
) {
return null;
}
/** Return the Button from Shorthand function */
return Button.create(
userDefinedCancelButton || defaultDefinedCancelButton,
{
autoGenerateKey: false,
overrideProps: function (subComponentProps) {
return {
disabled: isPerformingAction,
loading: isPerformingAction,
onClick: function (event, buttonProps) {
return __awaiter(_this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
/** Check if a user defined onClick handler exists */
if (typeof subComponentProps.onClick === 'function') {
subComponentProps.onClick(event, buttonProps);
}
/** Handle click cancel button */
return [4 /*yield*/, handleCancelClick(event)];
case 1:
/** Handle click cancel button */
_a.sent();
return [2 /*return*/];
}
});
});
},
};
},
}
);
})();
var submitButton = (function () {
/** Check if submit button must be render */
if (
!couldRenderActionButton(
userDefinedSubmitButton,
defaultDefinedSubmitButton
)
) {
return null;
}
/** Return the Button from Shorthand function */
return Button.create(
userDefinedSubmitButton || defaultDefinedSubmitButton,
{
autoGenerateKey: false,
defaultProps: {
primary: true,
autoFocus: true,
type: 'submit',
},
overrideProps: function (subComponentProps) {
return {
disabled: isPerformingAction,
loading: isPerformingAction,
onClick: function (event, buttonProps) {
return __awaiter(_this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
/** Check if a user defined onClick handler exists */
if (typeof subComponentProps.onClick === 'function') {
subComponentProps.onClick(event, buttonProps);
}
/** Handle click confirm button */
return [4 /*yield*/, handleSubmitClick(event)];
case 1:
/** Handle click confirm button */
_a.sent();
return [2 /*return*/];
}
});
});
},
};
},
}
);
})();
// ----
// Render Component as plain element
// ----
if (!renderAsModal) {
return React.createElement(
React.Fragment,
null,
(userDefinedModalProps === null || userDefinedModalProps === void 0
? void 0
: userDefinedModalProps.header) &&
Header.create(userDefinedModalProps.header, {
autoGenerateKey: false,
}),
ConfirmContent &&
React.createElement(ConfirmContent, __assign({}, props)),
actionHelpers.error &&
React.createElement(
QuerySuspenseError,
__assign({}, actionHelpers.error)
),
(cancelButton || submitButton) &&
React.createElement(
Box,
{ my: 4, textAlign: 'right' },
cancelButton,
submitButton
)
);
}
// ----
// Render Component as modal element
// ----
return React.createElement(
Modal,
__assign({}, userDefinedModalProps, {
closeIcon: null,
closeOnBackdropClick: false,
closeOnEscape: false,
open: open,
onOpen: handleModalOpen,
onClose: handleModalClose,
trigger: trigger,
}),
ConfirmContent &&
React.createElement(ConfirmContent, __assign({}, props)),
actionHelpers.error &&
React.createElement(
QuerySuspenseError,
__assign({}, actionHelpers.error)
),
(cancelButton || submitButton) &&
React.createElement(Modal.Actions, null, cancelButton, submitButton)
);
};
// ----
// Add the Extension Function
// ----
Confirm.extend = function (newConfig) {
return buildConfirmAction(__assign(__assign({}, configuration), newConfig));
};
// ----
// Set the Display Name
// ----
Confirm.displayName = defaultDefinedDisplayName;
// ----
// Return the Component
// ----
return Confirm;
}
export { buildConfirmAction as default };