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

Saagie UI from Saagie Design System

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

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

const defaultProps = {
  tag: 'button',
  type: 'button',
  defaultClassName: 'sui-o-secondary-nav__toggle',
  className: '',
  onClick: () => {},
};

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

export class SecondaryNavToggle extends React.Component {
  onClick = (e) => {
    const {
      onClick,
    } = this.props;

    const {
      onToggle,
    } = this.context;

    if (onClick) {
      onClick(e);
    }

    onToggle(e);
  }

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

    const classes = classnames(
      defaultClassName,
      className
    );

    return (
      <Tag className={classes} onClick={this.onClick} {...attributes}>
        <Icon name="reduce-nav" />
      </Tag>
    );
  }
}

SecondaryNavToggle.propTypes = propTypes;
SecondaryNavToggle.defaultProps = defaultProps;
SecondaryNavToggle.contextTypes = contextTypes;