feat: allow filterProps to be a function (#417)

Author: bschlenk

README.md

@@ -70,9 +70,13 @@ console.log(reactElementToJSXString(<div a="1" b="2">Hello, world!</div>));
 
   Just return the name you want for the provided ReactElement, as a string.
 
-**options.filterProps: array, default []**
+**options.filterProps: string[] | (val: any, key: string) => boolean, default []**
 
-  Provide an array of props to filter for every component. For example ['key'] will suppress the key="" prop from being added.
+  If an array of strings is passed, filter out any prop who's name is in
+  the array. For example ['key'] will suppress the key="" prop from being added.
+
+  If a function is passed, it will be called for each prop with two arguments,
+  the prop value and key, and will filter out any that return false.
 
 **options.showDefaultProps: boolean, default true**
 

src/formatter/createPropFilter.js

@@ -0,0 +1,12 @@
+/* @flow */
+
+export default function createPropFilter(
+  props: {},
+  filter: string[] | ((any, string) => boolean)
+) {
+  if (Array.isArray(filter)) {
+    return (key: string) => filter.indexOf(key) === -1;
+  } else {
+    return (key: string) => filter(props[key], key);
+  }
+}

src/formatter/createPropFilter.spec.js

@@ -0,0 +1,26 @@
+/* @flow */
+
+import createPropFilter from './createPropFilter';
+
+describe('createPropFilter', () => {
+  it('should filter based on an array of keys', () => {
+    const props = { a: 1, b: 2, c: 3 };
+    const filter = createPropFilter(props, ['b']);
+
+    const filteredPropKeys = Object.keys(props).filter(filter);
+
+    expect(filteredPropKeys).toEqual(['a', 'c']);
+  });
+
+  it('should filter based on a callback', () => {
+    const props = { a: 1, b: 2, c: 3 };
+    const filter = createPropFilter(
+      props,
+      (val, key) => key !== 'b' && val < 3
+    );
+
+    const filteredPropKeys = Object.keys(props).filter(filter);
+
+    expect(filteredPropKeys).toEqual(['a']);
+  });
+});

src/formatter/formatReactElementNode.js

@@ -5,6 +5,7 @@ import formatTreeNode from './formatTreeNode';
 import formatProp from './formatProp';
 import mergeSiblingPlainStringChildrenReducer from './mergeSiblingPlainStringChildrenReducer';
 import sortPropsByNames from './sortPropsByNames';
+import createPropFilter from './createPropFilter';
 import type { Options } from './../options';
 import type { ReactElementTreeNode } from './../tree';
 
@@ -126,13 +127,15 @@ export default (
 
   const visibleAttributeNames = [];
 
+  const propFilter = createPropFilter(props, filterProps);
+
   Object.keys(props)
-    .filter(propName => filterProps.indexOf(propName) === -1)
+    .filter(propFilter)
     .filter(onlyPropsWithOriginalValue(defaultProps, props))
     .forEach(propName => visibleAttributeNames.push(propName));
 
   Object.keys(defaultProps)
-    .filter(defaultPropName => filterProps.indexOf(defaultPropName) === -1)
+    .filter(propFilter)
     .filter(() => showDefaultProps)
     .filter(defaultPropName => !visibleAttributeNames.includes(defaultPropName))
     .forEach(defaultPropName => visibleAttributeNames.push(defaultPropName));

src/formatter/formatReactElementNode.spec.js

@@ -125,4 +125,30 @@ describe('formatReactElementNode', () => {
     </div>`
     );
   });
+
+  it('should allow filtering props by function', () => {
+    const tree = {
+      type: 'ReactElement',
+      displayName: 'h1',
+      defaultProps: {},
+      props: { className: 'myClass', onClick: () => {} },
+      childrens: [
+        {
+          value: 'Hello world',
+          type: 'string',
+        },
+      ],
+    };
+
+    const options = {
+      ...defaultOptions,
+      filterProps: (val, key) => !key.startsWith('on'),
+    };
+
+    expect(formatReactElementNode(tree, false, 0, options)).toEqual(
+      `<h1 className="myClass">
+  Hello world
+</h1>`
+    );
+  });
 });

src/index.spec.js

@@ -794,6 +794,17 @@ describe('reactElementToJSXString(ReactElement)', () => {
     ).toEqual('<TestComponent a="b" />');
   });
 
+  it("reactElementToJSXString(<TestComponent />, { filterProps: () => !key.startsWith('some')) })", () => {
+    expect(
+      reactElementToJSXString(
+        <TestComponent a="b" someProp="foo" someOtherProp={false} />,
+        {
+          filterProps: (val, key) => !key.startsWith('some'),
+        }
+      )
+    ).toEqual('<TestComponent a="b" />');
+  });
+
   it('reactElementToJSXString(<TestComponent />, { useBooleanShorthandSyntax: false })', () => {
     expect(
       reactElementToJSXString(