Introduce styled-components on form fields

10 files changed, 248 insertions, 218 deletions

diff --git a/src/settings/components/form/BlacklistForm.scss b/src/settings/components/form/BlacklistForm.scss
deleted file mode 100644
index a230d0d..0000000
--- a/src/settings/components/form/BlacklistForm.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.form-blacklist-form {
-  &-row {
-    display: flex;
-
-    .column-url {
-      flex: 1;
-    }
-  }
-}
diff --git a/src/settings/components/form/BlacklistForm.tsx b/src/settings/components/form/BlacklistForm.tsx
index 859cb9f..4d794f4 100644
--- a/src/settings/components/form/BlacklistForm.tsx
+++ b/src/settings/components/form/BlacklistForm.tsx
@@ -1,9 +1,29 @@
-import "./BlacklistForm.scss";
+import styled from "styled-components";
 import AddButton from "../ui/AddButton";
 import DeleteButton from "../ui/DeleteButton";
 import React from "react";
 import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist";
 
+const Grid = styled.div``;
+
+const GridRow = styled.div`
+  display: flex;
+`;
+
+const GridCell = styled.div<{ grow?: number }>`
+  &:nth-child(1) {
+    flex-grow: 1;
+  }
+  &:nth-child(2) {
+    flex-shrink: 1;
+  }
+`;
+
+const Input = styled.input`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
 interface Props {
   value: Blacklist;
   onChange: (value: Blacklist) => void;
@@ -19,37 +39,43 @@ class BlacklistForm extends React.Component<Props> {
 
   render() {
     return (
-      <div className="form-blacklist-form">
-        {this.props.value.items.map((item, index) => {
-          if (item.partial) {
-            return null;
-          }
-          return (
-            <div key={index} className="form-blacklist-form-row">
-              <input
-                data-index={index}
-                type="text"
-                name="url"
-                className="column-url"
-                value={item.pattern}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <DeleteButton
-                data-index={index}
-                name="delete"
-                onClick={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-            </div>
-          );
-        })}
+      <>
+        <Grid>
+          {this.props.value.items.map((item, index) => {
+            if (item.partial) {
+              return null;
+            }
+            return (
+              <GridRow key={index}>
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="url"
+                    value={item.pattern}
+                    placeholder="example.com/mail/*"
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <DeleteButton
+                    data-index={index}
+                    name="delete"
+                    onClick={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+              </GridRow>
+            );
+          })}
+        </Grid>
         <AddButton
           name="add"
           style={{ float: "right" }}
           onClick={this.bindValue.bind(this)}
         />
-      </div>
+      </>
     );
   }
 
diff --git a/src/settings/components/form/KeymapsForm.scss b/src/settings/components/form/KeymapsForm.scss
deleted file mode 100644
index 1a4e5cd..0000000
--- a/src/settings/components/form/KeymapsForm.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.form-keymaps-form {
-  column-count: 3;
-
-  &-field-group {
-    margin-top: 24px;
-  }
-
-  &-field-group:first-of-type {
-    margin-top: 24px;
-  }
-}
diff --git a/src/settings/components/form/KeymapsForm.tsx b/src/settings/components/form/KeymapsForm.tsx
index 25578ad..6582529 100644
--- a/src/settings/components/form/KeymapsForm.tsx
+++ b/src/settings/components/form/KeymapsForm.tsx
@@ -1,9 +1,21 @@
-import "./KeymapsForm.scss";
 import React from "react";
+import styled from "styled-components";
 import Text from "../ui/Text";
 import keymaps from "../../keymaps";
 import { FormKeymaps } from "../../../shared/SettingData";
 
+const Grid = styled.div`
+  column-count: 3;
+`;
+
+const FieldGroup = styled.div`
+  margin-top: 24px;
+
+  &:first-of-type {
+    margin-top: 24px;
+  }
+`;
+
 interface Props {
   value: FormKeymaps;
   onChange: (e: FormKeymaps) => void;
@@ -20,10 +32,10 @@ class KeymapsForm extends React.Component<Props> {
   render() {
     const values = this.props.value.toJSON();
     return (
-      <div className="form-keymaps-form">
+      <Grid>
         {keymaps.fields.map((group, index) => {
           return (
-            <div key={index} className="form-keymaps-form-field-group">
+            <FieldGroup key={index}>
               {group.map(([name, label]) => {
                 const value = values[name] || "";
                 return (
@@ -38,10 +50,10 @@ class KeymapsForm extends React.Component<Props> {
                   />
                 );
               })}
-            </div>
+            </FieldGroup>
           );
         })}
-      </div>
+      </Grid>
     );
   }
 
diff --git a/src/settings/components/form/PartialBlacklistForm.scss b/src/settings/components/form/PartialBlacklistForm.scss
deleted file mode 100644
index caf6f93..0000000
--- a/src/settings/components/form/PartialBlacklistForm.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.form-partial-blacklist-form {
-  @mixin row-base {
-    display: flex;
-
-    .column-url {
-      flex: 5;
-      min-width: 0;
-    }
-    .column-keys {
-      flex: 1;
-      min-width: 0;
-    }
-    .column-delete {
-      flex: 1;
-      min-width: 0;
-    }
-  }
-
-  &-header {
-    @include row-base;
-
-    font-weight: bold;
-  }
-
-  &-row {
-    @include row-base;
-  }
-}
diff --git a/src/settings/components/form/PartialBlacklistForm.tsx b/src/settings/components/form/PartialBlacklistForm.tsx
index 95beee8..4c6bd35 100644
--- a/src/settings/components/form/PartialBlacklistForm.tsx
+++ b/src/settings/components/form/PartialBlacklistForm.tsx
@@ -1,9 +1,36 @@
-import "./PartialBlacklistForm.scss";
+import React from "react";
+import styled from "styled-components";
 import AddButton from "../ui/AddButton";
 import DeleteButton from "../ui/DeleteButton";
-import React from "react";
 import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist";
 
+const Grid = styled.div``;
+
+const GridRow = styled.div`
+  display: flex;
+`;
+
+const GridCell = styled.div<{ grow?: number }>`
+  &:nth-child(1) {
+    flex-grow: 5;
+  }
+
+  &:nth-child(2) {
+    flex-shrink: 1;
+    min-width: 20%;
+    max-width: 20%;
+  }
+
+  &:nth-child(3) {
+    flex-shrink: 1;
+  }
+`;
+
+const Input = styled.input`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
 interface Props {
   value: Blacklist;
   onChange: (value: Blacklist) => void;
@@ -19,50 +46,58 @@ class PartialBlacklistForm extends React.Component<Props> {
 
   render() {
     return (
-      <div className="form-partial-blacklist-form">
-        <div className="form-partial-blacklist-form-header">
-          <div className="column-url">URL</div>
-          <div className="column-keys">Keys</div>
-        </div>
-        {this.props.value.items.map((item, index) => {
-          if (!item.partial) {
-            return null;
-          }
-          return (
-            <div key={index} className="form-partial-blacklist-form-row">
-              <input
-                data-index={index}
-                type="text"
-                name="url"
-                className="column-url"
-                value={item.pattern}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <input
-                data-index={index}
-                type="text"
-                name="keys"
-                className="column-keys"
-                value={item.keys.join(",")}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <DeleteButton
-                data-index={index}
-                name="delete"
-                onClick={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-            </div>
-          );
-        })}
+      <>
+        <Grid>
+          <GridRow>
+            <GridCell>URL</GridCell>
+            <GridCell>Keys</GridCell>
+          </GridRow>
+          {this.props.value.items.map((item, index) => {
+            if (!item.partial) {
+              return null;
+            }
+            return (
+              <GridRow key={index}>
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="url"
+                    value={item.pattern}
+                    placeholder="example.com/mail/*"
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="keys"
+                    value={item.keys.join(",")}
+                    placeholder="j,k,<C-d>,<C-u>"
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <DeleteButton
+                    data-index={index}
+                    name="delete"
+                    onClick={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+              </GridRow>
+            );
+          })}
+        </Grid>
         <AddButton
           name="add"
           style={{ float: "right" }}
           onClick={this.bindValue.bind(this)}
         />
-      </div>
+      </>
     );
   }
 
diff --git a/src/settings/components/form/PropertiesForm.scss b/src/settings/components/form/PropertiesForm.scss
deleted file mode 100644
index 7c9e167..0000000
--- a/src/settings/components/form/PropertiesForm.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.form-properties-form {
-  &-row {
-    .column-name {
-      display: inline-block;
-      min-width: 5rem;
-      font-weight: bold;
-    }
-    .column-input {
-      line-height: 2.2rem;
-    }
-  }
-}
diff --git a/src/settings/components/form/PropertiesForm.tsx b/src/settings/components/form/PropertiesForm.tsx
index aebd9b1..53ebf03 100644
--- a/src/settings/components/form/PropertiesForm.tsx
+++ b/src/settings/components/form/PropertiesForm.tsx
@@ -1,6 +1,20 @@
-import "./PropertiesForm.scss";
+import styled from "styled-components";
 import React from "react";
 
+const Form = styled.div``;
+
+const Row = styled.div``;
+
+const Label = styled.label`
+  display: inline-block;
+  min-width: 5rem;
+  font-weight: bold;
+`;
+
+const Input = styled.input`
+  line-height: 2.2rem;
+`;
+
 interface Props {
   types: { [key: string]: string };
   value: { [key: string]: any };
@@ -21,7 +35,7 @@ class PropertiesForm extends React.Component<Props> {
     const values = this.props.value;
 
     return (
-      <div className="form-properties-form">
+      <Form>
         {Object.keys(types).map((name) => {
           const type = types[name];
           let inputType = "";
@@ -42,23 +56,22 @@ class PropertiesForm extends React.Component<Props> {
             return null;
           }
           return (
-            <div key={name} className="form-properties-form-row">
-              <label>
-                <span className="column-name">{name}</span>
-                <input
+            <Row key={name}>
+              <Label>
+                <span>{name}</span>
+                <Input
                   type={inputType}
                   name={name}
-                  className="column-input"
                   value={values[name] ? values[name] : ""}
                   onChange={onChange}
                   onBlur={this.props.onBlur}
                   checked={values[name]}
                 />
-              </label>
-            </div>
+              </Label>
+            </Row>
           );
         })}
-      </div>
+      </Form>
     );
   }
 
diff --git a/src/settings/components/form/SearchForm.scss b/src/settings/components/form/SearchForm.scss
deleted file mode 100644
index 26b2f44..0000000
--- a/src/settings/components/form/SearchForm.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.form-search-form {
-  @mixin row-base {
-    display: flex;
-
-    .column-name {
-      flex: 1;
-      min-width: 0;
-    }
-    .column-url {
-      flex: 5;
-      min-width: 0;
-    }
-    .column-option {
-      text-align: right;
-      flex-basis: 5rem;
-    }
-  }
-
-  &-header {
-    @include row-base;
-
-    font-weight: bold;
-  }
-
-  &-row {
-    @include row-base;
-  }
-}
diff --git a/src/settings/components/form/SearchForm.tsx b/src/settings/components/form/SearchForm.tsx
index a4d923d..3ba0299 100644
--- a/src/settings/components/form/SearchForm.tsx
+++ b/src/settings/components/form/SearchForm.tsx
@@ -1,9 +1,37 @@
-import "./SearchForm.scss";
 import React from "react";
+import styled from "styled-components";
 import AddButton from "../ui/AddButton";
 import DeleteButton from "../ui/DeleteButton";
 import { FormSearch } from "../../../shared/SettingData";
 
+const Grid = styled.div``;
+
+const GridRow = styled.div`
+  display: flex;
+`;
+
+const GridCell = styled.div<{ grow?: number }>`
+  &:nth-child(1) {
+    flex-grow: 0;
+    min-width: 10%;
+    max-width: 10%;
+  }
+
+  &:nth-child(2) {
+    flex-grow: 2;
+  }
+
+  &:nth-child(3) {
+    flex-grow: 0;
+    flex-shrink: 1;
+  }
+`;
+
+const Input = styled.input`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
 interface Props {
   value: FormSearch;
   onChange: (value: FormSearch) => void;
@@ -20,57 +48,61 @@ class SearchForm extends React.Component<Props> {
   render() {
     const value = this.props.value.toJSON();
     return (
-      <div className="form-search-form">
-        <div className="form-search-form-header">
-          <div className="column-name">Name</div>
-          <div className="column-url">URL</div>
-          <div className="column-option">Default</div>
-        </div>
-        {value.engines.map((engine, index) => {
-          return (
-            <div key={index} className="form-search-form-row">
-              <input
-                data-index={index}
-                type="text"
-                name="name"
-                className="column-name"
-                value={engine[0]}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <input
-                data-index={index}
-                type="text"
-                name="url"
-                placeholder="http://example.com/?q={}"
-                className="column-url"
-                value={engine[1]}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <div className="column-option">
-                <input
-                  data-index={index}
-                  type="radio"
-                  name="default"
-                  checked={value.default === engine[0]}
-                  onChange={this.bindValue.bind(this)}
-                />
-                <DeleteButton
-                  data-index={index}
-                  name="delete"
-                  onClick={this.bindValue.bind(this)}
-                />
-              </div>
-            </div>
-          );
-        })}
+      <>
+        <Grid>
+          <GridRow>
+            <GridCell>Name</GridCell>
+            <GridCell>URL</GridCell>
+            <GridCell>Default</GridCell>
+          </GridRow>
+          {value.engines.map((engine, index) => {
+            return (
+              <GridRow key={index}>
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="name"
+                    value={engine[0]}
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="url"
+                    placeholder="http://example.com/?q={}"
+                    value={engine[1]}
+                    onChange={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+                <GridCell>
+                  <input
+                    data-index={index}
+                    type="radio"
+                    name="default"
+                    checked={value.default === engine[0]}
+                    onChange={this.bindValue.bind(this)}
+                  />
+                  <DeleteButton
+                    data-index={index}
+                    name="delete"
+                    onClick={this.bindValue.bind(this)}
+                  />
+                </GridCell>
+              </GridRow>
+            );
+          })}
+        </Grid>
         <AddButton
           name="add"
           style={{ float: "right" }}
           onClick={this.bindValue.bind(this)}
         />
-      </div>
+      </>
     );
   }