Merged in feature/submit_text_areas (pull request #372)

Add optional submit function for text areas

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

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 />);

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,8 @@ type Props = {
   onChange: (value: string, name?: string) => void;
   helpText?: string;
   disabled?: boolean;
+  onSubmit?: () => void;
+  onCancel?: () => void;
 };
 
 class Textarea extends React.Component<Props> {
@@ -25,6 +27,19 @@ class Textarea extends React.Component<Props> {
     this.props.onChange(event.target.value, this.props.name);
   };
 
+  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();
+    }
+  };
+
   render() {
     const { placeholder, value, label, helpText, disabled } = this.props;
 
@@ -41,6 +56,7 @@ class Textarea extends React.Component<Props> {
             onChange={this.handleInput}
             value={value}
             disabled={!!disabled}
+            onKeyDown={this.onKeyDown}
           />
         </div>
       </div>