jb-infinite-scroll 1.2.2 → 1.2.4

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import "jb-infinite-scroll";
 import { JBInfiniteScrollWebComponent, StateChangeWaitingBehavior } from "jb-infinite-scroll";
+import { EventProps } from './events-hook.js';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -12,24 +13,22 @@ declare global {
         }
     }
 }
-declare const JBInfiniteScroll: React.ForwardRefExoticComponent<{
+declare const JBInfiniteScroll: React.ForwardRefExoticComponent<EventProps & {
     stateChangeWaitingBehavior?: StateChangeWaitingBehavior;
     disableCaptureScroll?: boolean;
     isListEmpty?: boolean;
     isLoading?: boolean;
     isListEnded?: boolean;
     className?: string;
-    onScrollEnd?: (e: CustomEvent) => void;
 } & {
     children?: React.ReactNode;
 } & React.RefAttributes<JBInfiniteScrollWebComponent>>;
-export type Props = React.PropsWithChildren<{
+export type Props = EventProps & React.PropsWithChildren<{
     stateChangeWaitingBehavior?: StateChangeWaitingBehavior;
     disableCaptureScroll?: boolean;
     isListEmpty?: boolean;
     isLoading?: boolean;
     isListEnded?: boolean;
     className?: string;
-    onScrollEnd?: (e: CustomEvent) => void;
 }>;
 export { JBInfiniteScroll, StateChangeWaitingBehavior };

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

@@ -0,0 +1,18 @@
+import { RefObject } from "react";
+import type { JBInfiniteScrollEventType, JBInfiniteScrollWebComponent } from 'jb-infinite-scroll';
+export type EventProps = {
+    /**
+     * when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+     */
+    onLoad?: (e: JBInfiniteScrollEventType<CustomEvent>) => void;
+    /**
+   * when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+   */
+    onInit?: (e: JBInfiniteScrollEventType<CustomEvent>) => void;
+    /**
+     * on user scroll to the end
+     */
+    onScrollEnd?: (e: JBInfiniteScrollEventType<CustomEvent>) => void;
+    onScroll?: (e: JBInfiniteScrollEventType<Event>) => void;
+};
+export declare function useEvents(element: RefObject<JBInfiniteScrollWebComponent>, props: EventProps): void;

package/react/lib/JBInfiniteScroll.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useRef, useCallback, useEffect, useImperativeHandle } from 'react';
+import React, { useRef, useCallback, useEffect, useImperativeHandle } from 'react';
 import "jb-infinite-scroll";
-
+import { useJBInfiniteScrollAttribute, JBInfiniteScrollAttributes } from './attributes-hook.js';
 // eslint-disable-next-line no-duplicate-imports
-import {JBInfiniteScrollWebComponent, StateChangeWaitingBehavior} from "jb-infinite-scroll";
-import { useBindEvent } from "../../../../common/hooks/use-event.js";
+import { JBInfiniteScrollWebComponent, StateChangeWaitingBehavior } from "jb-infinite-scroll";
+import { EventProps, useEvents } from './events-hook.js';
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -18,87 +18,29 @@ declare global {
   }
 }
 
-const JBInfiniteScroll = React.forwardRef((props: Props, ref:React.ForwardedRef<JBInfiniteScrollWebComponent>) => {
+const JBInfiniteScroll = React.forwardRef((props: Props, ref: React.ForwardedRef<JBInfiniteScrollWebComponent>) => {
   const element = useRef<JBInfiniteScrollWebComponent>(null);
   useImperativeHandle(
     ref,
-    () => (element ? element.current : null),
+    () => (element ? element.current : undefined),
     [element],
   );
 
-  const onScrollEnd = useCallback((e:CustomEvent) => {
-    if (typeof props.onScrollEnd == "function") {
-      props.onScrollEnd(e);
-    }
-  }, [props.onScrollEnd]);
-
-  useBindEvent(element, 'scrollEnd', onScrollEnd, true);
-
-  useEffect(() => {
-    if (element.current && typeof props.isLoading == "boolean") {
-      if (props.isLoading) {
-        element.current.setAttribute('is-loading', 'true');
-      } else {
-        element.current.setAttribute('is-loading', 'false');
-      }
-    }
-
-  }, [element.current, props.isLoading]);
-
-  useEffect(() => {
-    if (element.current, typeof props.isListEmpty == "boolean") {
-      if (props.isListEmpty) {
-        element.current.setAttribute('is-list-empty', 'true');
-      } else {
-        element.current.setAttribute('is-list-empty', 'false');
-
-      }
-    }
-
-  }, [element.current, props.isListEmpty]);
+  useJBInfiniteScrollAttribute(element, props);
+  useEvents(element, props);
 
-  useEffect(() => {
-    if (element.current && typeof props.isListEnded == "boolean") {
-      if (props.isListEnded) {
-        element.current?.setAttribute('is-list-ended', 'true');
-      } else {
-        element.current?.setAttribute('is-list-ended', 'false');
-      }
-    }
-
-  }, [element.current, props.isListEnded]);
-
-  useEffect(() => {
-    if (element.current && typeof props.disableCaptureScroll == "boolean") {
-      if (props.disableCaptureScroll) {
-        element.current?.setAttribute('disable-capture-scroll', 'true');
-      } else {
-        element.current?.setAttribute('disable-capture-scroll', 'false');
-      }
-    }
-
-  }, [element.current, props.disableCaptureScroll]);
-
-  useEffect(() => {
-    if (props.stateChangeWaitingBehavior && element.current) {
-      element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);
-    }
-  }, [element.current, props.stateChangeWaitingBehavior]);
   return (
-    <jb-infinite-scroll class={props.className} ref={element}>{props.children}</jb-infinite-scroll>
+    <jb-infinite-scroll style={props.style} class={props.className} ref={element}>{props.children}</jb-infinite-scroll>
   );
 });
 
-export type Props = React.PropsWithChildren< {
-  stateChangeWaitingBehavior?: StateChangeWaitingBehavior,
-  disableCaptureScroll?: boolean,
-  isListEmpty?: boolean,
-  isLoading?: boolean,
-  isListEnded?:boolean,
-  className?:string
-  onScrollEnd?:(e:CustomEvent)=>void
-}>
+type JBInfiniteScrollProps = {
+
+  className?: string,
+  style?: React.CSSProperties,
+}
+export type Props = JBInfiniteScrollAttributes & EventProps & React.PropsWithChildren<JBInfiniteScrollProps>
 
 JBInfiniteScroll.displayName = "JBInfiniteScroll";
 
-export {JBInfiniteScroll, StateChangeWaitingBehavior};
+export { JBInfiniteScroll, StateChangeWaitingBehavior };

package/react/lib/attributes-hook.ts

@@ -0,0 +1,63 @@
+import { JBInfiniteScrollWebComponent, type StateChangeWaitingBehavior} from "jb-infinite-scroll";
+import { type ValidationItem } from "jb-validation";
+import { RefObject, useEffect } from "react";
+
+export type JBInfiniteScrollAttributes = {
+  stateChangeWaitingBehavior?: StateChangeWaitingBehavior,
+  disableCaptureScroll?: boolean,
+  isListEmpty?: boolean,
+  isLoading?: boolean,
+  isListEnded?:boolean,
+}
+export function useJBInfiniteScrollAttribute(element: RefObject<JBInfiniteScrollWebComponent>, props: JBInfiniteScrollAttributes) {
+    useEffect(() => {
+    if (element.current && typeof props.isLoading == "boolean") {
+      if (props.isLoading) {
+        element.current.setAttribute('is-loading', 'true');
+      } else {
+        element.current.setAttribute('is-loading', 'false');
+      }
+    }
+
+  }, [element.current, props.isLoading]);
+
+  useEffect(() => {
+    if (element.current, typeof props.isListEmpty == "boolean") {
+      if (props.isListEmpty) {
+        element.current.setAttribute('is-list-empty', 'true');
+      } else {
+        element.current.setAttribute('is-list-empty', 'false');
+
+      }
+    }
+
+  }, [element.current, props.isListEmpty]);
+
+  useEffect(() => {
+    if (element.current && typeof props.isListEnded == "boolean") {
+      if (props.isListEnded) {
+        element.current?.setAttribute('is-list-ended', 'true');
+      } else {
+        element.current?.setAttribute('is-list-ended', 'false');
+      }
+    }
+
+  }, [element.current, props.isListEnded]);
+
+  useEffect(() => {
+    if (element.current && typeof props.disableCaptureScroll == "boolean") {
+      if (props.disableCaptureScroll) {
+        element.current?.setAttribute('disable-capture-scroll', 'true');
+      } else {
+        element.current?.setAttribute('disable-capture-scroll', 'false');
+      }
+    }
+
+  }, [element.current, props.disableCaptureScroll]);
+
+  useEffect(() => {
+    if (props.stateChangeWaitingBehavior && element.current) {
+      element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);
+    }
+  }, [element.current, props.stateChangeWaitingBehavior]);
+}

package/react/lib/events-hook.ts

@@ -0,0 +1,26 @@
+import { useEvent } from "jb-core/react";
+import { RefObject } from "react";
+import type { JBInfiniteScrollEventType, JBInfiniteScrollWebComponent } from 'jb-infinite-scroll';
+
+export type EventProps = {
+  /**
+   * when component loaded, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+   */
+  onLoad?: (e: JBInfiniteScrollEventType<CustomEvent>) => void,
+  /**
+ * when all property set and ready to use, in most cases component is already loaded before react mount so you dont need this but if you load web-component dynamically with lazy load it will be called after react mount
+ */
+  onInit?: (e: JBInfiniteScrollEventType<CustomEvent>) => void,
+  /**
+   * on user scroll to the end
+   */
+  onScrollEnd?:(e:JBInfiniteScrollEventType<CustomEvent>)=>void
+  onScroll?:(e:JBInfiniteScrollEventType<Event>)=>void
+
+}
+export function useEvents(element: RefObject<JBInfiniteScrollWebComponent>, props: EventProps) {
+  useEvent(element, 'load', props.onLoad, true);
+  useEvent(element, 'init', props.onInit, true);
+  useEvent(element, "scroll", props.onScroll);
+  useEvent(element, "scrollEnd", props.onScrollEnd, true);
+}

package/react/package.json

@@ -26,7 +26,7 @@
 		"type": "git",
 		"url": "git@github.com:javadbat/jb-infinite-scroll.git"
   },
-  "types": "./dist/web-component/jb-infinite-scroll/react/lib/JBInfiniteScroll.d.ts",
+  "types": "./dist/JBInfiniteScroll.d.ts",
   "dependencies": {
     "jb-infinite-scroll": ">=1.0.0"
   }

package/react/tsconfig.json

@@ -1,11 +1,10 @@
 {
     "compilerOptions": {
-        "baseUrl": "."
+        "baseUrl": ".",
+        "rootDir": "./lib",
+        "declarationDir": "./dist"
     },
     "include": [
-        "../../../common/scripts/**/*.ts",
-        "../../../common/hooks/**/*.ts",
-        "../../../common/hooks/**/*.js",
         "lib/**/*.ts",
         "lib/**/*.tsx"
     ],
@@ -14,5 +13,5 @@
         "**/*.spec.ts",
         "dist",
     ],
-    "extends":"../../tsconfig-react.json"
+    "extends":"jb-core/configs/tsconfig-react.json"
 }