78 lines
2.6 KiB
JavaScript
78 lines
2.6 KiB
JavaScript
import React from 'react';
|
|
import { FlexRow, Svg } from '../../utils/containers';
|
|
import theme from '../../utils/theme';
|
|
import ColumnFilterIcon from '../../components/generic/ColumnFilterIcon';
|
|
import pensilIco from '../../assets/pencil_ico.svg';
|
|
import deleteIco from '../../assets/delete_ico.svg';
|
|
import NewTableStyle from './styles/NewTableStyle';
|
|
import RowsBackgroundStyle from './styles/RowsBackgroundStyle';
|
|
import SortButtonContainerStyle from './styles/SortButtonContainerStyle';
|
|
|
|
const NewTable = ({ items, orderedKeys }) => {
|
|
return (
|
|
<NewTableStyle>
|
|
<tr className="NewTableStyle__tr-header">
|
|
{orderedKeys.map((keyValue, i) => {
|
|
return (
|
|
<th key={`table-header-${i}`} className="NewTableStyle__th">
|
|
{keyValue}
|
|
<SortButtonContainerStyle as="span" column={keyValue}>
|
|
<ColumnFilterIcon index={1} active={2} rotateIcon={false} />
|
|
</SortButtonContainerStyle>
|
|
</th>
|
|
);
|
|
})}
|
|
<FlexRow className="NewTableStyle__line" as="td" />
|
|
</tr>
|
|
{items.map((item, i) => {
|
|
return (
|
|
<tr className="NewTableStyle__tr">
|
|
{orderedKeys.map((keyValue, j) => {
|
|
return (
|
|
<td key={`table-item-${i}-${j}`} className="NewTableStyle__td">
|
|
{item[keyValue]}
|
|
</td>
|
|
);
|
|
})}
|
|
<FlexRow className="NewTableStyle__row-footer">
|
|
<FlexRow className="NewTableStyle__tags-container">
|
|
{item.tags.map((tag, j) => {
|
|
return (
|
|
<FlexRow
|
|
className="NewTableStyle__tag"
|
|
key={`submissionTag-${i}-${j}`}
|
|
>
|
|
{tag}
|
|
</FlexRow>
|
|
);
|
|
})}
|
|
</FlexRow>
|
|
<FlexRow gap="12px">
|
|
<Svg
|
|
src={pensilIco}
|
|
backgroundColor={theme.colors.dark}
|
|
cursor="pointer"
|
|
size="cover"
|
|
width="16px"
|
|
height="16px"
|
|
/>
|
|
<Svg
|
|
src={deleteIco}
|
|
backgroundColor={theme.colors.dark}
|
|
cursor="pointer"
|
|
size="cover"
|
|
width="16px"
|
|
height="16px"
|
|
/>
|
|
</FlexRow>
|
|
</FlexRow>
|
|
<RowsBackgroundStyle i={i} />
|
|
</tr>
|
|
);
|
|
})}
|
|
</NewTableStyle>
|
|
);
|
|
};
|
|
|
|
export default NewTable;
|