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

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

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

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var PropTypes = require('prop-types');
var React = require('react');
var cx = require('classnames');
var deprecate = require('../../prop-types/deprecate.js');
var index = require('../Layout/index.js');
var events = require('../../tools/events.js');
var usePrefix = require('../../internal/usePrefix.js');
var match = require('../../internal/keyboard/match.js');
var navigation = require('../../internal/keyboard/navigation.js');
var keys = require('../../internal/keyboard/keys.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);

class ContentSwitcher extends React__default["default"].Component {
  constructor() {
    super(...arguments);
    /**
     * The DOM references of child `<Switch>`.
     * @type {Array<Element>}
     * @private
     */
    _rollupPluginBabelHelpers.defineProperty(this, "_switchRefs", []);
    _rollupPluginBabelHelpers.defineProperty(this, "state", {
      selectedIndex: undefined
    });
    _rollupPluginBabelHelpers.defineProperty(this, "handleItemRef", index => ref => {
      this._switchRefs[index] = ref;
    });
    _rollupPluginBabelHelpers.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 (match.matches(data, [keys.ArrowRight, keys.ArrowLeft])) {
        const nextIndex = navigation.getNextIndex(key, index, this.props.children?.length);
        const children = React__default["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["default"].Children?.map(children, child => {
      return child.type.displayName === 'IconSwitch';
    })?.every(val => val === true);
    const classes = cx__default["default"](`${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["default"].createElement(index.LayoutConstraint, _rollupPluginBabelHelpers["extends"]({
      size: {
        default: 'md',
        min: 'sm',
        max: 'lg'
      }
    }, other, {
      className: classes,
      role: "tablist",
      onChange: undefined
    }), children && React__default["default"].Children.map(children, (child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
      index,
      onClick: events.composeEventHandlers([this.handleChildChange, child.props.onClick]),
      onKeyDown: this.handleChildChange,
      selected: index === this.state.selectedIndex,
      ref: this.handleItemRef(index),
      size
    })));
  }
}
_rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "propTypes", {
  /**
   * Pass in Switch components to be rendered in the ContentSwitcher
   */
  children: PropTypes__default["default"].node,
  /**
   * Specify an optional className to be added to the container node
   */
  className: PropTypes__default["default"].string,
  /**
   * `true` to use the light variant.
   */
  light: deprecate["default"](PropTypes__default["default"].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__default["default"].func.isRequired,
  /**
   * Specify a selected index for the initially selected content
   */
  selectedIndex: PropTypes__default["default"].number,
  /**
   * Choose whether or not to automatically change selection on focus
   */
  selectionMode: PropTypes__default["default"].oneOf(['automatic', 'manual']),
  /**
   * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
   */
  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
});
_rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "contextType", usePrefix.PrefixContext);
_rollupPluginBabelHelpers.defineProperty(ContentSwitcher, "defaultProps", {
  selectedIndex: 0,
  selectionMode: 'automatic',
  onChange: () => {}
});

exports["default"] = ContentSwitcher;