-class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState> {
- state: DataExplorerState = {
- columns: [
- {
- name: "Name",
- selected: true,
- render: item => this.renderName(item)
- },
- {
- name: "Status",
- selected: true,
- render: item => renderStatus(item.status)
- },
- {
- name: "Type",
- selected: true,
- render: item => renderType(item.type)
- },
- {
- name: "Owner",
- selected: true,
- render: item => renderOwner(item.owner)
- },
- {
- name: "File size",
- selected: true,
- render: (item) => renderFileSize(item.fileSize)
- },
- {
- name: "Last modified",
- selected: true,
- render: item => renderDate(item.lastModified)
- },
- {
- name: "Actions",
- selected: true,
- configurable: false,
- renderHeader: () => null,
- render: renderItemActions
- }
- ]
- };
-
- render() {
- return <Paper>
- <Toolbar>
- <Grid container justify="flex-end">
- <ColumnSelector
- columns={this.state.columns}
- onColumnToggle={this.toggleColumn} />
- </Grid>
- </Toolbar>
- <DataTable
- columns={this.state.columns}
- items={this.props.items} />
- <Toolbar />
- </Paper>;
- }
-
- toggleColumn = (column: DataColumn<DataItem>) => {
- const index = this.state.columns.indexOf(column);
- const columns = this.state.columns.slice(0);
- columns.splice(index, 1, { ...column, selected: !column.selected });
- this.setState({ columns });
- }
-
- renderName = (item: DataItem) =>
- <Grid
- container
- alignItems="center"
- wrap="nowrap"
- spacing={16}
- onClick={() => this.props.onItemClick(item)}>
- <Grid item>
- {renderIcon(item)}
- </Grid>
- <Grid item>
- <Typography color="primary">
- {item.name}
- </Typography>
- </Grid>
- </Grid>
+const mapDispatchToProps = () => {
+ return (dispatch: Dispatch, { id, onRowClick, onRowDoubleClick, onContextMenu }: Props) => ({
+ onSetColumns: (columns: DataColumns<any>) => {
+ dispatch(dataExplorerActions.SET_COLUMNS({ id, columns }));
+ },