funda-ui 4.7.615 → 4.7.624

package/publish/lib/esm/ScrollReveal/index.tsx

@@ -0,0 +1,148 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+import useComId from 'funda-utils/dist/cjs/useComId';
+
+
+export interface ViewOffsetConfig {
+    x?: string | undefined;
+    y?: string | undefined;
+}
+
+
+export type ScrollRevealProps = {
+    root?: any;
+    viewOffset?: ViewOffsetConfig;
+    defaultClassName?: string | string[];
+    showClassName?: string | string[];
+    infinite?: boolean;
+    delay?: number;
+    threshold?: number | number[];
+    onChange?: (e: any, data: any) => void;
+    onIntersect?: (e: any, status: boolean) => void;
+    /** -- */
+    id?: string;
+    children: React.ReactNode;
+};
+
+
+const ScrollReveal = (props: ScrollRevealProps) => {
+    const {
+        root,
+        viewOffset,
+        defaultClassName,
+        showClassName,
+        infinite,
+        delay,
+        threshold,
+        onChange,
+        onIntersect,
+        id,
+        children
+    } = props;
+
+
+    const uniqueID = useComId();
+    const idRes = id || uniqueID;
+    const _viewOffset = viewOffset ? viewOffset : {
+        y: '0px',
+        x: '0px'
+    };
+    const [isIntersecting, setIsIntersecting] = useState(false);
+    const rootRef = useRef(null);
+    const options = {
+        root: root ? root : (typeof document === 'undefined' ? null : document),  // Prevent document undefined from server-side rendering
+        rootMargin: `${_viewOffset.y} ${_viewOffset.x}`,
+        threshold: threshold ? threshold : [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
+    };
+
+    function intersectionCallback(entries: any[]) {
+        // if has multiple intersect via `observer.observe(obj)`
+
+        const [entry] = entries;
+        /*
+        IntersectionObserverEntry {
+            time: 260.2000000476837, 
+            intersectionRatio: 0,
+            rootBounds: {x: 0, y: 0, width: 1680, height: 540, top: 0, …}, 
+            boundingClientRect: {x: 0, y: 590, width: 1680, height: 540, top: 590, …}, 
+            intersectionRect: {x: 0, y: 0, width: 0, height: 0, top: 0, …}, 
+            isIntersecting: false,
+            isVisible: false,
+            target: main
+        }
+
+        IntersectionObserverEntry {
+            time: 4681.599999964237, 
+            intersectionRatio: 0,
+            rootBounds: {x: 0, y: 0, width: 1680, height: 540, top: 0, …}, 
+            boundingClientRect: {x: 0, y: 530, width: 1680, height: 540, top: 530, …}, 
+            intersectionRect: {x: 0, y: 530, width: 1680, height: 10, top: 530, …}, 
+            isIntersecting: true,
+            isVisible: false,
+            target: main
+        }
+
+        ...
+        */
+        setIsIntersecting(entry.isIntersecting);
+
+        // interaction
+        const box = entry.target;
+        const visiblePct = (Math.floor(entry.intersectionRatio * 100)) + "%";
+
+        //
+        onChange?.(box, visiblePct);
+
+    }
+
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(intersectionCallback, options);
+        if ( rootRef.current ) observer.observe(rootRef.current);
+
+        //default classes
+        if ( rootRef.current ) {
+            const _classesDefault = !Array.isArray(defaultClassName) ? [defaultClassName] : defaultClassName;
+            if (typeof defaultClassName !== 'undefined') _classesDefault.map((item: any) => (rootRef.current as any).classList.add(item));
+        }
+
+        return () => observer.disconnect();
+    }, [rootRef, options]);
+
+    useEffect(() => {
+        if ( rootRef.current ) {
+
+            onIntersect?.(rootRef.current, isIntersecting);
+            const _classes = !Array.isArray(showClassName) ? [showClassName] : showClassName;
+
+            if (isIntersecting) {
+                setTimeout(() => {
+                    if (typeof showClassName !== 'undefined') _classes.map((item: any) => (rootRef.current as any).classList.add(item));
+                }, delay ? Number(delay) : 0);
+            } else {
+                if ( infinite ) setTimeout(() => {
+                    if (typeof showClassName !== 'undefined') _classes.map((item: any) => (rootRef.current as any).classList.remove(item));
+                }, delay ? Number(delay) : 0);
+            }
+        }
+
+    }, [isIntersecting]);
+
+
+    return (
+        <>
+
+            <div
+                ref={rootRef}
+                id={idRes}
+            >
+                {children}
+
+            </div>
+
+        </>
+    )
+};
+
+
+export default ScrollReveal;

package/publish/lib/esm/Scrollbar/index.scss

@@ -0,0 +1,221 @@
+/* ======================================================
+    <!-- Custom Scrollbar -->
+/* ====================================================== */
+
+.custom-scrollbars__wrapper {
+
+    --custom-scrollbar-min-wrapper-height: 50px;
+    --custom-scrollbar-content-min-height: 25px;
+    --custom-scrollbar-columns-gap: 20px;
+    --custom-scrollbar-arrow-gap: .5rem;
+    --custom-scrollbars-border-radius: 12px;
+    --custom-scrollbars-control-size: 5px;
+    --custom-scrollbars-track-bg: #e9e9e9;
+    --custom-scrollbars-thumb-bg: #a6a6a6;
+    --custom-scrollbars-thumb-hover-bg: #878787;
+
+    
+    
+	display: grid;
+	min-height: var(--custom-scrollbar-min-wrapper-height);
+	grid-template-areas: "left1 right" "left2 right";
+	grid-template-rows: auto;
+	grid-template-columns: 1fr var(--custom-scrollbar-columns-gap);
+	overflow: hidden;
+	position: relative;
+
+    &.custom-scrollbars__wrapper--horizontal {
+        grid-template-columns: 1fr;
+    }
+
+
+
+    .custom-scrollbars__content {
+        min-height: var(--custom-scrollbar-content-min-height);
+        overflow: auto;
+        scrollbar-width: none;
+        grid-area: left1;
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+    
+
+    .custom-scrollbars__scrollbar {
+        display: grid;
+        gap: 0 0;
+        grid-auto-flow: row;
+        grid-template: calc(var(--custom-scrollbar-arrow-gap) * 1.5) 1fr calc(var(--custom-scrollbar-arrow-gap) / 2) 1rem / 1fr;
+        padding: 0;
+        place-items: center;
+        grid-area: right;
+
+
+        &.disabled {
+            pointer-events: none;
+            opacity: 0;
+            filter: grayscale(100%);
+        }
+
+
+        .custom-scrollbars__button {
+            padding: 0;
+            margin: 0;
+            background: none;
+            outline: none;
+            box-shadow: none;
+            border: none;
+            cursor: pointer;
+            transition: .1s ease-in-out;
+
+            &.disabled {
+                opacity: 0;
+                pointer-events: none;
+            }
+
+
+            svg path {
+                fill: var(--custom-scrollbars-thumb-bg);
+            }
+
+            i {
+                color: var(--custom-scrollbars-thumb-bg);
+            }   
+            &:hover {
+                transform: scale(1.3);
+                svg path {
+                    fill: var(--custom-scrollbars-thumb-hover-bg);
+                }
+    
+                i {
+                    color: var(--custom-scrollbars-thumb-hover-bg);
+                }   
+            }
+    
+
+        }
+        .custom-scrollbars__track-and-thumb {
+            display: block;
+            height: 100%;
+            position: relative;
+            width: var(--custom-scrollbars-control-size);
+            .custom-scrollbars__track {
+                background-color: var(--custom-scrollbars-track-bg);
+                border-radius: var(--custom-scrollbars-border-radius);
+                bottom: 0;
+                cursor: pointer;
+                position: absolute;
+                top: 0;
+                width: var(--custom-scrollbars-control-size);
+            }
+            .custom-scrollbars__thumb {
+                border-radius: var(--custom-scrollbars-border-radius);
+                background-color: var(--custom-scrollbars-thumb-bg);
+                position: absolute;
+                width: var(--custom-scrollbars-control-size);
+
+                &:hover {
+                    background-color: var(--custom-scrollbars-thumb-hover-bg);
+                }
+            }
+        }
+    }
+    
+    
+    .custom-scrollbars__scrollbar-horizontal {
+        display: grid;
+        grid-area: left2;
+        gap: 0 0;
+        grid-auto-flow: row;
+        grid-template: 1rem / var(--custom-scrollbar-arrow-gap) 1fr var(--custom-scrollbar-arrow-gap);
+        padding: 0;
+        place-items: center;
+
+        &.disabled {
+            pointer-events: none;
+            opacity: 0;
+            filter: grayscale(100%);
+        }
+
+
+        .custom-scrollbars__button {
+            padding: 0;
+            margin: 0;
+            background: none;
+            outline: none;
+            box-shadow: none;
+            border: none;
+            cursor: pointer;
+            transition: .1s ease-in-out;
+
+            &.disabled {
+                opacity: 0;
+                pointer-events: none;
+            }
+
+            svg path {
+                fill: var(--custom-scrollbars-thumb-bg);
+            }
+
+            i {
+                color: var(--custom-scrollbars-thumb-bg);
+            }   
+            &:hover {
+                transform: scale(1.3);
+                svg path {
+                    fill: var(--custom-scrollbars-thumb-hover-bg);
+                }
+    
+                i {
+                    color: var(--custom-scrollbars-thumb-hover-bg);
+                }   
+            }
+    
+
+        }
+        .custom-scrollbars__track-and-thumb {
+            display: block;
+            width: 100%;
+            position: relative;
+            height: var(--custom-scrollbars-control-size);
+            .custom-scrollbars__track {
+                background-color: var(--custom-scrollbars-track-bg);
+                border-radius: var(--custom-scrollbars-border-radius);
+                bottom: 0;
+                cursor: pointer;
+                position: absolute;
+                top: 0;
+                height: var(--custom-scrollbars-control-size);
+                width: 100%;
+            }
+            .custom-scrollbars__thumb {
+                border-radius: var(--custom-scrollbars-border-radius);
+                background-color: var(--custom-scrollbars-thumb-bg);
+                position: absolute;
+                height: var(--custom-scrollbars-control-size);
+
+                &:hover {
+                    background-color: var(--custom-scrollbars-thumb-hover-bg);
+                }
+            }
+        }
+    }
+
+    &.arrow-disabled {
+
+        .custom-scrollbars__scrollbar {
+            gap: 0 0 var(--custom-scrollbar-arrow-gap) 0;
+            grid-template: 0 1fr 1rem / 1fr;
+
+        }
+
+        .custom-scrollbars__scrollbar-horizontal {
+            gap: 0;
+            grid-template: auto 1fr auto / 0 1fr 0;
+
+        }
+    }
+
+
+}
+