From 62896e333804c9558d6cadd27c61c3a1e722e70f Mon Sep 17 00:00:00 2001
From: Kai Reinhard <K.Reinhard@micromata.de>
Date: Mon, 21 Jan 2019 00:28:47 +0000
Subject: [PATCH] Radio button and hidden FormGroups.
---
borgbutler-webapp/src/components/general/forms/FormRadioButton.jsx | 62 +++++++++++++++++++++++++++++++
borgbutler-webapp/src/components/general/forms/FormComponents.jsx | 11 ++++-
borgbutler-webapp/src/css/my-style.css | 4 ++
3 files changed, 75 insertions(+), 2 deletions(-)
diff --git a/borgbutler-webapp/src/components/general/forms/FormComponents.jsx b/borgbutler-webapp/src/components/general/forms/FormComponents.jsx
index 62b578b..32a84ff 100644
--- a/borgbutler-webapp/src/components/general/forms/FormComponents.jsx
+++ b/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,
diff --git a/borgbutler-webapp/src/components/general/forms/FormRadioButton.jsx b/borgbutler-webapp/src/components/general/forms/FormRadioButton.jsx
new file mode 100644
index 0000000..e92f6e5
--- /dev/null
+++ b/borgbutler-webapp/src/components/general/forms/FormRadioButton.jsx
@@ -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
+};
diff --git a/borgbutler-webapp/src/css/my-style.css b/borgbutler-webapp/src/css/my-style.css
index 93e77de..cd73f9d 100644
--- a/borgbutler-webapp/src/css/my-style.css
+++ b/borgbutler-webapp/src/css/my-style.css
@@ -2,6 +2,10 @@
color: #50555f;
}
+.hidden {
+ display: none;
+}
+
a:hover {
color: #47a7eb;
}
--
Gitblit v1.10.0