@abgov/jsonforms-components 1.42.9 → 1.43.1
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/index.esm.js +88 -63
- package/package.json +1 -1
- package/src/lib/Controls/FormStepper/FormStepperControl.d.ts +1 -10
- package/src/lib/Controls/FormStepper/FormStepperReviewControl.d.ts +2 -0
- package/src/lib/Controls/FormStepper/index.d.ts +1 -0
- package/src/lib/Controls/FormStepper/types.d.ts +12 -0
- package/src/lib/Controls/FormStepper/util/helpers.d.ts +1 -0
package/index.esm.js
CHANGED
|
@@ -5564,8 +5564,7 @@ const mapToVisibleStep = (step, allSteps, visibleSteps) => {
|
|
|
5564
5564
|
return step;
|
|
5565
5565
|
};
|
|
5566
5566
|
|
|
5567
|
-
|
|
5568
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
5567
|
+
// eslint-disable-next-line
|
|
5569
5568
|
const getProperty = (obj, propName) => {
|
|
5570
5569
|
if (obj[propName] !== undefined) return obj[propName];
|
|
5571
5570
|
for (const key in obj) {
|
|
@@ -5575,8 +5574,80 @@ const getProperty = (obj, propName) => {
|
|
|
5575
5574
|
}
|
|
5576
5575
|
}
|
|
5577
5576
|
};
|
|
5577
|
+
|
|
5578
|
+
const FormStepperReviewer = props => {
|
|
5579
|
+
var _a, _b, _c;
|
|
5580
|
+
const {
|
|
5581
|
+
uischema,
|
|
5582
|
+
data,
|
|
5583
|
+
schema,
|
|
5584
|
+
ajv,
|
|
5585
|
+
cells,
|
|
5586
|
+
renderers,
|
|
5587
|
+
visible,
|
|
5588
|
+
enabled,
|
|
5589
|
+
navigationFunc
|
|
5590
|
+
} = props;
|
|
5591
|
+
const componentProps = (_b = (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) !== null && _b !== void 0 ? _b : {};
|
|
5592
|
+
const readOnly = (_c = componentProps === null || componentProps === void 0 ? void 0 : componentProps.readOnly) !== null && _c !== void 0 ? _c : false;
|
|
5593
|
+
const categorization = uischema;
|
|
5594
|
+
const categories = categorization.elements.filter(category => isVisible(category, data, '', ajv));
|
|
5595
|
+
return jsx(ReviewItem, {
|
|
5596
|
+
children: categories.map((category, index) => {
|
|
5597
|
+
const categoryLabel = category.label || category.i18n || 'Unknown Category';
|
|
5598
|
+
const testId = `${categoryLabel}-review-link`;
|
|
5599
|
+
return jsxs(ReviewItemSection, {
|
|
5600
|
+
children: [jsxs(ReviewItemHeader, {
|
|
5601
|
+
children: [jsx(ReviewItemTitle, {
|
|
5602
|
+
children: categoryLabel
|
|
5603
|
+
}), navigationFunc && jsx(Anchor, {
|
|
5604
|
+
onClick: () => navigationFunc(index + 1),
|
|
5605
|
+
"data-testid": testId,
|
|
5606
|
+
onKeyDown: e => {
|
|
5607
|
+
if (!readOnly && (e.key === ' ' || e.key === 'Enter')) {
|
|
5608
|
+
e.preventDefault();
|
|
5609
|
+
navigationFunc(index + 1);
|
|
5610
|
+
}
|
|
5611
|
+
},
|
|
5612
|
+
children: readOnly ? 'View' : 'Edit'
|
|
5613
|
+
})]
|
|
5614
|
+
}), jsx(GoAGrid, {
|
|
5615
|
+
minChildWidth: "600px",
|
|
5616
|
+
children: category.elements.filter(field => {
|
|
5617
|
+
var _a, _b;
|
|
5618
|
+
const conditionProps = (_a = field.rule) === null || _a === void 0 ? void 0 : _a.condition;
|
|
5619
|
+
if (conditionProps && data) {
|
|
5620
|
+
const canHideControlParts = (_b = conditionProps === null || conditionProps === void 0 ? void 0 : conditionProps.scope) === null || _b === void 0 ? void 0 : _b.split('/');
|
|
5621
|
+
const canHideControl = canHideControlParts && canHideControlParts[(canHideControlParts === null || canHideControlParts === void 0 ? void 0 : canHideControlParts.length) - 1];
|
|
5622
|
+
const isHidden = getProperty(data, canHideControl);
|
|
5623
|
+
if (!isHidden) {
|
|
5624
|
+
return field;
|
|
5625
|
+
}
|
|
5626
|
+
} else {
|
|
5627
|
+
return field;
|
|
5628
|
+
}
|
|
5629
|
+
}).map((element, index) => {
|
|
5630
|
+
return jsx("div", {
|
|
5631
|
+
children: jsx(JsonFormsDispatch, {
|
|
5632
|
+
"data-testid": `jsonforms-object-list-defined-elements-dispatch`,
|
|
5633
|
+
schema: schema,
|
|
5634
|
+
uischema: element,
|
|
5635
|
+
enabled: enabled,
|
|
5636
|
+
renderers: GoAReviewRenderers,
|
|
5637
|
+
cells: cells
|
|
5638
|
+
})
|
|
5639
|
+
}, `form-stepper-category-${index}`);
|
|
5640
|
+
})
|
|
5641
|
+
})]
|
|
5642
|
+
}, index);
|
|
5643
|
+
})
|
|
5644
|
+
});
|
|
5645
|
+
};
|
|
5646
|
+
|
|
5647
|
+
const summaryLabel = 'Summary';
|
|
5648
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
5578
5649
|
const FormStepper = props => {
|
|
5579
|
-
var _a, _b, _c, _d
|
|
5650
|
+
var _a, _b, _c, _d;
|
|
5580
5651
|
const {
|
|
5581
5652
|
uischema,
|
|
5582
5653
|
data,
|
|
@@ -5604,10 +5675,6 @@ const FormStepper = props => {
|
|
|
5604
5675
|
const [categories, setCategories] = React.useState(categorization.elements);
|
|
5605
5676
|
const [inputStatuses, setInputStatuses] = React.useState({});
|
|
5606
5677
|
const [stepStatuses, setStepStatuses] = React.useState([]);
|
|
5607
|
-
useEffect(() => {
|
|
5608
|
-
const cats = categorization.elements.filter(category => isVisible(category, data, '', ajv));
|
|
5609
|
-
setCategories(cats);
|
|
5610
|
-
}, [categorization, data, ajv]);
|
|
5611
5678
|
const disabledCategoryMap = categories.map(c => !isEnabled(c, data, '', ajv));
|
|
5612
5679
|
const handleSubmit = () => {
|
|
5613
5680
|
if (submitForm) {
|
|
@@ -5623,6 +5690,10 @@ const FormStepper = props => {
|
|
|
5623
5690
|
return categories.map(c => deriveLabelForUISchemaElement(c, t));
|
|
5624
5691
|
}, [categories, t]);
|
|
5625
5692
|
useEffect(() => {}, [categories.length]);
|
|
5693
|
+
useEffect(() => {
|
|
5694
|
+
const cats = categorization.elements.filter(category => isVisible(category, data, '', ajv));
|
|
5695
|
+
setCategories(cats);
|
|
5696
|
+
}, [categorization, data, ajv]);
|
|
5626
5697
|
useEffect(() => {
|
|
5627
5698
|
const statuses = Array(categories.length);
|
|
5628
5699
|
categories.forEach((_, i) => {
|
|
@@ -5695,8 +5766,7 @@ const FormStepper = props => {
|
|
|
5695
5766
|
const isInputInitialized = inputId => {
|
|
5696
5767
|
return inputId in inputStatuses;
|
|
5697
5768
|
};
|
|
5698
|
-
const
|
|
5699
|
-
const isFormSubmitted = (_d = enumerators === null || enumerators === void 0 ? void 0 : enumerators.isFormSubmitted) !== null && _d !== void 0 ? _d : false;
|
|
5769
|
+
const isFormSubmitted = (_c = enumerators === null || enumerators === void 0 ? void 0 : enumerators.isFormSubmitted) !== null && _c !== void 0 ? _c : false;
|
|
5700
5770
|
return jsx("div", {
|
|
5701
5771
|
"data-testid": "form-stepper-test-wrapper",
|
|
5702
5772
|
children: jsx(Visible, {
|
|
@@ -5705,7 +5775,7 @@ const FormStepper = props => {
|
|
|
5705
5775
|
id: `${path || `goa`}-form-stepper`,
|
|
5706
5776
|
className: "formStepper",
|
|
5707
5777
|
children: [categories.length === staleCategories.length && jsxs(GoAFormStepper, {
|
|
5708
|
-
testId: ((
|
|
5778
|
+
testId: ((_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.testId) || 'form-stepper-test',
|
|
5709
5779
|
step: step,
|
|
5710
5780
|
onChange: step => {
|
|
5711
5781
|
setTab(step);
|
|
@@ -5756,57 +5826,9 @@ const FormStepper = props => {
|
|
|
5756
5826
|
marginBottom: '1rem'
|
|
5757
5827
|
},
|
|
5758
5828
|
children: summaryLabel
|
|
5759
|
-
}), jsx(
|
|
5760
|
-
|
|
5761
|
-
|
|
5762
|
-
const testId = `${categoryLabel}-review-link`;
|
|
5763
|
-
return jsxs(ReviewItemSection, {
|
|
5764
|
-
children: [jsxs(ReviewItemHeader, {
|
|
5765
|
-
children: [jsx(ReviewItemTitle, {
|
|
5766
|
-
children: categoryLabel
|
|
5767
|
-
}), jsx(Anchor, {
|
|
5768
|
-
tabIndex: readOnly ? -1 : 0,
|
|
5769
|
-
onClick: () => setPage(index + 1),
|
|
5770
|
-
"data-testid": testId,
|
|
5771
|
-
onKeyDown: e => {
|
|
5772
|
-
if (!readOnly && (e.key === ' ' || e.key === 'Enter')) {
|
|
5773
|
-
e.preventDefault();
|
|
5774
|
-
setPage(index + 1);
|
|
5775
|
-
}
|
|
5776
|
-
},
|
|
5777
|
-
children: readOnly ? 'View' : 'Edit'
|
|
5778
|
-
})]
|
|
5779
|
-
}), jsx("div", {
|
|
5780
|
-
children: category.elements.filter(field => {
|
|
5781
|
-
var _a, _b;
|
|
5782
|
-
const conditionProps = (_a = field.rule) === null || _a === void 0 ? void 0 : _a.condition;
|
|
5783
|
-
/* istanbul ignore next */
|
|
5784
|
-
if (conditionProps && data) {
|
|
5785
|
-
const canHideControlParts = (_b = conditionProps === null || conditionProps === void 0 ? void 0 : conditionProps.scope) === null || _b === void 0 ? void 0 : _b.split('/');
|
|
5786
|
-
const canHideControl = canHideControlParts && canHideControlParts[(canHideControlParts === null || canHideControlParts === void 0 ? void 0 : canHideControlParts.length) - 1];
|
|
5787
|
-
const isHidden = getProperty(data, canHideControl);
|
|
5788
|
-
if (!isHidden) {
|
|
5789
|
-
return field;
|
|
5790
|
-
}
|
|
5791
|
-
} else {
|
|
5792
|
-
return field;
|
|
5793
|
-
}
|
|
5794
|
-
}).map((element, index) => {
|
|
5795
|
-
return jsx("div", {
|
|
5796
|
-
children: jsx(JsonFormsDispatch, {
|
|
5797
|
-
"data-testid": `jsonforms-object-list-defined-elements-dispatch`,
|
|
5798
|
-
schema: schema,
|
|
5799
|
-
uischema: element,
|
|
5800
|
-
enabled: enabled,
|
|
5801
|
-
renderers: GoAReviewRenderers,
|
|
5802
|
-
cells: cells
|
|
5803
|
-
})
|
|
5804
|
-
}, `form-stepper-category-${index}`);
|
|
5805
|
-
})
|
|
5806
|
-
})]
|
|
5807
|
-
}, index);
|
|
5808
|
-
})
|
|
5809
|
-
})]
|
|
5829
|
+
}), jsx(FormStepperReviewer, Object.assign({
|
|
5830
|
+
navigationFunc: setPage
|
|
5831
|
+
}, props))]
|
|
5810
5832
|
})]
|
|
5811
5833
|
}), step !== 0 && jsxs(GoAGrid, {
|
|
5812
5834
|
minChildWidth: "100px",
|
|
@@ -7891,7 +7913,7 @@ const HelpContentComponent = _a => {
|
|
|
7891
7913
|
src: src,
|
|
7892
7914
|
width: width,
|
|
7893
7915
|
height: height,
|
|
7894
|
-
alt: alt
|
|
7916
|
+
alt: alt || 'help-content-toggle-img'
|
|
7895
7917
|
});
|
|
7896
7918
|
};
|
|
7897
7919
|
const textVariant = !((_c = uischema.options) === null || _c === void 0 ? void 0 : _c.variant) || ((_d = uischema.options) === null || _d === void 0 ? void 0 : _d.variant) !== 'details' && ((_e = uischema.options) === null || _e === void 0 ? void 0 : _e.variant) !== 'hyperlink';
|
|
@@ -10211,6 +10233,9 @@ const GoABaseReviewRenderers = [
|
|
|
10211
10233
|
renderer: HelpReviewContent
|
|
10212
10234
|
}];
|
|
10213
10235
|
const GoAReviewRenderers = [...GoABaseReviewRenderers, {
|
|
10236
|
+
tester: CategorizationRendererTester,
|
|
10237
|
+
renderer: FormStepperReviewer
|
|
10238
|
+
}, {
|
|
10214
10239
|
tester: FileUploaderTester,
|
|
10215
10240
|
renderer: withJsonFormsControlProps(FileUploaderReview)
|
|
10216
10241
|
}, {
|
|
@@ -10241,4 +10266,4 @@ const GoARenderers = [...GoABaseRenderers, {
|
|
|
10241
10266
|
}];
|
|
10242
10267
|
const GoACells = [...InputCells];
|
|
10243
10268
|
|
|
10244
|
-
export { ADD_DATALIST_ACTION, ADD_NO_ANONYMOUS_ACTION, ADD_REGISTER_DATA_ACTION, ADD_REGISTER_DATA_ERROR, AddressLookUpControl, AddressLookUpControlReview, AddressLookUpTester, ArrayControl, ArrayControlBase, ArrayControlReview, BooleanComponent, BooleanControl, BooleanRadioComponent, BooleanRadioControl, CategorizationRendererTester, CheckboxGroup, ContextProviderC, ContextProviderClass, ContextProviderFactory, EnumCheckboxControl, EnumRadioControl, EnumSelect, FileUploader, FileUploaderReview, FileUploaderTester, FormStepper, FormStepperControl, FullNameControl, FullNameDobControl, FullNameDobReviewControl, FullNameDobTester, FullNameReviewControl, FullNameTester, GoAArrayControlRenderer, GoAArrayControlReviewRenderer, GoAArrayControlTester, GoABaseInputReviewComponent, GoABaseRenderers, GoABaseReviewRenderers, GoABooleanControl, GoABooleanControlTester, GoABooleanRadioControl, GoABooleanRadioControlTester, GoACells, GoACheckoutGroupControlTester, GoADateControl, GoADateControlTester, GoADateInput, GoADateTimeControl, GoADateTimeControlTester, GoADateTimeInput, GoAEnumCheckboxGroupControl, GoAEnumControl, GoAEnumControlTester, GoAEnumRadioGroupControl, GoAInputBaseControl, GoAInputDateControl, GoAInputDateTimeControl, GoAInputInteger, GoAInputIntegerControl, GoAInputNumberControl, GoAInputText, GoAInputTextControl, GoAInputTimeControl, GoAIntegerControl, GoAIntegerControlTester, GoAListWithDetailsControlRenderer, GoAListWithDetailsTester, GoANumberControl, GoANumberControlTester, GoANumberInput, GoARadioGroupControlTester, GoARenderers, GoAReviewRenderers, GoATextControl, GoATextControlTester, GoATimeControl, GoATimeControlTester, GoATimeInput, GoInputBaseReview, GoInputBaseReviewControl, JsonFormContext, JsonFormRegisterProvider, JsonFormsRegisterContext, ListWithDetailsControl, MultiLineText, MultiLineTextControl, MultiLineTextControlInput, MultiLineTextControlTester, RadioGroup, createDefaultAjv, enumControl, errMalformedDate, formatSin,
|
|
10269
|
+
export { ADD_DATALIST_ACTION, ADD_NO_ANONYMOUS_ACTION, ADD_REGISTER_DATA_ACTION, ADD_REGISTER_DATA_ERROR, AddressLookUpControl, AddressLookUpControlReview, AddressLookUpTester, ArrayControl, ArrayControlBase, ArrayControlReview, BooleanComponent, BooleanControl, BooleanRadioComponent, BooleanRadioControl, CategorizationRendererTester, CheckboxGroup, ContextProviderC, ContextProviderClass, ContextProviderFactory, EnumCheckboxControl, EnumRadioControl, EnumSelect, FileUploader, FileUploaderReview, FileUploaderTester, FormStepper, FormStepperControl, FormStepperReviewer, FullNameControl, FullNameDobControl, FullNameDobReviewControl, FullNameDobTester, FullNameReviewControl, FullNameTester, GoAArrayControlRenderer, GoAArrayControlReviewRenderer, GoAArrayControlTester, GoABaseInputReviewComponent, GoABaseRenderers, GoABaseReviewRenderers, GoABooleanControl, GoABooleanControlTester, GoABooleanRadioControl, GoABooleanRadioControlTester, GoACells, GoACheckoutGroupControlTester, GoADateControl, GoADateControlTester, GoADateInput, GoADateTimeControl, GoADateTimeControlTester, GoADateTimeInput, GoAEnumCheckboxGroupControl, GoAEnumControl, GoAEnumControlTester, GoAEnumRadioGroupControl, GoAInputBaseControl, GoAInputDateControl, GoAInputDateTimeControl, GoAInputInteger, GoAInputIntegerControl, GoAInputNumberControl, GoAInputText, GoAInputTextControl, GoAInputTimeControl, GoAIntegerControl, GoAIntegerControlTester, GoAListWithDetailsControlRenderer, GoAListWithDetailsTester, GoANumberControl, GoANumberControlTester, GoANumberInput, GoARadioGroupControlTester, GoARenderers, GoAReviewRenderers, GoATextControl, GoATextControlTester, GoATimeControl, GoATimeControlTester, GoATimeInput, GoInputBaseReview, GoInputBaseReviewControl, JsonFormContext, JsonFormRegisterProvider, JsonFormsRegisterContext, ListWithDetailsControl, MultiLineText, MultiLineTextControl, MultiLineTextControlInput, MultiLineTextControlTester, RadioGroup, createDefaultAjv, enumControl, errMalformedDate, formatSin, isAddressLookup, isFullName, isFullNameDoB, registerReducer, resolveRefs, tryResolveRefs };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@abgov/jsonforms-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.43.1",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
|
|
6
6
|
"repository": "https://github.com/GovAlta/adsp-monorepo",
|
|
@@ -1,20 +1,11 @@
|
|
|
1
1
|
import { GoAButtonType } from '@abgov/react-components-new';
|
|
2
|
-
import {
|
|
3
|
-
import { TranslateProps } from '@jsonforms/react';
|
|
4
|
-
import { AjvProps } from '../../util/layout';
|
|
5
|
-
export interface CategorizationStepperLayoutRendererProps extends StatePropsOfLayout, AjvProps, TranslateProps {
|
|
6
|
-
}
|
|
7
|
-
export interface FormStepperComponentProps {
|
|
8
|
-
controlledNav?: number;
|
|
9
|
-
readOnly?: boolean;
|
|
10
|
-
}
|
|
2
|
+
import { CategorizationStepperLayoutRendererProps } from './types';
|
|
11
3
|
export interface FormStepperOptionProps {
|
|
12
4
|
nextButtonLabel?: string;
|
|
13
5
|
nextButtonType?: GoAButtonType;
|
|
14
6
|
previousButtonLabel?: string;
|
|
15
7
|
previousButtonType?: GoAButtonType;
|
|
16
8
|
}
|
|
17
|
-
export declare const getProperty: any;
|
|
18
9
|
export declare const FormStepper: (props: CategorizationStepperLayoutRendererProps) => JSX.Element;
|
|
19
10
|
export declare const FormStepperControl: (props: CategorizationStepperLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => import("react/jsx-runtime").JSX.Element;
|
|
20
11
|
export default FormStepper;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { StatePropsOfLayout } from '@jsonforms/core';
|
|
2
|
+
import { AjvProps } from '../../util/layout';
|
|
3
|
+
import { TranslateProps } from '@jsonforms/react';
|
|
4
|
+
export interface CategorizationStepperLayoutRendererProps extends StatePropsOfLayout, AjvProps, TranslateProps {
|
|
5
|
+
}
|
|
6
|
+
export interface CategorizationStepperLayoutReviewRendererProps extends CategorizationStepperLayoutRendererProps {
|
|
7
|
+
navigationFunc?: (index: number) => void;
|
|
8
|
+
}
|
|
9
|
+
export interface FormStepperComponentProps {
|
|
10
|
+
controlledNav?: number;
|
|
11
|
+
readOnly?: boolean;
|
|
12
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getProperty: any;
|