@talend/react-components/lib/VirtualizedList/HeaderCheckbox/HeaderCheckbox.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _Checkbox = _interopRequireDefault(require("../../Checkbox"));
var _HeaderCheckboxModule = _interopRequireDefault(require("./HeaderCheckbox.module.scss"));
var _reactI18next = require("react-i18next");
var _constants = _interopRequireDefault(require("../../constants"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * Header renderer that displays a "Select All" checkbox on header
 */function HeaderCheckbox({
  columnData
}) {
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.default);
  const {
    id,
    onToggleAll,
    collection,
    isToggleAllDisabled,
    isSelected
  } = columnData;
  const checked = (0, _react.useMemo)(() => collection.length > 0 && collection.every(isSelected), [collection, isSelected]);
  const partial = (0, _react.useMemo)(() => {
    if (!collection.length) {
      return false;
    }
    const selected = collection.filter(isSelected);
    return selected.length && selected.length < collection.length;
  }, [collection, isSelected]);
  const title = t('LIST_SELECT_ALL', {
    defaultValue: 'Select all'
  });
  const disabled = !collection.length || isToggleAllDisabled && isToggleAllDisabled(collection);
  if (!columnData.onToggleAll) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
    className: (0, _classnames.default)('tc-list-checkbox', _HeaderCheckboxModule.default['tc-list-checkbox']),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "checkbox",
      title: title,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
        htmlFor: id && `${id}-header-check`,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
          id: id && `${id}-header-check`,
          type: "checkbox",
          onChange: onToggleAll,
          checked: checked,
          intermediate: partial,
          disabled: disabled,
          "data-feature": "list.select_all"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: "sr-only",
          children: title
        })]
      })
    })
  });
}
HeaderCheckbox.displayName = 'VirtualizedList(HeaderCheckbox)';
HeaderCheckbox.propTypes = {
  // The custom props passed to <VirtualizedList.Content columnData={}>.
  columnData: _propTypes.default.shape({
    // The List id. This is used as the checkbox id prefix.
    id: _propTypes.default.string,
    // all items in list, used by onToggleAll callback.
    collection: _propTypes.default.array.isRequired,
    // The function is to check if toggle all is disabled.
    isToggleAllDisabled: _propTypes.default.func,
    // The function is to check if item is selected.
    isSelected: _propTypes.default.func.isRequired,
    // The onToggleAll callback triggered on header checkbox toggle.
    onToggleAll: _propTypes.default.func.isRequired
  })
};
var _default = exports.default = HeaderCheckbox;
//# sourceMappingURL=HeaderCheckbox.component.js.map