saagie-ui/src/react/core/organisms/dropdown/DropdownItem.js

Saagie UI from Saagie Design System

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { useDropdownContext } from './Dropdown';
import { FormCheck } from '../../atoms/formCheck/FormCheck';

const propTypes = {
  children: PropTypes.node,
  /**
   * 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,
  isActive: PropTypes.bool,
  isDisabled: PropTypes.bool,
  isLink: PropTypes.bool,
  isCheckbox: PropTypes.bool,
  onClick: PropTypes.func,
  onToggle: PropTypes.bool,
};

const defaultProps = {
  children: '',
  className: '',
  defaultClassName: 'sui-o-dropdown__link',
  isActive: false,
  isDisabled: false,
  isLink: false,
  isCheckbox: false,
  tag: 'button',
  onClick: () => {},
  onToggle: true,
};

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

export const DropdownItem = ({
  isDisabled,
  onClick,
  onToggle,
  tag: Tag,
  defaultClassName,
  className,
  isActive,
  isLink,
  isCheckbox,
  ...attributes
}) => {
  const { handleToggle } = useDropdownContext();

  const handleClick = (e) => {
    if (isDisabled) {
      e.preventDefault();
      return;
    }

    if (onClick) {
      onClick(e);
    }

    if (handleToggle) {
      handleToggle(e);
    }
  };

  const classes = classnames(
    defaultClassName,
    className,
    {
      'as--active': isActive,
      'as--disabled': isDisabled,
    }
  );

  return (
    <>
      {!isCheckbox
        ? (
          <Tag
            className={classes}
            tabIndex={isDisabled ? '-1' : '0'}
            onClick={handleClick}
            {...attributes}
          />
        )
        : (<FormCheck tabIndex={isDisabled ? '-1' : '0'} {...attributes} />)}
    </>
  );
};

DropdownItem.propTypes = propTypes;
DropdownItem.defaultProps = defaultProps;
DropdownItem.contextTypes = contextTypes;