wix-style-react/dist/es/src/SelectorList/ToggleAllCheckbox/ToggleAllCheckbox.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import Checkbox from '../../Checkbox';
import { dataHooks } from '../SelectorList.helpers';
const ToggleAllCheckbox = ({ selectAllText = 'Select all', deselectAllText = 'Deselect all', enabledItemsAmount, selectedEnabledItemsAmount, selectAll, deselectAll, size = 'medium', dataHook = dataHooks.toggleAllCheckbox, }) => {
    const cases = {
        select: {
            text: selectAllText,
            number: enabledItemsAmount,
            onChange: selectAll,
            indeterminate: false,
            checked: false,
        },
        deselect: {
            text: deselectAllText,
            number: selectedEnabledItemsAmount,
            onChange: deselectAll,
            indeterminate: selectedEnabledItemsAmount < enabledItemsAmount,
            checked: true,
        },
    };
    const { text, number: num, onChange, checked, indeterminate, } = selectedEnabledItemsAmount ? cases.deselect : cases.select;
    return (React.createElement(Checkbox, { dataHook: dataHook, checked: checked, onChange: onChange, indeterminate: indeterminate, size: size }, ` ${text} (${num})`));
};
ToggleAllCheckbox.propTypes = {
    /** string to be displayed in footer when `multiple` prop is used and no items are selected  */
    selectAllText: PropTypes.string,
    /** string to be displayed in footer when `multiple` prop is used and some or all items ar selected */
    deselectAllText: PropTypes.string,
    /** the amount of items which are not disabled */
    enabledItemsAmount: PropTypes.number.isRequired,
    /** an array of not disabled items that are marked as selected */
    selectedEnabledItemsAmount: PropTypes.number.isRequired,
    /** a function that selects all non-disabled items */
    selectAll: PropTypes.func.isRequired,
    /** a function that deselects all non-disabled items */
    deselectAll: PropTypes.func.isRequired,
    /** Controls the size of the checkbox label.  */
    size: PropTypes.oneOf(['small', 'medium']),
    /** applied as data-hook HTML attribute that can be used to create driver in testing */
    dataHook: PropTypes.string,
};
export default ToggleAllCheckbox;
//# sourceMappingURL=ToggleAllCheckbox.js.map