From cbc68efbd7bbfdcf3cde17c71ad379d528f0aff9 Mon Sep 17 00:00:00 2001
From: Jarrod Flesch <jarrodmflesch@gmail.com>
Date: Fri, 13 Mar 2020 18:21:31 -0400
Subject: [PATCH] styles repeater buttons, remove and duplicate

---
 .../components/controls/Button/index.scss     | 12 ++++
 .../controls/RepeatFieldButton/index.js       | 27 +++++++++
 .../controls/RepeatFieldButton/index.scss     | 28 ++++++++++
 src/client/components/forms/Form/index.js     |  2 +-
 .../forms/field-types/Repeater/index.js       | 55 ++++++++++--------
 .../forms/field-types/Repeater/index.scss     | 56 ++++++++++++++++++-
 .../components/graphics/Crosshair/index.js    | 45 +++++++++++++++
 src/client/components/graphics/X/index.js     | 39 +++++++++++++
 src/client/components/graphics/X/index.scss   |  3 +
 9 files changed, 241 insertions(+), 26 deletions(-)
 create mode 100644 src/client/components/controls/RepeatFieldButton/index.js
 create mode 100644 src/client/components/controls/RepeatFieldButton/index.scss
 create mode 100644 src/client/components/graphics/Crosshair/index.js
 create mode 100644 src/client/components/graphics/X/index.js
 create mode 100644 src/client/components/graphics/X/index.scss

diff --git a/src/client/components/controls/Button/index.scss b/src/client/components/controls/Button/index.scss
index 8f28a26cd4..d0d5955b80 100644
--- a/src/client/components/controls/Button/index.scss
+++ b/src/client/components/controls/Button/index.scss
@@ -32,6 +32,18 @@
         }
     }
 
+    &.btn-error {
+      border: $stroke-width solid $error;
+      color: $error;
+      background: none;
+
+      &:hover {
+        background: lighten($error, 22.5%);
+        border: $stroke-width solid $error;
+        color: $black;
+      }
+    }
+
     &.btn-small {
         padding: base(0) base(.25) base(.04);
         border-radius: 3px;
diff --git a/src/client/components/controls/RepeatFieldButton/index.js b/src/client/components/controls/RepeatFieldButton/index.js
new file mode 100644
index 0000000000..82ba76f189
--- /dev/null
+++ b/src/client/components/controls/RepeatFieldButton/index.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './index.scss';
+import Button from '../Button';
+import Crosshair from '../../graphics/Crosshair';
+
+const baseClass = 'repeat-field-button';
+
+const RepeatFieldButton = ({ onClick }) => {
+  return (
+    <div className={baseClass}>
+      <Button
+        onClick={onClick}
+        type="secondary"
+      >
+        <Crosshair />
+      </Button>
+    </div>
+  );
+};
+
+RepeatFieldButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+};
+
+export default RepeatFieldButton;
diff --git a/src/client/components/controls/RepeatFieldButton/index.scss b/src/client/components/controls/RepeatFieldButton/index.scss
new file mode 100644
index 0000000000..91ab7d374a
--- /dev/null
+++ b/src/client/components/controls/RepeatFieldButton/index.scss
@@ -0,0 +1,28 @@
+@import '../../../scss/styles.scss';
+
+.repeat-field-button {
+  width: calc(100% + #{base(2)});
+  margin-left: base(-1);
+  padding: base(1) 0;
+  position: relative;
+
+  &:before {
+    content: '';
+    position: absolute;
+    background: $light-gray;
+    height: 2px;
+    width: 100%;
+    left: 0;
+    bottom: 50%;
+  }
+
+  .btn {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
+    margin: 0;
+    padding: base(.25) base(.75);
+  }
+}
diff --git a/src/client/components/forms/Form/index.js b/src/client/components/forms/Form/index.js
index d4a0843f63..aa153cdb77 100644
--- a/src/client/components/forms/Form/index.js
+++ b/src/client/components/forms/Form/index.js
@@ -101,7 +101,7 @@ const Form = (props) => {
     });
 
     dispatchFields({
-      type: 'replace',
+      type,
       value: {
         ...stateWithoutFields,
         ...reindexedRows,
diff --git a/src/client/components/forms/field-types/Repeater/index.js b/src/client/components/forms/field-types/Repeater/index.js
index 1ffa6f7ba1..6de387b021 100644
--- a/src/client/components/forms/field-types/Repeater/index.js
+++ b/src/client/components/forms/field-types/Repeater/index.js
@@ -4,9 +4,15 @@ import PropTypes from 'prop-types';
 import FormContext from '../../Form/Context';
 import Section from '../../../layout/Section';
 import RenderFields from '../../RenderFields';
+import RepeatFieldButton from '../../../controls/RepeatFieldButton';
+import Button from '../../../controls/Button';
+import X from '../../../graphics/X';
+
 
 import './index.scss';
 
+const baseClass = 'field-repeater';
+
 const Repeater = (props) => {
   const formContext = useContext(FormContext);
   const { adjustRows } = formContext;
@@ -47,36 +53,37 @@ const Repeater = (props) => {
   const iterableInternalRowCount = Array.from(Array(internalRowCount).keys());
 
   return (
-    <div className="field-repeater">
-      <Section heading={label}>
+    <div className={baseClass}>
+      <Section
+        heading={label}
+        className="repeater"
+      >
 
         {iterableInternalRowCount.map((_, rowIndex) => {
           return (
             <React.Fragment key={rowIndex}>
-              <h2>{`Repeater Item ${rowIndex}`}</h2>
+              <div className={`${baseClass}__section-inner`}>
+                <Button
+                  className="delete"
+                  onClick={() => removeRow({ rowIndex })}
+                  type="error"
+                >
+                  <X />
+                </Button>
+                <h2>{`${label} - Item ${rowIndex}`}</h2>
 
-              <RenderFields
-                fields={fields.map((field) => {
-                  return ({
-                    ...field,
-                    name: `${name}.${rowIndex}.${field.name}`,
-                    defaultValue: initialRows[rowIndex] ? initialRows[rowIndex][field.name] : null,
-                  });
-                })}
-              />
+                <RenderFields
+                  fields={fields.map((field) => {
+                    return ({
+                      ...field,
+                      name: `${name}.${rowIndex}.${field.name}`,
+                      defaultValue: initialRows[rowIndex] ? initialRows[rowIndex][field.name] : null,
+                    });
+                  })}
+                />
+              </div>
 
-              <button
-                onClick={() => addNewRow({ rowIndex })}
-                type="button"
-              >
-                {`Add after ${rowIndex}`}
-              </button>
-              <button
-                onClick={() => removeRow({ rowIndex })}
-                type="button"
-              >
-                {`Remove ${rowIndex}`}
-              </button>
+              <RepeatFieldButton onClick={() => addNewRow({ rowIndex })} />
             </React.Fragment>
           );
         })}
diff --git a/src/client/components/forms/field-types/Repeater/index.scss b/src/client/components/forms/field-types/Repeater/index.scss
index 5299cb5b61..d2aa0c24a7 100644
--- a/src/client/components/forms/field-types/Repeater/index.scss
+++ b/src/client/components/forms/field-types/Repeater/index.scss
@@ -1,3 +1,57 @@
+@import '../../../../scss/styles.scss';
+
 .field-repeater {
-  // background: red;
+  .content {
+    flex-direction: column;
+  }
+
+  &__section-inner {
+    padding: base(1);
+    margin-right: base(1);
+    background: $light-gray;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .repeat-field-button {
+    .btn {
+      @include color-svg($primary);
+      height: 30px;
+      width: 30px;
+      top: 50%;
+      left: 50%;
+      padding: 0;
+      transform: translate(-50%, -50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        @include color-svg(white);
+      }
+
+      .crosshair {
+        padding: 3px;
+      }
+    }
+  }
+
+  .btn.delete {
+    position: absolute;
+    height: 30px;
+    width: 30px;
+    margin: 0;
+    top: base(1);
+    right: base(1);
+    padding: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .x {
+      @include color-svg($error);
+      height: 15px;
+      width: 15px;
+    }
+  }
 }
diff --git a/src/client/components/graphics/Crosshair/index.js b/src/client/components/graphics/Crosshair/index.js
new file mode 100644
index 0000000000..78b65d5c6f
--- /dev/null
+++ b/src/client/components/graphics/Crosshair/index.js
@@ -0,0 +1,45 @@
+import React from 'react';
+
+const Crosshair = () => {
+  return (
+    <svg
+      width="20px"
+      height="20px"
+      viewBox="0 0 20 20"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      className="crosshair"
+    >
+      <g
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+        strokeLinecap="square"
+      >
+        <g
+          className="stroke"
+          transform="translate(-0.500000, -0.500000)"
+        >
+          <line
+            x1="11"
+            y1="1"
+            x2="11"
+            y2="20"
+            id="Line"
+          />
+          <line
+            x1="10.5"
+            y1="0.5"
+            x2="10.5"
+            y2="19.5"
+            id="Line"
+            transform="translate(10.500000, 10.000000) rotate(90.000000) translate(-10.500000, -10.000000) "
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default Crosshair;
diff --git a/src/client/components/graphics/X/index.js b/src/client/components/graphics/X/index.js
new file mode 100644
index 0000000000..62d2d7a92c
--- /dev/null
+++ b/src/client/components/graphics/X/index.js
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import './index.scss';
+
+const X = () => {
+  return (
+    <svg
+      width="22px"
+      height="20px"
+      viewBox="0 0 22 20"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      className="x"
+    >
+      <g
+        stroke="none"
+        strokeWidth="2"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <g
+          className="stroke"
+          transform="translate(1.000000, 0.000000)"
+        >
+          <path
+            d="M0,0 C6.66666667,6.66666667 13.3333333,13.3333333 20,20"
+          />
+          <path
+            d="M0,0 C6.66666667,6.66666667 13.3333333,13.3333333 20,20"
+            id="Path"
+            transform="translate(10.000000, 10.000000) scale(-1, 1) translate(-10.000000, -10.000000) "
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default X;
diff --git a/src/client/components/graphics/X/index.scss b/src/client/components/graphics/X/index.scss
new file mode 100644
index 0000000000..25941a5fa2
--- /dev/null
+++ b/src/client/components/graphics/X/index.scss
@@ -0,0 +1,3 @@
+.x {
+
+}