feat: Added children type declaration for React 18 (#36)

* Update PullToRefresh.tsx

- React 18 requires children props type to be explicitly declared

* updated react version

package.json

@@ -32,8 +32,8 @@
     "awesome-typescript-loader": "^5.2.1",
     "jest": "^23.6.0",
     "path": "^0.12.7",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-hot-loader": "^4.3.11",
     "react-test-renderer": "^16.5.2",
     "rimraf": "^2.6.2",
@@ -47,7 +47,7 @@
     "webpack-dev-server": "^3.1.9"
   },
   "peerDependencies": {
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

src/components/PullToRefresh.tsx

@@ -11,6 +11,7 @@ export interface PullToRefreshProps {
   backgroundColor?: string;
   containerStyle?: React.CSSProperties;
   startInvisible?: boolean;
+  children?: React.ReactNode;
 }
 
 export interface PullToRefreshState {
@@ -19,7 +20,10 @@ export interface PullToRefreshState {
   onRefreshing: boolean;
 }
 
-export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRefreshState> {
+export class PullToRefresh extends React.Component<
+  PullToRefreshProps,
+  PullToRefreshState
+> {
   private container: any;
 
   private containerRef(container) {
@@ -30,9 +34,13 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
 
   private pullDownRef(pullDown) {
     this.pullDown = pullDown;
-        const maxPullDownDistance = this.pullDown && this.pullDown.firstChild && this.pullDown.firstChild["getBoundingClientRect"]
-            ? this.pullDown.firstChild["getBoundingClientRect"]().height : 0;
-        this.setState({maxPullDownDistance});
+    const maxPullDownDistance =
+      this.pullDown &&
+      this.pullDown.firstChild &&
+      this.pullDown.firstChild["getBoundingClientRect"]
+        ? this.pullDown.firstChild["getBoundingClientRect"]().height
+        : 0;
+    this.setState({ maxPullDownDistance });
   }
 
   private dragging = false;
@@ -81,7 +89,7 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
   }
 
   private onTouchStart(e) {
-        const {triggerHeight = 40} = this.props;
+    const { triggerHeight = 40 } = this.props;
     this.startY = e["pageY"] || e.touches[0].pageY;
     this.currentY = this.startY;
 
@@ -103,7 +111,10 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
         return;
       }
     } else {
-            const top = this.container.getBoundingClientRect().top || this.container.getBoundingClientRect().y || 0;
+      const top =
+        this.container.getBoundingClientRect().top ||
+        this.container.getBoundingClientRect().y ||
+        0;
       if (this.startY - top > triggerHeight) {
         return;
       }
@@ -128,7 +139,7 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
       e.preventDefault();
     }
 
-        if ((this.currentY - this.startY) >= this.props.pullDownThreshold) {
+    if (this.currentY - this.startY >= this.props.pullDownThreshold) {
       this.setState({
         pullToRefreshThresholdBreached: true,
       });
@@ -139,7 +150,9 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
     }
 
     this.container.style.overflow = "visible";
-        this.container.style.transform = `translate(0px, ${this.currentY - this.startY}px)`;
+    this.container.style.transform = `translate(0px, ${
+      this.currentY - this.startY
+    }px)`;
     this.pullDown.style.visibility = "visible";
   }
 
@@ -149,16 +162,20 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
     this.currentY = 0;
 
     if (!this.state.pullToRefreshThresholdBreached) {
-            this.pullDown.style.visibility = this.props.startInvisible ? "hidden" : "visible";
+      this.pullDown.style.visibility = this.props.startInvisible
+        ? "hidden"
+        : "visible";
       this.initContainer();
       return;
     }
 
     this.container.style.overflow = "visible";
     this.container.style.transform = `translate(0px, ${this.props.pullDownThreshold}px)`;
-        this.setState({
+    this.setState(
+      {
         onRefreshing: true,
-        }, () => {
+      },
+      () => {
         this.props.onRefresh().then(() => {
           this.initContainer();
           setTimeout(() => {
@@ -168,7 +185,8 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
             });
           }, 200);
         });
-        });
+      },
+    );
   }
 
   private initContainer() {
@@ -181,9 +199,14 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
   }
 
   private renderPullDownContent() {
-        const {releaseContent, pullDownContent, refreshContent, startInvisible} = this.props;
-        const {onRefreshing, pullToRefreshThresholdBreached} = this.state;
-        const content = onRefreshing ? refreshContent : pullToRefreshThresholdBreached ? releaseContent : pullDownContent;
+    const { releaseContent, pullDownContent, refreshContent, startInvisible } =
+      this.props;
+    const { onRefreshing, pullToRefreshThresholdBreached } = this.state;
+    const content = onRefreshing
+      ? refreshContent
+      : pullToRefreshThresholdBreached
+      ? releaseContent
+      : pullDownContent;
     const contentStyle: React.CSSProperties = {
       position: "absolute",
       overflow: "hidden",
@@ -200,7 +223,7 @@ export class PullToRefresh extends React.Component<PullToRefreshProps, PullToRef
   }
 
   public render() {
-        const {backgroundColor} = this.props;
+    const { backgroundColor } = this.props;
     const containerStyle: React.CSSProperties = {
       height: "auto",
       overflow: "hidden",