saagie-ui/src/react/core/organisms/secondaryNav/SecondaryNav.js

Saagie UI from Saagie Design System

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { dropUnwantedProps } from '../../../helpers';

const propTypes = {
  children: PropTypes.node.isRequired,
  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,
  defaultClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
  className: PropTypes.string,
  onToggle: PropTypes.func.isRequired,
  onHandlePanel: PropTypes.func,
  level: PropTypes.number,
  panel: PropTypes.string,
};

const defaultProps = {
  tag: 'div',
  defaultClassName: 'sui-o-secondary-nav',
  className: '',
  onHandlePanel: () => {},
  level: 1,
  panel: 'general',
};

const childContextTypes = {
  onToggle: PropTypes.func.isRequired,
  onHandlePanel: PropTypes.func,
};

export class SecondaryNav extends React.Component {
  getChildContext() {
    const {
      onToggle,
      onHandlePanel,
    } = this.props;

    return {
      onToggle,
      onHandlePanel,
    };
  }

  render() {
    const {
      tag: Tag,
      defaultClassName,
      className,
      level,
      ...attributes
    } = dropUnwantedProps(this.props, ['onToggle', 'onHandlePanel', 'panel']);

    const classes = classnames(
      defaultClassName,
      className,
      level === 2 ? 'as--show-level-two' : '',
      level === 3 ? 'as--show-level-three' : '',
    );

    return (
      <Tag
        className={classes}
        {...attributes}
      />
    );
  }
}

SecondaryNav.propTypes = propTypes;
SecondaryNav.defaultProps = defaultProps;
SecondaryNav.childContextTypes = childContextTypes;