react-antd-admin-panel
Version:
Modern TypeScript-first React admin panel builder with Ant Design 6
297 lines • 6.08 kB
JavaScript
/**
* Action - Clickable action builder with confirmation and callbacks
*
* Defines an action that can be triggered by user interaction.
* Supports confirmation dialogs, loading states, and callbacks.
*
* @example
* ```typescript
* // Submit action with confirmation
* const saveAction = new Action()
* .key('save')
* .label('Save Changes')
* .icon(<SaveOutlined />)
* .buttonType('primary')
* .confirm('Are you sure you want to save?')
* .onComplete(() => message.success('Saved!'))
* .onError(() => message.error('Failed'));
*
* // Callback action
* const deleteAction = new Action()
* .key('delete')
* .label('Delete')
* .buttonType('primary')
* .danger(true)
* .confirm({ content: 'Delete this item?', danger: true })
* .callback(async (action) => {
* await api.delete(itemId);
* });
*
* // Link action
* const viewAction = new Action()
* .key('view')
* .label('View Details')
* .type('link')
* .route('/users/123');
* ```
*/
export class Action {
_key;
_label;
_icon;
_tooltip;
_type = 'submit';
_buttonType = 'default';
_danger = false;
_disabled = false;
_loading = false;
_confirm;
_route;
_access;
// Callbacks
_callback;
_onComplete;
_onError;
/**
* Set action key/identifier
*/
key(value) {
this._key = value;
return this;
}
/**
* Get action key
*/
getKey() {
return this._key;
}
/**
* Set action label
*/
label(value) {
this._label = value;
return this;
}
/**
* Get action label
*/
getLabel() {
return this._label;
}
/**
* Set action icon
*/
icon(value) {
this._icon = value;
return this;
}
/**
* Get action icon
*/
getIcon() {
return this._icon;
}
/**
* Set tooltip text (also used as aria-label for icon-only buttons)
*/
tooltip(value) {
this._tooltip = value;
return this;
}
/**
* Get tooltip text
*/
getTooltip() {
return this._tooltip;
}
/**
* Set action type
*/
type(value) {
this._type = value;
return this;
}
/**
* Get action type
*/
getType() {
return this._type;
}
/**
* Set button type (Ant Design ButtonType)
*/
buttonType(value) {
this._buttonType = value;
return this;
}
/**
* Get button type
*/
getButtonType() {
return this._buttonType;
}
/**
* Set danger mode
*/
danger(value = true) {
this._danger = value;
return this;
}
/**
* Check if danger mode
*/
isDanger() {
return this._danger;
}
/**
* Set disabled state
*/
disabled(value = true) {
this._disabled = value;
return this;
}
/**
* Check if disabled
*/
isDisabled() {
return this._disabled;
}
/**
* Set loading state
*/
loading(value = true) {
this._loading = value;
return this;
}
/**
* Check if loading
*/
isLoading() {
return this._loading;
}
/**
* Set confirmation dialog (string shorthand or full config)
*/
confirm(value) {
this._confirm = typeof value === 'string'
? { content: value }
: value;
return this;
}
/**
* Get confirmation config
*/
getConfirm() {
return this._confirm;
}
/**
* Set route for link type actions
*/
route(value) {
this._route = value;
return this;
}
/**
* Get route
*/
getRoute() {
return this._route;
}
/**
* Set access requirements
*/
access(value) {
this._access = value;
return this;
}
/**
* Get access requirements
*/
getAccess() {
return this._access;
}
/**
* Set callback function for 'callback' type actions
*/
callback(fn) {
this._type = 'callback';
this._callback = fn;
return this;
}
/**
* Get callback function
*/
getCallback() {
return this._callback;
}
/**
* Set completion callback
*/
onComplete(fn) {
this._onComplete = fn;
return this;
}
/**
* Call completion callback
*/
callComplete(result) {
this._onComplete?.(result);
}
/**
* Set error callback
*/
onError(fn) {
this._onError = fn;
return this;
}
/**
* Call error callback
*/
callError(error) {
this._onError?.(error);
}
/**
* Execute the action's callback
* For 'callback' type actions
*/
async execute(args) {
if (this._type !== 'callback' || !this._callback) {
return;
}
this._loading = true;
try {
await this._callback(this, args);
this._onComplete?.();
}
catch (error) {
const err = error instanceof Error ? error : new Error(String(error));
this._onError?.(err);
throw err;
}
finally {
this._loading = false;
}
}
/**
* Clone this action
*/
clone() {
const cloned = new Action();
cloned._key = this._key;
cloned._label = this._label;
cloned._icon = this._icon;
cloned._type = this._type;
cloned._buttonType = this._buttonType;
cloned._danger = this._danger;
cloned._disabled = this._disabled;
cloned._confirm = this._confirm;
cloned._route = this._route;
cloned._access = this._access;
cloned._callback = this._callback;
cloned._onComplete = this._onComplete;
cloned._onError = this._onError;
return cloned;
}
}
export default Action;
//# sourceMappingURL=Action.js.map