fix tailwind class

This commit is contained in:
Rodrigo Antinarelli 2020-06-25 18:45:28 -03:00
parent b0935e4fb6
commit eeeaa8d1da

View File

@ -1,4 +1,4 @@
import React, { useEffect, useState, useRef } from 'react'; import React, { useEffect, useCallback, useState, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
@ -8,18 +8,12 @@ const Dropdown = ({ children, showDropdownIcon, list }) => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const element = useRef(null); const element = useRef(null);
const DropdownItem = ({ title, icon, onClick, index }) => { const DropdownItem = useCallback(({ title, icon, onClick }) => {
const itemsAmount = list.length;
const isLastItem = itemsAmount === index + 1;
return ( return (
<div <div
key={title} key={title}
className={classnames( className={classnames(
'flex px-4 py-2 cursor-pointer items-center transition duration-300 hover:bg-secondary-main', 'flex px-4 py-2 cursor-pointer items-center transition duration-300 hover:bg-secondary-main border-b last:border-b-0 border-secondary-main'
{
'border-b border-secondary-main': !isLastItem,
}
)} )}
onClick={() => { onClick={() => {
setOpen(false); setOpen(false);
@ -30,18 +24,16 @@ const Dropdown = ({ children, showDropdownIcon, list }) => {
<Typography>{title}</Typography> <Typography>{title}</Typography>
</div> </div>
); );
}; }, []);
DropdownItem.defaultProps = { DropdownItem.defaultProps = {
icon: '', icon: '',
onClick: () => {},
}; };
DropdownItem.propTypes = { DropdownItem.propTypes = {
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
icon: PropTypes.string, icon: PropTypes.string,
onClick: PropTypes.func, onClick: PropTypes.func.isRequired,
index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
}; };
const renderTitleElement = () => { const renderTitleElement = () => {
@ -82,7 +74,6 @@ const Dropdown = ({ children, showDropdownIcon, list }) => {
icon={item.icon} icon={item.icon}
onClick={item.onClick} onClick={item.onClick}
key={idx} key={idx}
index={idx}
/> />
))} ))}
</div> </div>
@ -120,9 +111,9 @@ Dropdown.propTypes = {
PropTypes.shape({ PropTypes.shape({
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
icon: PropTypes.string, icon: PropTypes.string,
onClick: PropTypes.func, onClick: PropTypes.func.isRequired,
}) })
), ).isRequired,
}; };
export default Dropdown; export default Dropdown;