react-toolbox/components/radio/RadioButton.js

108 lines
2.8 KiB
JavaScript
Raw Permalink Normal View History

import React, { Component } from 'react';
import PropTypes from 'prop-types';
2016-05-22 23:18:41 +03:00
import classnames from 'classnames';
import { themr } from 'react-css-themr';
2017-01-26 20:05:32 +03:00
import { RADIO } from '../identifiers';
import rippleFactory from '../ripple/Ripple';
import radioFactory from './Radio';
2015-10-06 20:40:47 +03:00
2016-05-29 23:09:02 +03:00
const factory = (Radio) => {
class RadioButton extends Component {
static propTypes = {
checked: PropTypes.bool,
2016-11-23 11:59:51 +03:00
children: PropTypes.node,
2016-05-29 23:09:02 +03:00
className: PropTypes.string,
disabled: PropTypes.bool,
2016-06-19 22:37:46 +03:00
label: PropTypes.oneOfType([
PropTypes.string,
2017-01-26 20:05:32 +03:00
PropTypes.node,
2016-06-19 22:37:46 +03:00
]),
2016-05-29 23:09:02 +03:00
name: PropTypes.string,
onBlur: PropTypes.func,
onChange: PropTypes.func,
onFocus: PropTypes.func,
2016-11-30 19:04:00 +03:00
onMouseEnter: PropTypes.func,
onMouseLeave: PropTypes.func,
2016-05-29 23:09:02 +03:00
theme: PropTypes.shape({
disabled: PropTypes.string,
field: PropTypes.string,
input: PropTypes.string,
2017-01-26 20:05:32 +03:00
text: PropTypes.string,
2016-05-29 23:09:02 +03:00
}),
2017-01-26 20:05:32 +03:00
value: PropTypes.string,
2016-05-29 23:09:02 +03:00
};
2015-10-06 20:40:47 +03:00
2016-05-29 23:09:02 +03:00
static defaultProps = {
checked: false,
className: '',
2017-01-26 20:05:32 +03:00
disabled: false,
2016-05-29 23:09:02 +03:00
};
2015-10-06 20:40:47 +03:00
2016-05-29 23:09:02 +03:00
handleClick = (event) => {
2017-01-26 20:05:32 +03:00
const { checked, disabled, onChange } = this.props;
2016-05-29 23:09:02 +03:00
if (event.pageX !== 0 && event.pageY !== 0) this.blur();
if (!disabled && !checked && onChange) onChange(event, this);
};
2017-01-26 20:05:32 +03:00
blur() {
if (this.inputNode) {
this.inputNode.blur();
}
2016-05-29 23:09:02 +03:00
}
2017-01-26 20:05:32 +03:00
focus() {
if (this.inputNode) {
this.inputNode.focus();
}
2016-05-29 23:09:02 +03:00
}
2017-01-26 20:05:32 +03:00
render() {
const {
checked,
children,
className,
disabled,
label,
name,
onChange, // eslint-disable-line
onMouseEnter,
onMouseLeave,
theme,
...others
} = this.props;
2016-05-29 23:09:02 +03:00
const _className = classnames(theme[this.props.disabled ? 'disabled' : 'field'], className);
return (
2016-11-23 11:59:51 +03:00
<label
2017-01-26 20:05:32 +03:00
data-react-toolbox="radio-button"
2016-11-23 11:59:51 +03:00
className={_className}
2016-11-30 19:04:00 +03:00
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
2016-11-23 11:59:51 +03:00
>
2016-05-29 23:09:02 +03:00
<input
2016-11-30 19:04:00 +03:00
{...others}
2016-11-20 13:39:03 +03:00
checked={checked}
2016-05-29 23:09:02 +03:00
className={theme.input}
2016-11-20 13:39:03 +03:00
disabled={disabled}
2016-11-30 19:04:00 +03:00
name={name}
2016-11-20 13:39:03 +03:00
onChange={() => {}}
2016-11-30 19:04:00 +03:00
onClick={this.handleClick}
2017-01-26 20:05:32 +03:00
ref={(node) => { this.inputNode = node; }}
type="radio"
2016-05-29 23:09:02 +03:00
/>
2016-11-23 11:59:51 +03:00
<Radio checked={checked} disabled={disabled} theme={theme} />
2016-05-29 23:09:02 +03:00
{label ? <span className={theme.text}>{label}</span> : null}
2016-11-23 11:59:51 +03:00
{children}
2016-05-29 23:09:02 +03:00
</label>
);
}
}
2015-10-22 02:31:17 +03:00
2016-05-29 23:09:02 +03:00
return RadioButton;
};
const Radio = radioFactory(rippleFactory({ centered: true, spread: 2.6 }));
const RadioButton = factory(Radio);
export default themr(RADIO)(RadioButton);
export { factory as radioButtonFactory };
export { RadioButton };