jb-infinite-scroll 1.1.0

package/react/dist/web-component/jb-infinite-scroll/react/lib/JBInfiniteScroll.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import "jb-infinite-scroll";
+import { JBInfiniteScrollWebComponent, StateChangeWaitingBehavior } from "jb-infinite-scroll";
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'jb-infinite-scroll': JBInfiniteScrollType;
+        }
+        interface JBInfiniteScrollType extends React.DetailedHTMLProps<React.HTMLAttributes<JBInfiniteScrollWebComponent>, JBInfiniteScrollWebComponent> {
+            "class"?: string;
+            "type"?: string;
+        }
+    }
+}
+declare const JBInfiniteScroll: React.ForwardRefExoticComponent<{
+    stateChangeWaitingBehavior?: StateChangeWaitingBehavior;
+    disableCaptureScroll?: boolean;
+    isListEmpty?: boolean;
+    isLoading?: boolean;
+    isListEnded?: boolean;
+    onScrollEnd?: (e: CustomEvent) => void;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<JBInfiniteScrollWebComponent>>;
+export type Props = React.PropsWithChildren<{
+    stateChangeWaitingBehavior?: StateChangeWaitingBehavior;
+    disableCaptureScroll?: boolean;
+    isListEmpty?: boolean;
+    isLoading?: boolean;
+    isListEnded?: boolean;
+    onScrollEnd?: (e: CustomEvent) => void;
+}>;
+export { JBInfiniteScroll, StateChangeWaitingBehavior };

package/react/index.js

@@ -0,0 +1 @@
+export * from './dist/JBInfiniteScroll.js';

package/react/lib/JBInfiniteScroll.tsx

@@ -0,0 +1,107 @@
+import React, { useState, useRef, useCallback, useEffect, useImperativeHandle } from 'react';
+import "jb-infinite-scroll";
+
+// eslint-disable-next-line no-duplicate-imports
+import {JBInfiniteScrollWebComponent, StateChangeWaitingBehavior} from "jb-infinite-scroll";
+import { useBindEvent } from "../../../../common/hooks/use-event.js";
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'jb-infinite-scroll': JBInfiniteScrollType;
+    }
+    interface JBInfiniteScrollType extends React.DetailedHTMLProps<React.HTMLAttributes<JBInfiniteScrollWebComponent>, JBInfiniteScrollWebComponent> {
+      "class"?: string,
+      "type"?: string;
+    }
+  }
+}
+
+const JBInfiniteScroll = React.forwardRef((props: Props, ref:React.ForwardedRef<JBInfiniteScrollWebComponent>) => {
+  const element = useRef<JBInfiniteScrollWebComponent>(null);
+  const [refChangeCount, refChangeCountSetter] = useState(0);
+  useImperativeHandle(
+    ref,
+    () => (element ? element.current : null),
+    [element],
+  );
+  useEffect(() => {
+    refChangeCountSetter(refChangeCount + 1);
+  }, [element.current]);
+
+  useEffect(() => {
+    element.current?.checkScrollHeight();
+  }, [element.current]);
+
+  const onScrollEnd = useCallback((e) => {
+    if (props.onScrollEnd) {
+      props.onScrollEnd(e);
+    }
+  }, [props.onScrollEnd]);
+
+  useBindEvent(element, 'scrollEnd', onScrollEnd, true);
+
+  useEffect(() => {
+    if (element.current) {
+      if (props.isLoading) {
+        element.current.setAttribute('is-loading', 'true');
+      } else {
+        element.current.setAttribute('is-loading', 'false');
+
+      }
+    }
+
+  }, [props.isLoading]);
+  useEffect(() => {
+    if (element.current) {
+      if (props.isListEmpty) {
+        element.current.setAttribute('is-list-empty', 'true');
+      } else {
+        element.current.setAttribute('is-list-empty', 'false');
+
+      }
+    }
+
+  }, [props.isListEmpty]);
+  useEffect(() => {
+    if (element.current) {
+      if (props.isListEnded) {
+        element.current?.setAttribute('is-list-ended', 'true');
+      } else {
+        element.current?.setAttribute('is-list-ended', 'false');
+      }
+    }
+
+  }, [props.isListEnded]);
+  useEffect(() => {
+    if (element.current) {
+      if (props.disableCaptureScroll) {
+        element.current?.setAttribute('disable-capture-scroll', 'true');
+      } else {
+        element.current?.setAttribute('disable-capture-scroll', 'false');
+      }
+    }
+
+  }, [props.disableCaptureScroll]);
+  useEffect(() => {
+    if (props.stateChangeWaitingBehavior && element.current) {
+      element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);
+    }
+  }, [props.stateChangeWaitingBehavior]);
+  return (
+    <jb-infinite-scroll ref={element}>{props.children}</jb-infinite-scroll>
+  );
+});
+export type Props = React.PropsWithChildren< {
+  stateChangeWaitingBehavior?: StateChangeWaitingBehavior,
+  disableCaptureScroll?: boolean,
+  isListEmpty?: boolean,
+  isLoading?: boolean,
+  isListEnded?:boolean,
+  onScrollEnd?:(e:CustomEvent)=>void
+}>
+
+JBInfiniteScroll.displayName = "JBInfiniteScroll";
+
+export {JBInfiniteScroll, StateChangeWaitingBehavior};

package/react/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "jb-infinite-scroll-react",
+  "description": "infinite scroll react component",
+  "type": "module",
+  "author": {
+		"name": "mohammad javad bathaei",
+		"email": "javadbat@gmail.com"
+	},
+  "keywords": [
+    "jb",
+    "jb-infinite-scroll",
+    "infinite scroll",
+    "react component"
+  ],
+  "version": "1.0.0",
+  "bugs": "https://github.com/javadbat/jb-infinite-scroll/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "lib/",
+    "dist/"
+  ],
+  "main": "index.js",
+  "repository": {
+		"type": "git",
+		"url": "git@github.com:javadbat/jb-infinite-scroll.git"
+  },
+  "types": "./dist/web-component/jb-infinite-scroll/react/lib/JBInfiniteScroll.d.ts",
+  "dependencies": {
+    "jb-infinite-scroll": ">=1.0.0"
+  }
+}

package/react/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "baseUrl": "."
+    },
+    "include": [
+        "../../../common/scripts/**/*.ts",
+        "../../../common/hooks/**/*.ts",
+        "../../../common/hooks/**/*.js",
+        "lib/**/*.ts",
+        "lib/**/*.tsx"
+    ],
+    "exclude": [
+        "node_modules",
+        "**/*.spec.ts",
+        "dist",
+    ],
+    "extends":"../../tsconfig-react.json"
+}