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

wix-style-react

import * as React from 'react';
import { SidebarNextContext } from './SidebarNextAPI';
import { st, classes } from '../Sidebar/Sidebar.st.css';
import { SidebarContentWrapper } from '../Sidebar/SidebarContentWrapper';
import { sidebarSkins } from '../Sidebar/constants';
import PropTypes from 'prop-types';
import { dataHooks } from './constants';

export default class SidebarNext extends React.PureComponent {
  static displayName = 'SidebarNext';

  static propTypes = {
    /** The dataHook of the Sidebar */
    dataHook: PropTypes.string,

    /** The classes of the Sidebar */
    className: PropTypes.string,

    /**  Sidebar menu children */
    children: PropTypes.node,

    /** Sets the skin of the Sidebar */
    skin: PropTypes.oneOf(['dark', 'light']),

    /**  Renders header element */
    header: PropTypes.node,

    /**  Renders footer element */
    footer: PropTypes.node,
  };

  static defaultProps = {
    skin: sidebarSkins.dark,
  };

  render() {
    const { skin, dataHook, selectedKey, children, header, footer } = this.props;
    const css = { ...classes, ...this.props.className };
    // TODO: remove when fully merging collapsible experiment and change in SidebarContentWrapper
    const collapsibleClasses = st(css.slider, { skin });
    const rootClasses = st(css.sideBar || classes.root, { skin });

    return (
      <SidebarNextContext.Provider value={{ selectedKey, skin }}>
        <div
          className={rootClasses}
          data-hook={dataHook}
          data-skin={skin}
          data-selected={selectedKey}
        >
          <div data-hook={dataHooks.header}>{header}</div>
          <div className={css.content}>
            <SidebarContentWrapper
              containerDataHook={'sidebar-content-wrapper'}
              containerClasses={collapsibleClasses}
              skin={skin}
            >
              {children}
            </SidebarContentWrapper>
          </div>
          <div data-hook={dataHooks.footer}>{footer}</div>
        </div>
      </SidebarNextContext.Provider>
    );
  }
}