2019-07-25 14:29:50 +00:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2019-08-02 14:32:25 +00:00
|
|
|
import styled, { css } from 'styled-components';
|
2019-07-25 14:29:50 +00:00
|
|
|
import { Icons } from '../icons';
|
|
|
|
import { Text } from '../text';
|
|
|
|
|
2019-08-02 15:18:50 +00:00
|
|
|
const disableColor = '#A3A9AE';
|
2019-08-02 14:32:25 +00:00
|
|
|
const hoverColor = disableColor;
|
|
|
|
const internalCircleDisabledColor = '#D0D5DA';
|
|
|
|
const externalCircleDisabledColor = '#eceef1';
|
2019-07-25 14:29:50 +00:00
|
|
|
|
2019-08-20 13:35:37 +00:00
|
|
|
const ClearLabel = ({ spacing, isDisabled, ...props }) => <label {...props} />
|
2019-08-02 15:18:50 +00:00
|
|
|
const Label = styled(ClearLabel)`
|
2019-07-25 14:29:50 +00:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
position: relative;
|
|
|
|
margin: 0;
|
|
|
|
user-select: none;
|
2019-07-29 08:47:41 +00:00
|
|
|
cursor: ${props => !props.isDisabled && 'pointer'};
|
2019-07-25 14:29:50 +00:00
|
|
|
|
|
|
|
.radiobutton {
|
2019-08-02 14:32:25 +00:00
|
|
|
margin-right: 4px;
|
2019-07-25 14:29:50 +00:00
|
|
|
}
|
2019-08-02 14:32:25 +00:00
|
|
|
|
|
|
|
${props =>
|
|
|
|
props.isDisabled
|
|
|
|
? css`
|
|
|
|
cursor: default;
|
|
|
|
path:first-child {
|
|
|
|
stroke: ${externalCircleDisabledColor};
|
|
|
|
}
|
|
|
|
path:nth-child(even) {
|
|
|
|
fill: ${internalCircleDisabledColor};
|
|
|
|
}
|
|
|
|
`
|
|
|
|
: css`
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
svg {
|
|
|
|
path:first-child {
|
|
|
|
stroke: ${hoverColor};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`}
|
2019-08-02 15:18:50 +00:00
|
|
|
|
|
|
|
&:not(:first-child) {
|
|
|
|
margin-left: ${props => props.spacing}px;
|
|
|
|
}
|
2019-07-25 14:29:50 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const Input = styled.input`
|
|
|
|
position: absolute;
|
|
|
|
z-index: -1;
|
|
|
|
opacity: 0.0001;
|
|
|
|
`;
|
|
|
|
|
2019-08-02 14:32:25 +00:00
|
|
|
const RadiobuttonIcon = ({ isChecked, isDisabled }) => {
|
|
|
|
const iconName = isChecked
|
|
|
|
? "RadiobuttonCheckedIcon"
|
|
|
|
: "RadiobuttonIcon";
|
|
|
|
|
|
|
|
let newProps = {
|
|
|
|
size: "medium",
|
|
|
|
className: "radiobutton"
|
|
|
|
};
|
|
|
|
|
|
|
|
if (isDisabled) {
|
|
|
|
newProps.isfill = true;
|
|
|
|
newProps.color = "#F8F9F9";
|
|
|
|
};
|
|
|
|
|
|
|
|
return <>{React.createElement(Icons[iconName], { ...newProps })}</>;
|
|
|
|
};
|
|
|
|
|
2019-07-25 14:29:50 +00:00
|
|
|
class RadioButton extends React.Component {
|
|
|
|
|
2019-07-26 12:43:13 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
isChecked: this.props.isChecked
|
|
|
|
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
if (this.props.isChecked !== prevProps.isChecked) {
|
|
|
|
this.setState({ isChecked: this.props.isChecked });
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-07-25 14:29:50 +00:00
|
|
|
render() {
|
2019-08-08 14:48:07 +00:00
|
|
|
|
|
|
|
const colorProps = this.props.isDisabled ? {color: disableColor} : {};
|
|
|
|
|
2019-07-25 14:29:50 +00:00
|
|
|
return (
|
2019-08-02 15:18:50 +00:00
|
|
|
<Label
|
|
|
|
spacing={this.props.spacing}
|
|
|
|
isDisabled={this.props.isDisabled}>
|
|
|
|
<Input type='radio'
|
|
|
|
name={this.props.name}
|
|
|
|
value={this.props.value}
|
|
|
|
checked={this.props.isChecked}
|
|
|
|
onChange={this.props.onChange ? this.props.onChange : (e) => {
|
|
|
|
this.setState({ isChecked: true })
|
|
|
|
this.props.onClick && this.props.onClick(e);
|
|
|
|
}}
|
|
|
|
disabled={this.props.isDisabled} />
|
|
|
|
<RadiobuttonIcon {...this.props} />
|
|
|
|
<Text.Body
|
2019-08-06 14:31:52 +00:00
|
|
|
as='span'
|
2019-08-08 14:48:07 +00:00
|
|
|
{...colorProps}
|
2019-08-02 15:18:50 +00:00
|
|
|
>
|
|
|
|
{this.props.label || this.props.value}
|
|
|
|
</Text.Body>
|
|
|
|
</Label>
|
2019-07-25 14:29:50 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
RadioButton.propTypes = {
|
2019-07-26 12:43:13 +00:00
|
|
|
isChecked: PropTypes.bool,
|
|
|
|
isDisabled: PropTypes.bool,
|
|
|
|
label: PropTypes.string,
|
2019-07-25 14:29:50 +00:00
|
|
|
name: PropTypes.string.isRequired,
|
|
|
|
onChange: PropTypes.func,
|
2019-07-26 13:24:13 +00:00
|
|
|
onClick: PropTypes.func,
|
2019-07-26 12:43:13 +00:00
|
|
|
value: PropTypes.string.isRequired,
|
2019-07-25 14:29:50 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
RadioButton.defaultProps = {
|
2019-07-26 12:43:13 +00:00
|
|
|
isChecked: false,
|
|
|
|
isDisabled: false,
|
2019-07-25 14:29:50 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export default RadioButton;
|