[react] Allow renderers ownProp to be passed to JsonForms component

Author: edgarmueller

packages/core/src/util/renderer.ts

@@ -503,17 +503,20 @@ export const mapStateToLayoutProps = (
   };
 };
 
-export interface JsonFormsProps extends StatePropsOfRenderer {
-  renderers?: { tester: RankedTester; renderer: any }[];
+export interface OwnPropsOfJsonFormsRenderer extends OwnPropsOfRenderer {
+  renderers?: JsonFormsRendererRegistryEntry[];
 }
 
-export interface StatePropsOfJsonFormsRenderer extends OwnPropsOfRenderer {
+export interface JsonFormsProps extends StatePropsOfRenderer {
   renderers?: JsonFormsRendererRegistryEntry[];
 }
 
+export interface StatePropsOfJsonFormsRenderer
+  extends OwnPropsOfJsonFormsRenderer {}
+
 export const mapStateToJsonFormsRendererProps = (
   state: JsonFormsState,
-  ownProps: OwnPropsOfRenderer
+  ownProps: OwnPropsOfJsonFormsRenderer
 ): StatePropsOfJsonFormsRenderer => {
   let uischema = ownProps.uischema;
   if (uischema === undefined) {
@@ -525,7 +528,7 @@ export const mapStateToJsonFormsRendererProps = (
   }
 
   return {
-    renderers: get(state.jsonforms, 'renderers') || [],
+    renderers: ownProps.renderers || get(state.jsonforms, 'renderers') || [],
     schema: ownProps.schema || getSchema(state),
     uischema
   };

packages/react/src/JsonForms.tsx

@@ -34,6 +34,7 @@ import {
   JsonFormsProps,
   JsonSchema,
   mapStateToJsonFormsRendererProps,
+  OwnPropsOfJsonFormsRenderer,
   OwnPropsOfRenderer,
   removeId,
   StatePropsOfJsonFormsRenderer
@@ -160,7 +161,7 @@ export class JsonFormsDispatchRenderer extends ResolvedJsonFormsDispatchRenderer
     }
 }
 
-export const JsonForms = connect<StatePropsOfJsonFormsRenderer, {}, OwnPropsOfRenderer>(
+export const JsonForms = connect<StatePropsOfJsonFormsRenderer, {}, OwnPropsOfJsonFormsRenderer>(
     mapStateToJsonFormsRendererProps,
     null
 )(JsonFormsDispatchRenderer);

packages/react/test/renderers/JsonForms.test.tsx

@@ -138,7 +138,7 @@ test('JsonForms renderer should pick most applicable renderer', () => {
     uischema: fixture.uischema
   });
   store.dispatch(registerRenderer(() => 10, CustomRenderer1));
-  store.dispatch(registerRenderer(() => 5, CustomRenderer1));
+  store.dispatch(registerRenderer(() => 5, CustomRenderer2));
   const wrapper = mount(
     <Provider store={store}>
       <JsonForms uischema={fixture.uischema} schema={fixture.schema} />
@@ -364,3 +364,24 @@ test.skip('updates schema with ref', () => {
     wrapper.unmount();
   });
 });
+
+test('JsonForms renderer should pick most applicable renderer via ownProps', () => {
+  const store = initJsonFormsStore({
+    data: fixture.data,
+    uischema: fixture.uischema
+  });
+  store.dispatch(registerRenderer(() => 10, CustomRenderer1));
+  store.dispatch(registerRenderer(() => 5, CustomRenderer2));
+  const wrapper = mount(
+    <Provider store={store}>
+      <JsonForms
+        uischema={fixture.uischema}
+        schema={fixture.schema}
+        renderers={[{ tester: () => 3, renderer: CustomRenderer3 }]}
+      />
+    </Provider>
+  );
+
+  expect(wrapper.find('h3').text()).toBe('test');
+  wrapper.unmount();
+});