mirror of https://github.com/apache/superset.git
fix(altered-modal): make specified text fields wrap in table (#18822)
* fix(altered-modal): make all text fields wrap * fix(altered-modal): limit the wrap text in particular column * fix(altered-modal): make to update the unit test * fix(altered-modal): make to fix the type of columnsForWrapText * fix(alerted-modal): make to fix the type of columnsForWrapTest with string type
This commit is contained in:
parent
fd757c4aa4
commit
220c46131e
|
@ -165,6 +165,8 @@ export default class AlteredSliceTag extends React.Component {
|
|||
Header: 'After',
|
||||
},
|
||||
];
|
||||
// set the wrap text in the specific columns.
|
||||
const columnsForWrapText = ['Control', 'Before', 'After'];
|
||||
|
||||
return (
|
||||
<TableView
|
||||
|
@ -172,6 +174,7 @@ export default class AlteredSliceTag extends React.Component {
|
|||
data={this.state.rows}
|
||||
pageSize={50}
|
||||
className="table-condensed"
|
||||
columnsForWrapText={columnsForWrapText}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -31,6 +31,7 @@ interface TableCollectionProps {
|
|||
columns: TableInstance['column'][];
|
||||
loading: boolean;
|
||||
highlightRowId?: number;
|
||||
columnsForWrapText?: string[];
|
||||
}
|
||||
|
||||
export const Table = styled.table`
|
||||
|
@ -192,13 +193,18 @@ export const Table = styled.table`
|
|||
.table-cell {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 320px;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
&:first-of-type {
|
||||
padding-left: ${({ theme }) => theme.gridUnit * 4}px;
|
||||
}
|
||||
&__wrap {
|
||||
white-space: normal;
|
||||
}
|
||||
&__nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading-shimmer {
|
||||
|
@ -224,6 +230,7 @@ export default React.memo(
|
|||
rows,
|
||||
loading,
|
||||
highlightRowId,
|
||||
columnsForWrapText,
|
||||
}: TableCollectionProps) => (
|
||||
<Table
|
||||
{...getTableProps()}
|
||||
|
@ -301,15 +308,23 @@ export default React.memo(
|
|||
>
|
||||
{row.cells.map(cell => {
|
||||
if (cell.column.hidden) return null;
|
||||
|
||||
const columnCellProps = cell.column.cellProps || {};
|
||||
const isWrapText =
|
||||
columnsForWrapText &&
|
||||
columnsForWrapText.includes(cell.column.Header as string);
|
||||
|
||||
return (
|
||||
<td
|
||||
data-test="table-row-cell"
|
||||
className={cx('table-cell', {
|
||||
'table-cell-loader': loading,
|
||||
[cell.column.size || '']: cell.column.size,
|
||||
})}
|
||||
className={cx(
|
||||
`table-cell table-cell__${
|
||||
isWrapText ? 'wrap' : 'nowrap'
|
||||
}`,
|
||||
{
|
||||
'table-cell-loader': loading,
|
||||
[cell.column.size || '']: cell.column.size,
|
||||
},
|
||||
)}
|
||||
{...cell.getCellProps()}
|
||||
{...columnCellProps}
|
||||
>
|
||||
|
|
|
@ -43,16 +43,40 @@ InteractiveTableView.args = {
|
|||
accessor: 'name',
|
||||
Header: 'Name',
|
||||
},
|
||||
{
|
||||
accessor: 'summary',
|
||||
Header: 'Summary',
|
||||
},
|
||||
],
|
||||
data: [
|
||||
{ id: 123, age: 27, name: 'Emily' },
|
||||
{ id: 321, age: 10, name: 'Kate' },
|
||||
{
|
||||
id: 123,
|
||||
age: 27,
|
||||
name: 'Emily',
|
||||
summary:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue.',
|
||||
},
|
||||
{
|
||||
id: 321,
|
||||
age: 10,
|
||||
name: 'Kate',
|
||||
summary:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue.',
|
||||
},
|
||||
{
|
||||
id: 321,
|
||||
age: 10,
|
||||
name: 'John Smith',
|
||||
summary:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue.',
|
||||
},
|
||||
],
|
||||
initialSortBy: [{ id: 'name', desc: true }],
|
||||
noDataText: 'No data here',
|
||||
pageSize: 1,
|
||||
showRowCount: true,
|
||||
withPagination: true,
|
||||
columnsForWrapText: ['Summary'],
|
||||
};
|
||||
|
||||
InteractiveTableView.argTypes = {
|
||||
|
|
|
@ -191,3 +191,21 @@ test('should render the right page', () => {
|
|||
expect(screen.getByText('Kate')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Emily')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should render the right wrap content text by columnsForWrapText', () => {
|
||||
const props = {
|
||||
...mockedProps,
|
||||
columnsForWrapText: ['Name'],
|
||||
};
|
||||
render(<TableView {...props} />);
|
||||
|
||||
expect(screen.getAllByTestId('table-row-cell')[0]).toHaveClass(
|
||||
'table-cell__nowrap',
|
||||
);
|
||||
expect(screen.getAllByTestId('table-row-cell')[1]).toHaveClass(
|
||||
'table-cell__nowrap',
|
||||
);
|
||||
expect(screen.getAllByTestId('table-row-cell')[2]).toHaveClass(
|
||||
'table-cell__wrap',
|
||||
);
|
||||
});
|
||||
|
|
|
@ -50,6 +50,7 @@ export interface TableViewProps {
|
|||
showRowCount?: boolean;
|
||||
scrollTable?: boolean;
|
||||
small?: boolean;
|
||||
columnsForWrapText?: string[];
|
||||
}
|
||||
|
||||
const EmptyWrapper = styled.div`
|
||||
|
@ -127,6 +128,7 @@ const TableView = ({
|
|||
noDataText,
|
||||
showRowCount = true,
|
||||
serverPagination = false,
|
||||
columnsForWrapText,
|
||||
onServerPagination = () => {},
|
||||
...props
|
||||
}: TableViewProps) => {
|
||||
|
@ -204,6 +206,7 @@ const TableView = ({
|
|||
rows={content}
|
||||
columns={columns}
|
||||
loading={loading}
|
||||
columnsForWrapText={columnsForWrapText}
|
||||
/>
|
||||
{isEmpty && (
|
||||
<EmptyWrapperComponent>
|
||||
|
|
Loading…
Reference in New Issue