12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- import React from 'react'
- import PropTypes from 'prop-types'
- import classnames from 'classnames'
-
- const style = {
- label: {
- position: 'relative',
- width: '18px',
- height: '18px',
- border: '1px solid #999',
- borderRadius: '3px',
- backgroundColor: '#eee',
- cursor: 'pointer'
- },
- checked: {
- position: 'absolute',
- top: '-3px',
- left: '2px',
- fontSize: '18px',
- color: '#333'
- },
- input: {
- width: '0',
- height: '0',
- visibility: 'hidden'
- },
- disabled: {
- cursor: 'default'
- }
- }
-
- export const Checkbox = props =>
- <label
- className={classnames('checkboxCustom', {'checked': props.checked})}
- style={{
- ...style.label,
- ...(props.disabled ? style.disabled : {})
- }}
- onClick={props.onClickCheckbox}
- >
- { props.checked && <div className='checboxCustom__checked' style={style.checked}>✔</div> }
- <input
- type='checkbox'
- name={`checkbox-${props.name}`}
- checked={props.checked}
- defaultChecked={props.defaultChecked}
- onChange={() => {}} // to remove warning
- style={style.input}
- disabled={props.disabled}
- />
- </label>
-
- Checkbox.propTypes = {
- name: PropTypes.string.isRequired,
- onClickCheckbox: PropTypes.func.isRequired,
- checked: PropTypes.bool,
- defaultChecked: PropTypes.bool,
- disabled: PropTypes.bool
- }
-
- Checkbox.defaultProps = {
- checked: false,
- disabled: false
- }
-
- export default Checkbox
|