@carbon/react/lib/components/ButtonSet/ButtonSet.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var PropTypes = require('prop-types');
var cx = require('classnames');
var usePrefix = require('../../internal/usePrefix.js');
var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');

const buttonOrder = kind => ({
  ghost: 1,
  'danger--ghost': 2,
  tertiary: 3,
  danger: 5,
  primary: 6
})[kind] ?? 4;
const getButtonKind = element => {
  if (/*#__PURE__*/React.isValidElement(element) && element.props && typeof element.props === 'object') {
    const props = element.props;
    return props.kind ?? 'primary';
  }
  return 'primary';
};
const ButtonSet = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    children,
    className,
    fluid,
    stacked,
    ...rest
  } = props;
  const prefix = usePrefix.usePrefix();
  const fluidInnerRef = React.useRef(null);
  const [isStacked, setIsStacked] = React.useState(false);
  const [sortedChildren, setSortedChildren] = React.useState(React.Children.toArray(children));

  /**
   * Used to determine if the buttons are currently stacked
   */
  useIsomorphicEffect.default(() => {
    const checkStacking = () => {
      let newIsStacked = stacked || false;
      if (fluidInnerRef && fluidInnerRef.current) {
        const computedStyle = window.getComputedStyle(fluidInnerRef.current);
        newIsStacked = computedStyle?.getPropertyValue?.('--flex-direction') === 'column';
      }
      return newIsStacked;
    };

    /* initial value not dependant on observer */
    setIsStacked(checkStacking());
    if (!fluidInnerRef.current) {
      return;
    }
    const resizeObserver = new ResizeObserver(() => {
      setIsStacked(checkStacking());
    });
    resizeObserver.observe(fluidInnerRef.current);
    return () => resizeObserver.disconnect();
  }, [isStacked, stacked]);
  React.useEffect(() => {
    const newSortedChildren = React.Children.toArray(children);
    newSortedChildren.sort((a, b) => {
      return (buttonOrder(getButtonKind(a)) - buttonOrder(getButtonKind(b))) * (isStacked ? -1 : 1);
    });
    setSortedChildren(newSortedChildren);

    // adding sortedChildren to deps causes an infinite loop
  }, [children, isStacked]);
  const buttonSetClasses = cx(className, `${prefix}--btn-set`, {
    [`${prefix}--btn-set--stacked`]: isStacked,
    [`${prefix}--btn-set--fluid`]: fluid
  });
  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
    className: buttonSetClasses,
    ref: ref
  }), fluid ? /*#__PURE__*/React.createElement("div", {
    ref: fluidInnerRef,
    className: cx(`${prefix}--btn-set__fluid-inner`, {
      [`${prefix}--btn-set__fluid-inner--auto-stack`]: true
    })
  }, sortedChildren) : children);
});
ButtonSet.displayName = 'ButtonSet';
ButtonSet.propTypes = {
  /**
   * Specify the content of your ButtonSet
   */
  children: PropTypes.node,
  /**
   * Specify an optional className to be added to your ButtonSet
   */
  className: PropTypes.string,
  /**
   * fluid: button set resize to the size of the container up to a maximum dependant on the
   * number of buttons.
   */
  fluid: PropTypes.bool,
  /**
   * Specify the button arrangement of the set (vertically stacked or
   * horizontal) - ignored when fluid is true
   */
  stacked: PropTypes.bool
};

exports.default = ButtonSet;