Add anchor widget to Likert scale

FelixHenninger · Jul 4, 2019 · fa0b737 · fa0b737
1 parent b98de2c
commit fa0b737
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 31 deletions.
diff --git a/...ages/builder/src/components/ComponentOptions/components/Content/Page/components/Footer.js b/...ages/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/...ents/ComponentOptions/components/Content/Page/components/ItemOptions/components/Likert.js b/...ents/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>
   </>