return date.toLocaleString();
};
-export const formatFileSize = (size: number) => {
- for (const { base, unit } of fileSizes) {
- if (size >= base) {
- return `${(size / base).toFixed()} ${unit}`;
+export const formatFileSize = (size?: number) => {
+ if (typeof size === "number") {
+ for (const { base, unit } of fileSizes) {
+ if (size >= base) {
+ return `${(size / base).toFixed()} ${unit}`;
+ }
}
}
return "";
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { DataTable, DataTableProps, Column, ColumnsConfigurator } from "../../components/data-table";
+import { DataTable, DataTableProps, DataColumn, ColumnSelector } from "../../components/data-table";
import { Typography, Grid, ListItem, Divider, List, ListItemIcon, ListItemText } from '@material-ui/core';
import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
import MoreVertIcon from "@material-ui/icons/MoreVert";
import Popover from '../popover/popover';
-import { formatFileSize, formatDate } from './formatters';
+import { formatFileSize, formatDate } from '../../common/formatters';
import { DataItem } from './data-item';
interface DataExplorerProps {
type DataExplorerState = Pick<DataTableProps<DataItem>, "columns">;
class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState> {
-
state: DataExplorerState = {
columns: [
{
- header: "Name",
+ name: "Name",
selected: true,
render: item => this.renderName(item)
},
{
- header: "Status",
+ name: "Status",
selected: true,
render: item => renderStatus(item.status)
},
{
- header: "Type",
+ name: "Type",
selected: true,
render: item => renderType(item.type)
},
{
- header: "Owner",
+ name: "Owner",
selected: true,
render: item => renderOwner(item.owner)
},
{
- header: "File size",
+ name: "File size",
selected: true,
render: (item) => renderFileSize(item.fileSize)
},
{
- header: "Last modified",
+ name: "Last modified",
selected: true,
render: item => renderDate(item.lastModified)
},
{
- header: "Actions",
- key: "Actions",
+ name: "Actions",
selected: true,
configurable: false,
renderHeader: () => this.renderActionsHeader(),
};
render() {
- return (
- <DataTable
- columns={this.state.columns}
- items={this.props.items}
- />
- );
+ return <DataTable
+ columns={this.state.columns}
+ items={this.props.items} />;
}
- toggleColumn = (column: Column<DataItem>) => {
+ 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 });
}
- renderActionsHeader = () => {
- return (
- <Grid container justify="flex-end">
- <ColumnsConfigurator
- columns={this.state.columns}
- onColumnToggle={this.toggleColumn}
- />
+ renderActionsHeader = () =>
+ <Grid container justify="flex-end">
+ <ColumnSelector
+ columns={this.state.columns}
+ onColumnToggle={this.toggleColumn} />
+ </Grid>
+
+ 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>
- renderName = (item: DataItem) => {
- return (
- (
- <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 renderIcon = (dataItem: DataItem) => {
}
};
-const renderDate = (date: string) => {
- return (
- <Typography noWrap>
- {formatDate(date)}
- </Typography>
- );
-};
-
-const renderFileSize = (fileSize?: number) => {
- return (
- <Typography noWrap>
- {typeof fileSize === "number" ? formatFileSize(fileSize) : "-"}
- </Typography>
- );
-};
-
-const renderOwner = (owner: string) => {
- return (
- <Typography noWrap color="primary">
- {owner}
- </Typography>
- );
-};
-
-const renderType = (type: string) => {
- return (
- <Typography noWrap>
- {type}
- </Typography>
- );
-};
-
-const renderStatus = (status?: string) => {
- return (
- <Typography noWrap align="center">
- {status || "-"}
- </Typography>
- );
-};
-
-const renderItemActions = () => {
- return (
- <Grid container justify="flex-end">
- <Popover triggerComponent={ItemActionsTrigger}>
- <List dense>
- {[
- {
- icon: "fas fa-users",
- label: "Share"
- },
- {
- icon: "fas fa-sign-out-alt",
- label: "Move to"
- },
- {
- icon: "fas fa-star",
- label: "Add to favourite"
- },
- {
- icon: "fas fa-edit",
- label: "Rename"
- },
- {
- icon: "fas fa-copy",
- label: "Make a copy"
- },
- {
- icon: "fas fa-download",
- label: "Download"
- }].map(renderAction)
- }
- < Divider />
- {
- renderAction({ icon: "fas fa-trash-alt", label: "Remove" })
- }
- </List>
- </Popover>
- </Grid>
- );
-};
-
-const renderAction = (action: { label: string, icon: string }, index?: number) => (
+const renderDate = (date: string) =>
+ <Typography noWrap>
+ {formatDate(date)}
+ </Typography>;
+
+const renderFileSize = (fileSize?: number) =>
+ <Typography noWrap>
+ {formatFileSize(fileSize)}
+ </Typography>;
+
+const renderOwner = (owner: string) =>
+ <Typography noWrap color="primary">
+ {owner}
+ </Typography>;
+
+const renderType = (type: string) =>
+ <Typography noWrap>
+ {type}
+ </Typography>;
+
+const renderStatus = (status?: string) =>
+ <Typography noWrap align="center">
+ {status || "-"}
+ </Typography>;
+
+const renderItemActions = () =>
+ <Grid container justify="flex-end">
+ <Popover triggerComponent={ItemActionsTrigger}>
+ <List dense>
+ {[{
+ icon: "fas fa-users",
+ label: "Share"
+ },
+ {
+ icon: "fas fa-sign-out-alt",
+ label: "Move to"
+ },
+ {
+ icon: "fas fa-star",
+ label: "Add to favourite"
+ },
+ {
+ icon: "fas fa-edit",
+ label: "Rename"
+ },
+ {
+ icon: "fas fa-copy",
+ label: "Make a copy"
+ },
+ {
+ icon: "fas fa-download",
+ label: "Download"
+ }].map(renderAction)}
+ < Divider />
+ {renderAction({ icon: "fas fa-trash-alt", label: "Remove" })}
+ </List>
+ </Popover>
+ </Grid>;
+
+const renderAction = (action: { label: string, icon: string }, index?: number) =>
<ListItem button key={index}>
<ListItemIcon>
<i className={action.icon} />
<ListItemText>
{action.label}
</ListItemText>
- </ListItem>
-);
+ </ListItem>;
-const ItemActionsTrigger: React.SFC<IconButtonProps> = (props) => (
+const ItemActionsTrigger: React.SFC<IconButtonProps> = (props) =>
<IconButton {...props}>
<MoreVertIcon />
- </IconButton>
-);
+ </IconButton>;
export default DataExplorer;
import * as React from "react";
import { mount, configure } from "enzyme";
import * as Adapter from "enzyme-adapter-react-16";
-import ColumnsConfigurator, { ColumnsConfiguratorTrigger } from "./columns-configurator";
-import { Column } from "../column";
+import ColumnSelector, { ColumnSelectorProps, ColumnSelectorTrigger } from "./column-selector";
+import { DataColumn } from "../data-column";
import { ListItem, Checkbox } from "@material-ui/core";
configure({ adapter: new Adapter() });
-describe("<ColumnsConfigurator />", () => {
+describe("<ColumnSelector />", () => {
it("shows only configurable columns", () => {
- const columns: Array<Column<void>> = [
+ const columns: Array<DataColumn<void>> = [
{
- header: "Column 1",
+ name: "Column 1",
render: () => <span />,
selected: true
},
{
- header: "Column 2",
+ name: "Column 2",
render: () => <span />,
selected: true,
configurable: true,
},
{
- header: "Column 3",
+ name: "Column 3",
render: () => <span />,
selected: true,
configurable: false
}
];
- const columnsConfigurator = mount(<ColumnsConfigurator columns={columns} onColumnToggle={jest.fn()} />);
- columnsConfigurator.find(ColumnsConfiguratorTrigger).simulate("click");
+ const columnsConfigurator = mount(<ColumnSelector columns={columns} onColumnToggle={jest.fn()} />);
+ columnsConfigurator.find(ColumnSelectorTrigger).simulate("click");
expect(columnsConfigurator.find(ListItem)).toHaveLength(2);
});
it("renders checked checkboxes next to selected columns", () => {
- const columns: Array<Column<void>> = [
+ const columns: Array<DataColumn<void>> = [
{
- header: "Column 1",
+ name: "Column 1",
render: () => <span />,
selected: true
},
{
- header: "Column 2",
+ name: "Column 2",
render: () => <span />,
selected: false
},
{
- header: "Column 3",
+ name: "Column 3",
render: () => <span />,
selected: true
}
];
- const columnsConfigurator = mount(<ColumnsConfigurator columns={columns} onColumnToggle={jest.fn()} />);
- columnsConfigurator.find(ColumnsConfiguratorTrigger).simulate("click");
+ const columnsConfigurator = mount(<ColumnSelector columns={columns} onColumnToggle={jest.fn()} />);
+ columnsConfigurator.find(ColumnSelectorTrigger).simulate("click");
expect(columnsConfigurator.find(Checkbox).at(0).prop("checked")).toBe(true);
expect(columnsConfigurator.find(Checkbox).at(1).prop("checked")).toBe(false);
expect(columnsConfigurator.find(Checkbox).at(2).prop("checked")).toBe(true);
});
it("calls onColumnToggle with clicked column", () => {
- const columns: Array<Column<void>> = [
+ const columns: Array<DataColumn<void>> = [
{
- header: "Column 1",
+ name: "Column 1",
render: () => <span />,
selected: true
}
];
const onColumnToggle = jest.fn();
- const columnsConfigurator = mount(<ColumnsConfigurator columns={columns} onColumnToggle={onColumnToggle} />);
- columnsConfigurator.find(ColumnsConfiguratorTrigger).simulate("click");
+ const columnsConfigurator = mount(<ColumnSelector columns={columns} onColumnToggle={onColumnToggle} />);
+ columnsConfigurator.find(ColumnSelectorTrigger).simulate("click");
columnsConfigurator.find(ListItem).simulate("click");
expect(onColumnToggle).toHaveBeenCalledWith(columns[0]);
});
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { WithStyles, StyleRulesCallback, Theme, withStyles, IconButton, Paper, List, Checkbox, ListItemText, ListItem } from '@material-ui/core';
+import MenuIcon from "@material-ui/icons/Menu";
+import { DataColumn, isColumnConfigurable } from '../data-column';
+import Popover from "../../popover/popover";
+import { IconButtonProps } from '@material-ui/core/IconButton';
+
+export interface ColumnSelectorProps {
+ columns: Array<DataColumn<any>>;
+ onColumnToggle: (column: DataColumn<any>) => void;
+}
+
+const ColumnSelector: React.SFC<ColumnSelectorProps & WithStyles<CssRules>> = ({ columns, onColumnToggle, classes }) =>
+ <Popover triggerComponent={ColumnSelectorTrigger}>
+ <Paper>
+ <List dense>
+ {columns
+ .filter(isColumnConfigurable)
+ .map((column, index) => (
+ <ListItem
+ button
+ key={index}
+ onClick={() => onColumnToggle(column)}>
+ <Checkbox
+ disableRipple
+ color="primary"
+ checked={column.selected}
+ className={classes.checkbox} />
+ <ListItemText>
+ {column.name}
+ </ListItemText>
+ </ListItem>
+ ))}
+ </List>
+ </Paper>
+ </Popover>;
+
+export const ColumnSelectorTrigger: React.SFC<IconButtonProps> = (props) =>
+ <IconButton {...props}>
+ <MenuIcon />
+ </IconButton>;
+
+type CssRules = "checkbox";
+
+const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
+ checkbox: {
+ width: 24,
+ height: 24
+ }
+});
+
+export default withStyles(styles)(ColumnSelector);
+++ /dev/null
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import * as React from 'react';
-import { WithStyles, StyleRulesCallback, Theme, withStyles, IconButton, Paper, List, Checkbox, ListItemText, ListItem } from '@material-ui/core';
-import MenuIcon from "@material-ui/icons/Menu";
-import { Column, isColumnConfigurable } from '../column';
-import Popover from "../../popover/popover";
-import { IconButtonProps } from '@material-ui/core/IconButton';
-
-export interface ColumnsConfiguratorProps {
- columns: Array<Column<any>>;
- onColumnToggle: (column: Column<any>) => void;
-}
-
-const ColumnsConfigurator: React.SFC<ColumnsConfiguratorProps & WithStyles<CssRules>> = ({ columns, onColumnToggle, classes }) => {
- return (
- <Popover triggerComponent={ColumnsConfiguratorTrigger}>
- <Paper>
- <List dense>
- {
- columns
- .filter(isColumnConfigurable)
- .map((column, index) => (
- <ListItem
- button
- key={index}
- onClick={() => onColumnToggle(column)}
- >
- <Checkbox
- disableRipple
- color="primary"
- checked={column.selected}
- className={classes.checkbox}
- />
- <ListItemText>
- {column.header}
- </ListItemText>
- </ListItem>
- ))
- }
- </List>
- </Paper>
- </Popover>
- );
-};
-
-export const ColumnsConfiguratorTrigger: React.SFC<IconButtonProps> = (props) => (
- <IconButton {...props}>
- <MenuIcon />
- </IconButton>
-);
-
-type CssRules = "checkbox";
-
-const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
- checkbox: {
- width: 24,
- height: 24
- }
-});
-
-export default withStyles(styles)(ColumnsConfigurator);
//
// SPDX-License-Identifier: AGPL-3.0
-export interface Column<T> {
- header: string;
+export interface DataColumn<T> {
+ name: string;
selected: boolean;
configurable?: boolean;
key?: React.Key;
renderHeader?: () => React.ReactElement<void>;
}
-export const isColumnConfigurable = <T>(column: Column<T>) => {
- return column.configurable === undefined || column.configurable === true;
+export const isColumnConfigurable = <T>(column: DataColumn<T>) => {
+ return column.configurable === undefined || column.configurable;
};
\ No newline at end of file
import { mount, configure } from "enzyme";
import * as Adapter from "enzyme-adapter-react-16";
import DataTable from "./data-table";
-import { Column } from "./column";
+import { DataColumn } from "./data-column";
import { TableHead, TableCell, Typography, TableBody, Button } from "@material-ui/core";
configure({ adapter: new Adapter() });
describe("<DataTable />", () => {
it("shows only selected columns", () => {
- const columns: Array<Column<string>> = [
+ const columns: Array<DataColumn<string>> = [
{
- header: "Column 1",
+ name: "Column 1",
render: () => <span />,
selected: true
},
{
- header: "Column 2",
+ name: "Column 2",
render: () => <span />,
selected: true
},
{
- header: "Column 3",
+ name: "Column 3",
render: () => <span />,
selected: false
}
expect(dataTable.find(TableHead).find(TableCell)).toHaveLength(2);
});
- it("renders header label", () => {
- const columns: Array<Column<string>> = [
+ it("renders column name", () => {
+ const columns: Array<DataColumn<string>> = [
{
- header: "Column 1",
+ name: "Column 1",
render: () => <span />,
selected: true
}
expect(dataTable.find(TableHead).find(TableCell).text()).toBe("Column 1");
});
- it("uses renderHeader instead of header prop", () => {
- const columns: Array<Column<string>> = [
+ it("uses renderHeader instead of name prop", () => {
+ const columns: Array<DataColumn<string>> = [
{
- header: "Column 1",
+ name: "Column 1",
renderHeader: () => <span>Column Header</span>,
render: () => <span />,
selected: true
});
it("passes column key prop to corresponding cells", () => {
- const columns: Array<Column<string>> = [
+ const columns: Array<DataColumn<string>> = [
{
- header: "Column 1",
+ name: "Column 1",
key: "column-1-key",
render: () => <span />,
selected: true
});
it("shows information that items array is empty", () => {
- const columns: Array<Column<string>> = [
+ const columns: Array<DataColumn<string>> = [
{
- header: "Column 1",
+ name: "Column 1",
render: () => <span />,
selected: true
}
});
it("renders items", () => {
- const columns: Array<Column<string>> = [
+ const columns: Array<DataColumn<string>> = [
{
- header: "Column 1",
+ name: "Column 1",
render: (item) => <Typography>{item}</Typography>,
selected: true
},
{
- header: "Column 2",
+ name: "Column 2",
render: (item) => <Button>{item}</Button>,
selected: true
}
import * as React from 'react';
import { Table, TableBody, TableRow, TableCell, TableHead, StyleRulesCallback, Theme, WithStyles, withStyles, Typography } from '@material-ui/core';
-import { Column } from './column';
+import { DataColumn } from './data-column';
export interface DataTableProps<T> {
items: T[];
- columns: Array<Column<T>>;
+ columns: Array<DataColumn<T>>;
onItemClick?: (item: T) => void;
}
class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
render() {
const { items, columns, classes, onItemClick } = this.props;
- return (
- <div className={classes.tableContainer}>
- {
- items.length > 0 ? (
- <Table>
- <TableHead>
- <TableRow>
- {
- columns
- .filter(column => column.selected)
- .map(({ header, renderHeader, key }, index) => (
- <TableCell key={key || index}>
- {renderHeader ? renderHeader() : header}
- </TableCell>
- ))
- }
+ return <div className={classes.tableContainer}>
+ {items.length > 0 ?
+ <Table>
+ <TableHead>
+ <TableRow>
+ {columns
+ .filter(column => column.selected)
+ .map(({ name, renderHeader, key }, index) =>
+ <TableCell key={key || index}>
+ {renderHeader ? renderHeader() : name}
+ </TableCell>
+ )}
+ </TableRow>
+ </TableHead>
+ <TableBody className={classes.tableBody}>
+ {items
+ .map((item, index) =>
+ <TableRow
+ hover
+ key={index}
+ onClick={() => onItemClick && onItemClick(item)}>
+ {columns
+ .filter(column => column.selected)
+ .map((column, index) => (
+ <TableCell key={column.key || index}>
+ {column.render(item)}
+ </TableCell>
+ ))}
</TableRow>
- </TableHead>
- <TableBody className={classes.tableBody}>
- {
- items
- .map((item, index) => (
- <TableRow key={index} hover onClick={() => onItemClick && onItemClick(item)}>
- {
- columns
- .filter(column => column.selected)
- .map((column, index) => (
- <TableCell key={column.key || index}>
- {column.render(item)}
- </TableCell>
- ))
- }
- </TableRow>
- ))
- }
- </TableBody>
- </Table>
- ) : (
- <Typography>No items</Typography>
- )
- }
-
- </div>
- );
+ )}
+ </TableBody>
+ </Table> : <Typography>No items</Typography>}
+ </div>;
}
}
//
// SPDX-License-Identifier: AGPL-3.0
-export * from "./column";
-export * from "./columns-configurator/columns-configurator";
-export { default as ColumnsConfigurator } from "./columns-configurator/columns-configurator";
+export * from "./data-column";
+export * from "./column-selector/column-selector";
+export { default as ColumnSelector } from "./column-selector/column-selector";
export * from "./data-table";
export { default as DataTable } from "./data-table";
\ No newline at end of file
projects / arvados-workbench2.git / commitdiff