es-grid-template
Version:
es-grid-template
40 lines • 1.2 kB
JavaScript
import React, { useMemo } from "react";
import { Checkbox } from "rc-master-ui";
const CheckboxControl = props => {
const {
options,
value,
onChange
} = props;
const selected = useMemo(() => {
return value ? value : [];
}, [value]);
const list = useMemo(() => {
return options ? options : [];
}, [options]);
const onChangeValue = val => {
const findIndex = selected.findIndex(it => it === val);
if (findIndex > -1) {
const newVal = selected.filter(it => it !== val);
onChange?.(newVal);
} else {
const newVal = [...selected, val];
onChange?.(newVal);
}
};
return /*#__PURE__*/React.createElement("div", {
className: "d-flex flex-column gap-50",
style: {}
}, list.map((it, index) => {
return /*#__PURE__*/React.createElement("div", {
key: index,
className: "d-flex align-items-center"
}, /*#__PURE__*/React.createElement(Checkbox, {
checked: selected.includes(it.value),
type: "checkbox",
className: "cursor-pointer me-50",
onChange: () => onChangeValue(it.value)
}), /*#__PURE__*/React.createElement("span", null, it.label));
}));
};
export default CheckboxControl;