design-react-kit/dist/Transfer/Source.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 SourceItem = ({ id, children }) => {
    const { sourceCandidates, setSourceCandidates } = useTransferContext();
    const handleChange = (e) => {
        if (e.target.checked) {
            setSourceCandidates([...new Set([...sourceCandidates, e.target.id])]);
        }
        else {
            setSourceCandidates(sourceCandidates.filter((item) => item !== e.target.id));
        }
    };
    const isChecked = sourceCandidates.includes(id);
    return (React.createElement(InternalItem, { checked: isChecked, id: id, onChange: handleChange }, children));
};
const Source = ({ children }) => {
    const { sourceItems, setSourceItems } = useTransferContext();
    const otherComponents = [];
    const childrenSource = 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 (!childrenSource)
            return;
        setSourceItems({ items: childrenSource, setOriginals: true });
    }, []);
    return (React.createElement("div", { className: 'it-transfer-wrapper source', "data-testid": 'transfer-source' },
        otherComponents,
        sourceItems.map(({ id, content }) => (React.createElement(SourceItem, { key: id, id: id }, content))),
        React.createElement("br", null)));
};
Source.Header = ({ children }) => {
    const { sourceItems, sourceCandidates, setSourceCandidates } = useTransferContext();
    const getStatus = () => {
        if (sourceCandidates.length === 0) {
            return { checked: false };
        }
        if (sourceItems.every((item) => sourceCandidates.includes(item.id))) {
            return { checked: true };
        }
        return { checked: false, className: 'semi-checked' };
    };
    return (React.createElement("div", { className: 'transfer-header', "data-testid": 'transfer-source-header' },
        React.createElement(SelectAllCheckbox, { ...getStatus(), onChange: (e) => {
                if (e.target.checked) {
                    setSourceCandidates([...new Set(sourceItems.map((item) => item.id))]);
                }
                else {
                    setSourceCandidates([]);
                }
            }, id: 'transfer-source-header', description: children ? 'Source' : undefined }, children ? children : 'Source')));
};
export { Source };
//# sourceMappingURL=Source.js.map