@abgov/jsonforms-components 1.6.0 → 1.7.0
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 -26
- package/package.json +3 -2
- package/src/index.d.ts +1 -0
- package/src/lib/Controls/FileUploader/DeleteFileModal.d.ts +10 -0
- package/src/lib/Controls/FileUploader/FileUploaderControl.d.ts +1 -2
- package/src/lib/Controls/FormStepper/styled-components.d.ts +1 -0
- package/src/lib/common/Ajv.d.ts +2 -0
- package/src/lib/common/index.d.ts +1 -0
package/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { withAjvProps, materialSliderControlTester, MaterialSliderControl, materialObjectControlTester, MaterialObjectRenderer, materialAllOfControlTester, MaterialAllOfRenderer, materialAnyOfControlTester, MaterialAnyOfRenderer, materialOneOfControlTester, MaterialOneOfRenderer, materialOneOfRadioGroupControlTester, MaterialOneOfRadioGroupControl, materialOneOfEnumControlTester, MaterialOneOfEnumControl, materialHorizontalLayoutTester, materialVerticalLayoutTester, materialArrayLayoutTester, MaterialArrayLayout, materialAnyOfStringOrEnumControlTester, MaterialAnyOfStringOrEnumControl, materialEnumArrayRendererTester, MaterialEnumArrayRenderer, materialBooleanCellTester, MaterialBooleanCell, materialBooleanToggleCellTester, MaterialBooleanToggleCell, materialEnumCellTester, MaterialEnumCell, materialOneOfEnumCellTester, MaterialOneOfEnumCell } from '@jsonforms/material-renderers';
|
|
2
2
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
|
-
import { GoAFormItem, GoACallout, GoAInputDate, GoAInput, GoATextArea, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress,
|
|
3
|
+
import { GoAFormItem, GoACallout, GoAInputDate, GoAInput, GoATextArea, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAFormStepper, GoAFormStep, GoAPages, GoAGrid, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADetails } from '@abgov/react-components';
|
|
4
4
|
import { Hidden, Typography, FormHelperText } from '@mui/material';
|
|
5
5
|
import styled from 'styled-components';
|
|
6
6
|
import { rankWith, uiTypeIs, isDateControl, isStringControl, and, optionIs, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, isDescriptionHidden, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, withIncreasedRank, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
|
|
@@ -12,6 +12,7 @@ import TextField from '@mui/material/TextField';
|
|
|
12
12
|
import Autocomplete from '@mui/material/Autocomplete';
|
|
13
13
|
import isEmpty from 'lodash/isEmpty';
|
|
14
14
|
import range from 'lodash/range';
|
|
15
|
+
import Ajv from 'ajv';
|
|
15
16
|
|
|
16
17
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
17
18
|
|
|
@@ -3669,7 +3670,8 @@ let _$4 = t => t,
|
|
|
3669
3670
|
_t6,
|
|
3670
3671
|
_t7,
|
|
3671
3672
|
_t8,
|
|
3672
|
-
_t9
|
|
3673
|
+
_t9,
|
|
3674
|
+
_t10;
|
|
3673
3675
|
const ReviewItem = styled.div(_t$4 || (_t$4 = _$4`
|
|
3674
3676
|
display: flex;
|
|
3675
3677
|
flex-direction: column;
|
|
@@ -3715,6 +3717,10 @@ const ListWithDetail = styled.div(_t8 || (_t8 = _$4`
|
|
|
3715
3717
|
const ListWithDetailHeading = styled.h3(_t9 || (_t9 = _$4`
|
|
3716
3718
|
text-transform: capitalize;
|
|
3717
3719
|
`));
|
|
3720
|
+
const RightAlignmentDiv = styled.div(_t10 || (_t10 = _$4`
|
|
3721
|
+
margin-left: auto;
|
|
3722
|
+
margin-right: 0;
|
|
3723
|
+
`));
|
|
3718
3724
|
|
|
3719
3725
|
const getAllRequiredFields = schema => {
|
|
3720
3726
|
const requiredFields = [];
|
|
@@ -4025,28 +4031,27 @@ const FormStepper = ({
|
|
|
4025
4031
|
})
|
|
4026
4032
|
})]
|
|
4027
4033
|
})]
|
|
4028
|
-
}), step && step !== 0 && jsxs(
|
|
4029
|
-
|
|
4030
|
-
|
|
4031
|
-
|
|
4032
|
-
|
|
4033
|
-
|
|
4034
|
-
|
|
4035
|
-
|
|
4036
|
-
|
|
4037
|
-
|
|
4038
|
-
|
|
4039
|
-
|
|
4040
|
-
|
|
4041
|
-
|
|
4042
|
-
|
|
4043
|
-
|
|
4044
|
-
children: jsx(GoAButton, {
|
|
4034
|
+
}), step && step !== 0 && jsxs(GoAGrid, {
|
|
4035
|
+
minChildWidth: "100px",
|
|
4036
|
+
children: [jsx("div", {
|
|
4037
|
+
children: step !== 1 && jsx(GoAButton, {
|
|
4038
|
+
type: "secondary",
|
|
4039
|
+
disabled: disabledCategoryMap[step - 1] || !enabled,
|
|
4040
|
+
onClick: () => prevPage(step, disabledCategoryMap),
|
|
4041
|
+
children: "Previous"
|
|
4042
|
+
})
|
|
4043
|
+
}), jsxs(RightAlignmentDiv, {
|
|
4044
|
+
children: [step !== null && showNextBtn && jsx(GoAButton, {
|
|
4045
|
+
type: "primary",
|
|
4046
|
+
disabled: disabledCategoryMap[step - 1] || !enabled,
|
|
4047
|
+
onClick: () => nextPage(step, disabledCategoryMap),
|
|
4048
|
+
children: "Next"
|
|
4049
|
+
}), !showNextBtn && jsx(GoAButton, {
|
|
4045
4050
|
type: "primary",
|
|
4046
4051
|
onClick: handleSubmit,
|
|
4047
4052
|
disabled: !isFormValid || !enabled,
|
|
4048
4053
|
children: "Submit"
|
|
4049
|
-
})
|
|
4054
|
+
})]
|
|
4050
4055
|
})]
|
|
4051
4056
|
}), jsxs(GoAModal, {
|
|
4052
4057
|
testId: "submit-confirmation",
|
|
@@ -4148,6 +4153,37 @@ const GoAContextMenu = styled.div(_t$3 || (_t$3 = _$3`
|
|
|
4148
4153
|
}
|
|
4149
4154
|
`));
|
|
4150
4155
|
|
|
4156
|
+
const DeleteFileModal = ({
|
|
4157
|
+
isOpen,
|
|
4158
|
+
title,
|
|
4159
|
+
content,
|
|
4160
|
+
onDelete,
|
|
4161
|
+
onCancel
|
|
4162
|
+
}) => {
|
|
4163
|
+
return jsx(GoAModal, {
|
|
4164
|
+
testId: "delete-confirmation",
|
|
4165
|
+
open: isOpen,
|
|
4166
|
+
heading: title,
|
|
4167
|
+
width: "640px",
|
|
4168
|
+
actions: jsxs(GoAButtonGroup, {
|
|
4169
|
+
alignment: "end",
|
|
4170
|
+
children: [jsx(GoAButton, {
|
|
4171
|
+
type: "secondary",
|
|
4172
|
+
testId: "delete-cancel",
|
|
4173
|
+
onClick: onCancel,
|
|
4174
|
+
children: "Cancel"
|
|
4175
|
+
}), jsx(GoAButton, {
|
|
4176
|
+
type: "primary",
|
|
4177
|
+
variant: "destructive",
|
|
4178
|
+
testId: "delete-confirm",
|
|
4179
|
+
onClick: onDelete,
|
|
4180
|
+
children: "Delete"
|
|
4181
|
+
})]
|
|
4182
|
+
}),
|
|
4183
|
+
children: content
|
|
4184
|
+
});
|
|
4185
|
+
};
|
|
4186
|
+
|
|
4151
4187
|
let _$2 = t => t,
|
|
4152
4188
|
_t$2,
|
|
4153
4189
|
_t2$1;
|
|
@@ -4177,9 +4213,11 @@ const FileUploader = _a => {
|
|
|
4177
4213
|
} = props;
|
|
4178
4214
|
const propertyId = i18nKeyPrefix;
|
|
4179
4215
|
const variant = ((_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.variant) || 'button';
|
|
4216
|
+
const [showFileDeleteConfirmation, setShowFileDeleteConfirmation] = useState(false);
|
|
4180
4217
|
function uploadFile(file) {
|
|
4181
4218
|
if (uploadTrigger) {
|
|
4182
|
-
|
|
4219
|
+
const value = ['Loading', Array.isArray(data) ? data[1] : data, file === null || file === void 0 ? void 0 : file.name];
|
|
4220
|
+
handleChange(propertyId, value);
|
|
4183
4221
|
uploadTrigger(file, propertyId);
|
|
4184
4222
|
}
|
|
4185
4223
|
}
|
|
@@ -4193,6 +4231,12 @@ const FileUploader = _a => {
|
|
|
4193
4231
|
deleteTrigger(file, propertyId);
|
|
4194
4232
|
}
|
|
4195
4233
|
}
|
|
4234
|
+
function getFileName() {
|
|
4235
|
+
return fileList && fileList[props.i18nKeyPrefix].filename;
|
|
4236
|
+
}
|
|
4237
|
+
function getFile() {
|
|
4238
|
+
return fileList && fileList[props.i18nKeyPrefix];
|
|
4239
|
+
}
|
|
4196
4240
|
useEffect(() => {
|
|
4197
4241
|
// UseEffect is required because not having it causes a react update error, but
|
|
4198
4242
|
// it doesn't function correctly within jsonforms unless there is a minor delay here
|
|
@@ -4232,21 +4276,33 @@ const FileUploader = _a => {
|
|
|
4232
4276
|
})
|
|
4233
4277
|
})
|
|
4234
4278
|
}) : jsx("div", {
|
|
4235
|
-
children: fileList &&
|
|
4279
|
+
children: fileList && getFile() && jsxs(AttachmentBorder, {
|
|
4236
4280
|
children: [jsx("div", {
|
|
4237
|
-
children:
|
|
4281
|
+
children: getFileName()
|
|
4238
4282
|
}), jsxs(GoAContextMenu, {
|
|
4239
4283
|
children: [jsx(GoAContextMenuIcon, {
|
|
4240
4284
|
testId: "download-icon",
|
|
4241
4285
|
title: "Download",
|
|
4242
4286
|
type: "download",
|
|
4243
|
-
onClick: () => downloadFile(
|
|
4287
|
+
onClick: () => downloadFile(getFile())
|
|
4244
4288
|
}), jsx(GoAContextMenuIcon, {
|
|
4245
4289
|
"data-testid": "delete-icon",
|
|
4246
4290
|
title: "Delete",
|
|
4247
4291
|
type: "trash",
|
|
4248
|
-
onClick: () =>
|
|
4292
|
+
onClick: () => {
|
|
4293
|
+
setShowFileDeleteConfirmation(true);
|
|
4294
|
+
}
|
|
4249
4295
|
})]
|
|
4296
|
+
}), jsx(DeleteFileModal, {
|
|
4297
|
+
isOpen: showFileDeleteConfirmation,
|
|
4298
|
+
title: "Delete file",
|
|
4299
|
+
content: `Delete file ${getFile().filename} ?`,
|
|
4300
|
+
onCancel: () => setShowFileDeleteConfirmation(false),
|
|
4301
|
+
onDelete: () => {
|
|
4302
|
+
setShowFileDeleteConfirmation(false);
|
|
4303
|
+
deleteFile(getFile());
|
|
4304
|
+
handleChange(propertyId, '');
|
|
4305
|
+
}
|
|
4250
4306
|
})]
|
|
4251
4307
|
})
|
|
4252
4308
|
})
|
|
@@ -5118,6 +5174,12 @@ const GoAErrorControlTester = rankWith(1000, (uischema, schema, context) => {
|
|
|
5118
5174
|
});
|
|
5119
5175
|
var GoAErrorControl = withJsonFormsControlProps(ErrorControl);
|
|
5120
5176
|
|
|
5177
|
+
const ajv = new Ajv({
|
|
5178
|
+
allErrors: true,
|
|
5179
|
+
verbose: true
|
|
5180
|
+
});
|
|
5181
|
+
ajv.addFormat('file-urn', /^urn:[a-zA-Z0-9.-]+(:[a-zA-Z0-9.-]+)*$/);
|
|
5182
|
+
|
|
5121
5183
|
const countries = ['Argentina', 'Brazil', 'Canada', 'Denmark', 'Egypt', 'France', 'Greece', 'India', 'Japan', 'Kenya'];
|
|
5122
5184
|
addData('countries', countries);
|
|
5123
5185
|
const GoABaseRenderers = [
|
|
@@ -5241,4 +5303,4 @@ const GoACells = [{
|
|
|
5241
5303
|
cell: MaterialOneOfEnumCell
|
|
5242
5304
|
}, ...InputCells];
|
|
5243
5305
|
|
|
5244
|
-
export { ContextProvider, GoABaseRenderers, GoACells, GoARenderers, JsonFormContext, addData, addDataByOptions, addDataByUrl, getAllData, getData };
|
|
5306
|
+
export { ContextProvider, GoABaseRenderers, GoACells, GoARenderers, JsonFormContext, addData, addDataByOptions, addDataByUrl, ajv, getAllData, getData };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@abgov/jsonforms-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.0",
|
|
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",
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
"@jsonforms/material-renderers": "^3.1.0",
|
|
11
11
|
"@jsonforms/react": "^3.1.0",
|
|
12
12
|
"@mui/material": "^5.15.10",
|
|
13
|
-
"react": "^18.0.0"
|
|
13
|
+
"react": "^18.0.0",
|
|
14
|
+
"ajv": "^6.12.6"
|
|
14
15
|
},
|
|
15
16
|
"dependencies": {
|
|
16
17
|
"axios": "^1.6.7",
|
package/src/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry } from '@jsonforms/core';
|
|
2
2
|
export * from './lib/Context';
|
|
3
|
+
export * from './lib/common';
|
|
3
4
|
export declare const GoABaseRenderers: JsonFormsRendererRegistryEntry[];
|
|
4
5
|
export declare const GoARenderers: JsonFormsRendererRegistryEntry[];
|
|
5
6
|
export declare const GoACells: JsonFormsCellRendererRegistryEntry[];
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface deleteModalProps {
|
|
3
|
+
title: string;
|
|
4
|
+
content?: string | JSX.Element;
|
|
5
|
+
isOpen: boolean;
|
|
6
|
+
onDelete: () => void;
|
|
7
|
+
onCancel: () => void;
|
|
8
|
+
}
|
|
9
|
+
export declare const DeleteFileModal: ({ isOpen, title, content, onDelete, onCancel }: deleteModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
import { WithClassname, ControlProps } from '@jsonforms/core';
|
|
2
|
-
type FileUploaderLayoutRendererProps = ControlProps & WithClassname;
|
|
2
|
+
export type FileUploaderLayoutRendererProps = ControlProps & WithClassname;
|
|
3
3
|
export declare const FileUploader: ({ data, path, handleChange, uischema, ...props }: FileUploaderLayoutRendererProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
export {};
|
|
@@ -7,3 +7,4 @@ export declare const ReviewListItem: import("styled-components").StyledComponent
|
|
|
7
7
|
export declare const ReviewListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
8
|
export declare const ListWithDetail: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
9
|
export declare const ListWithDetailHeading: import("styled-components").StyledComponent<"h3", any, {}, never>;
|
|
10
|
+
export declare const RightAlignmentDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Ajv';
|