@torq-north/react-tools 1.4.5 → 1.4.6
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/dist/index.cjs +41 -17
- package/dist/index.cjs.map +1 -1
- package/dist/index.es.js +41 -17
- package/dist/index.es.js.map +1 -1
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -460,21 +460,34 @@ function render(option, showCheckbox, isSelected) {
|
|
|
460
460
|
}
|
|
461
461
|
|
|
462
462
|
function SelectFormField(_a) {
|
|
463
|
-
var _b
|
|
464
|
-
var name = _a.name, label = _a.label, required = _a.required, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, isClearable = _a.isClearable, options = _a.options, icon = _a.icon, showSpace = _a.showSpace, format = _a.format,
|
|
465
|
-
var
|
|
466
|
-
? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)),
|
|
467
|
-
var
|
|
463
|
+
var _b;
|
|
464
|
+
var name = _a.name, label = _a.label, required = _a.required, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, isClearable = _a.isClearable, options = _a.options, icon = _a.icon, showSpace = _a.showSpace, format = _a.format, _c = _a.validators, validators = _c === void 0 ? [] : _c;
|
|
465
|
+
var _d = useField(name, __assign({ format: format, validate: required
|
|
466
|
+
? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), _e = _d.input, value = _e.value, onChange = _e.onChange, otherInputProps = __rest(_e, ["value", "onChange"]), meta = _d.meta;
|
|
467
|
+
var _f = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}), textFieldSlotProps = _f.slotProps, remainingTextFieldProps = __rest(_f, ["slotProps"]);
|
|
468
468
|
// SlotProps can be an object or a callback; we only support the object form here.
|
|
469
469
|
var inputSlotProps = typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input) === "function"
|
|
470
470
|
? undefined
|
|
471
471
|
: textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input;
|
|
472
472
|
var hasEndAdornment = isClearable || (inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment);
|
|
473
|
-
var
|
|
474
|
-
|
|
473
|
+
var _g = useState(false), isMousedOver = _g[0], setIsMousedOver = _g[1];
|
|
474
|
+
var _h = useState(false), isFocused = _h[0], setIsFocused = _h[1];
|
|
475
|
+
var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: __assign(__assign(__assign({}, otherInputProps), inputSlotProps), { onFocus: function (event) {
|
|
476
|
+
var _a;
|
|
477
|
+
setIsFocused(true);
|
|
478
|
+
(_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
|
|
479
|
+
}, onBlur: function (event) {
|
|
480
|
+
var _a;
|
|
481
|
+
setIsFocused(false);
|
|
482
|
+
(_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
|
|
483
|
+
} }), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), (hasEndAdornment && {
|
|
484
|
+
endAdornment: (jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [isClearable &&
|
|
485
|
+
(isMousedOver || isFocused) &&
|
|
486
|
+
value != null &&
|
|
487
|
+
value != "" && (jsx(IconButton, { size: "small", onClick: function () { return onChange(undefined); }, tabIndex: -1, children: jsx(CloseIcon, { fontSize: "small" }) })), inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment] })),
|
|
475
488
|
})) });
|
|
476
489
|
var renderedOptions = useMemo(function () { return renderSelectOptions(options); }, [options]);
|
|
477
|
-
return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(TextField, __assign({ fullWidth: true, select: true, label: label, required: required, disabled: disabled, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, value: value ? value : [], onChange: onChange, slotProps: mergedSlotProps }, remainingTextFieldProps, { children: [renderedOptions, !options && jsx(MenuItem, {})] })) }));
|
|
490
|
+
return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(TextField, __assign({ onMouseEnter: function () { return setIsMousedOver(true); }, onMouseLeave: function () { return setIsMousedOver(false); }, fullWidth: true, select: true, label: label, required: required, disabled: disabled, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, value: value ? value : [], onChange: onChange, slotProps: mergedSlotProps }, remainingTextFieldProps, { children: [renderedOptions, !options && jsx(MenuItem, {})] })) }));
|
|
478
491
|
}
|
|
479
492
|
|
|
480
493
|
function findTextFor(value, options) {
|
|
@@ -499,20 +512,31 @@ function findTextFor(value, options) {
|
|
|
499
512
|
}
|
|
500
513
|
}
|
|
501
514
|
function MultiSelectFormField(_a) {
|
|
502
|
-
var _b
|
|
503
|
-
var name = _a.name, label = _a.label, required = _a.required, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, isClearable = _a.isClearable, options = _a.options, icon = _a.icon, showSpace = _a.showSpace, format = _a.format,
|
|
504
|
-
var
|
|
505
|
-
? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)),
|
|
506
|
-
var
|
|
515
|
+
var _b;
|
|
516
|
+
var name = _a.name, label = _a.label, required = _a.required, disabled = _a.disabled, helperText = _a.helperText, slotProps = _a.slotProps, isClearable = _a.isClearable, options = _a.options, icon = _a.icon, showSpace = _a.showSpace, format = _a.format, _c = _a.validators, validators = _c === void 0 ? [] : _c;
|
|
517
|
+
var _d = useField(name, __assign({ format: format, validate: required
|
|
518
|
+
? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), _e = _d.input, value = _e.value, onChange = _e.onChange, otherInputProps = __rest(_e, ["value", "onChange"]), meta = _d.meta;
|
|
519
|
+
var _f = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}), textFieldSlotProps = _f.slotProps, remainingTextFieldProps = __rest(_f, ["slotProps"]);
|
|
507
520
|
// SlotProps can be an object or a callback; we only support the object form here.
|
|
508
521
|
var inputSlotProps = typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input) === "function"
|
|
509
522
|
? undefined
|
|
510
523
|
: textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input;
|
|
511
|
-
var
|
|
512
|
-
|
|
513
|
-
|
|
524
|
+
var _g = useState(false), isMousedOver = _g[0], setIsMousedOver = _g[1];
|
|
525
|
+
var _h = useState(false), isFocused = _h[0], setIsFocused = _h[1];
|
|
526
|
+
var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: __assign(__assign(__assign({}, otherInputProps), inputSlotProps), { onFocus: function (event) {
|
|
527
|
+
var _a;
|
|
528
|
+
setIsFocused(true);
|
|
529
|
+
(_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
|
|
530
|
+
}, onBlur: function (event) {
|
|
531
|
+
var _a;
|
|
532
|
+
setIsFocused(false);
|
|
533
|
+
(_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
|
|
534
|
+
} }), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), { endAdornment: (jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [isClearable && (isMousedOver || isFocused) && (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsx(IconButton, { size: "small", onClick: function () { return onChange([]); }, tabIndex: -1, children: jsx(CloseIcon, { fontSize: "small" }) })), inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment] })), multiple: true, renderValue: function (selected) { return (jsx(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: selected.map(function (s, index) {
|
|
535
|
+
var _a;
|
|
536
|
+
return (jsxs(React.Fragment, { children: [index > 0 && ", ", (_a = findTextFor(s, options)) !== null && _a !== void 0 ? _a : "Unknown"] }, s));
|
|
537
|
+
}) })); } }) });
|
|
514
538
|
var renderedOptions = useMemo(function () { return renderCheckboxSelectOptions(options, value); }, [options, value]);
|
|
515
|
-
return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(TextField, __assign({ fullWidth: true, select: true, label: label, required: required, disabled: disabled, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, value: value ? value : [], onChange: onChange, slotProps: mergedSlotProps }, remainingTextFieldProps, { children: [renderedOptions, !options && jsx(MenuItem, {})] })) }));
|
|
539
|
+
return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(TextField, __assign({ onMouseEnter: function () { return setIsMousedOver(true); }, onMouseLeave: function () { return setIsMousedOver(false); }, fullWidth: true, select: true, label: label, required: required, disabled: disabled, error: meta.touched && meta.error, helperText: (meta.touched && meta.error) || helperText, value: value ? value : [], onChange: onChange, slotProps: mergedSlotProps }, remainingTextFieldProps, { children: [renderedOptions, !options && jsx(MenuItem, {})] })) }));
|
|
516
540
|
}
|
|
517
541
|
|
|
518
542
|
var mustBeChecked = function (v) {
|