@rivtn/noseur 1.0.0

package/dist/esm/presentation/Paginator.js

@@ -0,0 +1,331 @@
+import React from 'react';
+import "./Presentation.css";
+import { Button } from "../form/Button";
+import { Scheme } from '../constants/Scheme';
+import { Classname } from "../utils/Classname";
+import { ObjectHelper } from "../utils/ObjectHelper";
+function buildTemplate(_, props) {
+    const customTemplate = props.template;
+    const layout = (customTemplate?.layout
+        || `${PaginatorLayoutElements.FirstPageElement} ${PaginatorLayoutElements.PreviousPageElement} ${PaginatorLayoutElements.PreviousPagesElement} ${PaginatorLayoutElements.PageElements} ${PaginatorLayoutElements.NextPagesElement} ${PaginatorLayoutElements.NextPageElement} ${PaginatorLayoutElements.LastPageElement} ${PaginatorLayoutElements.ActivePageLabel}`)
+        .replace(/\s+/g, " ");
+    const paginationElementBuilder = (direction) => {
+        return (option) => {
+            const outlined = !option.active && option.scheme != Scheme.SKELETON;
+            const key = (option.key ?? option.label ?? (option.className ?? direction));
+            return (React.createElement(Button, { key: key, text: option.label, scheme: option.scheme, disabled: option.disabled, className: Classname.build(option.className, direction), style: { marginLeft: 10 }, onClick: option.onClick, outlined: outlined, iconOnly: true, fillOnHover: true, borderless: true }));
+        };
+    };
+    const paginationPropsLabelBuilder = () => {
+        return (option) => {
+            const key = (option.key ?? option.label ?? (option.className));
+            return (React.createElement("span", { key: key, className: option.className }, option.label));
+        };
+    };
+    const propsValueElement = customTemplate?.propsValueElement ?? paginationPropsLabelBuilder();
+    const pageElement = customTemplate?.pageElement ?? paginationElementBuilder(PaginatorDirection.PAGE);
+    const nextPageElement = customTemplate?.nextPageElement ?? paginationElementBuilder(PaginatorDirection.NEXT);
+    const lastPageElement = customTemplate?.lastPageElement ?? paginationElementBuilder(PaginatorDirection.LAST_PAGE);
+    const firstPageElement = customTemplate?.firstPageElement ?? paginationElementBuilder(PaginatorDirection.FIRST_PAGE);
+    const previousPageElement = customTemplate?.previousPageElement ?? paginationElementBuilder(PaginatorDirection.PREVIOUS);
+    const hiddenPagesElement = customTemplate?.hiddenPagesElement ?? paginationElementBuilder(PaginatorDirection._HIDDEN_PAGES);
+    const activePageLabel = customTemplate?.activePageLabel ?? ((option) => {
+        const label = ObjectHelper.resolveStringTemplate("({currentPage} of {pageCount})", option);
+        return (React.createElement("span", { key: option.key ?? label, className: `noseur-paginator-label ${option.scheme || ""}` }, label));
+    });
+    return {
+        layout,
+        pageElement,
+        activePageLabel,
+        nextPageElement,
+        lastPageElement,
+        firstPageElement,
+        propsValueElement,
+        previousPageElement,
+        hiddenPagesElement,
+        customElement: customTemplate?.customElement,
+    };
+}
+export var PaginatorDirection;
+(function (PaginatorDirection) {
+    PaginatorDirection["PAGE"] = "";
+    PaginatorDirection["NEXT_HIDDEN_PAGES"] = "nhp";
+    PaginatorDirection["NEXT"] = "fa fa-angle-right";
+    PaginatorDirection["PREVIOUS_HIDDEN_PAGES"] = "phg";
+    PaginatorDirection["PREVIOUS"] = "fa fa-angle-left";
+    PaginatorDirection["_HIDDEN_PAGES"] = "fa fa-ellipsis-h";
+    PaginatorDirection["LAST_PAGE"] = "fa fa-angle-double-right";
+    PaginatorDirection["FIRST_PAGE"] = "fa fa-angle-double-left";
+})(PaginatorDirection || (PaginatorDirection = {}));
+;
+;
+;
+export var PaginatorLayoutElements;
+(function (PaginatorLayoutElements) {
+    PaginatorLayoutElements["PageCount"] = "PageCount";
+    PaginatorLayoutElements["RowPerPage"] = "RowPerPage";
+    PaginatorLayoutElements["InitialPage"] = "InitialPage";
+    PaginatorLayoutElements["CurrentPage"] = "CurrentPage";
+    PaginatorLayoutElements["TotalRecords"] = "TotalRecords";
+    PaginatorLayoutElements["PageElements"] = "PageElements";
+    PaginatorLayoutElements["NextPageElement"] = "NextPageElement";
+    PaginatorLayoutElements["LastPageElement"] = "LastPageElement";
+    PaginatorLayoutElements["ActivePageLabel"] = "ActivePageLabel";
+    PaginatorLayoutElements["NextPagesElement"] = "NextPagesElement";
+    PaginatorLayoutElements["FirstPageElement"] = "FirstPageElement";
+    PaginatorLayoutElements["VisiblePageCount"] = "VisiblePageCount";
+    PaginatorLayoutElements["PreviousPageElement"] = "PreviousPageElement";
+    PaginatorLayoutElements["PreviousPagesElement"] = "PreviousPagesElement";
+})(PaginatorLayoutElements || (PaginatorLayoutElements = {}));
+;
+;
+class PaginatorComponent extends React.Component {
+    static defaultProps = {
+        initialPage: 1,
+        rowsPerPage: 10,
+        totalRecords: 0,
+        visiblePageCount: 5,
+        scheme: Scheme.STATELESS,
+        reportOnNavigation: true,
+        expandOnHiddenPagesButtonClicked: false,
+    };
+    state = {
+        currentPage: this.props.initialPage,
+        renderNextHiddenPagesElements: false,
+        renderPreviousHiddenPagesElements: false,
+        pageCount: Math.ceil(this.props.totalRecords / this.props.rowsPerPage),
+    };
+    constructor(props) {
+        super(props);
+        this.onNavigationClicked = this.onNavigationClicked.bind(this);
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.currentPage != this.props.currentPage || (prevProps.totalRecords != this.props.totalRecords && (!this.props.freezeTotalRecords || this.state.pageCount < 1)) || prevProps.rowsPerPage != this.props.rowsPerPage) {
+            const pageCount = Math.ceil(this.props.totalRecords / this.props.rowsPerPage);
+            const pageCountChanged = pageCount !== this.state.pageCount;
+            let currentPage = prevProps.currentPage != this.props.currentPage ? this.props.currentPage : this.state.currentPage;
+            if (currentPage > pageCount) {
+                currentPage = 1;
+                if (this.props.reportOnComponentUpdate)
+                    this.props.onPageChange?.({
+                        pageCount,
+                        currentPage
+                    });
+            }
+            this.setState({
+                pageCount,
+                currentPage: (pageCountChanged && this.props.resetPageOnCountChange ? 1 : currentPage),
+            });
+        }
+    }
+    onNavigationClicked(direction, page = 1) {
+        const pageCount = this.state.pageCount;
+        const currentPage = this.state.currentPage;
+        if (direction == PaginatorDirection.FIRST_PAGE) {
+            if (currentPage == 1)
+                return;
+        }
+        else if (direction == PaginatorDirection.LAST_PAGE) {
+            if (currentPage == pageCount)
+                return;
+            page = pageCount;
+        }
+        else if (direction == PaginatorDirection.NEXT) {
+            page = currentPage + 1;
+            if (page > pageCount)
+                return;
+        }
+        else if (direction == PaginatorDirection.PREVIOUS) {
+            page = currentPage - 1;
+            if (page <= 0)
+                return;
+        }
+        else if (direction == PaginatorDirection.NEXT_HIDDEN_PAGES) {
+            const newState = { renderNextHiddenPagesElements: true };
+            if (currentPage == 1)
+                newState.renderPreviousHiddenPagesElements = true;
+            this.setState(newState);
+            return;
+        }
+        else if (direction == PaginatorDirection.PREVIOUS_HIDDEN_PAGES) {
+            const newState = { renderPreviousHiddenPagesElements: true };
+            if (currentPage == 1)
+                newState.renderNextHiddenPagesElements = true;
+            this.setState(newState);
+            return;
+        }
+        this.setState({ currentPage: page }, () => {
+            if (!this.props.reportOnNavigation)
+                return;
+            const option = {
+                currentPage: page,
+                pageCount: pageCount
+            };
+            this.props.onPageChange?.(option);
+        });
+    }
+    renderNavigationElements(template, layouts) {
+        const generalPaginarorElementsOption = {
+            scheme: this.props.scheme,
+        };
+        return {
+            pageCount: layouts.includes("PageCount") ? template.propsValueElement({
+                className: "noseur-paginator-props-value",
+                ...generalPaginarorElementsOption,
+                label: this.state.pageCount
+            }) : undefined,
+            rowPerPage: layouts.includes("RowPerPage") ? template.propsValueElement({
+                className: "noseur-paginator-props-value",
+                ...generalPaginarorElementsOption,
+                label: this.props.rowsPerPage
+            }) : undefined,
+            initialPage: layouts.includes("InitialPage") ? template.propsValueElement({
+                className: "noseur-paginator-props-value",
+                ...generalPaginarorElementsOption,
+                label: this.props.initialPage
+            }) : undefined,
+            currentPage: layouts.includes("CurrentPage") ? template.propsValueElement({
+                className: "noseur-paginator-props-value",
+                ...generalPaginarorElementsOption,
+                label: this.state.currentPage
+            }) : undefined,
+            totalRecords: layouts.includes("TotalRecords") ? template.propsValueElement({
+                className: "noseur-paginator-props-value",
+                ...generalPaginarorElementsOption,
+                label: this.props.totalRecords
+            }) : undefined,
+            visiblePageCount: layouts.includes("VisiblePageCount") ? template.propsValueElement({
+                className: "noseur-paginator-props-value",
+                ...generalPaginarorElementsOption,
+                label: this.props.visiblePageCount
+            }) : undefined,
+            nextPageElement: layouts.includes("NextPageElement") ? template.nextPageElement({
+                className: "noseur-paginator-pg noseur-paginator-nx",
+                disabled: this.state.currentPage == this.state.pageCount,
+                onClick: (_) => this.onNavigationClicked(PaginatorDirection.NEXT),
+                ...generalPaginarorElementsOption
+            }) : undefined,
+            previousPageElement: layouts.includes("PreviousPageElement") ? template.previousPageElement({
+                disabled: this.state.currentPage == 1,
+                className: "noseur-paginator-pg noseur-paginator-pr",
+                onClick: (_) => this.onNavigationClicked(PaginatorDirection.PREVIOUS),
+                ...generalPaginarorElementsOption
+            }) : undefined,
+            firstPageElement: layouts.includes("FirstPageElement") ? template.firstPageElement({
+                disabled: this.state.currentPage == 1,
+                className: "noseur-paginator-pg noseur-paginator-fp",
+                onClick: (_) => this.onNavigationClicked(PaginatorDirection.FIRST_PAGE),
+                ...generalPaginarorElementsOption
+            }) : undefined,
+            lastPageElement: layouts.includes("LastPageElement") ? template.lastPageElement({
+                className: "noseur-paginator-pg noseur-paginator-lp",
+                disabled: this.state.currentPage == this.state.pageCount,
+                onClick: (_) => this.onNavigationClicked(PaginatorDirection.LAST_PAGE),
+                ...generalPaginarorElementsOption
+            }) : undefined,
+            hiddenPagesElement: (layouts.includes("PreviousPagesElement") || layouts.includes("NextPagesElement"))
+                ? (disabled, direction) => {
+                    return template.hiddenPagesElement({
+                        disabled,
+                        onClick: (_) => this.onNavigationClicked(direction),
+                        className: `noseur-paginator-pg noseur-paginator-hp-${direction == PaginatorDirection.NEXT_HIDDEN_PAGES ? 'n' : 'p'}`,
+                        ...generalPaginarorElementsOption
+                    });
+                } : undefined
+        };
+    }
+    buildPageNumberElement(pageElement, from, to, render) {
+        if (!render)
+            return;
+        const pageElements = [];
+        for (let pageNumber = from; pageNumber <= to; pageNumber++) {
+            pageElements.push(pageElement({
+                label: pageNumber,
+                scheme: this.props.scheme,
+                active: this.state.currentPage == pageNumber,
+                onClick: (_) => this.onNavigationClicked(PaginatorDirection.PAGE, pageNumber),
+            }));
+        }
+        return pageElements;
+    }
+    renderPageElements(template, layouts, hiddenPagesElement) {
+        if (!layouts.includes("PageElements") && !hiddenPagesElement)
+            return {};
+        const pageCount = this.state.pageCount;
+        const currentPage = this.state.currentPage;
+        const visiblePageCount = this.props.visiblePageCount;
+        const sidesCount = Math.floor(visiblePageCount / 2);
+        const visiblePagesEndIndex = Math.min(Math.max(visiblePageCount, currentPage + sidesCount), pageCount);
+        let visiblePagesStartIndex = Math.max(1, currentPage - sidesCount);
+        const visiblePagesIndexesRemainder = (visiblePageCount - 1) - (visiblePagesEndIndex - visiblePagesStartIndex);
+        if (visiblePagesIndexesRemainder != 0)
+            visiblePagesStartIndex = Math.max(1, visiblePagesStartIndex - visiblePagesIndexesRemainder);
+        const pageElements = layouts.includes("PageElements") && this.buildPageNumberElement(template.pageElement, visiblePagesStartIndex, visiblePagesEndIndex, true);
+        let previousPagesElement, previousPagesElements, shouldRenderPreviousPagesElement;
+        if (layouts.includes("PreviousPagesElement")) {
+            const renderPreviousHiddenPagesElements = this.state.renderPreviousHiddenPagesElements;
+            shouldRenderPreviousPagesElement = !renderPreviousHiddenPagesElements && (visiblePagesStartIndex - 1) > 0;
+            previousPagesElement = shouldRenderPreviousPagesElement && hiddenPagesElement(!this.props.expandOnHiddenPagesButtonClicked, PaginatorDirection.PREVIOUS_HIDDEN_PAGES);
+            previousPagesElements = this.props.expandOnHiddenPagesButtonClicked
+                && this.buildPageNumberElement(template.pageElement, 1, visiblePagesStartIndex - 1, renderPreviousHiddenPagesElements);
+        }
+        let nextPagesElement, nextPagesElements, shouldRenderNextPagesElement;
+        if (layouts.includes("NextPagesElement")) {
+            const renderNextHiddenPagesElements = this.state.renderNextHiddenPagesElements;
+            shouldRenderNextPagesElement = !renderNextHiddenPagesElements && (pageCount - visiblePagesEndIndex) > 0;
+            nextPagesElement = shouldRenderNextPagesElement && hiddenPagesElement(!this.props.expandOnHiddenPagesButtonClicked, PaginatorDirection.NEXT_HIDDEN_PAGES);
+            nextPagesElements = this.props.expandOnHiddenPagesButtonClicked
+                && this.buildPageNumberElement(template.pageElement, visiblePagesEndIndex + 1, pageCount, renderNextHiddenPagesElements);
+        }
+        return {
+            pageElements,
+            nextPagesElement,
+            nextPagesElements,
+            previousPagesElement,
+            previousPagesElements,
+        };
+    }
+    render() {
+        const template = buildTemplate(this.state, this.props);
+        const layouts = template.layout.split(" ");
+        const className = Classname.build("noseur-paginator", this.props.className);
+        const labelMap = {
+            pageCount: this.state.pageCount,
+            currentPage: this.state.currentPage
+        };
+        if (this.props.scheme === Scheme.SKELETON)
+            labelMap.scheme = this.props.scheme;
+        const { pageCount, rowPerPage, initialPage, currentPage, totalRecords, visiblePageCount, firstPageElement, previousPageElement, nextPageElement, lastPageElement, hiddenPagesElement } = this.renderNavigationElements(template, layouts);
+        const { pageElements, nextPagesElement, nextPagesElements, previousPagesElement, previousPagesElements } = this.renderPageElements(template, layouts, hiddenPagesElement);
+        const activePageLabel = layouts.includes("ActivePageLabel") && template.activePageLabel ? template.activePageLabel(labelMap) : undefined;
+        const layoutElementsMap = {
+            PageCount: pageCount, RowPerPage: rowPerPage,
+            InitialPage: initialPage, CurrentPage: currentPage, TotalRecords: totalRecords, VisiblePageCount: visiblePageCount,
+            ActivePageLabel: activePageLabel, FirstPageElement: firstPageElement, PreviousPageElement: previousPageElement,
+            NextPageElement: nextPageElement, LastPageElement: lastPageElement, PageElements: pageElements,
+            NextPagesElement: React.createElement(React.Fragment, { key: PaginatorDirection.NEXT_HIDDEN_PAGES },
+                nextPagesElement,
+                nextPagesElements),
+            PreviousPagesElement: React.createElement(React.Fragment, { key: PaginatorDirection.PREVIOUS_HIDDEN_PAGES },
+                previousPagesElement,
+                previousPagesElements),
+        };
+        const leftContent = this.props.leftContent && React.cloneElement(this.props.leftContent, {
+            className: Classname.build(this.props.leftContent.props.className, "noseur-paginator-lc")
+        });
+        const rightContent = this.props.rightContent && React.cloneElement(this.props.rightContent, {
+            className: Classname.build(this.props.rightContent.props.className, "noseur-paginator-rc")
+        });
+        const props = {
+            className,
+            id: this.props.id,
+            key: this.props.key,
+            style: this.props.style,
+        };
+        return (React.createElement("div", { ref: this.props.forwardRef, ...props },
+            leftContent,
+            layouts.map(layout => layoutElementsMap[layout] ?? (template.customElement ? template.customElement(layout, this.props, this.state, layoutElementsMap) : ` ${layout} `)),
+            rightContent));
+    }
+}
+export const Paginator = ({ ref, ...props }) => (React.createElement(PaginatorComponent, { ...props, forwardRef: ref }));

package/dist/esm/presentation/Presentation.css

@@ -0,0 +1,23 @@
+/* Paginator */
+.noseur-paginator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.noseur-paginator-rc {
+  margin-left: auto;
+}
+
+.noseur-paginator-lc {
+  margin-right: auto;
+}
+
+.noseur-paginator-props-value {
+  display: contents;
+}
+
+/* Chart */
+.noseur-chart {
+  position: relative;
+}

package/dist/esm/sensor/DragSensor.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import { ComponentBaseProps } from "../core/ComponentBaseProps";
+import { Bound, Ceiling, Direction } from "../constants/Direction";
+export declare enum DragSensorEventType {
+    END = "END",
+    EXIT = "EXIT",
+    DRAG = "DRAG",
+    DROP = "DROP",
+    START = "START",
+    ENTER = "ENTER",
+    DRAG_OVER = "DRAG_OVER"
+}
+export interface DragSensorEvent {
+    x: number;
+    y: number;
+    key: string;
+    top: number;
+    left: number;
+    scrollX: number;
+    scrollY: number;
+    clientX: number;
+    clientY: number;
+    clientTop: number;
+    clientLeft: number;
+    event: React.DragEvent<any>;
+}
+export type DragSensorEventHandler = (event?: DragSensorEvent) => void;
+export type DragSensorEventChangeHandler = (type?: DragSensorEventType, event?: DragSensorEvent) => void;
+export interface DragSensorManageRef {
+}
+export interface DragSensorProps extends ComponentBaseProps<HTMLDivElement, DragSensorManageRef> {
+    padding: number;
+    ceiling: Ceiling;
+    edgeOnly: boolean;
+    showTrail: boolean;
+    singleton: boolean;
+    direction: Direction;
+    allowedOverflow: number;
+    allowOnDragReset: boolean;
+    boundToParent: boolean | Bound;
+    onDragEvent: DragSensorEventHandler;
+    onDragEventEnd: DragSensorEventHandler;
+    onDragEventExit: DragSensorEventHandler;
+    onDragEventDrop: DragSensorEventHandler;
+    onDragEventEnter: DragSensorEventHandler;
+    onDragEventStart: DragSensorEventHandler;
+    onDragEventDragOver: DragSensorEventHandler;
+    onDragEventChange: DragSensorEventChangeHandler;
+}
+export declare const DragSensor: ({ ref, ...props }: Partial<DragSensorProps>) => React.JSX.Element;

package/dist/esm/sensor/DragSensor.js

@@ -0,0 +1,156 @@
+import React from "react";
+import { DOMHelper } from "../utils/DOMUtils";
+import { BoolHelper } from "../utils/BoolHelper";
+import { TypeChecker } from "../utils/TypeChecker";
+import { ObjectHelper } from "../utils/ObjectHelper";
+export var DragSensorEventType;
+(function (DragSensorEventType) {
+    DragSensorEventType["END"] = "END";
+    DragSensorEventType["EXIT"] = "EXIT";
+    DragSensorEventType["DRAG"] = "DRAG";
+    DragSensorEventType["DROP"] = "DROP";
+    DragSensorEventType["START"] = "START";
+    DragSensorEventType["ENTER"] = "ENTER";
+    DragSensorEventType["DRAG_OVER"] = "DRAG_OVER";
+})(DragSensorEventType || (DragSensorEventType = {}));
+const transparentDragIcon = new Image();
+transparentDragIcon.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+class DragSensorComponent extends React.Component {
+    static defaultProps = {};
+    state = {};
+    dragElementRefs = {};
+    constructor(props) {
+        super(props);
+        this.onDrop = this.onDrop.bind(this);
+        this.onDrag = this.onDrag.bind(this);
+        this.onDragEnd = this.onDragEnd.bind(this);
+        this.onDragExit = this.onDragExit.bind(this);
+        this.onDragOver = this.onDragOver.bind(this);
+        this.onDragEnter = this.onDragEnter.bind(this);
+        this.onDragStart = this.onDragStart.bind(this);
+    }
+    onDragStart(key, event) {
+        this.props.onDragStart && this.props.onDragStart(event);
+        if (!this.dragElementRefs || !(key in this.dragElementRefs))
+            return;
+        const element = this.dragElementRefs[key];
+        if (!this.props.showTrail) {
+            event.dataTransfer.setDragImage(transparentDragIcon, 0, 0);
+        }
+        const evt = { ...DOMHelper.elementRelativeAndAbsolutePositions(element, event, this.props.boundToParent, this.props.allowedOverflow, this.props.direction, this.props.ceiling), event, key };
+        this.props.onDragEventChange && this.props.onDragEventChange(DragSensorEventType.START, evt);
+        this.props.onDragEventStart && this.props.onDragEventStart(evt);
+    }
+    onDragEnd(key, event) {
+        this.props.onDragEnd && this.props.onDragEnd(event);
+        if (!this.dragElementRefs || !(key in this.dragElementRefs))
+            return;
+        const element = this.dragElementRefs[key];
+        const evt = { ...DOMHelper.elementRelativeAndAbsolutePositions(element, event, this.props.boundToParent, this.props.allowedOverflow, this.props.direction, this.props.ceiling), event, key };
+        this.props.onDragEventChange && this.props.onDragEventChange(DragSensorEventType.START, evt);
+        this.props.onDragEventEnd && this.props.onDragEventEnd(evt);
+    }
+    onDragEnter(key, event) {
+        this.props.onDragEnter && this.props.onDragEnter(event);
+        if (!this.dragElementRefs || !(key in this.dragElementRefs))
+            return;
+        const element = this.dragElementRefs[key];
+        const evt = { ...DOMHelper.elementRelativeAndAbsolutePositions(element, event, this.props.boundToParent, this.props.allowedOverflow, this.props.direction, this.props.ceiling), event, key };
+        this.props.onDragEventChange && this.props.onDragEventChange(DragSensorEventType.ENTER, evt);
+        this.props.onDragEventEnter && this.props.onDragEventEnter(evt);
+    }
+    onDragExit(key, event) {
+        this.props.onDragExit && this.props.onDragExit(event);
+        if (!this.dragElementRefs || !(key in this.dragElementRefs))
+            return;
+        const element = this.dragElementRefs[key];
+        const evt = { ...DOMHelper.elementRelativeAndAbsolutePositions(element, event, this.props.boundToParent, this.props.allowedOverflow, this.props.direction, this.props.ceiling), event, key };
+        this.props.onDragEventChange && this.props.onDragEventChange(DragSensorEventType.EXIT, evt);
+        this.props.onDragEventExit && this.props.onDragEventExit(evt);
+    }
+    onDrop(key, event) {
+        this.props.onDrop && this.props.onDrop(event);
+        if (!this.dragElementRefs || !(key in this.dragElementRefs))
+            return;
+        const element = this.dragElementRefs[key];
+        const evt = { ...DOMHelper.elementRelativeAndAbsolutePositions(element, event, this.props.boundToParent, this.props.allowedOverflow, this.props.direction, this.props.ceiling), event, key };
+        this.props.onDragEventChange && this.props.onDragEventChange(DragSensorEventType.DROP, evt);
+        this.props.onDragEventDrop && this.props.onDragEventDrop(evt);
+    }
+    onDragOver(key, event) {
+        this.props.onDragOver && this.props.onDragOver(event);
+        if (!!this.props.onDrop || !!this.props.onDragEventDrop)
+            event.preventDefault();
+        if (!this.dragElementRefs || !(key in this.dragElementRefs))
+            return;
+        const element = this.dragElementRefs[key];
+        const evt = { ...DOMHelper.elementRelativeAndAbsolutePositions(element, event, this.props.boundToParent, this.props.allowedOverflow, this.props.direction, this.props.ceiling), event, key };
+        this.props.onDragEventChange && this.props.onDragEventChange(DragSensorEventType.DRAG_OVER, evt);
+        this.props.onDragEventDragOver && this.props.onDragEventDragOver(evt);
+    }
+    onDrag(key, event) {
+        if (!this.props.allowOnDragReset && event.clientX === 0 && event.clientY === 0)
+            return;
+        this.props.onDrag && this.props.onDrag(event);
+        if (!this.dragElementRefs || !(key in this.dragElementRefs))
+            return;
+        const element = this.dragElementRefs[key];
+        const evt = { ...DOMHelper.elementRelativeAndAbsolutePositions(element, event, this.props.boundToParent, this.props.allowedOverflow, this.props.direction, this.props.ceiling), event, key };
+        this.props.onDragEventChange && this.props.onDragEventChange(DragSensorEventType.DRAG, evt);
+        this.props.onDragEvent && this.props.onDragEvent(evt);
+    }
+    buildEventProps(key, existingRef) {
+        const ref = (r) => {
+            ObjectHelper.resolveRef(existingRef, r);
+            if (!key) {
+                delete this.dragElementRefs[key];
+                return;
+            }
+            this.dragElementRefs[key] = r;
+        };
+        const onDrop = (e) => this.onDrop(key, e);
+        const onDrag = (e) => this.onDrag(key, e);
+        const onDragEnd = (e) => this.onDragEnd(key, e);
+        const onDragOver = (e) => this.onDragOver(key, e);
+        const onDragEnter = (e) => this.onDragEnter(key, e);
+        const onDragStart = (e) => this.onDragStart(key, e);
+        const eventProps = {
+            ref,
+            onDrag,
+            onDrop,
+            onDragEnd,
+            onDragOver,
+            onDragEnter,
+            onDragStart,
+            draggable: this.props.draggable,
+        };
+        return eventProps;
+    }
+    render() {
+        const style = {
+            width: "fit-content",
+            ...(this.props.style ?? {}),
+        };
+        if (this.props.singleton) {
+            if (!this.props.children)
+                return;
+            let children = [];
+            if (!TypeChecker.isArray(this.props.children))
+                children.push(this.props.children);
+            else
+                children = children.concat(this.props.children);
+            return (React.createElement(React.Fragment, null, children.map((child) => {
+                let ref = (TypeChecker.isObject(child) ? child?.ref : undefined);
+                let key = (TypeChecker.isObject(child) ? child?.key : undefined) ?? DOMHelper.uniqueElementId("drag-sensor");
+                return (!child
+                    ? undefined
+                    : React.cloneElement((BoolHelper.equalsAny(typeof child, ["string", "number", "boolean"])
+                        ? React.createElement("span", null, child)
+                        : child), this.buildEventProps(key, ref)));
+            })));
+        }
+        return (React.createElement("div", { id: this.props.id, key: this.props.key, className: this.props.className, style: style, ...this.buildEventProps((this.props.key ?? "__primary__"), this.props.forwardRef) }, this.props.children));
+    }
+    ;
+}
+export const DragSensor = ({ ref, ...props }) => (React.createElement(DragSensorComponent, { ...props, forwardRef: ref }));

package/dist/esm/sensor/ViewportSensor.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { Orientation } from "../constants/Orientation";
+import { ComponentBaseProps } from "../core/ComponentBaseProps";
+export type ViewportSensorEventHandler = (viewportSensorManageRef?: ViewportSensorManageRef) => boolean;
+export interface ViewportSensorManageRef {
+    mountChildren: () => void;
+    unmountChildren: () => void;
+    reportOnExitViewport: () => void;
+    reportOnEnterViewport: () => void;
+}
+export interface ViewportSensorProps extends ComponentBaseProps<HTMLDivElement, ViewportSensorManageRef> {
+    orientation: Orientation;
+    preRenderChildren: boolean;
+    scrollContainerRef: React.MutableRefObject<any>;
+    onExitViewport: ViewportSensorEventHandler;
+    onEnterViewport: ViewportSensorEventHandler;
+}
+export declare const ViewportSensor: ({ ref, ...props }: Partial<ViewportSensorProps>) => React.JSX.Element;

package/dist/esm/sensor/ViewportSensor.js

@@ -0,0 +1,85 @@
+import React from "react";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { Orientation } from "../constants/Orientation";
+import { DOMHelper, ScrollHandler } from "../utils/DOMUtils";
+class ViewportSensorComponent extends React.Component {
+    static defaultProps = {
+        orientation: Orientation.HORIZONTAL_VERTICAL
+    };
+    state = {
+        inViewport: false,
+        renderChildren: false,
+    };
+    container;
+    documentScrollHandler;
+    componentUnmounted = false;
+    internalManageRefCache;
+    constructor(props) {
+        super(props);
+    }
+    componentDidMount() {
+        this.internalManageRefCache = {
+            mountChildren: () => this.setState({ renderChildren: true }),
+            unmountChildren: () => this.setState({ renderChildren: false }),
+            reportOnExitViewport: () => this.setState({
+                renderChildren: (this.props.onExitViewport ? this.props.onExitViewport(this.internalManageRefCache) : true)
+            }),
+            reportOnEnterViewport: () => this.setState({
+                renderChildren: (this.props.onEnterViewport ? this.props.onEnterViewport(this.internalManageRefCache) : true)
+            }),
+        };
+        ObjectHelper.resolveManageRef(this, this.internalManageRefCache);
+        if (this.documentScrollHandler)
+            return;
+        let scrollContainer;
+        if (this.props.scrollContainerRef && this.props.scrollContainerRef.current) {
+            scrollContainer = this.props.scrollContainerRef.current;
+        }
+        if (this.container) {
+            const inViewport = this.props.preRenderChildren || DOMHelper.inViewport(this.container, ScrollHandler.getScrollableParents(this.container, true)[0], this.props.orientation);
+            inViewport && this.setState({
+                inViewport: true,
+                renderChildren: (this.props.onEnterViewport ? this.props.onEnterViewport(this.internalManageRefCache) : true)
+            });
+        }
+        this.documentScrollHandler = ScrollHandler.handle((scrollContainer ? [scrollContainer] : this.container), (event) => {
+            if (!this.container)
+                return;
+            const inViewport = DOMHelper.inViewport(this.container, DOMHelper.getTarget(event), this.props.orientation);
+            if (inViewport) {
+                (!this.state.inViewport) && this.setState({
+                    inViewport: true,
+                    renderChildren: (this.props.onEnterViewport ? this.props.onEnterViewport(this.internalManageRefCache) : true)
+                });
+            }
+            else if (this.state.inViewport) {
+                this.setState({
+                    inViewport: false,
+                    renderChildren: (this.props.onExitViewport ? this.props.onExitViewport(this.internalManageRefCache) : true)
+                });
+            }
+        }, true);
+        this.documentScrollHandler.attach();
+        this.componentUnmounted = true;
+    }
+    componentWillUnmount() {
+        if (!this.componentUnmounted)
+            return;
+        this.componentUnmounted = true;
+        this.documentScrollHandler && this.documentScrollHandler.detach();
+        ObjectHelper.resolveManageRef(this, null);
+        this.documentScrollHandler = undefined;
+    }
+    render() {
+        const ref = (r) => {
+            if (!!this.container && !r)
+                this.componentWillUnmount();
+            else if (this.componentUnmounted && !!r)
+                this.componentDidMount();
+            this.container = r;
+            ObjectHelper.resolveRef(this.props.forwardRef, r);
+        };
+        return (React.createElement("div", { ref: ref, key: this.props.key, id: this.props.id, className: this.props.className, style: this.props.style }, this.state.renderChildren ? this.props.children : null));
+    }
+}
+export const ViewportSensor = ({ ref, ...props }) => (React.createElement(ViewportSensorComponent, { ...props, forwardRef: ref }));