@torq-north/react-tools 1.4.5 → 1.4.7
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 +63 -17
- package/dist/index.cjs.map +1 -1
- package/dist/index.es.js +63 -17
- package/dist/index.es.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -462,21 +462,45 @@ function render(option, showCheckbox, isSelected) {
|
|
|
462
462
|
}
|
|
463
463
|
|
|
464
464
|
function SelectFormField(_a) {
|
|
465
|
-
var _b
|
|
466
|
-
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,
|
|
467
|
-
var
|
|
468
|
-
? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)),
|
|
469
|
-
var
|
|
465
|
+
var _b;
|
|
466
|
+
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;
|
|
467
|
+
var _d = reactFinalForm.useField(name, __assign({ format: format, validate: required
|
|
468
|
+
? 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;
|
|
469
|
+
var _f = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}), textFieldSlotProps = _f.slotProps, remainingTextFieldProps = __rest(_f, ["slotProps"]);
|
|
470
470
|
// SlotProps can be an object or a callback; we only support the object form here.
|
|
471
471
|
var inputSlotProps = typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input) === "function"
|
|
472
472
|
? undefined
|
|
473
473
|
: textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input;
|
|
474
474
|
var hasEndAdornment = isClearable || (inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment);
|
|
475
|
-
var
|
|
476
|
-
|
|
475
|
+
var _g = React.useState(false), isMousedOver = _g[0], setIsMousedOver = _g[1];
|
|
476
|
+
var _h = React.useState(false), isFocused = _h[0], setIsFocused = _h[1];
|
|
477
|
+
var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: __assign(__assign(__assign({}, otherInputProps), inputSlotProps), { onFocus: function (event) {
|
|
478
|
+
var _a;
|
|
479
|
+
setIsFocused(true);
|
|
480
|
+
(_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
|
|
481
|
+
}, onBlur: function (event) {
|
|
482
|
+
var _a;
|
|
483
|
+
setIsFocused(false);
|
|
484
|
+
(_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
|
|
485
|
+
} }), select: __assign(__assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), { onClose: function (e) {
|
|
486
|
+
var _a, _b;
|
|
487
|
+
typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === "function"
|
|
488
|
+
? undefined
|
|
489
|
+
: (_b = (_a = textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
|
490
|
+
//When opening a select and then moving the mouse away, the input does not register as
|
|
491
|
+
// being unhovered. We can fudge this by setting the hover state to false when the options
|
|
492
|
+
// menu is closed. If the mouse is still over the input when the menu is closed, the hover state
|
|
493
|
+
// will be set to true automatically by the onMouseEnter event handler (and the focus state is
|
|
494
|
+
// always true the whole time so the clear button won't flicker)
|
|
495
|
+
setIsMousedOver(false);
|
|
496
|
+
} }), (hasEndAdornment && {
|
|
497
|
+
endAdornment: (jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, pr: 2, children: [isClearable &&
|
|
498
|
+
(isMousedOver || isFocused) &&
|
|
499
|
+
value != null &&
|
|
500
|
+
value != "" && (jsxRuntime.jsx(material.IconButton, { size: "small", onClick: function () { return onChange(undefined); }, tabIndex: -1, children: jsxRuntime.jsx(CloseIcon, { fontSize: "small" }) })), inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment] })),
|
|
477
501
|
})) });
|
|
478
502
|
var renderedOptions = React.useMemo(function () { return renderSelectOptions(options); }, [options]);
|
|
479
|
-
return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.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 && jsxRuntime.jsx(material.MenuItem, {})] })) }));
|
|
503
|
+
return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.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 && jsxRuntime.jsx(material.MenuItem, {})] })) }));
|
|
480
504
|
}
|
|
481
505
|
|
|
482
506
|
function findTextFor(value, options) {
|
|
@@ -501,20 +525,42 @@ function findTextFor(value, options) {
|
|
|
501
525
|
}
|
|
502
526
|
}
|
|
503
527
|
function MultiSelectFormField(_a) {
|
|
504
|
-
var _b
|
|
505
|
-
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,
|
|
506
|
-
var
|
|
507
|
-
? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)),
|
|
508
|
-
var
|
|
528
|
+
var _b;
|
|
529
|
+
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;
|
|
530
|
+
var _d = reactFinalForm.useField(name, __assign({ format: format, validate: required
|
|
531
|
+
? 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;
|
|
532
|
+
var _f = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.textField) !== null && _b !== void 0 ? _b : {}), textFieldSlotProps = _f.slotProps, remainingTextFieldProps = __rest(_f, ["slotProps"]);
|
|
509
533
|
// SlotProps can be an object or a callback; we only support the object form here.
|
|
510
534
|
var inputSlotProps = typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input) === "function"
|
|
511
535
|
? undefined
|
|
512
536
|
: textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.input;
|
|
513
|
-
var
|
|
514
|
-
|
|
515
|
-
|
|
537
|
+
var _g = React.useState(false), isMousedOver = _g[0], setIsMousedOver = _g[1];
|
|
538
|
+
var _h = React.useState(false), isFocused = _h[0], setIsFocused = _h[1];
|
|
539
|
+
var mergedSlotProps = __assign(__assign({}, textFieldSlotProps), { input: __assign(__assign(__assign({}, otherInputProps), inputSlotProps), { onFocus: function (event) {
|
|
540
|
+
var _a;
|
|
541
|
+
setIsFocused(true);
|
|
542
|
+
(_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
|
|
543
|
+
}, onBlur: function (event) {
|
|
544
|
+
var _a;
|
|
545
|
+
setIsFocused(false);
|
|
546
|
+
(_a = inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputSlotProps, event);
|
|
547
|
+
} }), select: __assign(__assign({}, textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select), { onClose: function (e) {
|
|
548
|
+
var _a, _b;
|
|
549
|
+
typeof (textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === "function"
|
|
550
|
+
? undefined
|
|
551
|
+
: (_b = (_a = textFieldSlotProps === null || textFieldSlotProps === void 0 ? void 0 : textFieldSlotProps.select) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a, e);
|
|
552
|
+
//When opening a select and then moving the mouse away, the input does not register as
|
|
553
|
+
// being unhovered. We can fudge this by setting the hover state to false when the options
|
|
554
|
+
// menu is closed. If the mouse is still over the input when the menu is closed, the hover state
|
|
555
|
+
// will be set to true automatically by the onMouseEnter event handler (and the focus state is
|
|
556
|
+
// always true the whole time so the clear button won't flicker)
|
|
557
|
+
setIsMousedOver(false);
|
|
558
|
+
}, endAdornment: (jsxRuntime.jsxs(material.Stack, { direction: "row", spacing: 1, pr: 2, children: [isClearable && (isMousedOver || isFocused) && (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsxRuntime.jsx(material.IconButton, { size: "small", onClick: function () { return onChange([]); }, tabIndex: -1, children: jsxRuntime.jsx(CloseIcon, { fontSize: "small" }) })), inputSlotProps === null || inputSlotProps === void 0 ? void 0 : inputSlotProps.endAdornment] })), multiple: true, renderValue: function (selected) { return (jsxRuntime.jsx(material.Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: selected.map(function (s, index) {
|
|
559
|
+
var _a;
|
|
560
|
+
return (jsxRuntime.jsxs(React.Fragment, { children: [index > 0 && ", ", (_a = findTextFor(s, options)) !== null && _a !== void 0 ? _a : "Unknown"] }, s));
|
|
561
|
+
}) })); } }) });
|
|
516
562
|
var renderedOptions = React.useMemo(function () { return renderCheckboxSelectOptions(options, value); }, [options, value]);
|
|
517
|
-
return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.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 && jsxRuntime.jsx(material.MenuItem, {})] })) }));
|
|
563
|
+
return (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.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 && jsxRuntime.jsx(material.MenuItem, {})] })) }));
|
|
518
564
|
}
|
|
519
565
|
|
|
520
566
|
var mustBeChecked = function (v) {
|