From 0ae185ef01c1206f54fe6b35865a7025d3dae5eb Mon Sep 17 00:00:00 2001
From: Rene Pfeuffer <rene.pfeuffer@cloudogu.com>
Date: Tue, 10 Dec 2019 11:29:55 +0100
Subject: [PATCH 1/5] Add optional submit function for text areas

---
 scm-ui/ui-components/src/forms/Textarea.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/scm-ui/ui-components/src/forms/Textarea.tsx b/scm-ui/ui-components/src/forms/Textarea.tsx
index b16c33b708..9486e3e273 100644
--- a/scm-ui/ui-components/src/forms/Textarea.tsx
+++ b/scm-ui/ui-components/src/forms/Textarea.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, KeyboardEvent } from "react";
 import LabelWithHelpIcon from "./LabelWithHelpIcon";
 
 type Props = {
@@ -10,6 +10,7 @@ type Props = {
   onChange: (value: string, name?: string) => void;
   helpText?: string;
   disabled?: boolean;
+  onSubmit?: () => void;
 };
 
 class Textarea extends React.Component<Props> {
@@ -25,6 +26,13 @@ class Textarea extends React.Component<Props> {
     this.props.onChange(event.target.value, this.props.name);
   };
 
+  onKeyPress = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    const { onSubmit } = this.props;
+    if (onSubmit && event.key === "Enter" && event.ctrlKey) {
+      onSubmit();
+    }
+  };
+
   render() {
     const { placeholder, value, label, helpText, disabled } = this.props;
 
@@ -41,6 +49,7 @@ class Textarea extends React.Component<Props> {
             onChange={this.handleInput}
             value={value}
             disabled={!!disabled}
+            onKeyPress={this.onKeyPress}
           />
         </div>
       </div>

From 01ad8c7bb9c410677bd15a31183754b3a5aaeb83 Mon Sep 17 00:00:00 2001
From: Rene Pfeuffer <rene.pfeuffer@cloudogu.com>
Date: Tue, 10 Dec 2019 11:59:30 +0100
Subject: [PATCH 2/5] Add optional cancel function for text areas

---
 scm-ui/ui-components/src/forms/Textarea.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/scm-ui/ui-components/src/forms/Textarea.tsx b/scm-ui/ui-components/src/forms/Textarea.tsx
index 9486e3e273..694fcf50f0 100644
--- a/scm-ui/ui-components/src/forms/Textarea.tsx
+++ b/scm-ui/ui-components/src/forms/Textarea.tsx
@@ -11,6 +11,7 @@ type Props = {
   helpText?: string;
   disabled?: boolean;
   onSubmit?: () => void;
+  onCancel?: () => void;
 };
 
 class Textarea extends React.Component<Props> {
@@ -33,6 +34,13 @@ class Textarea extends React.Component<Props> {
     }
   };
 
+  onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    const { onCancel } = this.props;
+    if (onCancel && event.key === "Escape") {
+      onCancel();
+    }
+  };
+
   render() {
     const { placeholder, value, label, helpText, disabled } = this.props;
 
@@ -50,6 +58,7 @@ class Textarea extends React.Component<Props> {
             value={value}
             disabled={!!disabled}
             onKeyPress={this.onKeyPress}
+            onKeyDown={this.onKeyDown}
           />
         </div>
       </div>

From 783aaf2b78e3f7882cf29b300c84082c11acd160 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Wed, 11 Dec 2019 21:52:11 +0100
Subject: [PATCH 3/5] handle submit key press on mac osx

---
 .../src/forms/Textarea.stories.tsx            | 56 +++++++++++++++++++
 scm-ui/ui-components/src/forms/Textarea.tsx   | 14 ++---
 2 files changed, 62 insertions(+), 8 deletions(-)
 create mode 100644 scm-ui/ui-components/src/forms/Textarea.stories.tsx

diff --git a/scm-ui/ui-components/src/forms/Textarea.stories.tsx b/scm-ui/ui-components/src/forms/Textarea.stories.tsx
new file mode 100644
index 0000000000..a27b2b738c
--- /dev/null
+++ b/scm-ui/ui-components/src/forms/Textarea.stories.tsx
@@ -0,0 +1,56 @@
+import React, {useState} from "react";
+import { storiesOf } from "@storybook/react";
+import styled from "styled-components";
+import Textarea from "./Textarea";
+
+const Spacing = styled.div`
+  padding: 2em;
+`;
+
+const OnChangeTextarea = () => {
+  const [value, setValue] = useState("Start typing");
+  return (
+    <Spacing>
+      <Textarea value={value} onChange={v => setValue(v)} />
+      <hr />
+      <p>{value}</p>
+    </Spacing>
+  );
+};
+
+const OnSubmitTextare = () => {
+  const [value, setValue] = useState("Use the ctrl/command + Enter to submit the textarea");
+  const [submitted, setSubmitted] = useState("");
+
+  const submit = () => {
+    setSubmitted(value);
+    setValue("");
+  };
+
+  return (
+    <Spacing>
+      <Textarea value={value} onChange={v => setValue(v)} onSubmit={submit} />
+      <hr />
+      <p>{submitted}</p>
+    </Spacing>
+  );
+};
+
+const OnCancelTextare = () => {
+  const [value, setValue] = useState("Use the escape key to clear the textarea");
+
+  const cancel = () => {
+    setValue("");
+  };
+
+  return (
+    <Spacing>
+      <Textarea value={value} onChange={v => setValue(v)} onCancel={cancel} />
+    </Spacing>
+  );
+};
+
+storiesOf("Forms|Textarea", module)
+  .add("OnChange", () => <OnChangeTextarea />)
+  .add("OnSubmit", () => <OnSubmitTextare />)
+  .add("OnCancel", () => <OnCancelTextare />);
diff --git a/scm-ui/ui-components/src/forms/Textarea.tsx b/scm-ui/ui-components/src/forms/Textarea.tsx
index 694fcf50f0..90ae07b576 100644
--- a/scm-ui/ui-components/src/forms/Textarea.tsx
+++ b/scm-ui/ui-components/src/forms/Textarea.tsx
@@ -27,17 +27,16 @@ class Textarea extends React.Component<Props> {
     this.props.onChange(event.target.value, this.props.name);
   };
 
-  onKeyPress = (event: KeyboardEvent<HTMLTextAreaElement>) => {
-    const { onSubmit } = this.props;
-    if (onSubmit && event.key === "Enter" && event.ctrlKey) {
-      onSubmit();
-    }
-  };
-
   onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     const { onCancel } = this.props;
     if (onCancel && event.key === "Escape") {
       onCancel();
+      return;
+    }
+
+    const { onSubmit } = this.props;
+    if (onSubmit && event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+      onSubmit();
     }
   };
 
@@ -57,7 +56,6 @@ class Textarea extends React.Component<Props> {
             onChange={this.handleInput}
             value={value}
             disabled={!!disabled}
-            onKeyPress={this.onKeyPress}
             onKeyDown={this.onKeyDown}
           />
         </div>

From 705bcb22c6c23fdad246ef1f5706670a3082e38f Mon Sep 17 00:00:00 2001
From: Rene Pfeuffer <rene.pfeuffer@cloudogu.com>
Date: Thu, 12 Dec 2019 08:33:01 +0100
Subject: [PATCH 4/5] Add story shot for text area

---
 .../src/__snapshots__/storyshots.test.ts.snap | 77 +++++++++++++++++++
 1 file changed, 77 insertions(+)

diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index ac759241d2..ac6a6638fc 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -456,6 +456,83 @@ exports[`Storyshots Forms|Radio Disabled 1`] = `
 </div>
 `;
 
+exports[`Storyshots Forms|Textarea OnCancel 1`] = `
+<div
+  className="sc-dVhcbM ituOZx"
+>
+  <div
+    className="field"
+  >
+    
+    <div
+      className="control"
+    >
+      <textarea
+        className="textarea"
+        disabled={false}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value="Use the escape key to clear the textarea"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Forms|Textarea OnChange 1`] = `
+<div
+  className="sc-dVhcbM ituOZx"
+>
+  <div
+    className="field"
+  >
+    
+    <div
+      className="control"
+    >
+      <textarea
+        className="textarea"
+        disabled={false}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value="Start typing"
+      />
+    </div>
+  </div>
+  <hr />
+  <p>
+    Start typing
+  </p>
+</div>
+`;
+
+exports[`Storyshots Forms|Textarea OnSubmit 1`] = `
+<div
+  className="sc-dVhcbM ituOZx"
+>
+  <div
+    className="field"
+  >
+    
+    <div
+      className="control"
+    >
+      <textarea
+        className="textarea"
+        disabled={false}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value="Use the ctrl/command + Enter to submit the textarea"
+      />
+    </div>
+  </div>
+  <hr />
+  <p>
+    
+  </p>
+</div>
+`;
+
 exports[`Storyshots Loading Default 1`] = `
 <div>
   <div

From 757cddd916a3bde1b0751700c85ae4dc0b1da1d0 Mon Sep 17 00:00:00 2001
From: Rene Pfeuffer <rene.pfeuffer@cloudogu.com>
Date: Thu, 12 Dec 2019 08:09:28 +0000
Subject: [PATCH 5/5] Close branch feature/submit_text_areas