@topconsultnpm/sdkui-react-beta 6.13.9 → 6.13.11
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.
- package/lib/components/base/TMPanel.d.ts +1 -0
- package/lib/components/base/TMPanel.js +43 -14
- package/lib/components/grids/TMRecentsManager.js +27 -23
- package/lib/components/viewers/TMTidViewer.d.ts +2 -1
- package/lib/components/viewers/TMTidViewer.js +2 -2
- package/lib/helper/SDKUI_Localizator.d.ts +2 -0
- package/lib/helper/SDKUI_Localizator.js +20 -0
- package/package.json +1 -1
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
2
|
+
import { useLayoutEffect, useRef, 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%;
|
|
@@ -16,10 +15,10 @@ const StyledPanelContainer = styled.div `
|
|
|
16
15
|
position: ${({ $isMaximized }) => $isMaximized ? 'fixed' : 'relative'};
|
|
17
16
|
top: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
|
|
18
17
|
left: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
|
|
19
|
-
width: ${({ $isMaximized }) => $isMaximized ? 'calc(100vw -
|
|
20
|
-
height: ${({ $isMaximized }) => $isMaximized ? 'calc(100vh -
|
|
18
|
+
width: ${({ $isMaximized }) => $isMaximized ? 'calc(100vw - 90px)' : '100%'};
|
|
19
|
+
height: ${({ $isMaximized }) => $isMaximized ? 'calc(100vh - 90px)' : '100%'};
|
|
21
20
|
z-index: ${({ $isMaximized }) => $isMaximized ? 2000 : 'auto'};
|
|
22
|
-
|
|
21
|
+
margin: ${({ $isMaximized }) => $isMaximized ? '20px' : '0'};
|
|
23
22
|
/* transition: all 0.2s; */
|
|
24
23
|
`;
|
|
25
24
|
const StyledPanelHeader = styled.div `
|
|
@@ -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,44 @@ 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
|
+
const [minWidth, setMinWidth] = useState(undefined);
|
|
76
|
+
const titleRowRef = useRef(null);
|
|
77
|
+
useLayoutEffect(() => {
|
|
78
|
+
if (titleRowRef.current) {
|
|
79
|
+
setMinWidth(titleRowRef.current.offsetWidth);
|
|
80
|
+
}
|
|
81
|
+
}, [title, displayedItemsCount, totalItems, onBack]);
|
|
82
|
+
return (_jsxs(StyledPanelContainer, { "$isMaximized": isMaximized, style: minWidth ? { minWidth } : undefined, children: [showHeader &&
|
|
59
83
|
_jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": isActive, onDoubleClick: () => { if (onHeaderDoubleClick)
|
|
60
|
-
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(
|
|
84
|
+
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", { ref: titleRowRef, style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px' }, children: [onBack &&
|
|
85
|
+
_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", { style: {
|
|
86
|
+
whiteSpace: 'nowrap',
|
|
87
|
+
overflow: 'hidden',
|
|
88
|
+
textOverflow: 'ellipsis',
|
|
89
|
+
margin: 0
|
|
90
|
+
}, children: [title, isPositiveNumber(displayedItemsCount) && isPositiveNumber(totalItems)
|
|
62
91
|
? ` (${displayedItemsCount} / ${totalItems})`
|
|
63
92
|
: isPositiveNumber(totalItems)
|
|
64
93
|
? ` (${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, {
|
|
94
|
+
: ''] }) })] }), _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
|
|
95
|
+
? _jsx(IconWindowMinimize, { fontSize: 16 })
|
|
96
|
+
: _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: () => { setIsMaximized(false); 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
97
|
_jsx(TMRightSidebar, { items: items, onItemClick: onItemClick, selectedItem: selectedItem, showPanel: showPanel })] })] }));
|
|
69
98
|
};
|
|
70
99
|
export default TMPanel;
|
|
@@ -4,42 +4,46 @@ import { useState } from 'react';
|
|
|
4
4
|
import ReactDOMServer from 'react-dom/server';
|
|
5
5
|
import { DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts-beta';
|
|
6
6
|
import ContextMenu from 'devextreme-react/cjs/context-menu';
|
|
7
|
-
import { IconDelete,
|
|
7
|
+
import { IconDelete, SDKUI_Localizator, IconApply } from '../../helper';
|
|
8
8
|
import { TMColors } from '../../utils/theme';
|
|
9
|
-
import { StyledBadge } from '../base/Styled';
|
|
10
9
|
import { DeviceType } from '../base/TMDeviceProvider';
|
|
11
10
|
import { TMDcmtTypeChooserForm } from '../choosers/TMDcmtTypeChooser';
|
|
12
11
|
import TMTidViewer from '../viewers/TMTidViewer';
|
|
13
|
-
const
|
|
12
|
+
const StyledRecentTidItem = styled.div `
|
|
14
13
|
display: flex;
|
|
15
|
-
flex-direction:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
width: 100%;
|
|
20
|
-
height: 40px;
|
|
21
|
-
padding: 3px;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
align-items: stretch;
|
|
16
|
+
min-width: 0;
|
|
17
|
+
padding: 10px;
|
|
22
18
|
position: relative;
|
|
23
|
-
white-space: nowrap;
|
|
24
|
-
text-overflow: ellipsis;
|
|
25
|
-
|
|
26
19
|
&:hover {
|
|
27
|
-
background: ${(props) => props.$hoverColor ?? undefined};
|
|
28
20
|
cursor: pointer;
|
|
29
21
|
}
|
|
30
22
|
`;
|
|
23
|
+
const StyledPipe = styled.div `
|
|
24
|
+
width: 90%;
|
|
25
|
+
height: 1px;
|
|
26
|
+
background: #00A99D;
|
|
27
|
+
margin: 4px auto;
|
|
28
|
+
`;
|
|
31
29
|
const iconDelete = () => ReactDOMServer.renderToString(_jsx(IconDelete, {}));
|
|
32
30
|
const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, onDeletedTID }) => {
|
|
33
31
|
const [showDcmtTypeChooser, setShowDcmtTypeChooser] = useState(false);
|
|
34
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column
|
|
35
|
-
return (_jsxs(
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
32
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px' }, children: [_jsxs(StyledRecentTidItem, { id: `tid-${0}`, onClick: () => { setShowDcmtTypeChooser(true); }, children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: { color: TMColors.primaryColor, fontSize: '1rem', fontWeight: 600, textOverflow: 'ellipsis' }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true)})` }) }), _jsx(StyledPipe, {})] }, 0), mruTIDs.map((tid) => {
|
|
33
|
+
return (_jsxs(StyledRecentTidItem, { id: `tid-${tid}`, onClick: () => { onSelectedTID?.(tid); }, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TMTidViewer, { tid: tid, color: TMColors.primaryColor }) }), _jsx(StyledPipe, {}), _jsx(ContextMenu, { dataSource: [{ text: SDKUI_Localizator.Remove, icon: iconDelete(), }], target: `#tid-${tid}`, onItemClick: () => { onDeletedTID?.(tid); } }), currentMruTID == tid &&
|
|
34
|
+
_jsx("div", { style: {
|
|
35
|
+
width: '24px',
|
|
36
|
+
height: '24px',
|
|
37
|
+
borderRadius: '24px',
|
|
38
|
+
position: 'absolute',
|
|
39
|
+
top: '5px',
|
|
40
|
+
right: '0px',
|
|
41
|
+
display: 'flex',
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
justifyContent: 'center',
|
|
44
|
+
fontSize: '1rem',
|
|
45
|
+
fontWeight: 'bold'
|
|
46
|
+
}, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }, tid));
|
|
43
47
|
})] }), showDcmtTypeChooser && _jsx(TMDcmtTypeChooserForm, { onClose: () => setShowDcmtTypeChooser(false), onChoose: (tids) => { onSelectedTID?.(tids?.[0] ?? 0); } })] }));
|
|
44
48
|
};
|
|
45
49
|
export default TMRecentsManager;
|
|
@@ -241,9 +241,10 @@ interface ITMDcmtTypeTooltip {
|
|
|
241
241
|
children?: React.ReactNode;
|
|
242
242
|
}
|
|
243
243
|
export declare const TMDcmtTypeTooltip: React.FC<ITMDcmtTypeTooltip>;
|
|
244
|
-
declare const TMTidViewer: ({ tmSession, tid, showIcon, showId, noneSelectionText }: {
|
|
244
|
+
declare const TMTidViewer: ({ tmSession, tid, showIcon, color, showId, noneSelectionText }: {
|
|
245
245
|
tmSession?: ITopMediaSession;
|
|
246
246
|
tid?: number;
|
|
247
|
+
color?: string;
|
|
247
248
|
showIcon?: boolean;
|
|
248
249
|
showId?: boolean;
|
|
249
250
|
noneSelectionText?: string;
|
|
@@ -266,7 +266,7 @@ export const TMDcmtTypeTooltip = ({ dtd, children }) => {
|
|
|
266
266
|
};
|
|
267
267
|
return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { content: renderTooltipContent(dtd), children: children }) }));
|
|
268
268
|
};
|
|
269
|
-
const TMTidViewer = ({ tmSession, tid, showIcon = false, showId = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
|
|
269
|
+
const TMTidViewer = ({ tmSession, tid, showIcon = false, color, showId = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
|
|
270
270
|
const [dtd, setDtd] = useState();
|
|
271
271
|
useEffect(() => {
|
|
272
272
|
if (!tid || tid <= 0) {
|
|
@@ -294,7 +294,7 @@ const TMTidViewer = ({ tmSession, tid, showIcon = false, showId = false, noneSel
|
|
|
294
294
|
}, children: [showIcon && dtd && _jsx(TMDcmtTypeIcon, { dtd: dtd }), _jsx("p", { title: displayName(), style: {
|
|
295
295
|
textAlign: 'left',
|
|
296
296
|
marginLeft: showIcon ? '5px' : '',
|
|
297
|
-
color: dtd?.isView ? 'red' : '',
|
|
297
|
+
color: color ?? (dtd?.isView ? 'red' : ''),
|
|
298
298
|
whiteSpace: 'nowrap',
|
|
299
299
|
overflow: 'hidden',
|
|
300
300
|
textOverflow: 'ellipsis'
|
|
@@ -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";
|