Radio button and hidden FormGroups.

Kai Reinhard

21.28.2019 62896e333804c9558d6cadd27c61c3a1e722e70f

Radio button and hidden FormGroups.

 borgbutler-webapp/src/components/general/forms/FormComponents.jsx

@@ -3,8 +3,9 @@
import classNames from 'classnames';
import {FormFeedback, Input, UncontrolledTooltip} from 'reactstrap';
import {FormCheckbox} from "./FormCheckbox";
import {FormRadioButton} from "./FormRadioButton";
import {FormButton} from "./FormButton";
import {FormSelect, FormOption} from "./FormSelect";
import {FormOption, FormSelect} from "./FormSelect";
import {revisedRandId} from "../../../utilities/global";
import I18n from "../translation/I18n";

@@ -163,7 +164,7 @@
const FormLabelField = (props) => {
    const forId = props.children.props.id || props.children.props.name || props.htmlFor || revisedRandId();
    return (
        <FormGroup>
        <FormGroup className={props.className}>
            <FormLabel length={props.labelLength} htmlFor={forId}>
                {props.label}
            </FormLabel>
@@ -176,6 +177,7 @@

FormLabelField.propTypes = {
    id: PropTypes.string,
    className: PropTypes.string,
    htmlFor: PropTypes.string,
    validationMessage: PropTypes.string,
    labelLength: PropTypes.number,
@@ -187,6 +189,7 @@

FormLabelField.defaultProps = {
    id: null,
    className: null,
    htmlFor: null,
    validationMessage: null,
    labelLength: 2,
@@ -205,6 +208,7 @@
            label={props.label}
            hint={props.hint}
            validationState={props.validationState}
            className={props.className}
        >
            <FormInput
                id={props.id}
@@ -227,6 +231,7 @@
FormLabelInputField.propTypes = {
    id: PropTypes.string,
    label: PropTypes.node,
    className: PropTypes.node,
    labelLength: PropTypes.number,
    fieldLength: PropTypes.number,
    hint: PropTypes.string,
@@ -244,6 +249,7 @@

FormLabelInputField.defaultProps = {
    id: null,
    className: null,
    label: '',
    labelLength: 2,
    fieldLength: 10,
@@ -294,6 +300,7 @@
    FormSelect,
    FormOption,
    FormCheckbox,
    FormRadioButton,
    FormLabelInputField,
    FormFieldset,
    FormButton,

 borgbutler-webapp/src/components/general/forms/FormRadioButton.jsx

New file
@@ -0,0 +1,62 @@
import React from 'react';
import PropTypes from 'prop-types';
import {UncontrolledTooltip} from 'reactstrap';
import {revisedRandId} from "../../../utilities/global";
import classNames from 'classnames';
import I18n from "../translation/I18n";

class FormRadioButton extends React.Component {

    _id = this.props.id || revisedRandId();

    render() {
        const {id, className, labelKey, label, hint, hintKey, ...other} = this.props;
        let tooltip = null;
        let hintId = null;
        if (hint || hintKey) {
            hintId = `hint-${this._id}`;
            tooltip =
                <UncontrolledTooltip placement="right" target={hintId}>
                    {hintKey ? <I18n name={hintKey}/> : hint}
                </UncontrolledTooltip>;
        }
        let labelNode = <label
            className={'custom-control-label'}
            htmlFor={this._id}>
            {labelKey ? <I18n name={labelKey}/> : this.props.label}
        </label>;
        return (
            <React.Fragment>
                <div className="custom-control custom-radio custom-control-inline" id={hintId}>
                    <input type="radio"
                           id={this._id}
                           className={classNames('custom-control-input', className)}
                           {...other}
                    />
                    {labelNode}
                </div>
                {tooltip}
            </React.Fragment>
        );
    }
}

FormRadioButton.propTypes = {
    id: PropTypes.string,
    name: PropTypes.string,
    checked: PropTypes.bool,
    onChange: PropTypes.func,
    hint: PropTypes.string,
    label: PropTypes.node,
    labelKey: PropTypes.string
};

FormRadioButton.defaultProps = {
    checked: false,
    onChange: null
};


export {
    FormRadioButton
};

 borgbutler-webapp/src/css/my-style.css

@@ -2,6 +2,10 @@
    color: #50555f;
}

.hidden {
    display: none;
}

a:hover {
    color: #47a7eb;
}