funda-ui 4.5.682 → 4.5.711

package/publish/lib/esm/Toast/Item.tsx

@@ -0,0 +1,124 @@
+import React, { useRef, forwardRef } from 'react';
+
+export interface ItemProps extends React.ComponentPropsWithoutRef<any> {
+    onlyOne?: boolean;
+    index: number;
+    title?: string | React.ReactNode | boolean;
+    note?: string | React.ReactNode | boolean;
+    theme?: string | undefined;
+    message?: string | React.ReactNode;
+    depth: number;
+    schemeBody?: string;
+    schemeHeader?: string;
+    closeBtnColor?: string;
+    closeDisabled?: boolean;
+    autoCloseTime?: boolean | number;
+    lock?: boolean;
+    cascading?: boolean;
+    evStart?: (e: any) => void;
+    evPause?: (e: any) => void;
+    evClose?: (e: any, index: number, currentItem: HTMLDivElement) => void;
+    
+};
+
+const Item = forwardRef((props: ItemProps, externalRef: any) => {
+
+    const {
+        onlyOne,
+        index,
+        title,
+        note,
+        theme,
+        message,
+        depth,
+        lock,
+        cascading,
+        schemeBody,
+        schemeHeader,
+        closeBtnColor,
+        closeDisabled,
+        autoCloseTime,
+        evStart,
+        evPause,
+        evClose
+    } = props;
+
+
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    return (
+        <>
+
+            <div
+                ref={containerRef}
+                className={`toast-container ${onlyOne ? 'only-one' : ''}`}
+                data-index={index}
+                style={cascading ? {
+                    transform: `perspective(100px) translateZ(-${2 * index}px) translateY(${35 * index}px)`,
+                    zIndex: depth
+                } : {
+                    zIndex: depth
+                }}
+                onMouseEnter={evPause}
+                onMouseLeave={evStart}
+            >
+
+                {/* Bootstrap toast */}
+                <div className={`toast fade show ${schemeBody ? schemeBody : ''} ${theme ? `bg-${theme}` : ''}`} role="alert">
+                    {(title === '' || title === false) && (note === '' || note === false) ? null : <>
+                        <div className={`toast-header ${schemeHeader ? schemeHeader : ''}`}>
+                            <strong className="me-auto">{title === '' || title === false ? '' : <>{title}</>}</strong>
+                            <small className="text-muted">{note === '' || note === false ? '' : <>{note}</>}</small>
+                            {!lock ? <>{!closeDisabled ? <button 
+                                data-close="1" 
+                                data-index={index} 
+                                tabIndex={-1} 
+                                type="button" 
+                                className="btn-close"
+                                onClick={(e: React.MouseEvent) => {
+                                    evClose?.(e, index, containerRef.current as HTMLDivElement);
+                                }}
+                            >
+                                <svg width="12px" height="12px" viewBox="0 0 16 16"><path fill={`${closeBtnColor ? closeBtnColor : '#000000'}`} d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z" fillRule="evenodd"></path></svg>
+                            </button> : null}</> : null}
+
+                        </div>
+                    </>}
+
+                    <div className="toast-body">
+                        {message}
+
+                        {(title === '' || title === false) && (note === '' || note === false) ? <>
+                            {!closeDisabled ? <button 
+                                data-close="1" 
+                                data-index={index} 
+                                tabIndex={-1} 
+                                type="button" 
+                                className="btn-close position-absolute top-0 end-0 me-2 mt-2"
+                                onClick={(e: React.MouseEvent) => {
+                                    evClose?.(e, index, containerRef.current as HTMLDivElement);
+                                }}
+                            >
+                                <svg width="12px" height="12px" viewBox="0 0 16 16"><path fill={`${closeBtnColor ? closeBtnColor : '#000000'}`} d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z" fillRule="evenodd"></path></svg>
+                            </button> : null}
+                        </> : null}
+
+
+                        {/* PROGRESS */}
+                        <div ref={externalRef} data-progress-index={index} className={`progress active toast-progress ${autoCloseTime === false ? 'd-none' : ''}`} role="progressbar">
+                            <div className="progress-bar"></div>
+                        </div>
+                        {/* /PROGRESS */}
+
+
+                    </div>
+                </div>
+
+            </div>
+
+        </>
+    )
+});
+
+
+export default Item;

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

@@ -0,0 +1,269 @@
+
+/* ======================================================
+   <!-- Toast -->
+/* ====================================================== */
+
+
+.toasts__wrapper {
+    --bs-toast-zindex: 1090;
+    --bs-border-radius: 0.375rem;
+
+    --toasts-offset-top: 35px;
+    --toasts-offset-bottom: 15px;
+    --toasts-offset-bothsides: 15px;
+    --toasts-container-gap: 0.5rem;
+    --toasts-container-width: 350px;
+    --toasts-progress-height: 5px;
+    --toasts-progress-bg: rgba(255,255,255,.6);
+    
+    
+
+
+    width: var(--toasts-container-width);
+    position: fixed;
+    left: 50%;
+    bottom: 0;
+    z-index: var(--bs-toast-zindex);
+    pointer-events: none;
+    transition: .1s ease-in-out;
+
+    &--bottom-left {
+        left: var(--toasts-offset-bothsides);
+    }
+
+    &--bottom-right {
+        left: auto;
+        right: var(--toasts-offset-bothsides);
+    }
+
+    &--bottom-center {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    &--top-left {
+        left: var(--toasts-offset-bothsides);
+        bottom: auto;
+        top: var(--toasts-offset-top);
+    }
+
+    &--top-right {
+        left: auto;
+        right: var(--toasts-offset-bothsides);
+        top: var(--toasts-offset-top);
+    }
+
+    &--top-center {
+        left: 50%;
+        transform: translateX(-50%);
+        top: var(--toasts-offset-top);
+    }
+
+    &--vertical-center {
+        left: 50%;
+        transform: translate(-50%, -50%);
+        top: 50%;
+        margin-top: 5%;
+    }  
+
+    .toasts {
+        position: relative;
+        width: 100%;
+        bottom: var(--toasts-offset-bottom);
+        display: flex;
+        flex-flow: column-reverse nowrap;
+
+
+        &::before {
+            content: '';
+            top: -80px;
+            bottom: 0;
+            left: -8px;
+            right: -8px;
+            position: absolute;
+            background-color: transparent;
+            pointer-events: none;
+        }
+
+    }
+
+    .toast-container {
+        margin-bottom: var(--toasts-container-gap);
+
+
+        &.auto-anim-switch--initfirst {
+            transform: translateY(-20px);
+            opacity: 0;
+        }
+        
+        &.auto-anim-switch--first {
+            animation-name: toast-anim-show-first;
+            animation-duration: .3s;
+            animation-timing-function: linear;
+            animation-delay: 0;
+            animation-iteration-count: 1;
+            animation-fill-mode: forwards;
+        }
+        
+
+        &.auto-anim-switch:not(.only-one) {
+            animation-name: toast-anim-hide;
+            animation-duration: .3s;
+            animation-timing-function: linear;
+            animation-delay: 0;
+            animation-iteration-count: 1;
+            animation-fill-mode: forwards;
+        }
+
+
+        &.only-one.auto-anim-switch {
+            animation-name: toast-anim-hide--onlyone;
+            animation-duration: .3s;
+            animation-timing-function: linear;
+            animation-delay: 0;
+            animation-iteration-count: 1;
+            animation-fill-mode: forwards;
+        }  
+
+        
+    }
+
+    /* cascading divs */
+    &.toasts__wrapper--cascading {
+
+        .toast-container {
+            margin-bottom: 0;
+        }
+
+        .toasts {
+            &:hover {
+                .toast-container {
+                    transform: perspective(100px) translateZ(0) !important;
+                }
+            }
+        }
+    }
+
+
+
+    /* progress */
+    .toast-progress {
+        position: absolute;
+        width: 100%;
+        bottom: 0px;
+        left: 0px;
+        height: var(--toasts-progress-height);
+        background: transparent;
+        border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
+        overflow: hidden;
+
+        .progress-bar {
+            background: var(--toasts-progress-bg);
+            width: 100%;
+            transition: all .1s;
+        }
+    }
+
+
+
+}
+  
+/* Bootstrap toast here */
+.toast-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    transition: all .25s;
+    pointer-events: auto;
+
+    [data-close] {
+        background: none;
+    }
+
+    [data-close]:focus {
+        box-shadow: none;
+    }
+
+    [data-close] svg {
+        vertical-align: top;
+
+        path {
+            transition: .3s ease-in-out;
+        }
+    }
+
+    [data-close]:hover svg path {
+        fill: #f00;
+    }
+
+    &.hide-start {
+        opacity: 0;
+    }
+    
+    &.hide-end {
+        display: none;
+    }
+
+
+}
+
+@keyframes toast-anim-initfirst {
+    0% {
+        transform: translateY(-20px);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+}
+
+@keyframes toast-anim-show-first {
+    0% {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes toast-anim-hide {
+    0% {
+        transform: translateY(-100%);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateY(10px);
+        opacity: 0;
+
+        /* prevent auto-close's item */
+        display: block;
+       
+    }
+}
+
+
+@keyframes toast-anim-hide--onlyone {
+    0% {
+        transform: translateY(-100%);
+        opacity: 1;
+
+
+        /* prevent auto-close's item */
+        display: block;
+    }
+
+    100% {
+        transform: translateY(10px);
+        opacity: 0;
+
+        /* prevent auto-close's item */
+        display: block;
+       
+    }
+}