Make Connect forms to support new slider component #3169

src/projects/detail/components/Accordion/Accordion.jsx

@@ -25,6 +25,7 @@ const TYPE = {
   NUMBERINPUT: 'numberinput',
   SKILLS: 'skills',
   SLIDER_RADIO: 'slide-radiogroup',
+  SLIDER_STANDARD: 'slider-standard',
   SELECT_DROPDOWN: 'select-dropdown'
 }
 
@@ -39,6 +40,24 @@ const createValueMapper = (valuesMap) => (value) => (
   valuesMap[value] && (valuesMap[value].summaryLabel || valuesMap[value].label || valuesMap[value].title)
 )
 
+/**
+ * Create a function which can map desision slider to labels
+ *
+ * @param {Object} question object
+ *
+ * @returns {Function} valueMapper
+ */
+const createSliderDecisionValueMapper = (question) => (value) => {
+  const { min, max, minLabel, maxLabel } = question
+  const leftValue = value - min
+  const rightValue = max - value
+  if (rightValue <= leftValue) {
+    return maxLabel
+  } else {
+    return minLabel
+  }
+}
+
 class Accordion extends React.Component {
   constructor(props) {
     super(props)
@@ -102,11 +121,12 @@ class Accordion extends React.Component {
   }
 
   formatValue() {
-    const { type, options } = this.props
+    const { type, options, question } = this.props
     const { value } = this.state
 
     const valuesMap = _.keyBy(options, 'value')
     const mapValue = createValueMapper(valuesMap)
+    const mapDecisionValue = createSliderDecisionValueMapper(question)
 
     if (!value) {
       return 'N/A'//value
@@ -118,6 +138,7 @@ class Accordion extends React.Component {
     case TYPE.ADD_ONS: return `${value.length} selected`
     case TYPE.SKILLS: return `${value.length} selected`
     case TYPE.SLIDER_RADIO: return mapValue(value)
+    case TYPE.SLIDER_STANDARD: return mapDecisionValue(value)
     case TYPE.SELECT_DROPDOWN: return mapValue(value)
     default: return value
     }
@@ -161,6 +182,10 @@ Accordion.propTypes = {
    * We need options so we can render labels of values instead of raw values
    */
   options: PT.array.isRequired,
+  /**
+   * Full question object
+   */
+  question: PT.object.isRequired,
 }
 
 export default Accordion

src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss

@@ -273,6 +273,11 @@
           }
         }
 
+        .SliderStandard {
+          margin: 48px auto;
+          width: 55%;
+        }
+
         .SliderRadioGroup {
           height: auto;
           margin: 10px auto 28px auto;

src/projects/detail/components/SpecQuestions.jsx

@@ -278,6 +278,16 @@ class SpecQuestions extends React.Component {
         included: false
       })
       break
+    case 'slider-standard':
+      ChildElem = TCFormFields.SliderStandard
+      _.assign(elemProps, {
+        minLabel: q.minLabel,
+        maxLabel: q.maxLabel,
+        min: q.min,
+        max: q.max,
+        step: q.step,
+      })
+      break
     case 'add-ons':
       ChildElem = AddonOptions
 
@@ -389,11 +399,12 @@ class SpecQuestions extends React.Component {
           (isCreation || !question.hiddenOnEdit)
         ).map((q, index) => {
           return  (
-            _.includes(['checkbox-group', 'radio-group', 'add-ons', 'textinput', 'textbox', 'numberinput', 'skills', 'slide-radiogroup', 'select-dropdown'], q.type) && q.visibilityForRendering === STEP_VISIBILITY.READ_OPTIMIZED ? (
+            _.includes(['checkbox-group', 'radio-group', 'add-ons', 'textinput', 'textbox', 'numberinput', 'skills', 'slide-radiogroup', 'slider-standard', 'select-dropdown'], q.type) && q.visibilityForRendering === STEP_VISIBILITY.READ_OPTIMIZED ? (
               <Accordion
                 key={q.fieldName || `accordion-${index}`}
                 title={q.summaryTitle || q.title}
                 type={q.type}
+                question={q}
                 options={q.options || skillOptions || buildAddonsOptions(q, productTemplates, productCategories)}
               >
                 {this.renderQ(q, index)}