@homebound/beam 2.176.0 → 2.177.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.
|
@@ -8,38 +8,38 @@ const defaultTestId_1 = require("../utils/defaultTestId");
|
|
|
8
8
|
function MultiSelectField(props) {
|
|
9
9
|
const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
|
|
10
10
|
getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
|
|
11
|
-
values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, disabled, label, } = props;
|
|
11
|
+
values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, disabled, label, disabledOptions = [], helperText, } = props;
|
|
12
12
|
const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
|
|
13
|
-
return ((0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
13
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, {
|
|
14
|
+
// We're cheating and assume the values are strings...what we should really do is either:
|
|
15
|
+
// a) use beam's valueToKey mapping to string-encode any Value, or
|
|
16
|
+
// b) instead of using `values` directly, use the index of each value's `option` in `options`
|
|
17
|
+
value: values, onChange: (e) => {
|
|
18
|
+
var _a, _b, _c;
|
|
19
|
+
const { target } = e;
|
|
20
|
+
const selectedValues = [...values];
|
|
21
|
+
for (let i = 0; i < target.selectedOptions.length; i++) {
|
|
22
|
+
if (selectedValues.includes((_a = target.selectedOptions.item(i)) === null || _a === void 0 ? void 0 : _a.value)) {
|
|
23
|
+
// deSelect if already selected
|
|
24
|
+
selectedValues.splice(selectedValues.indexOf((_b = target.selectedOptions.item(i)) === null || _b === void 0 ? void 0 : _b.value), 1);
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
// add value
|
|
28
|
+
selectedValues.push((_c = target.selectedOptions.item(i)) === null || _c === void 0 ? void 0 : _c.value);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
const selectedOptions = options.filter((o) => selectedValues.includes(getOptionValue(o)));
|
|
32
|
+
onSelect(selectedOptions.map((o) => getOptionValue(o)), selectedOptions);
|
|
33
|
+
}, multiple: true, onFocus: () => {
|
|
34
|
+
if (!readOnly && onFocus)
|
|
35
|
+
onFocus();
|
|
36
|
+
}, onBlur: () => {
|
|
37
|
+
if (!readOnly && onBlur)
|
|
38
|
+
onBlur();
|
|
39
|
+
},
|
|
40
|
+
// Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
|
|
41
|
+
disabled: !!(readOnly || disabled), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
|
|
42
|
+
return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: getOptionValue(option), disabled: disabledOptions.includes(getOptionValue(option)) }, { children: getOptionLabel(option) }), i));
|
|
43
|
+
})] }), void 0), helperText && (0, jsx_runtime_1.jsx)("div", Object.assign({}, tid.helperText, { children: helperText }), void 0)] }, void 0));
|
|
44
44
|
}
|
|
45
45
|
exports.MultiSelectField = MultiSelectField;
|
|
@@ -9,7 +9,7 @@ const defaultTestId_1 = require("../utils/defaultTestId");
|
|
|
9
9
|
function SelectField(props) {
|
|
10
10
|
const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
|
|
11
11
|
getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
|
|
12
|
-
value, options: maybeOptions, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], label, } = props;
|
|
12
|
+
value, options: maybeOptions, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], label, helperText, } = props;
|
|
13
13
|
const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
|
|
14
14
|
const [options, setOptions] = (0, react_1.useState)(Array.isArray(maybeOptions) ? maybeOptions : maybeOptions.initial);
|
|
15
15
|
const currentOption = options.find((o) => getOptionValue(o) === value) || options[0];
|
|
@@ -18,25 +18,25 @@ function SelectField(props) {
|
|
|
18
18
|
setOptions(maybeOptions);
|
|
19
19
|
}
|
|
20
20
|
}, [maybeOptions]);
|
|
21
|
-
return ((0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, { value:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
21
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, { value:
|
|
22
|
+
// @ts-ignore - allow `value` to be seen as a string
|
|
23
|
+
value !== undefined && value !== "" && currentOption ? getOptionValue(currentOption) : "", onChange: (e) => {
|
|
24
|
+
const option = options.find((o) => `${getOptionValue(o)}` === e.target.value) || options[0];
|
|
25
|
+
onSelect(getOptionValue(option), option);
|
|
26
|
+
}, onFocus: async () => {
|
|
27
|
+
if (!Array.isArray(maybeOptions)) {
|
|
28
|
+
const result = await maybeOptions.load();
|
|
29
|
+
setOptions(result.options);
|
|
30
|
+
}
|
|
31
|
+
if (!readOnly && onFocus)
|
|
32
|
+
onFocus();
|
|
33
|
+
}, onBlur: () => {
|
|
34
|
+
if (!readOnly && onBlur)
|
|
35
|
+
onBlur();
|
|
36
|
+
},
|
|
37
|
+
// Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
|
|
38
|
+
disabled: !!(disabled || readOnly), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
|
|
39
|
+
return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: `${getOptionValue(option)}`, disabled: disabledOptions.includes(getOptionValue(option)) }, { children: getOptionLabel(option) }), i));
|
|
40
|
+
})] }), void 0), helperText && (0, jsx_runtime_1.jsx)("div", Object.assign({}, tid.helperText, { children: helperText }), void 0)] }, void 0));
|
|
41
41
|
}
|
|
42
42
|
exports.SelectField = SelectField;
|