Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 22x 22x 22x 22x 22x 22x 22x 1x 1x | import React from 'react'; import { defaultProps } from './props/defaultProps'; import { propTypes } from './props/propTypes'; import { Container, Box } from '../Layout'; import Label from '../Label/Label'; import style from './Switch.module.css'; export default class Switch extends React.Component { constructor(props) { super(props); this.onChange = this.onChange.bind(this); } onChange(e) { let { onChange, checked } = this.props; onChange && onChange(!checked, e); } render() { let { id, name, value, checked, disabled, isReadOnly, size, text, labelSize, labelPalette, title, disableTitle, dataId, dataSelectorId, customClass, customProps } = this.props; let { SwitchProps = {}, LabelProps = {} } = customProps; let { customSwitchWrap = '', customSwitch = '', customSwitchSize = '', customLabel = '' } = customClass; size !== 'small' ? (size = 'switch_medium') : (size = 'switch_small'); return ( <Container align='vertical' isCover={false} alignBox='row' isInline className={`${style.container} ${customSwitchWrap} ${ disabled ? style.disabled : isReadOnly ? style.readonly : style.effect }`} data-title={disabled ? disableTitle : title} aria-checked={checked} role='switch' tabIndex={isReadOnly || disabled ? '-1' : '0'} dataSelectorId={dataSelectorId} {...SwitchProps} > <Box className={`${style[size]} ${customSwitchSize}`}> <input type='checkbox' id={id} className={`${style.input} ${checked ? style.checked : ''}`} name={name} value={value} checked={checked} disabled={disabled} readOnly={isReadOnly} onClick={!disabled || !isReadOnly ? this.onChange : null} /> <label htmlFor={id} data-id={dataId} data-test-id={dataId} className={`${style.label} ${style[`${size}Label`]} ${customSwitch}`} /> </Box> {text && ( <Label text={text} palette={labelPalette} id={id} size={labelSize} type='subtitle' onClick={!disabled || !isReadOnly ? this.onChange : null} customClass={customLabel} {...LabelProps} /> )} </Container> ); } } Switch.defaultProps = defaultProps; Switch.propTypes = propTypes; // if (__DOCS__) { // Switch.docs = { // componentGroup: 'Form Elements', // folderName: 'Style Guide' // }; // } |