@topconsultnpm/sdkui-react 6.17.0-test10 → 6.17.0-test11

package/lib/components/features/assistant/ToppyHelpCenter.js

@@ -1,173 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import styled, { keyframes, css } from 'styled-components';
-import Toppy from '../../../assets/Toppy-generico.png';
-import { DeviceType } from '../../base/TMDeviceProvider';
-const toppyEntrance = keyframes `
-  0% { right: -200px; opacity: 0; }
-  60% { opacity: 1; }
-  100% { right: 10px; opacity: 1; }
-`;
-const pulseAnimation = keyframes `
-  0% { transform: scale(1); }
-  50% { transform: scale(1.05); }
-  100% { transform: scale(1); }
-`;
-const bounceAnimation = keyframes `
-  0%, 20%, 50%, 80%, 100% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(-10px);
-  }
-  60% {
-    transform: translateY(-5px);
-  }
-`;
-const wiggle = keyframes `
-  0% { transform: rotate(-5deg) scale(1.1); }
-  10% { transform: rotate(5deg) scale(0.95); }
-  20% { transform: rotate(-5deg) scale(1.1); }
-  30% { transform: rotate(5deg) scale(1.05); }
-  40% { transform: rotate(-5deg) scale(1); }
-  50% { transform: rotate(5deg) scale(0.96); }
-  60% { transform: rotate(-5deg) scale(1.15); }
-  70% { transform: rotate(5deg) scale(0.99); }
-  80% { transform: rotate(-5deg) scale(1.05); }
-  90% { transform: rotate(5deg) scale(1); }
-  100% { transform: rotate(-5deg) scale(1.08); }
-`;
-const ToppyContainer = styled.div `
-  position: ${({ $fixed }) => ($fixed ? 'fixed' : 'absolute')};
-  bottom: ${({ $isCollapsed, $isMobile }) => $isMobile ? '5px' : $isCollapsed ? '5px' : '-20px'};
-  ${({ $align, $isCollapsed }) => $align === 'left'
-    ? `left: ${$isCollapsed ? '5px' : '10px'}; right: auto;`
-    : `right: ${$isCollapsed ? '5px' : '10px'}; left: auto;`}
-  display: flex;
-  flex-direction: column-reverse; /* Il contenuto è sopra l'immagine */
-  align-items: ${({ $align }) => $align === 'left' ? 'flex-start' : 'flex-end'};
-  animation: ${({ $fixed }) => $fixed && css `${toppyEntrance} 0.5s cubic-bezier(0.23, 1, 0.32, 1)`};
-  z-index: ${({ $fixed }) => ($fixed ? 2147483647 : 10)};
-`;
-const ToppyImage = styled.img `
-  width: ${({ $isMobile, $isCollapsed }) => $isCollapsed ? '60px' : $isMobile ? '90px' : '120px'};
-  height: ${({ $isMobile, $isCollapsed }) => $isCollapsed ? '70px' : $isMobile ? '105px' : '140px'};
-  cursor: pointer;
-  object-fit: cover;
-  object-position: top center;
-  clip-path: inset(0 0 22% 0 round 10px);
-  transform: ${({ $isCollapsed, $align }) => $isCollapsed
-    ? 'none'
-    : $align === 'left'
-        ? 'rotate(20deg)'
-        : 'rotate(-20deg)'};
-
-  ${({ $isCollapsed }) => $isCollapsed &&
-    css `
-      /* animation: ${bounceAnimation} 2s infinite; */
-      /* animation: ${pulseAnimation} 2s infinite; */
-      animation: ${wiggle} 4s infinite;
-    `}
-`;
-const ToppyContent = styled.div `
-  margin-bottom: ${({ $isMobile, $align }) => $align === 'left'
-    ? '30px' // Spazio tra ToppyContent e ToppyImage
-    : $isMobile
-        ? '30px'
-        : '20px'};
-
-
-  display: ${props => (props.$isCollapsed ? 'none' : 'block')};
-  width: max-content;
-  max-width: 250px;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 113, 188, 0.45) 0%,
-    rgba(27, 20, 100, 0.65) 100%
-  );
-  color: white;
-  padding: 10px;
-  border-radius: 10px;
-  border: 1px solid #FFFFFF;
-  opacity: ${props => (props.$isCollapsed ? 0 : 1)};
-  transform: ${props => (props.$isCollapsed ? 'translateY(20px)' : 'translateY(0)')};
-  transition: opacity 0.3s ease, transform 0.3s ease;
-  pointer-events: ${props => (props.$isCollapsed ? 'none' : 'auto')};
-  position: relative; 
-
- ${({ $align, $isMobile }) => $align === 'left' &&
-    css `
-      position: absolute;
-      left: 50px;
-      right: auto;
-      bottom: 100%;
-      transform: translateY(-${$isMobile ? '10px' : '20px'}); 
-    `}
-
-  &::after {
-    transform: ${({ $align }) => $align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)'};
-    content: "";
-    position: absolute;
-    top: 100%;
-
-    ${({ $align }) => $align === 'left' ? 'left: 20px; right: auto;' : 'right: 15px; left: auto;'} 
-    border-width: 32px 32px 0 0;
-    border-style: solid;
-    border-color: #FFFFFF transparent; 
-    display: block;
-    width: 0;
-    height: 0;
-    z-index: 1;
-  }
-  
-  &::before {
-    transform: ${({ $align }) => $align === 'left' ? 'skewX(15deg)' : 'skewX(-15deg)'};
-    content: "";
-    position: absolute;
-    top: 100%;
-
-    ${({ $align }) => $align === 'left' ? 'left: 20px; right: auto;' : 'right: 15px; left: auto;'} 
-    border-width: 32px 32px 0 0;
-    border-style: solid;
-    border-color: rgba(27, 20, 100, 0.65) transparent; 
-    display: block;
-    width: 0;
-    height: 0;
-    z-index: 2;
-  }
-`;
-const ToppyHelpCenter = ({ content, deviceType, usePortal = true, align = 'right', initialIsCollapsed, onToppyImageClick }) => {
-    const [isCollapsed, setIsCollapsed] = useState(initialIsCollapsed ?? false);
-    const [portalContainer, setPortalContainer] = useState(null);
-    useEffect(() => {
-        if (initialIsCollapsed === undefined && deviceType === DeviceType.MOBILE) {
-            setIsCollapsed(true);
-        }
-    }, [deviceType, initialIsCollapsed]);
-    useEffect(() => {
-        if (!usePortal)
-            return;
-        const portalRoot = document.createElement('div');
-        portalRoot.setAttribute('id', 'toppy-portal-root');
-        document.body.appendChild(portalRoot);
-        setPortalContainer(portalRoot);
-        return () => {
-            document.body.removeChild(portalRoot);
-        };
-    }, [usePortal]);
-    const toggleCollapse = (e) => {
-        e.stopPropagation();
-        setIsCollapsed(!isCollapsed);
-        onToppyImageClick?.();
-    };
-    const isMobile = deviceType === DeviceType.MOBILE;
-    const toppyComponent = (_jsxs(ToppyContainer, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$fixed": usePortal, "$align": align, children: [_jsx(ToppyImage, { "$isMobile": isMobile, "$isCollapsed": isCollapsed, "$align": align, onClick: toggleCollapse, src: Toppy, alt: "Toppy" }), _jsx(ToppyContent, { "$isCollapsed": isCollapsed, "$isMobile": isMobile, "$align": align, children: content })] }));
-    if (usePortal) {
-        if (!portalContainer)
-            return null;
-        return ReactDOM.createPortal(toppyComponent, portalContainer);
-    }
-    return toppyComponent;
-};
-export default ToppyHelpCenter;