fix tailwind class
This commit is contained in:
parent
b0935e4fb6
commit
eeeaa8d1da
@ -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;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user