"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7563/react/features/base/ui/components/web/Checkbox.tsx" (2 Oct 2023, 4766 Bytes) of package /linux/misc/jitsi-meet-7563.tar.gz:

    1 import React from 'react';
    2 import { makeStyles } from 'tss-react/mui';
    3 
    4 import { isMobileBrowser } from '../../../environment/utils';
    5 import Icon from '../../../icons/components/Icon';
    6 import { IconCheck } from '../../../icons/svg';
    7 import { withPixelLineHeight } from '../../../styles/functions.web';
    8 
    9 interface ICheckboxProps {
   10 
   11     /**
   12      * Whether the input is checked or not.
   13      */
   14     checked?: boolean;
   15 
   16     /**
   17      * Class name for additional styles.
   18      */
   19     className?: string;
   20 
   21     /**
   22      * Whether the input is disabled or not.
   23      */
   24     disabled?: boolean;
   25 
   26     /**
   27      * The label of the input.
   28      */
   29     label: string;
   30 
   31     /**
   32      * The name of the input.
   33      */
   34     name?: string;
   35 
   36     /**
   37      * Change callback.
   38      */
   39     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   40 }
   41 
   42 const useStyles = makeStyles()(theme => {
   43     return {
   44         formControl: {
   45             ...withPixelLineHeight(theme.typography.bodyLongRegular),
   46             color: theme.palette.text01,
   47             display: 'inline-flex',
   48             alignItems: 'center',
   49 
   50             '&.is-mobile': {
   51                 ...withPixelLineHeight(theme.typography.bodyLongRegularLarge)
   52 
   53             }
   54         },
   55 
   56         disabled: {
   57             cursor: 'not-allowed'
   58         },
   59 
   60         activeArea: {
   61             display: 'grid',
   62             placeContent: 'center',
   63             width: '24px',
   64             height: '24px',
   65             backgroundColor: 'transparent',
   66             marginRight: '15px',
   67             position: 'relative',
   68             cursor: 'pointer',
   69 
   70             '& input[type="checkbox"]': {
   71                 appearance: 'none',
   72                 backgroundColor: 'transparent',
   73                 margin: '3px',
   74                 font: 'inherit',
   75                 color: theme.palette.icon03,
   76                 width: '18px',
   77                 height: '18px',
   78                 border: `2px solid ${theme.palette.icon03}`,
   79                 borderRadius: '3px',
   80 
   81                 display: 'grid',
   82                 placeContent: 'center',
   83 
   84                 '&::before': {
   85                     content: 'url("")',
   86                     width: '18px',
   87                     height: '18px',
   88                     opacity: 0,
   89                     backgroundColor: theme.palette.action01,
   90                     display: 'flex',
   91                     alignItems: 'center',
   92                     justifyContent: 'center',
   93                     border: 0,
   94                     borderRadius: '3px',
   95                     transition: '.2s'
   96                 },
   97 
   98                 '&:checked::before': {
   99                     opacity: 1
  100                 },
  101 
  102                 '&:disabled': {
  103                     backgroundColor: theme.palette.ui03,
  104                     borderColor: theme.palette.ui04,
  105 
  106                     '&::before': {
  107                         backgroundColor: theme.palette.ui04
  108                     }
  109                 },
  110 
  111                 '&:checked+.checkmark': {
  112                     opacity: 1
  113                 }
  114             },
  115 
  116             '& .checkmark': {
  117                 position: 'absolute',
  118                 left: '3px',
  119                 top: '3px',
  120                 opacity: 0,
  121                 transition: '.2s'
  122             },
  123 
  124             '&.is-mobile': {
  125                 width: '40px',
  126                 height: '40px',
  127 
  128                 '& input[type="checkbox"]': {
  129                     width: '24px',
  130                     height: '24px',
  131 
  132                     '&::before': {
  133                         width: '24px',
  134                         height: '24px'
  135                     }
  136                 },
  137 
  138                 '& .checkmark': {
  139                     left: '11px',
  140                     top: '10px'
  141                 }
  142             }
  143         }
  144     };
  145 });
  146 
  147 const Checkbox = ({
  148     checked,
  149     className,
  150     disabled,
  151     label,
  152     name,
  153     onChange
  154 }: ICheckboxProps) => {
  155     const { classes: styles, cx, theme } = useStyles();
  156     const isMobile = isMobileBrowser();
  157 
  158     return (
  159         <label className = { cx(styles.formControl, isMobile && 'is-mobile', className) }>
  160             <div className = { cx(styles.activeArea, isMobile && 'is-mobile', disabled && styles.disabled) }>
  161                 <input
  162                     checked = { checked }
  163                     disabled = { disabled }
  164                     name = { name }
  165                     onChange = { onChange }
  166                     type = 'checkbox' />
  167                 <Icon
  168                     aria-hidden = { true }
  169                     className = 'checkmark'
  170                     color = { disabled ? theme.palette.icon03 : theme.palette.icon01 }
  171                     size = { 18 }
  172                     src = { IconCheck } />
  173             </div>
  174             <div>{label}</div>
  175         </label>
  176     );
  177 };
  178 
  179 export default Checkbox;