Merge pull request #838 from ueokande/form-styled-components

Use styled-components instead of vanilla CSS/SCSS in option

1 files changed, 85 insertions, 41 deletions

diff --git a/src/settings/components/form/PartialBlacklistForm.tsx b/src/settings/components/form/PartialBlacklistForm.tsx
index 95beee8..b2da2bb 100644
--- a/src/settings/components/form/PartialBlacklistForm.tsx
+++ b/src/settings/components/form/PartialBlacklistForm.tsx
@@ -1,9 +1,41 @@
-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 GridHeader = styled.div`
+  display: flex;
+  font-weight: bold;
+`;
+
+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 +51,62 @@ 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 role="list">
+          <GridHeader>
+            <GridCell>URL</GridCell>
+            <GridCell>Keys</GridCell>
+          </GridHeader>
+          {this.props.value.items.map((item, index) => {
+            if (!item.partial) {
+              return null;
+            }
+            return (
+              <GridRow key={index} role="listitem">
+                <GridCell>
+                  <Input
+                    data-index={index}
+                    type="text"
+                    name="url"
+                    aria-label="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"
+                    aria-label="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"
+                    aria-label="Delete"
+                    onClick={this.bindValue.bind(this)}
+                    onBlur={this.props.onBlur}
+                  />
+                </GridCell>
+              </GridRow>
+            );
+          })}
+        </Grid>
         <AddButton
           name="add"
+          aria-label="Add"
           style={{ float: "right" }}
           onClick={this.bindValue.bind(this)}
         />
-      </div>
+      </>
     );
   }