@axdspub/axiom-ui-forms 0.2.6 → 0.2.7
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/esm/_virtual/index10.js +2 -2
- package/library/esm/_virtual/index11.js +2 -2
- package/library/esm/_virtual/index2.js +2 -2
- package/library/esm/_virtual/index3.js +2 -2
- package/library/esm/_virtual/index4.js +2 -2
- package/library/esm/_virtual/index4.js.map +1 -1
- package/library/esm/_virtual/index5.js +2 -2
- package/library/esm/_virtual/index5.js.map +1 -1
- package/library/esm/_virtual/index6.js +2 -2
- package/library/esm/_virtual/index7.js +2 -2
- package/library/esm/node_modules/ajv/dist/compile/codegen/index.js +1 -1
- package/library/esm/node_modules/ajv/dist/compile/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/core/index.js +1 -1
- package/library/esm/node_modules/ajv/dist/vocabularies/validation/index.js +1 -1
- package/library/esm/node_modules/fast-uri/index.js +1 -1
- package/library/esm/node_modules/json-schema-traverse/index.js +1 -1
- package/library/esm/node_modules/react-router/dist/development/chunk-HA7DTUK3.js +1 -1
- package/library/esm/src/Form/Creator/Page.js +24 -14
- package/library/esm/src/Form/Creator/Page.js.map +1 -1
- package/library/esm/src/Form/Creator/Wizard.js +25 -14
- package/library/esm/src/Form/Creator/Wizard.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as compile } from '../../../../_virtual/
|
|
1
|
+
import { __exports as compile } from '../../../../_virtual/index5.js';
|
|
2
2
|
import { __require as requireCodegen } from './codegen/index.js';
|
|
3
3
|
import { __require as requireValidation_error } from '../runtime/validation_error.js';
|
|
4
4
|
import { __require as requireNames } from './names.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as validate } from '../../../../../_virtual/
|
|
1
|
+
import { __exports as validate } from '../../../../../_virtual/index3.js';
|
|
2
2
|
import { __require as requireBoolSchema } from './boolSchema.js';
|
|
3
3
|
import { __require as requireDataType } from './dataType.js';
|
|
4
4
|
import { __require as requireApplicability } from './applicability.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as validation } from '../../../../../_virtual/
|
|
1
|
+
import { __exports as validation } from '../../../../../_virtual/index6.js';
|
|
2
2
|
import { __require as requireLimitNumber } from './limitNumber.js';
|
|
3
3
|
import { __require as requireMultipleOf } from './multipleOf.js';
|
|
4
4
|
import { __require as requireLimitLength } from './limitLength.js';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
|
|
1
2
|
import { FormSectionContextProvider, useFormSectionContext } from './FormSectionContextProvider.js';
|
|
2
3
|
import FormSection from './FormSection.js';
|
|
3
4
|
import NavElement from './NavElement.js';
|
|
@@ -26,24 +27,33 @@ var ActivePage = function (_a) {
|
|
|
26
27
|
: '',
|
|
27
28
|
React__default.createElement(FormSection, { formSection: formSection, onChange: onChange, level: level + 1 })));
|
|
28
29
|
};
|
|
29
|
-
var PageLayout = function (
|
|
30
|
-
var _b, _c, _d, _e
|
|
31
|
-
|
|
32
|
-
if (sections === undefined) {
|
|
30
|
+
var PageLayout = function (props) {
|
|
31
|
+
var _a, _b, _c, _d, _e;
|
|
32
|
+
if (props.sections === undefined) {
|
|
33
33
|
return React__default.createElement(React__default.Fragment, null);
|
|
34
34
|
}
|
|
35
|
-
var
|
|
36
|
-
var params = ((
|
|
37
|
-
var path = params.slice(0, level).join('/');
|
|
35
|
+
var urlNavigable = useFormContext().urlNavigable;
|
|
36
|
+
var params = ((_a = useParams()['*']) !== null && _a !== void 0 ? _a : '').split('/');
|
|
37
|
+
var path = params.slice(0, props.level).join('/');
|
|
38
38
|
var id = urlNavigable
|
|
39
|
-
? (params[level] && params[level] !== '') ? params[level] : ((
|
|
40
|
-
: (
|
|
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];
|
|
39
|
+
? (params[props.level] && params[props.level] !== '') ? params[props.level] : ((_c = (_b = props.sections[0]) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : null)
|
|
40
|
+
: (_e = (_d = props.sections[0]) === null || _d === void 0 ? void 0 : _d.id) !== null && _e !== void 0 ? _e : null;
|
|
43
41
|
return (React__default.createElement(FormSectionContextProvider, { path: path, id: id },
|
|
44
|
-
React__default.createElement(
|
|
45
|
-
|
|
46
|
-
|
|
42
|
+
React__default.createElement(PageLayoutContent, __assign({}, props))));
|
|
43
|
+
};
|
|
44
|
+
var PageLayoutContent = function (_a) {
|
|
45
|
+
var _b;
|
|
46
|
+
var sections = _a.sections, onChange = _a.onChange; _a.inputOverrides; var _c = _a.ContentComponent, ContentComponent = _c === void 0 ? ActivePage : _c, _d = _a.NavComponent, NavComponent = _d === void 0 ? PageNav : _d, _e = _a.className, className = _e === void 0 ? 'flex flex-row gap-8' : _e, level = _a.level;
|
|
47
|
+
if (sections === undefined) {
|
|
48
|
+
return React__default.createElement(React__default.Fragment, null);
|
|
49
|
+
}
|
|
50
|
+
var _f = useFormContext(), setFormValues = _f.setFormValues, formValues = _f.formValues;
|
|
51
|
+
var sectionStatus = calculateSectionStatus(sections, [formValues, setFormValues]);
|
|
52
|
+
var activeId = useFormSectionContext().activeId;
|
|
53
|
+
var formSection = (_b = sections === null || sections === void 0 ? void 0 : sections.find(function (s) { return s.id === activeId; })) !== null && _b !== void 0 ? _b : sections === null || sections === void 0 ? void 0 : sections[0];
|
|
54
|
+
return (React__default.createElement("div", { className: className },
|
|
55
|
+
React__default.createElement(NavComponent, { sections: sections, sectionStatus: sectionStatus, level: level }),
|
|
56
|
+
React__default.createElement(ContentComponent, { formSection: formSection, onChange: onChange, sectionStatus: sectionStatus, level: level })));
|
|
47
57
|
};
|
|
48
58
|
|
|
49
59
|
export { ActivePage, PageLayout as default };
|
|
@@ -1 +1 @@
|
|
|
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 = (
|
|
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 = (props: IPageLayoutProps): ReactElement => {\n if (props.sections === undefined) {\n return <></>\n }\n const { urlNavigable } = useFormContext()\n const params = (useParams()['*'] ?? '').split('/')\n const path = params.slice(0, props.level).join('/')\n const id = urlNavigable\n ? (params[props.level] && params[props.level] !== '') ? params[props.level] : (props.sections[0]?.id ?? null)\n : props.sections[0]?.id ?? null\n\n return (\n <FormSectionContextProvider path={path} id={id}>\n <PageLayoutContent {...props} />\n </FormSectionContextProvider>\n )\n}\n\nconst PageLayoutContent = ({\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 { setFormValues, formValues } = useFormContext()\n const sectionStatus = calculateSectionStatus(sections, [formValues, setFormValues])\n const { activeId } = useFormSectionContext()\n const formSection = sections?.find(s => s.id === activeId) ?? sections?.[0]\n\n return (\n\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 )\n}\n\nexport default PageLayout\n"],"names":["React"],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
|
|
1
2
|
import { calculateSectionStatus } from '../helpers.js';
|
|
2
3
|
import { ActivePage } from './Page.js';
|
|
3
4
|
import { utils as index$1 } from '../../../node_modules/@axdspub/axiom-ui-utilities/library/index.js';
|
|
@@ -64,24 +65,34 @@ var WizardNavSmall = function (_a) {
|
|
|
64
65
|
className: 'px-4 bg-white border-none text-sm text-slate-400'
|
|
65
66
|
}) }, "Next")));
|
|
66
67
|
};
|
|
67
|
-
var WizardLayout = function (
|
|
68
|
-
var _b, _c, _d, _e
|
|
69
|
-
|
|
68
|
+
var WizardLayout = function (props) {
|
|
69
|
+
var _a, _b, _c, _d, _e;
|
|
70
|
+
if (props.sections === undefined) {
|
|
71
|
+
return React__default.createElement(React__default.Fragment, null);
|
|
72
|
+
}
|
|
73
|
+
var urlNavigable = useFormContext().urlNavigable;
|
|
74
|
+
var params = ((_a = useParams()['*']) !== null && _a !== void 0 ? _a : '').split('/');
|
|
75
|
+
var path = params.slice(0, props.level).join('/');
|
|
76
|
+
var id = urlNavigable
|
|
77
|
+
? (params[props.level] && params[props.level] !== '') ? params[props.level] : ((_c = (_b = props.sections[0]) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : null)
|
|
78
|
+
: (_e = (_d = props.sections[0]) === null || _d === void 0 ? void 0 : _d.id) !== null && _e !== void 0 ? _e : null;
|
|
79
|
+
return (React__default.createElement(FormSectionContextProvider, { path: path, id: id },
|
|
80
|
+
React__default.createElement(WizardLayoutContent, __assign({}, props))));
|
|
81
|
+
};
|
|
82
|
+
var WizardLayoutContent = function (_a) {
|
|
83
|
+
var _b;
|
|
84
|
+
var sections = _a.sections, onChange = _a.onChange, _c = _a.ContentComponent, ContentComponent = _c === void 0 ? ActivePage : _c, _d = _a.NavComponent, NavComponent = _d === void 0 ? WizardNav : _d, _e = _a.SmallNavComponent, SmallNavComponent = _e === void 0 ? WizardNavSmall : _e, _f = _a.className, className = _f === void 0 ? 'flex flex-col gap-16 pt-8' : _f, level = _a.level;
|
|
70
85
|
if (sections === undefined) {
|
|
71
86
|
return React__default.createElement(React__default.Fragment, null);
|
|
72
87
|
}
|
|
73
|
-
var
|
|
74
|
-
var
|
|
75
|
-
var
|
|
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];
|
|
88
|
+
var _g = useFormContext(), formValues = _g.formValues, setFormValues = _g.setFormValues;
|
|
89
|
+
var activeId = useFormSectionContext().activeId;
|
|
90
|
+
var formSection = (_b = sections === null || sections === void 0 ? void 0 : sections.find(function (s) { return s.id === activeId; })) !== null && _b !== void 0 ? _b : sections === null || sections === void 0 ? void 0 : sections[0];
|
|
79
91
|
var sectionStatus = calculateSectionStatus(sections, [formValues, setFormValues]);
|
|
80
|
-
return (React__default.createElement(
|
|
81
|
-
React__default.createElement(
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
React__default.createElement(SmallNavComponent, { sections: sections, sectionStatus: sectionStatus, level: level }))));
|
|
92
|
+
return (React__default.createElement("div", { className: className },
|
|
93
|
+
React__default.createElement(NavComponent, { sections: sections, sectionStatus: sectionStatus, level: level }),
|
|
94
|
+
React__default.createElement(ContentComponent, { formSection: formSection, sectionStatus: sectionStatus, onChange: onChange, level: level }),
|
|
95
|
+
React__default.createElement(SmallNavComponent, { sections: sections, sectionStatus: sectionStatus, level: level })));
|
|
85
96
|
};
|
|
86
97
|
|
|
87
98
|
export { WizardNav, WizardNavSmall, WizardLayout as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Wizard.js","sources":["../../../../../src/Form/Creator/Wizard.tsx"],"sourcesContent":["import { calculateSectionStatus } from '@/Form/helpers'\nimport { type IFormSectionStatus } from '@/Form/Creator/FormCreator'\nimport { type IFormSection, type IWizardStep } from '@/Form/Creator/FormCreatorTypes'\nimport { type IPageLayoutProps, ActivePage } from '@/Form/Creator/Page'\nimport { utils } from '@axdspub/axiom-ui-utilities'\nimport { CaretRightIcon, CaretLeftIcon } from '@radix-ui/react-icons'\nimport React, { type ReactElement } from 'react'\nimport { useParams } from 'react-router-dom'\nimport NavElement from '@/Form/Creator/NavElement'\nimport { FormSectionContextProvider, useFormSectionContext } from '@/Form/Creator/FormSectionContextProvider'\nimport { useFormContext } from '@/Form/Creator/FormContextProvider'\n\nexport const WizardNav = ({\n sections,\n sectionStatus,\n level\n}: {\n sections?: IFormSection[]\n sectionStatus: IFormSectionStatus\n level: number\n}): ReactElement => {\n const steps = ((sections ?? []) as IWizardStep[]).sort((a, b) => a.order - b.order)\n const { activeId, setActiveId, path } = useFormSectionContext()\n const { urlNavigable } = useFormContext()\n\n return (\n <div className='relative'>\n <div className='h-[2px] top-5 bg-slate-300 absolute left-0 right-0 z-0' />\n <div className='flex flex-row gap-1'>\n {\n steps.map((p, i) => {\n return (\n <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'>\n <NavElement\n path={path}\n id={p.id}\n navigable={urlNavigable ?? true}\n className={`px-8 bg-white z-20 border-none text-sm ${activeId === p.id ? 'bg-slate-600 text-white' : 'hover:bg-slate-100'}`}\n onClick={() => { setActiveId(p.id) }}\n >\n {p.label}\n </NavElement>\n {\n i < steps.length - 1 && steps.length > 1\n ? <span className='hidden absolute right-0 top-2 w-4 h-full bg-white'><CaretRightIcon className='w-4 h-6 fill-slate-300 stroke-slate-300' /></span>\n : ''\n }\n <p className='text-xs mt-4'>{sectionStatus[p.id]?.completed} of {sectionStatus[p.id]?.total} total</p>\n <p className='text-xs mt-2'>{sectionStatus[p.id]?.requiredCompleted} of {sectionStatus[p.id]?.requiredTotal} required</p>\n </div>\n )\n })\n }</div>\n </div>\n )\n}\n\nexport const WizardNavSmall = ({\n sections,\n sectionStatus,\n level\n}: {\n sections?: IFormSection[]\n sectionStatus: IFormSectionStatus\n level: number\n}): ReactElement => {\n const { activeId, setActiveId, path } = useFormSectionContext()\n const { urlNavigable } = useFormContext()\n const steps = ((sections ?? []) as IWizardStep[]).sort((a, b) => a.order - b.order)\n const stepsMap = Object.fromEntries(steps.map(p => [p.id, p]))\n const currentStep = stepsMap[activeId ?? ''] ?? steps[0]\n const currentIndex = steps.indexOf(currentStep)\n const nextIndex = currentIndex + 1\n const prevIndex = currentIndex - 1\n // const params = (useParams()['*'] ?? '').split('/')\n // const path = params.slice(0, level).join('/')\n return (\n <div className='flex flex-row gap-4 justify-end'>{\n prevIndex >= 0\n ? <NavElement\n className='px-4 bg-slate-600 text-white border-none text-sm hover:bg-slate-700'\n path={path}\n id={steps[prevIndex].id}\n navigable={urlNavigable ?? true}\n onClick={() => { setActiveId(steps[prevIndex].id) }}\n >\n <CaretLeftIcon className='inline' /> Previous\n </NavElement>\n : <span className={utils.createButtonClass({\n className: 'px-4 bg-white border-none text-sm text-slate-400'\n })}>Previous</span>\n }\n {\n nextIndex < steps.length\n ? <NavElement\n path={path}\n id={steps[nextIndex].id}\n navigable={urlNavigable ?? true}\n className='px-4 bg-slate-600 text-white border-none text-sm hover:bg-slate-700'\n onClick={() => { setActiveId(steps[nextIndex].id) }}\n >\n Next <CaretRightIcon className='inline' />\n </NavElement>\n : <span className={utils.createButtonClass({\n className: 'px-4 bg-white border-none text-sm text-slate-400'\n })}>Next</span>\n }\n </div>\n )\n}\n\nexport interface IWizardLayoutProps extends IPageLayoutProps {\n SmallNavComponent?: React.FC<{\n level: number\n sections?: IFormSection[]\n sectionStatus: IFormSectionStatus\n className?: string\n }>\n}\n\nconst WizardLayout = ({\n sections,\n onChange,\n ContentComponent = ActivePage,\n NavComponent = WizardNav,\n SmallNavComponent = WizardNavSmall,\n className = 'flex flex-col gap-16 pt-8',\n level\n}: IWizardLayoutProps): ReactElement => {\n if (sections === undefined) {\n return <></>\n }\n const { form, formValues, setFormValues } = useFormContext()\n const params = useParams()['*']?.split('/')?.filter(d => d !== '') ?? []\n const id = form?.settings?.url_navigable\n ? params[level] ?? sections[0]?.id ?? null\n : sections[0]?.id ?? null\n\n const formSection = sections?.find(s => s.id === id) ?? sections?.[0]\n const sectionStatus = calculateSectionStatus(sections, [formValues, setFormValues])\n\n return (\n <FormSectionContextProvider path={params.slice(0, level).join('/')} id={id}>\n <div className={className}>\n <NavComponent\n sections={sections}\n sectionStatus={sectionStatus}\n level={level}\n />\n <ContentComponent\n formSection={formSection}\n sectionStatus={sectionStatus}\n onChange={onChange}\n level={level}\n />\n <SmallNavComponent\n sections={sections}\n sectionStatus={sectionStatus}\n level={level}\n />\n </div>\n </FormSectionContextProvider>\n )\n}\n\nexport default WizardLayout\n"],"names":["React","utils"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Wizard.js","sources":["../../../../../src/Form/Creator/Wizard.tsx"],"sourcesContent":["import { calculateSectionStatus } from '@/Form/helpers'\nimport { type IFormSectionStatus } from '@/Form/Creator/FormCreator'\nimport { type IFormSection, type IWizardStep } from '@/Form/Creator/FormCreatorTypes'\nimport { type IPageLayoutProps, ActivePage } from '@/Form/Creator/Page'\nimport { utils } from '@axdspub/axiom-ui-utilities'\nimport { CaretRightIcon, CaretLeftIcon } from '@radix-ui/react-icons'\nimport React, { type ReactElement } from 'react'\nimport { useParams } from 'react-router-dom'\nimport NavElement from '@/Form/Creator/NavElement'\nimport { FormSectionContextProvider, useFormSectionContext } from '@/Form/Creator/FormSectionContextProvider'\nimport { useFormContext } from '@/Form/Creator/FormContextProvider'\n\nexport const WizardNav = ({\n sections,\n sectionStatus,\n level\n}: {\n sections?: IFormSection[]\n sectionStatus: IFormSectionStatus\n level: number\n}): ReactElement => {\n const steps = ((sections ?? []) as IWizardStep[]).sort((a, b) => a.order - b.order)\n const { activeId, setActiveId, path } = useFormSectionContext()\n const { urlNavigable } = useFormContext()\n\n return (\n <div className='relative'>\n <div className='h-[2px] top-5 bg-slate-300 absolute left-0 right-0 z-0' />\n <div className='flex flex-row gap-1'>\n {\n steps.map((p, i) => {\n return (\n <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'>\n <NavElement\n path={path}\n id={p.id}\n navigable={urlNavigable ?? true}\n className={`px-8 bg-white z-20 border-none text-sm ${activeId === p.id ? 'bg-slate-600 text-white' : 'hover:bg-slate-100'}`}\n onClick={() => { setActiveId(p.id) }}\n >\n {p.label}\n </NavElement>\n {\n i < steps.length - 1 && steps.length > 1\n ? <span className='hidden absolute right-0 top-2 w-4 h-full bg-white'><CaretRightIcon className='w-4 h-6 fill-slate-300 stroke-slate-300' /></span>\n : ''\n }\n <p className='text-xs mt-4'>{sectionStatus[p.id]?.completed} of {sectionStatus[p.id]?.total} total</p>\n <p className='text-xs mt-2'>{sectionStatus[p.id]?.requiredCompleted} of {sectionStatus[p.id]?.requiredTotal} required</p>\n </div>\n )\n })\n }</div>\n </div>\n )\n}\n\nexport const WizardNavSmall = ({\n sections,\n sectionStatus,\n level\n}: {\n sections?: IFormSection[]\n sectionStatus: IFormSectionStatus\n level: number\n}): ReactElement => {\n const { activeId, setActiveId, path } = useFormSectionContext()\n const { urlNavigable } = useFormContext()\n const steps = ((sections ?? []) as IWizardStep[]).sort((a, b) => a.order - b.order)\n const stepsMap = Object.fromEntries(steps.map(p => [p.id, p]))\n const currentStep = stepsMap[activeId ?? ''] ?? steps[0]\n const currentIndex = steps.indexOf(currentStep)\n const nextIndex = currentIndex + 1\n const prevIndex = currentIndex - 1\n // const params = (useParams()['*'] ?? '').split('/')\n // const path = params.slice(0, level).join('/')\n return (\n <div className='flex flex-row gap-4 justify-end'>{\n prevIndex >= 0\n ? <NavElement\n className='px-4 bg-slate-600 text-white border-none text-sm hover:bg-slate-700'\n path={path}\n id={steps[prevIndex].id}\n navigable={urlNavigable ?? true}\n onClick={() => { setActiveId(steps[prevIndex].id) }}\n >\n <CaretLeftIcon className='inline' /> Previous\n </NavElement>\n : <span className={utils.createButtonClass({\n className: 'px-4 bg-white border-none text-sm text-slate-400'\n })}>Previous</span>\n }\n {\n nextIndex < steps.length\n ? <NavElement\n path={path}\n id={steps[nextIndex].id}\n navigable={urlNavigable ?? true}\n className='px-4 bg-slate-600 text-white border-none text-sm hover:bg-slate-700'\n onClick={() => { setActiveId(steps[nextIndex].id) }}\n >\n Next <CaretRightIcon className='inline' />\n </NavElement>\n : <span className={utils.createButtonClass({\n className: 'px-4 bg-white border-none text-sm text-slate-400'\n })}>Next</span>\n }\n </div>\n )\n}\n\nexport interface IWizardLayoutProps extends IPageLayoutProps {\n SmallNavComponent?: React.FC<{\n level: number\n sections?: IFormSection[]\n sectionStatus: IFormSectionStatus\n className?: string\n }>\n}\n\nconst WizardLayout = (props: IPageLayoutProps): ReactElement => {\n if (props.sections === undefined) {\n return <></>\n }\n const { urlNavigable } = useFormContext()\n const params = (useParams()['*'] ?? '').split('/')\n const path = params.slice(0, props.level).join('/')\n const id = urlNavigable\n ? (params[props.level] && params[props.level] !== '') ? params[props.level] : (props.sections[0]?.id ?? null)\n : props.sections[0]?.id ?? null\n\n return (\n <FormSectionContextProvider path={path} id={id}>\n <WizardLayoutContent {...props} />\n </FormSectionContextProvider>\n )\n}\n\nconst WizardLayoutContent = ({\n sections,\n onChange,\n ContentComponent = ActivePage,\n NavComponent = WizardNav,\n SmallNavComponent = WizardNavSmall,\n className = 'flex flex-col gap-16 pt-8',\n level\n}: IWizardLayoutProps): ReactElement => {\n if (sections === undefined) {\n return <></>\n }\n const { formValues, setFormValues } = useFormContext()\n const { activeId } = useFormSectionContext()\n const formSection = sections?.find(s => s.id === activeId) ?? sections?.[0]\n const sectionStatus = calculateSectionStatus(sections, [formValues, setFormValues])\n\n return (\n\n <div className={className}>\n <NavComponent\n sections={sections}\n sectionStatus={sectionStatus}\n level={level}\n />\n <ContentComponent\n formSection={formSection}\n sectionStatus={sectionStatus}\n onChange={onChange}\n level={level}\n />\n <SmallNavComponent\n sections={sections}\n sectionStatus={sectionStatus}\n level={level}\n />\n </div>\n )\n}\n\nexport default WizardLayout\n"],"names":["React","utils"],"mappings":"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"}
|