design-react-kit/dist/Transfer/Target.js

Componenti React per Bootstrap 5

import React, { useEffect } from 'react';
import { InternalItem, Item } from './Item';
import { SelectAllCheckbox } from './SelectAllCheckbox';
import { useTransferContext } from './useTransferContext';
const TargetItem = ({ id, children }) => {
    const { targetCandidates, setTargetCandidates } = useTransferContext();
    const handleChange = (e) => {
        if (e.target.checked) {
            setTargetCandidates([...new Set([...targetCandidates, e.target.id])]);
        }
        else {
            setTargetCandidates(targetCandidates.filter((item) => item !== e.target.id));
        }
    };
    const isChecked = targetCandidates.includes(id);
    return (React.createElement(InternalItem, { checked: isChecked, id: id, onChange: handleChange }, children));
};
const Target = ({ children }) => {
    const { targetItems, setTargetItems } = useTransferContext();
    const otherComponents = [];
    const childrenTarget = React.Children.map(children, (child) => {
        if (React.isValidElement(child) && child.type === Item) {
            const { id, children } = child.props;
            return { id, content: children };
        }
        otherComponents.push(child);
        return null;
    })?.filter((item) => item !== null);
    useEffect(() => {
        if (!childrenTarget)
            return;
        setTargetItems({ items: childrenTarget, setOriginals: true });
    }, []);
    return (React.createElement("div", { className: 'it-transfer-wrapper target', "data-testid": 'transfer-target' },
        otherComponents,
        targetItems.map(({ id, content }) => (React.createElement(TargetItem, { key: id, id: id }, content)))));
};
Target.Header = ({ children }) => {
    const { targetItems, targetCandidates, setTargetCandidates } = useTransferContext();
    const getStatus = () => {
        if (targetCandidates.length === 0) {
            return { checked: false };
        }
        if (targetItems.every((item) => targetCandidates.includes(item.id))) {
            return { checked: true };
        }
        return { checked: false, className: 'semi-checked' };
    };
    return (React.createElement("div", { className: 'transfer-header', "data-testid": 'transfer-target-header' },
        React.createElement(SelectAllCheckbox, { ...getStatus(), onChange: (e) => {
                if (e.target.checked) {
                    setTargetCandidates([...new Set(targetItems.map((item) => item.id))]);
                }
                else {
                    setTargetCandidates([]);
                }
            }, id: 'transfer-target-header', description: children ? 'Target' : undefined }, children ? children : 'Target')));
};
export { Target };
//# sourceMappingURL=Target.js.map