mui-extended
Version:
Extended UI Components built on Material UI
50 lines (49 loc) • 2.6 kB
JavaScript
import { __assign, __rest, __spreadArray } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Checkbox, FormGroup } from "@mui/material";
import { createContext, forwardRef, useContext, useMemo } from "react";
import { withFormField } from "../FormField";
import { withFormInputControl } from "./FormInputControl";
var CheckboxGroupContext = createContext(null);
export var useCheckboxGroup = function () {
return useContext(CheckboxGroupContext);
};
export var CheckboxGroup = function (_a) {
var name = _a.name, values = _a.values, onChange = _a.onChange, children = _a.children, props = __rest(_a, ["name", "values", "onChange", "children"]);
var _onChange = useMemo(function () { return function (event) {
var value = event.target.value;
var checked = event.target.checked;
var _values = __spreadArray([], (values || []), true);
_values = _values.filter(function (v) { return v != value; });
if (checked) {
_values.push(value);
}
onChange(event, _values);
}; }, [onChange, values]);
return (_jsx(CheckboxGroupContext.Provider, { value: { name: name, values: values, onChange: _onChange }, children: _jsx(FormGroup, __assign({}, props, { children: children })) }));
};
export var FormCheckbox = forwardRef(function CheckboxWithGroup(_a, ref) {
var _b;
var value = _a.value, props = __rest(_a, ["value"]);
var groupContext = useCheckboxGroup();
if (!groupContext) {
throw new Error("FormCheckbox is used without CheckboxGroup");
}
var checked = ((_b = groupContext.values) === null || _b === void 0 ? void 0 : _b.filter(function (v) { return v == value; }).length) > 0;
return (_jsx(Checkbox, __assign({ value: value, checked: checked, onChange: groupContext.onChange }, props, { ref: ref })));
});
var ControlledCheckboxGroup = function (_a) {
var name = _a.name, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, children = _a.children, props = __rest(_a, ["name", "value", "onChange", "onBlur", "children"]);
var _onChange = useMemo(function () {
return function (event, values) {
onChange(name, values);
};
}, [onChange, name]);
var _onBlur = useMemo(function () {
return function () {
onBlur(name);
};
}, [onBlur, name]);
return (_jsx(CheckboxGroup, __assign({}, props, { name: name, values: value, onChange: _onChange, onBlur: _onBlur, children: children })));
};
export var FormCheckboxGroup = withFormField(withFormInputControl(ControlledCheckboxGroup));