box-ui-elements-mlh/es/components/radio/RadioGroup.js.flow

Box UI Elements

// @flow
import * as React from 'react';

type Props = {
    children: React.Node,
    className: string,
    name?: string,
    onChange?: Function,
    value?: string,
};

type State = {
    value?: string,
};

class RadioGroup extends React.Component<Props, State> {
    static defaultProps = {
        className: '',
    };

    constructor(props: Props) {
        super(props);
        this.state = {
            value: props.value,
        };
    }

    // @TODO: think about adding componentDidUpdate or gDSFP
    // to update the internal state value based on new props value

    onChangeHandler = (event: SyntheticEvent<>) => {
        const { target } = event;
        const { onChange } = this.props;

        if (target instanceof HTMLInputElement) {
            this.setState({
                value: target.value,
            });
        }

        if (onChange) {
            onChange(event);
        }
    };

    render() {
        const { children, className, name } = this.props;
        const { value: stateValue } = this.state;

        return (
            <div className={`radio-group ${className}`} onChange={this.onChangeHandler}>
                {React.Children.map(children, radio => {
                    const { value } = radio.props;

                    return React.cloneElement(radio, {
                        name,
                        isSelected: value === stateValue,
                    });
                })}
            </div>
        );
    }
}

export type RadioGroupProps = Props;
export default RadioGroup;