funda-ui 4.7.615 → 4.7.624

package/publish/lib/esm/Utils/plugins/bodyScrollLock.ts

@@ -0,0 +1,286 @@
+// =================================================================
+// based on https://github.com/willmcpo/body-scroll-lock
+// =================================================================
+
+
+// @flow
+// Adopted and modified solution from Bohdan Didukh (2017)
+// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi
+
+interface BodyScrollOptions {
+    reserveScrollBarGap?: boolean;
+    allowTouchMove?: (el: any) => boolean;
+}
+
+
+interface Lock {
+    targetElement: any;
+    options: BodyScrollOptions;
+}
+
+// Older browsers don't support event options, feature detect it.
+let hasPassiveEvents = false;
+if (typeof window !== 'undefined') {
+    const passiveTestOptions = {
+        get passive() {
+            hasPassiveEvents = true;
+            return undefined;
+        },
+    };
+    (window as any).addEventListener('testPassive', null, passiveTestOptions);
+    (window as any).removeEventListener('testPassive', null, passiveTestOptions);
+}
+
+const isIosDevice =
+    typeof window !== 'undefined' &&
+    window.navigator &&
+    window.navigator.platform &&
+    (/iP(ad|hone|od)/.test(window.navigator.platform) ||
+        (window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1));
+type HandleScrollEvent = TouchEvent;
+
+let locks: Array<Lock> = [];
+let documentListenerAdded: boolean = false;
+let initialClientY: number = -1;
+let previousBodyOverflowSetting: any;
+let previousBodyPosition: any;
+let previousBodyPaddingRight: any;
+
+// returns true if `el` should be allowed to receive touchmove events.
+const allowTouchMove = (el: EventTarget): boolean =>
+    locks.some(lock => {
+        if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
+            return true;
+        }
+
+        return false;
+    });
+
+const preventDefault = (rawEvent: HandleScrollEvent): boolean => {
+    const e = rawEvent || window.event;
+
+    // For the case whereby consumers adds a touchmove event listener to document.
+    // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
+    // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
+    // the touchmove event on document will break.
+    if (allowTouchMove(e.target as any)) {
+        return true;
+    }
+
+    // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
+    if (e.touches.length > 1) return true;
+
+    if (e.preventDefault) e.preventDefault();
+
+    return false;
+};
+
+const setOverflowHidden = (options?: BodyScrollOptions) => {
+    // If previousBodyPaddingRight is already set, don't set it again.
+    if (previousBodyPaddingRight === undefined) {
+        const reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
+        const scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
+
+        if (reserveScrollBarGap && scrollBarGap > 0) {
+            const computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
+            previousBodyPaddingRight = document.body.style.paddingRight;
+            document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`;
+        }
+    }
+
+    // If previousBodyOverflowSetting is already set, don't set it again.
+    if (previousBodyOverflowSetting === undefined) {
+        previousBodyOverflowSetting = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    }
+};
+
+const restoreOverflowSetting = () => {
+    if (previousBodyPaddingRight !== undefined) {
+        document.body.style.paddingRight = previousBodyPaddingRight;
+
+        // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
+        // can be set again.
+        previousBodyPaddingRight = undefined;
+    }
+
+    if (previousBodyOverflowSetting !== undefined) {
+        document.body.style.overflow = previousBodyOverflowSetting;
+
+        // Restore previousBodyOverflowSetting to undefined
+        // so setOverflowHidden knows it can be set again.
+        previousBodyOverflowSetting = undefined;
+    }
+};
+
+const setPositionFixed = () => window.requestAnimationFrame(() => {
+    // If previousBodyPosition is already set, don't set it again.
+    if (previousBodyPosition === undefined) {
+        previousBodyPosition = {
+            position: document.body.style.position,
+            top: document.body.style.top,
+            left: document.body.style.left
+        };
+
+        // Update the dom inside an animation frame
+        const { scrollY, scrollX, innerHeight } = window;
+        document.body.style.position = 'fixed';
+        document.body.style.top = `${-scrollY}px`;
+        document.body.style.left = `${-scrollX}px`;
+
+        setTimeout(() => window.requestAnimationFrame(() => {
+            // Attempt to check if the bottom bar appeared due to the position change
+            const bottomBarHeight = innerHeight - window.innerHeight;
+            if (bottomBarHeight && scrollY >= innerHeight) {
+                // Move the content further up so that the bottom bar doesn't hide it
+                document.body.style.top = `${-(scrollY + bottomBarHeight)}`;
+            }
+        }), 300)
+    }
+});
+
+const restorePositionSetting = () => {
+    if (previousBodyPosition !== undefined) {
+        // Convert the position from "px" to Int
+        const y = -parseInt(document.body.style.top, 10);
+        const x = -parseInt(document.body.style.left, 10);
+
+        // Restore styles
+        document.body.style.position = previousBodyPosition.position;
+        document.body.style.top = previousBodyPosition.top;
+        document.body.style.left = previousBodyPosition.left;
+
+        // Restore scroll
+        window.scrollTo(x, y);
+
+        previousBodyPosition = undefined;
+    }
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
+const isTargetElementTotallyScrolled = (targetElement: any): boolean =>
+    targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
+
+const handleScroll = (event: HandleScrollEvent, targetElement: any): boolean => {
+    const clientY = event.targetTouches[0].clientY - initialClientY;
+
+    if (allowTouchMove(event.target as any)) {
+        return false;
+    }
+
+    if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
+        // element is at the top of its scroll.
+        return preventDefault(event);
+    }
+
+    if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
+        // element is at the bottom of its scroll.
+        return preventDefault(event);
+    }
+
+    event.stopPropagation();
+    return true;
+};
+
+export const disableBodyScroll = (targetElement: any, options?: BodyScrollOptions): void => {
+    // targetElement must be provided
+    if (!targetElement) {
+        // eslint-disable-next-line no-console
+        console.error(
+            'disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.'
+        );
+        return;
+    }
+
+    // disableBodyScroll must not have been called on this targetElement before
+    if (locks.some(lock => lock.targetElement === targetElement)) {
+        return;
+    }
+
+    const lock = {
+        targetElement,
+        options: options || {},
+    };
+
+    locks = [...locks, lock];
+
+    if (isIosDevice) {
+        setPositionFixed();
+    } else {
+        setOverflowHidden(options);
+    }
+
+    if (isIosDevice) {
+        targetElement.ontouchstart = (event: HandleScrollEvent) => {
+            if (event.targetTouches.length === 1) {
+                // detect single touch.
+                initialClientY = event.targetTouches[0].clientY;
+            }
+        };
+        targetElement.ontouchmove = (event: HandleScrollEvent) => {
+            if (event.targetTouches.length === 1) {
+                // detect single touch.
+                handleScroll(event, targetElement);
+            }
+        };
+
+        if (!documentListenerAdded) {
+            document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+            documentListenerAdded = true;
+        }
+    }
+};
+
+export const clearAllBodyScrollLocks = (): void => {
+    if (isIosDevice) {
+        // Clear all locks ontouchstart/ontouchmove handlers, and the references.
+        locks.forEach((lock: Lock) => {
+            lock.targetElement.ontouchstart = null;
+            lock.targetElement.ontouchmove = null;
+        });
+
+        if (documentListenerAdded) {
+            (document as any).removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+            documentListenerAdded = false;
+        }
+
+        // Reset initial clientY.
+        initialClientY = -1;
+    }
+
+    if (isIosDevice) {
+        restorePositionSetting();
+    } else {
+        restoreOverflowSetting();
+    }
+
+    locks = [];
+};
+
+export const enableBodyScroll = (targetElement: any): void => {
+    if (!targetElement) {
+        // eslint-disable-next-line no-console
+        console.error(
+            'enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.'
+        );
+        return;
+    }
+
+    locks = locks.filter(lock => lock.targetElement !== targetElement);
+
+    if (isIosDevice) {
+        targetElement.ontouchstart = null;
+        targetElement.ontouchmove = null;
+
+        if (documentListenerAdded && locks.length === 0) {
+            (document as any).removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+            documentListenerAdded = false;
+        }
+    }
+
+    if (isIosDevice) {
+        restorePositionSetting();
+    } else {
+        restoreOverflowSetting();
+    }
+};

package/publish/lib/esm/index.js

@@ -0,0 +1,47 @@
+export { default as Accordion } from './Accordion';
+export { default as BackToTop } from './BackToTop';
+export { default as CascadingSelect } from './CascadingSelect';
+export { default as CascadingSelectE2E } from './CascadingSelectE2E';
+export { default as Chatbox } from './Chatbox';
+export { default as Checkbox } from './Checkbox';
+export { default as ColorPicker } from './ColorPicker';
+export { default as Date } from './Date';
+export { default as DigitalClock } from './DigitalClock';
+export { default as DragDropList } from './DragDropList';
+export { default as DropdownMenu } from './DropdownMenu';
+export { default as DynamicFields } from './DynamicFields';
+export { default as EventCalendar } from './EventCalendar';
+export { default as EventCalendarTimeline } from './EventCalendarTimeline';
+export { default as File } from './File';
+export { default as HorizontalScrollContent } from './HorizontalScrollContent';
+export { default as Input } from './Input';
+export { default as LiveSearch } from './LiveSearch';
+export { default as MasonryLayout } from './MasonryLayout';
+export { default as ModalDialog } from './ModalDialog';
+export { default as ModeSwitch } from './ModeSwitch';
+export { default as MultilevelDropdownMenu } from './MultilevelDropdownMenu';
+export { default as MultipleCheckboxes } from './MultipleCheckboxes';
+export { default as MultipleSelect } from './MultipleSelect';
+export { default as NativeSelect } from './NativeSelect';
+export { default as NumberInput } from './NumberInput';
+export { default as Pagination } from './Pagination';
+export { default as Radio } from './Radio';
+export { default as RangeSlider } from './RangeSlider';
+export { default as Refresher } from './Refresher';
+export { default as RootPortal } from './RootPortal';
+export { default as ScrollReveal } from './ScrollReveal';
+export { default as Scrollbar } from './Scrollbar';
+export { default as SearchBar } from './SearchBar';
+export { default as Select } from './Select';
+export { default as ShowMoreLess } from './ShowMoreLess';
+export { default as SplitterPanel } from './SplitterPanel';
+export { default as Stepper } from './Stepper';
+export { default as Switch } from './Switch';
+export { default as Table } from './Table';
+export { default as Tabs } from './Tabs';
+export { default as TagInput } from './TagInput';
+export { default as Textarea } from './Textarea';
+export { default as Toast } from './Toast';
+export { default as Tooltip } from './Tooltip';
+export { default as Tree } from './Tree';
+export { default as Utils } from './Utils';

package/publish/package.json

@@ -0,0 +1 @@
+{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.624","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"}}