From 3d202a04b99f0e61b6ccf8b7a5610e1a15ca58e7 Mon Sep 17 00:00:00 2001
From: Herbert Eiselt <herbert.eiselt@highstreet-technologies.com>
Date: Mon, 11 Feb 2019 14:54:12 +0100
Subject: Add sdnr wt odlux

Add complete sdnr wireless transport app odlux core and apps

Change-Id: I5dcbfb8f3b790e3bda7c8df67bd69d81958f65e5
Issue-ID: SDNC-576
Signed-off-by: Herbert Eiselt <herbert.eiselt@highstreet-technologies.com>
---
 .../src/components/material-table/tableToolbar.tsx | 131 +++++++++++++++++++++
 1 file changed, 131 insertions(+)
 create mode 100644 sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx

(limited to 'sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx')

diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
new file mode 100644
index 000000000..9ee2e13c7
--- /dev/null
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import DeleteIcon from '@material-ui/icons/Delete';
+import MoreIcon from '@material-ui/icons/MoreVert';
+import FilterListIcon from '@material-ui/icons/FilterList';
+import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@material-ui/core/Menu';
+import { lighten } from '@material-ui/core/styles/colorManipulator';
+import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';
+
+const styles = (theme: Theme) => createStyles({
+  root: {
+    paddingRight: theme.spacing.unit,
+  },
+  highlight:
+    theme.palette.type === 'light'
+      ? {
+        color: theme.palette.secondary.main,
+        backgroundColor: lighten(theme.palette.secondary.light, 0.85),
+      }
+      : {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.secondary.dark,
+      },
+  spacer: {
+    flex: '1 1 100%',
+  },
+  actions: {
+    color: theme.palette.text.secondary,
+    display: "flex",
+    flex: "auto",
+    flexDirection: "row"
+  },
+  title: {
+    flex: '0 0 auto',
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+});
+
+interface ITableToolbarComponentProps extends WithStyles<typeof styles> {
+  numSelected: number | null;
+  title?: string;
+  customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, onClick: () => void }[];
+  onToggleFilter: () => void;
+  onExportToCsv: () => void;
+}
+
+class TableToolbarComponent extends React.Component<ITableToolbarComponentProps, { anchorEl: EventTarget & HTMLElement | null }> {
+  constructor(props: ITableToolbarComponentProps) {
+    super(props);
+
+    this.state = {
+      anchorEl: null
+    };
+  }
+
+  private handleMenu  = (event: React.MouseEvent<HTMLElement>) => {
+    this.setState({ anchorEl: event.currentTarget });
+  };
+
+  private handleClose = () => {
+    this.setState({ anchorEl: null });
+  };
+  render() {
+    const { numSelected, classes } = this.props;
+    const open = !!this.state.anchorEl;
+
+    return (
+      <Toolbar className={ `${ classes.root } ${ numSelected && numSelected > 0 ? classes.highlight : '' } ` } >
+        <div className={ classes.title }>
+          { numSelected && numSelected > 0 ? (
+            <Typography color="inherit" variant="subheading">
+              { numSelected } selected
+          </Typography>
+          ) : (
+              <Typography variant="headline" id="tableTitle">
+                { this.props.title || null }
+              </Typography>
+            ) }
+        </div>
+        <div className={ classes.spacer } />
+        <div className={ classes.actions }>
+          { this.props.customActionButtons 
+            ? this.props.customActionButtons.map((action, ind) =>(
+              <Tooltip key={ `custom-action-${ ind }`} title={action.tooltip}>
+              <IconButton aria-label={ `custom-action-${ind}` } onClick={() => action.onClick() }>
+                <action.icon />
+              </IconButton>
+            </Tooltip>
+            ))
+            : null }
+          { numSelected && numSelected > 0 ? (
+            <Tooltip title="Delete">
+              <IconButton aria-label="Delete">
+                <DeleteIcon />
+              </IconButton>
+            </Tooltip>
+          ) : (
+              <Tooltip title="Filter list">
+                <IconButton aria-label="Filter list" onClick={ () => { this.props.onToggleFilter && this.props.onToggleFilter() } }>
+                  <FilterListIcon />
+                </IconButton>
+              </Tooltip>
+            ) }
+          <Tooltip title="Actions">
+            <IconButton color="inherit"
+              aria-owns={ open ? 'menu-appbar' : undefined }
+              aria-haspopup="true"
+              onClick={ this.handleMenu } >
+              <MoreIcon />
+            </IconButton>
+          </Tooltip>
+          <Menu id="menu-appbar" anchorEl={ this.state.anchorEl } anchorOrigin={ { vertical: 'top', horizontal: 'right' } } 
+                transformOrigin={ { vertical: 'top', horizontal: 'right' } } open={ open } onClose={ this.handleClose } >
+            <MenuItem onClick={ this.props.onExportToCsv }>Export as CSV</MenuItem>
+          </Menu>
+        </div>
+      </Toolbar>
+    );
+  }
+};
+
+export const TableToolbar = withStyles(styles)(TableToolbarComponent);
\ No newline at end of file
-- 
cgit 1.2.3-korg