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

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import { SidebarNextContext } from '../SidebarNext/SidebarNextAPI';
import { st, classes } from './SidebarItemNext.st.css';
import { withFocusable } from 'wix-ui-core/dist/src/hocs/Focusable';
import { dataHooks } from './constants';
import { sidebarSkins } from '../Sidebar/constants';
import Text from '../Text';

/** An item for the section within the sidebar */
class SidebarItemNext extends React.PureComponent {
  static displayName = 'SidebarItemNext';

  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,
    /** An element to appear at the end of the text */
    suffix: PropTypes.node,
    /** Indicates whether to display the item as disabled */
    disabled: PropTypes.bool,
    /** 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,
  };

  renderSuffix = () => {
    const { suffix, disabled } = this.props;
    return !disabled && suffix && (
        <span data-hook={dataHooks.suffix} className={classes.suffix}>
          {suffix}
        </span>
      );
  };

  render() {
    const {
      dataHook,
      children,
      disabled,
      onClick,
      className,
      focusableOnFocus,
      focusableOnBlur,
      itemKey,
    } = this.props;

    return (
      <SidebarNextContext.Consumer>
        {context => {
          const selected = context && context.selectedKey === itemKey;
          const skin = context && context.skin;

          return (
            <button
              data-hook={dataHook}
              data-selected={selected}
              data-skin={skin}
              data-disabled={disabled}
              onClick={onClick}
              onFocus={focusableOnFocus}
              onBlur={focusableOnBlur}
              disabled={disabled}
              type="button"
              className={st(
                classes.root,
                {
                  selected,
                  disabled,
                  skin,
                },
                className,
              )}
            >
              <Text
                data-hook={dataHooks.title}
                className={classes.text}
                size="small"
                weight={'normal'}
                secondary={skin === sidebarSkins.light}
                light={skin === sidebarSkins.dark}
                skin={disabled && 'disabled'}
              >
                {children}
              </Text>
              {this.renderSuffix()}
            </button>
          );
        }}
      </SidebarNextContext.Consumer>
    );
  }
}

export default withFocusable(SidebarItemNext);