git.iko.soy/bridge
on e6a3026 help sign in
bridge/src/components/CheckboxButton.js
60 lines 1.3 kB history raw
1import React from 'react'
2import PropTypes from 'prop-types';
3import ProtoButton from './ProtoButton'
5const CheckboxButton = props => {
7 const onOff = props.state === true
8 ? 'cb-on br-blue bg-blue outline-blue'
9 : 'bg-transparent br-black outline-blue';
11 const checkmarkState = props.state === true ? 'o-100' : 'o-0'
13 const classes = props.disabled ? 'br-gray-30 bg-gray-10' : onOff
16 return (
17 <div
18 className={`flex items-center ${props.className}`}
19 style={props.style}>
21 <ProtoButton
22 // {...getDomProps(props)}
23 {...props}
24 className={ `s-7 p-0 o-blue mr-4 bs-solid bw-2 ${classes}` }>
26 <svg
27 className={checkmarkState}
28 width='24'
29 height='24'
30 viewBox='0 0 24 24'
31 fill='none'
32 xmlns='http://www.w3.org/2000/svg'>
33 <path
34 d='M2 3.55661V0H0V5.55661H12.4182V3.55661H2Z'
35 transform='translate(6, 13) rotate(-45)'
36 fill='white'/>
37 </svg>
39 </ProtoButton>
41 { props.children }
43 </div>
44 )
48CheckboxButton.propTypes = {
49 state: PropTypes.bool,
50 className: PropTypes.string,
51};
54CheckboxButton.defaultProps = {
55 state: false,
56 className: '',
57};
60export default CheckboxButton