import Typography from '@material-ui/core/Typography';
import { WithStyles, withStyles, StyleRulesCallback } from '@material-ui/core/styles';
import { ArvadosTheme } from 'src/common/custom-theme';
+import { IconType } from '../icon/icon';
export interface EmptyStateDataProps {
message: string;
- icon: (className?: string) => React.ReactElement<any>;
+ icon: IconType;
details?: string;
}
class EmptyState extends React.Component<EmptyStateProps, {}> {
render() {
- const { classes, message, details, icon, children } = this.props;
+ const { classes, message, details, icon: Icon, children } = this.props;
return (
<Typography className={classes.container} component="div">
- {icon(classes.icon)}
+ <Icon className={classes.icon} />
<Typography variant="body1" gutterBottom>{message}</Typography>
{ details && <Typography gutterBottom>{details}</Typography> }
{ children && <Typography gutterBottom>{children}</Typography> }
import Star from '@material-ui/icons/Star';
import StarBorder from '@material-ui/icons/StarBorder';
-export const AddFavoriteIcon = (className?: string) => <StarBorder className={className} />;
-export const AdvancedIcon = (className?: string) => <Folder className={className} />;
-export const CustomizeTableIcon = (className?: string) => <Menu className={className} />;
-export const CopyIcon = (className?: string) => <ContentCopy className={className} />;
-export const CollectionIcon = (className?: string) => <Folder className={className} />;
-export const CloseIcon = (className?: string) => <Close className={className} />;
-export const DefaultIcon = (className?: string) => <RateReview className={className} />;
-export const DetailsIcon = (className?: string) => <Info className={className} />;
-export const DownloadIcon = (className?: string) => <GetApp className={className} />;
-export const FavoriteIcon = (className?: string) => <Star className={className} />;
-export const HelpIcon = (className?: string) => <Help className={className} />;
-export const LogIcon = (className?: string) => <Folder className={className} />;
-export const MoreOptionsIcon = (className?: string) => <MoreVert className={className} />;
-export const MoveToIcon = (className?: string) => <Input className={className} />;
-export const NewProjectIcon = (className?: string) => <CreateNewFolder className={className} />;
-export const NotificationIcon = (className?: string) => <Notifications className={className} />;
-export const PaginationDownIcon = (className?: string) => <ArrowDropDown className={className} />;
-export const PaginationLeftArrowIcon = (className?: string) => <ChevronLeft className={className} />;
-export const PaginationRightArrowIcon = (className?: string) => <ChevronRight className={className} />;
-export const ProcessIcon = (className?: string) => <BubbleChart className={className} />;
-export const ProjectIcon = (className?: string) => <Folder className={className} />;
-export const ProjectsIcon = (className?: string) => <Inbox className={className} />;
-export const ProvenanceGraphIcon = (className?: string) => <Folder className={className} />;
-export const RecentIcon = (className?: string) => <AccessTime className={className} />;
-export const RemoveIcon = (className?: string) => <Delete className={className} />;
-export const RemoveFavoriteIcon = (className?: string) => <Star className={className} />;
-export const RenameIcon = (className?: string) => <Edit className={className} />;
-export const ReRunProcessIcon = (className?: string) => <Cached className={className} />;
-export const SearchIcon = (className?: string) => <Search className={className} />;
-export const ShareIcon = (className?: string) => <PersonAdd className={className} />;
-export const ShareMeIcon = (className?: string) => <People className={className} />;
-export const SidePanelRightArrowIcon = (className?: string) => <PlayArrow className={className} />;
-export const TrashIcon = (className?: string) => <Delete className={className} />;
-export const UserPanelIcon = (className?: string) => <Person className={className} />;
-export const UsedByIcon = (className?: string) => <Folder className={className} />;
-export const WorkflowIcon = (className?: string) => <Code className={className} />;
\ No newline at end of file
+export type IconType = React.SFC<{ className?: string }>;
+
+export const AddFavoriteIcon: IconType = (props) => <StarBorder {...props} />;
+export const AdvancedIcon: IconType = (props) => <Folder {...props} />;
+export const CustomizeTableIcon: IconType = (props) => <Menu {...props} />;
+export const CopyIcon: IconType = (props) => <ContentCopy {...props} />;
+export const CollectionIcon: IconType = (props) => <Folder {...props} />;
+export const CloseIcon: IconType = (props) => <Close {...props} />;
+export const DefaultIcon: IconType = (props) => <RateReview {...props} />;
+export const DetailsIcon: IconType = (props) => <Info {...props} />;
+export const DownloadIcon: IconType = (props) => <GetApp {...props} />;
+export const FavoriteIcon: IconType = (props) => <Star {...props} />;
+export const HelpIcon: IconType = (props) => <Help {...props} />;
+export const LogIcon: IconType = (props) => <Folder {...props} />;
+export const MoreOptionsIcon: IconType = (props) => <MoreVert {...props} />;
+export const MoveToIcon: IconType = (props) => <Input {...props} />;
+export const NewProjectIcon: IconType = (props) => <CreateNewFolder {...props} />;
+export const NotificationIcon: IconType = (props) => <Notifications {...props} />;
+export const PaginationDownIcon: IconType = (props) => <ArrowDropDown {...props} />;
+export const PaginationLeftArrowIcon: IconType = (props) => <ChevronLeft {...props} />;
+export const PaginationRightArrowIcon: IconType = (props) => <ChevronRight {...props} />;
+export const ProcessIcon: IconType = (props) => <BubbleChart {...props} />;
+export const ProjectIcon: IconType = (props) => <Folder {...props} />;
+export const ProjectsIcon: IconType = (props) => <Inbox {...props} />;
+export const ProvenanceGraphIcon: IconType = (props) => <Folder {...props} />;
+export const RecentIcon: IconType = (props) => <AccessTime {...props} />;
+export const RemoveIcon: IconType = (props) => <Delete {...props} />;
+export const RemoveFavoriteIcon: IconType = (props) => <Star {...props} />;
+export const RenameIcon: IconType = (props) => <Edit {...props} />;
+export const ReRunProcessIcon: IconType = (props) => <Cached {...props} />;
+export const SearchIcon: IconType = (props) => <Search {...props} />;
+export const ShareIcon: IconType = (props) => <PersonAdd {...props} />;
+export const ShareMeIcon: IconType = (props) => <People {...props} />;
+export const SidePanelRightArrowIcon: IconType = (props) => <PlayArrow {...props} />;
+export const TrashIcon: IconType = (props) => <Delete {...props} />;
+export const UserPanelIcon: IconType = (props) => <Person {...props} />;
+export const UsedByIcon: IconType = (props) => <Folder {...props} />;
+export const WorkflowIcon: IconType = (props) => <Code {...props} />;
\ No newline at end of file
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
import { ArvadosTheme } from '../../common/custom-theme';
import { List, ListItem, ListItemText, ListItemIcon, Collapse, Typography } from "@material-ui/core";
-import { SidePanelRightArrowIcon } from '../icon/icon';
+import { SidePanelRightArrowIcon, IconType } from '../icon/icon';
import * as classnames from "classnames";
export interface SidePanelItem {
id: string;
name: string;
- icon: (className?: string) => React.ReactElement<any>;
+ icon: IconType;
active?: boolean;
open?: boolean;
margin?: boolean;
<span className={row}>
{it.openAble ? (
<i onClick={() => toggleOpen(it.id)} className={iconArrowContainer}>
- {SidePanelRightArrowIcon(this.getIconClassNames(it.open, it.active))}
+ <SidePanelRightArrowIcon className={this.getIconClassNames(it.open, it.active)} />
</i>
) : null}
<ListItemIcon className={it.active ? active : ''}>
- {it.icon(`${icon} ${it.margin ? projectIconMargin : ''}`)}
+ {<it.icon className={`${icon} ${it.margin ? projectIconMargin : ''}`} />}
</ListItemIcon>
<ListItemText className={listItemText}
primary={renderListItemText(it.name, active, it.active)} />