All files / Components DropDownItem.js

100% Statements 8/8
100% Branches 8/8
100% Functions 1/1
100% Lines 8/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64              1x                 4x   4x   4x   4x                                     4x         1x               1x                  
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
 
import Link from './Link';
import { WebAppsUXContext } from '../Context/index';
 
const DropDownItem = props => {
    const {
        active,
        align,
        shade,
        darkShade,
        className,
        children,
        ...attributes
    } = props;
 
    const { theme } = useContext(WebAppsUXContext);
 
    const color = (props.color === 'brand') ? theme : props.color;
 
    const classes = classNames(
        `text-${align}`,
        'py-2',
        'px-4',
        'outline-none',
        'focus:outline-none',
        'ease-linear',
        'transition-all',
        'duration-150',
        `text-${color}-${shade}`,
        `dark:text-${color}-${darkShade}`,
        'bg-transparent',
        'hover:font-semibold',
        `hover:bg-gray-100`,
        `dark:hover:bg-gray-600`,
        (active) ? 'font-semibold bg-gray-100 dark:bg-gray-600' : '',
        className
    );
 
    return (props.href !== undefined || props.to !== undefined)
            ? <Link className={classes} {...attributes}>{children}</Link>
            : <button type="button" className={classes} {...attributes}>{children}</button>
}
 
DropDownItem.propTypes = {
    active: PropTypes.bool,
    align: PropTypes.oneOf(['left', 'right', 'center']),
    color: PropTypes.string,
    shade: PropTypes.string,
    darkShade: PropTypes.string,
}
 
DropDownItem.defaultProps = {
    active: false,
    align: 'center',
    color: 'brand',
    shade: '600',
    darkShade: '400',
}
 
export default DropDownItem;