fix(renderer): add support for string pattern and flags

Author: rvsia

packages/react-form-renderer/src/form-renderer/condition.js

@@ -7,7 +7,7 @@ import get from 'lodash/get';
 const isEmptyValue = (value) => typeof value === 'number' || value === true ? false : lodashIsEmpty(value);
 
 const Condition = ({ condition, children }) => {
-  const fieldCondition = (value, { is, isNotEmpty, isEmpty, pattern, notMatch }) => {
+  const fieldCondition = (value, { is, isNotEmpty, isEmpty, pattern, notMatch, flags }) => {
     if (isNotEmpty){
       return !isEmptyValue(value);
     }
@@ -17,7 +17,9 @@ const Condition = ({ condition, children }) => {
     }
 
     if (pattern) {
-      return notMatch ? !pattern.test(value) : pattern.test(value);
+      const regExpPattern = RegExp(pattern, flags);
+
+      return notMatch ? !regExpPattern.test(value) : regExpPattern.test(value);
     }
 
     const isMatched = Array.isArray(is) ? !!is.includes(value) : value === is;

packages/react-form-renderer/src/parsers/default-schema-validator.js

@@ -58,10 +58,10 @@ const checkCondition = (condition, fieldName) => {
     `);
   }
 
-  if (condition.hasOwnProperty('pattern') && !(condition.pattern instanceof RegExp)) {
+  if (condition.hasOwnProperty('pattern') && (!(condition.pattern instanceof RegExp) && typeof condition.pattern !== 'string')) {
     throw new DefaultSchemaError(`
       Error occured in field definition with name: "${fieldName}".
-      Field condition must have "pattern" of instance "RegExp"! Instance received: [${condition.pattern.constructor.name}].
+      Field condition must have "pattern" of instance "RegExp" or "string"! Instance received: [${condition.pattern.constructor.name}].
     `);
   }
 };

packages/react-form-renderer/src/tests/form-renderer/render-form.test.js

@@ -311,6 +311,52 @@ describe('renderForm function', () => {
       expect(wrapper.find(CustomComponent)).toHaveLength(1);
     });
 
+    it('should render condition field only if the pattern condition is met (string)', () => {
+      const formFields = [{
+        component: 'custom-component',
+        name: 'foo',
+        condition: {
+          when: 'bar',
+          pattern: 'fuzz',
+        },
+      }];
+      const wrapper = mount(
+        <ContextWrapper formFieldsMapper={{
+          'custom-component': CustomComponent,
+        }}>
+          { renderForm(formFields) }
+        </ContextWrapper>
+      );
+      expect(wrapper.find(CustomComponent)).toHaveLength(0);
+
+      wrapper.find(Form).instance().form.change('bar', 'fuzz');
+      wrapper.update();
+      expect(wrapper.find(CustomComponent)).toHaveLength(1);
+    });
+
+    it('should render condition field only if the pattern condition is met (string with flags)', () => {
+      const formFields = [{
+        component: 'custom-component',
+        name: 'foo',
+        condition: {
+          when: 'bar',
+          pattern: 'fuzz',
+          flags: 'i',
+        },
+      }];
+      const wrapper = mount(
+        <ContextWrapper formFieldsMapper={{
+          'custom-component': CustomComponent,
+        }}>
+          { renderForm(formFields) }
+        </ContextWrapper>
+      );
+      expect(wrapper.find(CustomComponent)).toHaveLength(0);
+
+      wrapper.find(Form).instance().form.change('bar', 'fUzz');
+      wrapper.update();
+      expect(wrapper.find(CustomComponent)).toHaveLength(1);
+    });
     it('should render condition field only if the pattern condition is not met', () => {
       const formFields = [{
         component: 'custom-component',

packages/react-form-renderer/src/tests/parsers/__snapshots__/default-schema-validator.test.js.snap

@@ -41,7 +41,7 @@ exports[`Default schema validator should fail if field condition is not correct
 exports[`Default schema validator should fail if field condition pattern property is not correct type. 1`] = `
 "
       Error occured in field definition with name: \\"foo\\".
-      Field condition must have \\"pattern\\" of instance \\"RegExp\\"! Instance received: [Number].
+      Field condition must have \\"pattern\\" of instance \\"RegExp\\" or \\"string\\"! Instance received: [Number].
     "
 `;
 

packages/react-form-renderer/src/tests/parsers/default-schema-validator.test.js

@@ -94,6 +94,14 @@ describe('Default schema validator', () => {
     }]}, formFieldsMapper)).toThrowErrorMatchingSnapshot();
   });
 
+  it('should not fail if field condition pattern property is a string', () => {
+    expect(() => defaultSchemaValidator({ fields: [{
+      component: 'foo',
+      name: 'foo',
+      condition: { when: 'Foo', pattern: '^pattern' },
+    }]}, formFieldsMapper)).not.toThrow();
+  });
+
   it('should fail if field condition have notMatch property and have not is/pattern.', () => {
     expect(() => defaultSchemaValidator({ fields: [{
       component: 'foo',

packages/react-renderer-demo/src/app/pages/renderer/condition.md

@@ -146,8 +146,21 @@ condition: {
   pattern: /bar/,
 }
 
-// Foo = 'This is a bar' => true
-// Foo = 'Foo foo baar!' => true
+// Foo = 'bar' => true
+// Foo = 'baar!' => false
+```
+
+It also accepts string value, then you have to use additional property flags if you need to specify RegExp flags:
+
+```jsx
+condition: {
+  when: 'Foo',
+  pattern: 'bar',
+  flags: 'i'
+}
+
+// Foo = 'bar' => true
+// Foo = 'bAr!' => true
 ```
 
 ### Not match
@@ -161,8 +174,8 @@ condition: {
   notMatch: true,
 }
 
-// Foo = 'This is a bar' => false
-// Foo = 'Foo foo baar!' => true
+// Foo = 'bar' => false
+// Foo = 'baar!' => true
 ```
 
 ```jsx