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 100 101 102 103 104 105 106 107 108 109 110 111 | 34x 34x 34x 34x 34x 34x 34x 34x 1x 1x | /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium'] }] */ import React from 'react'; import { defaultProps } from './props/defaultProps'; import { propTypes } from './props/propTypes'; import Label from '../Label/Label'; import { Container, Box } from '../Layout'; import style from './Radio.module.css'; export default class Radio extends React.Component { constructor(props) { super(props); this.onChange = this.onChange.bind(this); } onChange(e) { let { onChange, value } = this.props; onChange && onChange(value, e); } render() { let { id, name, value, checked, disabled, isReadOnly, palette, disabledTitle, title, text, labelPalette, size, labelSize, variant, active, isFilled, customClass, a11y } = this.props; let { customRadioWrap = '', customRadio = '', customLabel = '' } = customClass; let accessMode = isReadOnly ? style.readonly : disabled ? style.disabled : style.pointer; let toolTip = disabled ? disabledTitle : title ? title : null; let { ariaHidden, role = 'radio', ariaChecked = checked, ariaLabel, ariaLabelledby, ariaReadonly = isReadOnly || disabled ? true : false } = a11y; return ( <Container dataId={value ? value.toLowerCase() : 'RadioComp'} isCover={false} isInline={text ? false : true} alignBox='row' align='both' className={`${style.container} ${active && !disabled ? style.active : ''} ${accessMode} ${ isReadOnly || disabled ? '' : style.hoverEfffect } ${checked ? style.checked : ''} ${customRadioWrap}`} data-title={toolTip} onClick={!isReadOnly && !disabled ? this.onChange : ''} aria-checked={ariaChecked} tabindex={isReadOnly || disabled || ariaHidden ? '-1' : '0'} role={role} aria-Hidden={ariaHidden} aria-label={ariaLabel} aria-labelledby={ariaLabelledby} aria-readonly={ariaReadonly} > <Box className={`${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''} ${isReadOnly || disabled ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${ isFilled ? style.filled : '' } ${style[`centerPath${palette}`]} ${customRadio}`} > <input type='hidden' id={id} name={name} value={value} /> <label className={`${style.radioLabel} ${accessMode}`}> <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'> <circle cx='20' cy='20' r='19' className={`${style.rdBox}`} /> {checked ? <circle cx='20' cy='20' r='11.03' className={`${style.centerPath}`} /> : null} </svg> </label> </Box> {text && ( <Box flexible className={style.text}> <Label text={text} palette={disabled ? 'disable' : labelPalette} size={labelSize} type='title' clipped dataId={`${text}_label`} variant={variant} title={toolTip ? toolTip : text} customClass={`${checked && active && !disabled ? `${style[`${palette}checkedActive`]}` : ''} ${style[`${palette}Label`]} ${accessMode} ${customLabel}`} /> </Box> )} </Container> ); } } Radio.defaultProps = defaultProps; Radio.propTypes = propTypes; |