feat: Added new operators

- added: IS_NULL, IS_NOT_NULL, CONTAINS, NOT_CONTAINS, STARTS_WITH, ENDS_WITH, IN
- deprecated: ANY_IN, LIKE, NOT_LIKE

Author: Vojtěch Václav Porteš

README.md

@@ -174,15 +174,27 @@ LARGER_EQUAL
 SMALLER_EQUAL
 EQUAL
 NOT_EQUAL
+IN
+NOT_IN
 ALL_IN
 ANY_IN
-NOT_IN
 BETWEEN
 NOT_BETWEEN
+IS_NULL
+IS_NOT_NULL
+CONTAINS
+NOT_CONTAINS
+STARTS_WITH
+ENDS_WITH
 LIKE
 NOT_LIKE
 ```
 
+`ANY_IN`, `LIKE`, and `NOT_LIKE` are deprecated and will be removed in `2.0.0`.
+Prefer `IN`, `CONTAINS`, and `NOT_CONTAINS`.
+
+`IS_NULL` and `IS_NOT_NULL` are value-less operators, so the built-in UI does not render a value input for them.
+
 ### Data
 
 `data` is a controlled prop. Pass an array of rules and groups, and update it through `onChange`.
@@ -388,14 +400,23 @@ const strings: IStrings = {
     EQUAL: 'Equal',
     NOT_EQUAL: 'Not equal',
     ALL_IN: 'All in',
+    IN: 'In',
     ANY_IN: 'Any in',
     NOT_IN: 'Not in',
     BETWEEN: 'Between',
     NOT_BETWEEN: 'Not between',
+    IS_NULL: 'Is null',
+    IS_NOT_NULL: 'Is not null',
+    CONTAINS: 'Contains',
+    NOT_CONTAINS: 'Does not contain',
+    STARTS_WITH: 'Starts with',
+    ENDS_WITH: 'Ends with',
     LIKE: 'Like',
     NOT_LIKE: 'Not like',
   },
 };
 ```
 
+`ANY_IN`, `LIKE`, and `NOT_LIKE` are deprecated here as well and will be removed in `2.0.0`.
+
 It is not required to translate every string. Any string you omit falls back to the built-in defaults.

src/constants/strings.ts

@@ -23,12 +23,28 @@ export interface IStrings {
     EQUAL?: string;
     NOT_EQUAL?: string;
     ALL_IN?: string;
+    /**
+     * @deprecated Use `IN` instead. This alias will be removed in 2.0.0.
+     */
     ANY_IN?: string;
+    IN?: string;
     NOT_IN?: string;
     BETWEEN?: string;
     NOT_BETWEEN?: string;
+    IS_NULL?: string;
+    IS_NOT_NULL?: string;
+    /**
+     * @deprecated Use `CONTAINS` instead. This alias will be removed in 2.0.0.
+     */
     LIKE?: string;
+    /**
+     * @deprecated Use `NOT_CONTAINS` instead. This alias will be removed in 2.0.0.
+     */
     NOT_LIKE?: string;
+    CONTAINS?: string;
+    NOT_CONTAINS?: string;
+    STARTS_WITH?: string;
+    ENDS_WITH?: string;
   };
 }
 
@@ -58,10 +74,17 @@ export const strings: IStrings = {
     NOT_EQUAL: 'Not equal',
     ALL_IN: 'All in',
     ANY_IN: 'Any in',
+    IN: 'In',
     NOT_IN: 'Not in',
     BETWEEN: 'Between',
     NOT_BETWEEN: 'Not between',
+    IS_NULL: 'Is null',
+    IS_NOT_NULL: 'Is not null',
     LIKE: 'Like',
-    NOT_LIKE: 'Not like'
+    NOT_LIKE: 'Not like',
+    CONTAINS: 'Contains',
+    NOT_CONTAINS: 'Does not contain',
+    STARTS_WITH: 'Starts with',
+    ENDS_WITH: 'Ends with',
   },
 };

src/index.tsx

@@ -52,6 +52,7 @@ export { colors } from './constants/colors';
 export type { IColors, IColorVariant, IGreyColorVariant } from './constants/colors';
 export { strings } from './constants/strings';
 export type { IStrings } from './constants/strings';
+export { queryOperators } from './utils/query-operators';
 export type {
   DenormalizedNode,
   DenormalizedQuery,

src/rule/rule.test.tsx

@@ -20,7 +20,7 @@ const fields: IBuilderFieldProps[] = [
   {
     field: 'MOCK_FIELD_2',
     label: 'Mock Field 2',
-    operators: ['EQUAL'],
+    operators: ['EQUAL', 'IS_NULL'],
     type: 'TEXT',
   },
   {
@@ -74,6 +74,12 @@ const data: any[] = [
     id: 'test-3',
     parent: 'test-1',
   },
+  {
+    field: 'MOCK_FIELD_2',
+    operator: 'IS_NULL',
+    id: 'test-10',
+    parent: 'test-1',
+  },
   {
     field: 'MOCK_FIELD_3',
     value: '',
@@ -173,6 +179,7 @@ describe('#components/Rule', () => {
           id="test-9"
           field="SOME_FIELD_THAT_DOESNT_EXISTS"
         />
+        <Rule data-test="Rule[9]" id="test-10" field="MOCK_FIELD_2" operator="IS_NULL" />
       </BuilderContext.Provider>
     );
 
@@ -184,6 +191,8 @@ describe('#components/Rule', () => {
     expect(wrapper.find('[data-test="Rule[5]"]')).toBeDefined();
     expect(wrapper.find('[data-test="Rule[6]"]')).toBeDefined();
     expect(wrapper.find('[data-test="Rule[7]"]')).toBeDefined();
+    expect(wrapper.find('[data-test="Rule[9]"] select').length).toBeGreaterThan(0);
+    expect(wrapper.find('[data-test="Rule[9]"] input').length).toEqual(0);
     expect(Object.keys(wrapper.find('[data-test="Rule[8]"]')).length).toBe(
       0
     );

src/rule/rule.tsx

@@ -19,6 +19,7 @@ import { isString } from '../utils/is-string.util';
 import { isStringArray } from '../utils/is-string-array.util';
 import { isStringOrNumberArray } from '../utils/is-string-or-number-array.util';
 import { isUndefined } from '../utils/is-undefined.util';
+import { operatorRequiresValue } from '../utils/operator-requires-value.util';
 import { QueryRuleValue } from '../utils/query-tree';
 import { removeItem } from '../utils/remove-item.util';
 
@@ -93,6 +94,7 @@ export const Rule: FC<IRuleProps> = ({
         value: item,
         label: (strings.operators && strings.operators[item]) || item,
       }));
+    const shouldRenderValueInput = operatorRequiresValue(operator);
 
     return (
       <RuleContainer
@@ -104,14 +106,24 @@ export const Rule: FC<IRuleProps> = ({
       >
         <FieldSelect selectedValue={field} id={id} />
 
-        {type === 'BOOLEAN' && isBoolean(selectedValue) && (
-          <BooleanContainer>
-            <Boolean id={id} selectedValue={selectedValue} />
-          </BooleanContainer>
+        {type === 'BOOLEAN' && (
+          <>
+            {isOptionList(operatorsOptionList) && (
+              <OperatorSelect
+                id={id}
+                values={operatorsOptionList}
+                selectedValue={operator}
+              />
+            )}
+            {shouldRenderValueInput && isBoolean(selectedValue) && (
+              <BooleanContainer>
+                <Boolean id={id} selectedValue={selectedValue} />
+              </BooleanContainer>
+            )}
+          </>
         )}
 
         {type === 'LIST' &&
-          isString(selectedValue) &&
           isOptionList(fieldValue) &&
           isOptionList(operatorsOptionList) && (
             <>
@@ -120,7 +132,7 @@ export const Rule: FC<IRuleProps> = ({
                 values={operatorsOptionList}
                 selectedValue={operator}
               />
-              {operator && (
+              {operator && shouldRenderValueInput && isString(selectedValue) && (
                 <Select
                   id={id}
                   selectedValue={selectedValue}
@@ -132,15 +144,16 @@ export const Rule: FC<IRuleProps> = ({
 
         {type === 'MULTI_LIST' &&
           isOptionList(fieldValue) &&
-          isOptionList(operatorsOptionList) &&
-          isStringArray(selectedValue) && (
+          isOptionList(operatorsOptionList) && (
             <>
               <OperatorSelect
                 id={id}
                 values={operatorsOptionList}
                 selectedValue={operator}
               />
-              {operator && (
+              {operator &&
+                shouldRenderValueInput &&
+                isStringArray(selectedValue) && (
                 <SelectMulti
                   id={id}
                   values={fieldValue}
@@ -150,49 +163,51 @@ export const Rule: FC<IRuleProps> = ({
             </>
           )}
 
-        {type === 'TEXT' &&
-          isOptionList(operatorsOptionList) &&
-          (isString(selectedValue) || isStringArray(selectedValue)) && (
+        {type === 'TEXT' && isOptionList(operatorsOptionList) && (
             <>
               <OperatorSelect
                 id={id}
                 values={operatorsOptionList}
                 selectedValue={operator}
               />
-              {operator && <Input type="text" value={selectedValue} id={id} />}
+              {operator &&
+                shouldRenderValueInput &&
+                (isString(selectedValue) || isStringArray(selectedValue)) && (
+                  <Input type="text" value={selectedValue} id={id} />
+                )}
             </>
           )}
 
-        {type === 'NUMBER' &&
-          isOptionList(operatorsOptionList) &&
-          (isString(selectedValue) ||
-            isNumber(selectedValue) ||
-            isStringOrNumberArray(selectedValue) ||
-            isNumberArray(selectedValue)) && (
+        {type === 'NUMBER' && isOptionList(operatorsOptionList) && (
             <>
               <OperatorSelect
                 id={id}
                 values={operatorsOptionList}
                 selectedValue={operator}
               />
-              {operator && (
+              {operator &&
+                shouldRenderValueInput &&
+                (isString(selectedValue) ||
+                  isNumber(selectedValue) ||
+                  isStringOrNumberArray(selectedValue) ||
+                  isNumberArray(selectedValue)) && (
                 <Input type="number" value={selectedValue} id={id} />
-              )}
+                )}
             </>
           )}
 
-        {type === 'DATE' &&
-          isOptionList(operatorsOptionList) &&
-          (isString(selectedValue) || isStringArray(selectedValue)) && (
+        {type === 'DATE' && isOptionList(operatorsOptionList) && (
             <>
               <OperatorSelect
                 id={id}
                 values={operatorsOptionList}
                 selectedValue={operator}
               />
-              {!isUndefined(operator) && (
+              {!isUndefined(operator) &&
+                shouldRenderValueInput &&
+                (isString(selectedValue) || isStringArray(selectedValue)) && (
                 <Input type="date" value={selectedValue} id={id} />
-              )}
+                )}
             </>
           )}
       </RuleContainer>

src/utils/create-rule-state-for-field.util.test.ts

@@ -83,6 +83,21 @@ describe('#utils/createRuleStateForField', () => {
     });
   });
 
+  it('Creates a valueless rule state for IS_NULL', () => {
+    const field: IBuilderFieldProps = {
+      field: 'DELETED_AT',
+      label: 'Deleted At',
+      type: 'DATE',
+      operators: ['IS_NULL'],
+    };
+
+    expect(createRuleStateForField(field)).toEqual({
+      field: 'DELETED_AT',
+      operator: 'IS_NULL',
+      operators: ['IS_NULL'],
+    });
+  });
+
   it('Creates a statement rule state', () => {
     const field: IBuilderFieldProps = {
       field: 'NOTE',

src/utils/create-rule-state-for-field.util.ts

@@ -1,53 +1,30 @@
 import { IBuilderFieldProps } from '../builder';
-import { isOptionList } from './is-option-list.util';
-
-const getDefaultValueForTextLikeField = (field: IBuilderFieldProps) =>
-  field.operators && ['BETWEEN', 'NOT_BETWEEN'].includes(field.operators[0])
-    ? ['', '']
-    : '';
-
-const getDefaultValueForNumberField = (field: IBuilderFieldProps) =>
-  field.operators && ['BETWEEN', 'NOT_BETWEEN'].includes(field.operators[0])
-    ? [0, 0]
-    : 0;
+import { createRuleValueForFieldOperator } from './create-rule-value-for-field-operator.util';
 
 export const createRuleStateForField = (field: IBuilderFieldProps) => {
+  const nextOperator = field.operators && field.operators[0];
   const baseRuleState = {
     field: field.field,
-    operator: field.operators && field.operators[0],
+    operator: nextOperator,
     operators: field.operators,
   };
+  const nextValue = createRuleValueForFieldOperator(field, nextOperator);
 
   switch (field.type) {
     case 'BOOLEAN':
       return {
-        field: field.field,
-        value: false,
+        ...baseRuleState,
+        ...(typeof nextValue !== 'undefined' ? { value: nextValue } : {}),
       };
 
     case 'DATE':
     case 'TEXT':
-      return {
-        ...baseRuleState,
-        value: getDefaultValueForTextLikeField(field),
-      };
-
     case 'NUMBER':
-      return {
-        ...baseRuleState,
-        value: getDefaultValueForNumberField(field),
-      };
-
     case 'LIST':
-      return {
-        ...baseRuleState,
-        value: isOptionList(field.value) ? field.value[0].value : undefined,
-      };
-
     case 'MULTI_LIST':
       return {
         ...baseRuleState,
-        value: isOptionList(field.value) ? [] : undefined,
+        ...(typeof nextValue !== 'undefined' ? { value: nextValue } : {}),
       };
 
     case 'STATEMENT':