gab-social/app/javascript/gabsocial/components/switch.js

69 lines
1.5 KiB
JavaScript
Raw Normal View History

import { CX } from '../constants'
2020-03-24 04:39:12 +00:00
import Text from './text'
export default class Switch extends PureComponent {
2020-03-24 04:39:12 +00:00
static propTypes = {
id: PropTypes.string.isRequired,
description: PropTypes.string,
label: PropTypes.string,
checked: PropTypes.bool,
onChange: PropTypes.func,
onKeyDown: PropTypes.func,
disabled: PropTypes.bool,
labelProps: PropTypes.object,
}
render() {
const {
id,
description,
label,
checked,
onChange,
onKeyDown,
disabled,
labelProps
} = this.props
const checkboxContainerClasses = CX({
2020-03-24 04:39:12 +00:00
cursorPointer: 1,
default: 1,
height24PX: 1,
width50PX: 1,
circle: 1,
border1PX: 1,
2020-04-24 04:17:27 +01:00
mlAuto: 1,
2020-05-03 06:22:49 +01:00
bgPrimary: 1,
2020-03-24 04:39:12 +00:00
borderColorSecondary: 1,
2020-04-29 23:32:49 +01:00
bgBrand: checked,
2020-03-24 04:39:12 +00:00
})
const checkboxLabelClasses = CX({
2020-03-24 04:39:12 +00:00
default: 1,
2020-04-29 23:32:49 +01:00
m1PX: 1,
2020-03-24 04:39:12 +00:00
height20PX: 1,
width20PX: 1,
circle: 1,
2020-04-23 07:13:29 +01:00
posAbs: 1,
2020-04-29 23:32:49 +01:00
bgSecondary: !checked,
bgPrimary: checked,
2020-03-24 04:39:12 +00:00
left0: !checked,
right0: checked,
})
return (
<div className={[_s.default, _s.flexRow, _s.py5, _s.alignItemsCenter].join(' ')}>
2020-03-26 03:11:32 +00:00
<Text {...labelProps} className={_s.mr10}>
2020-03-24 04:39:12 +00:00
{label}
</Text>
<label className={checkboxContainerClasses} htmlFor={id}>
<span className={checkboxLabelClasses} />
<input type='checkbox' id={id} onChange={onChange} disabled={disabled} className={[_s.visibilityHidden].join(' ')} />
</label>
</div>
)
}
2020-03-24 04:39:12 +00:00
}