All files / src/Form/RadioGroup RadioGroup.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { Component, cloneElement } from 'preact';
import PropTypes from 'prop-types';
import { StyledRadioGroup, StyledLabel } from './styles';
 
/**
 * Radio are switches used for selection from multiple options
 *
 * @example ./../../../docs/components/Form/RadioGroup.md
 */
class RadioGroup extends Component {
	static propTypes = {
 
		/**
		 * Custom styles
		 */
		style: PropTypes.string,
 
		/**
		 * Default selected value
		 */
		defaultSelected: PropTypes.string,
 
		onChange: PropTypes.func,
 
		horizontal: PropTypes.bool,
		
		grid: PropTypes.object,
		
		cell: PropTypes.object,
 
		hideLabel: PropTypes.bool,
 
		disabled: PropTypes.bool
	};
 
	static defaultProps = {
		defaultSelected: null,
		style: '',
		horizontal: false,
		grid :{
            columns: '1fr 2fr'
        }, 
        cell : {
            middle: true
		},
		hideLabel: false,
		disabled: false
	};
 
	get label () {
		const {
			label='', 
			hideLabel=false,
			cell={}
		} = this.props;
 
		if (hideLabel) {
			return '';
		}
 
		return (
			<Cell {...cell}>
				<StyledLabel for={label}>{label}</StyledLabel>
			</Cell>
		);
    }
 
	get selectedValue () {
		const { defaultSelected } = this.props;
		const { selected } = this.state;
		if (defaultSelected) {
			return defaultSelected;
		}
		return selected;
	}
 
	handleOnChange = (input) => {
		const { onChange } = this.props;
		this.setState({
			selected: input.value
		}, () => {
			if (typeof onChange === 'function') {
				onChange(input.value, input);
			}
		});
	}
 
	renderRadio = (child, index) => {
		const selectedValue = this.selectedValue;
 
		return cloneElement(child, {
			checked: selectedValue ? child.props.value === selectedValue : index === 0,
			key: index,
			onChange: this.handleOnChange,
			disabled: this.props.disabled,
			...child.props
		});
	}
 
	render() {
		const { style = {}, className, children, horizontal, grid, cell, disabled } = this.props;
		
		return (
			<Grid {...grid} alignContent="space-around">
				{this.label} 
				<Cell {...cell}>
					<StyledRadioGroup
						style={style}
						className={className}
						horizontal={horizontal}
						disabled={disabled}
					>
						{
							children.map((child, index) => {
								return (<div className="radio-item">{this.renderRadio(child, index)}</div>)
							})
						}
					</StyledRadioGroup>
				</Cell>
			</Grid>
		);
	}
}
 
export default RadioGroup;