From f2f806cf1d294cb32273f58b30b6b22acbb614d0 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Thu, 2 Aug 2018 16:18:34 +0200
Subject: [PATCH] use textarea instead of input for repository description

---
 scm-ui/src/components/forms/Textarea.js       | 54 +++++++++++++++++++
 scm-ui/src/repos/components/RepositoryForm.js |  3 +-
 2 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 scm-ui/src/components/forms/Textarea.js

diff --git a/scm-ui/src/components/forms/Textarea.js b/scm-ui/src/components/forms/Textarea.js
new file mode 100644
index 0000000000..3144c00d0c
--- /dev/null
+++ b/scm-ui/src/components/forms/Textarea.js
@@ -0,0 +1,54 @@
+//@flow
+import React from "react";
+
+export type SelectItem = {
+  value: string,
+  label: string
+};
+
+type Props = {
+  label?: string,
+  placeholder?: SelectItem[],
+  value?: string,
+  onChange: string => void
+};
+
+class Textarea extends React.Component<Props> {
+  field: ?HTMLTextAreaElement;
+
+  handleInput = (event: SyntheticInputEvent<HTMLTextAreaElement>) => {
+    this.props.onChange(event.target.value);
+  };
+
+  renderLabel = () => {
+    const label = this.props.label;
+    if (label) {
+      return <label className="label">{label}</label>;
+    }
+    return "";
+  };
+
+  render() {
+    const { placeholder, value } = this.props;
+
+    return (
+      <div className="field">
+        {this.renderLabel()}
+        <div className="control">
+          <textarea
+            className="textarea"
+            ref={input => {
+              this.field = input;
+            }}
+            placeholder={placeholder}
+            onChange={this.handleInput}
+          >
+            {value}
+          </textarea>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Textarea;
diff --git a/scm-ui/src/repos/components/RepositoryForm.js b/scm-ui/src/repos/components/RepositoryForm.js
index 3c83f88115..92741f1d83 100644
--- a/scm-ui/src/repos/components/RepositoryForm.js
+++ b/scm-ui/src/repos/components/RepositoryForm.js
@@ -6,6 +6,7 @@ import { SubmitButton } from "../../components/buttons";
 import type { Repository } from "../types/Repositories";
 import * as validator from "./repositoryValidation";
 import type { RepositoryType } from "../types/RepositoryTypes";
+import Textarea from "../../components/forms/Textarea";
 
 type Props = {
   submitForm: Repository => void,
@@ -89,7 +90,7 @@ class RepositoryForm extends React.Component<Props, State> {
           errorMessage={t("validation.contact-invalid")}
         />
 
-        <InputField
+        <Textarea
           label={t("repository.description")}
           onChange={this.handleDescriptionChange}
           value={repository ? repository.description : ""}