scaffolds WhereBuilder condition value components

src/client/components/elements/ListControls/index.scss

@@ -20,7 +20,7 @@
     margin: 0 0 0 $baseline;
     min-width: 150px;
 
-    &.btn--primary {
+    &.btn--style-primary {
       svg {
         transform: rotate(180deg);
       }

src/client/components/elements/WhereBuilder/Condition/Date/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './index.scss';
+
+const DateField = ({ onChange, value }) => {
+  return (
+    <input
+      type="text"
+      onChange={onChange}
+      value={value}
+    />
+  );
+};
+
+DateField.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
+export default DateField;

src/client/components/elements/WhereBuilder/Condition/Number/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './index.scss';
+
+const NumberField = ({ onChange, value }) => {
+  return (
+    <input
+      type="number"
+      onChange={onChange}
+      value={value}
+    />
+  );
+};
+
+NumberField.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
+export default NumberField;

src/client/components/elements/WhereBuilder/Condition/Text/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './index.scss';
+
+const Text = ({ onChange, value }) => {
+  return (
+    <input
+      type="text"
+      onChange={onChange}
+      value={value}
+    />
+  );
+};
+
+Text.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+};
+
+export default Text;

src/client/components/elements/WhereBuilder/Condition/index.js

@@ -2,10 +2,18 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import ReactSelect from '../../ReactSelect';
 import Button from '../../Button';
-
+import Date from './Date';
+import Number from './Number';
+import Text from './Text';
 
 import './index.scss';
 
+const valueFields = {
+  Date,
+  Number,
+  Text,
+};
+
 const baseClass = 'condition';
 
 const Condition = (props) => {
@@ -17,13 +25,13 @@ const Condition = (props) => {
     andIndex,
   } = props;
 
-  const [activeOperators, setActiveOperators] = useState([]);
+  const [activeField, setActiveField] = useState({ operators: [] });
 
   useEffect(() => {
-    const activeField = fields.find(field => value.field === field.value);
+    const newActiveField = fields.find(field => value.field === field.value);
 
-    if (activeField) {
-      setActiveOperators(activeField.operators);
+    if (newActiveField) {
+      setActiveField(newActiveField);
     }
   }, [value, fields]);
 
@@ -45,8 +53,8 @@ const Condition = (props) => {
           </div>
           <div className={`${baseClass}__operator`}>
             <ReactSelect
-              value={activeOperators.find(operator => value.operator === operator.value)}
-              options={activeOperators}
+              value={activeField.operators.find(operator => value.operator === operator.value)}
+              options={activeField.operators}
               onChange={operator => dispatch({
                 type: 'update',
                 orIndex,

src/client/components/elements/WhereBuilder/field-types.js

@@ -48,47 +48,47 @@ const like = {
 
 const fieldTypeConditions = {
   text: {
-    component: 'text',
+    component: 'Text',
     operators: [...base, like],
   },
   email: {
-    component: 'text',
+    component: 'Text',
     operators: [...base, like],
   },
   textarea: {
-    component: 'text',
+    component: 'Text',
     operators: [...base, like],
   },
   wysiwyg: {
-    component: 'text',
+    component: 'Text',
     operators: [...base, like],
   },
   code: {
-    component: 'text',
+    component: 'Text',
     operators: [...base, like],
   },
   number: {
-    component: 'number',
+    component: 'Number',
     operators: [...base, ...numeric],
   },
   date: {
-    component: 'date',
+    component: 'Date',
     operators: [...base, ...numeric],
   },
   upload: {
-    component: 'text',
+    component: 'Text',
     operators: [...base],
   },
   relationship: {
-    component: 'text',
+    component: 'Text',
     operators: [...base],
   },
   select: {
-    component: 'text',
+    component: 'Text',
     operators: [...base],
   },
   checkbox: {
-    component: 'text',
+    component: 'Text',
     operators: boolean,
   },
 };

src/client/components/elements/WhereBuilder/reducer.js

@@ -1,5 +1,10 @@
+const initialCondition = {
+  operators: [],
+};
+
 const reducer = (state, action = {}) => {
   const newState = [...state];
+
   const {
     type,
     relation,
@@ -13,13 +18,13 @@ const reducer = (state, action = {}) => {
   switch (type) {
     case 'add': {
       if (relation === 'and') {
-        newState[orIndex].splice(andIndex, 0, {});
+        newState[orIndex].splice(andIndex, 0, initialCondition);
         return newState;
       }
 
       return [
         ...newState,
-        [{}],
+        [initialCondition],
       ];
     }