feat(filter): enhancements over FilterRowProps

Author: armand1m

src/bindings.ts

@@ -0,0 +1,17 @@
+import { SelectOption } from './select-option';
+
+export enum Binding {
+  AND = 'AND',
+  OR = 'OR',
+}
+
+export const defaultBindingOptions: SelectOption<Binding>[] = [
+  {
+    value: Binding.AND,
+    label: 'And',
+  },
+  {
+    value: Binding.OR,
+    label: 'Or',
+  },
+];

src/components/chakra-ui/FilterRow.stories.tsx

@@ -1,28 +1,8 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { FilterRowProps, PropertyDescription } from '../../';
+import { FilterRowProps } from '../../';
 import { FilterRow } from './FilterRow';
 
-const properties: PropertyDescription[] = [
-  {
-    label: 'Name',
-    key: 'name',
-    type: 'string',
-    suggestions: ['Artemis', 'Apollo', 'Donna', 'Dhio'],
-  },
-  {
-    label: 'Age',
-    key: 'age',
-    type: 'number',
-    suggestions: [1, 2, 3],
-  },
-  {
-    label: 'Has Owner',
-    key: 'has_owner',
-    type: 'boolean',
-  },
-];
-
 const meta: Meta<FilterRowProps> = {
   title: 'Chakra UI/Filter Row',
   component: FilterRow,
@@ -31,8 +11,11 @@ const meta: Meta<FilterRowProps> = {
   },
   args: {
     filter: {},
-    isFirst: true,
-    properties,
+    fields: [],
+    operations: [],
+    bindings: [],
+    shouldRenderBindingSelect: false,
+    shouldRenderValueInput: true,
   },
 };
 
@@ -44,22 +27,6 @@ const Template: Story<FilterRowProps> = args => {
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
-export const FirstRow = Template.bind({});
-
-FirstRow.args = {};
-
-export const OtherRow = Template.bind({});
+export const Default = Template.bind({});
 
-OtherRow.args = {
-  isFirst: false,
-};
-
-export const FilterWithoutValue = Template.bind({});
-
-FilterWithoutValue.args = {
-  isFirst: false,
-  filter: {
-    operation: 'is-not-empty',
-    field: 'name',
-  },
-};
+Default.args = {};

src/components/chakra-ui/FilterRow.tsx

@@ -7,41 +7,46 @@ import {
   Select,
   Tooltip,
 } from '@chakra-ui/react';
-import { useRowUtilities, FilterRowProps } from '../../';
+import { FilterRowProps } from '../../';
 
 export const FilterRow: FC<FilterRowProps> = ({
-  properties,
   filter,
-  isFirst,
+  fields,
+  bindings,
+  operations,
+  shouldRenderBindingSelect,
+  shouldRenderValueInput,
   onRemove,
   onChangeBinding,
   onChangeField,
   onChangeOperation,
   onChangeValue,
 }) => {
-  const {
-    getFilterOperationsForType,
-    shouldRenderValueInputForOperation,
-  } = useRowUtilities();
-
   return (
     <HStack>
       <Tooltip shouldWrapChildren label="Remove Filter" placement="left">
         <CloseButton onClick={onRemove} />
       </Tooltip>
 
-      {isFirst ? (
-        <Text fontSize="sm">Where&nbsp;</Text>
-      ) : (
+      {shouldRenderBindingSelect ? (
         <Select
           size="sm"
           maxWidth="6rem"
           value={filter.binding}
           onChange={onChangeBinding}
         >
-          <option value="and">And</option>
-          <option value="or">Or</option>
+          {bindings.map(binding => (
+            <option
+              value={binding.value}
+              key={binding.value}
+              selected={filter.binding === binding.value}
+            >
+              {binding.label}
+            </option>
+          ))}
         </Select>
+      ) : (
+        <Text fontSize="sm">Where&nbsp;</Text>
       )}
 
       <Select
@@ -50,9 +55,13 @@ export const FilterRow: FC<FilterRowProps> = ({
         onChange={onChangeField}
         placeholder="Field"
       >
-        {properties.map((prop, index) => (
-          <option value={prop.key} key={index}>
-            {prop.label}
+        {fields.map(field => (
+          <option
+            value={field.value}
+            key={field.value}
+            selected={filter.field === field.value}
+          >
+            {field.label}
           </option>
         ))}
       </Select>
@@ -63,14 +72,18 @@ export const FilterRow: FC<FilterRowProps> = ({
         onChange={onChangeOperation}
         placeholder="Operation"
       >
-        {getFilterOperationsForType(filter.type).map((operation, index) => (
-          <option value={operation.value} key={index}>
+        {operations.map(operation => (
+          <option
+            value={operation.value}
+            key={operation.value}
+            selected={filter.operation === operation.value}
+          >
             {operation.label}
           </option>
         ))}
       </Select>
 
-      {shouldRenderValueInputForOperation(filter.operation) && (
+      {shouldRenderValueInput && (
         <Input
           size="sm"
           placeholder="Value"

src/components/chakra-ui/FilterSelection.tsx

@@ -10,9 +10,9 @@ interface Props {
 }
 
 export const FilterSelection: FC<Props> = ({ properties }) => {
-  const { filters, onAddFilter, createFilterRowProps } = useQueryFilters(
-    properties
-  );
+  const { filters, onAddFilter, createFilterRowProps } = useQueryFilters({
+    properties,
+  });
 
   return (
     <SimpleGrid columns={1} spacingY={4}>