Merged in feature/radio_button (pull request #164)

added radio component and used it in permissions

scm-ui-components/packages/ui-components/src/forms/Radio.js

@@ -0,0 +1,45 @@
+//@flow
+import React from "react";
+import { Help } from "../index";
+
+type Props = {
+  label?: string,
+  name?: string,
+  value?: string,
+  checked: boolean,
+  onChange?: (value: boolean, name?: string) => void,
+  disabled?: boolean,
+  helpText?: string
+};
+
+class Radio extends React.Component<Props> {
+  renderHelp = () => {
+    const helpText = this.props.helpText;
+    if (helpText) {
+      return <Help message={helpText} />;
+    }
+  };
+
+  render() {
+    return (
+      <div className="field is-grouped">
+        <div className="control">
+          <label className="radio" disabled={this.props.disabled}>
+            <input
+              type="radio"
+              name={this.props.name}
+              value={this.props.value}
+              checked={this.props.checked}
+              onChange={this.props.onChange}
+              disabled={this.props.disabled}
+            />{" "}
+            {this.props.label}
+            {this.renderHelp()}
+          </label>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Radio;

scm-ui-components/packages/ui-components/src/forms/index.js

@@ -4,6 +4,7 @@ export { default as AddEntryToTableField } from "./AddEntryToTableField.js";
 export { default as AutocompleteAddEntryToTableField } from "./AutocompleteAddEntryToTableField.js";
 export { default as MemberNameTable } from "./MemberNameTable.js";
 export { default as Checkbox } from "./Checkbox.js";
+export { default as Radio } from "./Radio.js";
 export { default as InputField } from "./InputField.js";
 export { default as Select } from "./Select.js";
 export { default as Textarea } from "./Textarea.js";

scm-ui/src/repos/permissions/components/CreatePermissionForm.js

@@ -1,7 +1,7 @@
 // @flow
 import React from "react";
 import { translate } from "react-i18next";
-import { Autocomplete, SubmitButton } from "@scm-manager/ui-components";
+import { Autocomplete, Radio, SubmitButton } from "@scm-manager/ui-components";
 import TypeSelector from "./TypeSelector";
 import type {
   PermissionCollection,
@@ -132,29 +132,20 @@ class CreatePermissionForm extends React.Component<Props, State> {
           {t("permission.add-permission.add-permission-heading")}
         </h2>
         <form onSubmit={this.submit}>
-          <div className="control">
+          <Radio
-            <label className="radio">
-              <input
-                type="radio"
             name="permission_scope"
-                checked={!this.state.groupPermission}
             value="USER_PERMISSION"
+            checked={!this.state.groupPermission}
+            label={t("permission.user-permission")}
             onChange={this.permissionScopeChanged}
           />
-              {t("permission.user-permission")}
+          <Radio
-            </label>
-            <label className="radio">
-              <input
-                type="radio"
             name="permission_scope"
             value="GROUP_PERMISSION"
             checked={this.state.groupPermission}
+            label={t("permission.group-permission")}
             onChange={this.permissionScopeChanged}
           />
-              {t("permission.group-permission")}
-            </label>
-          </div>
-
           <div className="columns">
             <div className="column is-three-quarters">
               {this.renderAutocompletionField()}