From 1a868116614dd9996c78e69941b537e9da19460b Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Tue, 1 Feb 2022 13:18:42 +0100 Subject: Update ODLUX Updated to Material-ui 5, updated dashboard view, removed NetworkMap, LinkCalculator and LineOfSightApp, small bugfixes Issue-ID: CCSDK-3580 Signed-off-by: Aijana Schumann Change-Id: Id0fc148673e23a755cafc2be1c489248c38ff47c --- .../src/components/material-ui/toggleButton.tsx | 358 +++++++++++---------- 1 file changed, 180 insertions(+), 178 deletions(-) (limited to 'sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx') 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 1a29d6970..54f14a7e0 100644 --- a/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx @@ -1,179 +1,181 @@ -/** - * ============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'; -import { withStyles, WithStyles, Theme, createStyles } from '@material-ui/core/styles'; -import { fade } from '@material-ui/core/styles/colorManipulator'; -import ButtonBase from '@material-ui/core/ButtonBase'; - - -export const styles = (theme: Theme) => createStyles({ - /* Styles applied to the root element. */ - root: { - ...theme.typography.button, - height: 32, - minWidth: 48, - margin: 0, - padding: `${theme.spacing(1 - 4)}px ${theme.spacing(1.5)}px`, - borderRadius: 2, - willChange: 'opacity', - color: fade(theme.palette.action.active, 0.38), - '&:hover': { - textDecoration: 'none', - // Reset on mouse devices - backgroundColor: fade(theme.palette.text.primary, 0.12), - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - '&$disabled': { - backgroundColor: 'transparent', - }, - }, - '&:not(:first-child)': { - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - }, - '&:not(:last-child)': { - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - }, - }, - /* Styles applied to the root element if `disabled={true}`. */ - disabled: { - color: fade(theme.palette.action.disabled, 0.12), - }, - /* Styles applied to the root element if `selected={true}`. */ - selected: { - color: theme.palette.action.active, - '&:after': { - content: '""', - display: 'block', - position: 'absolute', - overflow: 'hidden', - borderRadius: 'inherit', - width: '100%', - height: '100%', - left: 0, - top: 0, - pointerEvents: 'none', - zIndex: 0, - backgroundColor: 'currentColor', - opacity: 0.38, - }, - '& + &:before': { - content: '""', - display: 'block', - position: 'absolute', - overflow: 'hidden', - width: 1, - height: '100%', - left: 0, - top: 0, - pointerEvents: 'none', - zIndex: 0, - backgroundColor: 'currentColor', - opacity: 0.12, - }, - }, - /* Styles applied to the `label` wrapper element. */ - label: { - width: '100%', - display: 'inherit', - alignItems: 'inherit', - justifyContent: 'inherit', - }, -}); - -export type ToggleButtonClassKey = 'disabled' | 'root' | 'label' | 'selected'; - -interface IToggleButtonProps extends WithStyles { - className?: string; - component?: React.ReactType; - disabled?: boolean; - disableFocusRipple?: boolean; - disableRipple?: boolean; - selected?: boolean; - type?: string; - value?: any; - onClick?: (event: React.FormEvent, value?: any) => void; - onChange?: (event: React.FormEvent, value?: any) => void; -} - -class ToggleButtonComponent extends React.Component { - handleChange = (event: React.FormEvent) => { - const { onChange, onClick, value } = this.props; - - event.stopPropagation(); - if (onClick) { - onClick(event, value); - if (event.isDefaultPrevented()) { - return; - } - } - - if (onChange) { - onChange(event, value); - } - event.preventDefault(); - }; - - render() { - const { - children, - className: classNameProp, - classes, - disableFocusRipple, - disabled, - selected, - ...other - } = this.props; - - const className = classNames( - classes.root, - { - [classes.disabled]: disabled, - [classes.selected]: selected, - }, - classNameProp, - ); - - return ( - - {children} - - ); - } - public static defaultProps = { - disabled: false, - disableFocusRipple: false, - disableRipple: false, - }; - - public static muiName = 'ToggleButton'; -} - -export const ToggleButton = withStyles(styles, { name: 'MuiToggleButton' })(ToggleButtonComponent); +/** + * ============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'; +import { Theme, alpha } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; +import ButtonBase from '@mui/material/ButtonBase'; + + +export const styles = (theme: Theme) => createStyles({ + /* Styles applied to the root element. */ + root: { + ...theme.typography.button, + height: 32, + minWidth: 48, + margin: 0, + padding: `${theme.spacing(1 - 4)} ${theme.spacing(1.5)}`, + borderRadius: 2, + willChange: 'opacity', + color: alpha(theme.palette.action.active, 0.38), + '&:hover': { + textDecoration: 'none', + // Reset on mouse devices + backgroundColor: alpha(theme.palette.text.primary, 0.12), + '@media (hover: none)': { + backgroundColor: 'transparent', + }, + '&.Mui-disabled': { + backgroundColor: 'transparent', + }, + }, + '&:not(:first-child)': { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, + '&:not(:last-child)': { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + }, + }, + /* Styles applied to the root element if `disabled={true}`. */ + disabled: { + color: alpha(theme.palette.action.disabled, 0.12), + }, + /* Styles applied to the root element if `selected={true}`. */ + selected: { + color: theme.palette.action.active, + '&:after': { + content: '""', + display: 'block', + position: 'absolute', + overflow: 'hidden', + borderRadius: 'inherit', + width: '100%', + height: '100%', + left: 0, + top: 0, + pointerEvents: 'none', + zIndex: 0, + backgroundColor: 'currentColor', + opacity: 0.38, + }, + '& + &:before': { + content: '""', + display: 'block', + position: 'absolute', + overflow: 'hidden', + width: 1, + height: '100%', + left: 0, + top: 0, + pointerEvents: 'none', + zIndex: 0, + backgroundColor: 'currentColor', + opacity: 0.12, + }, + }, + /* Styles applied to the `label` wrapper element. */ + label: { + width: '100%', + display: 'inherit', + alignItems: 'inherit', + justifyContent: 'inherit', + }, +}); + +export type ToggleButtonClassKey = 'disabled' | 'root' | 'label' | 'selected'; + +interface IToggleButtonProps extends WithStyles { + className?: string; + component?: React.ReactType; + disabled?: boolean; + disableFocusRipple?: boolean; + disableRipple?: boolean; + selected?: boolean; + type?: string; + value?: any; + onClick?: (event: React.FormEvent, value?: any) => void; + onChange?: (event: React.FormEvent, value?: any) => void; +} + +class ToggleButtonComponent extends React.Component { + handleChange = (event: React.FormEvent) => { + const { onChange, onClick, value } = this.props; + + event.stopPropagation(); + if (onClick) { + onClick(event, value); + if (event.isDefaultPrevented()) { + return; + } + } + + if (onChange) { + onChange(event, value); + } + event.preventDefault(); + }; + + render() { + const { + children, + className: classNameProp, + classes, + disableFocusRipple, + disabled, + selected, + ...other + } = this.props; + + const className = classNames( + classes.root, + { + [classes.disabled]: disabled, + [classes.selected]: selected, + }, + classNameProp, + ); + + return ( + + {children} + + ); + } + public static defaultProps = { + disabled: false, + disableFocusRipple: false, + disableRipple: false, + }; + + public static muiName = 'ToggleButton'; +} + +export const ToggleButton = withStyles(styles, { name: 'MuiToggleButton' })(ToggleButtonComponent); export default ToggleButton; \ No newline at end of file -- cgit 1.2.3-korg