121 lines
3.0 KiB
JavaScript
121 lines
3.0 KiB
JavaScript
import { withTableValue } from 'client/hocs/withStore';
|
|
import colors from 'client/UIKit/colors';
|
|
import { Box, Flex } from 'client/UIKit/grid';
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
import { Button as AntButton } from 'antd';
|
|
|
|
const TableWrapper = styled(Box)`
|
|
table {
|
|
width: 100%;
|
|
text-align: left;
|
|
border-radius: 2px 2px 0 0;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
|
|
tr {
|
|
width: 100%;
|
|
:last-child {
|
|
td {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
:hover {
|
|
background: ${colors.white[25]};
|
|
}
|
|
}
|
|
|
|
th {
|
|
color: rgba(0, 0, 0, 0.85);
|
|
font-weight: 500;
|
|
text-align: left;
|
|
background: ${colors.white[25]};
|
|
transition: background 0.3s ease;
|
|
padding: 16px;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
width: 25% !important;
|
|
position: relative;
|
|
overflow-wrap: break-word;
|
|
border-bottom: 1px solid ${colors.white[50]};
|
|
}
|
|
|
|
td {
|
|
padding: 10px 16px;
|
|
& :first-child {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
// const DeleteRowButton = ({ onClick }) => (
|
|
// <Flex justifyContent="flex-end">
|
|
// <AntButton type="text" danger onClick={onClick}>
|
|
// Удалить
|
|
// </AntButton>
|
|
// </Flex>
|
|
// );
|
|
|
|
const Table = ({ name: tableName, columns, rows, features, actions }) => {
|
|
return (
|
|
<TableWrapper>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
{features && features.numerize && (
|
|
<th>{features.numerize.columnTitle || '#'}</th>
|
|
)}
|
|
{columns.map(({ title }, ci) => {
|
|
return <th key={ci}>{title}</th>;
|
|
})}
|
|
{/* {features && features.canDeleteRow && <th />} */}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((row, ri) => {
|
|
const rowProps = Object.keys(row);
|
|
return (
|
|
<tr key={ri}>
|
|
{features && features.numerize && <td>{ri + 1}</td>}
|
|
{rowProps.map((rowPropName, ki) => {
|
|
const columnIndex = columns.findIndex(
|
|
c => c.name === rowPropName,
|
|
);
|
|
const { Component } = columns[columnIndex];
|
|
const Element = withTableValue(Component)({
|
|
tableName,
|
|
rowIndex: ri,
|
|
propName: rowPropName,
|
|
...columns[columnIndex].props,
|
|
});
|
|
return (
|
|
<td key={ki}>
|
|
<Element />
|
|
</td>
|
|
);
|
|
})}
|
|
{/* {features && features.canDeleteRow && (
|
|
<td>
|
|
<DeleteRowButton
|
|
onClick={() => {
|
|
actions.deleteRow(ri);
|
|
}}
|
|
/>
|
|
</td>
|
|
)} */}
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</TableWrapper>
|
|
);
|
|
};
|
|
|
|
export default Table;
|