@tsed/react-formio 3.0.0-alpha.11 → 3.0.0-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all.d.ts +0 -0
- package/dist/all.js +38 -0
- package/dist/all.js.map +1 -0
- package/dist/atoms/icon/Icon.js.map +1 -1
- package/dist/chunks/_commonjsHelpers.js +30 -3
- package/dist/chunks/_commonjsHelpers.js.map +1 -1
- package/dist/chunks/index.js +33 -30
- package/dist/chunks/index.js.map +1 -1
- package/dist/chunks/index.module.js +16 -16
- package/dist/chunks/index.module.js.map +1 -1
- package/dist/chunks/index2.js +56953 -0
- package/dist/chunks/index2.js.map +1 -0
- package/dist/chunks/react-select-animated.esm.js +1204 -1101
- package/dist/chunks/react-select-animated.esm.js.map +1 -1
- package/dist/contexts/FormioContext.d.ts +20 -0
- package/dist/contexts/FormioContext.js +40 -0
- package/dist/contexts/FormioContext.js.map +1 -0
- package/dist/hooks/keyboard.constants.js.map +1 -1
- package/dist/hooks/useFormioContext.d.ts +10 -0
- package/dist/hooks/useFormioContext.js +12 -0
- package/dist/hooks/useFormioContext.js.map +1 -0
- package/dist/hooks/useI18n.d.ts +4 -0
- package/dist/hooks/useI18n.js +9 -0
- package/dist/hooks/useI18n.js.map +1 -0
- package/dist/hooks/useKeyboardControls.js.map +1 -1
- package/dist/hooks/useTooltip.js.map +1 -1
- package/dist/index.d.ts +1 -6
- package/dist/index.js +18 -13
- package/dist/index.js.map +1 -1
- package/dist/interfaces/ComponentType.d.ts +6 -2
- package/dist/interfaces/FormBuilderOptions.d.ts +7 -0
- package/dist/interfaces/FormBuilderOptions.js +2 -0
- package/dist/interfaces/FormBuilderOptions.js.map +1 -0
- package/dist/interfaces/FormOptions.d.ts +6 -13
- package/dist/interfaces/FormType.d.ts +4 -11
- package/dist/interfaces/SubmissionType.d.ts +5 -10
- package/dist/interfaces/index.d.ts +1 -0
- package/dist/molecules/alert/Alert.js.map +1 -1
- package/dist/molecules/button/Button.js +17 -20
- package/dist/molecules/button/Button.js.map +1 -1
- package/dist/molecules/card/Card.js.map +1 -1
- package/dist/molecules/forms/form-control/FormControl.js.map +1 -1
- package/dist/molecules/forms/input-tags/InputTags.js.map +1 -1
- package/dist/molecules/forms/input-tags/components/ChoicesTags.d.ts +19 -19
- package/dist/molecules/forms/input-tags/components/ChoicesTags.js +32 -32
- package/dist/molecules/forms/input-tags/components/ChoicesTags.js.map +1 -1
- package/dist/molecules/forms/input-tags/components/ReactTags.js +289 -300
- package/dist/molecules/forms/input-tags/components/ReactTags.js.map +1 -1
- package/dist/molecules/forms/input-text/InputText.js +3 -3
- package/dist/molecules/forms/input-text/InputText.js.map +1 -1
- package/dist/molecules/forms/select/Select.js.map +1 -1
- package/dist/molecules/forms/select/components/ChoicesSelect.js +71 -73
- package/dist/molecules/forms/select/components/ChoicesSelect.js.map +1 -1
- package/dist/molecules/forms/select/components/HtmlSelect.js.map +1 -1
- package/dist/molecules/forms/select/components/ReactSelect.js +13 -14
- package/dist/molecules/forms/select/components/ReactSelect.js.map +1 -1
- package/dist/molecules/forms/select/components/choices.template.js +2340 -2257
- package/dist/molecules/forms/select/components/choices.template.js.map +1 -1
- package/dist/molecules/forms/select/hooks/useOptions.js.map +1 -1
- package/dist/molecules/loader/Loader.js.map +1 -1
- package/dist/molecules/modal/Modal.js +23 -24
- package/dist/molecules/modal/Modal.js.map +1 -1
- package/dist/molecules/pagination/Pagination.d.ts +2 -1
- package/dist/molecules/pagination/Pagination.js +29 -29
- package/dist/molecules/pagination/Pagination.js.map +1 -1
- package/dist/molecules/pagination/PaginationButton.js.map +1 -1
- package/dist/molecules/pagination/utils/getPageNumbers.js.map +1 -1
- package/dist/molecules/table/Table.js +35 -41
- package/dist/molecules/table/Table.js.map +1 -1
- package/dist/molecules/table/components/DefaultArrowSort.js.map +1 -1
- package/dist/molecules/table/components/DefaultCell.js.map +1 -1
- package/dist/molecules/table/components/DefaultCellFooter.js.map +1 -1
- package/dist/molecules/table/components/DefaultCellHeader.js.map +1 -1
- package/dist/molecules/table/components/DefaultCellOperations.js +10 -10
- package/dist/molecules/table/components/DefaultCellOperations.js.map +1 -1
- package/dist/molecules/table/components/DefaultFilter.js.map +1 -1
- package/dist/molecules/table/components/DefaultOperationButton.js +1 -1
- package/dist/molecules/table/components/DefaultOperationButton.js.map +1 -1
- package/dist/molecules/table/filters/RangeFilter.js +23 -24
- package/dist/molecules/table/filters/RangeFilter.js.map +1 -1
- package/dist/molecules/table/filters/SelectFilter.js +11 -13
- package/dist/molecules/table/filters/SelectFilter.js.map +1 -1
- package/dist/molecules/table/filters/TextFieldFilter.js.map +1 -1
- package/dist/molecules/table/hooks/useTable.d.ts +3 -3
- package/dist/molecules/table/hooks/useTable.js +17 -16
- package/dist/molecules/table/hooks/useTable.js.map +1 -1
- package/dist/molecules/table/hooks/useUniqValues.js.map +1 -1
- package/dist/molecules/table/utils/mapFormToColumns.js +21 -22
- package/dist/molecules/table/utils/mapFormToColumns.js.map +1 -1
- package/dist/molecules/tabs/Tab.js +36 -37
- package/dist/molecules/tabs/Tab.js.map +1 -1
- package/dist/molecules/tabs/TabList.js +9 -10
- package/dist/molecules/tabs/TabList.js.map +1 -1
- package/dist/molecules/tabs/TabPanel.js.map +1 -1
- package/dist/molecules/tabs/Tabs.js.map +1 -1
- package/dist/molecules/tabs/TabsBody.js.map +1 -1
- package/dist/molecules/tabs/TabsLegacy.d.ts +3 -2
- package/dist/molecules/tabs/TabsLegacy.js +30 -30
- package/dist/molecules/tabs/TabsLegacy.js.map +1 -1
- package/dist/molecules/tabs/context/TabControl.js.map +1 -1
- package/dist/molecules/tabs/hooks/tabControl.js.map +1 -1
- package/dist/organisms/form/Form.js.map +1 -1
- package/dist/organisms/form/access/FormAccess.js +41 -41
- package/dist/organisms/form/access/FormAccess.js.map +1 -1
- package/dist/organisms/form/access/FormAccess.schema.js +1 -0
- package/dist/organisms/form/access/FormAccess.schema.js.map +1 -1
- package/dist/organisms/form/access/FormAccess.utils.js +2 -2
- package/dist/organisms/form/access/FormAccess.utils.js.map +1 -1
- package/dist/organisms/form/actions/FormAction.js +15 -13
- package/dist/organisms/form/actions/FormAction.js.map +1 -1
- package/dist/organisms/form/builder/FormBuilder.js.map +1 -1
- package/dist/organisms/form/builder/FormEdit.d.ts +4 -3
- package/dist/organisms/form/builder/FormEdit.js +36 -36
- package/dist/organisms/form/builder/FormEdit.js.map +1 -1
- package/dist/organisms/form/builder/FormEdit.reducer.js.map +1 -1
- package/dist/organisms/form/builder/FormEditCtas.d.ts +2 -2
- package/dist/organisms/form/builder/FormEditCtas.js +36 -35
- package/dist/organisms/form/builder/FormEditCtas.js.map +1 -1
- package/dist/organisms/form/builder/FormParameters.js.map +1 -1
- package/dist/organisms/form/builder/useFormBuilder.d.ts +4 -4
- package/dist/organisms/form/builder/useFormBuilder.js +36 -33
- package/dist/organisms/form/builder/useFormBuilder.js.map +1 -1
- package/dist/organisms/form/builder/useFormEdit.d.ts +1 -1
- package/dist/organisms/form/builder/useFormEdit.js +17 -17
- package/dist/organisms/form/builder/useFormEdit.js.map +1 -1
- package/dist/organisms/form/exports/FormExport.d.ts +3 -2
- package/dist/organisms/form/exports/FormExport.js +23 -22
- package/dist/organisms/form/exports/FormExport.js.map +1 -1
- package/dist/organisms/form/preview/FormPreview.d.ts +3 -3
- package/dist/organisms/form/preview/FormPreview.js +5 -4
- package/dist/organisms/form/preview/FormPreview.js.map +1 -1
- package/dist/organisms/form/settings/FormSettings.js +28 -28
- package/dist/organisms/form/settings/FormSettings.js.map +1 -1
- package/dist/organisms/form/settings/FormSettings.schema.js.map +1 -1
- package/dist/organisms/form/settings/FormSettings.utils.js.map +1 -1
- package/dist/organisms/form/useForm.d.ts +2 -1
- package/dist/organisms/form/useForm.js +664 -661
- package/dist/organisms/form/useForm.js.map +1 -1
- package/dist/organisms/modal/RemoveModal.js +16 -17
- package/dist/organisms/modal/RemoveModal.js.map +1 -1
- package/dist/organisms/table/actions/ActionsTable.d.ts +2 -1
- package/dist/organisms/table/actions/ActionsTable.js +10 -9
- package/dist/organisms/table/actions/ActionsTable.js.map +1 -1
- package/dist/organisms/table/forms/FormsTable.d.ts +1 -1
- package/dist/organisms/table/forms/FormsTable.js +9 -8
- package/dist/organisms/table/forms/FormsTable.js.map +1 -1
- package/dist/organisms/table/forms/components/FormsCell.js +10 -10
- package/dist/organisms/table/forms/components/FormsCell.js.map +1 -1
- package/dist/organisms/table/submissions/SubmissionsTable.js.map +1 -1
- package/dist/organisms/views/FormViews.d.ts +3 -3
- package/dist/organisms/views/FormViews.js +47 -46
- package/dist/organisms/views/FormViews.js.map +1 -1
- package/dist/registries/components.js.map +1 -1
- package/dist/utils/getEventValue.js.map +1 -1
- package/dist/utils/iconClass.js +4 -5
- package/dist/utils/iconClass.js.map +1 -1
- package/dist/utils/mapPagination.js.map +1 -1
- package/dist/utils/stopPropagationWrapper.js.map +1 -1
- package/package.json +7 -7
- package/src/all.ts +34 -0
- package/src/atoms/icon/Icon.stories.tsx +1 -1
- package/src/contexts/FormioContext.tsx +96 -0
- package/src/hooks/useFormioContext.ts +13 -0
- package/src/hooks/useI18n.ts +9 -0
- package/src/index.ts +17 -13
- package/src/interfaces/ComponentType.ts +2 -2
- package/src/interfaces/FormBuilderOptions.ts +9 -0
- package/src/interfaces/FormOptions.ts +7 -13
- package/src/interfaces/FormType.ts +5 -11
- package/src/interfaces/SubmissionType.ts +9 -8
- package/src/interfaces/index.ts +1 -0
- package/src/molecules/button/Button.stories.tsx +1 -1
- package/src/molecules/forms/form-control/FormControl.spec.tsx +5 -2
- package/src/molecules/forms/form-control/FormControl.stories.tsx +1 -1
- package/src/molecules/forms/input-tags/components/ChoicesTags.stories.tsx +1 -1
- package/src/molecules/forms/input-tags/components/ChoicesTags.tsx +4 -4
- package/src/molecules/forms/input-tags/components/ReactTags.stories.tsx +1 -1
- package/src/molecules/forms/input-text/InputText.stories.tsx +2 -2
- package/src/molecules/forms/select/components/ChoicesSelect.stories.tsx +2 -2
- package/src/molecules/forms/select/components/ChoicesSelect.tsx +2 -2
- package/src/molecules/forms/select/components/HtmlSelect.stories.tsx +2 -2
- package/src/molecules/forms/select/components/ReactSelect.stories.tsx +2 -2
- package/src/molecules/loader/Loader.stories.tsx +1 -1
- package/src/molecules/modal/Modal.stories.tsx +1 -1
- package/src/molecules/pagination/Pagination.stories.tsx +1 -1
- package/src/molecules/pagination/Pagination.tsx +10 -10
- package/src/molecules/table/Table.stories.tsx +8 -8
- package/src/molecules/table/Table.tsx +1 -1
- package/src/molecules/table/filters/SelectFilter.tsx +1 -1
- package/src/molecules/table/hooks/useTable.tsx +7 -6
- package/src/molecules/table/utils/mapFormToColumns.tsx +6 -5
- package/src/molecules/tabs/Tabs.stories.tsx +2 -2
- package/src/molecules/tabs/TabsLegacy.stories.tsx +2 -2
- package/src/molecules/tabs/TabsLegacy.tsx +5 -3
- package/src/organisms/form/Form.stories.tsx +98 -118
- package/src/organisms/form/access/FormAccess.schema.ts +1 -0
- package/src/organisms/form/access/FormAccess.stories.tsx +5 -3
- package/src/organisms/form/actions/FormAction.stories.tsx +6 -2
- package/src/organisms/form/actions/FormAction.tsx +2 -2
- package/src/organisms/form/builder/FormBuilder.stories.tsx +4 -1
- package/src/organisms/form/builder/FormEdit.stories.tsx +11 -7
- package/src/organisms/form/builder/FormEdit.tsx +6 -6
- package/src/organisms/form/builder/FormEditCtas.tsx +10 -10
- package/src/organisms/form/builder/useFormBuilder.ts +12 -7
- package/src/organisms/form/exports/FormExport.stories.tsx +9 -12
- package/src/organisms/form/exports/FormExport.tsx +12 -9
- package/src/organisms/form/preview/FormPreview.stories.tsx +7 -10
- package/src/organisms/form/preview/FormPreview.tsx +7 -5
- package/src/organisms/form/settings/FormSettings.component.spec.tsx +3 -1
- package/src/organisms/form/settings/FormSettings.stories.tsx +1 -1
- package/src/organisms/form/settings/FormSettings.tsx +6 -6
- package/src/organisms/form/useForm.ts +2 -3
- package/src/organisms/modal/RemoveModal.stories.tsx +1 -1
- package/src/organisms/table/actions/ActionsTable.stories.tsx +2 -2
- package/src/organisms/table/actions/ActionsTable.tsx +7 -5
- package/src/organisms/table/forms/FormsTable.tsx +6 -5
- package/src/organisms/table/submissions/SubmissionsTable.stories.tsx +11 -14
- package/src/organisms/views/FormViews.stories.tsx +14 -17
- package/src/organisms/views/FormViews.tsx +18 -16
- package/src/utils/iconClass.ts +1 -3
- package/vite.config.mts +2 -2
- package/dist/typings.d.js +0 -2
- package/dist/typings.d.js.map +0 -1
- package/src/typings.d.ts +0 -3
- package/tsconfig.app.json +0 -11
- package/tsconfig.json +0 -21
- package/tsconfig.node.json +0 -13
- package/tsconfig.spec.json +0 -14
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormBuilder.js","sources":["../../../../src/organisms/form/builder/FormBuilder.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nimport { registerComponent } from \"../../../registries/components\";\nimport { useFormBuilder, UseFormBuilderProps } from \"./useFormBuilder\";\n\nexport function FormBuilder({\n className = \"\",\n style = {},\n [\"data-testid\"]: dataTestId = \"formio-builder-container\",\n ...props\n}: UseFormBuilderProps & {\n className?: string;\n style?: CSSProperties;\n [\"data-testid\"]?: string;\n}) {\n const renderElement = useFormBuilder(props);\n\n return (\n <div style={style} className={className} data-testid={dataTestId}>\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}\n <div ref={renderElement} onClick={(e) => e.stopPropagation()}>\n <div />\n </div>\n </div>\n );\n}\n\nregisterComponent(\"FormBuilder\", FormBuilder);\n"],"names":["FormBuilder","className","style","dataTestId","props","renderElement","useFormBuilder","e","jsx","registerComponent"],"mappings":";;;AAKO,SAASA,EAAY;AAAA,EAC1B,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ,
|
|
1
|
+
{"version":3,"file":"FormBuilder.js","sources":["../../../../src/organisms/form/builder/FormBuilder.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nimport { registerComponent } from \"../../../registries/components\";\nimport { useFormBuilder, UseFormBuilderProps } from \"./useFormBuilder\";\n\nexport function FormBuilder({\n className = \"\",\n style = {},\n [\"data-testid\"]: dataTestId = \"formio-builder-container\",\n ...props\n}: UseFormBuilderProps & {\n className?: string;\n style?: CSSProperties;\n [\"data-testid\"]?: string;\n}) {\n const renderElement = useFormBuilder(props);\n\n return (\n <div style={style} className={className} data-testid={dataTestId}>\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}\n <div ref={renderElement} onClick={(e) => e.stopPropagation()}>\n <div />\n </div>\n </div>\n );\n}\n\nregisterComponent(\"FormBuilder\", FormBuilder);\n"],"names":["FormBuilder","className","style","dataTestId","props","renderElement","useFormBuilder","e","jsx","registerComponent"],"mappings":";;;AAKO,SAASA,EAAY;AAAA,EAC1B,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ,CAAA;AAAA,EACR,CAAC,aAAa,GAAGC,IAAa;AAAA,EAC9B,GAAGC;AACL,GAIG;AACD,QAAMC,IAAgBC,EAAeF,CAAK;AAE1C,2BACG,OAAA,EAAI,OAAAF,GAAc,WAAAD,GAAsB,eAAaE,GAEpD,4BAAC,OAAA,EAAI,KAAKE,GAAe,SAAS,CAACE,MAAMA,EAAE,gBAAA,GACzC,UAAA,gBAAAC,EAAC,OAAA,EAAI,GACP,EAAA,CACF;AAEJ;AAEAC,EAAkB,eAAeT,CAAW;"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
import { FormBuilderOptions, FormOptions } from '../../../interfaces/index.js';
|
|
2
3
|
import { FormBuilderEvents } from './useFormBuilder';
|
|
3
4
|
import { UseFormEditHookProps } from './useFormEdit';
|
|
4
5
|
export interface FormEditProps extends UseFormEditHookProps, FormBuilderEvents {
|
|
5
|
-
options?: FormOptions;
|
|
6
|
+
options?: FormBuilderOptions & FormOptions;
|
|
6
7
|
layout?: "html5" | "choicesjs" | "react";
|
|
7
8
|
className?: string;
|
|
8
|
-
style?:
|
|
9
|
+
style?: CSSProperties;
|
|
9
10
|
}
|
|
10
11
|
export declare function FormEdit({ form: initialForm, typeChoices, displayChoices, enableTags, onSubmit: initialOnSubmit, onCopy: initialOnCopy, className, style, ...props }: FormEditProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { createElement as
|
|
3
|
-
import { c as
|
|
1
|
+
import { jsxs as s, jsx as d } from "react/jsx-runtime";
|
|
2
|
+
import { createElement as j } from "react";
|
|
3
|
+
import { c as v } from "../../../chunks/index.js";
|
|
4
4
|
import { getComponent as n } from "../../../registries/components.js";
|
|
5
|
-
import { useFormEdit as
|
|
6
|
-
function
|
|
7
|
-
form:
|
|
5
|
+
import { useFormEdit as A } from "./useFormEdit.js";
|
|
6
|
+
function T({
|
|
7
|
+
form: a,
|
|
8
8
|
typeChoices: r,
|
|
9
9
|
displayChoices: m,
|
|
10
10
|
enableTags: e,
|
|
11
|
-
onSubmit:
|
|
12
|
-
onCopy:
|
|
13
|
-
className:
|
|
14
|
-
style:
|
|
11
|
+
onSubmit: c,
|
|
12
|
+
onCopy: f,
|
|
13
|
+
className: l,
|
|
14
|
+
style: u,
|
|
15
15
|
...t
|
|
16
16
|
}) {
|
|
17
|
-
const { form: o, isValid:
|
|
18
|
-
form:
|
|
17
|
+
const { form: o, isValid: p, setChange: i, hasRedo: C, hasChanged: F, hasUndo: h, redo: y, undo: g, reset: E, onSubmit: b, onCopy: x } = A({
|
|
18
|
+
form: a,
|
|
19
19
|
typeChoices: r,
|
|
20
20
|
displayChoices: m,
|
|
21
21
|
enableTags: e,
|
|
22
|
-
onSubmit:
|
|
23
|
-
onCopy:
|
|
24
|
-
}),
|
|
25
|
-
return /* @__PURE__ */
|
|
26
|
-
/* @__PURE__ */
|
|
27
|
-
/* @__PURE__ */
|
|
28
|
-
|
|
22
|
+
onSubmit: c,
|
|
23
|
+
onCopy: f
|
|
24
|
+
}), R = n("FormParameters"), S = n("FormBuilder"), _ = n("FormEditCTAs");
|
|
25
|
+
return /* @__PURE__ */ s("div", { className: v("form-edit-container", l), style: u, children: [
|
|
26
|
+
/* @__PURE__ */ s("div", { className: "form-edit", children: [
|
|
27
|
+
/* @__PURE__ */ d(
|
|
28
|
+
R,
|
|
29
29
|
{
|
|
30
30
|
enableTags: e,
|
|
31
31
|
typeChoices: r,
|
|
@@ -36,38 +36,38 @@ function V({
|
|
|
36
36
|
},
|
|
37
37
|
`form-settings-${o._id}`
|
|
38
38
|
),
|
|
39
|
-
/* @__PURE__ */
|
|
40
|
-
|
|
39
|
+
/* @__PURE__ */ d(
|
|
40
|
+
_,
|
|
41
41
|
{
|
|
42
|
-
options:
|
|
43
|
-
hasRedo:
|
|
44
|
-
hasUndo:
|
|
45
|
-
disabled: !(
|
|
46
|
-
onRedo:
|
|
47
|
-
onUndo:
|
|
48
|
-
onReset:
|
|
49
|
-
onCopy:
|
|
50
|
-
onSubmit:
|
|
42
|
+
options: t.options,
|
|
43
|
+
hasRedo: C,
|
|
44
|
+
hasUndo: h,
|
|
45
|
+
disabled: !(p && F),
|
|
46
|
+
onRedo: y,
|
|
47
|
+
onUndo: g,
|
|
48
|
+
onReset: E,
|
|
49
|
+
onCopy: x,
|
|
50
|
+
onSubmit: b
|
|
51
51
|
},
|
|
52
52
|
`form-edit-ctas-${o._id}`
|
|
53
53
|
)
|
|
54
54
|
] }),
|
|
55
|
-
/* @__PURE__ */
|
|
56
|
-
|
|
55
|
+
/* @__PURE__ */ j(
|
|
56
|
+
S,
|
|
57
57
|
{
|
|
58
58
|
...t,
|
|
59
59
|
key: `form-builder-${o._id}`,
|
|
60
60
|
components: o.components,
|
|
61
61
|
display: o.display,
|
|
62
|
-
options:
|
|
63
|
-
onChange: (
|
|
64
|
-
i("components",
|
|
62
|
+
options: t.options,
|
|
63
|
+
onChange: ($) => {
|
|
64
|
+
i("components", $);
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
)
|
|
68
68
|
] });
|
|
69
69
|
}
|
|
70
70
|
export {
|
|
71
|
-
|
|
71
|
+
T as FormEdit
|
|
72
72
|
};
|
|
73
73
|
//# sourceMappingURL=FormEdit.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormEdit.js","sources":["../../../../src/organisms/form/builder/FormEdit.tsx"],"sourcesContent":["import classnames from \"classnames\";\n\nimport type { FormOptions } from \"../../../interfaces\";\nimport { getComponent } from \"../../../registries/components\";\nimport { FormBuilder as DefaultFormBuilder } from \"./FormBuilder\";\nimport { FormEditCTAs as DefaultFormEditCTAs } from \"./FormEditCtas\";\nimport { FormParameters as DefaultFormParameters } from \"./FormParameters\";\nimport { FormBuilderEvents } from \"./useFormBuilder\";\nimport { useFormEdit, UseFormEditHookProps } from \"./useFormEdit\";\n\nexport interface FormEditProps extends UseFormEditHookProps, FormBuilderEvents {\n options?: FormOptions;\n layout?: \"html5\" | \"choicesjs\" | \"react\";\n className?: string;\n style?:
|
|
1
|
+
{"version":3,"file":"FormEdit.js","sources":["../../../../src/organisms/form/builder/FormEdit.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport type { CSSProperties } from \"react\";\n\nimport type { FormBuilderOptions, FormOptions } from \"../../../interfaces/index.js\";\nimport { getComponent } from \"../../../registries/components\";\nimport { FormBuilder as DefaultFormBuilder } from \"./FormBuilder\";\nimport { FormEditCTAs as DefaultFormEditCTAs } from \"./FormEditCtas\";\nimport { FormParameters as DefaultFormParameters } from \"./FormParameters\";\nimport { FormBuilderEvents } from \"./useFormBuilder\";\nimport { useFormEdit, UseFormEditHookProps } from \"./useFormEdit\";\n\nexport interface FormEditProps extends UseFormEditHookProps, FormBuilderEvents {\n options?: FormBuilderOptions & FormOptions;\n layout?: \"html5\" | \"choicesjs\" | \"react\";\n className?: string;\n style?: CSSProperties;\n}\n\nexport function FormEdit({\n form: initialForm,\n typeChoices,\n displayChoices,\n enableTags,\n onSubmit: initialOnSubmit,\n onCopy: initialOnCopy,\n className,\n style,\n ...props\n}: FormEditProps) {\n const { form, isValid, setChange, hasRedo, hasChanged, hasUndo, redo, undo, reset, onSubmit, onCopy } = useFormEdit({\n form: initialForm,\n typeChoices,\n displayChoices,\n enableTags,\n onSubmit: initialOnSubmit,\n onCopy: initialOnCopy\n });\n\n const FormParameters = getComponent<typeof DefaultFormParameters>(\"FormParameters\");\n const FormBuilder = getComponent<typeof DefaultFormBuilder>(\"FormBuilder\");\n const FormEditCTAs = getComponent<typeof DefaultFormEditCTAs>(\"FormEditCTAs\");\n\n return (\n <div className={classnames(\"form-edit-container\", className)} style={style}>\n <div className='form-edit'>\n <FormParameters\n enableTags={enableTags}\n typeChoices={typeChoices}\n displayChoices={displayChoices}\n key={`form-settings-${form._id}`}\n form={form}\n onChange={setChange}\n layout={props.layout}\n />\n <FormEditCTAs\n key={`form-edit-ctas-${form._id}`}\n options={props.options}\n hasRedo={hasRedo}\n hasUndo={hasUndo}\n disabled={!(isValid && hasChanged)}\n onRedo={redo}\n onUndo={undo}\n onReset={reset}\n onCopy={onCopy}\n onSubmit={onSubmit}\n />\n </div>\n\n <FormBuilder\n {...props}\n key={`form-builder-${form._id}`}\n components={form.components!}\n display={form.display}\n options={props.options}\n onChange={(components) => {\n setChange(\"components\", components);\n }}\n />\n </div>\n );\n}\n"],"names":["FormEdit","initialForm","typeChoices","displayChoices","enableTags","initialOnSubmit","initialOnCopy","className","style","props","form","isValid","setChange","hasRedo","hasChanged","hasUndo","redo","undo","reset","onSubmit","onCopy","useFormEdit","FormParameters","getComponent","FormBuilder","FormEditCTAs","classnames","jsxs","jsx","createElement","components"],"mappings":";;;;;AAkBO,SAASA,EAAS;AAAA,EACvB,MAAMC;AAAA,EACN,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAUC;AAAA,EACV,QAAQC;AAAA,EACR,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,WAAAC,GAAW,SAAAC,GAAS,YAAAC,GAAY,SAAAC,GAAS,MAAAC,GAAM,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,QAAAC,EAAA,IAAWC,EAAY;AAAA,IAClH,MAAMpB;AAAA,IACN,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAUC;AAAA,IACV,QAAQC;AAAA,EAAA,CACT,GAEKgB,IAAiBC,EAA2C,gBAAgB,GAC5EC,IAAcD,EAAwC,aAAa,GACnEE,IAAeF,EAAyC,cAAc;AAE5E,2BACG,OAAA,EAAI,WAAWG,EAAW,uBAAuBnB,CAAS,GAAG,OAAAC,GAC5D,UAAA;AAAA,IAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACN;AAAA,QAAA;AAAA,UACC,YAAAlB;AAAA,UACA,aAAAF;AAAA,UACA,gBAAAC;AAAA,UAEA,MAAAO;AAAA,UACA,UAAUE;AAAA,UACV,QAAQH,EAAM;AAAA,QAAA;AAAA,QAHT,iBAAiBC,EAAK,GAAG;AAAA,MAAA;AAAA,MAKhC,gBAAAkB;AAAA,QAACH;AAAA,QAAA;AAAA,UAEC,SAAShB,EAAM;AAAA,UACf,SAAAI;AAAA,UACA,SAAAE;AAAA,UACA,UAAU,EAAEJ,KAAWG;AAAA,UACvB,QAAQE;AAAA,UACR,QAAQC;AAAA,UACR,SAASC;AAAA,UACT,QAAAE;AAAA,UACA,UAAAD;AAAA,QAAA;AAAA,QATK,kBAAkBT,EAAK,GAAG;AAAA,MAAA;AAAA,IAUjC,GACF;AAAA,IAEA,gBAAAmB;AAAA,MAACL;AAAA,MAAA;AAAA,QACE,GAAGf;AAAA,QACJ,KAAK,gBAAgBC,EAAK,GAAG;AAAA,QAC7B,YAAYA,EAAK;AAAA,QACjB,SAASA,EAAK;AAAA,QACd,SAASD,EAAM;AAAA,QACf,UAAU,CAACqB,MAAe;AACxB,UAAAlB,EAAU,cAAckB,CAAU;AAAA,QACpC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormEdit.reducer.js","sources":["../../../../src/organisms/form/builder/FormEdit.reducer.ts"],"sourcesContent":["import camelCase from \"lodash/camelCase\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport isEqual from \"lodash/isEqual\";\n\nimport type { FormType } from \"../../../interfaces\";\n\nexport const hasChanged = (form: Partial<FormType>, value: Partial<FormType>): boolean => !isEqual(form, value);\n\nexport interface FormEditState {\n past: Partial<FormType>[];\n future: Partial<FormType>[];\n current: Partial<FormType>;\n original: Partial<FormType>;\n}\n\nexport function createInitialState(props: any): FormEditState {\n return {\n past: [],\n future: [],\n current: cloneDeep(props.form),\n original: cloneDeep(props.form)\n };\n}\n\nexport const reducer = (state: FormEditState, { type, value }: any): FormEditState => {\n const { past, current, future } = state;\n\n const update = (newValue: any): any => {\n if (newValue.title !== state.current.title && !state.current._id) {\n newValue.name = camelCase(value.title);\n newValue.path = camelCase(value.title).toLowerCase();\n }\n\n return {\n ...state,\n past: [...past, cloneDeep(current)],\n current: newValue\n };\n };\n\n switch (type) {\n case \"undo\":\n if (past.length) {\n const previous = past[past.length - 1];\n const newPast = past.slice(0, past.length - 1);\n\n return {\n ...state,\n past: newPast,\n current: cloneDeep(previous),\n future: [cloneDeep(current), ...future]\n };\n }\n break;\n\n case \"redo\":\n if (future.length) {\n const next = future[0];\n const newFuture = future.slice(1);\n\n return {\n ...state,\n past: [...past, cloneDeep(current)],\n current: cloneDeep(next),\n future: newFuture\n };\n }\n break;\n\n case \"reset\":\n return update(cloneDeep(state.original));\n\n case \"formChange\":\n const newValue = { ...state.current, ...value };\n\n if (hasChanged(state.current, newValue)) {\n return update(newValue);\n }\n break;\n\n case \"replaceForm\":\n return {\n ...state,\n past: [],\n future: [],\n current: cloneDeep(value),\n original: cloneDeep(value)\n };\n\n default:\n break;\n }\n\n return state;\n};\n"],"names":["hasChanged","form","value","isEqual","createInitialState","props","cloneDeep","reducer","state","type","past","current","future","update","newValue","camelCase","previous","newPast","next","newFuture"],"mappings":";;;AAMO,MAAMA,IAAa,CAACC,GAAyBC,MAAsC,CAACC,EAAQF,GAAMC,CAAK;AASvG,SAASE,EAAmBC,GAA2B;
|
|
1
|
+
{"version":3,"file":"FormEdit.reducer.js","sources":["../../../../src/organisms/form/builder/FormEdit.reducer.ts"],"sourcesContent":["import camelCase from \"lodash/camelCase\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport isEqual from \"lodash/isEqual\";\n\nimport type { FormType } from \"../../../interfaces\";\n\nexport const hasChanged = (form: Partial<FormType>, value: Partial<FormType>): boolean => !isEqual(form, value);\n\nexport interface FormEditState {\n past: Partial<FormType>[];\n future: Partial<FormType>[];\n current: Partial<FormType>;\n original: Partial<FormType>;\n}\n\nexport function createInitialState(props: any): FormEditState {\n return {\n past: [],\n future: [],\n current: cloneDeep(props.form),\n original: cloneDeep(props.form)\n };\n}\n\nexport const reducer = (state: FormEditState, { type, value }: any): FormEditState => {\n const { past, current, future } = state;\n\n const update = (newValue: any): any => {\n if (newValue.title !== state.current.title && !state.current._id) {\n newValue.name = camelCase(value.title);\n newValue.path = camelCase(value.title).toLowerCase();\n }\n\n return {\n ...state,\n past: [...past, cloneDeep(current)],\n current: newValue\n };\n };\n\n switch (type) {\n case \"undo\":\n if (past.length) {\n const previous = past[past.length - 1];\n const newPast = past.slice(0, past.length - 1);\n\n return {\n ...state,\n past: newPast,\n current: cloneDeep(previous),\n future: [cloneDeep(current), ...future]\n };\n }\n break;\n\n case \"redo\":\n if (future.length) {\n const next = future[0];\n const newFuture = future.slice(1);\n\n return {\n ...state,\n past: [...past, cloneDeep(current)],\n current: cloneDeep(next),\n future: newFuture\n };\n }\n break;\n\n case \"reset\":\n return update(cloneDeep(state.original));\n\n case \"formChange\":\n const newValue = { ...state.current, ...value };\n\n if (hasChanged(state.current, newValue)) {\n return update(newValue);\n }\n break;\n\n case \"replaceForm\":\n return {\n ...state,\n past: [],\n future: [],\n current: cloneDeep(value),\n original: cloneDeep(value)\n };\n\n default:\n break;\n }\n\n return state;\n};\n"],"names":["hasChanged","form","value","isEqual","createInitialState","props","cloneDeep","reducer","state","type","past","current","future","update","newValue","camelCase","previous","newPast","next","newFuture"],"mappings":";;;AAMO,MAAMA,IAAa,CAACC,GAAyBC,MAAsC,CAACC,EAAQF,GAAMC,CAAK;AASvG,SAASE,EAAmBC,GAA2B;AAC5D,SAAO;AAAA,IACL,MAAM,CAAA;AAAA,IACN,QAAQ,CAAA;AAAA,IACR,SAASC,EAAUD,EAAM,IAAI;AAAA,IAC7B,UAAUC,EAAUD,EAAM,IAAI;AAAA,EAAA;AAElC;AAEO,MAAME,IAAU,CAACC,GAAsB,EAAE,MAAAC,GAAM,OAAAP,QAAgC;AACpF,QAAM,EAAE,MAAAQ,GAAM,SAAAC,GAAS,QAAAC,EAAA,IAAWJ,GAE5BK,IAAS,CAACC,OACVA,EAAS,UAAUN,EAAM,QAAQ,SAAS,CAACA,EAAM,QAAQ,QAC3DM,EAAS,OAAOC,EAAUb,EAAM,KAAK,GACrCY,EAAS,OAAOC,EAAUb,EAAM,KAAK,EAAE,YAAA,IAGlC;AAAA,IACL,GAAGM;AAAA,IACH,MAAM,CAAC,GAAGE,GAAMJ,EAAUK,CAAO,CAAC;AAAA,IAClC,SAASG;AAAA,EAAA;AAIb,UAAQL,GAAA;AAAA,IACN,KAAK;AACH,UAAIC,EAAK,QAAQ;AACf,cAAMM,IAAWN,EAAKA,EAAK,SAAS,CAAC,GAC/BO,IAAUP,EAAK,MAAM,GAAGA,EAAK,SAAS,CAAC;AAE7C,eAAO;AAAA,UACL,GAAGF;AAAA,UACH,MAAMS;AAAA,UACN,SAASX,EAAUU,CAAQ;AAAA,UAC3B,QAAQ,CAACV,EAAUK,CAAO,GAAG,GAAGC,CAAM;AAAA,QAAA;AAAA,MAE1C;AACA;AAAA,IAEF,KAAK;AACH,UAAIA,EAAO,QAAQ;AACjB,cAAMM,IAAON,EAAO,CAAC,GACfO,IAAYP,EAAO,MAAM,CAAC;AAEhC,eAAO;AAAA,UACL,GAAGJ;AAAA,UACH,MAAM,CAAC,GAAGE,GAAMJ,EAAUK,CAAO,CAAC;AAAA,UAClC,SAASL,EAAUY,CAAI;AAAA,UACvB,QAAQC;AAAA,QAAA;AAAA,MAEZ;AACA;AAAA,IAEF,KAAK;AACH,aAAON,EAAOP,EAAUE,EAAM,QAAQ,CAAC;AAAA,IAEzC,KAAK;AACH,YAAMM,IAAW,EAAE,GAAGN,EAAM,SAAS,GAAGN,EAAA;AAExC,UAAIF,EAAWQ,EAAM,SAASM,CAAQ;AACpC,eAAOD,EAAOC,CAAQ;AAExB;AAAA,IAEF,KAAK;AACH,aAAO;AAAA,QACL,GAAGN;AAAA,QACH,MAAM,CAAA;AAAA,QACN,QAAQ,CAAA;AAAA,QACR,SAASF,EAAUJ,CAAK;AAAA,QACxB,UAAUI,EAAUJ,CAAK;AAAA,MAAA;AAAA,EAI3B;AAGJ,SAAOM;AACT;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
|
-
import { FormOptions } from '../../../interfaces';
|
|
2
|
+
import { FormOptions } from '../../../interfaces/index.js';
|
|
3
3
|
export interface FormEditCTAsProps extends Record<string, unknown> {
|
|
4
4
|
saveText?: string;
|
|
5
5
|
options?: FormOptions;
|
|
@@ -12,4 +12,4 @@ export interface FormEditCTAsProps extends Record<string, unknown> {
|
|
|
12
12
|
onUndo?: () => void;
|
|
13
13
|
onRedo?: () => void;
|
|
14
14
|
}
|
|
15
|
-
export declare function FormEditCTAs({ saveText, disabled,
|
|
15
|
+
export declare function FormEditCTAs({ saveText, disabled, onCopy, hasUndo, hasRedo, onUndo, onRedo, onReset, onSubmit, options }: FormEditCTAsProps): ReactElement;
|
|
@@ -1,52 +1,53 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
onCopy:
|
|
9
|
-
hasUndo:
|
|
10
|
-
hasRedo:
|
|
11
|
-
onUndo:
|
|
12
|
-
onRedo:
|
|
13
|
-
onReset:
|
|
14
|
-
onSubmit:
|
|
1
|
+
import { jsx as e, jsxs as r } from "react/jsx-runtime";
|
|
2
|
+
import { useI18n as N } from "../../../hooks/useI18n.js";
|
|
3
|
+
import { useTooltip as c } from "../../../hooks/useTooltip.js";
|
|
4
|
+
import { registerComponent as k, getComponent as s } from "../../../registries/components.js";
|
|
5
|
+
function R({
|
|
6
|
+
saveText: m = "Save",
|
|
7
|
+
disabled: d,
|
|
8
|
+
onCopy: a,
|
|
9
|
+
hasUndo: h,
|
|
10
|
+
hasRedo: p,
|
|
11
|
+
onUndo: g,
|
|
12
|
+
onRedo: v,
|
|
13
|
+
onReset: l,
|
|
14
|
+
onSubmit: f,
|
|
15
|
+
options: t
|
|
15
16
|
}) {
|
|
16
|
-
const {
|
|
17
|
+
const { t: i } = N(t?.i18n), u = c({
|
|
17
18
|
trigger: "hover",
|
|
18
19
|
placement: "top",
|
|
19
|
-
title:
|
|
20
|
-
}),
|
|
20
|
+
title: i("Copy")
|
|
21
|
+
}), C = c({
|
|
21
22
|
trigger: "hover",
|
|
22
23
|
placement: "top",
|
|
23
|
-
title:
|
|
24
|
-
}),
|
|
24
|
+
title: i("Undo last change")
|
|
25
|
+
}), b = c({
|
|
25
26
|
trigger: "hover",
|
|
26
27
|
placement: "top",
|
|
27
|
-
title:
|
|
28
|
-
}),
|
|
28
|
+
title: i("Redo last change")
|
|
29
|
+
}), T = c({
|
|
29
30
|
trigger: "hover",
|
|
30
31
|
placement: "top",
|
|
31
|
-
title:
|
|
32
|
-
}),
|
|
33
|
-
return /* @__PURE__ */ e("div", { className: "form-edit__actions", children: /* @__PURE__ */
|
|
34
|
-
/* @__PURE__ */ n
|
|
35
|
-
/* @__PURE__ */ e(
|
|
36
|
-
|
|
32
|
+
title: i("Reset all changes")
|
|
33
|
+
}), n = s("Button"), o = s("Icon");
|
|
34
|
+
return /* @__PURE__ */ e("div", { className: "form-edit__actions", children: /* @__PURE__ */ r("div", { children: [
|
|
35
|
+
/* @__PURE__ */ r(n, { variant: "primary", className: "btn-save", disabled: d, onClick: () => f?.(), children: [
|
|
36
|
+
/* @__PURE__ */ e(o, { name: "save", iconset: t?.iconset }),
|
|
37
|
+
m
|
|
37
38
|
] }),
|
|
38
|
-
/* @__PURE__ */
|
|
39
|
-
/* @__PURE__ */ e(
|
|
40
|
-
/* @__PURE__ */ e(
|
|
39
|
+
/* @__PURE__ */ r("div", { children: [
|
|
40
|
+
/* @__PURE__ */ e(n, { variant: "light", className: "btn-undo", disabled: !h, onClick: () => g?.(), ref: C, children: /* @__PURE__ */ e(o, { name: "undo", iconset: t?.iconset }) }),
|
|
41
|
+
/* @__PURE__ */ e(n, { variant: "light", className: "btn-redo", disabled: !p, onClick: () => v?.(), ref: b, children: /* @__PURE__ */ e(o, { name: "redo", iconset: t?.iconset }) })
|
|
41
42
|
] }),
|
|
42
|
-
/* @__PURE__ */
|
|
43
|
-
|
|
44
|
-
/* @__PURE__ */ e(
|
|
43
|
+
/* @__PURE__ */ r("div", { children: [
|
|
44
|
+
a && /* @__PURE__ */ e(n, { variant: "light", className: "btn-copy", onClick: () => a(), ref: u, children: /* @__PURE__ */ e(o, { name: "copy", iconset: t?.iconset }) }),
|
|
45
|
+
/* @__PURE__ */ e(n, { variant: "light", className: "btn-reset", onClick: () => l && l(), ref: T, children: /* @__PURE__ */ e(o, { name: "reset", iconset: t?.iconset }) })
|
|
45
46
|
] })
|
|
46
47
|
] }) });
|
|
47
48
|
}
|
|
48
|
-
|
|
49
|
+
k("FormEditCTAs", R);
|
|
49
50
|
export {
|
|
50
|
-
|
|
51
|
+
R as FormEditCTAs
|
|
51
52
|
};
|
|
52
53
|
//# sourceMappingURL=FormEditCtas.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormEditCtas.js","sources":["../../../../src/organisms/form/builder/FormEditCtas.tsx"],"sourcesContent":["import { ReactElement } from \"react\";\n\nimport { Icon as DefaultIcon } from \"../../../atoms/icon/Icon\";\nimport { useTooltip } from \"../../../hooks/useTooltip\";\nimport type { FormOptions } from \"../../../interfaces\";\nimport { Button as DefaultButton } from \"../../../molecules/button/Button\";\nimport { getComponent, registerComponent } from \"../../../registries/components\";\n\nexport interface FormEditCTAsProps extends Record<string, unknown> {\n saveText?: string;\n options?: FormOptions;\n hasUndo?: boolean;\n hasRedo?: boolean;\n disabled?: boolean;\n onCopy?: () => void;\n onSubmit?: () => void;\n onReset?: () => void;\n onUndo?: () => void;\n onRedo?: () => void;\n}\n\nexport function FormEditCTAs({\n saveText = \"Save\",\n disabled,\n
|
|
1
|
+
{"version":3,"file":"FormEditCtas.js","sources":["../../../../src/organisms/form/builder/FormEditCtas.tsx"],"sourcesContent":["import { ReactElement } from \"react\";\n\nimport { Icon as DefaultIcon } from \"../../../atoms/icon/Icon\";\nimport { useI18n } from \"../../../hooks/useI18n\";\nimport { useTooltip } from \"../../../hooks/useTooltip\";\nimport type { FormOptions } from \"../../../interfaces/index.js\";\nimport { Button as DefaultButton } from \"../../../molecules/button/Button\";\nimport { getComponent, registerComponent } from \"../../../registries/components\";\n\nexport interface FormEditCTAsProps extends Record<string, unknown> {\n saveText?: string;\n options?: FormOptions;\n hasUndo?: boolean;\n hasRedo?: boolean;\n disabled?: boolean;\n onCopy?: () => void;\n onSubmit?: () => void;\n onReset?: () => void;\n onUndo?: () => void;\n onRedo?: () => void;\n}\n\nexport function FormEditCTAs({\n saveText = \"Save\",\n disabled,\n onCopy,\n hasUndo,\n hasRedo,\n onUndo,\n onRedo,\n onReset,\n onSubmit,\n options\n}: FormEditCTAsProps): ReactElement {\n const { t } = useI18n(options?.i18n);\n const copyTooltipRef: any = useTooltip({\n trigger: \"hover\",\n placement: \"top\",\n title: t(\"Copy\")\n });\n\n const undoTooltipRef: any = useTooltip({\n trigger: \"hover\",\n placement: \"top\",\n title: t(\"Undo last change\")\n });\n\n const redoTooltipRef: any = useTooltip({\n trigger: \"hover\",\n placement: \"top\",\n title: t(\"Redo last change\")\n });\n\n const resetTooltipRef: any = useTooltip({\n trigger: \"hover\",\n placement: \"top\",\n title: t(\"Reset all changes\")\n });\n\n const Button = getComponent<typeof DefaultButton>(\"Button\");\n const Icon = getComponent<typeof DefaultIcon>(\"Icon\");\n\n return (\n <div className={\"form-edit__actions\"}>\n <div>\n <Button variant='primary' className='btn-save' disabled={disabled} onClick={() => onSubmit?.()}>\n <Icon name='save' iconset={options?.iconset} />\n {saveText}\n </Button>\n\n <div>\n <Button variant='light' className='btn-undo' disabled={!hasUndo} onClick={() => onUndo?.()} ref={undoTooltipRef}>\n <Icon name='undo' iconset={options?.iconset} />\n </Button>\n\n <Button variant='light' className='btn-redo' disabled={!hasRedo} onClick={() => onRedo?.()} ref={redoTooltipRef}>\n <Icon name='redo' iconset={options?.iconset} />\n </Button>\n </div>\n\n <div>\n {onCopy && (\n <Button variant='light' className='btn-copy' onClick={() => onCopy()} ref={copyTooltipRef}>\n <Icon name='copy' iconset={options?.iconset} />\n </Button>\n )}\n\n <Button variant='light' className='btn-reset' onClick={() => onReset && onReset()} ref={resetTooltipRef!}>\n <Icon name='reset' iconset={options?.iconset} />\n </Button>\n </div>\n </div>\n </div>\n );\n}\n\nregisterComponent(\"FormEditCTAs\", FormEditCTAs);\n"],"names":["FormEditCTAs","saveText","disabled","onCopy","hasUndo","hasRedo","onUndo","onRedo","onReset","onSubmit","options","t","useI18n","copyTooltipRef","useTooltip","undoTooltipRef","redoTooltipRef","resetTooltipRef","Button","getComponent","Icon","jsx","jsxs","registerComponent"],"mappings":";;;;AAsBO,SAASA,EAAa;AAAA,EAC3B,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AACF,GAAoC;AAClC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAQF,GAAS,IAAI,GAC7BG,IAAsBC,EAAW;AAAA,IACrC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAOH,EAAE,MAAM;AAAA,EAAA,CAChB,GAEKI,IAAsBD,EAAW;AAAA,IACrC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAOH,EAAE,kBAAkB;AAAA,EAAA,CAC5B,GAEKK,IAAsBF,EAAW;AAAA,IACrC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAOH,EAAE,kBAAkB;AAAA,EAAA,CAC5B,GAEKM,IAAuBH,EAAW;AAAA,IACtC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAOH,EAAE,mBAAmB;AAAA,EAAA,CAC7B,GAEKO,IAASC,EAAmC,QAAQ,GACpDC,IAAOD,EAAiC,MAAM;AAEpD,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAW,sBACd,4BAAC,OAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACJ,GAAA,EAAO,SAAQ,WAAU,WAAU,YAAW,UAAAhB,GAAoB,SAAS,MAAMO,IAAA,GAChF,UAAA;AAAA,MAAA,gBAAAY,EAACD,GAAA,EAAK,MAAK,QAAO,SAASV,GAAS,SAAS;AAAA,MAC5CT;AAAA,IAAA,GACH;AAAA,sBAEC,OAAA,EACC,UAAA;AAAA,MAAA,gBAAAoB,EAACH,GAAA,EAAO,SAAQ,SAAQ,WAAU,YAAW,UAAU,CAACd,GAAS,SAAS,MAAME,OAAY,KAAKS,GAC/F,UAAA,gBAAAM,EAACD,GAAA,EAAK,MAAK,QAAO,SAASV,GAAS,QAAA,CAAS,EAAA,CAC/C;AAAA,MAEA,gBAAAW,EAACH,KAAO,SAAQ,SAAQ,WAAU,YAAW,UAAU,CAACb,GAAS,SAAS,MAAME,OAAY,KAAKS,GAC/F,UAAA,gBAAAK,EAACD,GAAA,EAAK,MAAK,QAAO,SAASV,GAAS,QAAA,CAAS,EAAA,CAC/C;AAAA,IAAA,GACF;AAAA,sBAEC,OAAA,EACE,UAAA;AAAA,MAAAP,uBACEe,GAAA,EAAO,SAAQ,SAAQ,WAAU,YAAW,SAAS,MAAMf,KAAU,KAAKU,GACzE,4BAACO,GAAA,EAAK,MAAK,QAAO,SAASV,GAAS,SAAS,GAC/C;AAAA,MAGF,gBAAAW,EAACH,KAAO,SAAQ,SAAQ,WAAU,aAAY,SAAS,MAAMV,KAAWA,EAAA,GAAW,KAAKS,GACtF,4BAACG,GAAA,EAAK,MAAK,SAAQ,SAASV,GAAS,SAAS,EAAA,CAChD;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEAa,EAAkB,gBAAgBvB,CAAY;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormParameters.js","sources":["../../../../src/organisms/form/builder/FormParameters.tsx"],"sourcesContent":["import { ReactElement } from \"react\";\n\nimport type { FormType } from \"../../../interfaces\";\nimport { InputTags as DefaultInputTags } from \"../../../molecules/forms/input-tags/InputTags\";\nimport { InputText as DefaultInputText } from \"../../../molecules/forms/input-text/InputText\";\nimport { Select as DefaultSelect } from \"../../../molecules/forms/select/Select\";\nimport { getComponent, registerComponent } from \"../../../registries/components\";\n\nexport const defaultDisplayChoices = [\n { label: \"Form\", value: \"form\" },\n { label: \"Wizard\", value: \"wizard\" },\n { label: \"Pdf\", value: \"pdf\" }\n];\n\nexport interface FormParametersProps {\n onChange?: (name: string | undefined, value: any) => void;\n form: Partial<FormType>;\n typeChoices?: { label: string; value: any }[];\n displayChoices?: { label: string; value: any }[];\n enableTags?: boolean;\n className?: string;\n baseUrl?: string;\n layout?: \"html5\" | \"choicesjs\" | \"react\";\n readonly?: Record<string, boolean>;\n}\n\nexport function FormParameters({\n onChange,\n form,\n enableTags = true,\n typeChoices = [],\n displayChoices = defaultDisplayChoices,\n className = \"\",\n readonly = {},\n layout,\n baseUrl = window.location.origin\n}: FormParametersProps): ReactElement {\n const hasTypeChoices = typeChoices && typeChoices.length > 1;\n\n const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n const Select = getComponent<typeof DefaultSelect>(\"Select\");\n const InputTags = getComponent<typeof DefaultInputTags>(\"InputTags\");\n\n return (\n <div className={`form-edit__settings ${className}`}>\n <div>\n <InputText\n label={\"Title\"}\n placeholder='Enter the form title'\n name={\"title\"}\n required={true}\n value={form.title}\n disabled={readonly[\"title\"]}\n onChange={onChange}\n />\n </div>\n <div>\n <InputText\n label={\"Name\"}\n placeholder='Enter the form machine name'\n name={\"name\"}\n required={true}\n disabled={readonly[\"name\"]}\n value={form.name}\n onChange={onChange}\n />\n </div>\n <div>\n <InputText\n label={\"Path\"}\n placeholder='example'\n name={\"path\"}\n className={\"mb-0\"}\n description={\n <span className={\"text-xxs flex items-center\"}>\n <i className={\"bx bx-link ml-1 mr-1\"} />\n {`${baseUrl}/${form.path}`}\n </span>\n }\n required={true}\n value={form.path}\n disabled={readonly[\"path\"]}\n style={{ textTransform: \"lowercase\", width: \"120px\" }}\n onChange={onChange}\n />\n </div>\n <div>\n <Select\n layout={layout}\n label={\"Display as\"}\n name={\"display\"}\n disabled={readonly[\"display\"]}\n value={form.display}\n options={displayChoices}\n onChange={onChange}\n />\n </div>\n {hasTypeChoices && (\n <div>\n <Select layout={layout} label={\"Type\"} name={\"type\"} value={form.type} options={typeChoices} onChange={onChange} />\n </div>\n )}\n {enableTags && (\n <div>\n <InputTags layout={layout} label={\"Tags\"} name={\"tags\"} value={form.tags} onChange={onChange} />\n </div>\n )}\n </div>\n );\n}\n\nregisterComponent(\"FormParameters\", FormParameters);\n"],"names":["defaultDisplayChoices","FormParameters","onChange","form","enableTags","typeChoices","displayChoices","className","readonly","layout","baseUrl","hasTypeChoices","InputText","getComponent","Select","InputTags","jsxs","jsx","registerComponent"],"mappings":";;AAQO,MAAMA,IAAwB;AAAA,EACnC,EAAE,OAAO,QAAQ,OAAO,
|
|
1
|
+
{"version":3,"file":"FormParameters.js","sources":["../../../../src/organisms/form/builder/FormParameters.tsx"],"sourcesContent":["import { ReactElement } from \"react\";\n\nimport type { FormType } from \"../../../interfaces\";\nimport { InputTags as DefaultInputTags } from \"../../../molecules/forms/input-tags/InputTags\";\nimport { InputText as DefaultInputText } from \"../../../molecules/forms/input-text/InputText\";\nimport { Select as DefaultSelect } from \"../../../molecules/forms/select/Select\";\nimport { getComponent, registerComponent } from \"../../../registries/components\";\n\nexport const defaultDisplayChoices = [\n { label: \"Form\", value: \"form\" },\n { label: \"Wizard\", value: \"wizard\" },\n { label: \"Pdf\", value: \"pdf\" }\n];\n\nexport interface FormParametersProps {\n onChange?: (name: string | undefined, value: any) => void;\n form: Partial<FormType>;\n typeChoices?: { label: string; value: any }[];\n displayChoices?: { label: string; value: any }[];\n enableTags?: boolean;\n className?: string;\n baseUrl?: string;\n layout?: \"html5\" | \"choicesjs\" | \"react\";\n readonly?: Record<string, boolean>;\n}\n\nexport function FormParameters({\n onChange,\n form,\n enableTags = true,\n typeChoices = [],\n displayChoices = defaultDisplayChoices,\n className = \"\",\n readonly = {},\n layout,\n baseUrl = window.location.origin\n}: FormParametersProps): ReactElement {\n const hasTypeChoices = typeChoices && typeChoices.length > 1;\n\n const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n const Select = getComponent<typeof DefaultSelect>(\"Select\");\n const InputTags = getComponent<typeof DefaultInputTags>(\"InputTags\");\n\n return (\n <div className={`form-edit__settings ${className}`}>\n <div>\n <InputText\n label={\"Title\"}\n placeholder='Enter the form title'\n name={\"title\"}\n required={true}\n value={form.title}\n disabled={readonly[\"title\"]}\n onChange={onChange}\n />\n </div>\n <div>\n <InputText\n label={\"Name\"}\n placeholder='Enter the form machine name'\n name={\"name\"}\n required={true}\n disabled={readonly[\"name\"]}\n value={form.name}\n onChange={onChange}\n />\n </div>\n <div>\n <InputText\n label={\"Path\"}\n placeholder='example'\n name={\"path\"}\n className={\"mb-0\"}\n description={\n <span className={\"text-xxs flex items-center\"}>\n <i className={\"bx bx-link ml-1 mr-1\"} />\n {`${baseUrl}/${form.path}`}\n </span>\n }\n required={true}\n value={form.path}\n disabled={readonly[\"path\"]}\n style={{ textTransform: \"lowercase\", width: \"120px\" }}\n onChange={onChange}\n />\n </div>\n <div>\n <Select\n layout={layout}\n label={\"Display as\"}\n name={\"display\"}\n disabled={readonly[\"display\"]}\n value={form.display}\n options={displayChoices}\n onChange={onChange}\n />\n </div>\n {hasTypeChoices && (\n <div>\n <Select layout={layout} label={\"Type\"} name={\"type\"} value={form.type} options={typeChoices} onChange={onChange} />\n </div>\n )}\n {enableTags && (\n <div>\n <InputTags layout={layout} label={\"Tags\"} name={\"tags\"} value={form.tags} onChange={onChange} />\n </div>\n )}\n </div>\n );\n}\n\nregisterComponent(\"FormParameters\", FormParameters);\n"],"names":["defaultDisplayChoices","FormParameters","onChange","form","enableTags","typeChoices","displayChoices","className","readonly","layout","baseUrl","hasTypeChoices","InputText","getComponent","Select","InputTags","jsxs","jsx","registerComponent"],"mappings":";;AAQO,MAAMA,IAAwB;AAAA,EACnC,EAAE,OAAO,QAAQ,OAAO,OAAA;AAAA,EACxB,EAAE,OAAO,UAAU,OAAO,SAAA;AAAA,EAC1B,EAAE,OAAO,OAAO,OAAO,MAAA;AACzB;AAcO,SAASC,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,aAAAC,IAAc,CAAA;AAAA,EACd,gBAAAC,IAAiBN;AAAA,EACjB,WAAAO,IAAY;AAAA,EACZ,UAAAC,IAAW,CAAA;AAAA,EACX,QAAAC;AAAA,EACA,SAAAC,IAAU,OAAO,SAAS;AAC5B,GAAsC;AACpC,QAAMC,IAAiBN,KAAeA,EAAY,SAAS,GAErDO,IAAYC,EAAsC,WAAW,GAC7DC,IAASD,EAAmC,QAAQ,GACpDE,IAAYF,EAAsC,WAAW;AAEnE,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAW,uBAAuBT,CAAS,IAC9C,UAAA;AAAA,IAAA,gBAAAU,EAAC,OAAA,EACC,UAAA,gBAAAA;AAAA,MAACL;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAOT,EAAK;AAAA,QACZ,UAAUK,EAAS;AAAA,QACnB,UAAAN;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,sBACC,OAAA,EACC,UAAA,gBAAAe;AAAA,MAACL;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,MAAM;AAAA,QACN,UAAU;AAAA,QACV,UAAUJ,EAAS;AAAA,QACnB,OAAOL,EAAK;AAAA,QACZ,UAAAD;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,sBACC,OAAA,EACC,UAAA,gBAAAe;AAAA,MAACL;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,MAAM;AAAA,QACN,WAAW;AAAA,QACX,aACE,gBAAAI,EAAC,QAAA,EAAK,WAAW,8BACf,UAAA;AAAA,UAAA,gBAAAC,EAAC,KAAA,EAAE,WAAW,uBAAA,CAAwB;AAAA,UACrC,GAAGP,CAAO,IAAIP,EAAK,IAAI;AAAA,QAAA,GAC1B;AAAA,QAEF,UAAU;AAAA,QACV,OAAOA,EAAK;AAAA,QACZ,UAAUK,EAAS;AAAA,QACnB,OAAO,EAAE,eAAe,aAAa,OAAO,QAAA;AAAA,QAC5C,UAAAN;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,sBACC,OAAA,EACC,UAAA,gBAAAe;AAAA,MAACH;AAAA,MAAA;AAAA,QACC,QAAAL;AAAA,QACA,OAAO;AAAA,QACP,MAAM;AAAA,QACN,UAAUD,EAAS;AAAA,QACnB,OAAOL,EAAK;AAAA,QACZ,SAASG;AAAA,QACT,UAAAJ;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IACCS,KACC,gBAAAM,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACH,GAAA,EAAO,QAAAL,GAAgB,OAAO,QAAQ,MAAM,QAAQ,OAAON,EAAK,MAAM,SAASE,GAAa,UAAAH,GAAoB,GACnH;AAAA,IAEDE,KACC,gBAAAa,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACF,KAAU,QAAAN,GAAgB,OAAO,QAAQ,MAAM,QAAQ,OAAON,EAAK,MAAM,UAAAD,GAAoB,EAAA,CAChG;AAAA,EAAA,GAEJ;AAEJ;AAEAgB,EAAkB,kBAAkBjB,CAAc;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { FormBuilder as FormioFormBuilder } from '
|
|
2
|
-
import { ComponentType,
|
|
1
|
+
import { FormBuilder as FormioFormBuilder } from '@formio/js';
|
|
2
|
+
import { ComponentType, FormBuilderOptions, FormType } from '../../../interfaces';
|
|
3
3
|
interface BuilderConstructor {
|
|
4
|
-
new (element: HTMLDivElement, form: FormType, options:
|
|
4
|
+
new (element: HTMLDivElement, form: FormType, options: FormBuilderOptions): FormioFormBuilder;
|
|
5
5
|
}
|
|
6
6
|
export interface FormBuilderEvents {
|
|
7
7
|
onAddComponent?: Function;
|
|
@@ -22,7 +22,7 @@ export interface UseFormBuilderProps extends FormBuilderEvents {
|
|
|
22
22
|
Builder?: BuilderConstructor;
|
|
23
23
|
components: ComponentType[];
|
|
24
24
|
display?: string;
|
|
25
|
-
options?:
|
|
25
|
+
options?: FormBuilderOptions;
|
|
26
26
|
}
|
|
27
27
|
export declare function useFormBuilder({ components, display, options, onBuilderReady, onChange, ...props }: UseFormBuilderProps): import('react').RefObject<HTMLDivElement>;
|
|
28
28
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { c as R } from "../../../chunks/index2.js";
|
|
2
2
|
import p from "lodash/cloneDeep";
|
|
3
|
-
import { useRef as
|
|
4
|
-
const
|
|
3
|
+
import { useRef as l, useState as b, useEffect as d } from "react";
|
|
4
|
+
const g = [
|
|
5
5
|
"addComponent",
|
|
6
6
|
"updateComponent",
|
|
7
7
|
"removeComponent",
|
|
@@ -12,58 +12,61 @@ const w = [
|
|
|
12
12
|
"editJson",
|
|
13
13
|
"copyComponent",
|
|
14
14
|
"pasteComponent"
|
|
15
|
-
],
|
|
16
|
-
async function E(
|
|
17
|
-
const
|
|
18
|
-
display:
|
|
15
|
+
], v = ["addComponent", "saveComponent", "updateComponent", "removeComponent"];
|
|
16
|
+
async function E(t, { components: o = [], display: u, options: c, onChange: m, events: i = {} }) {
|
|
17
|
+
const s = {
|
|
18
|
+
display: u,
|
|
19
19
|
components: [...o]
|
|
20
|
-
}, e = await new
|
|
21
|
-
i[
|
|
20
|
+
}, e = await new R.FormBuilder(t, s, { ...c }).ready, f = (r) => (...a) => {
|
|
21
|
+
i[r] && i[r](...a), v.includes(r) && m(e.form.components);
|
|
22
22
|
};
|
|
23
|
-
return
|
|
23
|
+
return g.forEach((r) => e.on(r, f(r))), e;
|
|
24
24
|
}
|
|
25
|
-
function j({ components:
|
|
26
|
-
const
|
|
27
|
-
|
|
25
|
+
function j({ components: t, display: o, options: u = {}, onBuilderReady: c, onChange: m, ...i }) {
|
|
26
|
+
const s = l(null), e = l(null), [f, r] = b(p(t)), a = Object.fromEntries(Object.entries(i).filter(([n]) => n.startsWith("on")));
|
|
27
|
+
d(() => {
|
|
28
28
|
async function n() {
|
|
29
|
-
if (!
|
|
29
|
+
if (!s.current) {
|
|
30
30
|
console.warn("FormBuilder render element not found, cannot render builder.");
|
|
31
31
|
return;
|
|
32
32
|
}
|
|
33
|
-
e.current = await E(
|
|
33
|
+
e.current = await E(s.current.firstChild, {
|
|
34
34
|
display: o,
|
|
35
|
-
options: { ...
|
|
36
|
-
components: p(
|
|
35
|
+
options: { ...u },
|
|
36
|
+
components: p(t),
|
|
37
37
|
onChange: C,
|
|
38
|
-
events:
|
|
38
|
+
events: a
|
|
39
39
|
}), c && c(e.current);
|
|
40
40
|
}
|
|
41
|
-
return n().catch((
|
|
42
|
-
console.error(
|
|
41
|
+
return n().catch((h) => {
|
|
42
|
+
console.error(h);
|
|
43
43
|
}), () => {
|
|
44
|
-
|
|
45
|
-
(a = e.current) == null || a.destroy();
|
|
44
|
+
e.current?.destroy();
|
|
46
45
|
};
|
|
47
|
-
}, []),
|
|
48
|
-
e.current && (o !== e.current.form.display ? E(
|
|
46
|
+
}, []), d(() => {
|
|
47
|
+
e.current && (o !== e.current.form.display ? E(s.current.firstChild, {
|
|
49
48
|
display: o,
|
|
50
|
-
options: { ...
|
|
51
|
-
components: p(
|
|
49
|
+
options: { ...u },
|
|
50
|
+
components: p(t),
|
|
52
51
|
onChange: C,
|
|
53
|
-
events:
|
|
52
|
+
events: a
|
|
54
53
|
}).then((n) => {
|
|
55
54
|
e.current = n, c && c(e.current);
|
|
56
55
|
}).catch((n) => {
|
|
57
|
-
console.error(
|
|
58
|
-
|
|
56
|
+
console.error({
|
|
57
|
+
event: "FORM_BUILDER_RECREATE_ERROR",
|
|
58
|
+
message: n.message,
|
|
59
|
+
stack: n.stack
|
|
60
|
+
});
|
|
61
|
+
}) : t !== f && (e.current.form = {
|
|
59
62
|
display: o,
|
|
60
|
-
components:
|
|
63
|
+
components: t
|
|
61
64
|
}));
|
|
62
|
-
}, [o,
|
|
65
|
+
}, [o, t]);
|
|
63
66
|
const C = (n) => {
|
|
64
|
-
|
|
67
|
+
r(n), m && m(n);
|
|
65
68
|
};
|
|
66
|
-
return
|
|
69
|
+
return s;
|
|
67
70
|
}
|
|
68
71
|
export {
|
|
69
72
|
j as useFormBuilder
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFormBuilder.js","sources":["../../../../src/organisms/form/builder/useFormBuilder.ts"],"sourcesContent":["import { FormBuilder as FormioFormBuilder } from \"
|
|
1
|
+
{"version":3,"file":"useFormBuilder.js","sources":["../../../../src/organisms/form/builder/useFormBuilder.ts"],"sourcesContent":["import { FormBuilder as FormioFormBuilder } from \"@formio/js\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { ComponentType, FormBuilderOptions, FormType } from \"../../../interfaces\";\n\ninterface BuilderConstructor {\n new (element: HTMLDivElement, form: FormType, options: FormBuilderOptions): FormioFormBuilder;\n}\n\nconst EVENTS = [\n \"addComponent\",\n \"updateComponent\",\n \"removeComponent\",\n \"saveComponent\",\n \"cancelComponent\",\n \"moveComponent\",\n \"editComponent\",\n \"editJson\",\n \"copyComponent\",\n \"pasteComponent\"\n];\n\nconst EVENTS_CHANGE = [\"addComponent\", \"saveComponent\", \"updateComponent\", \"removeComponent\"];\n\nasync function createBuilder(el: Element, { components = [], display, options, onChange, events = {} }: any): Promise<FormioFormBuilder> {\n const form = {\n display,\n components: [...components]\n };\n\n const builder = await new FormioFormBuilder(el as HTMLElement, form, { ...options }).ready;\n\n const handleEvent = (event: string) => {\n return (...args: any[]) => {\n events[event] && events[event](...args);\n\n if (EVENTS_CHANGE.includes(event)) {\n onChange(builder.form.components);\n }\n };\n };\n\n EVENTS.forEach((event) => builder.on(event, handleEvent(event)));\n\n return builder;\n}\n\nexport interface FormBuilderEvents {\n onAddComponent?: Function;\n onRemoveComponent?: Function;\n onCancelComponent?: Function;\n onMoveComponent?: Function;\n onEditJson?: Function;\n onCopyComponent?: Function;\n onPasteComponent?: Function;\n onBuilderReady?: (builder: FormioFormBuilder) => void;\n onChange?: (components: ComponentType[]) => void;\n onSaveComponent?: (\n component: ComponentType,\n original: ComponentType,\n parent: ComponentType,\n path: string,\n index: number,\n isNew: boolean,\n originalComponentSchema: ComponentType\n ) => void;\n onEditComponent?: (component: ComponentType) => void;\n onUpdateComponent?: (component: ComponentType) => void;\n onDeleteComponent?: (component: ComponentType, parent: ComponentType, path: string, index: number) => void;\n}\n\nexport interface UseFormBuilderProps extends FormBuilderEvents {\n Builder?: BuilderConstructor;\n components: ComponentType[];\n display?: string;\n options?: FormBuilderOptions;\n}\n\nexport function useFormBuilder({ components, display, options = {}, onBuilderReady, onChange, ...props }: UseFormBuilderProps) {\n const renderElement = useRef<HTMLDivElement>(null);\n const builderRef = useRef<FormioFormBuilder | null>(null);\n const [currentComponents, setCurrentComponents] = useState<ComponentType[]>(cloneDeep(components));\n const events = Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith(\"on\")));\n\n useEffect(() => {\n async function initializeBuilder() {\n if (!renderElement.current) {\n console.warn(\"FormBuilder render element not found, cannot render builder.\");\n return;\n }\n\n builderRef.current = await createBuilder(renderElement.current.firstChild as Element, {\n display,\n options: { ...options },\n components: cloneDeep(components),\n onChange: handleComponentsChange,\n events\n });\n\n onBuilderReady && onBuilderReady(builderRef.current);\n }\n\n initializeBuilder().catch((er) => {\n console.error(er);\n });\n\n return () => {\n builderRef.current?.destroy();\n };\n }, []);\n\n useEffect(() => {\n if (builderRef.current) {\n if (display !== (builderRef.current.form as FormType).display) {\n createBuilder(renderElement.current!.firstChild as Element, {\n display,\n options: { ...options },\n components: cloneDeep(components),\n onChange: handleComponentsChange,\n events\n })\n .then((builder) => {\n builderRef.current = builder;\n onBuilderReady && onBuilderReady(builderRef.current);\n })\n .catch((er) => {\n console.error({\n event: \"FORM_BUILDER_RECREATE_ERROR\",\n message: er.message,\n stack: er.stack\n });\n });\n } else if (components !== currentComponents) {\n builderRef.current.form = {\n display,\n components\n };\n }\n }\n }, [display, components]);\n\n const handleComponentsChange = (newComponents: ComponentType[]) => {\n setCurrentComponents(newComponents);\n onChange && onChange(newComponents);\n };\n return renderElement;\n}\n"],"names":["EVENTS","EVENTS_CHANGE","createBuilder","el","components","display","options","onChange","events","form","builder","FormioFormBuilder","handleEvent","event","args","useFormBuilder","onBuilderReady","props","renderElement","useRef","builderRef","currentComponents","setCurrentComponents","useState","cloneDeep","key","useEffect","initializeBuilder","handleComponentsChange","er","newComponents"],"mappings":";;;AAUA,MAAMA,IAAS;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEMC,IAAgB,CAAC,gBAAgB,iBAAiB,mBAAmB,iBAAiB;AAE5F,eAAeC,EAAcC,GAAa,EAAE,YAAAC,IAAa,CAAA,GAAI,SAAAC,GAAS,SAAAC,GAAS,UAAAC,GAAU,QAAAC,IAAS,CAAA,KAAuC;AACvI,QAAMC,IAAO;AAAA,IACX,SAAAJ;AAAA,IACA,YAAY,CAAC,GAAGD,CAAU;AAAA,EAAA,GAGtBM,IAAU,MAAM,IAAIC,cAAkBR,GAAmBM,GAAM,EAAE,GAAGH,EAAA,CAAS,EAAE,OAE/EM,IAAc,CAACC,MACZ,IAAIC,MAAgB;AACzB,IAAAN,EAAOK,CAAK,KAAKL,EAAOK,CAAK,EAAE,GAAGC,CAAI,GAElCb,EAAc,SAASY,CAAK,KAC9BN,EAASG,EAAQ,KAAK,UAAU;AAAA,EAEpC;AAGF,SAAAV,EAAO,QAAQ,CAACa,MAAUH,EAAQ,GAAGG,GAAOD,EAAYC,CAAK,CAAC,CAAC,GAExDH;AACT;AAiCO,SAASK,EAAe,EAAE,YAAAX,GAAY,SAAAC,GAAS,SAAAC,IAAU,CAAA,GAAI,gBAAAU,GAAgB,UAAAT,GAAU,GAAGU,KAA8B;AAC7H,QAAMC,IAAgBC,EAAuB,IAAI,GAC3CC,IAAaD,EAAiC,IAAI,GAClD,CAACE,GAAmBC,CAAoB,IAAIC,EAA0BC,EAAUpB,CAAU,CAAC,GAC3FI,IAAS,OAAO,YAAY,OAAO,QAAQS,CAAK,EAAE,OAAO,CAAC,CAACQ,CAAG,MAAMA,EAAI,WAAW,IAAI,CAAC,CAAC;AAE/F,EAAAC,EAAU,MAAM;AACd,mBAAeC,IAAoB;AACjC,UAAI,CAACT,EAAc,SAAS;AAC1B,gBAAQ,KAAK,8DAA8D;AAC3E;AAAA,MACF;AAEA,MAAAE,EAAW,UAAU,MAAMlB,EAAcgB,EAAc,QAAQ,YAAuB;AAAA,QACpF,SAAAb;AAAA,QACA,SAAS,EAAE,GAAGC,EAAA;AAAA,QACd,YAAYkB,EAAUpB,CAAU;AAAA,QAChC,UAAUwB;AAAA,QACV,QAAApB;AAAA,MAAA,CACD,GAEDQ,KAAkBA,EAAeI,EAAW,OAAO;AAAA,IACrD;AAEA,WAAAO,EAAA,EAAoB,MAAM,CAACE,MAAO;AAChC,cAAQ,MAAMA,CAAE;AAAA,IAClB,CAAC,GAEM,MAAM;AACX,MAAAT,EAAW,SAAS,QAAA;AAAA,IACtB;AAAA,EACF,GAAG,CAAA,CAAE,GAELM,EAAU,MAAM;AACd,IAAIN,EAAW,YACTf,MAAae,EAAW,QAAQ,KAAkB,UACpDlB,EAAcgB,EAAc,QAAS,YAAuB;AAAA,MAC1D,SAAAb;AAAA,MACA,SAAS,EAAE,GAAGC,EAAA;AAAA,MACd,YAAYkB,EAAUpB,CAAU;AAAA,MAChC,UAAUwB;AAAA,MACV,QAAApB;AAAA,IAAA,CACD,EACE,KAAK,CAACE,MAAY;AACjB,MAAAU,EAAW,UAAUV,GACrBM,KAAkBA,EAAeI,EAAW,OAAO;AAAA,IACrD,CAAC,EACA,MAAM,CAACS,MAAO;AACb,cAAQ,MAAM;AAAA,QACZ,OAAO;AAAA,QACP,SAASA,EAAG;AAAA,QACZ,OAAOA,EAAG;AAAA,MAAA,CACX;AAAA,IACH,CAAC,IACMzB,MAAeiB,MACxBD,EAAW,QAAQ,OAAO;AAAA,MACxB,SAAAf;AAAA,MACA,YAAAD;AAAA,IAAA;AAAA,EAIR,GAAG,CAACC,GAASD,CAAU,CAAC;AAExB,QAAMwB,IAAyB,CAACE,MAAmC;AACjE,IAAAR,EAAqBQ,CAAa,GAClCvB,KAAYA,EAASuB,CAAa;AAAA,EACpC;AACA,SAAOZ;AACT;"}
|
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
import s from "lodash/cloneDeep";
|
|
2
2
|
import { useReducer as y, useEffect as g } from "react";
|
|
3
3
|
import { reducer as C, createInitialState as S, hasChanged as b } from "./FormEdit.reducer.js";
|
|
4
|
-
function R(
|
|
5
|
-
const [{ current:
|
|
6
|
-
|
|
7
|
-
},
|
|
8
|
-
|
|
4
|
+
function R(e) {
|
|
5
|
+
const [{ current: t, future: m, past: i }, o] = y(C, S(e)), u = () => {
|
|
6
|
+
e.onSubmit && typeof e.onSubmit == "function" && e.onSubmit(t);
|
|
7
|
+
}, a = () => {
|
|
8
|
+
e.onSubmit && typeof e.onCopy == "function" && e.onCopy(t);
|
|
9
9
|
};
|
|
10
10
|
g(() => {
|
|
11
|
-
|
|
12
|
-
}, [
|
|
11
|
+
e.form && (t?._id !== e.form._id || t.modified !== e.form.modified) && o({ type: "replaceForm", value: e.form });
|
|
12
|
+
}, [e.form]);
|
|
13
13
|
const f = (n) => {
|
|
14
|
-
b(
|
|
15
|
-
},
|
|
16
|
-
f({ ...
|
|
14
|
+
b(t, { ...t, ...n }) && o({ type: "formChange", value: n });
|
|
15
|
+
}, c = () => o({ type: "redo" }), r = () => o({ type: "undo" }), d = () => o({ type: "reset" }), h = (n, l) => {
|
|
16
|
+
f({ ...t, [n]: l });
|
|
17
17
|
};
|
|
18
18
|
return {
|
|
19
|
-
form: s(
|
|
20
|
-
redo:
|
|
21
|
-
undo:
|
|
22
|
-
reset:
|
|
19
|
+
form: s(t),
|
|
20
|
+
redo: c,
|
|
21
|
+
undo: r,
|
|
22
|
+
reset: d,
|
|
23
23
|
hasChanged: !!i.length,
|
|
24
|
-
isValid:
|
|
24
|
+
isValid: t.title && t.name && t.path,
|
|
25
25
|
hasUndo: !!i.length,
|
|
26
26
|
hasRedo: !!m.length,
|
|
27
|
-
onSubmit:
|
|
28
|
-
onCopy:
|
|
27
|
+
onSubmit: u,
|
|
28
|
+
onCopy: a,
|
|
29
29
|
formChange: f,
|
|
30
30
|
setChange: h
|
|
31
31
|
};
|