IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

MM-24743 Migrate DataRowGrid to functional component (#24795)

Browse Source 
* Migrate DataRowGrid to functional component

* Change renderCell to a functional component dataGridCell and memoize DataGridRow

* Adjust test snapshot to include memoised DataGridRow

* use component notation when using DataGridCell

---------

Co-authored-by: js029 <js029@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
js029 2023-10-19 12:11:53 +02:00 committed by GitHub
parent ec394c1162
commit c97731e4a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
webapp/channels/src/components/admin_console/data_grid/__snapshots__/data_grid.test.tsx.snap
View File

@ -61,7 +61,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot with
className="DataGrid_rows"
style={Object {}}
>
<DataGridRow
<Memo(DataGridRow)
columns={
Array [
Object {
@ -87,7 +87,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot with
}
}
/>
<DataGridRow
<Memo(DataGridRow)
columns={
Array [
Object {
@ -113,7 +113,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot with
}
}
/>
<DataGridRow
<Memo(DataGridRow)
columns={
Array [
Object {
@ -170,7 +170,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot with
className="DataGrid_rows"
style={Object {}}
>
<DataGridRow
<Memo(DataGridRow)
columns={
Array [
Object {
@ -193,7 +193,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot with
}
}
/>
<DataGridRow
<Memo(DataGridRow)
columns={
Array [
Object {
@ -216,7 +216,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot with
}
}
/>
<DataGridRow
<Memo(DataGridRow)
columns={
Array [
Object {

87
webapp/channels/src/components/admin_console/data_grid/data_grid_row.tsx
View File

@ -9,48 +9,57 @@ import type {Row, Column} from './data_grid';
import './data_grid.scss';
type Props = {
type DataGridRowProps = {
columns: Column[];
row: Row;
}
class DataGridRow extends React.Component<Props> {
renderCell(row: Row, column: Column) {
const style: CSSProperties = {};
if (column.width) {
style.flexGrow = column.width;
}
if (column.textAlign) {
style.textAlign = column.textAlign;
}
if (column.overflow) {
style.overflow = column.overflow;
}
return (
<div
key={column.field}
className={classNames('DataGrid_cell', column.className)}
style={style}
>
{row.cells[column.field]}
</div>
);
}
render() {
const cells = this.props.columns.map((col) => this.renderCell(this.props.row, col));
return (
<div
className='DataGrid_row'
onClick={this.props.row.onClick}
>
{cells}
</div>
);
}
type DataGridCellProps = {
column: Column;
row: Row;
}
export default DataGridRow;
const DataGridCell = ({row, column}: DataGridCellProps) => {
const style: CSSProperties = {};
if (column.width) {
style.flexGrow = column.width;
}
if (column.textAlign) {
style.textAlign = column.textAlign;
}
if (column.overflow) {
style.overflow = column.overflow;
}
return (
<div
key={column.field}
className={classNames('DataGrid_cell', column.className)}
style={style}
>
{row.cells[column.field]}
</div>
);
};
const DataGridRow = ({row, columns}: DataGridRowProps) => {
const cells = columns.map((column, index) => (
<DataGridCell
key={index}
row={row}
column={column}
/>
));
return (
<div
className='DataGrid_row'
onClick={row.onClick}
>
{cells}
</div>
);
};
export default React.memo(DataGridRow);