@mskcc/carbon-react/es/components/ContentSwitcher/ContentSwitcher.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import PropTypes from 'prop-types';
import React__default from 'react';
import cx from 'classnames';
import deprecate from '../../prop-types/deprecate.js';
import { LayoutConstraint } from '../Layout/index.js';
import { composeEventHandlers } from '../../tools/events.js';
import { PrefixContext } from '../../internal/usePrefix.js';
import { matches } from '../../internal/keyboard/match.js';
import { getNextIndex } from '../../internal/keyboard/navigation.js';
import { ArrowRight, ArrowLeft } from '../../internal/keyboard/keys.js';

class ContentSwitcher extends React__default.Component {
  constructor() {
    super(...arguments);
    /**
     * The DOM references of child `<Switch>`.
     * @type {Array<Element>}
     * @private
     */
    _defineProperty(this, "_switchRefs", []);
    _defineProperty(this, "state", {
      selectedIndex: undefined
    });
    _defineProperty(this, "handleItemRef", index => ref => {
      this._switchRefs[index] = ref;
    });
    _defineProperty(this, "handleChildChange", data => {
      const {
        selectionMode
      } = this.props;
      // the currently selected child index
      const {
        selectedIndex
      } = this.state;
      // the newly selected child index
      const {
        index
      } = data;
      const {
        key
      } = data;
      if (matches(data, [ArrowRight, ArrowLeft])) {
        const nextIndex = getNextIndex(key, index, this.props.children?.length);
        const children = React__default.Children.toArray(this.props.children);
        if (selectionMode === 'manual') {
          const switchRef = this._switchRefs[nextIndex];
          switchRef && switchRef.focus();
        } else {
          this.setState({
            selectedIndex: nextIndex
          }, () => {
            if (typeof this.state.selectedIndex !== 'number') {
              return;
            }
            const child = children[this.state.selectedIndex];
            const switchRef = this._switchRefs[this.state.selectedIndex];
            switchRef && switchRef.focus();
            this.props.onChange({
              ...data,
              index: this.state.selectedIndex,
              name: child.props.name,
              text: child.props.text
            });
          });
        }
      } else if (selectedIndex !== index) {
        this.setState({
          selectedIndex: index
        }, () => {
          const switchRef = this._switchRefs[index];
          switchRef && switchRef.focus();
          this.props.onChange(data);
        });
      }
    });
  }
  static getDerivedStateFromProps(_ref, state) {
    let {
      selectedIndex
    } = _ref;
    const {
      prevSelectedIndex
    } = state;
    return prevSelectedIndex === selectedIndex ? null : {
      selectedIndex,
      prevSelectedIndex: selectedIndex
    };
  }
  render() {
    const prefix = this.context;
    const {
      children,
      className,
      light,
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      selectedIndex,
      // eslint-disable-line no-unused-vars
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      selectionMode,
      // eslint-disable-line no-unused-vars
      size,
      ...other
    } = this.props;
    const isIconOnly = React__default.Children?.map(children, child => {
      return child.type.displayName === 'IconSwitch';
    })?.every(val => val === true);
    const classes = cx(`${prefix}--content-switcher`, className, {
      [`${prefix}--content-switcher--light`]: light,
      [`${prefix}--content-switcher--${size}`]: size,
      // TODO: V12 - Remove this class
      [`${prefix}--layout--size-${size}`]: size,
      [`${prefix}--content-switcher--icon-only`]: isIconOnly
    });
    return /*#__PURE__*/React__default.createElement(LayoutConstraint, _extends({
      size: {
        default: 'md',
        min: 'sm',
        max: 'lg'
      }
    }, other, {
      className: classes,
      role: "tablist",
      onChange: undefined
    }), children && React__default.Children.map(children, (child, index) => /*#__PURE__*/React__default.cloneElement(child, {
      index,
      onClick: composeEventHandlers([this.handleChildChange, child.props.onClick]),
      onKeyDown: this.handleChildChange,
      selected: index === this.state.selectedIndex,
      ref: this.handleItemRef(index),
      size
    })));
  }
}
_defineProperty(ContentSwitcher, "propTypes", {
  /**
   * Pass in Switch components to be rendered in the ContentSwitcher
   */
  children: PropTypes.node,
  /**
   * Specify an optional className to be added to the container node
   */
  className: PropTypes.string,
  /**
   * `true` to use the light variant.
   */
  light: deprecate(PropTypes.bool, 'The `light` prop for `ContentSwitcher` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
  /**
   * Specify an `onChange` handler that is called whenever the ContentSwitcher
   * changes which item is selected
   */
  onChange: PropTypes.func.isRequired,
  /**
   * Specify a selected index for the initially selected content
   */
  selectedIndex: PropTypes.number,
  /**
   * Choose whether or not to automatically change selection on focus
   */
  selectionMode: PropTypes.oneOf(['automatic', 'manual']),
  /**
   * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
   */
  size: PropTypes.oneOf(['sm', 'md', 'lg'])
});
_defineProperty(ContentSwitcher, "contextType", PrefixContext);
_defineProperty(ContentSwitcher, "defaultProps", {
  selectedIndex: 0,
  selectionMode: 'automatic',
  onChange: () => {}
});

export { ContentSwitcher as default };