sdnr/wt/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 \r
  19 import * as React from 'react';\r
  20 import classNames from 'classnames';\r
  21 import { withStyles, WithStyles, Theme, createStyles } from '@material-ui/core/styles';\r
  22 import { fade } from '@material-ui/core/styles/colorManipulator';\r
  23 import ButtonBase from '@material-ui/core/ButtonBase';\r
  24 \r
  25 \r
  26 export const styles = (theme: Theme) => createStyles({\r
  27     /* Styles applied to the root element. */\r
  28     root: {\r
  29         ...theme.typography.button,\r
  30         height: 32,\r
  31         minWidth: 48,\r
  32         margin: 0,\r
  33         padding: `${theme.spacing.unit - 4}px ${theme.spacing.unit * 1.5}px`,\r
  34         borderRadius: 2,\r
  35         willChange: 'opacity',\r
  36         color: fade(theme.palette.action.active, 0.38),\r
  37         '&:hover': {\r
  38             textDecoration: 'none',\r
  39             // Reset on mouse devices\r
  40             backgroundColor: fade(theme.palette.text.primary, 0.12),\r
  41             '@media (hover: none)': {\r
  42                 backgroundColor: 'transparent',\r
  43             },\r
  44             '&$disabled': {\r
  45                 backgroundColor: 'transparent',\r
  46             },\r
  47         },\r
  48         '&:not(:first-child)': {\r
  49             borderTopLeftRadius: 0,\r
  50             borderBottomLeftRadius: 0,\r
  51         },\r
  52         '&:not(:last-child)': {\r
  53             borderTopRightRadius: 0,\r
  54             borderBottomRightRadius: 0,\r
  55         },\r
  56     },\r
  57     /* Styles applied to the root element if `disabled={true}`. */\r
  58     disabled: {\r
  59         color: fade(theme.palette.action.disabled, 0.12),\r
  60     },\r
  61     /* Styles applied to the root element if `selected={true}`. */\r
  62     selected: {\r
  63         color: theme.palette.action.active,\r
  64         '&:after': {\r
  65             content: '""',\r
  66             display: 'block',\r
  67             position: 'absolute',\r
  68             overflow: 'hidden',\r
  69             borderRadius: 'inherit',\r
  70             width: '100%',\r
  71             height: '100%',\r
  72             left: 0,\r
  73             top: 0,\r
  74             pointerEvents: 'none',\r
  75             zIndex: 0,\r
  76             backgroundColor: 'currentColor',\r
  77             opacity: 0.38,\r
  78         },\r
  79         '& + &:before': {\r
  80             content: '""',\r
  81             display: 'block',\r
  82             position: 'absolute',\r
  83             overflow: 'hidden',\r
  84             width: 1,\r
  85             height: '100%',\r
  86             left: 0,\r
  87             top: 0,\r
  88             pointerEvents: 'none',\r
  89             zIndex: 0,\r
  90             backgroundColor: 'currentColor',\r
  91             opacity: 0.12,\r
  92         },\r
  93     },\r
  94     /* Styles applied to the `label` wrapper element. */\r
  95     label: {\r
  96         width: '100%',\r
  97         display: 'inherit',\r
  98         alignItems: 'inherit',\r
  99         justifyContent: 'inherit',\r
 100     },\r
 101 });\r
 102 \r
 103 export type ToggleButtonClassKey = 'disabled' | 'root' | 'label' | 'selected';\r
 104 \r
 105 interface IToggleButtonProps extends WithStyles<typeof styles> {\r
 106     className?: string;\r
 107     component?: React.ReactType<IToggleButtonProps>;\r
 108     disabled?: boolean;\r
 109     disableFocusRipple?: boolean;\r
 110     disableRipple?: boolean;\r
 111     selected?: boolean;\r
 112     type?: string;\r
 113     value?: any;\r
 114     onClick?: (event: React.FormEvent<HTMLElement>, value?: any) => void;\r
 115     onChange?: (event: React.FormEvent<HTMLElement>, value?: any) => void;\r
 116 }\r
 117 \r
 118 class ToggleButtonComponent extends React.Component<IToggleButtonProps> {\r
 119     handleChange = (event: React.FormEvent<HTMLElement>) => {\r
 120         const { onChange, onClick, value } = this.props;\r
 121 \r
 122         if (onClick) {\r
 123             onClick(event, value);\r
 124             if (event.isDefaultPrevented()) {\r
 125                 return;\r
 126             }\r
 127         }\r
 128 \r
 129         if (onChange) {\r
 130             onChange(event, value);\r
 131         }\r
 132     };\r
 133 \r
 134     render() {\r
 135         const {\r
 136             children,\r
 137             className: classNameProp,\r
 138             classes,\r
 139             disableFocusRipple,\r
 140             disabled,\r
 141             selected,\r
 142             ...other\r
 143         } = this.props;\r
 144 \r
 145         const className = classNames(\r
 146             classes.root,\r
 147             {\r
 148                 [classes.disabled]: disabled,\r
 149                 [classes.selected]: selected,\r
 150             },\r
 151             classNameProp,\r
 152         );\r
 153 \r
 154         return (\r
 155             <ButtonBase\r
 156                 className={className}\r
 157                 disabled={disabled}\r
 158                 focusRipple={!disableFocusRipple}\r
 159                 onClick={this.handleChange}\r
 160                 {...other}\r
 161             >\r
 162                 <span className={classes.label}>{children}</span>\r
 163             </ButtonBase>\r
 164         );\r
 165     }\r
 166     public static defaultProps = {\r
 167         disabled: false,\r
 168         disableFocusRipple: false,\r
 169         disableRipple: false,\r
 170     };\r
 171 \r
 172     public static muiName = 'ToggleButton';\r
 173 }\r
 174 \r
 175 export const ToggleButton = withStyles(styles, { name: 'MuiToggleButton' })(ToggleButtonComponent);\r
 176 export default ToggleButton;