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

refactor: convert DataGridHeader into function component (#24747)

Browse Source 
* refactor: convert DataGridHeader into function component

* fix: core review

* split into 2 components

* add key for maped items

* lint firx

* fix missing parentheses

* fix bracket

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Artur Bauer 2023-10-19 11:00:24 +02:00 committed by GitHub
parent 4eb30f517c
commit ec394c1162
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
webapp/channels/src/components/admin_console/data_grid/data_grid_header.tsx
View File

@ -8,35 +8,41 @@ import type {Column} from './data_grid';
import './data_grid.scss';
type HeaderElementProps = {
col: Column;
}
const HeaderElement = ({col}: HeaderElementProps) => {
const style: CSSProperties = {};
if (col.width) {
style.flexGrow = col.width;
}
return (
<div
key={col.field}
className='DataGrid_cell'
style={style}
>
{col.name}
</div>
);
};
export type Props = {
columns: Column[];
}
class DataGridHeader extends React.Component<Props> {
renderHeaderElement(col: Column) {
const style: CSSProperties = {};
if (col.width) {
style.flexGrow = col.width;
}
return (
<div
key={col.field}
className='DataGrid_cell'
style={style}
>
{col.name}
</div>
);
}
render() {
return (
<div className='DataGrid_header'>
{this.props.columns.map((col) => this.renderHeaderElement(col))}
</div>
);
}
}
const DataGridHeader = ({columns}: Props) => {
return (
<div className='DataGrid_header'>
{columns.map((col) => (
<HeaderElement
col={col}
key={col.field}
/>
))}
</div>
);
};
export default DataGridHeader;