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';

var ToggleAllCheckbox = function ToggleAllCheckbox(_ref) {
  var selectAllText = _ref.selectAllText,
      deselectAllText = _ref.deselectAllText,
      enabledItemsAmount = _ref.enabledItemsAmount,
      selectedEnabledItemsAmount = _ref.selectedEnabledItemsAmount,
      selectAll = _ref.selectAll,
      deselectAll = _ref.deselectAll,
      dataHook = _ref.dataHook;
  var cases = {
    select: {
      text: selectAllText,
      number: enabledItemsAmount,
      onChange: selectAll,
      indeterminate: false,
      checked: false
    },
    deselect: {
      text: deselectAllText,
      number: selectedEnabledItemsAmount,
      onChange: deselectAll,
      indeterminate: selectedEnabledItemsAmount < enabledItemsAmount,
      checked: true
    }
  };

  var _ref2 = selectedEnabledItemsAmount ? cases.deselect : cases.select,
      text = _ref2.text,
      num = _ref2.number,
      onChange = _ref2.onChange,
      checked = _ref2.checked,
      indeterminate = _ref2.indeterminate;

  return /*#__PURE__*/React.createElement(Checkbox, {
    dataHook: dataHook,
    checked: checked,
    onChange: onChange,
    indeterminate: indeterminate
  }, " ".concat(text, " (").concat(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,

  /** applied as data-hook HTML attribute that can be used to create driver in testing */
  dataHook: PropTypes.string
};
ToggleAllCheckbox.defaultProps = {
  selectAllText: 'Select All',
  deselectAllText: 'Deselect All',
  dataHook: dataHooks.toggleAllCheckbox
};
export default ToggleAllCheckbox;