@axdspub/axiom-ui-forms 0.2.4 → 0.2.5
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/library/axiom-ui-forms.d.ts +12 -17
- package/library/esm/_virtual/index2.js +2 -2
- package/library/esm/_virtual/index3.js +2 -2
- package/library/esm/_virtual/index6.js +2 -2
- package/library/esm/_virtual/index8.js +2 -2
- package/library/esm/_virtual/index9.js +2 -2
- package/library/esm/node_modules/ajv/dist/compile/codegen/index.js +1 -1
- package/library/esm/node_modules/ajv/dist/compile/validate/index.js +1 -1
- package/library/esm/node_modules/ajv/dist/vocabularies/applicator/index.js +1 -1
- package/library/esm/node_modules/ajv/dist/vocabularies/core/index.js +1 -1
- package/library/esm/node_modules/ajv/dist/vocabularies/format/index.js +1 -1
- package/library/esm/src/Form/Components/FieldCreator.js +10 -9
- package/library/esm/src/Form/Components/FieldCreator.js.map +1 -1
- package/library/esm/src/Form/Components/FieldLabel.js +6 -6
- package/library/esm/src/Form/Components/FieldLabel.js.map +1 -1
- package/library/esm/src/Form/Components/Inputs/Date.js +8 -12
- package/library/esm/src/Form/Components/Inputs/Date.js.map +1 -1
- package/library/esm/src/Form/Components/Inputs/GeoJSON.js +49 -48
- package/library/esm/src/Form/Components/Inputs/GeoJSON.js.map +1 -1
- package/library/esm/src/Form/Components/Inputs/Geometry.js +81 -59
- package/library/esm/src/Form/Components/Inputs/Geometry.js.map +1 -1
- package/library/esm/src/Form/Components/Inputs/Object.js +3 -3
- package/library/esm/src/Form/Components/Inputs/Object.js.map +1 -1
- package/library/esm/src/Form/Creator/FormContextProvider.js +17 -0
- package/library/esm/src/Form/Creator/FormContextProvider.js.map +1 -0
- package/library/esm/src/Form/Creator/FormCreator.js +22 -23
- package/library/esm/src/Form/Creator/FormCreator.js.map +1 -1
- package/library/esm/src/Form/Creator/FormFields.js +2 -2
- package/library/esm/src/Form/Creator/FormFields.js.map +1 -1
- package/library/esm/src/Form/Creator/FormSection.js +4 -4
- package/library/esm/src/Form/Creator/FormSection.js.map +1 -1
- package/library/esm/src/Form/Creator/FormSectionContextProvider.js +23 -0
- package/library/esm/src/Form/Creator/FormSectionContextProvider.js.map +1 -0
- package/library/esm/src/Form/Creator/Page.js +23 -34
- package/library/esm/src/Form/Creator/Page.js.map +1 -1
- package/library/esm/src/Form/Creator/Wizard.js +38 -48
- package/library/esm/src/Form/Creator/Wizard.js.map +1 -1
- package/library/esm/src/Form/helpers.js +14 -6
- package/library/esm/src/Form/helpers.js.map +1 -1
- package/library/esm/src/Form/resolveRefs.js.map +1 -1
- package/library/esm/src/Form/schemaToFormHelpers.js +45 -25
- package/library/esm/src/Form/schemaToFormHelpers.js.map +1 -1
- package/package.json +14 -7
|
@@ -5,7 +5,7 @@ import { utils as index$1 } from '../../../../node_modules/@axdspub/axiom-ui-uti
|
|
|
5
5
|
import React__default from 'react';
|
|
6
6
|
|
|
7
7
|
var ObjectInput = function (_a) {
|
|
8
|
-
var
|
|
8
|
+
var field = _a.field, onChange = _a.onChange, value = _a.value;
|
|
9
9
|
var initialValue = (typeof value === 'object' ? value !== null && value !== void 0 ? value : {} : {});
|
|
10
10
|
if (field.type === 'object' && field.fields !== undefined) {
|
|
11
11
|
var cl = "".concat(field.layout === 'horizontal' ? "flex flex-row gap-4 ".concat(field.label !== undefined ? 'px-0' : '') : 'flex flex-col gap-4');
|
|
@@ -17,7 +17,7 @@ var ObjectInput = function (_a) {
|
|
|
17
17
|
React__default.createElement("div", { className: "p-4 bg-slate-100 ".concat(cl) }, field.fields.map(function (childField) {
|
|
18
18
|
var _a;
|
|
19
19
|
var key = ((_a = field.path) !== null && _a !== void 0 ? _a : [field.id]).concat(childField.id).join('.');
|
|
20
|
-
return (React__default.createElement(FieldCreator, {
|
|
20
|
+
return (React__default.createElement(FieldCreator, { onChange: function (e) {
|
|
21
21
|
if (childField.type === 'object' && childField.skip_path === true) {
|
|
22
22
|
onChange(e);
|
|
23
23
|
}
|
|
@@ -28,7 +28,7 @@ var ObjectInput = function (_a) {
|
|
|
28
28
|
}, className: index$1.makeClassName({
|
|
29
29
|
defaultClassName: 'p-0',
|
|
30
30
|
className: fc_1
|
|
31
|
-
}), value: initialValue[childField.id], field: childField,
|
|
31
|
+
}), value: initialValue[childField.id], field: childField, key: key }));
|
|
32
32
|
}))));
|
|
33
33
|
}
|
|
34
34
|
return React__default.createElement("p", null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Object.js","sources":["../../../../../../src/Form/Components/Inputs/Object.tsx"],"sourcesContent":["import FieldCreator from '@/Form/Components/FieldCreator'\nimport FieldLabel from '@/Form/Components/FieldLabel'\nimport { type ICompositeValueType, type IFieldInputProps } from '@/Form/Creator/FormCreatorTypes'\nimport { utils } from '@axdspub/axiom-ui-utilities'\nimport React, { type ReactElement } from 'react'\n\nconst ObjectInput = ({
|
|
1
|
+
{"version":3,"file":"Object.js","sources":["../../../../../../src/Form/Components/Inputs/Object.tsx"],"sourcesContent":["import FieldCreator from '@/Form/Components/FieldCreator'\nimport FieldLabel from '@/Form/Components/FieldLabel'\nimport { type ICompositeValueType, type IFieldInputProps } from '@/Form/Creator/FormCreatorTypes'\nimport { utils } from '@axdspub/axiom-ui-utilities'\nimport React, { type ReactElement } from 'react'\n\nconst ObjectInput = ({ field, onChange, value }: IFieldInputProps): ReactElement => {\n const initialValue = (typeof value === 'object' ? value ?? {} : {}) as ICompositeValueType\n if (field.type === 'object' && field.fields !== undefined) {\n const cl = `${field.layout === 'horizontal' ? `flex flex-row gap-4 ${field.label !== undefined ? 'px-0' : ''}` : 'flex flex-col gap-4'}`\n const fc = field.layout === 'horizontal' ? 'flex-1' : ''\n return (\n <div>\n {\n field.label !== undefined\n ? <FieldLabel {...field} />\n : null\n }\n <div className={`p-4 bg-slate-100 ${cl}`}>\n {\n field.fields.map((childField) => {\n const key = (field.path ?? [field.id]).concat(childField.id).join('.')\n\n return (\n <FieldCreator\n onChange={(e) => {\n if (childField.type === 'object' && childField.skip_path === true) {\n onChange(e)\n } else {\n initialValue[childField.id] = e\n onChange({ ...initialValue })\n }\n }}\n className={utils.makeClassName({\n defaultClassName: 'p-0',\n className: fc\n })}\n value={initialValue[childField.id]}\n field={childField}\n key={key}\n />\n )\n })\n }\n </div>\n </div>\n )\n }\n return <p>Field config for {field.id} is missing 'fields'</p>\n}\n\nexport default ObjectInput\n"],"names":["React","utils"],"mappings":";;;;;;AAMM,IAAA,WAAW,GAAG,UAAC,EAA4C,EAAA;AAA1C,IAAA,IAAA,KAAK,WAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA;IAC3C,IAAM,YAAY,IAAI,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,aAAL,KAAK,KAAA,MAAA,GAAL,KAAK,GAAI,EAAE,GAAG,EAAE,CAAwB;AAC1F,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,EAAE;AACzD,QAAA,IAAM,EAAE,GAAG,EAAG,CAAA,MAAA,CAAA,KAAK,CAAC,MAAM,KAAK,YAAY,GAAG,uBAAA,CAAA,MAAA,CAAwB,KAAK,CAAC,KAAK,KAAK,SAAS,GAAG,MAAM,GAAG,EAAE,CAAE,GAAG,qBAAqB,CAAE;AACzI,QAAA,IAAM,IAAE,GAAG,KAAK,CAAC,MAAM,KAAK,YAAY,GAAG,QAAQ,GAAG,EAAE;AACxD,QAAA,QACIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;YAEE,KAAK,CAAC,KAAK,KAAK;AACd,kBAAEA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,QAAA,CAAA,EAAA,EAAK,KAAK,CAAI;AAC3B,kBAAE,IAAI;AAEV,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,oBAAqB,CAAA,MAAA,CAAA,EAAE,CAAE,EAAA,EAEvC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAC,UAAU,EAAA;;gBAC1B,IAAM,GAAG,GAAG,CAAC,CAAA,EAAA,GAAA,KAAK,CAAC,IAAI,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AAEtE,gBAAA,QACEA,cAAC,CAAA,aAAA,CAAA,YAAY,IACX,QAAQ,EAAE,UAAC,CAAC,EAAA;AACV,wBAAA,IAAI,UAAU,CAAC,IAAI,KAAK,QAAQ,IAAI,UAAU,CAAC,SAAS,KAAK,IAAI,EAAE;4BACjE,QAAQ,CAAC,CAAC,CAAC;;6BACN;AACL,4BAAA,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC;4BAC/B,QAAQ,CAAA,QAAA,CAAA,EAAA,EAAM,YAAY,CAAA,CAAG;;AAEjC,qBAAC,EACD,SAAS,EAAEC,OAAK,CAAC,aAAa,CAAC;AAC7B,wBAAA,gBAAgB,EAAE,KAAK;AACvB,wBAAA,SAAS,EAAE;AACZ,qBAAA,CAAC,EACF,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC,EAClC,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,aAAC,CAAC,CAEA,CACA;;IAGV,OAAOD,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA;;AAAqB,QAAA,KAAK,CAAC,EAAE;+BAAmC;AACzE;;;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import '../../../node_modules/tslib/tslib.es6.js';
|
|
2
|
+
import React__default, { createContext } from 'react';
|
|
3
|
+
|
|
4
|
+
var FormContext = createContext({
|
|
5
|
+
form: { id: '', label: '' },
|
|
6
|
+
formValues: {},
|
|
7
|
+
setFormValues: function (v) { }
|
|
8
|
+
});
|
|
9
|
+
var useFormContext = function () {
|
|
10
|
+
var ctx = React__default.useContext(FormContext);
|
|
11
|
+
if (!ctx)
|
|
12
|
+
throw new Error('useFormSectionContext must be used within FormSectionContextProvider');
|
|
13
|
+
return ctx;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export { FormContext, useFormContext };
|
|
17
|
+
//# sourceMappingURL=FormContextProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormContextProvider.js","sources":["../../../../../src/Form/Creator/FormContextProvider.tsx"],"sourcesContent":["import { type IFieldInputProps, type IForm, type IFormValues } from '@/Form/Creator/FormCreatorTypes'\nimport { type JSONSchema6 } from 'json-schema'\nimport React, { createContext, type ReactElement, type PropsWithChildren } from 'react'\n\nexport interface IFormContextValue {\n form: IForm\n formValues: IFormValues\n setFormValues: (v: IFormValues) => void\n inputOverrides?: Record<string, React.FC<IFieldInputProps>>\n urlNavigable?: boolean\n schema?: JSONSchema6\n}\n\nexport const FormContext = createContext<IFormContextValue>({\n form: { id: '', label: '' },\n formValues: {},\n setFormValues: (v) => {}\n})\n\nexport const FormContextProvider = ({ children, ...props }: IFormContextValue & PropsWithChildren): ReactElement => {\n return (\n <FormContext.Provider value={{ ...props }}>\n {children}\n </FormContext.Provider>\n )\n}\n\nexport const useFormContext = (): IFormContextValue => {\n const ctx = React.useContext(FormContext)\n if (!ctx) throw new Error('useFormSectionContext must be used within FormSectionContextProvider')\n return ctx\n}\n"],"names":["React"],"mappings":";;;AAaO,IAAM,WAAW,GAAG,aAAa,CAAoB;IAC1D,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;AAC3B,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,aAAa,EAAE,UAAC,CAAC,EAAA;AAClB,CAAA;AAUY,IAAA,cAAc,GAAG,YAAA;IAC5B,IAAM,GAAG,GAAGA,cAAK,CAAC,UAAU,CAAC,WAAW,CAAC;AACzC,IAAA,IAAI,CAAC,GAAG;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC;AACjG,IAAA,OAAO,GAAG;AACZ;;;;"}
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
|
|
2
|
+
import { FormContext } from './FormContextProvider.js';
|
|
2
3
|
import FormHeader from './FormHeader.js';
|
|
3
4
|
import FormSection from './FormSection.js';
|
|
4
5
|
import { copyAndAddPathToFields, calculateSectionStatus } from '../helpers.js';
|
|
5
6
|
import { utils as index$1 } from '../../../node_modules/@axdspub/axiom-ui-utilities/library/index.js';
|
|
6
|
-
import React__default
|
|
7
|
+
import React__default from 'react';
|
|
7
8
|
|
|
8
9
|
var FormStatus = function (_a) {
|
|
9
10
|
var _b, _c, _d, _e;
|
|
10
11
|
var form = _a.form, formValueState = _a.formValueState;
|
|
11
|
-
var
|
|
12
|
-
useEffect(function () {
|
|
13
|
-
setStatus(calculateSectionStatus([form], formValueState));
|
|
14
|
-
}, [formValueState, form]);
|
|
12
|
+
var status = calculateSectionStatus([form], formValueState);
|
|
15
13
|
return (React__default.createElement(React__default.Fragment, null,
|
|
16
14
|
React__default.createElement("p", { className: 'text-xs mt-4' }, (_b = status[form.id]) === null || _b === void 0 ? void 0 :
|
|
17
15
|
_b.completed,
|
|
@@ -26,25 +24,26 @@ var FormStatus = function (_a) {
|
|
|
26
24
|
};
|
|
27
25
|
var FormCreator = function (_a) {
|
|
28
26
|
var _b;
|
|
29
|
-
var form = _a.form, formValueState = _a.formValueState, note = _a.note, error = _a.error, onChange = _a.onChange, className = _a.className, _c = _a.urlNavigable, urlNavigable = _c === void 0 ? true : _c, inputOverrides = _a.inputOverrides;
|
|
30
|
-
var
|
|
31
|
-
useEffect(function () {
|
|
32
|
-
var newForm = copyAndAddPathToFields(form);
|
|
33
|
-
setActiveForm(newForm);
|
|
34
|
-
}, [form]);
|
|
35
|
-
if (activeForm === null) {
|
|
36
|
-
return React__default.createElement("p", null, "Processing");
|
|
37
|
-
}
|
|
27
|
+
var form = _a.form, formValueState = _a.formValueState, note = _a.note, error = _a.error, onChange = _a.onChange, className = _a.className, _c = _a.urlNavigable, urlNavigable = _c === void 0 ? true : _c, inputOverrides = _a.inputOverrides, schema = _a.schema;
|
|
28
|
+
var activeForm = copyAndAddPathToFields(form);
|
|
38
29
|
activeForm.settings = __assign({ url_navigable: urlNavigable }, activeForm.settings);
|
|
39
|
-
return (React__default.createElement(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
React__default.createElement(
|
|
30
|
+
return (React__default.createElement(FormContext.Provider, { value: {
|
|
31
|
+
form: activeForm,
|
|
32
|
+
formValues: formValueState[0],
|
|
33
|
+
setFormValues: formValueState[1],
|
|
34
|
+
inputOverrides: inputOverrides,
|
|
35
|
+
schema: schema,
|
|
36
|
+
urlNavigable: activeForm.settings.url_navigable
|
|
37
|
+
} },
|
|
38
|
+
React__default.createElement("div", { className: index$1.makeClassName({
|
|
39
|
+
className: (_b = activeForm === null || activeForm === void 0 ? void 0 : activeForm.settings) === null || _b === void 0 ? void 0 : _b.class_name,
|
|
40
|
+
defaultClassName: className
|
|
41
|
+
}) },
|
|
42
|
+
React__default.createElement(FormHeader, { form: activeForm, note: note, error: error }),
|
|
43
|
+
(activeForm === null || activeForm === void 0 ? void 0 : activeForm.fields) !== undefined && activeForm.fields.length > 0 && activeForm.pages === undefined && activeForm.wizard_steps === undefined
|
|
44
|
+
? React__default.createElement(FormStatus, { form: activeForm, formValueState: formValueState })
|
|
45
|
+
: '',
|
|
46
|
+
React__default.createElement(FormSection, { formSection: activeForm, onChange: onChange }))));
|
|
48
47
|
};
|
|
49
48
|
|
|
50
49
|
export { FormCreator as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormCreator.js","sources":["../../../../../src/Form/Creator/FormCreator.tsx"],"sourcesContent":["import { type IFormValues, type IForm, type IValueChangeFn, type IFieldInputProps, type IFormValueState } from '@/Form/Creator/FormCreatorTypes'\nimport FormHeader from '@/Form/Creator/FormHeader'\nimport FormSection from '@/Form/Creator/FormSection'\nimport { calculateSectionStatus, copyAndAddPathToFields } from '@/Form/helpers'\nimport { utils } from '@axdspub/axiom-ui-utilities'\nimport { type
|
|
1
|
+
{"version":3,"file":"FormCreator.js","sources":["../../../../../src/Form/Creator/FormCreator.tsx"],"sourcesContent":["import { FormContext } from '@/Form/Creator/FormContextProvider'\nimport { type IFormValues, type IForm, type IValueChangeFn, type IFieldInputProps, type IFormValueState } from '@/Form/Creator/FormCreatorTypes'\nimport FormHeader from '@/Form/Creator/FormHeader'\nimport FormSection from '@/Form/Creator/FormSection'\nimport { calculateSectionStatus, copyAndAddPathToFields } from '@/Form/helpers'\nimport { utils } from '@axdspub/axiom-ui-utilities'\nimport { type JSONSchema6 } from 'json-schema'\nimport React, { type ReactElement } from 'react'\n\nexport interface IFormCreatorProps {\n form: IForm\n schema?: JSONSchema6\n formValueState: [IFormValues, (v: IFormValues) => void]\n note?: string\n error?: string\n onChange?: IValueChangeFn\n className?: string\n urlNavigable?: boolean\n inputOverrides?: Record<string, React.FC<IFieldInputProps>>\n}\n\nconst FormStatus = ({ form, formValueState }: { form: IForm, formValueState: IFormValueState }): ReactElement => {\n const status = calculateSectionStatus([form], formValueState)\n\n return (\n <>\n <p className='text-xs mt-4'>{status[form.id]?.completed} of {status[form.id]?.total} total</p>\n <p className='text-xs mt-2'>{status[form.id]?.requiredCompleted} of {status[form.id]?.requiredTotal} required</p>\n </>\n )\n}\n\nconst FormCreator = ({\n form,\n formValueState,\n note,\n error,\n onChange,\n className,\n urlNavigable = true,\n inputOverrides,\n schema\n}: IFormCreatorProps): ReactElement => {\n const activeForm = copyAndAddPathToFields(form)\n\n activeForm.settings = {\n url_navigable: urlNavigable,\n ...activeForm.settings\n }\n\n return (\n <FormContext.Provider value={{\n form: activeForm,\n formValues: formValueState[0],\n setFormValues: formValueState[1],\n inputOverrides,\n schema,\n urlNavigable: activeForm.settings.url_navigable\n }}>\n <div className={utils.makeClassName({\n className: activeForm?.settings?.class_name,\n defaultClassName: className\n })}>\n <FormHeader form={activeForm} note={note} error={error} />\n {\n activeForm?.fields !== undefined && activeForm.fields.length > 0 && activeForm.pages === undefined && activeForm.wizard_steps === undefined\n ? <FormStatus form={activeForm} formValueState={formValueState} />\n : ''\n }\n <FormSection\n formSection={activeForm}\n onChange={onChange}\n />\n </div>\n </FormContext.Provider>\n )\n}\n\nexport type IFormSectionStatus = Record<string, {\n completed: number\n total: number\n requiredTotal: number\n requiredCompleted: number\n valid: boolean\n}>\n\nexport default FormCreator\n"],"names":["React","utils"],"mappings":"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"}
|
|
@@ -2,11 +2,11 @@ import FieldCreator from '../Components/FieldCreator.js';
|
|
|
2
2
|
import React__default from 'react';
|
|
3
3
|
|
|
4
4
|
var FormFields = function (_a) {
|
|
5
|
-
var
|
|
5
|
+
var fields = _a.fields, onChange = _a.onChange, _b = _a.className, className = _b === void 0 ? 'flex flex-col gap-2' : _b;
|
|
6
6
|
return (React__default.createElement(React__default.Fragment, null, fields === undefined || fields.length < 1
|
|
7
7
|
? ''
|
|
8
8
|
: React__default.createElement("div", { className: className }, fields === null || fields === void 0 ? void 0 : fields.map(function (field) {
|
|
9
|
-
return (React__default.createElement(FieldCreator, { onChange: onChange,
|
|
9
|
+
return (React__default.createElement(FieldCreator, { onChange: onChange, field: field, key: field.id }));
|
|
10
10
|
}))));
|
|
11
11
|
};
|
|
12
12
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFields.js","sources":["../../../../../src/Form/Creator/FormFields.tsx"],"sourcesContent":["import FieldCreator from '@/Form/Components/FieldCreator'\nimport { type
|
|
1
|
+
{"version":3,"file":"FormFields.js","sources":["../../../../../src/Form/Creator/FormFields.tsx"],"sourcesContent":["import FieldCreator from '@/Form/Components/FieldCreator'\nimport { type IFormField, type IValueChangeFn } from '@/Form/Creator/FormCreatorTypes'\nimport React, { type ReactElement } from 'react'\n\nconst FormFields = ({\n fields,\n onChange,\n className = 'flex flex-col gap-2'\n}: {\n fields?: IFormField[]\n onChange?: IValueChangeFn\n className?: string\n}): ReactElement => {\n return (\n <>\n {\n fields === undefined || fields.length < 1\n ? ''\n : <div className={className}>\n {\n fields?.map((field) => {\n return (\n <FieldCreator onChange={onChange} field={field} key={field.id} />\n )\n })\n }\n </div>\n }\n </>\n )\n}\n\nexport default FormFields\n"],"names":["React"],"mappings":";;;AAIM,IAAA,UAAU,GAAG,UAAC,EAQnB,EAAA;QAPC,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,iBAAiC,EAAjC,SAAS,GAAG,EAAA,KAAA,MAAA,GAAA,qBAAqB,GAAA,EAAA;IAMjC,QACIA,cAEE,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EAAA,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,MAAM,GAAG;AACtC,UAAE;AACF,UAAEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,EAEvB,EAAA,MAAM,KAAN,IAAA,IAAA,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,UAAC,KAAK,EAAA;AAChB,YAAA,QACEA,cAAC,CAAA,aAAA,CAAA,YAAY,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,EAAA,CAAI;AAErE,SAAC,CAAC,CAEF,CAEL;AAET;;;;"}
|
|
@@ -5,7 +5,7 @@ import React__default from 'react';
|
|
|
5
5
|
|
|
6
6
|
var FormSection = function (_a) {
|
|
7
7
|
var _b, _c, _d;
|
|
8
|
-
var formSection = _a.formSection,
|
|
8
|
+
var formSection = _a.formSection, onChange = _a.onChange, _e = _a.level, level = _e === void 0 ? 0 : _e; _a.inputOverrides;
|
|
9
9
|
if (formSection === undefined) {
|
|
10
10
|
return React__default.createElement(React__default.Fragment, null);
|
|
11
11
|
}
|
|
@@ -32,10 +32,10 @@ var FormSection = function (_a) {
|
|
|
32
32
|
});
|
|
33
33
|
}
|
|
34
34
|
return (React__default.createElement(React__default.Fragment, null, hasWizardSteps
|
|
35
|
-
? React__default.createElement(WizardLayout, {
|
|
35
|
+
? React__default.createElement(WizardLayout, { sections: wizardSteps, onChange: onChange, level: level })
|
|
36
36
|
: hasPages
|
|
37
|
-
? React__default.createElement(PageLayout, {
|
|
38
|
-
: React__default.createElement(FormFields, {
|
|
37
|
+
? React__default.createElement(PageLayout, { sections: pages, onChange: onChange, level: level })
|
|
38
|
+
: React__default.createElement(FormFields, { fields: fields, onChange: onChange })));
|
|
39
39
|
};
|
|
40
40
|
|
|
41
41
|
export { FormSection as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormSection.js","sources":["../../../../../src/Form/Creator/FormSection.tsx"],"sourcesContent":["import { type IFieldInputProps, type
|
|
1
|
+
{"version":3,"file":"FormSection.js","sources":["../../../../../src/Form/Creator/FormSection.tsx"],"sourcesContent":["import { type IFieldInputProps, type IFormSection, type IValueChangeFn } from '@/Form/Creator/FormCreatorTypes'\nimport FormFields from '@/Form/Creator/FormFields'\nimport PageLayout from '@/Form/Creator/Page'\nimport WizardLayout from '@/Form/Creator/Wizard'\nimport React, { type ReactElement } from 'react'\n\nconst FormSection = ({\n formSection,\n onChange,\n level = 0,\n inputOverrides\n}: {\n formSection?: IFormSection\n onChange?: IValueChangeFn\n level?: number\n inputOverrides?: Record<string, React.FC<IFieldInputProps>>\n\n}): ReactElement => {\n if (formSection === undefined) {\n return <></>\n }\n const pages = (formSection?.pages ?? []).slice()\n const fields = (formSection?.fields ?? []).slice()\n const wizardSteps = (formSection?.wizard_steps ?? []).slice()\n const hasPages = pages.length > 0\n const hasFields = fields.length > 0\n const hasWizardSteps = wizardSteps.length > 0\n if (hasPages && hasFields) {\n pages.unshift({\n id: 'default',\n label: 'Default',\n fields\n })\n }\n if ((hasPages || hasFields) && hasWizardSteps) {\n wizardSteps.unshift({\n id: 'default',\n order: -10,\n label: 'Default',\n pages,\n fields\n })\n }\n return (\n <>\n {\n hasWizardSteps\n ? <WizardLayout sections={wizardSteps} onChange={onChange} level={level} />\n\n : hasPages\n ? <PageLayout sections={pages} onChange={onChange} level={level} />\n : <FormFields fields={fields} onChange={onChange} />\n }\n </>\n )\n}\n\nexport default FormSection\n"],"names":["React"],"mappings":";;;;;AAMM,IAAA,WAAW,GAAG,UAAC,EAWpB,EAAA;;AAVC,IAAA,IAAA,WAAW,GAAA,EAAA,CAAA,WAAA,CAAA,CACX,QAAQ,GAAA,EAAA,CAAA,QAAA,CACR,CAAA,EAAA,GAAA,EAAA,CAAA,KAAS,CAAT,CAAA,KAAK,GAAG,EAAA,KAAA,MAAA,GAAA,CAAC,GAAA,EAAA,CAAA,CACK,EAAA,CAAA;AAQd,IAAA,IAAI,WAAW,KAAK,SAAS,EAAE;AAC7B,QAAA,OAAOA,2DAAK;;AAEd,IAAA,IAAM,KAAK,GAAG,CAAC,CAAA,EAAA,GAAA,WAAW,aAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAE,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,EAAE,EAAE,KAAK,EAAE;AAChD,IAAA,IAAM,MAAM,GAAG,CAAC,CAAA,EAAA,GAAA,WAAW,aAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAE,MAAM,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,EAAE,EAAE,KAAK,EAAE;AAClD,IAAA,IAAM,WAAW,GAAG,CAAC,CAAA,EAAA,GAAA,WAAW,aAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAE,YAAY,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,EAAE,EAAE,KAAK,EAAE;AAC7D,IAAA,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC;AACjC,IAAA,IAAM,SAAS,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC;AACnC,IAAA,IAAM,cAAc,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC;AAC7C,IAAA,IAAI,QAAQ,IAAI,SAAS,EAAE;QACzB,KAAK,CAAC,OAAO,CAAC;AACZ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,MAAM,EAAA;AACP,SAAA,CAAC;;IAEJ,IAAI,CAAC,QAAQ,IAAI,SAAS,KAAK,cAAc,EAAE;QAC7C,WAAW,CAAC,OAAO,CAAC;AAClB,YAAA,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,GAAG;AACV,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,KAAK,EAAA,KAAA;AACL,YAAA,MAAM,EAAA;AACP,SAAA,CAAC;;IAEJ,QACMA,4DAEI;AACE,UAAEA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAI;AAE3E,UAAE;AACA,cAAEA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAI;AACnE,cAAEA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAEzD;AAEX;;;;"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React__default, { createContext, useState, useMemo } from 'react';
|
|
2
|
+
|
|
3
|
+
var FormSectionContext = createContext({
|
|
4
|
+
path: '',
|
|
5
|
+
setActiveId: function () { }
|
|
6
|
+
});
|
|
7
|
+
var FormSectionContextProvider = function (props) {
|
|
8
|
+
var _a;
|
|
9
|
+
var _b = useState(props.id), activeId = _b[0], setActiveId = _b[1];
|
|
10
|
+
useMemo(function () {
|
|
11
|
+
setActiveId(props.id);
|
|
12
|
+
}, [props.id]);
|
|
13
|
+
return (React__default.createElement(FormSectionContext.Provider, { value: { activeId: activeId, setActiveId: setActiveId, path: (_a = props.path) !== null && _a !== void 0 ? _a : '' } }, props.children));
|
|
14
|
+
};
|
|
15
|
+
var useFormSectionContext = function () {
|
|
16
|
+
var ctx = React__default.useContext(FormSectionContext);
|
|
17
|
+
if (!ctx)
|
|
18
|
+
throw new Error('useFormSectionContext must be used within FormSectionContextProvider');
|
|
19
|
+
return ctx;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { FormSectionContext, FormSectionContextProvider, useFormSectionContext };
|
|
23
|
+
//# sourceMappingURL=FormSectionContextProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormSectionContextProvider.js","sources":["../../../../../src/Form/Creator/FormSectionContextProvider.tsx"],"sourcesContent":["import React, { createContext, type PropsWithChildren, type ReactElement, useMemo, useState } from 'react'\n\nexport interface IFormSectionContextValue {\n activeId?: string\n setActiveId: (v: string | undefined) => void\n path: string\n}\nexport const FormSectionContext = createContext<IFormSectionContextValue>({\n path: '',\n setActiveId: () => {}\n})\nexport const FormSectionContextProvider = (props: PropsWithChildren & { id?: string, path?: string }): ReactElement => {\n const [activeId, setActiveId] = useState<string | undefined>(props.id)\n useMemo(() => {\n setActiveId(props.id)\n }, [props.id])\n return (\n <FormSectionContext.Provider value={{ activeId, setActiveId, path: props.path ?? '' }}>\n {props.children}\n </FormSectionContext.Provider>\n )\n}\n\nexport const useFormSectionContext = (): IFormSectionContextValue => {\n const ctx = React.useContext(FormSectionContext)\n if (!ctx) throw new Error('useFormSectionContext must be used within FormSectionContextProvider')\n return ctx\n}\n"],"names":["React"],"mappings":";;AAOO,IAAM,kBAAkB,GAAG,aAAa,CAA2B;AACxE,IAAA,IAAI,EAAE,EAAE;IACR,WAAW,EAAE;AACd,CAAA;AACM,IAAM,0BAA0B,GAAG,UAAC,KAAyD,EAAA;;AAC5F,IAAA,IAAA,EAA0B,GAAA,QAAQ,CAAqB,KAAK,CAAC,EAAE,CAAC,EAA/D,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,WAAW,QAA0C;AACtE,IAAA,OAAO,CAAC,YAAA;AACN,QAAA,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;AACvB,KAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AACd,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,kBAAkB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAA,QAAA,EAAE,WAAW,EAAA,WAAA,EAAE,IAAI,EAAE,CAAA,EAAA,GAAA,KAAK,CAAC,IAAI,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,EAAE,EAAE,EAAA,EAClF,KAAK,CAAC,QAAQ,CACa;AAElC;AAEa,IAAA,qBAAqB,GAAG,YAAA;IACnC,IAAM,GAAG,GAAGA,cAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC;AAChD,IAAA,IAAI,CAAC,GAAG;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC;AACjG,IAAA,OAAO,GAAG;AACZ;;;;"}
|
|
@@ -1,23 +1,22 @@
|
|
|
1
|
+
import { FormSectionContextProvider, useFormSectionContext } from './FormSectionContextProvider.js';
|
|
1
2
|
import FormSection from './FormSection.js';
|
|
2
3
|
import NavElement from './NavElement.js';
|
|
3
4
|
import { calculateSectionStatus } from '../helpers.js';
|
|
4
5
|
import { InfoCircledIcon } from '../../../node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
|
|
5
|
-
import React__default
|
|
6
|
+
import React__default from 'react';
|
|
7
|
+
import { useFormContext } from './FormContextProvider.js';
|
|
6
8
|
import { useParams } from '../../../node_modules/react-router/dist/development/chunk-HA7DTUK3.js';
|
|
7
9
|
|
|
8
10
|
var PageNav = function (_a) {
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var activeId =
|
|
12
|
-
var params = ((_b = useParams()['*']) !== null && _b !== void 0 ? _b : '').split('/');
|
|
13
|
-
var path = params.slice(0, level).join('/');
|
|
11
|
+
var sections = _a.sections; _a.level;
|
|
12
|
+
var urlNavigable = useFormContext().urlNavigable;
|
|
13
|
+
var _b = useFormSectionContext(), activeId = _b.activeId, setActiveId = _b.setActiveId, path = _b.path;
|
|
14
14
|
return (React__default.createElement("div", { className: 'flex flex-col w-[200px] border-slate-200' }, sections === null || sections === void 0 ? void 0 : sections.map(function (p) {
|
|
15
|
-
|
|
16
|
-
return (React__default.createElement(NavElement, { key: p.id, path: path, id: p.id, navigable: (_b = (_a = form === null || form === void 0 ? void 0 : form.settings) === null || _a === void 0 ? void 0 : _a.url_navigable) !== null && _b !== void 0 ? _b : true, onClick: function () { setActiveState(p.id); }, className: "border-none rounded-none bg-slate-100 text-sm font-normal text-left ".concat(activeId === p.id ? 'bg-slate-700 text-white' : 'hover:bg-slate-200') }, p.label));
|
|
15
|
+
return (React__default.createElement(NavElement, { key: p.id, path: path, id: p.id, navigable: urlNavigable !== null && urlNavigable !== void 0 ? urlNavigable : true, onClick: function () { setActiveId(p.id); }, className: "border-none rounded-none bg-slate-100 text-sm font-normal text-left ".concat(activeId === p.id ? 'bg-slate-700 text-white' : 'hover:bg-slate-200') }, p.label));
|
|
17
16
|
})));
|
|
18
17
|
};
|
|
19
18
|
var ActivePage = function (_a) {
|
|
20
|
-
|
|
19
|
+
var formSection = _a.formSection, onChange = _a.onChange, _b = _a.className, className = _b === void 0 ? 'flex flex-col gap-2 flex-grow' : _b, level = _a.level;
|
|
21
20
|
return (React__default.createElement("div", { className: className },
|
|
22
21
|
(formSection === null || formSection === void 0 ? void 0 : formSection.description) !== undefined
|
|
23
22
|
? React__default.createElement("p", { className: 'pb-4 border-b border-slate-200 text-sm' },
|
|
@@ -25,36 +24,26 @@ var ActivePage = function (_a) {
|
|
|
25
24
|
" ",
|
|
26
25
|
formSection.description)
|
|
27
26
|
: '',
|
|
28
|
-
React__default.createElement(FormSection, { formSection: formSection,
|
|
27
|
+
React__default.createElement(FormSection, { formSection: formSection, onChange: onChange, level: level + 1 })));
|
|
29
28
|
};
|
|
30
29
|
var PageLayout = function (_a) {
|
|
31
|
-
var _b, _c, _d, _e, _f, _g
|
|
32
|
-
var
|
|
30
|
+
var _b, _c, _d, _e, _f, _g;
|
|
31
|
+
var sections = _a.sections, onChange = _a.onChange; _a.inputOverrides; var _h = _a.ContentComponent, ContentComponent = _h === void 0 ? ActivePage : _h, _j = _a.NavComponent, NavComponent = _j === void 0 ? PageNav : _j, _k = _a.className, className = _k === void 0 ? 'flex flex-row gap-8' : _k, level = _a.level;
|
|
33
32
|
if (sections === undefined) {
|
|
34
33
|
return React__default.createElement(React__default.Fragment, null);
|
|
35
34
|
}
|
|
36
|
-
var
|
|
37
|
-
var
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}, [activeIdState[0]]);
|
|
49
|
-
useEffect(function () {
|
|
50
|
-
var _a, _b, _c, _d;
|
|
51
|
-
if (((_a = form === null || form === void 0 ? void 0 : form.settings) === null || _a === void 0 ? void 0 : _a.url_navigable) === true && params[level] !== activeIdState[0]) {
|
|
52
|
-
activeIdState[1]((_d = (_b = params[level]) !== null && _b !== void 0 ? _b : (_c = sections[0]) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : null);
|
|
53
|
-
}
|
|
54
|
-
}, [useParams()['*']]);
|
|
55
|
-
return (React__default.createElement("div", { className: className },
|
|
56
|
-
React__default.createElement(NavComponent, { form: form, sections: sections, sectionStatus: sectionStatus, activeIdState: activeIdState, level: level }),
|
|
57
|
-
React__default.createElement(ContentComponent, { activeIdState: activeIdState, formSection: formSection, inputOverrides: inputOverrides, form: form, formValueState: formValueState, onChange: onChange, sectionStatus: sectionStatus, level: level })));
|
|
35
|
+
var _l = useFormContext(), urlNavigable = _l.urlNavigable, setFormValues = _l.setFormValues, formValues = _l.formValues;
|
|
36
|
+
var params = ((_b = useParams()['*']) !== null && _b !== void 0 ? _b : '').split('/');
|
|
37
|
+
var path = params.slice(0, level).join('/');
|
|
38
|
+
var id = urlNavigable
|
|
39
|
+
? (params[level] && params[level] !== '') ? params[level] : ((_d = (_c = sections[0]) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : null)
|
|
40
|
+
: (_f = (_e = sections[0]) === null || _e === void 0 ? void 0 : _e.id) !== null && _f !== void 0 ? _f : null;
|
|
41
|
+
var sectionStatus = calculateSectionStatus(sections, [formValues, setFormValues]);
|
|
42
|
+
var formSection = (_g = sections === null || sections === void 0 ? void 0 : sections.find(function (s) { return s.id === id; })) !== null && _g !== void 0 ? _g : sections === null || sections === void 0 ? void 0 : sections[0];
|
|
43
|
+
return (React__default.createElement(FormSectionContextProvider, { path: path, id: id },
|
|
44
|
+
React__default.createElement("div", { className: className },
|
|
45
|
+
React__default.createElement(NavComponent, { sections: sections, sectionStatus: sectionStatus, level: level }),
|
|
46
|
+
React__default.createElement(ContentComponent, { formSection: formSection, onChange: onChange, sectionStatus: sectionStatus, level: level }))));
|
|
58
47
|
};
|
|
59
48
|
|
|
60
49
|
export { ActivePage, PageLayout as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Page.js","sources":["../../../../../src/Form/Creator/Page.tsx"],"sourcesContent":["import { type IFormSectionStatus } from '@/Form/Creator/FormCreator'\nimport { type IFormValueState, type IForm, type IFormSection, type IValueChangeFn, type IFieldInputProps } from '@/Form/Creator/FormCreatorTypes'\nimport FormSection from '@/Form/Creator/FormSection'\nimport NavElement from '@/Form/Creator/NavElement'\nimport { calculateSectionStatus } from '@/Form/helpers'\nimport { InfoCircledIcon } from '@radix-ui/react-icons'\nimport React, { useEffect, useState, type ReactElement } from 'react'\nimport { useParams } from 'react-router-dom'\n\nconst PageNav = ({\n form,\n sections,\n activeIdState,\n level\n}: {\n form: IForm\n sections?: IFormSection[]\n activeIdState: [string | null, (v: string | null) => void]\n level: number\n}): ReactElement => {\n const [activeId, setActiveState] = activeIdState\n const params = (useParams()['*'] ?? '').split('/')\n const path = params.slice(0, level).join('/')\n return (\n <div className='flex flex-col w-[200px] border-slate-200'>{\n sections?.map(p => {\n return (\n <NavElement\n key={p.id}\n path={path}\n id={p.id}\n navigable={form?.settings?.url_navigable ?? true}\n onClick={() => { setActiveState(p.id) }}\n className={ `border-none rounded-none bg-slate-100 text-sm font-normal text-left ${activeId === p.id ? 'bg-slate-700 text-white' : 'hover:bg-slate-200'}`}\n >{p.label}</NavElement>\n )\n })\n }</div>\n )\n}\n\nexport interface IPageLayoutProps {\n form: IForm\n sections?: IFormSection[]\n formValueState: IFormValueState\n onChange?: IValueChangeFn\n level: number\n ContentComponent?: React.FC<{\n activeIdState: [string | null, (v: string | null) => void]\n form: IForm\n level: number\n inputOverrides?: Record<string, React.FC<IFieldInputProps>>\n formSection?: IFormSection\n formValueState: IFormValueState\n onChange?: IValueChangeFn\n sectionStatus: IFormSectionStatus\n }>\n NavComponent?: React.FC<{\n form: IForm\n sections?: IFormSection[]\n activeIdState: [string | null, (v: string | null) => void]\n sectionStatus: IFormSectionStatus\n level: number\n }>\n className?: string\n inputOverrides?: Record<string, React.FC<IFieldInputProps>>\n}\n\nexport const ActivePage = ({\n activeIdState,\n form,\n formValueState,\n formSection,\n inputOverrides,\n onChange,\n className = 'flex flex-col gap-2 flex-grow',\n level\n}: {\n activeIdState: [string | null, (v: string | null) => void]\n form: IForm\n inputOverrides?: Record<string, React.FC<IFieldInputProps>>\n formSection?: IFormSection\n formValueState: IFormValueState\n onChange?: IValueChangeFn\n className?: string\n level: number\n}): ReactElement => {\n return (\n <div className={className}>\n {\n formSection?.description !== undefined\n ? <p className='pb-4 border-b border-slate-200 text-sm'><InfoCircledIcon className='inline-block' /> {formSection.description}</p>\n : ''\n }\n <FormSection formSection={formSection} formValueState={formValueState} inputOverrides={inputOverrides} form={form} onChange={onChange} level={level + 1} />\n </div>\n )\n}\n\nconst PageLayout = ({\n form,\n sections,\n formValueState,\n onChange,\n inputOverrides,\n ContentComponent = ActivePage,\n NavComponent = PageNav,\n className = 'flex flex-row gap-8',\n level\n}: IPageLayoutProps): ReactElement => {\n if (sections === undefined) {\n return <></>\n }\n\n const params = useParams()['*']?.split('/') ?? []\n const activeIdState = useState<string | null>(form?.settings?.url_navigable\n ? params[level] ?? sections[0]?.id ?? null\n : sections[0]?.id ?? null\n )\n\n const [sectionStatus, setSectionStatus] = useState<IFormSectionStatus>(calculateSectionStatus(sections, formValueState))\n useEffect(() => {\n setSectionStatus(calculateSectionStatus(sections, formValueState))\n }, [formValueState, sections])\n\n const [formSection, setFormSection] = useState<IFormSection | undefined>(sections?.find(s => s.id === activeIdState[0]) ?? sections?.[0])\n useEffect(() => {\n setFormSection(sections?.find(s => s.id === activeIdState[0]) ?? sections?.[0])\n }, [activeIdState[0]])\n\n useEffect(() => {\n if (form?.settings?.url_navigable === true && params[level] !== activeIdState[0]) {\n activeIdState[1](params[level] ?? sections[0]?.id ?? null)\n }\n }, [useParams()['*']])\n return (\n <div className={className}>\n <NavComponent\n form={form}\n sections={sections}\n sectionStatus={sectionStatus}\n activeIdState={activeIdState}\n level={level}\n />\n <ContentComponent\n activeIdState={activeIdState}\n formSection={formSection}\n inputOverrides={inputOverrides}\n form={form}\n formValueState={formValueState}\n onChange={onChange}\n sectionStatus={sectionStatus}\n level={level}\n />\n </div>\n )\n}\n\nexport default PageLayout\n"],"names":["React"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Page.js","sources":["../../../../../src/Form/Creator/Page.tsx"],"sourcesContent":["import { FormSectionContextProvider, useFormSectionContext } from '@/Form/Creator/FormSectionContextProvider'\nimport { type IFormSectionStatus } from '@/Form/Creator/FormCreator'\nimport { type IFormSection, type IValueChangeFn, type IFieldInputProps } from '@/Form/Creator/FormCreatorTypes'\nimport FormSection from '@/Form/Creator/FormSection'\nimport NavElement from '@/Form/Creator/NavElement'\nimport { calculateSectionStatus } from '@/Form/helpers'\nimport { InfoCircledIcon } from '@radix-ui/react-icons'\nimport React, { type ReactElement } from 'react'\nimport { useParams } from 'react-router-dom'\nimport { useFormContext } from '@/Form/Creator/FormContextProvider'\n\nconst PageNav = ({\n sections,\n level\n}: {\n sections?: IFormSection[]\n level: number\n}): ReactElement => {\n const { urlNavigable } = useFormContext()\n const { activeId, setActiveId, path } = useFormSectionContext()\n return (\n <div className='flex flex-col w-[200px] border-slate-200'>{\n sections?.map(p => {\n return (\n <NavElement\n key={p.id}\n path={path}\n id={p.id}\n navigable={urlNavigable ?? true}\n onClick={() => { setActiveId(p.id) }}\n className={ `border-none rounded-none bg-slate-100 text-sm font-normal text-left ${activeId === p.id ? 'bg-slate-700 text-white' : 'hover:bg-slate-200'}`}\n >{p.label}</NavElement>\n )\n })\n }</div>\n )\n}\n\nexport interface IPageLayoutProps {\n sections?: IFormSection[]\n onChange?: IValueChangeFn\n level: number\n ContentComponent?: React.FC<{\n level: number\n formSection?: IFormSection\n onChange?: IValueChangeFn\n sectionStatus: IFormSectionStatus\n }>\n NavComponent?: React.FC<{\n sections?: IFormSection[]\n sectionStatus: IFormSectionStatus\n level: number\n }>\n className?: string\n inputOverrides?: Record<string, React.FC<IFieldInputProps>>\n}\n\nexport const ActivePage = ({\n formSection,\n onChange,\n className = 'flex flex-col gap-2 flex-grow',\n level\n}: {\n formSection?: IFormSection\n onChange?: IValueChangeFn\n className?: string\n level: number\n}): ReactElement => {\n return (\n <div className={className}>\n {\n formSection?.description !== undefined\n ? <p className='pb-4 border-b border-slate-200 text-sm'><InfoCircledIcon className='inline-block' /> {formSection.description}</p>\n : ''\n }\n <FormSection formSection={formSection} onChange={onChange} level={level + 1} />\n </div>\n )\n}\n\nconst PageLayout = ({\n\n sections,\n onChange,\n inputOverrides,\n ContentComponent = ActivePage,\n NavComponent = PageNav,\n className = 'flex flex-row gap-8',\n level\n}: IPageLayoutProps): ReactElement => {\n if (sections === undefined) {\n return <></>\n }\n\n const { urlNavigable, setFormValues, formValues } = useFormContext()\n const params = (useParams()['*'] ?? '').split('/')\n const path = params.slice(0, level).join('/')\n const id = urlNavigable\n ? (params[level] && params[level] !== '') ? params[level] : (sections[0]?.id ?? null)\n : sections[0]?.id ?? null\n const sectionStatus = calculateSectionStatus(sections, [formValues, setFormValues])\n const formSection = sections?.find(s => s.id === id) ?? sections?.[0]\n\n return (\n <FormSectionContextProvider path={path} id={id}>\n <div className={className}>\n <NavComponent\n sections={sections}\n sectionStatus={sectionStatus}\n level={level}\n />\n <ContentComponent\n formSection={formSection}\n onChange={onChange}\n sectionStatus={sectionStatus}\n level={level}\n />\n </div>\n </FormSectionContextProvider>\n )\n}\n\nexport default PageLayout\n"],"names":["React"],"mappings":"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"}
|
|
@@ -2,61 +2,62 @@ import { calculateSectionStatus } from '../helpers.js';
|
|
|
2
2
|
import { ActivePage } from './Page.js';
|
|
3
3
|
import { utils as index$1 } from '../../../node_modules/@axdspub/axiom-ui-utilities/library/index.js';
|
|
4
4
|
import { CaretRightIcon, CaretLeftIcon } from '../../../node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
|
|
5
|
-
import React__default
|
|
5
|
+
import React__default from 'react';
|
|
6
6
|
import NavElement from './NavElement.js';
|
|
7
|
+
import { FormSectionContextProvider, useFormSectionContext } from './FormSectionContextProvider.js';
|
|
8
|
+
import { useFormContext } from './FormContextProvider.js';
|
|
7
9
|
import { useParams } from '../../../node_modules/react-router/dist/development/chunk-HA7DTUK3.js';
|
|
8
10
|
|
|
9
11
|
var WizardNav = function (_a) {
|
|
10
|
-
var
|
|
11
|
-
var form = _a.form, activeIdState = _a.activeIdState, sections = _a.sections, sectionStatus = _a.sectionStatus, level = _a.level;
|
|
12
|
+
var sections = _a.sections, sectionStatus = _a.sectionStatus; _a.level;
|
|
12
13
|
var steps = (sections !== null && sections !== void 0 ? sections : []).sort(function (a, b) { return a.order - b.order; });
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var activeId = activeIdState[0], setActiveId = activeIdState[1];
|
|
14
|
+
var _b = useFormSectionContext(), activeId = _b.activeId, setActiveId = _b.setActiveId, path = _b.path;
|
|
15
|
+
var urlNavigable = useFormContext().urlNavigable;
|
|
16
16
|
return (React__default.createElement("div", { className: 'relative' },
|
|
17
17
|
React__default.createElement("div", { className: 'h-[2px] top-5 bg-slate-300 absolute left-0 right-0 z-0' }),
|
|
18
18
|
React__default.createElement("div", { className: 'flex flex-row gap-1' }, steps.map(function (p, i) {
|
|
19
|
-
var _a, _b, _c, _d
|
|
19
|
+
var _a, _b, _c, _d;
|
|
20
20
|
return (React__default.createElement("div", { key: p.id, className: 'flex-grow first:flex-shrink last:flex-shrink text-center first:text-left first:ml-4 last:text-right last:mr-4 z-10 relative' },
|
|
21
|
-
React__default.createElement(NavElement, { path: path, id: p.id, navigable:
|
|
21
|
+
React__default.createElement(NavElement, { path: path, id: p.id, navigable: urlNavigable !== null && urlNavigable !== void 0 ? urlNavigable : true, className: "px-8 bg-white z-20 border-none text-sm ".concat(activeId === p.id ? 'bg-slate-600 text-white' : 'hover:bg-slate-100'), onClick: function () { setActiveId(p.id); } }, p.label),
|
|
22
22
|
i < steps.length - 1 && steps.length > 1
|
|
23
23
|
? React__default.createElement("span", { className: 'hidden absolute right-0 top-2 w-4 h-full bg-white' },
|
|
24
24
|
React__default.createElement(CaretRightIcon, { className: 'w-4 h-6 fill-slate-300 stroke-slate-300' }))
|
|
25
25
|
: '',
|
|
26
|
-
React__default.createElement("p", { className: 'text-xs mt-4' }, (
|
|
27
|
-
|
|
28
|
-
" of ", (
|
|
29
|
-
|
|
26
|
+
React__default.createElement("p", { className: 'text-xs mt-4' }, (_a = sectionStatus[p.id]) === null || _a === void 0 ? void 0 :
|
|
27
|
+
_a.completed,
|
|
28
|
+
" of ", (_b = sectionStatus[p.id]) === null || _b === void 0 ? void 0 :
|
|
29
|
+
_b.total,
|
|
30
30
|
" total"),
|
|
31
|
-
React__default.createElement("p", { className: 'text-xs mt-2' }, (
|
|
32
|
-
|
|
33
|
-
" of ", (
|
|
34
|
-
|
|
31
|
+
React__default.createElement("p", { className: 'text-xs mt-2' }, (_c = sectionStatus[p.id]) === null || _c === void 0 ? void 0 :
|
|
32
|
+
_c.requiredCompleted,
|
|
33
|
+
" of ", (_d = sectionStatus[p.id]) === null || _d === void 0 ? void 0 :
|
|
34
|
+
_d.requiredTotal,
|
|
35
35
|
" required")));
|
|
36
36
|
}))));
|
|
37
37
|
};
|
|
38
38
|
var WizardNavSmall = function (_a) {
|
|
39
|
-
var _b
|
|
40
|
-
var
|
|
41
|
-
var activeId =
|
|
39
|
+
var _b;
|
|
40
|
+
var sections = _a.sections; _a.sectionStatus; _a.level;
|
|
41
|
+
var _c = useFormSectionContext(), activeId = _c.activeId, setActiveId = _c.setActiveId, path = _c.path;
|
|
42
|
+
var urlNavigable = useFormContext().urlNavigable;
|
|
42
43
|
var steps = (sections !== null && sections !== void 0 ? sections : []).sort(function (a, b) { return a.order - b.order; });
|
|
43
44
|
var stepsMap = Object.fromEntries(steps.map(function (p) { return [p.id, p]; }));
|
|
44
45
|
var currentStep = (_b = stepsMap[activeId !== null && activeId !== void 0 ? activeId : '']) !== null && _b !== void 0 ? _b : steps[0];
|
|
45
46
|
var currentIndex = steps.indexOf(currentStep);
|
|
46
47
|
var nextIndex = currentIndex + 1;
|
|
47
48
|
var prevIndex = currentIndex - 1;
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
// const params = (useParams()['*'] ?? '').split('/')
|
|
50
|
+
// const path = params.slice(0, level).join('/')
|
|
50
51
|
return (React__default.createElement("div", { className: 'flex flex-row gap-4 justify-end' },
|
|
51
52
|
prevIndex >= 0
|
|
52
|
-
? React__default.createElement(NavElement, { className: 'px-4 bg-slate-600 text-white border-none text-sm hover:bg-slate-700', path: path, id: steps[prevIndex].id, navigable:
|
|
53
|
+
? React__default.createElement(NavElement, { className: 'px-4 bg-slate-600 text-white border-none text-sm hover:bg-slate-700', path: path, id: steps[prevIndex].id, navigable: urlNavigable !== null && urlNavigable !== void 0 ? urlNavigable : true, onClick: function () { setActiveId(steps[prevIndex].id); } },
|
|
53
54
|
React__default.createElement(CaretLeftIcon, { className: 'inline' }),
|
|
54
55
|
" Previous")
|
|
55
56
|
: React__default.createElement("span", { className: index$1.createButtonClass({
|
|
56
57
|
className: 'px-4 bg-white border-none text-sm text-slate-400'
|
|
57
58
|
}) }, "Previous"),
|
|
58
59
|
nextIndex < steps.length
|
|
59
|
-
? React__default.createElement(NavElement, { path: path, id: steps[nextIndex].id, navigable:
|
|
60
|
+
? React__default.createElement(NavElement, { path: path, id: steps[nextIndex].id, navigable: urlNavigable !== null && urlNavigable !== void 0 ? urlNavigable : true, className: 'px-4 bg-slate-600 text-white border-none text-sm hover:bg-slate-700', onClick: function () { setActiveId(steps[nextIndex].id); } },
|
|
60
61
|
"Next ",
|
|
61
62
|
React__default.createElement(CaretRightIcon, { className: 'inline' }))
|
|
62
63
|
: React__default.createElement("span", { className: index$1.createButtonClass({
|
|
@@ -64,34 +65,23 @@ var WizardNavSmall = function (_a) {
|
|
|
64
65
|
}) }, "Next")));
|
|
65
66
|
};
|
|
66
67
|
var WizardLayout = function (_a) {
|
|
67
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
68
|
-
var
|
|
68
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
69
|
+
var sections = _a.sections, onChange = _a.onChange, _m = _a.ContentComponent, ContentComponent = _m === void 0 ? ActivePage : _m, _o = _a.NavComponent, NavComponent = _o === void 0 ? WizardNav : _o, _p = _a.SmallNavComponent, SmallNavComponent = _p === void 0 ? WizardNavSmall : _p, _q = _a.className, className = _q === void 0 ? 'flex flex-col gap-16 pt-8' : _q, level = _a.level;
|
|
69
70
|
if (sections === undefined) {
|
|
70
71
|
return React__default.createElement(React__default.Fragment, null);
|
|
71
72
|
}
|
|
72
|
-
var
|
|
73
|
-
var
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
}, [activeIdState[0]]);
|
|
85
|
-
useEffect(function () {
|
|
86
|
-
var _a, _b, _c, _d;
|
|
87
|
-
if (((_a = form === null || form === void 0 ? void 0 : form.settings) === null || _a === void 0 ? void 0 : _a.url_navigable) === true && params[level] !== activeIdState[0]) {
|
|
88
|
-
activeIdState[1]((_d = (_b = params[level]) !== null && _b !== void 0 ? _b : (_c = sections[0]) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : null);
|
|
89
|
-
}
|
|
90
|
-
}, [useParams()['*']]);
|
|
91
|
-
return (React__default.createElement("div", { className: className },
|
|
92
|
-
React__default.createElement(NavComponent, { form: form, sections: sections, activeIdState: activeIdState, sectionStatus: sectionStatus, level: level }),
|
|
93
|
-
React__default.createElement(ContentComponent, { activeIdState: activeIdState, formSection: formSection, inputOverrides: inputOverrides, form: form, formValueState: formValueState, sectionStatus: sectionStatus, onChange: onChange, level: level }),
|
|
94
|
-
React__default.createElement(SmallNavComponent, { form: form, sections: sections, activeIdState: activeIdState, sectionStatus: sectionStatus, level: level })));
|
|
73
|
+
var _r = useFormContext(), form = _r.form, formValues = _r.formValues, setFormValues = _r.setFormValues;
|
|
74
|
+
var params = (_d = (_c = (_b = useParams()['*']) === null || _b === void 0 ? void 0 : _b.split('/')) === null || _c === void 0 ? void 0 : _c.filter(function (d) { return d !== ''; })) !== null && _d !== void 0 ? _d : [];
|
|
75
|
+
var id = ((_e = form === null || form === void 0 ? void 0 : form.settings) === null || _e === void 0 ? void 0 : _e.url_navigable)
|
|
76
|
+
? (_h = (_f = params[level]) !== null && _f !== void 0 ? _f : (_g = sections[0]) === null || _g === void 0 ? void 0 : _g.id) !== null && _h !== void 0 ? _h : null
|
|
77
|
+
: (_k = (_j = sections[0]) === null || _j === void 0 ? void 0 : _j.id) !== null && _k !== void 0 ? _k : null;
|
|
78
|
+
var formSection = (_l = sections === null || sections === void 0 ? void 0 : sections.find(function (s) { return s.id === id; })) !== null && _l !== void 0 ? _l : sections === null || sections === void 0 ? void 0 : sections[0];
|
|
79
|
+
var sectionStatus = calculateSectionStatus(sections, [formValues, setFormValues]);
|
|
80
|
+
return (React__default.createElement(FormSectionContextProvider, { path: params.slice(0, level).join('/'), id: id },
|
|
81
|
+
React__default.createElement("div", { className: className },
|
|
82
|
+
React__default.createElement(NavComponent, { sections: sections, sectionStatus: sectionStatus, level: level }),
|
|
83
|
+
React__default.createElement(ContentComponent, { formSection: formSection, sectionStatus: sectionStatus, onChange: onChange, level: level }),
|
|
84
|
+
React__default.createElement(SmallNavComponent, { sections: sections, sectionStatus: sectionStatus, level: level }))));
|
|
95
85
|
};
|
|
96
86
|
|
|
97
87
|
export { WizardNav, WizardNavSmall, WizardLayout as default };
|