Merge pull request #275 from argonism/fix-query-header-for-long-title

Author: morishin

src/renderer/components/QueryHeader/QueryHeader.css

@@ -1,22 +1,11 @@
 .QueryHeader {
   position: relative;
-}
-
-.QueryHeader-inputTitle {
-  font-weight: bold;
-  font-size: 24px;
-  margin: 0;
-  padding: 10px;
-  outline: none;
-  border: none;
-  font-family: inherit;
-  width: 100%;
-  height: 28px;
+  display: flex;
+  flex-direction: row;
+  justify-items: space-between;
 }
 
 .QueryHeader-selectDataSource {
-  position: absolute !important;
-  right: 10px;
-  top: 6px;
+  margin: auto 10px auto 20px;
   width: 240px;
 }

src/renderer/components/QueryHeader/QueryHeader.tsx

@@ -3,6 +3,7 @@ import Select from "react-select";
 import { selectStyles } from "../Select";
 import { QueryType } from "../../../lib/Database/Query";
 import { DataSourceType } from "../../pages/DataSource/DataSourceStore";
+import QueryHeaderTitle from "../QueryHeaderTitle";
 
 type Props = {
   readonly query: QueryType;
@@ -12,10 +13,6 @@ type Props = {
 };
 
 const QueryHeader: React.FC<Props> = ({ query, dataSources, onChangeTitle, onChangeDataSource }) => {
-  const handleChangeTitle = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    onChangeTitle(e.target.value);
-  };
-
   const handleChangeDataSource = React.useCallback(
     (e: any): void => {
       onChangeDataSource(e.value);
@@ -30,7 +27,7 @@ const QueryHeader: React.FC<Props> = ({ query, dataSources, onChangeTitle, onCha
 
   return (
     <div className="QueryHeader">
-      <input className="QueryHeader-inputTitle" type="text" value={query.title} onChange={handleChangeTitle} />
+      <QueryHeaderTitle title={query.title} onChangeTitle={onChangeTitle} />
       <Select
         className="QueryHeader-selectDataSource"
         value={currentOption}

src/renderer/components/QueryHeaderTitle/QueryHeaderTitle.css

@@ -0,0 +1,30 @@
+.QueryHeaderTitle {
+  position: relative;
+  width: 100%;
+}
+
+.QueryHeaderTitle-textarea {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  /* in order to center textarea.
+     There might be more proper way to do this. */
+  margin-top: 2px;
+
+  font-weight: bold;
+  font-size: 24px;
+  padding-left: 10px;
+  outline: none;
+  border: none;
+  font-family: inherit;
+  width: 100%;
+
+  resize: none;
+  word-break: break-all;
+}
+
+.QueryHeaderTitle-textarea:focus {
+  border: 1px solid #ccc;
+  border-width: 0 1px 1px 0;
+}

src/renderer/components/QueryHeaderTitle/QueryHeaderTitle.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+type Props = {
+  readonly title: string;
+  readonly onChangeTitle: (title: string) => void;
+};
+
+const QueryHeaderTitle: React.FC<Props> = ({ title, onChangeTitle }) => {
+  const handleTextareaHeight = (element: HTMLTextAreaElement): void => {
+    element.style.height = "";
+    element.style.height = element.scrollHeight + "px";
+  };
+
+  const handleTextareaBlur = (e: React.FocusEvent<HTMLTextAreaElement>): void => {
+    e.target.style.height = "";
+  };
+
+  const handleChangeTitle = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
+    onChangeTitle(e.target.value);
+    handleTextareaHeight(e.target);
+  };
+
+  return (
+    <div className="QueryHeaderTitle">
+      <textarea
+        className="QueryHeaderTitle-textarea"
+        value={title}
+        onFocus={(e) => handleTextareaHeight(e.target)}
+        onChange={handleChangeTitle}
+        onBlur={handleTextareaBlur}
+        rows={1}
+      />
+    </div>
+  );
+};
+
+export default QueryHeaderTitle;

src/renderer/components/QueryHeaderTitle/index.ts

@@ -0,0 +1,3 @@
+import "./QueryHeaderTitle.css";
+import QueryHeaderTitle from "./QueryHeaderTitle";
+export default QueryHeaderTitle;