-/**\r
- * ============LICENSE_START========================================================================\r
- * ONAP : ccsdk feature sdnr wt odlux\r
- * =================================================================================================\r
- * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.\r
- * =================================================================================================\r
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except\r
- * in compliance with the License. You may obtain a copy of the License at\r
- *\r
- * http://www.apache.org/licenses/LICENSE-2.0\r
- *\r
- * Unless required by applicable law or agreed to in writing, software distributed under the License\r
- * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express\r
- * or implied. See the License for the specific language governing permissions and limitations under\r
- * the License.\r
- * ============LICENSE_END==========================================================================\r
- */\r
-\r
-import * as React from 'react';\r
-import classNames from 'classnames';\r
-import { withStyles, WithStyles, Theme, createStyles } from '@material-ui/core/styles';\r
-import { fade } from '@material-ui/core/styles/colorManipulator';\r
-import ButtonBase from '@material-ui/core/ButtonBase';\r
-\r
-\r
-export const styles = (theme: Theme) => createStyles({\r
- /* Styles applied to the root element. */\r
- root: {\r
- ...theme.typography.button,\r
- height: 32,\r
- minWidth: 48,\r
- margin: 0,\r
- padding: `${theme.spacing(1 - 4)}px ${theme.spacing(1.5)}px`,\r
- borderRadius: 2,\r
- willChange: 'opacity',\r
- color: fade(theme.palette.action.active, 0.38),\r
- '&:hover': {\r
- textDecoration: 'none',\r
- // Reset on mouse devices\r
- backgroundColor: fade(theme.palette.text.primary, 0.12),\r
- '@media (hover: none)': {\r
- backgroundColor: 'transparent',\r
- },\r
- '&$disabled': {\r
- backgroundColor: 'transparent',\r
- },\r
- },\r
- '&:not(:first-child)': {\r
- borderTopLeftRadius: 0,\r
- borderBottomLeftRadius: 0,\r
- },\r
- '&:not(:last-child)': {\r
- borderTopRightRadius: 0,\r
- borderBottomRightRadius: 0,\r
- },\r
- },\r
- /* Styles applied to the root element if `disabled={true}`. */\r
- disabled: {\r
- color: fade(theme.palette.action.disabled, 0.12),\r
- },\r
- /* Styles applied to the root element if `selected={true}`. */\r
- selected: {\r
- color: theme.palette.action.active,\r
- '&:after': {\r
- content: '""',\r
- display: 'block',\r
- position: 'absolute',\r
- overflow: 'hidden',\r
- borderRadius: 'inherit',\r
- width: '100%',\r
- height: '100%',\r
- left: 0,\r
- top: 0,\r
- pointerEvents: 'none',\r
- zIndex: 0,\r
- backgroundColor: 'currentColor',\r
- opacity: 0.38,\r
- },\r
- '& + &:before': {\r
- content: '""',\r
- display: 'block',\r
- position: 'absolute',\r
- overflow: 'hidden',\r
- width: 1,\r
- height: '100%',\r
- left: 0,\r
- top: 0,\r
- pointerEvents: 'none',\r
- zIndex: 0,\r
- backgroundColor: 'currentColor',\r
- opacity: 0.12,\r
- },\r
- },\r
- /* Styles applied to the `label` wrapper element. */\r
- label: {\r
- width: '100%',\r
- display: 'inherit',\r
- alignItems: 'inherit',\r
- justifyContent: 'inherit',\r
- },\r
-});\r
-\r
-export type ToggleButtonClassKey = 'disabled' | 'root' | 'label' | 'selected';\r
-\r
-interface IToggleButtonProps extends WithStyles<typeof styles> {\r
- className?: string;\r
- component?: React.ReactType<IToggleButtonProps>;\r
- disabled?: boolean;\r
- disableFocusRipple?: boolean;\r
- disableRipple?: boolean;\r
- selected?: boolean;\r
- type?: string;\r
- value?: any;\r
- onClick?: (event: React.FormEvent<HTMLElement>, value?: any) => void;\r
- onChange?: (event: React.FormEvent<HTMLElement>, value?: any) => void;\r
-}\r
-\r
-class ToggleButtonComponent extends React.Component<IToggleButtonProps> {\r
- handleChange = (event: React.FormEvent<HTMLElement>) => {\r
- const { onChange, onClick, value } = this.props;\r
-\r
- event.stopPropagation();\r
- if (onClick) {\r
- onClick(event, value);\r
- if (event.isDefaultPrevented()) {\r
- return;\r
- }\r
- }\r
-\r
- if (onChange) {\r
- onChange(event, value);\r
- }\r
- event.preventDefault();\r
- };\r
-\r
- render() {\r
- const {\r
- children,\r
- className: classNameProp,\r
- classes,\r
- disableFocusRipple,\r
- disabled,\r
- selected,\r
- ...other\r
- } = this.props;\r
-\r
- const className = classNames(\r
- classes.root,\r
- {\r
- [classes.disabled]: disabled,\r
- [classes.selected]: selected,\r
- },\r
- classNameProp,\r
- );\r
-\r
- return (\r
- <ButtonBase\r
- className={className}\r
- disabled={disabled}\r
- focusRipple={!disableFocusRipple}\r
- onClick={this.handleChange}\r
- href="#"\r
- {...other}\r
- >\r
- <span className={classes.label}>{children}</span>\r
- </ButtonBase>\r
- );\r
- }\r
- public static defaultProps = {\r
- disabled: false,\r
- disableFocusRipple: false,\r
- disableRipple: false,\r
- };\r
-\r
- public static muiName = 'ToggleButton';\r
-}\r
-\r
-export const ToggleButton = withStyles(styles, { name: 'MuiToggleButton' })(ToggleButtonComponent);\r
+/**
+ * ============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<typeof styles> {
+ className?: string;
+ component?: React.ReactType<IToggleButtonProps>;
+ disabled?: boolean;
+ disableFocusRipple?: boolean;
+ disableRipple?: boolean;
+ selected?: boolean;
+ type?: string;
+ value?: any;
+ onClick?: (event: React.FormEvent<HTMLElement>, value?: any) => void;
+ onChange?: (event: React.FormEvent<HTMLElement>, value?: any) => void;
+}
+
+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()) {
+ 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 (
+ <ButtonBase
+ className={className}
+ disabled={disabled}
+ focusRipple={!disableFocusRipple}
+ onClick={this.handleChange}
+ href="#"
+ {...other}
+ >
+ <span className={classes.label}>{children}</span>
+ </ButtonBase>
+ );
+ }
+ 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
Code Review / ccsdk / features.git / blobdiff