@arteneo/forge
v4.0.0
Published
Forge
Downloads
167
Readme
Future plans
Read more in Unfinished components
Development
- Install dependencies using
npm install
. - Build package using
npm run build
. - Update
version
inpackage.json
. - Commit and push changes.
- Publish package using
npm publish
.
Branches
You can use following branches:
main
(default) - branch for current version4.x
v3
- branch for version3.x
v2
- branch for version2.x
v1
- branch for version1.x
Table functionality
Toolbar
Batch actions
You can enable batch select (selectable rows via checkboxes in the table) by passing enableBatchSelect: true
to <Table />
component.
There are following components available:
BatchAlertConfirm
: UsesDialogBatchAlertConfirm
which shows anAlert
and usesDialogBatchButtonEndpoint
(single endpoint)BatchAlertConfirmMulti
: UsesDialogBatchAlertConfirmMulti
which shows anAlert
and usesDialogBatchButtonMultiEndpoint
(multiple endpoints one by one)BatchConfirm
: UsesDialogBatchConfirm
which needs children and usesDialogBatchButtonEndpoint
(single endpoint)BatchConfirmMulti
: UsesDialogBatchConfirmMulti
which needs children and usesDialogBatchButtonMultiEndpoint
(multiple endpoints one by one)BatchForm
: UsesDialogBatchFormFieldset
which needs fields (single endpoint)BatchFormAlert
: UsesDialogBatchFormAlertFieldset
which shows anAlert
and needs fields (single endpoint)BatchFormMulti
: UsesDialogBatchFormMultiFieldset
which needs fields (multiple endpoints based on form values)BatchFormMultiAlert
: UsesDialogBatchFormMultiAlertFieldset
which shows anAlert
and needs fields (multiple endpoints based on form values)
Example BatchAlertConfirm
usage.
import React from "react";
import { Optional, BatchAlertConfirm, BatchAlertConfirmProps } from "@arteneo/forge";
type BatchDisableProps = Optional<BatchAlertConfirmProps, "dialogProps">;
const BatchDisable = (props: BatchDisableProps) => {
return (
<BatchAlertConfirm
{...{
label: "batch.device.disable.action",
...props,
dialogProps: {
label: "batch.device.disable.label",
...props.dialogProps,
confirmProps: {
endpoint: "/device/batch/disable",
...props.dialogProps?.confirmProps,
},
},
}}
/>
);
};
export default BatchDisable;
export { BatchDisableProps };
Example BatchAlertConfirmMulti
usage.
import React from "react";
import { Optional, BatchAlertConfirmMulti, BatchAlertConfirmMultiProps } from "@arteneo/forge";
type BatchEnableProps = Optional<BatchAlertConfirmMultiProps, "dialogProps">;
const BatchEnable = (props: BatchEnableProps) => {
return (
<BatchAlertConfirmMulti
{...{
label: "batch.device.enable.action",
...props,
dialogProps: {
label: "batch.device.enable.label",
...props.dialogProps,
confirmProps: {
endpoint: (result) => "/device/" + result.id + "/enable",
resultDenyKey: "enable",
...props.dialogProps?.confirmProps,
},
},
}}
/>
);
};
export default BatchEnable;
export { BatchEnableProps };
Example BatchFormAlert
usage.
import React from "react";
import { Optional, BatchFormAlert, BatchFormAlertProps, Text } from "@arteneo/forge";
type BatchVariableAddProps = Optional<BatchFormAlertProps, "dialogProps">;
const BatchVariableAdd = (props: BatchVariableAddProps) => {
return (
<BatchFormAlert
{...{
label: "batch.device.variableAdd.action",
...props,
dialogProps: {
title: "batch.device.variableAdd.title",
label: "batch.device.variableAdd.label",
formProps: {
fields: {
name: <Text {...{ required: true }} />,
},
endpoint: "/device/batch/variable/add",
},
...props.dialogProps,
},
}}
/>
);
};
export default BatchVariableAdd;
export { BatchVariableAddProps };
Example BatchFormMultiAlert
usage.
import React from "react";
import { Optional, BatchFormMultiAlert, BatchFormMultiAlertProps, Text } from "@arteneo/forge";
type BatchTemplateApplyProps = Optional<BatchFormMultiAlertProps, "dialogProps">;
const BatchTemplateApply = (props: BatchTemplateApplyProps) => {
return (
<BatchFormMultiAlert
{...{
label: "batch.device.templateApply.action",
...props,
dialogProps: {
title: "batch.device.templateApply.title",
label: "batch.device.templateApply.label",
formProps: {
resultDenyKey: "templateApply",
fields: {
name: <Text {...{ required: true }} />,
},
endpoint: (result) => "/device/" + result.id + "/template/apply",
},
...props.dialogProps,
},
}}
/>
);
};
export default BatchTemplateApply;
export { BatchTemplateApplyProps };
Dialogs component overview
DialogProvider -> Utility context with initialization. Presenting children inside of a Dialog
Dialog -> Basic Dialog content setup: Title, Content, Actions DialogTitle -> Presentation component. Needs title (can be resolved using payload) DialogContent -> Presentation component. Shows loader when initializing otherwise children. Needs children (can be resolved using payload) DialogContentLoader -> Presentation component. Presents loader DialogActions -> Presentation component. Shows close button on the left and any passed actions buttons on the right (optionally resolved using payload)
DialogAlert -> Extends Dialog. Presents Alert (needs label which can be optionally resolved using payload) DialogAlertConfirm -> Adds DialogButtonEndpoint in actions to DialogAlert DialogConfirm -> Dialog with action button endpoint action (needs children)
DialogBatch -> Basic DialogBatch content setup: Title, DialogBatchContent, Actions DialogBatchContent -> Presentation component. Shows loader when initializing otherwise children and below DialogBatchProgress and DialogBatchResults. Needs children (can be resolved using payload) DialogBatchProgress -> Presentation component. Shows linear progress based on processed number of batchResults. DialogBatchResults -> Presentation component. Shows batchResults with status as rows.
DialogBatchAlert -> Extends DialogBatch. Presents Alert (needs label which can be optionally resolved using payload) DialogBatchConfirm -> DialogBatch with action DialogBatchButtonEndpoint action (needs children) DialogBatchAlertConfirm -> Adds DialogBatchButtonEndpoint in actions to DialogBatchAlert DialogBatchConfirmMulti -> DialogBatch with action DialogButtonMultiEndpoint action (needs children) DialogBatchAlertConfirmMulti -> Adds DialogButtonMultiEndpoint in actions to DialogBatchAlert
DialogButtonClose -> Overrides default onClick and adds onClose as parameter DialogButtonSubmit -> Adds default type: "submit" and loading and disabled states DialogButtonEndpoint -> Adjusts ButtonEndpoint (single endpoint) to Dialog by incorporating onClose to onSuccess and onCatch. Adds disable while initializing DialogBatchButtonMultiEndpoint -> Adjusts ButtonMultiEndpoint (multiple endpoints one by one) to DialogBatch by managing processing, finished and batchResults states through onStart, onFinish, onSuccess and onCatch. Adds disable while initializing or not finished. DialogBatchButtonEndpoint -> Adjusts DialogButtonEndpoint (single endpoint) to DialogBatch. It assumes that endpoint will return multiple batchResults in response.
DialogBatchForm -> Basic batch form in dialog component (sends endpoint and assumes that it will return multiple batchResults in response). Adds DialogButtonSubmit. (needs children which should include fields) DialogBatchFormFieldset -> Extends DialogBatchForm. Presents fields in a specific way. (does not need children) DialogBatchFormAlertFieldset -> Extends DialogBatchForm. Presents alert and fields in a specific way. (does not need children)
DialogBatchFormMulti -> Basic batch form multi in dialog component (multiple endpoints based on form values). Adds DialogButtonSubmit. (needs children which should include fields) DialogBatchFormMultiFieldset -> Extends DialogBatchFormMulti. Presents fields in a specific way. (does not need children) DialogBatchFormMultiAlertFieldset -> Extends DialogBatchFormMulti. Presents alert and fields in a specific way. (does not need children)
DialogForm -> Basic form in dialog component. Adds DialogButtonSubmit. (needs children which should include fields) DialogFormFieldset -> Extends DialogForm. Presents fields in a specific way. (does not need children)