[add] Scroll Boundary component

ReadMe.md

@@ -40,24 +40,25 @@ A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstr
 5. [Nameplate](source/Nameplate.tsx)
 6. [Type Echo](source/TypeEcho.tsx)
 7. [Click Boundary](source/ClickBoundary.tsx)
-8. [Spinner Button](source/SpinnerButton.tsx)
-9. [Select](source/Select.tsx)
-10. [Filter Input](source/FilterInput/index.tsx)
-11. [File Picker](source/FilePicker/index.tsx)
-12. [File Uploader](source/FileUploader/)
-13. [Multiple File Uploader](source/MultipleFileUploader/)
-14. [Code Block](source/CodeBlock.tsx)
-15. [Editor](source/Editor.tsx)
-16. [Editor HTML](source/EditorHTML.tsx)
-17. [Address Picker](source/AddressPicker.tsx)
-18. [Idea Info](source/IdeaInfo.tsx)
-19. [Idea Table](source/IdeaTable.tsx)
-20. [Table Spinner](source/TableSpinner.tsx)
-21. [Loading](source/Loading.tsx)
-22. [Pagination Bar](source/PaginationBar.tsx)
-23. [Idea Form](source/IdeaForm.tsx)
-24. [Idea Popover](source/IdeaPopover.tsx)
-25. [Idea Dialog](source/IdeaDialog.tsx)
+8. [Scroll Boundary](source/ScrollBoundary.tsx)
+9. [Spinner Button](source/SpinnerButton.tsx)
+10. [Select](source/Select.tsx)
+11. [Filter Input](source/FilterInput/index.tsx)
+12. [File Picker](source/FilePicker/index.tsx)
+13. [File Uploader](source/FileUploader/)
+14. [Multiple File Uploader](source/MultipleFileUploader/)
+15. [Code Block](source/CodeBlock.tsx)
+16. [Editor](source/Editor.tsx)
+17. [Editor HTML](source/EditorHTML.tsx)
+18. [Address Picker](source/AddressPicker.tsx)
+19. [Idea Info](source/IdeaInfo.tsx)
+20. [Idea Table](source/IdeaTable.tsx)
+21. [Table Spinner](source/TableSpinner.tsx)
+22. [Loading](source/Loading.tsx)
+23. [Pagination Bar](source/PaginationBar.tsx)
+24. [Idea Form](source/IdeaForm.tsx)
+25. [Idea Popover](source/IdeaPopover.tsx)
+26. [Idea Dialog](source/IdeaDialog.tsx)
 
 ## Utilities
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "idea-react",
-    "version": "0.25.0",
+    "version": "0.26.0",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "A React advanced components library based on TypeScript & Bootstrap, built by idea2app remote developers team.",

source/ScrollBoundary.tsx

@@ -0,0 +1,60 @@
+import classNames from 'classnames';
+import React, { FC, ReactNode } from 'react';
+
+export type EdgePosition = 'top' | 'bottom' | 'left' | 'right';
+
+type TouchHandler = (edge: EdgePosition) => any;
+
+export interface ScrollBoundaryProps
+    extends Partial<Record<EdgePosition, ReactNode>> {
+    className?: string;
+    onTouch: TouchHandler;
+}
+
+function touch(edge: EdgePosition, onTouch: TouchHandler) {
+    return (node: HTMLElement | null) =>
+        node &&
+        new IntersectionObserver(
+            ([{ isIntersecting }]) => isIntersecting && onTouch(edge)
+        ).observe(node);
+}
+
+export const ScrollBoundary: FC<ScrollBoundaryProps> = ({
+    className,
+    onTouch,
+    top,
+    left,
+    right,
+    bottom,
+    children
+}) => (
+    <div className={classNames('position-relative', className)}>
+        <div
+            className="position-absolute top-0 left-0 w-100"
+            ref={touch('top', onTouch)}
+        >
+            {top}
+        </div>
+        <div
+            className="position-absolute top-0 left-0 h-100"
+            ref={touch('left', onTouch)}
+        >
+            {left}
+        </div>
+
+        {children}
+
+        <div
+            className="position-absolute top-0 right-0 h-100"
+            ref={touch('right', onTouch)}
+        >
+            {right}
+        </div>
+        <div
+            className="position-absolute top-100 left-0 w-100"
+            ref={touch('bottom', onTouch)}
+        >
+            {bottom}
+        </div>
+    </div>
+);

source/index.ts

@@ -6,6 +6,7 @@ export * from './Nameplate';
 export * from './TableSpinner';
 export * from './TypeEcho';
 export * from './ClickBoundary';
+export * from './ScrollBoundary';
 export * from './SpinnerButton';
 export * from './Select';
 export * from './FilterInput';