|
@@ -1,5 +1,3 @@
|
|
|
-import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
|
|
|
-import MessageToggleIcon from 'components/common/Icons/MessageToggleIcon';
|
|
|
import React from 'react';
|
|
|
|
|
|
interface Props {
|
|
@@ -8,30 +6,12 @@ interface Props {
|
|
|
}
|
|
|
|
|
|
const ListItem: React.FC<Props> = ({ accessors, data }) => {
|
|
|
- const [isOpen, setIsOpen] = React.useState(false);
|
|
|
-
|
|
|
- const toggleIsOpen = React.useCallback(() => {
|
|
|
- setIsOpen((prevState) => !prevState);
|
|
|
- }, []);
|
|
|
-
|
|
|
return (
|
|
|
- <>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <IconButtonWrapper onClick={toggleIsOpen}>
|
|
|
- <MessageToggleIcon isOpen={isOpen} />
|
|
|
- </IconButtonWrapper>
|
|
|
- </td>
|
|
|
- {accessors.map((accessor) => (
|
|
|
- <td key={accessor}>{data[accessor]}</td>
|
|
|
- ))}
|
|
|
- </tr>
|
|
|
- {isOpen && (
|
|
|
- <tr>
|
|
|
- <td colSpan={accessors.length + 1}>Expanding content</td>
|
|
|
- </tr>
|
|
|
- )}
|
|
|
- </>
|
|
|
+ <tr>
|
|
|
+ {accessors.map((accessor: string) => (
|
|
|
+ <td key={accessor}>{data[accessor]}</td>
|
|
|
+ ))}
|
|
|
+ </tr>
|
|
|
);
|
|
|
};
|
|
|
|