@topconsultnpm/sdkui-react-beta 6.8.6 → 6.8.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type ITMRightSidebarItem = {
|
|
3
|
+
id: string;
|
|
4
|
+
icon: any;
|
|
5
|
+
visibleName: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
primary?: boolean;
|
|
8
|
+
isActive?: boolean;
|
|
9
|
+
};
|
|
10
|
+
export interface ITMRightSidebarProps {
|
|
11
|
+
items?: Array<ITMRightSidebarItem>;
|
|
12
|
+
onItemClick?: (e: string) => void;
|
|
13
|
+
selectedItem?: string;
|
|
14
|
+
showPanel?: boolean;
|
|
15
|
+
}
|
|
16
|
+
declare const TMRightSidebar: React.FC<ITMRightSidebarProps>;
|
|
17
|
+
export default TMRightSidebar;
|
|
18
|
+
export declare const StyledAnimatedComponentScaleColor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
19
|
+
$delay?: string;
|
|
20
|
+
$scale?: number;
|
|
21
|
+
}>> & string;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
3
|
+
import styled, { keyframes } from 'styled-components';
|
|
4
|
+
import { TMColors } from '../../utils/theme';
|
|
5
|
+
const TMRightSidebar = ({ items = [], onItemClick, selectedItem, showPanel = false }) => {
|
|
6
|
+
const [hoveredItem, setHoveredItem] = useState(null);
|
|
7
|
+
const [currentSelectedItem, setCurrentSelectedItem] = useState(selectedItem);
|
|
8
|
+
useEffect(() => { setCurrentSelectedItem(selectedItem ? selectedItem : null); }, [selectedItem]);
|
|
9
|
+
const handleItemClick = (item) => {
|
|
10
|
+
setCurrentSelectedItem(item);
|
|
11
|
+
};
|
|
12
|
+
const onClickHandler = (item) => {
|
|
13
|
+
!item.primary && handleItemClick(item.id);
|
|
14
|
+
onItemClick && onItemClick(item.id);
|
|
15
|
+
};
|
|
16
|
+
return (_jsxs(SidebarContainer, { children: [items?.find(item => item.primary) && _jsxs(StyledMenuItem, { "$disabled": items?.find(item => item.primary)?.disabled, "$selectedColor": 'orange', style: { borderBottom: '2px solid', borderColor: '#606060', height: '50px' }, "$isHovered": hoveredItem === items?.find(item => item.primary)?.id, "$isSelected": items?.find(item => item.primary)?.isActive, onMouseEnter: () => setHoveredItem(items?.find(item => item.primary)?.id), onMouseLeave: () => setHoveredItem(null), onClick: () => !items?.find(item => item.primary)?.disabled && onClickHandler(items?.find(item => item.primary)), children: [_jsx(StyledAnimatedComponentScaleColor, { "$delay": '500ms', children: items?.find(item => item.primary)?.icon }), _jsx("span", { children: items?.find(item => item.primary)?.visibleName })] }), items?.filter((i => !i.primary))?.map((item, index) => (_jsxs(StyledMenuItem, { "$disabled": item.disabled, style: { paddingTop: index === 0 ? '15px' : '10px' }, "$isHovered": hoveredItem === item.id, "$isSelected": currentSelectedItem === item.id && showPanel, onMouseEnter: () => setHoveredItem(item.id), onMouseLeave: () => setHoveredItem(null), onClick: () => !item.disabled && onClickHandler(item), children: [_jsx(StyledAnimatedComponentScaleColor, { "$delay": `${(index * 150) + 650}ms`, children: item.icon }), _jsx("span", { children: item.visibleName })] }, item.id)))] }));
|
|
17
|
+
};
|
|
18
|
+
export default TMRightSidebar;
|
|
19
|
+
const scaleAndColorChange = (scaleValue) => keyframes `
|
|
20
|
+
0% { transform: scale(1); color: white; }
|
|
21
|
+
50% { transform: scale(${scaleValue}); color: orange; }
|
|
22
|
+
100% { transform: scale(1); color: white; }
|
|
23
|
+
`;
|
|
24
|
+
//#region Styled Components
|
|
25
|
+
export const StyledAnimatedComponentScaleColor = styled.div `
|
|
26
|
+
animation: ${props => scaleAndColorChange(props.$scale ?? 1.5)} 400ms ease-in-out ;
|
|
27
|
+
animation-delay: ${props => props.$delay ? props.$delay : '0'};
|
|
28
|
+
`;
|
|
29
|
+
const SidebarContainer = styled.div ` width: 30px; height: 100%; display: flex; flex-direction: column; align-items: center; background-color: #203e5a; transition: width 0.3s ease; border-bottom-right-radius: 10px; `;
|
|
30
|
+
const StyledMenuItem = styled.div `
|
|
31
|
+
width: 100%;
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
padding: 8px 0;
|
|
35
|
+
color: ${props => !props.$disabled ? (props.$isSelected ? props.$selectedColor ?? '#6291de' : '#fff') : '#929292'};
|
|
36
|
+
cursor: ${props => props.$disabled ? 'default' : 'pointer'};
|
|
37
|
+
position: relative;
|
|
38
|
+
justify-content: center;
|
|
39
|
+
background-color: ${props => !props.$disabled ? (props.$isSelected ? '#2e2e2e' : 'transparent') : 'transparent'};
|
|
40
|
+
transition: background-color 0.3s ease, color 0.3s ease;
|
|
41
|
+
&:hover { background-color: ${props => !props.$disabled && (props.$isSelected ? '#2e2e2e' : TMColors.primaryColor)}; }
|
|
42
|
+
svg { font-size: 18px; position: relative; z-index: 1; }
|
|
43
|
+
span { position: absolute; right: 40px; white-space: nowrap; overflow: hidden; font-size: 14px; opacity: ${({ $isHovered }) => ($isHovered ? 1 : 0)}; padding: 4px 8px; background-color: #222; border-radius: 4px; color: #fff; pointer-events: none; transition: opacity 0.1s ease, transform 0.1s ease; transform: ${({ $isHovered }) => ($isHovered ? 'translateX(0)' : 'translateX(20px)')}; }
|
|
44
|
+
`;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ITMRightSidebarProps } from './TMRightSidebar';
|
|
3
|
+
export interface ITMToolbarCardProps extends ITMRightSidebarProps {
|
|
4
|
+
color?: string;
|
|
5
|
+
backgroundColor?: string;
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
showHeader?: boolean;
|
|
8
|
+
title?: string;
|
|
9
|
+
titleCount?: number;
|
|
10
|
+
toolbar?: any;
|
|
11
|
+
padding?: string;
|
|
12
|
+
onBack?: () => void;
|
|
13
|
+
}
|
|
14
|
+
declare const TMToolbarCard: React.FC<ITMToolbarCardProps>;
|
|
15
|
+
export default TMToolbarCard;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
import TMRightSidebar from './TMRightSidebar';
|
|
4
|
+
import { IconArrowLeft } from '../../helper';
|
|
5
|
+
import { TMColors } from '../../utils/theme';
|
|
6
|
+
import { StyledBadge } from './Styled';
|
|
7
|
+
import TMButton from './TMButton';
|
|
8
|
+
const StyledSearchCard = styled.div `
|
|
9
|
+
width: 100%;
|
|
10
|
+
height: 100%;
|
|
11
|
+
font-size: 1rem;
|
|
12
|
+
border-radius: 12px;
|
|
13
|
+
border: 1px solid ${() => TMColors.primaryColor}50 ;
|
|
14
|
+
`;
|
|
15
|
+
const StyledSearchCardHeader = styled.div `
|
|
16
|
+
width:100% ;
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: row;
|
|
19
|
+
align-items: center;
|
|
20
|
+
justify-content: flex-start;
|
|
21
|
+
padding: 4px 10px;
|
|
22
|
+
background-color: ${props => props.$backgroundColor ?? TMColors.backgroundColorHeader};
|
|
23
|
+
color: ${props => props.$color ?? TMColors.colorHeader};
|
|
24
|
+
border-top-right-radius: 10px;
|
|
25
|
+
border-top-left-radius: 10px;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
position: sticky;
|
|
28
|
+
top: 0;
|
|
29
|
+
font-weight: 600;
|
|
30
|
+
height: 35px;
|
|
31
|
+
`;
|
|
32
|
+
const StyledSearchCardContent = styled.div `
|
|
33
|
+
width: 100%;
|
|
34
|
+
height: calc(100% - 35px);
|
|
35
|
+
overflow: auto;
|
|
36
|
+
background-color: ${props => props.$backgroundColor};
|
|
37
|
+
border-bottom-right-radius: 10px;
|
|
38
|
+
border-bottom-left-radius: 10px;
|
|
39
|
+
padding: ${props => props.$padding};
|
|
40
|
+
display: flex;
|
|
41
|
+
justify-content: space-between;
|
|
42
|
+
|
|
43
|
+
position: relative;
|
|
44
|
+
user-select: none;
|
|
45
|
+
`;
|
|
46
|
+
const TMToolbarCard = ({ items = [], onItemClick, selectedItem, showPanel, color = TMColors.colorHeader, backgroundColor = TMColors.backgroundColorHeader, children, showHeader = true, title, titleCount, toolbar, padding = '3px', onBack }) => {
|
|
47
|
+
return (_jsxs(StyledSearchCard, { children: [showHeader && _jsx(StyledSearchCardHeader, { "$backgroundColor": backgroundColor, "$color": color, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px' }, children: [onBack && _jsx(TMButton, { btnStyle: 'icon', icon: _jsx("div", { style: { backgroundColor: 'white', minWidth: '24px', minHeight: '24px', borderRadius: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(IconArrowLeft, { color: TMColors.primaryColor }) }), caption: 'Torna indietro', onClick: onBack }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx("p", { children: title }), titleCount ? _jsx(StyledBadge, { "$backgroundColor": '#679CE8', children: titleCount }) : _jsx(_Fragment, {})] })] }), _jsx("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '5px' }, children: toolbar })] }) }), _jsxs(StyledSearchCardContent, { "$padding": padding, "$backgroundColor": `${TMColors.backgroundColorHeader}12`, children: [_jsx("div", { style: { width: items.length > 0 ? 'calc(100% - 30px)' : '100%' }, children: children }), items.length > 0 &&
|
|
48
|
+
_jsx(TMRightSidebar, { items: items, onItemClick: onItemClick, selectedItem: selectedItem, showPanel: showPanel })] })] }));
|
|
49
|
+
};
|
|
50
|
+
export default TMToolbarCard;
|