jb-infinite-scroll 1.1.0

package/lib/jb-infinite-scroll.ts

@@ -0,0 +1,236 @@
+import HTML from './jb-infinite-scroll.html';
+import CSS from './jb-infinite-scroll.scss';
+import { Elements, StateChangeWaitingBehavior } from './types.js';
+import "jb-loading";
+
+export * from "./types.js";
+
+export class JBInfiniteScrollWebComponent extends HTMLElement {
+    elements!: Elements;
+    #isLoading = false;
+    //the amount of space that we listen to for trigger refresh 
+    #endPageGap = 0;
+    #isLastPage = false;
+
+    #isListEnded = false;
+    //used when user scroll and we dont want to capture multiple scroll at one and wait for prev scroll event to finish
+    #isWaitingForStateChange = false;
+    #disableCaptureScroll = false;
+    #isListEmpty = false;
+    #stateChangeWaitingBehavior: StateChangeWaitingBehavior = StateChangeWaitingBehavior.forceWait;
+
+
+    constructor() {
+      super();
+      this.initWebComponent();
+    }
+    mapStateChangeWaitingBehavior(state: string) {
+      switch (state) {
+        case "FORCE_WAIT":
+          return StateChangeWaitingBehavior.forceWait;
+        case "NO_WAIT":
+          return StateChangeWaitingBehavior.noWait;
+
+        default:
+          return StateChangeWaitingBehavior.forceWait;
+
+      }
+
+    }
+    set stateChangeWaitingBehavior(value: string) {
+      this.#stateChangeWaitingBehavior = this.mapStateChangeWaitingBehavior(value);
+    }
+    get stateChangeWaitingBehavior() {
+      return this.#stateChangeWaitingBehavior;
+    }
+    get disableCaptureScroll() {
+      return this.#disableCaptureScroll;
+    }
+
+    set disableCaptureScroll(value: boolean) {
+      this.#disableCaptureScroll = value;
+      this.setIsWaitingForStatChange(false);
+    }
+    get isListEnded() {
+      return this.#isListEnded;
+    }
+    set isListEnded(value: boolean) {
+      this.#isListEnded = value;
+      this.setIsWaitingForStatChange(false);
+
+    }
+    get isLoading() {
+      return this.#isLoading;
+    }
+    set isLoading(value: boolean) {
+      this.#isLoading = value;
+      this.setIsWaitingForStatChange(false);
+      if (value) {
+        this.elements?.loading.classList.add('--show');
+      } else {
+        this.elements?.loading.classList.remove('--show');
+        this.checkEmptyListState();
+        this.checkScrollHeight();
+      }
+    }
+    get isListEmpty() {
+      return this.#isListEmpty;
+    }
+    set isListEmpty(value: boolean) {
+      this.#isListEmpty = value;
+      this.setIsWaitingForStatChange(false);
+
+
+    }
+    get isLastPage() {
+      return this.#isLastPage;
+    }
+    set isLastPage(value: boolean) {
+      this.#isLastPage = value;
+    }
+    checkEmptyListState() {
+      if (this.#isListEmpty) {
+        this.elements?.emptyListWrapper.classList.add('--show');
+        this.elements?.contentWrapper.classList.remove('--show');
+
+      } else {
+        this.elements?.contentWrapper.classList.add('--show');
+        this.elements?.emptyListWrapper.classList.remove('--show');
+
+      }
+    }
+    connectedCallback() {
+      // standard web component event that called when all of dom is bounded
+      this.callOnLoadEvent();
+      this.initProp();
+      this.callOnInitEvent();
+
+    }
+    callOnLoadEvent() {
+      const event = new CustomEvent('load', { bubbles: true, composed: true });
+      this.dispatchEvent(event);
+    }
+    callOnInitEvent() {
+      const event = new CustomEvent('init', { bubbles: true, composed: true });
+      this.dispatchEvent(event);
+    }
+    initWebComponent() {
+      const shadowRoot = this.attachShadow({
+        mode: 'open'
+      });
+      const html = `<style>${CSS}</style>` + '\n' + HTML;
+      const element = document.createElement('template');
+      element.innerHTML = html;
+      shadowRoot.appendChild(element.content.cloneNode(true));
+      this.elements = {
+        loading: shadowRoot.querySelector('.loading-wrapper')!,
+        componentWrapper: shadowRoot.querySelector('.Infinite-scroll-component')!,
+        contentWrapper: shadowRoot.querySelector('.content-wrapper')!,
+        loadingWrapper: shadowRoot.querySelector('.loading-wrapper')!,
+        emptyListWrapper: shadowRoot.querySelector('.empty-list-wrapper')!,
+      };
+
+    }
+    registerEventListener() {
+      this.elements.contentWrapper.addEventListener('scroll', this.onScroll.bind(this), { passive: true });
+    }
+    initProp() {
+      this.registerEventListener();
+      this.checkScrollHeight();
+    }
+    checkScrollHeight() {
+      //check if our container is bigger than our content we call scroll end event
+      const { scrollHeight, clientHeight } = this.elements.contentWrapper;
+      if (scrollHeight <= clientHeight && this.canCaptureScroll) {
+        this.onScrollEnd();
+      }
+    }
+    onScrollEnd() {        
+      this.setIsWaitingForStatChange(true);
+      const event = new CustomEvent('scrollEnd');
+      this.dispatchEvent(event);
+    }
+    onScroll() {
+      const { scrollTop, scrollHeight, clientHeight } = this.elements.contentWrapper;
+      if (scrollTop + clientHeight + this.#endPageGap >= scrollHeight) {
+        if (this.canCaptureScroll) {
+          this.onScrollEnd();
+        }
+      }
+    }
+    setIsWaitingForStatChange(isWaitingStatus: boolean) {
+
+      if (isWaitingStatus) {
+        if (this.#stateChangeWaitingBehavior === StateChangeWaitingBehavior.forceWait) {
+          this.#isWaitingForStateChange = true;
+        } else if (this.#stateChangeWaitingBehavior === StateChangeWaitingBehavior.noWait) {
+          return;
+        }
+      }
+      this.#isWaitingForStateChange = false;
+
+
+
+    }
+    get canCaptureScroll() {
+      if (!(this.#isLoading || this.#isListEmpty || this.#isListEnded || this.#isWaitingForStateChange || this.#disableCaptureScroll)) {
+        return true;
+
+      }
+      return false;
+    }
+
+    static get observedAttributes() {
+      return ['is-loading', 'is-list-empty', 'is-list-ended', 'disable-capture-scroll', 'state-change-waiting-behavior'];
+    }
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+      // do something when an attribute has changed
+      this.onAttributeChange(name, newValue);
+    }
+    onAttributeChange(name: string, value: string) {
+      switch (name) {
+        case 'is-loading':
+          if (value === 'true') {
+            this.isLoading = true;
+          } else {
+            this.isLoading = false;
+          }
+          break;
+        case 'is-list-empty':
+          if (value === 'true') {
+            this.isListEmpty = true;
+          } else {
+            this.isListEmpty = false;
+
+          }
+          break;
+        case 'is-list-ended':
+          if (value === 'true') {
+            this.#isListEnded = true;
+          } else {
+            this.#isListEnded = false;
+
+          }
+          break;
+
+        case 'disable-capture-scroll':
+          if (value === 'true') {
+            this.#disableCaptureScroll = true;
+          } else {
+            this.#disableCaptureScroll = false;
+
+          }
+          break;
+        case 'state-change-waiting-behavior':
+          this.#stateChangeWaitingBehavior = this.mapStateChangeWaitingBehavior(value);
+          break;
+
+
+      }
+
+    }
+}
+const myElementNotExists = !customElements.get('jb-infinite-scroll');
+if (myElementNotExists) {
+  window.customElements.define('jb-infinite-scroll', JBInfiniteScrollWebComponent);
+}

package/lib/types.ts

@@ -0,0 +1,14 @@
+export type Elements = {
+    loading: HTMLDivElement,
+    contentWrapper: HTMLDivElement,
+    componentWrapper: HTMLDivElement,
+    emptyListWrapper: HTMLDivElement,
+    loadingWrapper: HTMLDivElement,
+}
+
+export enum StateChangeWaitingBehavior {
+    // when user scroll we lock event call and wait for user to change isLoading (good for React or any other ui framework solution)
+    forceWait = "FORCE_WAIT",
+    // when user scroll we dont lock its event listener and developer should handle extra scroll by it self (good for pure js solution)
+    noWait = "NO_WAIT",
+}

package/package.json

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

package/react/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 javad
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/react/README.md

@@ -0,0 +1,2 @@
+# jb-infinite-scroll React Component
+infinite scroll react component

package/react/dist/JBInfiniteScroll.cjs.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var React = require('react');
+var jbInfiniteScroll = require('jb-infinite-scroll');
+
+function useBindEvent(ref, event, handler, passive = false) {
+    React.useEffect(() => {
+        const dom = ref.current;
+        if (dom) {
+            // initiate the event handler
+            dom.addEventListener(event, handler, passive);
+        }
+        // this will clean up the event every time the component is re-rendered
+        return function cleanup() {
+            if (dom) {
+                dom.removeEventListener(event, handler, passive);
+            }
+        };
+    }, [ref, event, handler, passive]);
+}
+
+const JBInfiniteScroll = React.forwardRef((props, ref) => {
+    const element = React.useRef(null);
+    const [refChangeCount, refChangeCountSetter] = React.useState(0);
+    React.useImperativeHandle(ref, () => (element ? element.current : null), [element]);
+    React.useEffect(() => {
+        refChangeCountSetter(refChangeCount + 1);
+    }, [element.current]);
+    React.useEffect(() => {
+        element.current?.checkScrollHeight();
+    }, [element.current]);
+    const onScrollEnd = React.useCallback((e) => {
+        if (props.onScrollEnd) {
+            props.onScrollEnd(e);
+        }
+    }, [props.onScrollEnd]);
+    useBindEvent(element, 'scrollEnd', onScrollEnd, true);
+    React.useEffect(() => {
+        if (element.current) {
+            if (props.isLoading) {
+                element.current.setAttribute('is-loading', 'true');
+            }
+            else {
+                element.current.setAttribute('is-loading', 'false');
+            }
+        }
+    }, [props.isLoading]);
+    React.useEffect(() => {
+        if (element.current) {
+            if (props.isListEmpty) {
+                element.current.setAttribute('is-list-empty', 'true');
+            }
+            else {
+                element.current.setAttribute('is-list-empty', 'false');
+            }
+        }
+    }, [props.isListEmpty]);
+    React.useEffect(() => {
+        if (element.current) {
+            if (props.isListEnded) {
+                element.current?.setAttribute('is-list-ended', 'true');
+            }
+            else {
+                element.current?.setAttribute('is-list-ended', 'false');
+            }
+        }
+    }, [props.isListEnded]);
+    React.useEffect(() => {
+        if (element.current) {
+            if (props.disableCaptureScroll) {
+                element.current?.setAttribute('disable-capture-scroll', 'true');
+            }
+            else {
+                element.current?.setAttribute('disable-capture-scroll', 'false');
+            }
+        }
+    }, [props.disableCaptureScroll]);
+    React.useEffect(() => {
+        if (props.stateChangeWaitingBehavior && element.current) {
+            element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);
+        }
+    }, [props.stateChangeWaitingBehavior]);
+    return (React.createElement("jb-infinite-scroll", { ref: element }, props.children));
+});
+JBInfiniteScroll.displayName = "JBInfiniteScroll";
+
+Object.defineProperty(exports, "StateChangeWaitingBehavior", {
+  enumerable: true,
+  get: function () { return jbInfiniteScroll.StateChangeWaitingBehavior; }
+});
+exports.JBInfiniteScroll = JBInfiniteScroll;
+//# sourceMappingURL=JBInfiniteScroll.cjs.js.map

package/react/dist/JBInfiniteScroll.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JBInfiniteScroll.cjs.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBInfiniteScroll.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","import React, { useState, useRef, useCallback, useEffect, useImperativeHandle } from 'react';\r\nimport \"jb-infinite-scroll\";\r\n\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport {JBInfiniteScrollWebComponent, StateChangeWaitingBehavior} from \"jb-infinite-scroll\";\r\nimport { useBindEvent } from \"../../../../common/hooks/use-event.js\";\r\n\r\ndeclare global {\r\n  // eslint-disable-next-line @typescript-eslint/no-namespace\r\n  namespace JSX {\r\n    interface IntrinsicElements {\r\n      'jb-infinite-scroll': JBInfiniteScrollType;\r\n    }\r\n    interface JBInfiniteScrollType extends React.DetailedHTMLProps<React.HTMLAttributes<JBInfiniteScrollWebComponent>, JBInfiniteScrollWebComponent> {\r\n      \"class\"?: string,\r\n      \"type\"?: string;\r\n    }\r\n  }\r\n}\r\n\r\nconst JBInfiniteScroll = React.forwardRef((props: Props, ref:React.ForwardedRef<JBInfiniteScrollWebComponent>) => {\r\n  const element = useRef<JBInfiniteScrollWebComponent>(null);\r\n  const [refChangeCount, refChangeCountSetter] = useState(0);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : null),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    refChangeCountSetter(refChangeCount + 1);\r\n  }, [element.current]);\r\n\r\n  useEffect(() => {\r\n    element.current?.checkScrollHeight();\r\n  }, [element.current]);\r\n\r\n  const onScrollEnd = useCallback((e) => {\r\n    if (props.onScrollEnd) {\r\n      props.onScrollEnd(e);\r\n    }\r\n  }, [props.onScrollEnd]);\r\n\r\n  useBindEvent(element, 'scrollEnd', onScrollEnd, true);\r\n\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isLoading) {\r\n        element.current.setAttribute('is-loading', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-loading', 'false');\r\n\r\n      }\r\n    }\r\n\r\n  }, [props.isLoading]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isListEmpty) {\r\n        element.current.setAttribute('is-list-empty', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-list-empty', 'false');\r\n\r\n      }\r\n    }\r\n\r\n  }, [props.isListEmpty]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isListEnded) {\r\n        element.current?.setAttribute('is-list-ended', 'true');\r\n      } else {\r\n        element.current?.setAttribute('is-list-ended', 'false');\r\n      }\r\n    }\r\n\r\n  }, [props.isListEnded]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.disableCaptureScroll) {\r\n        element.current?.setAttribute('disable-capture-scroll', 'true');\r\n      } else {\r\n        element.current?.setAttribute('disable-capture-scroll', 'false');\r\n      }\r\n    }\r\n\r\n  }, [props.disableCaptureScroll]);\r\n  useEffect(() => {\r\n    if (props.stateChangeWaitingBehavior && element.current) {\r\n      element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);\r\n    }\r\n  }, [props.stateChangeWaitingBehavior]);\r\n  return (\r\n    <jb-infinite-scroll ref={element}>{props.children}</jb-infinite-scroll>\r\n  );\r\n});\r\nexport type Props = React.PropsWithChildren< {\r\n  stateChangeWaitingBehavior?: StateChangeWaitingBehavior,\r\n  disableCaptureScroll?: boolean,\r\n  isListEmpty?: boolean,\r\n  isLoading?: boolean,\r\n  isListEnded?:boolean,\r\n  onScrollEnd?:(e:CustomEvent)=>void\r\n}>\r\n\r\nJBInfiniteScroll.displayName = \"JBInfiniteScroll\";\r\n\r\nexport {JBInfiniteScroll, StateChangeWaitingBehavior};"],"names":["useEffect","useRef","useState","useImperativeHandle","useCallback"],"mappings":"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"}

package/react/dist/JBInfiniteScroll.js

@@ -0,0 +1,86 @@
+import React, { useEffect, useRef, useState, useImperativeHandle, useCallback } from 'react';
+export { StateChangeWaitingBehavior } from 'jb-infinite-scroll';
+
+function useBindEvent(ref, event, handler, passive = false) {
+    useEffect(() => {
+        const dom = ref.current;
+        if (dom) {
+            // initiate the event handler
+            dom.addEventListener(event, handler, passive);
+        }
+        // this will clean up the event every time the component is re-rendered
+        return function cleanup() {
+            if (dom) {
+                dom.removeEventListener(event, handler, passive);
+            }
+        };
+    }, [ref, event, handler, passive]);
+}
+
+const JBInfiniteScroll = React.forwardRef((props, ref) => {
+    const element = useRef(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 (React.createElement("jb-infinite-scroll", { ref: element }, props.children));
+});
+JBInfiniteScroll.displayName = "JBInfiniteScroll";
+
+export { JBInfiniteScroll };
+//# sourceMappingURL=JBInfiniteScroll.js.map

package/react/dist/JBInfiniteScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JBInfiniteScroll.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBInfiniteScroll.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","import React, { useState, useRef, useCallback, useEffect, useImperativeHandle } from 'react';\r\nimport \"jb-infinite-scroll\";\r\n\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport {JBInfiniteScrollWebComponent, StateChangeWaitingBehavior} from \"jb-infinite-scroll\";\r\nimport { useBindEvent } from \"../../../../common/hooks/use-event.js\";\r\n\r\ndeclare global {\r\n  // eslint-disable-next-line @typescript-eslint/no-namespace\r\n  namespace JSX {\r\n    interface IntrinsicElements {\r\n      'jb-infinite-scroll': JBInfiniteScrollType;\r\n    }\r\n    interface JBInfiniteScrollType extends React.DetailedHTMLProps<React.HTMLAttributes<JBInfiniteScrollWebComponent>, JBInfiniteScrollWebComponent> {\r\n      \"class\"?: string,\r\n      \"type\"?: string;\r\n    }\r\n  }\r\n}\r\n\r\nconst JBInfiniteScroll = React.forwardRef((props: Props, ref:React.ForwardedRef<JBInfiniteScrollWebComponent>) => {\r\n  const element = useRef<JBInfiniteScrollWebComponent>(null);\r\n  const [refChangeCount, refChangeCountSetter] = useState(0);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : null),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    refChangeCountSetter(refChangeCount + 1);\r\n  }, [element.current]);\r\n\r\n  useEffect(() => {\r\n    element.current?.checkScrollHeight();\r\n  }, [element.current]);\r\n\r\n  const onScrollEnd = useCallback((e) => {\r\n    if (props.onScrollEnd) {\r\n      props.onScrollEnd(e);\r\n    }\r\n  }, [props.onScrollEnd]);\r\n\r\n  useBindEvent(element, 'scrollEnd', onScrollEnd, true);\r\n\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isLoading) {\r\n        element.current.setAttribute('is-loading', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-loading', 'false');\r\n\r\n      }\r\n    }\r\n\r\n  }, [props.isLoading]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isListEmpty) {\r\n        element.current.setAttribute('is-list-empty', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-list-empty', 'false');\r\n\r\n      }\r\n    }\r\n\r\n  }, [props.isListEmpty]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isListEnded) {\r\n        element.current?.setAttribute('is-list-ended', 'true');\r\n      } else {\r\n        element.current?.setAttribute('is-list-ended', 'false');\r\n      }\r\n    }\r\n\r\n  }, [props.isListEnded]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.disableCaptureScroll) {\r\n        element.current?.setAttribute('disable-capture-scroll', 'true');\r\n      } else {\r\n        element.current?.setAttribute('disable-capture-scroll', 'false');\r\n      }\r\n    }\r\n\r\n  }, [props.disableCaptureScroll]);\r\n  useEffect(() => {\r\n    if (props.stateChangeWaitingBehavior && element.current) {\r\n      element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);\r\n    }\r\n  }, [props.stateChangeWaitingBehavior]);\r\n  return (\r\n    <jb-infinite-scroll ref={element}>{props.children}</jb-infinite-scroll>\r\n  );\r\n});\r\nexport type Props = React.PropsWithChildren< {\r\n  stateChangeWaitingBehavior?: StateChangeWaitingBehavior,\r\n  disableCaptureScroll?: boolean,\r\n  isListEmpty?: boolean,\r\n  isLoading?: boolean,\r\n  isListEnded?:boolean,\r\n  onScrollEnd?:(e:CustomEvent)=>void\r\n}>\r\n\r\nJBInfiniteScroll.displayName = \"JBInfiniteScroll\";\r\n\r\nexport {JBInfiniteScroll, StateChangeWaitingBehavior};"],"names":[],"mappings":"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"}

package/react/dist/JBInfiniteScroll.umd.js

@@ -0,0 +1,95 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('jb-infinite-scroll')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'jb-infinite-scroll'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JBInfiniteScroll = {}, global.React, global.JBInfiniteScroll));
+})(this, (function (exports, React, jbInfiniteScroll) { 'use strict';
+
+  function useBindEvent(ref, event, handler, passive = false) {
+      React.useEffect(() => {
+          const dom = ref.current;
+          if (dom) {
+              // initiate the event handler
+              dom.addEventListener(event, handler, passive);
+          }
+          // this will clean up the event every time the component is re-rendered
+          return function cleanup() {
+              if (dom) {
+                  dom.removeEventListener(event, handler, passive);
+              }
+          };
+      }, [ref, event, handler, passive]);
+  }
+
+  const JBInfiniteScroll = React.forwardRef((props, ref) => {
+      const element = React.useRef(null);
+      const [refChangeCount, refChangeCountSetter] = React.useState(0);
+      React.useImperativeHandle(ref, () => (element ? element.current : null), [element]);
+      React.useEffect(() => {
+          refChangeCountSetter(refChangeCount + 1);
+      }, [element.current]);
+      React.useEffect(() => {
+          element.current?.checkScrollHeight();
+      }, [element.current]);
+      const onScrollEnd = React.useCallback((e) => {
+          if (props.onScrollEnd) {
+              props.onScrollEnd(e);
+          }
+      }, [props.onScrollEnd]);
+      useBindEvent(element, 'scrollEnd', onScrollEnd, true);
+      React.useEffect(() => {
+          if (element.current) {
+              if (props.isLoading) {
+                  element.current.setAttribute('is-loading', 'true');
+              }
+              else {
+                  element.current.setAttribute('is-loading', 'false');
+              }
+          }
+      }, [props.isLoading]);
+      React.useEffect(() => {
+          if (element.current) {
+              if (props.isListEmpty) {
+                  element.current.setAttribute('is-list-empty', 'true');
+              }
+              else {
+                  element.current.setAttribute('is-list-empty', 'false');
+              }
+          }
+      }, [props.isListEmpty]);
+      React.useEffect(() => {
+          if (element.current) {
+              if (props.isListEnded) {
+                  element.current?.setAttribute('is-list-ended', 'true');
+              }
+              else {
+                  element.current?.setAttribute('is-list-ended', 'false');
+              }
+          }
+      }, [props.isListEnded]);
+      React.useEffect(() => {
+          if (element.current) {
+              if (props.disableCaptureScroll) {
+                  element.current?.setAttribute('disable-capture-scroll', 'true');
+              }
+              else {
+                  element.current?.setAttribute('disable-capture-scroll', 'false');
+              }
+          }
+      }, [props.disableCaptureScroll]);
+      React.useEffect(() => {
+          if (props.stateChangeWaitingBehavior && element.current) {
+              element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);
+          }
+      }, [props.stateChangeWaitingBehavior]);
+      return (React.createElement("jb-infinite-scroll", { ref: element }, props.children));
+  });
+  JBInfiniteScroll.displayName = "JBInfiniteScroll";
+
+  Object.defineProperty(exports, "StateChangeWaitingBehavior", {
+    enumerable: true,
+    get: function () { return jbInfiniteScroll.StateChangeWaitingBehavior; }
+  });
+  exports.JBInfiniteScroll = JBInfiniteScroll;
+
+}));
+//# sourceMappingURL=JBInfiniteScroll.umd.js.map

package/react/dist/JBInfiniteScroll.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JBInfiniteScroll.umd.js","sources":["../../../../common/hooks/use-event.ts","../lib/JBInfiniteScroll.tsx"],"sourcesContent":["import { useEffect } from \"react\";\r\n\r\nexport function useEvent(dom:HTMLElement, event:any, handler:any, passive = false) {\r\n  useEffect(() => {\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  });\r\n}\r\nexport function useBindEvent<TRef extends React.MutableRefObject<any|null>,TEvent>(ref:TRef, event:string, handler:(e:TEvent)=>void, passive = false) {\r\n  useEffect(() => {\r\n    const dom = ref.current;\r\n    if (dom) {\r\n      // initiate the event handler\r\n      dom.addEventListener(event, handler, passive); \r\n    }\r\n    // this will clean up the event every time the component is re-rendered\r\n    return function cleanup() {\r\n      if(dom){\r\n        dom.removeEventListener(event, handler, passive);\r\n      }\r\n    };\r\n  },[ref,event,handler,passive]);\r\n}","import React, { useState, useRef, useCallback, useEffect, useImperativeHandle } from 'react';\r\nimport \"jb-infinite-scroll\";\r\n\r\n// eslint-disable-next-line no-duplicate-imports\r\nimport {JBInfiniteScrollWebComponent, StateChangeWaitingBehavior} from \"jb-infinite-scroll\";\r\nimport { useBindEvent } from \"../../../../common/hooks/use-event.js\";\r\n\r\ndeclare global {\r\n  // eslint-disable-next-line @typescript-eslint/no-namespace\r\n  namespace JSX {\r\n    interface IntrinsicElements {\r\n      'jb-infinite-scroll': JBInfiniteScrollType;\r\n    }\r\n    interface JBInfiniteScrollType extends React.DetailedHTMLProps<React.HTMLAttributes<JBInfiniteScrollWebComponent>, JBInfiniteScrollWebComponent> {\r\n      \"class\"?: string,\r\n      \"type\"?: string;\r\n    }\r\n  }\r\n}\r\n\r\nconst JBInfiniteScroll = React.forwardRef((props: Props, ref:React.ForwardedRef<JBInfiniteScrollWebComponent>) => {\r\n  const element = useRef<JBInfiniteScrollWebComponent>(null);\r\n  const [refChangeCount, refChangeCountSetter] = useState(0);\r\n  useImperativeHandle(\r\n    ref,\r\n    () => (element ? element.current : null),\r\n    [element],\r\n  );\r\n  useEffect(() => {\r\n    refChangeCountSetter(refChangeCount + 1);\r\n  }, [element.current]);\r\n\r\n  useEffect(() => {\r\n    element.current?.checkScrollHeight();\r\n  }, [element.current]);\r\n\r\n  const onScrollEnd = useCallback((e) => {\r\n    if (props.onScrollEnd) {\r\n      props.onScrollEnd(e);\r\n    }\r\n  }, [props.onScrollEnd]);\r\n\r\n  useBindEvent(element, 'scrollEnd', onScrollEnd, true);\r\n\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isLoading) {\r\n        element.current.setAttribute('is-loading', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-loading', 'false');\r\n\r\n      }\r\n    }\r\n\r\n  }, [props.isLoading]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isListEmpty) {\r\n        element.current.setAttribute('is-list-empty', 'true');\r\n      } else {\r\n        element.current.setAttribute('is-list-empty', 'false');\r\n\r\n      }\r\n    }\r\n\r\n  }, [props.isListEmpty]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.isListEnded) {\r\n        element.current?.setAttribute('is-list-ended', 'true');\r\n      } else {\r\n        element.current?.setAttribute('is-list-ended', 'false');\r\n      }\r\n    }\r\n\r\n  }, [props.isListEnded]);\r\n  useEffect(() => {\r\n    if (element.current) {\r\n      if (props.disableCaptureScroll) {\r\n        element.current?.setAttribute('disable-capture-scroll', 'true');\r\n      } else {\r\n        element.current?.setAttribute('disable-capture-scroll', 'false');\r\n      }\r\n    }\r\n\r\n  }, [props.disableCaptureScroll]);\r\n  useEffect(() => {\r\n    if (props.stateChangeWaitingBehavior && element.current) {\r\n      element.current?.setAttribute('state-change-waiting-behavior', props.stateChangeWaitingBehavior);\r\n    }\r\n  }, [props.stateChangeWaitingBehavior]);\r\n  return (\r\n    <jb-infinite-scroll ref={element}>{props.children}</jb-infinite-scroll>\r\n  );\r\n});\r\nexport type Props = React.PropsWithChildren< {\r\n  stateChangeWaitingBehavior?: StateChangeWaitingBehavior,\r\n  disableCaptureScroll?: boolean,\r\n  isListEmpty?: boolean,\r\n  isLoading?: boolean,\r\n  isListEnded?:boolean,\r\n  onScrollEnd?:(e:CustomEvent)=>void\r\n}>\r\n\r\nJBInfiniteScroll.displayName = \"JBInfiniteScroll\";\r\n\r\nexport {JBInfiniteScroll, StateChangeWaitingBehavior};"],"names":["useEffect","useRef","useState","useImperativeHandle","useCallback"],"mappings":"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"}

package/react/dist/common/hooks/use-event.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function useEvent(dom: HTMLElement, event: any, handler: any, passive?: boolean): void;
+export declare function useBindEvent<TRef extends React.MutableRefObject<any | null>, TEvent>(ref: TRef, event: string, handler: (e: TEvent) => void, passive?: boolean): void;

package/react/dist/common/hooks/useLazyRef.d.ts

@@ -0,0 +1,4 @@
+import { MutableRefObject } from "react";
+type InitFunc<T> = () => T;
+export declare const useLazyRef: <T>(initValFunc: InitFunc<T>) => MutableRefObject<any>;
+export {};

package/react/dist/common/hooks/useMobx.d.ts

@@ -0,0 +1,4 @@
+type Initializers = any[];
+type Constructor<T extends object = object> = new (...args: any[]) => T;
+export declare const useMobx: <T extends object>(Store: Constructor<T>, initializers: Initializers) => T;
+export {};

package/react/dist/common/scripts/device-detection.d.ts

@@ -0,0 +1 @@
+export declare const isMobile: () => boolean;

package/react/dist/common/scripts/persian-helper.d.ts

@@ -0,0 +1,3 @@
+declare function faToEnDigits(input: string | number): string;
+declare function enToFaDigits(input: string | number): string;
+export { enToFaDigits, faToEnDigits };