@abgov/jsonforms-components 1.10.0 → 1.10.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
CHANGED
|
@@ -4,7 +4,7 @@ import { GoACallout, GoAInputDate, GoAFormItem, GoAInput, GoATextArea, GoAInputD
|
|
|
4
4
|
import styled from 'styled-components';
|
|
5
5
|
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';
|
|
6
6
|
import { withJsonFormsRendererProps, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, withJsonFormsLayoutProps, JsonFormsDispatch, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
|
|
7
|
-
import React, { createContext, useEffect, useState, useMemo,
|
|
7
|
+
import React, { createContext, useEffect, useContext, useState, useMemo, useCallback } from 'react';
|
|
8
8
|
import merge from 'lodash/merge';
|
|
9
9
|
import axios from 'axios';
|
|
10
10
|
import isEmpty from 'lodash/isEmpty';
|
|
@@ -3277,14 +3277,16 @@ function addDataByOptions(key, url, location, type, values) {
|
|
|
3277
3277
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3278
3278
|
const enumValues = new Map();
|
|
3279
3279
|
const enumFunctions = new Map();
|
|
3280
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3281
|
+
const enumSubmitFunctions = new Map();
|
|
3280
3282
|
const baseEnumerator = {
|
|
3281
3283
|
data: enumValues,
|
|
3282
|
-
functions: enumFunctions
|
|
3284
|
+
functions: enumFunctions,
|
|
3285
|
+
submitFunction: enumSubmitFunctions
|
|
3283
3286
|
};
|
|
3284
3287
|
const JsonFormContext = /*#__PURE__*/createContext(baseEnumerator);
|
|
3285
3288
|
function ContextProvider(props) {
|
|
3286
3289
|
var _a;
|
|
3287
|
-
React.useContext(JsonFormContext);
|
|
3288
3290
|
if (props.fileManagement) {
|
|
3289
3291
|
const {
|
|
3290
3292
|
fileList,
|
|
@@ -3301,6 +3303,13 @@ function ContextProvider(props) {
|
|
|
3301
3303
|
enumFunctions.set('download-file', () => downloadFileFunction);
|
|
3302
3304
|
enumFunctions.set('delete-file', () => deleteFileFunction);
|
|
3303
3305
|
}
|
|
3306
|
+
if (props.submit) {
|
|
3307
|
+
const {
|
|
3308
|
+
submitForm
|
|
3309
|
+
} = props.submit;
|
|
3310
|
+
const submitFunction = submitForm ? submitForm : () => {};
|
|
3311
|
+
enumSubmitFunctions.set('submit-form', () => submitFunction);
|
|
3312
|
+
}
|
|
3304
3313
|
if (props.data) {
|
|
3305
3314
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3306
3315
|
(_a = props.data) === null || _a === void 0 ? void 0 : _a.forEach(item => {
|
|
@@ -3407,7 +3416,7 @@ const GoAEnumControlTester = rankWith(2, isEnumControl);
|
|
|
3407
3416
|
const GoAEnumControl = withJsonFormsEnumProps(withTranslateProps(numControl), true);
|
|
3408
3417
|
|
|
3409
3418
|
const EnumSelectAutoComplete = props => {
|
|
3410
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
3419
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
3411
3420
|
const {
|
|
3412
3421
|
data,
|
|
3413
3422
|
schema,
|
|
@@ -3432,22 +3441,31 @@ const EnumSelectAutoComplete = props => {
|
|
|
3432
3441
|
// eslint-disable-next-line
|
|
3433
3442
|
enumData = newData;
|
|
3434
3443
|
}
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3446
|
-
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
|
|
3444
|
+
const readOnly = (_o = (_m = (_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.componentProps) === null || _m === void 0 ? void 0 : _m.readOnly) !== null && _o !== void 0 ? _o : false;
|
|
3445
|
+
return jsx("div", {
|
|
3446
|
+
children: readOnly ? jsx("div", {
|
|
3447
|
+
children: jsx(GoADropdown, {
|
|
3448
|
+
disabled: true,
|
|
3449
|
+
placeholder: data,
|
|
3450
|
+
onChange: () => {}
|
|
3451
|
+
})
|
|
3452
|
+
}) : jsx(GoADropdown, {
|
|
3453
|
+
value: data,
|
|
3454
|
+
onChange: (name, value) => {
|
|
3455
|
+
handleChange(path, value);
|
|
3456
|
+
},
|
|
3457
|
+
testId: `autocomplete-dropdown-${label}`,
|
|
3458
|
+
id: `autocomplete-dropdown-${label}`,
|
|
3459
|
+
width: "100%",
|
|
3460
|
+
filterable: true,
|
|
3461
|
+
relative: true,
|
|
3462
|
+
ariaLabel: label,
|
|
3463
|
+
children: enumData === null || enumData === void 0 ? void 0 : enumData.map(item => {
|
|
3464
|
+
return jsx(GoADropdownItem, {
|
|
3465
|
+
value: item,
|
|
3466
|
+
label: item
|
|
3467
|
+
}, `autocomplete-${item}`);
|
|
3468
|
+
})
|
|
3451
3469
|
})
|
|
3452
3470
|
});
|
|
3453
3471
|
};
|
|
@@ -3616,6 +3634,38 @@ const BooleanRadioControl = props => jsx(GoAInputBaseControl, Object.assign({},
|
|
|
3616
3634
|
const GoABooleanRadioControlTester = rankWith(3, and(isBooleanControl, optionIs('radio', true)));
|
|
3617
3635
|
const GoABooleanRadioControl = withJsonFormsControlProps(BooleanRadioControl);
|
|
3618
3636
|
|
|
3637
|
+
/******************************************************************************
|
|
3638
|
+
Copyright (c) Microsoft Corporation.
|
|
3639
|
+
|
|
3640
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
3641
|
+
purpose with or without fee is hereby granted.
|
|
3642
|
+
|
|
3643
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
3644
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
3645
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
3646
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
3647
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
3648
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
3649
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
3650
|
+
***************************************************************************** */
|
|
3651
|
+
|
|
3652
|
+
function __rest(s, e) {
|
|
3653
|
+
var t = {};
|
|
3654
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
3655
|
+
t[p] = s[p];
|
|
3656
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
3657
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
3658
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
3659
|
+
t[p[i]] = s[p[i]];
|
|
3660
|
+
}
|
|
3661
|
+
return t;
|
|
3662
|
+
}
|
|
3663
|
+
|
|
3664
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
3665
|
+
var e = new Error(message);
|
|
3666
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
3667
|
+
};
|
|
3668
|
+
|
|
3619
3669
|
let _$5 = t => t,
|
|
3620
3670
|
_t$5,
|
|
3621
3671
|
_t2$3;
|
|
@@ -3670,7 +3720,7 @@ const GridItem = styled.div(_t2$3 || (_t2$3 = _$5`
|
|
|
3670
3720
|
let _$4 = t => t,
|
|
3671
3721
|
_t$4,
|
|
3672
3722
|
_t2$2,
|
|
3673
|
-
_t3$
|
|
3723
|
+
_t3$2,
|
|
3674
3724
|
_t4$1,
|
|
3675
3725
|
_t5,
|
|
3676
3726
|
_t6,
|
|
@@ -3693,7 +3743,7 @@ const ReviewItemSection = styled.div(_t2$2 || (_t2$2 = _$4`
|
|
|
3693
3743
|
border: 1px solid #dcdcdc;
|
|
3694
3744
|
border-radius: 5px;
|
|
3695
3745
|
`));
|
|
3696
|
-
const ReviewItemHeader = styled.div(_t3$
|
|
3746
|
+
const ReviewItemHeader = styled.div(_t3$2 || (_t3$2 = _$4`
|
|
3697
3747
|
display: flex;
|
|
3698
3748
|
align-items: center;
|
|
3699
3749
|
justify-content: space-between;
|
|
@@ -3859,20 +3909,26 @@ requiredFields) => elements.map((element, index) => {
|
|
|
3859
3909
|
return null;
|
|
3860
3910
|
});
|
|
3861
3911
|
|
|
3862
|
-
const FormStepper =
|
|
3863
|
-
|
|
3864
|
-
|
|
3865
|
-
|
|
3866
|
-
|
|
3867
|
-
|
|
3868
|
-
|
|
3869
|
-
|
|
3870
|
-
|
|
3871
|
-
|
|
3872
|
-
|
|
3873
|
-
|
|
3874
|
-
|
|
3875
|
-
|
|
3912
|
+
const FormStepper = _a => {
|
|
3913
|
+
var _b, _c, _d;
|
|
3914
|
+
var {
|
|
3915
|
+
uischema,
|
|
3916
|
+
data,
|
|
3917
|
+
schema,
|
|
3918
|
+
// eslint-disable-next-line
|
|
3919
|
+
ajv,
|
|
3920
|
+
path,
|
|
3921
|
+
cells,
|
|
3922
|
+
renderers,
|
|
3923
|
+
config,
|
|
3924
|
+
visible,
|
|
3925
|
+
enabled,
|
|
3926
|
+
t
|
|
3927
|
+
} = _a;
|
|
3928
|
+
__rest(_a, ["uischema", "data", "schema", "ajv", "path", "cells", "renderers", "config", "visible", "enabled", "t"]);
|
|
3929
|
+
const enumerators = useContext(JsonFormContext);
|
|
3930
|
+
const submitFormFunction = enumerators.submitFunction.get('submit-form');
|
|
3931
|
+
const submitForm = submitFormFunction && submitFormFunction();
|
|
3876
3932
|
const categorization = uischema;
|
|
3877
3933
|
const rawCategories = JSON.parse(JSON.stringify(categorization));
|
|
3878
3934
|
const [step, setStep] = useState(1);
|
|
@@ -3886,8 +3942,11 @@ const FormStepper = ({
|
|
|
3886
3942
|
}, [categorization, data, ajv]);
|
|
3887
3943
|
const disabledCategoryMap = categories.map(c => !isEnabled(c, data, '', ajv));
|
|
3888
3944
|
const handleSubmit = () => {
|
|
3889
|
-
|
|
3890
|
-
|
|
3945
|
+
if (submitForm) {
|
|
3946
|
+
submitForm(data);
|
|
3947
|
+
} else {
|
|
3948
|
+
setIsOpen(true);
|
|
3949
|
+
}
|
|
3891
3950
|
};
|
|
3892
3951
|
const onSubmit = () => {
|
|
3893
3952
|
setIsOpen(false);
|
|
@@ -3898,14 +3957,23 @@ const FormStepper = ({
|
|
|
3898
3957
|
}, [categories, t]);
|
|
3899
3958
|
useEffect(() => {}, [categories.length]);
|
|
3900
3959
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
3901
|
-
const
|
|
3902
|
-
const
|
|
3960
|
+
const validateFormData = formData => {
|
|
3961
|
+
const newSchema = JSON.parse(JSON.stringify(schema));
|
|
3962
|
+
Object.keys(newSchema.properties || {}).forEach(propertyName => {
|
|
3963
|
+
var _a;
|
|
3964
|
+
const property = newSchema.properties || {};
|
|
3965
|
+
property[propertyName].enum = getData(propertyName);
|
|
3966
|
+
if (((_a = property[propertyName]) === null || _a === void 0 ? void 0 : _a.format) === 'file-urn') {
|
|
3967
|
+
delete property[propertyName].format;
|
|
3968
|
+
}
|
|
3969
|
+
});
|
|
3970
|
+
const validate = ajv.compile(newSchema);
|
|
3903
3971
|
return validate(formData);
|
|
3904
3972
|
};
|
|
3905
3973
|
useEffect(() => {
|
|
3906
|
-
const valid =
|
|
3974
|
+
const valid = validateFormData(data);
|
|
3907
3975
|
setIsFormValid(valid);
|
|
3908
|
-
}, [data,
|
|
3976
|
+
}, [data, validateFormData]);
|
|
3909
3977
|
if ((categories === null || categories === void 0 ? void 0 : categories.length) < 1) {
|
|
3910
3978
|
// eslint-disable-next-line
|
|
3911
3979
|
return jsx(Fragment, {});
|
|
@@ -3981,102 +4049,114 @@ const FormStepper = ({
|
|
|
3981
4049
|
})
|
|
3982
4050
|
);
|
|
3983
4051
|
};
|
|
3984
|
-
const
|
|
4052
|
+
const changePage = index => {
|
|
3985
4053
|
setPage(index + 1);
|
|
3986
4054
|
};
|
|
3987
|
-
|
|
3988
|
-
|
|
3989
|
-
|
|
3990
|
-
|
|
3991
|
-
|
|
3992
|
-
children:
|
|
3993
|
-
|
|
3994
|
-
|
|
3995
|
-
|
|
3996
|
-
|
|
3997
|
-
|
|
3998
|
-
|
|
3999
|
-
|
|
4000
|
-
|
|
4001
|
-
|
|
4002
|
-
|
|
4003
|
-
|
|
4004
|
-
|
|
4005
|
-
|
|
4006
|
-
|
|
4007
|
-
|
|
4008
|
-
|
|
4009
|
-
|
|
4010
|
-
|
|
4011
|
-
|
|
4012
|
-
|
|
4013
|
-
|
|
4014
|
-
|
|
4015
|
-
|
|
4016
|
-
|
|
4017
|
-
|
|
4018
|
-
|
|
4019
|
-
|
|
4020
|
-
|
|
4021
|
-
}),
|
|
4022
|
-
children:
|
|
4023
|
-
|
|
4024
|
-
|
|
4025
|
-
|
|
4026
|
-
|
|
4027
|
-
|
|
4028
|
-
|
|
4029
|
-
|
|
4030
|
-
|
|
4031
|
-
|
|
4055
|
+
const readOnly = (_d = (_c = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.componentProps) === null || _c === void 0 ? void 0 : _c.readOnly) !== null && _d !== void 0 ? _d : false;
|
|
4056
|
+
return jsx("div", {
|
|
4057
|
+
"data-testid": "form-stepper-test-wrapper",
|
|
4058
|
+
children: jsx(Visible, {
|
|
4059
|
+
visible: visible,
|
|
4060
|
+
children: jsxs("div", {
|
|
4061
|
+
id: `${path || `goa`}-form-stepper`,
|
|
4062
|
+
className: "formStepper",
|
|
4063
|
+
children: [jsxs(GoAFormStepper, {
|
|
4064
|
+
testId: "form-stepper-test",
|
|
4065
|
+
step: step,
|
|
4066
|
+
onChange: step => {
|
|
4067
|
+
setTab(step);
|
|
4068
|
+
},
|
|
4069
|
+
children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
|
|
4070
|
+
return jsx(GoAFormStep, {
|
|
4071
|
+
text: `${CategoryLabels[index]}`,
|
|
4072
|
+
status: 'incomplete'
|
|
4073
|
+
}, `${CategoryLabels[index]}-tab`);
|
|
4074
|
+
}), jsx(GoAFormStep, {
|
|
4075
|
+
text: "Review",
|
|
4076
|
+
status: "incomplete"
|
|
4077
|
+
})]
|
|
4078
|
+
}), jsxs(GoAPages, {
|
|
4079
|
+
current: step,
|
|
4080
|
+
mb: "xl",
|
|
4081
|
+
children: [categories === null || categories === void 0 ? void 0 : categories.map((category, index) => {
|
|
4082
|
+
return jsx("div", {
|
|
4083
|
+
"data-testid": `step_${index}-content`,
|
|
4084
|
+
style: {
|
|
4085
|
+
marginTop: '1.5rem'
|
|
4086
|
+
},
|
|
4087
|
+
children: renderStepElements(category, index)
|
|
4088
|
+
}, `${CategoryLabels[index]}`);
|
|
4089
|
+
}), jsxs("div", {
|
|
4090
|
+
children: [jsx("h3", {
|
|
4091
|
+
style: {
|
|
4092
|
+
flex: 1,
|
|
4093
|
+
marginBottom: '1rem'
|
|
4094
|
+
},
|
|
4095
|
+
children: "Summary"
|
|
4096
|
+
}), jsx(ReviewItem, {
|
|
4097
|
+
children: categories.map((category, index) => {
|
|
4098
|
+
const categoryLabel = category.label || category.i18n || 'Unknown Category';
|
|
4099
|
+
const requiredFields = getAllRequiredFields(schema);
|
|
4100
|
+
return jsxs(ReviewItemSection, {
|
|
4101
|
+
children: [jsxs(ReviewItemHeader, {
|
|
4102
|
+
children: [jsx(ReviewItemTitle, {
|
|
4103
|
+
children: categoryLabel
|
|
4104
|
+
}), jsx(Anchor, {
|
|
4105
|
+
onClick: () => changePage(index),
|
|
4106
|
+
children: readOnly ? 'View' : 'Edit'
|
|
4107
|
+
})]
|
|
4108
|
+
}), jsx(Grid, {
|
|
4109
|
+
children: renderFormFields(category.elements, data, requiredFields)
|
|
4032
4110
|
})]
|
|
4033
|
-
}
|
|
4034
|
-
|
|
4035
|
-
|
|
4036
|
-
}, index);
|
|
4037
|
-
})
|
|
4111
|
+
}, index);
|
|
4112
|
+
})
|
|
4113
|
+
})]
|
|
4038
4114
|
})]
|
|
4039
|
-
})
|
|
4040
|
-
|
|
4041
|
-
|
|
4042
|
-
|
|
4043
|
-
|
|
4044
|
-
|
|
4045
|
-
|
|
4046
|
-
|
|
4047
|
-
|
|
4048
|
-
})
|
|
4049
|
-
|
|
4050
|
-
|
|
4051
|
-
|
|
4052
|
-
|
|
4053
|
-
|
|
4054
|
-
|
|
4055
|
-
|
|
4056
|
-
|
|
4057
|
-
|
|
4058
|
-
|
|
4059
|
-
|
|
4115
|
+
}), step && step !== 0 && jsxs(GoAGrid, {
|
|
4116
|
+
minChildWidth: "100px",
|
|
4117
|
+
children: [jsx("div", {
|
|
4118
|
+
children: step !== 1 ? jsx(GoAButton, {
|
|
4119
|
+
type: "secondary",
|
|
4120
|
+
disabled: disabledCategoryMap[step - 1] || !enabled,
|
|
4121
|
+
onClick: () => prevPage(step, disabledCategoryMap),
|
|
4122
|
+
children: "Previous"
|
|
4123
|
+
}) : jsx("div", {})
|
|
4124
|
+
}), jsxs(RightAlignmentDiv, {
|
|
4125
|
+
children: [step !== null && showNextBtn && jsx(GoAButton, {
|
|
4126
|
+
type: "primary",
|
|
4127
|
+
disabled: disabledCategoryMap[step - 1] || !enabled,
|
|
4128
|
+
onClick: () => nextPage(step, disabledCategoryMap),
|
|
4129
|
+
children: "Next"
|
|
4130
|
+
}), !showNextBtn && jsx("div", {
|
|
4131
|
+
children: jsx(GoAButton, {
|
|
4132
|
+
type: "primary",
|
|
4133
|
+
onClick: handleSubmit,
|
|
4134
|
+
disabled: !isFormValid || !enabled,
|
|
4135
|
+
children: "Submit"
|
|
4136
|
+
})
|
|
4137
|
+
})]
|
|
4060
4138
|
})]
|
|
4061
|
-
})
|
|
4062
|
-
|
|
4063
|
-
|
|
4064
|
-
|
|
4065
|
-
|
|
4066
|
-
|
|
4067
|
-
|
|
4068
|
-
|
|
4069
|
-
|
|
4070
|
-
|
|
4071
|
-
|
|
4072
|
-
|
|
4073
|
-
|
|
4139
|
+
}), jsx(GoAModal, {
|
|
4140
|
+
testId: "submit-confirmation",
|
|
4141
|
+
open: isOpen,
|
|
4142
|
+
heading: 'Form Submitted',
|
|
4143
|
+
width: "640px",
|
|
4144
|
+
actions: jsxs(GoAButtonGroup, {
|
|
4145
|
+
alignment: "end",
|
|
4146
|
+
children: [jsx(GoAButton, {
|
|
4147
|
+
type: "primary",
|
|
4148
|
+
testId: "submit-form",
|
|
4149
|
+
onClick: onSubmit,
|
|
4150
|
+
children: "Close"
|
|
4151
|
+
}), !showNextBtn && jsx(GoAButton, {
|
|
4152
|
+
type: "primary",
|
|
4153
|
+
onClick: handleSubmit,
|
|
4154
|
+
disabled: !isFormValid || !enabled,
|
|
4155
|
+
children: "Submit"
|
|
4156
|
+
})]
|
|
4074
4157
|
})
|
|
4075
|
-
})
|
|
4076
|
-
|
|
4077
|
-
children: "Submit is a test for preview purposes "
|
|
4078
|
-
}), "(i.e. no actual form is being submitted)"]
|
|
4079
|
-
})]
|
|
4158
|
+
})]
|
|
4159
|
+
})
|
|
4080
4160
|
})
|
|
4081
4161
|
});
|
|
4082
4162
|
};
|
|
@@ -4099,38 +4179,6 @@ const categoriesAreValid = uischema => {
|
|
|
4099
4179
|
};
|
|
4100
4180
|
const CategorizationRendererTester = rankWith(2, and(uiTypeIs('Categorization'), categoriesAreValid, optionIs('variant', 'stepper')));
|
|
4101
4181
|
|
|
4102
|
-
/******************************************************************************
|
|
4103
|
-
Copyright (c) Microsoft Corporation.
|
|
4104
|
-
|
|
4105
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
4106
|
-
purpose with or without fee is hereby granted.
|
|
4107
|
-
|
|
4108
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
4109
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
4110
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
4111
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
4112
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
4113
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
4114
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
4115
|
-
***************************************************************************** */
|
|
4116
|
-
|
|
4117
|
-
function __rest(s, e) {
|
|
4118
|
-
var t = {};
|
|
4119
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4120
|
-
t[p] = s[p];
|
|
4121
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
4122
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
4123
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
4124
|
-
t[p[i]] = s[p[i]];
|
|
4125
|
-
}
|
|
4126
|
-
return t;
|
|
4127
|
-
}
|
|
4128
|
-
|
|
4129
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
4130
|
-
var e = new Error(message);
|
|
4131
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
4132
|
-
};
|
|
4133
|
-
|
|
4134
4182
|
let _$3 = t => t,
|
|
4135
4183
|
_t$3;
|
|
4136
4184
|
const GoAContextMenuIcon = props => {
|
|
@@ -4192,11 +4240,12 @@ const DeleteFileModal = ({
|
|
|
4192
4240
|
|
|
4193
4241
|
let _$2 = t => t,
|
|
4194
4242
|
_t$2,
|
|
4195
|
-
_t2$1
|
|
4243
|
+
_t2$1,
|
|
4244
|
+
_t3$1;
|
|
4196
4245
|
const DELAY_UPLOAD_TIMEOUT_MS = 200;
|
|
4197
4246
|
const DELAY_DELETE_TIMEOUT_MS = 80;
|
|
4198
4247
|
const FileUploader = _a => {
|
|
4199
|
-
var _b;
|
|
4248
|
+
var _b, _c, _d, _e;
|
|
4200
4249
|
var {
|
|
4201
4250
|
data,
|
|
4202
4251
|
path,
|
|
@@ -4260,6 +4309,7 @@ const FileUploader = _a => {
|
|
|
4260
4309
|
const timeoutId = setTimeout(delayedFunction, 1);
|
|
4261
4310
|
return () => clearTimeout(timeoutId);
|
|
4262
4311
|
}, [handleChange, fileList, propertyId]);
|
|
4312
|
+
const readOnly = (_e = (_d = (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.componentProps) === null || _d === void 0 ? void 0 : _d.readOnly) !== null && _e !== void 0 ? _e : false;
|
|
4263
4313
|
return jsxs(FileUploaderStyle, {
|
|
4264
4314
|
id: "file-upload",
|
|
4265
4315
|
className: "FileUploader",
|
|
@@ -4269,7 +4319,7 @@ const FileUploader = _a => {
|
|
|
4269
4319
|
}) : jsx("div", {
|
|
4270
4320
|
className: "label",
|
|
4271
4321
|
children: props.label
|
|
4272
|
-
}), jsx("div", {
|
|
4322
|
+
}), !readOnly && jsx("div", {
|
|
4273
4323
|
className: "file-upload",
|
|
4274
4324
|
children: jsx(GoAFileUploadInput, {
|
|
4275
4325
|
variant: variant,
|
|
@@ -4287,43 +4337,61 @@ const FileUploader = _a => {
|
|
|
4287
4337
|
})
|
|
4288
4338
|
})
|
|
4289
4339
|
}) : jsx("div", {
|
|
4290
|
-
children: fileList && getFile() &&
|
|
4291
|
-
children:
|
|
4292
|
-
children: getFileName()
|
|
4293
|
-
}), jsxs(GoAContextMenu, {
|
|
4294
|
-
children: [jsx(GoAContextMenuIcon, {
|
|
4340
|
+
children: fileList && getFile() && jsx("div", {
|
|
4341
|
+
children: readOnly ? jsxs(AttachmentBorderDisabled, {
|
|
4342
|
+
children: [getFileName(), ' ', jsx(GoAContextMenuIcon, {
|
|
4295
4343
|
testId: "download-icon",
|
|
4296
4344
|
title: "Download",
|
|
4297
4345
|
type: "download",
|
|
4298
4346
|
onClick: () => downloadFile(getFile())
|
|
4299
|
-
})
|
|
4300
|
-
|
|
4301
|
-
|
|
4302
|
-
|
|
4303
|
-
|
|
4304
|
-
|
|
4347
|
+
})]
|
|
4348
|
+
}) : jsxs(AttachmentBorder, {
|
|
4349
|
+
children: [jsx("div", {
|
|
4350
|
+
children: getFileName()
|
|
4351
|
+
}), jsxs(GoAContextMenu, {
|
|
4352
|
+
children: [jsx(GoAContextMenuIcon, {
|
|
4353
|
+
testId: "download-icon",
|
|
4354
|
+
title: "Download",
|
|
4355
|
+
type: "download",
|
|
4356
|
+
onClick: () => downloadFile(getFile())
|
|
4357
|
+
}), jsx(GoAContextMenuIcon, {
|
|
4358
|
+
"data-testid": "delete-icon",
|
|
4359
|
+
title: "Delete",
|
|
4360
|
+
type: "trash",
|
|
4361
|
+
onClick: () => {
|
|
4362
|
+
setShowFileDeleteConfirmation(true);
|
|
4363
|
+
}
|
|
4364
|
+
})]
|
|
4365
|
+
}), jsx(DeleteFileModal, {
|
|
4366
|
+
isOpen: showFileDeleteConfirmation,
|
|
4367
|
+
title: "Delete file",
|
|
4368
|
+
content: `Delete file ${getFile().filename} ?`,
|
|
4369
|
+
onCancel: () => setShowFileDeleteConfirmation(false),
|
|
4370
|
+
onDelete: () => {
|
|
4371
|
+
setShowFileDeleteConfirmation(false);
|
|
4372
|
+
deleteFile(getFile());
|
|
4373
|
+
const handleFunction = () => {
|
|
4374
|
+
handleChange(propertyId, '');
|
|
4375
|
+
};
|
|
4376
|
+
setTimeout(handleFunction, DELAY_DELETE_TIMEOUT_MS);
|
|
4305
4377
|
}
|
|
4306
4378
|
})]
|
|
4307
|
-
})
|
|
4308
|
-
isOpen: showFileDeleteConfirmation,
|
|
4309
|
-
title: "Delete file",
|
|
4310
|
-
content: `Delete file ${getFile().filename} ?`,
|
|
4311
|
-
onCancel: () => setShowFileDeleteConfirmation(false),
|
|
4312
|
-
onDelete: () => {
|
|
4313
|
-
setShowFileDeleteConfirmation(false);
|
|
4314
|
-
deleteFile(getFile());
|
|
4315
|
-
const handleFunction = () => {
|
|
4316
|
-
handleChange(propertyId, '');
|
|
4317
|
-
};
|
|
4318
|
-
setTimeout(handleFunction, DELAY_DELETE_TIMEOUT_MS);
|
|
4319
|
-
}
|
|
4320
|
-
})]
|
|
4379
|
+
})
|
|
4321
4380
|
})
|
|
4322
4381
|
})
|
|
4323
4382
|
})]
|
|
4324
4383
|
});
|
|
4325
4384
|
};
|
|
4326
|
-
const
|
|
4385
|
+
const AttachmentBorderDisabled = styled.div(_t$2 || (_t$2 = _$2`
|
|
4386
|
+
display: flex;
|
|
4387
|
+
flex-direction: row;
|
|
4388
|
+
border: var(--goa-border-width-s) solid #dcdcdc;
|
|
4389
|
+
border-radius: var(--goa-border-radius-m);
|
|
4390
|
+
padding: var(--goa-space-xs);
|
|
4391
|
+
width: fit-content;
|
|
4392
|
+
background-color: #f1f1f1;
|
|
4393
|
+
`));
|
|
4394
|
+
const AttachmentBorder = styled.div(_t2$1 || (_t2$1 = _$2`
|
|
4327
4395
|
display: flex;
|
|
4328
4396
|
flex-direction: row;
|
|
4329
4397
|
border: var(--goa-border-width-s) solid #dcdcdc;
|
|
@@ -4332,7 +4400,7 @@ const AttachmentBorder = styled.div(_t$2 || (_t$2 = _$2`
|
|
|
4332
4400
|
width: fit-content;
|
|
4333
4401
|
margin-top: var(--goa-space-2xs);
|
|
4334
4402
|
`));
|
|
4335
|
-
const FileUploaderStyle = styled.div(
|
|
4403
|
+
const FileUploaderStyle = styled.div(_t3$1 || (_t3$1 = _$2`
|
|
4336
4404
|
.label {
|
|
4337
4405
|
display: block;
|
|
4338
4406
|
font-weight: var(--goa-font-weight-bold);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@abgov/jsonforms-components",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.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",
|
|
@@ -10,14 +10,19 @@ interface FileManagement {
|
|
|
10
10
|
downloadFile?: (file: File) => void;
|
|
11
11
|
deleteFile?: (file: File) => void;
|
|
12
12
|
}
|
|
13
|
+
interface SubmitManagement {
|
|
14
|
+
submitForm?: (any: any) => void;
|
|
15
|
+
}
|
|
13
16
|
type Props = {
|
|
14
17
|
children?: React.ReactNode;
|
|
15
18
|
fileManagement?: FileManagement;
|
|
19
|
+
submit?: SubmitManagement;
|
|
16
20
|
data?: any;
|
|
17
21
|
};
|
|
18
22
|
export declare const JsonFormContext: React.Context<{
|
|
19
23
|
data: Map<string, () => Record<string, any> | string[]>;
|
|
20
24
|
functions: Map<string, () => (file: File, propertyId: string) => void>;
|
|
25
|
+
submitFunction: Map<string, () => (data: any) => void>;
|
|
21
26
|
}>;
|
|
22
27
|
export declare function ContextProvider(props: Props): JSX.Element | null;
|
|
23
28
|
/**
|
|
@@ -5,7 +5,7 @@ import { AjvProps } from '@jsonforms/material-renderers';
|
|
|
5
5
|
export interface CategorizationStepperLayoutRendererProps extends StatePropsOfLayout, AjvProps, TranslateProps {
|
|
6
6
|
data: any;
|
|
7
7
|
}
|
|
8
|
-
export declare const FormStepper: ({ uischema, data, schema, ajv, path, cells, renderers, config, visible, enabled, t, }: CategorizationStepperLayoutRendererProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const FormStepper: ({ uischema, data, schema, ajv, path, cells, renderers, config, visible, enabled, t, ...props }: CategorizationStepperLayoutRendererProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export declare const flattenObject: (obj: Record<string, string>) => Record<string, string>;
|
|
10
10
|
export declare const FormStepperControl: (props: CategorizationStepperLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => React.JSX.Element;
|
|
11
11
|
export default FormStepper;
|