sdnr/wt-odlux/odlux/framework/src/components/material-ui/toggleButton.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18
  19 import * as React from 'react';
  20 import classNames from 'classnames';
  21 import { Theme, alpha } from '@mui/material/styles';
  22 import { WithStyles } from '@mui/styles';
  23 import withStyles from '@mui/styles/withStyles';
  24 import createStyles from '@mui/styles/createStyles';
  25 import ButtonBase from '@mui/material/ButtonBase';
  26
  27
  28 export const styles = (theme: Theme) => createStyles({
  29     /* Styles applied to the root element. */
  30     root: {
  31         ...theme.typography.button,
  32         height: 32,
  33         minWidth: 48,
  34         margin: 0,
  35         padding: `${theme.spacing(1 - 4)} ${theme.spacing(1.5)}`,
  36         borderRadius: 2,
  37         willChange: 'opacity',
  38         color: alpha(theme.palette.action.active, 0.38),
  39         '&:hover': {
  40             textDecoration: 'none',
  41             // Reset on mouse devices
  42             backgroundColor: alpha(theme.palette.text.primary, 0.12),
  43             '@media (hover: none)': {
  44                 backgroundColor: 'transparent',
  45             },
  46             '&.Mui-disabled': {
  47                 backgroundColor: 'transparent',
  48             },
  49         },
  50         '&:not(:first-child)': {
  51             borderTopLeftRadius: 0,
  52             borderBottomLeftRadius: 0,
  53         },
  54         '&:not(:last-child)': {
  55             borderTopRightRadius: 0,
  56             borderBottomRightRadius: 0,
  57         },
  58     },
  59     /* Styles applied to the root element if `disabled={true}`. */
  60     disabled: {
  61         color: alpha(theme.palette.action.disabled, 0.12),
  62     },
  63     /* Styles applied to the root element if `selected={true}`. */
  64     selected: {
  65         color: theme.palette.action.active,
  66         '&:after': {
  67             content: '""',
  68             display: 'block',
  69             position: 'absolute',
  70             overflow: 'hidden',
  71             borderRadius: 'inherit',
  72             width: '100%',
  73             height: '100%',
  74             left: 0,
  75             top: 0,
  76             pointerEvents: 'none',
  77             zIndex: 0,
  78             backgroundColor: 'currentColor',
  79             opacity: 0.38,
  80         },
  81         '& + &:before': {
  82             content: '""',
  83             display: 'block',
  84             position: 'absolute',
  85             overflow: 'hidden',
  86             width: 1,
  87             height: '100%',
  88             left: 0,
  89             top: 0,
  90             pointerEvents: 'none',
  91             zIndex: 0,
  92             backgroundColor: 'currentColor',
  93             opacity: 0.12,
  94         },
  95     },
  96     /* Styles applied to the `label` wrapper element. */
  97     label: {
  98         width: '100%',
  99         display: 'inherit',
 100         alignItems: 'inherit',
 101         justifyContent: 'inherit',
 102     },
 103 });
 104
 105 export type ToggleButtonClassKey = 'disabled' | 'root' | 'label' | 'selected';
 106
 107 interface IToggleButtonProps extends WithStyles<typeof styles> {
 108     className?: string;
 109     component?: React.ReactType<IToggleButtonProps>;
 110     disabled?: boolean;
 111     disableFocusRipple?: boolean;
 112     disableRipple?: boolean;
 113     selected?: boolean;
 114     type?: string;
 115     value?: any;
 116     onClick?: (event: React.FormEvent<HTMLElement>, value?: any) => void;
 117     onChange?: (event: React.FormEvent<HTMLElement>, value?: any) => void;
 118 }
 119
 120 class ToggleButtonComponent extends React.Component<IToggleButtonProps> {
 121     handleChange = (event: React.FormEvent<HTMLElement>) => {
 122         const { onChange, onClick, value } = this.props;
 123
 124         event.stopPropagation();
 125         if (onClick) {
 126             onClick(event, value);
 127             if (event.isDefaultPrevented()) {
 128                 return;
 129             }
 130         }
 131
 132         if (onChange) {
 133             onChange(event, value);
 134         }
 135         event.preventDefault();
 136     };
 137
 138     render() {
 139         const {
 140             children,
 141             className: classNameProp,
 142             classes,
 143             disableFocusRipple,
 144             disabled,
 145             selected,
 146             ...other
 147         } = this.props;
 148
 149         const className = classNames(
 150             classes.root,
 151             {
 152                 [classes.disabled]: disabled,
 153                 [classes.selected]: selected,
 154             },
 155             classNameProp,
 156         );
 157
 158         return (
 159             <ButtonBase
 160                 className={className}
 161                 disabled={disabled}
 162                 focusRipple={!disableFocusRipple}
 163                 onClick={this.handleChange}
 164                 href="#"
 165                 {...other}
 166             >
 167                 <span className={classes.label}>{children}</span>
 168             </ButtonBase>
 169         );
 170     }
 171     public static defaultProps = {
 172         disabled: false,
 173         disableFocusRipple: false,
 174         disableRipple: false,
 175     };
 176
 177     public static muiName = 'ToggleButton';
 178 }
 179
 180 export const ToggleButton = withStyles(styles, { name: 'MuiToggleButton' })(ToggleButtonComponent);
 181 export default ToggleButton;