fix: Update typings to allow any react component (#395)

* Update typings to allow any react component

* Remove unnecessary typings

Author: smac89

typings/carouselElements.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 
 interface SliderProps extends React.HTMLAttributes<HTMLDivElement> {
   readonly children: React.ReactNode
@@ -13,7 +13,7 @@ interface SliderProps extends React.HTMLAttributes<HTMLDivElement> {
   readonly trayTag?: string
   readonly trayProps?: React.HTMLAttributes<HTMLUListElement>
 }
-type SliderInterface = React.ComponentClass<SliderProps>
+type SliderInterface = React.ComponentType<SliderProps>
 /**
  * A Slider is a viewport that masks slides. The Slider component must wrap one or more Slide components.
  */
@@ -34,7 +34,7 @@ interface SlideProps extends React.HTMLAttributes<HTMLDivElement> {
   readonly tag?: string
   readonly style?: {}
 }
-type SlideInterface = React.ComponentClass<SlideProps>
+type SlideInterface = React.ComponentType<SlideProps>
 /**
  * The Slide component is a container with an intrinsic ratio computed by the
  * CarouselProvider naturalSlideWidth and naturalSlideHeight properties.
@@ -59,7 +59,7 @@ interface ImageWithZoomProps {
   readonly tag?: string
   readonly isPinchZoomEnabled?: boolean
 }
-type ImageWithZoomInterface = React.ComponentClass<ImageWithZoomProps>
+type ImageWithZoomInterface = React.ComponentType<ImageWithZoomProps>
 declare const ImageWithZoom: ImageWithZoomInterface
 
 

typings/index.d.ts

@@ -2,7 +2,7 @@
 // Definitions by: Jedrzej Lewandowski <https://github.com/TheFullResolution>
 // TypeScript Version: 2.7.2
 
-import * as React from 'react'
+import React from 'react'
 import {
   ButtonBack,
   ButtonFirst,
@@ -26,7 +26,7 @@ import {
   ButtonLastProps,
   ButtonFirstProps,
   ButtonPlayProps
-} from './carouselElements.d'
+} from './carouselElements'
 
 interface CarouselState {
   readonly currentSlide: number
@@ -97,7 +97,7 @@ interface CarouselProviderProps {
   readonly isIntrinsicHeight?: CarouselState['isIntrinsicHeight']
 }
 
-type CarouselProviderInterface = React.ComponentClass<CarouselProviderProps>
+type CarouselProviderInterface = React.ComponentType<CarouselProviderProps>
 /**
  * CarouselProvider allows the other carousel components to communicate with each other.
  *
@@ -115,31 +115,25 @@ type CarouselProviderInterface = React.ComponentClass<CarouselProviderProps>
 declare const CarouselProvider: CarouselProviderInterface
 
 export interface CarouselInjectedProps {
-  readonly carouselStore: CarouselStoreInterface
+  readonly carouselStore: Pick<
+    CarouselStoreInterface,
+    | "getStoreState"
+    | "masterSpinnerError"
+    | "masterSpinnerSuccess"
+    | "setStoreState"
+    | "subscribeMasterSpinner"
+    | "unsubscribeAllMasterSpinner"
+    | "unsubscribeMasterSpinner"
+  >;
 }
 
-// Diff / Omit taken from https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-311923766
-type Diff<T extends string, U extends string> = ({ [P in T]: P } &
-  { [P in U]: never } & { readonly [x: string]: never })[T]
-type Omit<T, K extends keyof T> = Pick<T, Diff<Extract<keyof T, string>, Extract<K, string>>>
-
 type MapStateToProps<TStateProps> = (state: CarouselState) => TStateProps
 
 interface WithStoreInterface {
-  <CustomProps extends CarouselInjectedProps>(
-    component: React.ComponentClass<CustomProps>
-  ): React.ComponentClass<Omit<CustomProps, keyof CarouselInjectedProps>> & {
-    readonly WrappedComponent: React.ComponentClass<CustomProps>
-  }
-
-  <CustomProps extends CarouselInjectedProps, CustomStateProps>(
-    component: React.ComponentClass<CustomProps & CustomStateProps>,
-    state: MapStateToProps<CustomStateProps>
-  ): React.ComponentClass<Omit<CustomProps, keyof CarouselInjectedProps>> & {
-    readonly WrappedComponent: React.ComponentClass<
-      CustomProps & CustomStateProps
-    >
-  }
+  <CustomProps, CustomStateProps = {}>(
+    component: React.ComponentType<CustomProps & CustomStateProps & CarouselInjectedProps>,
+    mapStateToProps?: MapStateToProps<CustomStateProps>
+  ): React.ComponentType<CustomProps>
 }
 /**
  * Use this HOC to pass CarouselProvider state properties as props to a component.