@topconsultnpm/sdkui-react-beta 6.13.10 → 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.
|
@@ -1,5 +1,5 @@
|
|
|
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
5
|
import { IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
|
|
@@ -15,10 +15,10 @@ const StyledPanelContainer = styled.div `
|
|
|
15
15
|
position: ${({ $isMaximized }) => $isMaximized ? 'fixed' : 'relative'};
|
|
16
16
|
top: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
|
|
17
17
|
left: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
|
|
18
|
-
width: ${({ $isMaximized }) => $isMaximized ? 'calc(100vw -
|
|
19
|
-
height: ${({ $isMaximized }) => $isMaximized ? 'calc(100vh -
|
|
18
|
+
width: ${({ $isMaximized }) => $isMaximized ? 'calc(100vw - 90px)' : '100%'};
|
|
19
|
+
height: ${({ $isMaximized }) => $isMaximized ? 'calc(100vh - 90px)' : '100%'};
|
|
20
20
|
z-index: ${({ $isMaximized }) => $isMaximized ? 2000 : 'auto'};
|
|
21
|
-
|
|
21
|
+
margin: ${({ $isMaximized }) => $isMaximized ? '20px' : '0'};
|
|
22
22
|
/* transition: all 0.2s; */
|
|
23
23
|
`;
|
|
24
24
|
const StyledPanelHeader = styled.div `
|
|
@@ -72,16 +72,28 @@ const StyledInnerPanelDiv = styled.div `
|
|
|
72
72
|
const TMPanel = ({ allowMaximize = true, items = [], onItemClick, selectedItem, showPanel, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', onBack, onClose, onHeaderDoubleClick }) => {
|
|
73
73
|
const [isActive, setIsActive] = useState(false);
|
|
74
74
|
const [isMaximized, setIsMaximized] = useState(false);
|
|
75
|
-
|
|
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 &&
|
|
76
83
|
_jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": isActive, onDoubleClick: () => { if (onHeaderDoubleClick)
|
|
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 &&
|
|
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", {
|
|
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)
|
|
79
91
|
? ` (${displayedItemsCount} / ${totalItems})`
|
|
80
92
|
: isPositiveNumber(totalItems)
|
|
81
93
|
? ` (${totalItems})`
|
|
82
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
|
|
83
95
|
? _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 &&
|
|
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 &&
|
|
85
97
|
_jsx(TMRightSidebar, { items: items, onItemClick: onItemClick, selectedItem: selectedItem, showPanel: showPanel })] })] }));
|
|
86
98
|
};
|
|
87
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'
|