funda-ui 4.5.682 → 4.5.711

package/publish/lib/esm/Utils/libs/tree.ts

@@ -0,0 +1,119 @@
+/**
+ * Convert Tree
+ * @param {Array} arr                    - Flat array
+ * @param  {?string | ?number} parentId  - Parent id
+ * @param  {?string} keyId               - Key value of id.
+ * @param  {?string} keyParentId         - Key value of parent id.
+ * @returns Array
+ */
+function convertTree(arr: any[], parentId: string | number = '', keyId: string = 'id', keyParentId: string = 'parent_id'): any[] {
+    
+    if (!parentId) {
+        
+        // If there is no parent id (when recursing for the first time), all parents will be queried
+        return arr.filter(item => !item[keyParentId]).map(item => {
+            // Query all child nodes by parent node ID
+            item.children = convertTree(arr, item[keyId], keyId, keyParentId);
+            return item;
+        })
+    } else {
+        return arr.filter(item => item[keyParentId] === parentId).map(item => {
+            // Query all child nodes by parent node ID
+            item.children = convertTree(arr, item[keyId], keyId, keyParentId);
+            return item;
+        })
+    }
+}
+
+
+/**
+ * Flat tree
+ * @param {Array} arr                    - Hierarchical array
+ * @returns Array
+ */
+function flatTree(arr: any[]): any[] {
+    const flatData = ({...rest}: any) => {
+        const { children = [] } = rest;
+        return [{...rest}, ...children.flatMap(flatData)];
+    };
+    let result = arr.flatMap(flatData);
+
+    //remove children from item
+    result = result.map((item) => {
+        delete item.children;
+        return item;
+
+    });
+
+    return result;
+}
+
+/**
+ * Get all depth
+ * @param {Object} node 
+ * @returns Number
+ */
+function getAllDepth(arr: any[]): number {
+    const count = (children: any[]): number => {
+        return children.reduce((depth, child) => {
+            return Math.max(depth, 1 + count(child.children)); // increment depth of children by 1, and compare it with accumulated depth of other children within the same element
+        }, 0); //default value 0 that's returned if there are no children
+    }
+   return count(arr);
+}
+
+
+
+
+/**
+* Add depth to each item in the tree
+* @param {Array} arr       - Hierarchical array
+* @param  {?string} keyId               - Key value of id.
+* @param  {?string} keyParentId         - Key value of parent id.
+* @param  {?number} depth               - Depth of the item.
+* @returns Number
+*/
+function addTreeDepth(arr: any[], keyId: string = 'id', parentItem: string = '', depth: number = 0): any[] {
+   return arr.reduce((acc, el) => {
+       const { children, ...otherProps } = el;
+       acc.push({ ...otherProps, parentItem, depth });
+       if (children) {
+           return acc.concat(addTreeDepth(children, keyId, el[keyId], depth + 1));
+       }
+       return acc;
+   }, []);
+}
+
+
+
+/**
+ * Add indent placeholder
+ * @param {Array} arr                    - Flat array
+ * @param  {?string} placeholder         - String of placeholder
+ * @param  {?string} lastPlaceholder     - Last String of placeholder
+ * @param  {?string} keyName             - Key value of name.
+ * @returns Array
+ */
+function addTreeIndent(arr: any[], placeholder: string = '    ', lastPlaceholder: string = '', keyName: string = 'label'): void {
+
+    arr.forEach((item) => {
+        let indent = ''; 
+        if (item.depth) {
+            Array(item.depth).fill(0).forEach((k, i) => {
+                indent += placeholder;
+                if (i === item.depth-1) {
+                    item[keyName] = indent + lastPlaceholder + item[keyName];
+                }
+            });
+        }
+    });
+}
+
+export {
+    getAllDepth,
+    convertTree,
+    flatTree,
+    addTreeDepth,
+    addTreeIndent
+};
+

package/publish/lib/esm/Utils/libs/viewport.ts

@@ -0,0 +1,20 @@
+/**
+ * Check if an element is in the viewport
+ * @param {HTMLElement} elem 
+ * @returns {Boolean}
+ */
+function isInViewport(elem: HTMLElement) {
+    const bounding = elem.getBoundingClientRect();
+    return (
+        bounding.top >= 0 &&
+        bounding.left >= 0 &&
+        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+}
+
+    
+export {
+    isInViewport
+}
+

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,43 @@
+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 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 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 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.5.711","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"}}