diff options
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components/material-ui')
6 files changed, 138 insertions, 90 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/index.ts b/sdnr/wt/odlux/framework/src/components/material-ui/index.ts index c756f7f07..e0e3fc943 100644 --- a/sdnr/wt/odlux/framework/src/components/material-ui/index.ts +++ b/sdnr/wt/odlux/framework/src/components/material-ui/index.ts @@ -15,8 +15,8 @@ * the License. * ============LICENSE_END========================================================================== */ -export { ListItemLink } from './listItemLink';
-export { Panel } from './panel';
-export { ToggleButton, ToggleButtonClassKey } from './toggleButton';
-export { TreeView, ITreeItem, TreeViewCtorType} from './treeView';
-
+export { ListItemLink } from './listItemLink'; +export { Panel } from './panel'; +export { ToggleButton, ToggleButtonClassKey } from './toggleButton'; +export { TreeView, ITreeItem, TreeViewCtorType} from './treeView'; +export { Loader } from './loader'; diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx new file mode 100644 index 000000000..5ab2fd415 --- /dev/null +++ b/sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx @@ -0,0 +1,45 @@ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. + * ================================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License + * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing permissions and limitations under + * the License. + * ============LICENSE_END========================================================================== + */ + + +import * as React from "react"; + +import { WithStyles, withStyles, createStyles, Theme } from '@material-ui/core/styles'; + +const styles = (theme: Theme) => createStyles({ + "@keyframes spin": { + "0%": { transform: "rotate(0deg)" }, + "100%": { transform: "rotate(360deg)" }, + }, + loader: { + border: `16px solid ${theme.palette.grey.A200}`, + borderTop: `16px solid ${theme.palette.secondary.main}`, + borderRadius: "50%", + width: "120px", + height: "120px", + animation: "$spin 2s linear infinite", + } +}); + +const LoaderComponent: React.FC<WithStyles<typeof styles>> = (props) => { + return ( + <div className={props.classes.loader} /> + ); +}; + +export const Loader = withStyles(styles)(LoaderComponent); diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx index 9627a749b..378d48592 100644 --- a/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx @@ -1,20 +1,20 @@ -/** - * ============LICENSE_START======================================================================== - * ONAP : ccsdk feature sdnr wt odlux - * ================================================================================================= - * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. - * ================================================================================================= - * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under the License - * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing permissions and limitations under - * the License. - * ============LICENSE_END========================================================================== - */ +/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
import * as React from 'react';
import { withStyles, Theme, WithStyles, createStyles } from '@material-ui/core/styles';
@@ -32,8 +32,8 @@ const styles = (theme: Theme) => createStyles({ detail: {
// background: theme.palette.background.paper,
// color: theme.palette.text.primary,
- position: "relative",
- display: 'flex',
+ position: "relative",
+ display: 'flex',
flexDirection: 'column'
},
text: {
@@ -53,18 +53,18 @@ type PanalProps = WithStyles<typeof styles> & { const PanelComponent: React.SFC<PanalProps> = (props) => {
const { classes, activePanel, onToggle } = props;
return (
- <ExpansionPanel className={ classes.accordion } expanded={ activePanel === props.panelId } onChange={ () => onToggle(props.panelId) } >
- <ExpansionPanelSummary expandIcon={ <ExpandMoreIcon /> }>
- <Typography className={ classes.text } >{ props.title }</Typography>
+ <ExpansionPanel className={classes.accordion} expanded={activePanel === props.panelId} onChange={() => onToggle(props.panelId)} >
+ <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+ <Typography className={classes.text} >{props.title}</Typography>
</ExpansionPanelSummary>
- <ExpansionPanelDetails className={ classes.detail }>
- { props.children }
+ <ExpansionPanelDetails className={classes.detail}>
+ {props.children}
</ExpansionPanelDetails>
- { props.customActionButtons
+ {props.customActionButtons
? <ExpansionPanelActions>
- { props.customActionButtons }
- </ExpansionPanelActions>
- : null }
+ {props.customActionButtons}
+ </ExpansionPanelActions>
+ : null}
</ExpansionPanel>
);
};
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/snackDisplay.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/snackDisplay.tsx index 610376107..437784ce5 100644 --- a/sdnr/wt/odlux/framework/src/components/material-ui/snackDisplay.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-ui/snackDisplay.tsx @@ -21,7 +21,7 @@ import { IApplicationStoreState } from '../../store/applicationStore'; import { Connect, connect, IDispatcher } from '../../flux/connect'; import { RemoveSnackbarNotification } from '../../actions/snackbarActions'; -import { InjectedNotistackProps, withSnackbar } from 'notistack'; +import { WithSnackbarProps, withSnackbar } from 'notistack'; const mapProps = (state: IApplicationStoreState) => ({ notifications: state.framework.applicationState.snackBars @@ -33,7 +33,7 @@ const mapDispatch = (dispatcher: IDispatcher) => ({ } }); -type DisplaySnackbarsComponentProps = Connect<typeof mapProps, typeof mapDispatch> & InjectedNotistackProps; +type DisplaySnackbarsComponentProps = Connect<typeof mapProps, typeof mapDispatch> & WithSnackbarProps; class DisplaySnackbarsComponent extends React.Component<DisplaySnackbarsComponentProps> { private displayed: number[] = []; diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx index fb10ca941..1a29d6970 100644 --- a/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx @@ -1,20 +1,20 @@ -/** - * ============LICENSE_START======================================================================== - * ONAP : ccsdk feature sdnr wt odlux - * ================================================================================================= - * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. - * ================================================================================================= - * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under the License - * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing permissions and limitations under - * the License. - * ============LICENSE_END========================================================================== - */ +/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
import * as React from 'react';
import classNames from 'classnames';
@@ -30,7 +30,7 @@ export const styles = (theme: Theme) => createStyles({ height: 32,
minWidth: 48,
margin: 0,
- padding: `${theme.spacing.unit - 4}px ${theme.spacing.unit * 1.5}px`,
+ padding: `${theme.spacing(1 - 4)}px ${theme.spacing(1.5)}px`,
borderRadius: 2,
willChange: 'opacity',
color: fade(theme.palette.action.active, 0.38),
@@ -119,6 +119,7 @@ class ToggleButtonComponent extends React.Component<IToggleButtonProps> { handleChange = (event: React.FormEvent<HTMLElement>) => {
const { onChange, onClick, value } = this.props;
+ event.stopPropagation();
if (onClick) {
onClick(event, value);
if (event.isDefaultPrevented()) {
@@ -129,6 +130,7 @@ class ToggleButtonComponent extends React.Component<IToggleButtonProps> { if (onChange) {
onChange(event, value);
}
+ event.preventDefault();
};
render() {
@@ -157,6 +159,7 @@ class ToggleButtonComponent extends React.Component<IToggleButtonProps> { disabled={disabled}
focusRipple={!disableFocusRipple}
onClick={this.handleChange}
+ href="#"
{...other}
>
<span className={classes.label}>{children}</span>
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx index 7f2f73926..e4eb3a794 100644 --- a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx @@ -103,21 +103,21 @@ class TreeViewComponent<TData extends ITreeItem> extends React.Component<TreeVie ...this.props.style }, search: { - padding: `0px ${ this.props.theme.spacing.unit }px` + padding: `0px ${this.props.theme.spacing(1)}px` } }; return ( - <div style={ styles.root }> - { children } - { enableSearchBar && <TextField label={ "Search" } fullWidth={ true } style={ styles.search } value={ searchTerm } onChange={ this.onChangeSearchText } /> || null } + <div style={styles.root}> + {children} + {enableSearchBar && <TextField label={"Search"} fullWidth={true} style={styles.search} value={searchTerm} onChange={this.onChangeSearchText} /> || null} <List> - { this.renderItems(items, searchTerm && searchTerm.toLowerCase()) } + {this.renderItems(items, searchTerm && searchTerm.toLowerCase())} </List> </div> ); } - private itemIndex: number = 0; + private itemIndex: number = 0; private renderItems = (items: TData[], searchTerm: string | undefined, depth: number = 1) => { return items.reduce((acc, item) => { @@ -144,7 +144,7 @@ class TreeViewComponent<TData extends ITreeItem> extends React.Component<TreeVie private renderItem = (item: TData, searchTerm: string | undefined, depth: number, isFolder: boolean, expanded: boolean): JSX.Element | null => { const styles = { item: { - paddingLeft: (((this.props.depthOffset || 0) + depth) * this.props.theme.spacing.unit * 3), + paddingLeft: (((this.props.depthOffset || 0) + depth) * this.props.theme.spacing(3)), backgroundColor: this.state.activeItem === item ? this.props.theme.palette.action.selected : undefined, height: this.props.itemHeight || undefined, cursor: item.disabled ? 'not-allowed' : 'pointer', @@ -159,47 +159,47 @@ class TreeViewComponent<TData extends ITreeItem> extends React.Component<TreeVie const searchTermLength = searchTerm && searchTerm.length || 0; const handleClickCreator = (isIcon: boolean) => (event: React.SyntheticEvent) => { - if (item.disabled) return; - event.preventDefault(); - event.stopPropagation(); - if (isFolder && (this.props.autoExpandFolder || isIcon)) { - this.props.onFolderClick ? this.props.onFolderClick(item) : this.onFolderClick(item); - } else { - this.props.onItemClick ? this.props.onItemClick(item) : this.onItemClick(item); - } - }; + if (item.disabled) return; + event.preventDefault(); + event.stopPropagation(); + if (isFolder && (this.props.autoExpandFolder || isIcon)) { + this.props.onFolderClick ? this.props.onFolderClick(item) : this.onFolderClick(item); + } else { + this.props.onItemClick ? this.props.onItemClick(item) : this.onItemClick(item); + } + }; return ((searchTerm && (matchIndex > -1 || expanded) || !searchTerm) ? ( - <ListItem key={ `tree-list-${ this.itemIndex++ }` } style={ styles.item } onClick={ handleClickCreator(false) } button > + <ListItem key={`tree-list-${this.itemIndex++}`} style={styles.item} onClick={handleClickCreator(false)} button > { // display the left icon - (this.props.useFolderIcons && <ListItemIcon>{ isFolder ? <FolderIcon /> : <FileIcon /> }</ListItemIcon>) || - (item.icon && (<ListItemIcon><item.icon /></ListItemIcon>)) } + (this.props.useFolderIcons && <ListItemIcon>{isFolder ? <FolderIcon /> : <FileIcon />}</ListItemIcon>) || + (item.icon && (<ListItemIcon><item.icon /></ListItemIcon>))} + - { // highlight search result matchIndex > -1 - ? (<span> - { text.substring(0, matchIndex) } - <span - style={ { - display: 'inline-block', - backgroundColor: 'rgba(255,235,59,0.5)', - padding: '3px', - } } - > - { text.substring(matchIndex, matchIndex + searchTermLength) } - </span> - { text.substring(matchIndex + searchTermLength) } - </span>) - : (<ListItemText primary={ text } />) + ? (<span> + {text.substring(0, matchIndex)} + <span + style={{ + display: 'inline-block', + backgroundColor: 'rgba(255,235,59,0.5)', + padding: '3px', + }} + > + {text.substring(matchIndex, matchIndex + searchTermLength)} + </span> + {text.substring(matchIndex + searchTermLength)} + </span>) + : (<ListItemText primary={text} />) } { // display the right icon, depending on the state - !isFolder ? null : expanded ? (<OpenIcon onClick={ handleClickCreator(true) } />) : (<CloseIcon onClick={ handleClickCreator(true) } />) } + !isFolder ? null : expanded ? (<OpenIcon onClick={handleClickCreator(true)} />) : (<CloseIcon onClick={handleClickCreator(true)} />)} </ListItem> - ) + ) : null ); } @@ -264,5 +264,5 @@ class TreeViewComponent<TData extends ITreeItem> extends React.Component<TreeVie export type TreeViewCtorType<TData extends ITreeItem = ITreeItem> = new () => React.Component<Omit<TreeViewComponentProps<TData>, 'theme'>>; -export const TreeView = withTheme()(TreeViewComponent); +export const TreeView = withTheme(TreeViewComponent); export default TreeView;
\ No newline at end of file |