From fa0b737763c7402ed093e39679a8fda8ce31ce7c Mon Sep 17 00:00:00 2001
From: Felix Henninger <mailbox@felixhenninger.com>
Date: Thu, 4 Jul 2019 23:17:49 +0200
Subject: [PATCH] Add anchor widget to Likert scale

---
 .../Content/Page/components/Footer.js         |  2 +-
 .../ItemOptions/components/Likert.js          | 93 +++++++++++++------
 2 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Page/components/Footer.js b/packages/builder/src/components/ComponentOptions/components/Content/Page/components/Footer.js
index c952ef540..bbcecb773 100644
--- a/packages/builder/src/components/ComponentOptions/components/Content/Page/components/Footer.js
+++ b/packages/builder/src/components/ComponentOptions/components/Content/Page/components/Footer.js
@@ -98,7 +98,7 @@ const AddWidget = () => {
             <Item>
               Visual analogue scale
             </Item>
-            <Item data={{ type: 'likert', items: [], width: 5 }}>
+            <Item data={{ type: 'likert', items: [], width: 5, anchors: [] }}>
               Likert scale
             </Item>
           </Col>
diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Page/components/ItemOptions/components/Likert.js b/packages/builder/src/components/ComponentOptions/components/Content/Page/components/ItemOptions/components/Likert.js
index 6858e854b..0e878290a 100644
--- a/packages/builder/src/components/ComponentOptions/components/Content/Page/components/ItemOptions/components/Likert.js
+++ b/packages/builder/src/components/ComponentOptions/components/Content/Page/components/ItemOptions/components/Likert.js
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { range } from 'lodash'
 import { Control, Field } from 'react-redux-form'
 import { Row, Col, FormGroup, Label, FormText, Input } from 'reactstrap'
 
@@ -28,37 +29,69 @@ export default ({ data, rowIndex }) =>
     <CollapsingOptions
       rowIndex={ rowIndex }
     >
-      <FormGroup className="my-2">
-        <Label for={ `page-item-${ rowIndex }-width` } className="mb-0">
-          Scale width
-        </Label>
-        <FormText color="muted">
-          How many points to offer
-        </FormText>
-        <Field model=".width" className="mt-1">
-          <FormGroup>
-            {
-              [5, 7].map(w =>
-                <div
-                  key={ `page-item-${ rowIndex }-width-${ w }` }
-                  className="custom-radio custom-control"
-                >
-                  <input
-                    type="radio" value={ `${ w }` }
-                    id={ `page-item-${ rowIndex }-width-${ w }` }
-                    className="custom-control-input"
-                  />
-                  <label
-                    htmlFor={ `page-item-${ rowIndex }-width-${ w }` }
-                    className="custom-control-label"
+      <Row>
+        <Col>
+          <FormGroup className="my-2">
+            <Label for={ `page-item-${ rowIndex }-width` } className="mb-0">
+              Scale width
+            </Label>
+            <FormText color="muted">
+              How many points to offer
+            </FormText>
+            <Field model=".width" className="mt-1">
+              <FormGroup>
+                {
+                  [5, 7].map(w =>
+                    <div
+                      key={ `page-item-${ rowIndex }-width-${ w }` }
+                      className="custom-radio custom-control"
+                    >
+                      <input
+                        type="radio" value={ `${ w }` }
+                        id={ `page-item-${ rowIndex }-width-${ w }` }
+                        className="custom-control-input"
+                      />
+                      <label
+                        htmlFor={ `page-item-${ rowIndex }-width-${ w }` }
+                        className="custom-control-label"
+                      >
+                        { w }
+                      </label>
+                    </div>
+                  )
+                }
+              </FormGroup>
+            </Field>
+          </FormGroup>
+        </Col>
+        <Col>
+          <FormGroup className="my-2">
+            <Label for={ `page-item-${ rowIndex }-anchors` } className="mb-0">
+              Anchors
+            </Label>
+            <FormText color="muted">
+              Scale anchors
+            </FormText>
+            <div className="mt-2">
+              {
+                range(data.width).map(i =>
+                  <Row form
+                    className="my-1"
+                    key={ `page-item-${ rowIndex }-anchors-${ i }` }
                   >
-                    { w }
-                  </label>
-                </div>
-              )
-            }
+                    <Col>
+                      <Control
+                        model={ `.anchors[${ i }]` }
+                        component={ Input }
+                        debounce={ 300 }
+                      />
+                    </Col>
+                  </Row>
+                )
+              }
+            </div>
           </FormGroup>
-        </Field>
-      </FormGroup>
+        </Col>
+      </Row>
     </CollapsingOptions>
   </>