react: Remove usage of removed React.StatelessComponent

Author: lucas-koehler

packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx

@@ -34,7 +34,7 @@ import MaterialArrayControlRenderer from '../../src/complex/MaterialArrayControl
 import { materialCells, materialRenderers } from '../../src';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { JsonFormsStateProvider, StatelessRenderer } from '@jsonforms/react';
+import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
 import { checkTooltip, checkTooltipTranslation } from './tooltipChecker';
 
@@ -376,10 +376,10 @@ describe('Material array control', () => {
     expect(onChangeData.data.length).toBe(1);
   });
 
-  const CellRenderer1: StatelessRenderer<DispatchCellProps> = () => (
+  const CellRenderer1: React.FC<DispatchCellProps> = () => (
     <div className='cell test 1' />
   );
-  const CellRenderer2: StatelessRenderer<DispatchCellProps> = () => (
+  const CellRenderer2: React.FC<DispatchCellProps> = () => (
     <div className='cell test 2' />
   );
 

packages/react/src/Renderer.tsx

@@ -46,9 +46,10 @@ export class RendererComponent<
  * Stateless Renderer.
  *
  * @template P type of any renderer props
+ * @deprecated Use React.FunctionComponent instead
  */
 export type StatelessRenderer<P extends RendererProps> =
-  React.StatelessComponent<P>;
+  React.FunctionComponent<P>;
 
 /**
  * Represents a Renderer, which might either be a component or a function.
@@ -57,4 +58,4 @@ export type Renderer =
   // TODO fix @typescript-eslint/ban-types
   // eslint-disable-next-line @typescript-eslint/ban-types
   | RendererComponent<RendererProps & any, {}>
-  | StatelessRenderer<RendererProps & any>;
+  | React.FunctionComponent<RendererProps & any>;

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

@@ -50,7 +50,6 @@ import {
 } from '@jsonforms/core';
 import { isEqual } from 'lodash';
 import Enzyme, { mount, shallow } from 'enzyme';
-import type { StatelessRenderer } from '../../src/Renderer';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import {
   JsonForms,
@@ -114,13 +113,13 @@ export const initJsonFormsStore = ({
   return createStore(reducer, initState);
 };
 
-const CustomRenderer1: StatelessRenderer<RendererProps> = () => <h1>test</h1>;
-const CustomRenderer2: StatelessRenderer<RendererProps> = () => <h2>test</h2>;
-const CustomRenderer3: StatelessRenderer<RendererProps> = () => <h3>test</h3>;
-const CellRenderer1: StatelessRenderer<DispatchCellProps> = () => (
+const CustomRenderer1: React.FC<RendererProps> = () => <h1>test</h1>;
+const CustomRenderer2: React.FC<RendererProps> = () => <h2>test</h2>;
+const CustomRenderer3: React.FC<RendererProps> = () => <h3>test</h3>;
+const CellRenderer1: React.FC<DispatchCellProps> = () => (
   <h1 className='cell test 1'>test</h1>
 );
-const CellRenderer2: StatelessRenderer<DispatchCellProps> = () => (
+const CellRenderer2: React.FC<DispatchCellProps> = () => (
   <h2 className='cell test 2'>test</h2>
 );
 
@@ -256,7 +255,7 @@ test('ids should be unique within the same form', () => {
   });
 
   const ids: string[] = [];
-  const MyCustomRenderer: StatelessRenderer<any> = (props: any) => {
+  const MyCustomRenderer: React.FC<any> = (props: any) => {
     ids.push(props.id);
     return <div>Custom</div>;
   };
@@ -432,9 +431,7 @@ test('JsonForms renderer should pick most applicable cell renderer via ownProps'
   });
   store.dispatch(registerCell(() => 50, CellRenderer1));
 
-  const ArrayRenderer: StatelessRenderer<RendererProps> = (
-    props: RendererProps
-  ) => {
+  const ArrayRenderer: React.FC<RendererProps> = (props: RendererProps) => {
     return (
       <DispatchCell
         schema={props.schema}
@@ -555,9 +552,7 @@ test('JsonForms renderer should pick schema from ownProps', () => {
 });
 
 test('JsonForms renderer should pick enabled prop from ownProps', () => {
-  const CustomRenderer4: StatelessRenderer<RendererProps> = (
-    props: RendererProps
-  ) => {
+  const CustomRenderer4: React.FC<RendererProps> = (props: RendererProps) => {
     return <h3>{`${props.enabled}`}</h3>;
   };
 
@@ -1010,7 +1005,7 @@ test('JsonForms should update if data prop is updated', () => {
 });
 
 test('JsonForms should use additionalErrors if provided', () => {
-  const CustomRendererWithError: StatelessRenderer<ControlProps> = ({
+  const CustomRendererWithError: React.FC<ControlProps> = ({
     errors,
   }: ControlProps) => {
     return <h5>{errors}</h5>;
@@ -1048,7 +1043,7 @@ test('JsonForms should use additionalErrors if provided', () => {
 });
 
 test('JsonForms should use react to additionalErrors update', () => {
-  const CustomRendererWithError: StatelessRenderer<ControlProps> = ({
+  const CustomRendererWithError: React.FC<ControlProps> = ({
     errors,
   }: ControlProps) => {
     return <h5>{errors}</h5>;

packages/vanilla-renderers/src/cells/BooleanCell.tsx

@@ -30,13 +30,10 @@ import {
   rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
-import type { StatelessComponent } from 'react';
 import type { VanillaRendererProps } from '../index';
 import { withVanillaBooleanCellProps } from '../util/index';
 
-export const BooleanCell: StatelessComponent<CellProps> = (
-  props: CellProps & VanillaRendererProps
-) => {
+export const BooleanCell = (props: CellProps & VanillaRendererProps) => {
   const { data, className, id, enabled, uischema, path, handleChange } = props;
 
   return (