@topconsultnpm/sdkui-react-beta 6.13.9 → 6.13.10
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.
|
@@ -2,8 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import TMRightSidebar from './TMRightSidebar';
|
|
5
|
-
import { IconArrowLeft, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
|
|
6
|
-
import { TMColors } from '../../utils/theme';
|
|
5
|
+
import { IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
|
|
7
6
|
import TMButton from './TMButton';
|
|
8
7
|
const StyledPanelContainer = styled.div `
|
|
9
8
|
width: 100%;
|
|
@@ -38,6 +37,15 @@ const StyledPanelHeader = styled.div `
|
|
|
38
37
|
border-top-left-radius: 10px;
|
|
39
38
|
height: 40px;
|
|
40
39
|
font-weight: 600;
|
|
40
|
+
outline: none;
|
|
41
|
+
&:focus {
|
|
42
|
+
outline: none;
|
|
43
|
+
}
|
|
44
|
+
// Ensure all children inherit the header color
|
|
45
|
+
&,
|
|
46
|
+
* {
|
|
47
|
+
color: ${({ $isActive, $color }) => $isActive ? '#FFFFFF' : ($color ?? '#2559A5')} !important;
|
|
48
|
+
}
|
|
41
49
|
`;
|
|
42
50
|
const StyledPanelContent = styled.div `
|
|
43
51
|
width: 100%;
|
|
@@ -48,23 +56,32 @@ const StyledPanelContent = styled.div `
|
|
|
48
56
|
padding: ${props => props.$padding};
|
|
49
57
|
display: flex;
|
|
50
58
|
justify-content: space-between;
|
|
51
|
-
|
|
52
59
|
position: relative;
|
|
53
60
|
user-select: none;
|
|
61
|
+
outline: none;
|
|
62
|
+
&:focus {
|
|
63
|
+
outline: none;
|
|
64
|
+
}
|
|
54
65
|
`;
|
|
55
|
-
const
|
|
66
|
+
const StyledInnerPanelDiv = styled.div `
|
|
67
|
+
outline: none;
|
|
68
|
+
&:focus {
|
|
69
|
+
outline: none;
|
|
70
|
+
}
|
|
71
|
+
`;
|
|
72
|
+
const TMPanel = ({ allowMaximize = true, items = [], onItemClick, selectedItem, showPanel, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', onBack, onClose, onHeaderDoubleClick }) => {
|
|
56
73
|
const [isActive, setIsActive] = useState(false);
|
|
57
74
|
const [isMaximized, setIsMaximized] = useState(false);
|
|
58
75
|
return (_jsxs(StyledPanelContainer, { "$isMaximized": isMaximized, children: [showHeader &&
|
|
59
76
|
_jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": isActive, onDoubleClick: () => { if (onHeaderDoubleClick)
|
|
60
77
|
onHeaderDoubleClick(); }, tabIndex: -1, onFocus: () => setIsActive(true), onBlur: () => setIsActive(false), onClick: () => setIsActive(true), 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 &&
|
|
61
|
-
_jsx(TMButton, { btnStyle: 'icon', icon: _jsx(
|
|
78
|
+
_jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconArrowLeft, {}), caption: SDKUI_Localizator.Back, onClick: onBack }), _jsx("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: _jsxs("p", { children: [title, isPositiveNumber(displayedItemsCount) && isPositiveNumber(totalItems)
|
|
62
79
|
? ` (${displayedItemsCount} / ${totalItems})`
|
|
63
80
|
: isPositiveNumber(totalItems)
|
|
64
81
|
? ` (${totalItems})`
|
|
65
|
-
: ''] }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '5px' }, children: [toolbar, _jsx(TMButton, { color: 'primaryOutline', caption: isMaximized ?
|
|
66
|
-
? _jsx(IconWindowMinimize, {
|
|
67
|
-
: _jsx(IconWindowMaximize, {
|
|
82
|
+
: ''] }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '5px' }, children: [toolbar, allowMaximize && _jsx(TMButton, { color: 'primaryOutline', caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized
|
|
83
|
+
? _jsx(IconWindowMinimize, { fontSize: 16 })
|
|
84
|
+
: _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: () => setIsMaximized(m => !m) }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => onClose?.() })] })] }) }), _jsxs(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, tabIndex: -1, onFocus: () => setIsActive(true), onBlur: () => setIsActive(false), onClick: () => setIsActive(true), children: [_jsx(StyledInnerPanelDiv, { style: { width: items.length > 0 ? 'calc(100% - 30px)' : '100%' }, tabIndex: -1, onFocus: () => setIsActive(true), onBlur: () => setIsActive(false), onClick: () => setIsActive(true), children: children }), items.length > 0 &&
|
|
68
85
|
_jsx(TMRightSidebar, { items: items, onItemClick: onItemClick, selectedItem: selectedItem, showPanel: showPanel })] })] }));
|
|
69
86
|
};
|
|
70
87
|
export default TMPanel;
|
|
@@ -199,6 +199,7 @@ export declare class SDKUI_Localizator {
|
|
|
199
199
|
static get LogDelete(): "Löschen der Logik" | "Logical delete" | "Cancelación lógica" | "Suppression logique" | "Lógica de cancelamento" | "Cancellazione logica";
|
|
200
200
|
static get MakeEditable(): "Bearbeitbar machen" | "Make editable" | "Hacer editable" | "Rendre modifiable" | "Faça editável" | "Rendi editabile";
|
|
201
201
|
static get MaxDcmtsToBeReturned(): "Maximale Anzahl von Dokumenten" | "Max number of documents" | "Número máximo de documentos" | "Nombre maximum de documents" | "O número máximo de documentos" | "Numero massimo di documenti";
|
|
202
|
+
static get Maximize(): "Maximieren" | "Maximize" | "Maximizar" | "Maximiser" | "Massimizza";
|
|
202
203
|
static get MetadataFlag(): "Markieren von Methadaten" | "Flag metadata" | "Metadato de indicador" | "Mètadonnée de marque" | "Marcação de metadados" | "Metadato di contrassegno";
|
|
203
204
|
static get MetadataFormats_CodiceFiscale(): "Steuerkennzeichen" | "Fiscal code" | "Código fiscal" | "Code général des impôts" | "Código tributário" | "Codice Fiscale";
|
|
204
205
|
static get MetadataFormats_CurrencyDollar(): "Währung ($)" | "Currency($)" | "Divisa ($)" | "Monnaie ($)" | "Moeda($)" | "Valuta ($)";
|
|
@@ -226,6 +227,7 @@ export declare class SDKUI_Localizator {
|
|
|
226
227
|
static get MetadataSystem(): "System-Methadaten" | "System metadata" | "Metadatos de sistema" | "Métadonnées de système" | "Metadados system" | "Metadati di sistema";
|
|
227
228
|
static get MetadataUsers(): "Benutzermetadaten" | "User metadata" | "Metadatos de usuario" | "Métadonnées de l'utilisateur" | "Metadados do usuário" | "Metadati utente";
|
|
228
229
|
static get Message(): "Nachricht" | "Message" | "Mensaje" | "Mensagem" | "Messaggio";
|
|
230
|
+
static get Minimize(): "Minimieren" | "Minimize" | "Minimizar" | "Minimiser" | "Minimizza";
|
|
229
231
|
static get More(): "andere" | "more" | "otros" | "autres" | "outros" | "altri";
|
|
230
232
|
static get MoreInformation(): "Mehr Informationen" | "More information" | "Más información" | "Plus d'informations" | "Mais informações" | "Maggiori informazioni";
|
|
231
233
|
static get Move(): string;
|
|
@@ -1950,6 +1950,16 @@ export class SDKUI_Localizator {
|
|
|
1950
1950
|
default: return "Numero massimo di documenti";
|
|
1951
1951
|
}
|
|
1952
1952
|
}
|
|
1953
|
+
static get Maximize() {
|
|
1954
|
+
switch (this._cultureID) {
|
|
1955
|
+
case CultureIDs.De_DE: return "Maximieren";
|
|
1956
|
+
case CultureIDs.En_US: return "Maximize";
|
|
1957
|
+
case CultureIDs.Es_ES: return "Maximizar";
|
|
1958
|
+
case CultureIDs.Fr_FR: return "Maximiser";
|
|
1959
|
+
case CultureIDs.Pt_PT: return "Maximizar";
|
|
1960
|
+
default: return "Massimizza";
|
|
1961
|
+
}
|
|
1962
|
+
}
|
|
1953
1963
|
static get MetadataFlag() {
|
|
1954
1964
|
switch (this._cultureID) {
|
|
1955
1965
|
case CultureIDs.De_DE: return "Markieren von Methadaten";
|
|
@@ -2211,6 +2221,16 @@ export class SDKUI_Localizator {
|
|
|
2211
2221
|
default: return "Messaggio";
|
|
2212
2222
|
}
|
|
2213
2223
|
}
|
|
2224
|
+
static get Minimize() {
|
|
2225
|
+
switch (this._cultureID) {
|
|
2226
|
+
case CultureIDs.De_DE: return "Minimieren";
|
|
2227
|
+
case CultureIDs.En_US: return "Minimize";
|
|
2228
|
+
case CultureIDs.Es_ES: return "Minimizar";
|
|
2229
|
+
case CultureIDs.Fr_FR: return "Minimiser";
|
|
2230
|
+
case CultureIDs.Pt_PT: return "Minimizar";
|
|
2231
|
+
default: return "Minimizza";
|
|
2232
|
+
}
|
|
2233
|
+
}
|
|
2214
2234
|
static get More() {
|
|
2215
2235
|
switch (this._cultureID) {
|
|
2216
2236
|
case CultureIDs.De_DE: return "andere";
|