@appbuckets/react-ui-smart-components
Version:
UI Extended Components that work with @appbuckets/react-client and @appbuckets/react-ui
448 lines (441 loc) • 15.2 kB
JavaScript
;
var _tslib = require('../_virtual/_tslib.js');
var React = require('react');
var reactUiCore = require('@appbuckets/react-ui-core');
var Box = require('@appbuckets/react-ui/Box');
var Button = require('@appbuckets/react-ui/Button');
var Header = require('@appbuckets/react-ui/Header');
var Modal = require('@appbuckets/react-ui/Modal');
var QuerySuspenseError = require('../QuerySuspenseError/QuerySuspenseError.js');
var useActionBuilder = require('./lib/useActionBuilder.js');
var useActionNotifications = require('./lib/useActionNotifications.js');
var assertUniqueComponentName = require('../utils/assertUniqueComponentName.js');
function _interopDefaultLegacy(e) {
return e && typeof e === 'object' && 'default' in e ? e : { default: e };
}
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(
n,
k,
d.get
? d
: {
enumerable: true,
get: function () {
return e[k];
},
}
);
}
});
}
n['default'] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/ _interopNamespace(React);
var Box__default = /*#__PURE__*/ _interopDefaultLegacy(Box);
var Button__default = /*#__PURE__*/ _interopDefaultLegacy(Button);
var Header__default = /*#__PURE__*/ _interopDefaultLegacy(Header);
var Modal__default = /*#__PURE__*/ _interopDefaultLegacy(Modal);
/* --------
* 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(
_tslib.__assign(_tslib.__assign({}, defaultProps), userDefinedProps)
)
: overridePropsBuilder;
/** Merge all props into a single props object */
var props = _tslib.__assign(
_tslib.__assign(_tslib.__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 = useActionNotifications(
actionHelpers.toast,
_tslib.__assign({}, defaultDefinedToastSettings)
);
var _b = _tslib.__read(reactUiCore.useMountedState(false), 2),
isPerformingAction = _b[0],
setIsPerformingAction = _b[1];
// ----
// Assertion
// ----
React__namespace.useEffect(
function () {
/** Assert isPerformingAction is falsy on open */
if (renderAsModal && open) {
setIsPerformingAction(false);
}
},
[renderAsModal, open, setIsPerformingAction]
);
// ----
// Handlers
// ----
var handleSubmitClick = function (event) {
return _tslib.__awaiter(_this, void 0, void 0, function () {
var result, error_1, catchFunctionError_1;
return _tslib.__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 _tslib.__awaiter(_this, void 0, void 0, function () {
var error_2;
return _tslib.__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__default['default'].create(
userDefinedCancelButton || defaultDefinedCancelButton,
{
autoGenerateKey: false,
overrideProps: function (subComponentProps) {
return {
disabled: isPerformingAction,
loading: isPerformingAction,
onClick: function (event, buttonProps) {
return _tslib.__awaiter(_this, void 0, void 0, function () {
return _tslib.__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__default['default'].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 _tslib.__awaiter(_this, void 0, void 0, function () {
return _tslib.__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__namespace.createElement(
React__namespace.Fragment,
null,
(userDefinedModalProps === null || userDefinedModalProps === void 0
? void 0
: userDefinedModalProps.header) &&
Header__default['default'].create(userDefinedModalProps.header, {
autoGenerateKey: false,
}),
ConfirmContent &&
React__namespace.createElement(
ConfirmContent,
_tslib.__assign({}, props)
),
actionHelpers.error &&
React__namespace.createElement(
QuerySuspenseError,
_tslib.__assign({}, actionHelpers.error)
),
(cancelButton || submitButton) &&
React__namespace.createElement(
Box__default['default'],
{ my: 4, textAlign: 'right' },
cancelButton,
submitButton
)
);
}
// ----
// Render Component as modal element
// ----
return React__namespace.createElement(
Modal__default['default'],
_tslib.__assign({}, userDefinedModalProps, {
closeIcon: null,
closeOnBackdropClick: false,
closeOnEscape: false,
open: open,
onOpen: handleModalOpen,
onClose: handleModalClose,
trigger: trigger,
}),
ConfirmContent &&
React__namespace.createElement(
ConfirmContent,
_tslib.__assign({}, props)
),
actionHelpers.error &&
React__namespace.createElement(
QuerySuspenseError,
_tslib.__assign({}, actionHelpers.error)
),
(cancelButton || submitButton) &&
React__namespace.createElement(
Modal__default['default'].Actions,
null,
cancelButton,
submitButton
)
);
};
// ----
// Add the Extension Function
// ----
Confirm.extend = function (newConfig) {
return buildConfirmAction(
_tslib.__assign(_tslib.__assign({}, configuration), newConfig)
);
};
// ----
// Set the Display Name
// ----
Confirm.displayName = defaultDefinedDisplayName;
// ----
// Return the Component
// ----
return Confirm;
}
module.exports = buildConfirmAction;