stubs out column selector and where builder

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

@@ -14,26 +14,36 @@
   font-weight: 600;
   text-decoration: none;
 
+  &--primary {
+    &:hover, &:focus {
+      background: lighten($color-dark-gray, 5%);
+    }
+
+    &:active {
+      background: lighten($color-dark-gray, 10%);
+    }
+  }
+
   &--secondary {
     box-shadow: inset 0 0 0 $style-stroke-width $color-dark-gray;
     color: $color-dark-gray;
     background: none;
 
     &:hover {
-      background: lighten($color-dark-gray, 5%);
+      background: rgba($color-dark-gray, .02);
       box-shadow: inset 0 0 0 $style-stroke-width lighten($color-dark-gray, 5%);
-      color: white;
     }
   }
 
   &--icon {
     span {
       display: flex;
+      justify-content: space-between;
     }
 
     svg {
-      margin-left: base(1);
       display: block;
+      margin-left: base(.5);
     }
 
     &.btn--primary {
@@ -43,11 +53,8 @@
     }
   }
 
-  &:hover {
-    background: lighten($color-dark-gray, 5%);
-  }
-
-  &:focus, &:active {
+  &:focus,
+  &:active {
     outline: none;
   }
 }

src/client/components/elements/ColumnSelector/index.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import './index.scss';
+
+const baseClass = 'column-selector';
+
+const ColumnSelector = (props) => {
+  const {
+    handleChange,
+  } = props;
+
+  const [columns, setColumns] = useState('');
+
+  useEffect(() => {
+    if (typeof handleChange === 'function') handleChange(columns);
+  }, [columns, handleChange]);
+
+  return (
+    <div className={baseClass}>
+      Columns
+    </div>
+  );
+};
+
+ColumnSelector.defaultProps = {
+  fieldName: 'id',
+  fieldLabel: 'ID',
+};
+
+ColumnSelector.propTypes = {
+  fieldName: PropTypes.string,
+  fieldLabel: PropTypes.string,
+  handleChange: PropTypes.func.isRequired,
+};
+
+export default ColumnSelector;

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

@@ -1,7 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import AnimateHeight from 'react-animate-height';
 // import customComponents from '../../customComponents';
 import SearchFilter from '../SearchFilter';
+import ColumnSelector from '../ColumnSelector';
+import WhereBuilder from '../WhereBuilder';
 import Button from '../Button';
 import Chevron from '../../icons/Chevron';
 
@@ -21,7 +24,7 @@ const ListControls = (props) => {
   const [titleField, setTitleField] = useState(null);
   const [search, setSearch] = useState('');
   const [columns, setColumns] = useState([]);
-  const [filters, setFilters] = useState({});
+  const [where, setWhere] = useState({});
   const [columnsVisible, setColumnsVisible] = useState(false);
   const [filtersVisible, setFiltersVisible] = useState(false);
 
@@ -36,14 +39,18 @@ const ListControls = (props) => {
   }, [useAsTitle, fields]);
 
   useEffect(() => {
-    handleChange({
-      where: {
+    const newState = {};
+
+    if (search) {
+      newState.where = {
         AND: [
           search,
         ],
-      },
-    });
-  }, [search, columns, filters, handleChange]);
+      };
+    }
+
+    handleChange(newState);
+  }, [search, columns, where, handleChange]);
 
   return (
     <div className={baseClass}>
@@ -54,18 +61,34 @@ const ListControls = (props) => {
           fieldLabel={titleField ? titleField.label : undefined}
         />
         <Button
-          onClick={() => setColumnsVisible(!columnsVisible)}
+          className={`${baseClass}__toggle-columns`}
+          type={columnsVisible ? 'secondary' : undefined}
+          onClick={() => { setFiltersVisible(false); setColumnsVisible(!columnsVisible); }}
           icon={<Chevron />}
         >
           Columns
         </Button>
         <Button
-          onClick={() => setFiltersVisible(!filtersVisible)}
+          className={`${baseClass}__toggle-filters`}
+          type={filtersVisible ? 'secondary' : undefined}
+          onClick={() => { setColumnsVisible(false); setFiltersVisible(!filtersVisible); }}
           icon={<Chevron />}
         >
           Filters
         </Button>
       </div>
+      <AnimateHeight
+        className={`${baseClass}__columns`}
+        height={columnsVisible ? 'auto' : 0}
+      >
+        <ColumnSelector handleChange={setColumns} />
+      </AnimateHeight>
+      <AnimateHeight
+        className={`${baseClass}__filters`}
+        height={filtersVisible ? 'auto' : 0}
+      >
+        <WhereBuilder handleChange={setWhere} />
+      </AnimateHeight>
     </div>
   );
 };

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

@@ -17,5 +17,40 @@
 
   .btn {
     margin: 0 0 0 $baseline;
+
+    &.btn--secondary {
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  @include mid-break {
+    .btn {
+      margin: 0 0 0 base(.5);
+    }
+  }
+
+  @include small-break {
+    &__wrap {
+      flex-wrap: wrap;
+    }
+
+    .search-filter {
+      margin-bottom: base(.5);
+      width: 100%;
+    }
+
+    .btn {
+      width: calc(50% - #{base(.25)});
+    }
+
+    &__toggle-columns.btn {
+      margin: 0 base(.25) 0 0;
+    }
+
+    &__toggle-filters.btn {
+      margin: 0 0 0 base(.25);
+    }
   }
 }

src/client/components/elements/SearchFilter/index.js

@@ -16,13 +16,13 @@ const SearchFilter = (props) => {
   const [search, setSearch] = useState('');
 
   useEffect(() => {
-    setSearch(search);
-
-    handleChange(search ? {
-      [fieldName]: {
-        like: search,
-      },
-    } : {});
+    if (typeof handleChange === 'function') {
+      handleChange(search ? {
+        [fieldName]: {
+          like: search,
+        },
+      } : null);
+    }
   }, [search, handleChange, fieldName]);
 
   return (

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

@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import './index.scss';
+
+const baseClass = 'where-builder';
+
+const WhereBuilder = (props) => {
+  const {
+    handleChange,
+  } = props;
+
+  const [where, setWhere] = useState('');
+
+  useEffect(() => {
+    if (typeof handleChange === 'function') handleChange(where);
+  }, [where, handleChange]);
+
+  return (
+    <div className={baseClass}>
+      Build a where clause
+    </div>
+  );
+};
+
+WhereBuilder.propTypes = {
+  handleChange: PropTypes.func.isRequired,
+};
+
+export default WhereBuilder;