|
import React from 'react'; |
|
import PropTypes from 'prop-types'; |
|
|
|
const style = { |
|
label: { |
|
display: 'inline', |
|
fontFamily: 'RobotoCondensed-Regular, sans-serif', |
|
userSelect: 'none', // disable text selection |
|
fontWeight: 'bold' |
|
}, |
|
checkbox: { |
|
display: 'none' |
|
}, |
|
checkboxPlusLabel: { |
|
backgroundColor: '#fafafa', |
|
border: '1px solid #cacece', |
|
// boxShadow: '0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05)', |
|
padding: '18px', |
|
borderRadius: '3px', |
|
display: 'inline-block', |
|
position: 'relative' |
|
}, |
|
checkboxCheckedPlusLabel: { |
|
backgroundColor: 'red', |
|
border: '1px solid #adb8c0', |
|
boxShadow: [ |
|
'0 1px 2px rgba(0,0,0,0.05)', |
|
'inset 0px -15px 10px -12px rgba(0,0,0,0.05)', |
|
'inset 15px 10px -12px rgba(255,255,255,0.1)' |
|
].join(', '), |
|
color: 'white' |
|
}, |
|
checkboxCheckedPlusLabelAfter: { |
|
fontSize: '28px', |
|
position: 'absolute', |
|
top: '0px', |
|
left: '6px', |
|
color: '#99a1a7' |
|
} |
|
}; |
|
|
|
export default function CheckboxButton(props) { |
|
let id = props.id; |
|
if (!props.id) { |
|
id = String(Math.round(Math.random() * 10000000000000000)); |
|
} |
|
|
|
const checkboxStyle = { |
|
...style.checkbox |
|
}; |
|
|
|
const labelStyle = { |
|
...style.label, |
|
...style.checkboxPlusLabel, |
|
...(props.checked ? style.checkboxCheckedPlusLabel : {}), |
|
...(props.style || {}), |
|
...(props.checked ? props.checkedStyle : {}) |
|
}; |
|
|
|
const labelAfterStyle = { |
|
...(props.checked ? style.checkboxCheckedPlusLabelAfter : {}) |
|
}; |
|
|
|
return ( |
|
<div> |
|
<input style={checkboxStyle} type="checkbox" id={id} checked={props.checked} onChange={props.onChange} /> |
|
<label style={labelStyle} htmlFor={id}>{props.label}</label> |
|
<div style={labelAfterStyle} /> |
|
</div> |
|
); |
|
} |
|
CheckboxButton.propTypes = { |
|
label: PropTypes.string.isRequired, |
|
id: PropTypes.string, |
|
checked: PropTypes.bool.isRequired, |
|
onChange: PropTypes.func.isRequired, |
|
style: PropTypes.object, |
|
checkedStyle: PropTypes.object |
|
}; |
