mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-18 17:02:12 +00:00
Checkbox props refactored
This commit is contained in:
parent
22cc957bd7
commit
a761090b62
1 changed files with 8 additions and 13 deletions
|
|
@ -5,7 +5,7 @@ const Icon = require('stremio-icons/dom');
|
|||
const { Input } = require('stremio-navigation');
|
||||
const styles = require('./styles');
|
||||
|
||||
const Checkbox = React.forwardRef((props, ref) => {
|
||||
const Checkbox = React.forwardRef(({ className, disabled = false, checked = false, children, ...props }, ref) => {
|
||||
const onClick = React.useCallback((event) => {
|
||||
event.preventDefault();
|
||||
if (typeof props.onClick === 'function') {
|
||||
|
|
@ -31,16 +31,16 @@ const Checkbox = React.forwardRef((props, ref) => {
|
|||
}
|
||||
}, [props.onMouseOut]);
|
||||
return (
|
||||
<label className={classnames(props.className, styles['checkbox-container'], { 'checked': props.checked }, { 'disabled': props.disabled })} onClick={onClick} onDrag={onDrag} onMouseOut={onMouseOut}>
|
||||
<label className={classnames(className, styles['checkbox-container'], { 'checked': checked }, { 'disabled': disabled })} onClick={onClick} onDrag={onDrag} onMouseOut={onMouseOut}>
|
||||
<Input
|
||||
ref={ref}
|
||||
className={styles['native-checkbox']}
|
||||
type={'checkbox'}
|
||||
disabled={props.disabled}
|
||||
defaultChecked={props.checked}
|
||||
disabled={disabled}
|
||||
defaultChecked={checked}
|
||||
/>
|
||||
<Icon className={styles['icon']} icon={props.checked ? 'ic_check' : 'ic_box_empty'} />
|
||||
{React.Children.only(props.children)}
|
||||
<Icon className={styles['icon']} icon={checked ? 'ic_check' : 'ic_box_empty'} />
|
||||
{React.isValidElement(children) ? React.Children.only(children) : null}
|
||||
</label>
|
||||
);
|
||||
});
|
||||
|
|
@ -49,17 +49,12 @@ Checkbox.displayName = 'Checkbox';
|
|||
|
||||
Checkbox.propTypes = {
|
||||
className: PropTypes.string,
|
||||
disabled: PropTypes.bool.isRequired,
|
||||
checked: PropTypes.bool.isRequired,
|
||||
disabled: PropTypes.bool,
|
||||
checked: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
onDrag: PropTypes.func,
|
||||
onMouseOut: PropTypes.func,
|
||||
children: PropTypes.node
|
||||
};
|
||||
|
||||
Checkbox.defaultProps = {
|
||||
disabled: false,
|
||||
checked: false
|
||||
};
|
||||
|
||||
module.exports = Checkbox;
|
||||
|
|
|
|||
Loading…
Reference in a new issue