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

77 lines
1.6 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { CX } from '../constants'
2020-03-24 04:39:12 +00:00
import Text from './text'
class Switch extends React.PureComponent {
2020-03-24 04:39:12 +00:00
handleOnChange = (e) => {
this.props.onChange(e.currentTarget.checked)
}
2020-03-24 04:39:12 +00:00
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,
d: 1,
h24PX: 1,
w50PX: 1,
2020-03-24 04:39:12 +00:00
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({
d: 1,
2020-04-29 23:32:49 +01:00
m1PX: 1,
h20PX: 1,
w20PX: 1,
2020-03-24 04:39:12 +00:00
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.d, _s.flexRow, _s.py5, _s.aiCenter].join(' ')}>
<Text {...labelProps} htmlFor={id} 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={this.handleOnChange} disabled={disabled} className={[_s.visibilityHidden].join(' ')} />
2020-03-24 04:39:12 +00:00
</label>
</div>
)
}
}
Switch.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,
}
export default Switch