framework-entersol-web/src/js/forms/fields/checkmarks-select-field.jsx

Framework based on bootstrap 5

import React from "react";
import Field from "./field";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import ListItemText from "@mui/material/ListItemText";
import Select from "@mui/material/Select";
import Checkbox from "@mui/material/Checkbox";
import SelectField from "./select-field";

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
    PaperProps: {
        style: {
            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
            width: 250
        },
    },
};

export default class MultipleSelectCheckmarks extends SelectField {
    static jsClass = 'MultipleSelectCheckmarks';

    constructor(props) {
        super(props);
        this.state = {
            selectedValues: [],
            error: false,
        };
    }

    componentDidMount() {
        this.setState({ selectedValues: this.props.value || [] });
    }

    componentDidUpdate(prevProps) {
        if (prevProps.value !== this.props.value) {
            this.setState({ selectedValues: this.props.value || [] });
        }
    }

    onChange = (event) => {
        const {
            target: { value },
        } = event;

        this.setState(prevState => {
            const selectedValuesSet = new Set(prevState.selectedValues);

            if (selectedValuesSet.has(value)) {
                selectedValuesSet.delete(value);
            } else {
                selectedValuesSet.add(value);
            }

            const selectedValuesArray = Array.from(selectedValuesSet);

            return { selectedValues: selectedValuesArray };
        }, () => {
            this.returnData(this.state.selectedValues);
            this.validateSelection(this.state.selectedValues);
        });
    };


    validateSelection(selectedValues) {
        const hasError = this.isInvalid(selectedValues) || (this.props.required && selectedValues.length === 0);
        this.setState({ error: hasError });
        if (this.props.onValidation) {
            this.props.onValidation(hasError);
        }
    }


    get inputProps() {
        const props = super.inputProps;
        delete props.placeholder;
        props.className = props.className.replace('form-control', 'form-select');
        return props;
    }

    get inputNode() {
        const { name, disabled, required, options, errorMessage } = this.props;
        const { selectedValues, error } = this.state;

        return (
            <FormControl sx={{ m: 1, minWidth: 120 }} disabled={disabled} required={required} id={name} size="small">
                <Select
                    multiple
                    displayEmpty
                    value={selectedValues}
                    renderValue={() => {
                        if (selectedValues?.length === 0) {
                            return <em>{"Extensión"}</em>;
                        }
                        return selectedValues?.join(', ');
                    }}
                    onChange={this.onChange}
                    MenuProps={MenuProps}
                    {...this.inputProps}
                >
                    {this.renderOptions(options)}
                </Select>
                {(errorMessage || error) && <small className="text-danger">{errorMessage}</small>}
            </FormControl>
        );
    }

    renderOptions(options) {
        const { selectedValues } = this.state;
        return options.map(({ value, label }) => (
            <MenuItem
                key={value}
                value={value}
            >
                <Checkbox
                    checked={selectedValues.includes(value)}
                />
                <ListItemText primary={label} />
            </MenuItem>
        ));
    }
}