more strict wrapper definition

Author: MykolaGolubyev

src/App.tsx

@@ -9,6 +9,7 @@ import { formsDemo } from './demos/forms';
 import { sideBySideDemo } from './demos/sideBySide';
 import { longContentDemo } from './demos/longContent';
 import { inputsDemo } from './demos/inputs';
+import { WrapperProps } from './components/registry/componentWrapper';
 
 const widgets = new Registry('widgets', {componentWrapper: DemoWrapper});
 widgets
@@ -46,14 +47,10 @@ export class App extends React.Component {
     }
 }
 
-interface Props {
-    children: JSX.Element | JSX.Element[];
-}
-
-function DemoWrapper({children}: Props) {
+function DemoWrapper({OriginalComponent}: WrapperProps) {
     return (
         <div className="component-demo-local-wrapper">
-            {children}
+            <OriginalComponent/>
         </div>
     );
 }

src/components/index.ts

@@ -8,11 +8,14 @@ import { LayoutProps } from './layouts/LayoutProps';
 
 import { simulateState, refreshComponents } from './state/stateSimulation';
 
+import { WrapperProps } from './registry/componentWrapper';
+
 export {
     Registry,
     Registries,
     ComponentDemo,
     ComponentViewer,
+    WrapperProps,
     LayoutProps,
     GridLayout,
     TabsLayout,

src/components/registry/Registry.ts

@@ -6,10 +6,10 @@ import { TabsLayout } from '../layouts/TabsLayout';
 import { LayoutProps } from '../layouts/LayoutProps';
 import { LabelInstanceTableLayout } from '../layouts/LabelInstanceTableLayout';
 import { SingleItemLayout } from '../layouts/SingleItemLayout';
-import { wrapComponent } from './componentWrapper';
+import { wrapComponent, WrapperProps } from './componentWrapper';
 
 export interface RegistryConfig {
-    componentWrapper?: React.ComponentType;
+    componentWrapper?: React.ComponentType<WrapperProps>;
 }
 
 class Registry {

src/components/registry/componentWrapper.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 
-export function wrapComponent(Wrapper: React.ComponentType, Component: React.ComponentType) {
+export interface WrapperProps {
+    OriginalComponent: React.ComponentType;
+}
+
+export function wrapComponent(Wrapper: React.ComponentType<WrapperProps>, Component: React.ComponentType) {
     return () => (
-        <Wrapper>
-            <Component/>
-        </Wrapper>
+        <Wrapper OriginalComponent={Component}/>
     );
 }