wix-style-react/src/SidebarSubMenuNext/SidebarSubMenuNext.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import SidebarItemNext from '../SidebarItemNext/SidebarItemNext';
import ChevronRight from 'wix-ui-icons-common/ChevronRight';
import { dataHooks } from './constants';

/** A sub menu item in the sidebar */
export default class SidebarSubMenuNext extends React.PureComponent {
  static displayName = 'SidebarSubMenuNext';

  static propTypes = {
    /** Applied as data-hook HTML attribute that can be used in the tests */
    dataHook: PropTypes.string,
    /** A css class to be applied to the component's root element */
    className: PropTypes.string,
    /** Indicates whether to display the item as disabled */
    disabled: PropTypes.bool,
    /** render as some other component or DOM tag */
    as: PropTypes.oneOfType([
      PropTypes.func,
      PropTypes.object,
      PropTypes.string,
    ]),
    /** A callback to be triggered on click */
    onClick: PropTypes.func,
    /** unique identifier per item, used to mark it for navigation and selection */
    itemKey: PropTypes.string,
  };

  _getChevron = () => {
    return <ChevronRight data-hook={dataHooks.chevronRight} />;
  };

  render() {
    const { children } = this.props;

    return (
      <SidebarItemNext
        data-expanded={false}
        suffix={this._getChevron()}
        {...this.props}
      >
        {children}
      </SidebarItemNext>
    );
  }
}