@shopify/polaris/dist/esm/components/CheckableButton/CheckableButton.js

Shopify’s product component library

import React$1, { useRef, useContext, useEffect } from 'react';
import { useFeatures } from '../../utilities/features/hooks.js';
import { classNames } from '../../utilities/css.js';
import { Checkbox as Checkbox$1 } from '../Checkbox/Checkbox.js';
import { ResourceListContext } from '../../utilities/resource-list/context.js';
import styles from './CheckableButton.scss.js';

function CheckableButton({
  accessibilityLabel,
  label = '',
  onToggleAll,
  selected,
  selectMode,
  plain,
  measuring,
  disabled,
  smallScreen
}) {
  var checkBoxRef = useRef(null);
  var {
    newDesignLanguage
  } = useFeatures();
  var {
    registerCheckableButtons
  } = useContext(ResourceListContext);
  var currentKey = 'bulkLg';

  if (plain) {
    currentKey = 'plain';
  } else if (smallScreen) {
    currentKey = 'bulkSm';
  }

  useEffect(() => {
    if (checkBoxRef.current && registerCheckableButtons) {
      registerCheckableButtons(currentKey, checkBoxRef.current);
    }
  }, [currentKey, registerCheckableButtons]);
  var className = plain ? classNames(styles.CheckableButton, styles['CheckableButton-plain'], newDesignLanguage && styles.newDesignLanguage) : classNames(styles.CheckableButton, newDesignLanguage && styles.newDesignLanguage, selectMode && styles['CheckableButton-selectMode'], selected && styles['CheckableButton-selected'], measuring && styles['CheckableButton-measuring']);
  return /*#__PURE__*/React$1.createElement("div", {
    className: className,
    onClick: onToggleAll
  }, /*#__PURE__*/React$1.createElement("div", {
    className: styles.Checkbox
  }, /*#__PURE__*/React$1.createElement(Checkbox$1, {
    label: accessibilityLabel,
    labelHidden: true,
    checked: selected,
    disabled: disabled,
    onChange: onToggleAll,
    ref: checkBoxRef
  })), /*#__PURE__*/React$1.createElement("span", {
    className: styles.Label
  }, label));
}

export { CheckableButton };