@abgov/jsonforms-components 1.34.3 → 1.35.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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useRef, useCallback } from 'react';
|
|
3
|
-
import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownItem,
|
|
3
|
+
import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownItem, GoADetails, GoASkeleton } from '@abgov/react-components';
|
|
4
4
|
import styled from 'styled-components';
|
|
5
5
|
import axios from 'axios';
|
|
6
6
|
import get$1 from 'lodash/get';
|
|
@@ -6726,14 +6726,14 @@ const SearchBox = styled.div(_t$1 || (_t$1 = _$1`
|
|
|
6726
6726
|
const LabelDiv = styled.div(_t2 || (_t2 = _$1`
|
|
6727
6727
|
font-size: var(--fs-sl);
|
|
6728
6728
|
font-weight: var(--fw-bold);
|
|
6729
|
-
padding-left: 0.4rem;
|
|
6730
6729
|
padding-bottom: 0.5rem;
|
|
6731
6730
|
`));
|
|
6732
6731
|
|
|
6733
6732
|
const AddressInputs = ({
|
|
6734
6733
|
address,
|
|
6735
6734
|
handleInputChange,
|
|
6736
|
-
isAlbertaAddress
|
|
6735
|
+
isAlbertaAddress,
|
|
6736
|
+
postalCodeErrorMsg
|
|
6737
6737
|
}) => {
|
|
6738
6738
|
const provinces = [{
|
|
6739
6739
|
value: 'AB',
|
|
@@ -6802,6 +6802,7 @@ const AddressInputs = ({
|
|
|
6802
6802
|
})
|
|
6803
6803
|
}), jsx(GoAFormItem, {
|
|
6804
6804
|
label: "Postal Code",
|
|
6805
|
+
error: postalCodeErrorMsg,
|
|
6805
6806
|
children: jsx(GoAInput, {
|
|
6806
6807
|
name: "postalCode",
|
|
6807
6808
|
testId: "address-form-postal-code",
|
|
@@ -6809,7 +6810,8 @@ const AddressInputs = ({
|
|
|
6809
6810
|
placeholder: "A0A 0A0",
|
|
6810
6811
|
value: (address === null || address === void 0 ? void 0 : address.postalCode) || '',
|
|
6811
6812
|
onChange: (name, value) => handleInputChange(name, value),
|
|
6812
|
-
width: "100%"
|
|
6813
|
+
width: "100%",
|
|
6814
|
+
maxLength: 7
|
|
6813
6815
|
})
|
|
6814
6816
|
})]
|
|
6815
6817
|
}), jsx("br", {}), jsxs(GoAGrid, {
|
|
@@ -6998,13 +7000,199 @@ const mapSuggestionToAddress = suggestion => {
|
|
|
6998
7000
|
city,
|
|
6999
7001
|
province,
|
|
7000
7002
|
postalCode,
|
|
7001
|
-
country: '
|
|
7003
|
+
country: 'CA'
|
|
7002
7004
|
};
|
|
7003
7005
|
};
|
|
7006
|
+
const validatePostalCode = values => {
|
|
7007
|
+
const postalCodeRegex = /^[A-Za-z]\d[A-Za-z] \d[A-Za-z]\d$/;
|
|
7008
|
+
return postalCodeRegex.test(values);
|
|
7009
|
+
};
|
|
7010
|
+
|
|
7011
|
+
let _ = t => t,
|
|
7012
|
+
_t;
|
|
7013
|
+
const HelpContentDiv = styled.div(_t || (_t = _`
|
|
7014
|
+
.parent-label {
|
|
7015
|
+
font-size: 24px;
|
|
7016
|
+
margin-bottom: var(--goa-space-m);
|
|
7017
|
+
font-weight: bold;
|
|
7018
|
+
}
|
|
7019
|
+
|
|
7020
|
+
.child-label {
|
|
7021
|
+
font-size: 18px;
|
|
7022
|
+
margin-bottom: var(--goa-space-xs);
|
|
7023
|
+
font-weight: bold;
|
|
7024
|
+
}
|
|
7025
|
+
.parent-margin {
|
|
7026
|
+
margin-bottom: var(--goa-space-l);
|
|
7027
|
+
}
|
|
7028
|
+
.child-margin {
|
|
7029
|
+
margin-bottom: var(--goa-space-2xs);
|
|
7030
|
+
}
|
|
7031
|
+
ul {
|
|
7032
|
+
margin: 0 0 0 var(--goa-space-xs);
|
|
7033
|
+
}
|
|
7034
|
+
.single-line {
|
|
7035
|
+
margin: var(--goa-space-2xs) 0 var(--goa-space-2xs) 0;
|
|
7036
|
+
}
|
|
7037
|
+
`));
|
|
7038
|
+
|
|
7039
|
+
const linkLength = 40;
|
|
7040
|
+
const invalidExtensions = ['exe'];
|
|
7041
|
+
const RenderLink = props => {
|
|
7042
|
+
var _a;
|
|
7043
|
+
const {
|
|
7044
|
+
link,
|
|
7045
|
+
help
|
|
7046
|
+
} = props;
|
|
7047
|
+
const [linkValid, setLinkValid] = useState(null);
|
|
7048
|
+
let error = undefined;
|
|
7049
|
+
let linkLabel = link && (link === null || link === void 0 ? void 0 : link.length) > linkLength ? `${link === null || link === void 0 ? void 0 : link.slice(0, linkLength)}...` : link;
|
|
7050
|
+
let linkUrl = link;
|
|
7051
|
+
if (help) {
|
|
7052
|
+
linkLabel = help;
|
|
7053
|
+
}
|
|
7054
|
+
const count = ((_a = link === null || link === void 0 ? void 0 : link.split('.')) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
7055
|
+
const extension = link === null || link === void 0 ? void 0 : link.split('.')[count - 1];
|
|
7056
|
+
if (invalidExtensions.includes(extension || '')) {
|
|
7057
|
+
linkUrl = '';
|
|
7058
|
+
linkLabel = '';
|
|
7059
|
+
error = `Invalid extension: ${extension}`;
|
|
7060
|
+
}
|
|
7061
|
+
useEffect(() => {
|
|
7062
|
+
if (linkUrl) {
|
|
7063
|
+
setLinkValid(isValidHref(linkUrl));
|
|
7064
|
+
}
|
|
7065
|
+
}, [linkUrl]);
|
|
7066
|
+
if (!linkLabel && !error) {
|
|
7067
|
+
linkLabel = 'Link';
|
|
7068
|
+
}
|
|
7069
|
+
if (linkValid === false) {
|
|
7070
|
+
linkLabel = '';
|
|
7071
|
+
error = 'Invalid Link';
|
|
7072
|
+
}
|
|
7073
|
+
return jsx(GoAFormItem, {
|
|
7074
|
+
error: error,
|
|
7075
|
+
label: "",
|
|
7076
|
+
children: jsx("div", {
|
|
7077
|
+
"data-testid": "link-jsonform",
|
|
7078
|
+
children: linkUrl && linkValid ? jsx("div", {
|
|
7079
|
+
children: jsxs("a", {
|
|
7080
|
+
href: link,
|
|
7081
|
+
rel: "noopener noreferrer",
|
|
7082
|
+
target: "_blank",
|
|
7083
|
+
children: [linkLabel, isMailToHref(link !== null && link !== void 0 ? link : '') ? jsx(GoAContextMenuIcon, {
|
|
7084
|
+
type: "mail",
|
|
7085
|
+
title: "Email",
|
|
7086
|
+
testId: "mail-icon"
|
|
7087
|
+
}) : jsx(GoAIconButton, {
|
|
7088
|
+
icon: "open",
|
|
7089
|
+
title: "Open",
|
|
7090
|
+
testId: "open-icon",
|
|
7091
|
+
size: "small"
|
|
7092
|
+
})]
|
|
7093
|
+
})
|
|
7094
|
+
}) : linkLabel
|
|
7095
|
+
})
|
|
7096
|
+
});
|
|
7097
|
+
};
|
|
7098
|
+
|
|
7099
|
+
const HelpContentReviewComponent = () => {
|
|
7100
|
+
return jsx(Fragment, {});
|
|
7101
|
+
};
|
|
7102
|
+
const HelpContentComponent = _a => {
|
|
7103
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
7104
|
+
var {
|
|
7105
|
+
isParent = true,
|
|
7106
|
+
showLabel = true
|
|
7107
|
+
} = _a,
|
|
7108
|
+
props = __rest(_a, ["isParent", "showLabel"]);
|
|
7109
|
+
const labelClass = isParent ? 'parent-label' : 'child-label';
|
|
7110
|
+
const marginClass = isParent ? 'parent-margin' : 'child-margin';
|
|
7111
|
+
// eslint-disable-next-line
|
|
7112
|
+
const {
|
|
7113
|
+
uischema,
|
|
7114
|
+
visible,
|
|
7115
|
+
label
|
|
7116
|
+
} = props;
|
|
7117
|
+
const link = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.link;
|
|
7118
|
+
const renderHelp = () => {
|
|
7119
|
+
var _a, _b, _c;
|
|
7120
|
+
return Array.isArray((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.help) ? jsx("ul", {
|
|
7121
|
+
children: (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help.map((line, index) => jsx("li", {
|
|
7122
|
+
children: `${line}`
|
|
7123
|
+
}, index))
|
|
7124
|
+
}) : jsx("p", {
|
|
7125
|
+
className: "single-line",
|
|
7126
|
+
children: (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.help
|
|
7127
|
+
});
|
|
7128
|
+
};
|
|
7129
|
+
const renderImage = ({
|
|
7130
|
+
height,
|
|
7131
|
+
width,
|
|
7132
|
+
alt,
|
|
7133
|
+
src
|
|
7134
|
+
}) => {
|
|
7135
|
+
return jsx("img", {
|
|
7136
|
+
src: src,
|
|
7137
|
+
width: width,
|
|
7138
|
+
height: height,
|
|
7139
|
+
alt: alt
|
|
7140
|
+
});
|
|
7141
|
+
};
|
|
7142
|
+
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';
|
|
7143
|
+
return jsx(Visible, {
|
|
7144
|
+
visible: visible,
|
|
7145
|
+
children: jsx(HelpContentDiv, {
|
|
7146
|
+
"aria-label": (_f = uischema.options) === null || _f === void 0 ? void 0 : _f.ariaLabel,
|
|
7147
|
+
children: jsxs("div", {
|
|
7148
|
+
className: marginClass,
|
|
7149
|
+
children: [label && showLabel && (!((_g = uischema.options) === null || _g === void 0 ? void 0 : _g.variant) || ((_h = uischema.options) === null || _h === void 0 ? void 0 : _h.variant) === 'hyperlink') && jsxs("div", {
|
|
7150
|
+
className: labelClass,
|
|
7151
|
+
"data-testid": label,
|
|
7152
|
+
children: [label, jsx("br", {})]
|
|
7153
|
+
}), ((_j = uischema.options) === null || _j === void 0 ? void 0 : _j.variant) && ((_k = uischema.options) === null || _k === void 0 ? void 0 : _k.variant) === 'img' && renderImage(uischema.options), ((_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.variant) && ((_m = uischema.options) === null || _m === void 0 ? void 0 : _m.variant) === 'hyperlink' && link && RenderLink(uischema === null || uischema === void 0 ? void 0 : uischema.options), textVariant && renderHelp(), ((_o = uischema.options) === null || _o === void 0 ? void 0 : _o.variant) && ((_p = uischema.options) === null || _p === void 0 ? void 0 : _p.variant) === 'details' && jsxs(GoADetails, {
|
|
7154
|
+
heading: label ? label : '',
|
|
7155
|
+
mt: "3xs",
|
|
7156
|
+
mb: "none",
|
|
7157
|
+
children: [renderHelp(), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && ((_q = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _q === void 0 ? void 0 : _q.length) > 0 && jsx(HelpContents, {
|
|
7158
|
+
elements: uischema === null || uischema === void 0 ? void 0 : uischema.elements
|
|
7159
|
+
})]
|
|
7160
|
+
}), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && (uischema === null || uischema === void 0 ? void 0 : uischema.elements.length) > 0 && ((_r = uischema.options) === null || _r === void 0 ? void 0 : _r.variant) !== 'details' && jsx(HelpContents, {
|
|
7161
|
+
elements: uischema.elements,
|
|
7162
|
+
isParent: false
|
|
7163
|
+
})]
|
|
7164
|
+
})
|
|
7165
|
+
})
|
|
7166
|
+
});
|
|
7167
|
+
};
|
|
7168
|
+
const HelpContents = ({
|
|
7169
|
+
elements,
|
|
7170
|
+
isParent: _isParent = false
|
|
7171
|
+
}) => jsx("div", {
|
|
7172
|
+
children: elements === null || elements === void 0 ? void 0 : elements.map((element, index) => {
|
|
7173
|
+
return jsx(HelpContentComponent, {
|
|
7174
|
+
uischema: element,
|
|
7175
|
+
label: element.label,
|
|
7176
|
+
errors: '',
|
|
7177
|
+
data: undefined,
|
|
7178
|
+
enabled: false,
|
|
7179
|
+
visible: true,
|
|
7180
|
+
path: '',
|
|
7181
|
+
handleChange: () => {},
|
|
7182
|
+
rootSchema: {},
|
|
7183
|
+
id: '',
|
|
7184
|
+
schema: {},
|
|
7185
|
+
isParent: _isParent
|
|
7186
|
+
}, `${element.label}-help-content-${index}`);
|
|
7187
|
+
})
|
|
7188
|
+
});
|
|
7189
|
+
const HelpContentTester = rankWith(1, uiTypeIs('HelpContent'));
|
|
7190
|
+
const HelpContent = withJsonFormsControlProps(HelpContentComponent);
|
|
7191
|
+
const HelpReviewContent = withJsonFormsControlProps(HelpContentReviewComponent);
|
|
7004
7192
|
|
|
7005
7193
|
const ADDRESS_PATH = 'api/gateway/v1/address/v1/find';
|
|
7006
7194
|
const AddressLookUpControl = props => {
|
|
7007
|
-
var _a, _b, _c
|
|
7195
|
+
var _a, _b, _c;
|
|
7008
7196
|
const {
|
|
7009
7197
|
data,
|
|
7010
7198
|
path,
|
|
@@ -7016,7 +7204,7 @@ const AddressLookUpControl = props => {
|
|
|
7016
7204
|
const formCtx = useContext(JsonFormContext);
|
|
7017
7205
|
const formHost = formCtx === null || formCtx === void 0 ? void 0 : formCtx.formUrl;
|
|
7018
7206
|
const formUrl = `${formHost}/${ADDRESS_PATH}`;
|
|
7019
|
-
const autocompletion = ((_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.autocomplete)
|
|
7207
|
+
const autocompletion = ((_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.autocomplete) !== false;
|
|
7020
7208
|
const [open, setOpen] = useState(false);
|
|
7021
7209
|
const label = typeof (uischema === null || uischema === void 0 ? void 0 : uischema.label) === 'string' && uischema.label ? uischema.label : schema === null || schema === void 0 ? void 0 : schema.title;
|
|
7022
7210
|
const defaultAddress = {
|
|
@@ -7025,23 +7213,40 @@ const AddressLookUpControl = props => {
|
|
|
7025
7213
|
city: '',
|
|
7026
7214
|
province: isAlbertaAddress ? 'AB' : '',
|
|
7027
7215
|
postalCode: '',
|
|
7028
|
-
country: '
|
|
7216
|
+
country: 'CA'
|
|
7029
7217
|
};
|
|
7030
7218
|
const [address, setAddress] = useState(data || defaultAddress);
|
|
7031
7219
|
const [searchTerm, setSearchTerm] = useState('');
|
|
7032
7220
|
const [suggestions, setSuggestions] = useState([]);
|
|
7033
7221
|
const [loading, setLoading] = useState(false);
|
|
7222
|
+
const [postalCodeErrorMsg, setPostalCodeErrorMsg] = useState('');
|
|
7034
7223
|
const updateFormData = updatedAddress => {
|
|
7035
7224
|
setAddress(updatedAddress);
|
|
7036
7225
|
handleChange(path, updatedAddress);
|
|
7037
7226
|
};
|
|
7038
7227
|
const handleInputChange = (field, value) => {
|
|
7228
|
+
var _a, _b;
|
|
7229
|
+
if (field === 'postalCode') {
|
|
7230
|
+
const validatePc = validatePostalCode(value);
|
|
7231
|
+
if (!validatePc && value.length >= 5) {
|
|
7232
|
+
const postalCodeErrorMessage = (_b = (_a = schema.errorMessage) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.postalCode;
|
|
7233
|
+
setPostalCodeErrorMsg(postalCodeErrorMessage !== null && postalCodeErrorMessage !== void 0 ? postalCodeErrorMessage : '');
|
|
7234
|
+
} else {
|
|
7235
|
+
setPostalCodeErrorMsg('');
|
|
7236
|
+
}
|
|
7237
|
+
}
|
|
7039
7238
|
const newAddress = Object.assign(Object.assign({}, address), {
|
|
7040
7239
|
[field]: value
|
|
7041
7240
|
});
|
|
7042
7241
|
setAddress(newAddress);
|
|
7043
7242
|
updateFormData(newAddress);
|
|
7044
7243
|
};
|
|
7244
|
+
const renderHelp = () => {
|
|
7245
|
+
return jsx(HelpContentComponent, Object.assign({}, props, {
|
|
7246
|
+
isParent: true,
|
|
7247
|
+
showLabel: false
|
|
7248
|
+
}));
|
|
7249
|
+
};
|
|
7045
7250
|
useEffect(() => {
|
|
7046
7251
|
const fetchSuggestions = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
7047
7252
|
if (searchTerm.length > 2) {
|
|
@@ -7064,6 +7269,7 @@ const AddressLookUpControl = props => {
|
|
|
7064
7269
|
}, [searchTerm, formUrl, isAlbertaAddress]);
|
|
7065
7270
|
const handleDropdownChange = value => __awaiter(void 0, void 0, void 0, function* () {
|
|
7066
7271
|
setSearchTerm(value);
|
|
7272
|
+
handleInputChange('addressLine1', value);
|
|
7067
7273
|
});
|
|
7068
7274
|
const handleSuggestionClick = suggestion => {
|
|
7069
7275
|
const suggestAddress = mapSuggestionToAddress(suggestion);
|
|
@@ -7072,22 +7278,22 @@ const AddressLookUpControl = props => {
|
|
|
7072
7278
|
setSuggestions([]);
|
|
7073
7279
|
};
|
|
7074
7280
|
return jsxs("div", {
|
|
7075
|
-
children: [jsx(GoAFormItem, {
|
|
7281
|
+
children: [renderHelp(), jsx(GoAFormItem, {
|
|
7076
7282
|
label: label,
|
|
7077
7283
|
children: jsxs(SearchBox, {
|
|
7078
7284
|
children: [jsx(GoAInput, {
|
|
7079
|
-
leadingIcon:
|
|
7080
|
-
name: "
|
|
7285
|
+
leadingIcon: autocompletion ? 'search' : undefined,
|
|
7286
|
+
name: "addressLine1",
|
|
7081
7287
|
testId: "address-form-address1",
|
|
7082
7288
|
ariaLabel: 'address-form-address1',
|
|
7083
7289
|
placeholder: "Start typing the first line of your address",
|
|
7084
7290
|
value: (address === null || address === void 0 ? void 0 : address.addressLine1) || '',
|
|
7085
7291
|
onChange: (name, value) => handleDropdownChange(value),
|
|
7086
7292
|
width: "100%"
|
|
7087
|
-
}), loading && jsx(GoASkeleton, {
|
|
7293
|
+
}), loading && autocompletion && jsx(GoASkeleton, {
|
|
7088
7294
|
type: "text",
|
|
7089
7295
|
"data-testId": "loading"
|
|
7090
|
-
}, 1), suggestions && jsx("ul", {
|
|
7296
|
+
}, 1), suggestions && autocompletion && jsx("ul", {
|
|
7091
7297
|
className: "suggestions",
|
|
7092
7298
|
tabIndex: 0,
|
|
7093
7299
|
children: suggestions && autocompletion && open && suggestions.map((suggestion, index) => jsx("li", {
|
|
@@ -7099,7 +7305,8 @@ const AddressLookUpControl = props => {
|
|
|
7099
7305
|
}), jsx("br", {}), jsx(AddressInputs, {
|
|
7100
7306
|
address: address,
|
|
7101
7307
|
handleInputChange: handleInputChange,
|
|
7102
|
-
isAlbertaAddress: isAlbertaAddress
|
|
7308
|
+
isAlbertaAddress: isAlbertaAddress,
|
|
7309
|
+
postalCodeErrorMsg: postalCodeErrorMsg
|
|
7103
7310
|
})]
|
|
7104
7311
|
});
|
|
7105
7312
|
};
|
|
@@ -7267,187 +7474,6 @@ const GoAGroupControlComponent = props => {
|
|
|
7267
7474
|
const GoAGroupLayoutTester = rankWith(1, uiTypeIs('Group'));
|
|
7268
7475
|
const GoAGroupControl = withJsonFormsLayoutProps(GoAGroupControlComponent, true);
|
|
7269
7476
|
|
|
7270
|
-
let _ = t => t,
|
|
7271
|
-
_t;
|
|
7272
|
-
const HelpContentDiv = styled.div(_t || (_t = _`
|
|
7273
|
-
.parent-label {
|
|
7274
|
-
font-size: 24px;
|
|
7275
|
-
margin-bottom: var(--goa-space-m);
|
|
7276
|
-
font-weight: bold;
|
|
7277
|
-
}
|
|
7278
|
-
|
|
7279
|
-
.child-label {
|
|
7280
|
-
font-size: 18px;
|
|
7281
|
-
margin-bottom: var(--goa-space-xs);
|
|
7282
|
-
font-weight: bold;
|
|
7283
|
-
}
|
|
7284
|
-
.parent-margin {
|
|
7285
|
-
margin-bottom: var(--goa-space-l);
|
|
7286
|
-
}
|
|
7287
|
-
.child-margin {
|
|
7288
|
-
margin-bottom: var(--goa-space-2xs);
|
|
7289
|
-
}
|
|
7290
|
-
ul {
|
|
7291
|
-
margin: 0 0 0 var(--goa-space-xs);
|
|
7292
|
-
}
|
|
7293
|
-
.single-line {
|
|
7294
|
-
margin: var(--goa-space-2xs) 0 var(--goa-space-2xs) 0;
|
|
7295
|
-
}
|
|
7296
|
-
`));
|
|
7297
|
-
|
|
7298
|
-
const linkLength = 40;
|
|
7299
|
-
const invalidExtensions = ['exe'];
|
|
7300
|
-
const RenderLink = props => {
|
|
7301
|
-
var _a;
|
|
7302
|
-
const {
|
|
7303
|
-
link,
|
|
7304
|
-
help
|
|
7305
|
-
} = props;
|
|
7306
|
-
const [linkValid, setLinkValid] = useState(null);
|
|
7307
|
-
let error = undefined;
|
|
7308
|
-
let linkLabel = link && (link === null || link === void 0 ? void 0 : link.length) > linkLength ? `${link === null || link === void 0 ? void 0 : link.slice(0, linkLength)}...` : link;
|
|
7309
|
-
let linkUrl = link;
|
|
7310
|
-
if (help) {
|
|
7311
|
-
linkLabel = help;
|
|
7312
|
-
}
|
|
7313
|
-
const count = ((_a = link === null || link === void 0 ? void 0 : link.split('.')) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
7314
|
-
const extension = link === null || link === void 0 ? void 0 : link.split('.')[count - 1];
|
|
7315
|
-
if (invalidExtensions.includes(extension || '')) {
|
|
7316
|
-
linkUrl = '';
|
|
7317
|
-
linkLabel = '';
|
|
7318
|
-
error = `Invalid extension: ${extension}`;
|
|
7319
|
-
}
|
|
7320
|
-
useEffect(() => {
|
|
7321
|
-
if (linkUrl) {
|
|
7322
|
-
setLinkValid(isValidHref(linkUrl));
|
|
7323
|
-
}
|
|
7324
|
-
}, [linkUrl]);
|
|
7325
|
-
if (!linkLabel && !error) {
|
|
7326
|
-
linkLabel = 'Link';
|
|
7327
|
-
}
|
|
7328
|
-
if (linkValid === false) {
|
|
7329
|
-
linkLabel = '';
|
|
7330
|
-
error = 'Invalid Link';
|
|
7331
|
-
}
|
|
7332
|
-
return jsx(GoAFormItem, {
|
|
7333
|
-
error: error,
|
|
7334
|
-
label: "",
|
|
7335
|
-
children: jsx("div", {
|
|
7336
|
-
"data-testid": "link-jsonform",
|
|
7337
|
-
children: linkUrl && linkValid ? jsx("div", {
|
|
7338
|
-
children: jsxs("a", {
|
|
7339
|
-
href: link,
|
|
7340
|
-
rel: "noopener noreferrer",
|
|
7341
|
-
target: "_blank",
|
|
7342
|
-
children: [linkLabel, isMailToHref(link !== null && link !== void 0 ? link : '') ? jsx(GoAContextMenuIcon, {
|
|
7343
|
-
type: "mail",
|
|
7344
|
-
title: "Email",
|
|
7345
|
-
testId: "mail-icon"
|
|
7346
|
-
}) : jsx(GoAIconButton, {
|
|
7347
|
-
icon: "open",
|
|
7348
|
-
title: "Open",
|
|
7349
|
-
testId: "open-icon",
|
|
7350
|
-
size: "small"
|
|
7351
|
-
})]
|
|
7352
|
-
})
|
|
7353
|
-
}) : linkLabel
|
|
7354
|
-
})
|
|
7355
|
-
});
|
|
7356
|
-
};
|
|
7357
|
-
|
|
7358
|
-
const HelpContentReviewComponent = () => {
|
|
7359
|
-
return jsx(Fragment, {});
|
|
7360
|
-
};
|
|
7361
|
-
const HelpContentComponent = _a => {
|
|
7362
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
7363
|
-
var {
|
|
7364
|
-
isParent = true
|
|
7365
|
-
} = _a,
|
|
7366
|
-
props = __rest(_a, ["isParent"]);
|
|
7367
|
-
const labelClass = isParent ? 'parent-label' : 'child-label';
|
|
7368
|
-
const marginClass = isParent ? 'parent-margin' : 'child-margin';
|
|
7369
|
-
// eslint-disable-next-line
|
|
7370
|
-
const {
|
|
7371
|
-
uischema,
|
|
7372
|
-
visible,
|
|
7373
|
-
label
|
|
7374
|
-
} = props;
|
|
7375
|
-
const link = (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.link;
|
|
7376
|
-
const renderHelp = () => {
|
|
7377
|
-
var _a, _b, _c;
|
|
7378
|
-
return Array.isArray((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.help) ? jsx("ul", {
|
|
7379
|
-
children: (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help.map((line, index) => jsx("li", {
|
|
7380
|
-
children: `${line}`
|
|
7381
|
-
}, index))
|
|
7382
|
-
}) : jsx("p", {
|
|
7383
|
-
className: "single-line",
|
|
7384
|
-
children: (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.help
|
|
7385
|
-
});
|
|
7386
|
-
};
|
|
7387
|
-
const renderImage = ({
|
|
7388
|
-
height,
|
|
7389
|
-
width,
|
|
7390
|
-
alt,
|
|
7391
|
-
src
|
|
7392
|
-
}) => {
|
|
7393
|
-
return jsx("img", {
|
|
7394
|
-
src: src,
|
|
7395
|
-
width: width,
|
|
7396
|
-
height: height,
|
|
7397
|
-
alt: alt
|
|
7398
|
-
});
|
|
7399
|
-
};
|
|
7400
|
-
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';
|
|
7401
|
-
return jsx(Visible, {
|
|
7402
|
-
visible: visible,
|
|
7403
|
-
children: jsx(HelpContentDiv, {
|
|
7404
|
-
"aria-label": (_f = uischema.options) === null || _f === void 0 ? void 0 : _f.ariaLabel,
|
|
7405
|
-
children: jsxs("div", {
|
|
7406
|
-
className: marginClass,
|
|
7407
|
-
children: [label && (!((_g = uischema.options) === null || _g === void 0 ? void 0 : _g.variant) || ((_h = uischema.options) === null || _h === void 0 ? void 0 : _h.variant) === 'hyperlink') && jsxs("div", {
|
|
7408
|
-
className: labelClass,
|
|
7409
|
-
"data-testid": label,
|
|
7410
|
-
children: [label, jsx("br", {})]
|
|
7411
|
-
}), ((_j = uischema.options) === null || _j === void 0 ? void 0 : _j.variant) && ((_k = uischema.options) === null || _k === void 0 ? void 0 : _k.variant) === 'img' && renderImage(uischema.options), ((_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.variant) && ((_m = uischema.options) === null || _m === void 0 ? void 0 : _m.variant) === 'hyperlink' && link && RenderLink(uischema === null || uischema === void 0 ? void 0 : uischema.options), textVariant && renderHelp(), ((_o = uischema.options) === null || _o === void 0 ? void 0 : _o.variant) && ((_p = uischema.options) === null || _p === void 0 ? void 0 : _p.variant) === 'details' && jsxs(GoADetails, {
|
|
7412
|
-
heading: label ? label : '',
|
|
7413
|
-
mt: "3xs",
|
|
7414
|
-
mb: "none",
|
|
7415
|
-
children: [renderHelp(), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && ((_q = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _q === void 0 ? void 0 : _q.length) > 0 && jsx(HelpContents, {
|
|
7416
|
-
elements: uischema === null || uischema === void 0 ? void 0 : uischema.elements
|
|
7417
|
-
})]
|
|
7418
|
-
}), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && (uischema === null || uischema === void 0 ? void 0 : uischema.elements.length) > 0 && ((_r = uischema.options) === null || _r === void 0 ? void 0 : _r.variant) !== 'details' && jsx(HelpContents, {
|
|
7419
|
-
elements: uischema.elements,
|
|
7420
|
-
isParent: false
|
|
7421
|
-
})]
|
|
7422
|
-
})
|
|
7423
|
-
})
|
|
7424
|
-
});
|
|
7425
|
-
};
|
|
7426
|
-
const HelpContents = ({
|
|
7427
|
-
elements,
|
|
7428
|
-
isParent: _isParent = false
|
|
7429
|
-
}) => jsx("div", {
|
|
7430
|
-
children: elements === null || elements === void 0 ? void 0 : elements.map((element, index) => {
|
|
7431
|
-
return jsx(HelpContentComponent, {
|
|
7432
|
-
uischema: element,
|
|
7433
|
-
label: element.label,
|
|
7434
|
-
errors: '',
|
|
7435
|
-
data: undefined,
|
|
7436
|
-
enabled: false,
|
|
7437
|
-
visible: true,
|
|
7438
|
-
path: '',
|
|
7439
|
-
handleChange: () => {},
|
|
7440
|
-
rootSchema: {},
|
|
7441
|
-
id: '',
|
|
7442
|
-
schema: {},
|
|
7443
|
-
isParent: _isParent
|
|
7444
|
-
}, `${element.label}-help-content-${index}`);
|
|
7445
|
-
})
|
|
7446
|
-
});
|
|
7447
|
-
const HelpContentTester = rankWith(1, uiTypeIs('HelpContent'));
|
|
7448
|
-
const HelpContent = withJsonFormsControlProps(HelpContentComponent);
|
|
7449
|
-
const HelpReviewContent = withJsonFormsControlProps(HelpContentReviewComponent);
|
|
7450
|
-
|
|
7451
7477
|
const isNullSchema = schema => {
|
|
7452
7478
|
return schema === undefined || schema === null;
|
|
7453
7479
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@abgov/jsonforms-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.35.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",
|
|
@@ -15,12 +15,14 @@ interface CustomControlElement extends ControlElement {
|
|
|
15
15
|
options?: OptionProps;
|
|
16
16
|
elements?: CustomControlElement[];
|
|
17
17
|
}
|
|
18
|
+
interface ExtraHelpContentProps {
|
|
19
|
+
isParent?: boolean;
|
|
20
|
+
showLabel?: boolean;
|
|
21
|
+
}
|
|
18
22
|
interface CustomControlProps extends ControlProps {
|
|
19
23
|
uischema: CustomControlElement;
|
|
20
24
|
}
|
|
21
|
-
export declare const HelpContentComponent: ({ isParent, ...props }: CustomControlProps &
|
|
22
|
-
isParent?: boolean;
|
|
23
|
-
}) => JSX.Element;
|
|
25
|
+
export declare const HelpContentComponent: ({ isParent, showLabel, ...props }: CustomControlProps & ExtraHelpContentProps) => JSX.Element;
|
|
24
26
|
export declare const HelpContentTester: RankedTester;
|
|
25
27
|
export declare const HelpContent: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
|
|
26
28
|
export declare const HelpReviewContent: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
|
|
@@ -3,3 +3,4 @@ export declare const fetchAddressSuggestions: (formUrl: string, searchTerm: stri
|
|
|
3
3
|
export declare const filterAlbertaAddresses: (suggestions: Suggestion[]) => Suggestion[];
|
|
4
4
|
export declare const filterSuggestionsWithoutAddressCount: (suggestions: Suggestion[]) => Suggestion[];
|
|
5
5
|
export declare const mapSuggestionToAddress: (suggestion: Suggestion) => Address;
|
|
6
|
+
export declare const validatePostalCode: (values: string) => boolean;
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { CellProps, WithClassname, ControlProps, RankedTester } from '@jsonforms/core';
|
|
3
3
|
import { WithInputProps } from './type';
|
|
4
4
|
export type GoAInputTextProps = CellProps & WithClassname & WithInputProps;
|
|
5
|
+
export declare const formatSin: (value: string) => string;
|
|
5
6
|
export declare const GoAInputText: (props: GoAInputTextProps) => JSX.Element;
|
|
6
7
|
export declare const GoATextControl: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
8
|
export declare const GoATextControlTester: RankedTester;
|