@topconsultnpm/sdkui-react-beta 6.8.67 → 6.8.69
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/assets/icomoon.svg +96 -96
- package/lib/components/base/Styled.d.ts +1920 -23
- package/lib/components/base/TMAlert.d.ts +3 -2
- package/lib/components/base/TMContextMenuOLD.d.ts +274 -3
- package/lib/components/base/TMDropDownMenu.d.ts +1 -0
- package/lib/components/base/TMEditorBase.d.ts +1 -0
- package/lib/components/base/TMLayout.d.ts +32 -32
- package/lib/components/base/TMRightSidebar.d.ts +4 -4
- package/lib/components/base/TMTab.d.ts +4 -4
- package/lib/components/base/TMVilViewer.d.ts +1 -1
- package/lib/components/choosers/TMRelationChooser.d.ts +5 -5
- package/lib/components/choosers/TMUserChooser.d.ts +5 -5
- package/lib/components/editors/TMEditorStyled.d.ts +22 -21
- package/lib/components/forms/TMLoginForm.d.ts +5 -5
- package/lib/components/forms/TMLoginPopupSaveLoginInfo.js +2 -3
- package/lib/components/query/TMQueryEditor.d.ts +550 -8
- package/lib/components/query/TMQueryResult.d.ts +5 -5
- package/lib/components/query/TMQueryResultForm.d.ts +10 -10
- package/lib/components/sidebar/TMHeader.d.ts +2 -2
- package/lib/components/sidebar/TMHeader.js +1 -9
- package/lib/components/viewers/TMDataListItemViewer.d.ts +3 -3
- package/lib/components/viewers/TMMidViewer.d.ts +5 -5
- package/lib/components/viewers/TMTidViewer.d.ts +5 -5
- package/lib/helper/helpers.d.ts +1 -1
- package/lib/hooks/useForm.d.ts +1 -0
- package/lib/hooks/useOutsideClick.d.ts +1 -0
- package/lib/hooks/useQueryParametersDialog.d.ts +1 -0
- package/package.json +1 -1
|
@@ -6,7 +6,6 @@ import styled from 'styled-components';
|
|
|
6
6
|
import { SDK_Globals, AuthenticationModes } from '@topconsultnpm/sdk-ts-beta';
|
|
7
7
|
import { FontSize, TMColors } from '../../utils/theme';
|
|
8
8
|
import { ButtonNames, TMMessageBoxManager } from '../base/TMPopUp';
|
|
9
|
-
import Logo from '../../assets/Toppy-generico.png';
|
|
10
9
|
import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
|
|
11
10
|
import { TMAboutApp } from './TMAboutApp';
|
|
12
11
|
export var TMSearchContext;
|
|
@@ -24,11 +23,6 @@ const StyledMenuItem = styled.p ` font-size: ${props => props.$fontSize}; displa
|
|
|
24
23
|
const StyledHeaderIcon = styled.div ` width: 50px; height: 50px; margin-left: 10px; display: flex; align-items: center; justify-content: center; color: ${props => props.$isSelected ? '#135596' : '#ffffff'}; transition: color ease 100ms; background-color: ${props => props.$isSelected && '#ffffff'}; cursor: pointer; &:hover { color: #ffffff; background-color: #0d3862; transition: color ease 100ms; } `;
|
|
25
24
|
const StyledSearchBarContainer = styled.div ` position: relative; height:30px; width: 100%; max-width: ${props => props.$isMobile ? '65%' : '650px'}; margin-left: ${props => props.$isMobile ? '10px' : '50px'}; `;
|
|
26
25
|
const StyledSearchBar = styled.input ` background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #dbdbdb; border-radius: 5px; padding: 5px 30px; width:100%; transition: 100ms linear; &:focus{ outline: none; border-bottom: 2px solid ${TMColors.primary}; } `;
|
|
27
|
-
const StyledChatBotWrapper = styled.div ` `;
|
|
28
|
-
const StyledChatBotcloseButton = styled.div ` cursor: pointer; font-size: 16px; color: white; width: 299px; height: 20px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding: 5px; background-color: orange; `;
|
|
29
|
-
const StyledChaBotBtnWrapper = styled.div ` position: relative; cursor: pointer; display: flex; flex-direction: row; padding: 0 10px; width: 150px; height: 30px; border-radius: 10px; justify-content: flex-end; background-color: orange;align-items: center; gap: 5px; `;
|
|
30
|
-
const StyledChatBotToppyContainer = styled.div ` background-color: orange; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50px; position: absolute; left: -10px; `;
|
|
31
|
-
const StyledToppyImage = styled.div ` display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50px; overflow: hidden; background-color: white; `;
|
|
32
26
|
export const TMSearchBar = ({ searchValue, onSearchValueChanged, maxWidth, marginLeft }) => {
|
|
33
27
|
const deviceType = useDeviceType();
|
|
34
28
|
return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : deviceType === DeviceType.MOBILE ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : deviceType === DeviceType.MOBILE ? '10px' : '50px' }, "$isMobile": deviceType === DeviceType.MOBILE, children: [_jsx(IconSearch, { fontSize: 12, color: '#00000060', style: { position: 'absolute', width: '20px', height: '20px', left: '5px', top: '5px', zIndex: 1 } }), _jsx(StyledSearchBar, { placeholder: SDKUI_Localizator.Search + '...', type: "text", value: searchValue, onChange: (e) => onSearchValueChanged(e.target.value) }), searchValue.length > 0 && _jsx(IconCloseOutline, { onClick: () => onSearchValueChanged(''), color: '#00000060', style: { cursor: 'pointer', position: 'absolute', width: '20px', height: '20px', right: '5px', top: '5px', zIndex: 1 } })] }));
|
|
@@ -41,7 +35,6 @@ const TMHeader = ({ showSearchBar = true, clearSearchJobValue, clearSearchQEValu
|
|
|
41
35
|
const [searchProcessMonitorValue, setSearchProcessMonitorValue] = useState('');
|
|
42
36
|
const [searchPlatformValue, setSearchPlatformValue] = useState('');
|
|
43
37
|
const [searchQEValue, setSearchQEValue] = useState('');
|
|
44
|
-
const [isChatbot, setIsChatbot] = useState(false);
|
|
45
38
|
const menuRef = useRef(null);
|
|
46
39
|
const userIcon = useRef(null);
|
|
47
40
|
const deviceType = useDeviceType();
|
|
@@ -81,7 +74,6 @@ const TMHeader = ({ showSearchBar = true, clearSearchJobValue, clearSearchQEValu
|
|
|
81
74
|
document.addEventListener('click', handleClickOutside);
|
|
82
75
|
return () => document.removeEventListener('click', handleClickOutside);
|
|
83
76
|
}, [menuRef, userIcon, menuStatus]);
|
|
84
|
-
return (_jsxs(StyledHeaderContainer, { "$appName": SDK_Globals.appModule, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', width: '100%' }, children: [_jsx("div", { style: { width: '50px', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("img", { src: six, height: 30, alt: "" }) }), !isMobile && _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', gap: '1px', fontSize: '14px' }, children: [_jsx("div", { style: { userSelect: 'none', color: '#135596' }, children: "TopMedia" }), _jsx("div", { style: { userSelect: 'none', color: '#135596' }, children: SDK_Globals.appModule })] }), showSearchBar && _jsxs(_Fragment, { children: [searchContext === TMSearchContext.JOBS_LIST && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobListValue(e), searchValue: searchJobListValue }), searchContext === TMSearchContext.JOBS && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobsValue(e), searchValue: searchJobsValue }), searchContext === TMSearchContext.PROCESSES && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessesValue(e), searchValue: searchProcessesValue }), searchContext === TMSearchContext.PROCESS_MONITOR && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessMonitorValue(e), searchValue: searchProcessMonitorValue }), searchContext === TMSearchContext.PLATFORM && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchPlatformValue(e), searchValue: searchPlatformValue }), searchContext === TMSearchContext.QE && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchQEValue(e), searchValue: searchQEValue })] })] }), _jsxs(
|
|
85
|
-
_jsxs("div", { style: { position: 'fixed', top: '50px', right: isMobile ? '5px' : '100px', zIndex: 1000000000 }, children: [_jsx(StyledChatBotcloseButton, { onClick: () => setIsChatbot(false), children: _jsx(IconCloseOutline, { color: 'white' }) }), _jsx("iframe", { allow: "microphone;", width: "300", height: "400", src: "https://console.dialogflow.com/api-client/demo/embedded/ee1ed045-bbf6-4740-8f2c-314cbc857dd8" })] }), _jsxs(StyledChaBotBtnWrapper, { style: { width: isMobile ? '0' : '150px', backgroundColor: isMobile ? 'transparent' : 'orange' }, onClick: () => setIsChatbot(true), children: [_jsxs(StyledChatBotToppyContainer, { style: { backgroundColor: isMobile ? 'transparent' : 'orange' }, children: [" ", _jsx(StyledToppyImage, { children: _jsx("img", { style: { cursor: 'pointer', transform: 'translateY(3px)' }, src: Logo, width: 20, alt: '', onClick: () => setIsChatbot(true) }) }), " "] }), !isMobile && _jsx("p", { style: { color: 'white', fontWeight: 'bold' }, children: "Chiedimi qualcosa" })] })] }), _jsxs(StyledHeaderIcon, { onClick: () => onSettingsClick?.(), children: [" ", _jsx(IconSettings, { fontSize: 20 }), " "] }), _jsxs(StyledHeaderIcon, { "$isSelected": menuStatus, ref: userIcon, onClick: () => setMenuStatus(!menuStatus), children: [" ", _jsx(IconUserProfile, { fontSize: 20 }), " "] }), menuStatus && _jsxs(StyledMenu, { ref: menuRef, children: [SDK_Globals.tmSession?.SessionDescr?.authenticationMode === AuthenticationModes.TopMedia && _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onChangePassword && onChangePassword(); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconPassword, {}) }), " ", _jsx("span", { children: SDKUI_Localizator.ChangePassword }), " "] }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onLogout && onLogout(); }, children: [_jsx("span", { children: _jsx(IconLogout, {}) }), " ", _jsx("span", { children: "Logout" }), " "] }), _jsx("div", { style: { width: '100%', height: '1px', backgroundColor: 'gray' } }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); TMMessageBoxManager.show({ buttons: [ButtonNames.OK], title: `About. ${SDK_Globals.appModule}`, message: _jsx(TMAboutApp, { app: true, skdui: true, sdk: true, websdk: true }) }); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconBxInfo, {}) }), " ", _jsx("span", { children: "About" }), " "] })] })] }));
|
|
77
|
+
return (_jsxs(StyledHeaderContainer, { "$appName": SDK_Globals.appModule, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', width: '100%' }, children: [_jsx("div", { style: { width: '50px', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("img", { src: six, height: 30, alt: "" }) }), !isMobile && _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', gap: '1px', fontSize: '14px' }, children: [_jsx("div", { style: { userSelect: 'none', color: '#135596' }, children: "TopMedia" }), _jsx("div", { style: { userSelect: 'none', color: '#135596' }, children: SDK_Globals.appModule })] }), showSearchBar && _jsxs(_Fragment, { children: [searchContext === TMSearchContext.JOBS_LIST && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobListValue(e), searchValue: searchJobListValue }), searchContext === TMSearchContext.JOBS && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobsValue(e), searchValue: searchJobsValue }), searchContext === TMSearchContext.PROCESSES && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessesValue(e), searchValue: searchProcessesValue }), searchContext === TMSearchContext.PROCESS_MONITOR && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessMonitorValue(e), searchValue: searchProcessMonitorValue }), searchContext === TMSearchContext.PLATFORM && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchPlatformValue(e), searchValue: searchPlatformValue }), searchContext === TMSearchContext.QE && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchQEValue(e), searchValue: searchQEValue })] })] }), _jsxs(StyledHeaderIcon, { onClick: () => onSettingsClick?.(), children: [" ", _jsx(IconSettings, { fontSize: 20 }), " "] }), _jsxs(StyledHeaderIcon, { "$isSelected": menuStatus, ref: userIcon, onClick: () => setMenuStatus(!menuStatus), children: [" ", _jsx(IconUserProfile, { fontSize: 20 }), " "] }), menuStatus && _jsxs(StyledMenu, { ref: menuRef, children: [SDK_Globals.tmSession?.SessionDescr?.authenticationMode === AuthenticationModes.TopMedia && _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onChangePassword && onChangePassword(); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconPassword, {}) }), " ", _jsx("span", { children: SDKUI_Localizator.ChangePassword }), " "] }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onLogout && onLogout(); }, children: [_jsx("span", { children: _jsx(IconLogout, {}) }), " ", _jsx("span", { children: "Logout" }), " "] }), _jsx("div", { style: { width: '100%', height: '1px', backgroundColor: 'gray' } }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); TMMessageBoxManager.show({ buttons: [ButtonNames.OK], title: `About. ${SDK_Globals.appModule}`, message: _jsx(TMAboutApp, { app: true, skdui: true, sdk: true, websdk: true }) }); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconBxInfo, {}) }), " ", _jsx("span", { children: "About" }), " "] })] })] }));
|
|
86
78
|
};
|
|
87
79
|
export default TMHeader;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { DataListViewModes } from '@topconsultnpm/sdk-ts-beta';
|
|
2
2
|
import { DataGridTypes } from 'devextreme-react/cjs/data-grid';
|
|
3
3
|
declare const TMDataListItemViewer: ({ dataListId, value, viewMode }: {
|
|
4
|
-
dataListId?: number;
|
|
5
|
-
value?: string;
|
|
6
|
-
viewMode?: DataListViewModes;
|
|
4
|
+
dataListId?: number | undefined;
|
|
5
|
+
value?: string | undefined;
|
|
6
|
+
viewMode?: DataListViewModes | undefined;
|
|
7
7
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export default TMDataListItemViewer;
|
|
9
9
|
export declare const cellRenderDataListItem: (data: DataGridTypes.ColumnCellTemplateData, dataListId?: number, viewMode?: DataListViewModes) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -3,12 +3,12 @@ import { ITopMediaSession, LayoutModes, MetadataDescriptor } from '@topconsultnp
|
|
|
3
3
|
import { TID_MID } from '../../ts';
|
|
4
4
|
import { DataGridTypes } from 'devextreme-react/cjs/data-grid';
|
|
5
5
|
export declare const TMMidViewer: ({ tmSession, tid_mid, showCompleteName, showIcon, showId, noneSelectionText }: {
|
|
6
|
-
tmSession?: ITopMediaSession;
|
|
6
|
+
tmSession?: ITopMediaSession | undefined;
|
|
7
7
|
tid_mid: TID_MID | undefined;
|
|
8
|
-
showCompleteName?: boolean;
|
|
9
|
-
showIcon?: boolean;
|
|
10
|
-
showId?: boolean;
|
|
11
|
-
noneSelectionText?: string;
|
|
8
|
+
showCompleteName?: boolean | undefined;
|
|
9
|
+
showIcon?: boolean | undefined;
|
|
10
|
+
showId?: boolean | undefined;
|
|
11
|
+
noneSelectionText?: string | undefined;
|
|
12
12
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
13
13
|
interface ITMMetadataIcon {
|
|
14
14
|
tid: number | undefined;
|
|
@@ -11,11 +11,11 @@ interface ITMDcmtTypeTooltip {
|
|
|
11
11
|
}
|
|
12
12
|
export declare const TMDcmtTypeTooltip: React.FC<ITMDcmtTypeTooltip>;
|
|
13
13
|
declare const TMTidViewer: ({ tmSession, tid, showIcon, showId, noneSelectionText }: {
|
|
14
|
-
tmSession?: ITopMediaSession;
|
|
15
|
-
tid?: number;
|
|
16
|
-
showIcon?: boolean;
|
|
17
|
-
showId?: boolean;
|
|
18
|
-
noneSelectionText?: string;
|
|
14
|
+
tmSession?: ITopMediaSession | undefined;
|
|
15
|
+
tid?: number | undefined;
|
|
16
|
+
showIcon?: boolean | undefined;
|
|
17
|
+
showId?: boolean | undefined;
|
|
18
|
+
noneSelectionText?: string | undefined;
|
|
19
19
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
20
20
|
export default TMTidViewer;
|
|
21
21
|
export declare const cellRenderTID: (data: DataGridTypes.ColumnCellTemplateData, noneSelectionText?: string) => import("react/jsx-runtime").JSX.Element;
|
package/lib/helper/helpers.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import { AppModules, DataColumnDescriptor, ITopMediaSession, QueryDescriptor, Se
|
|
|
4
4
|
import { FormModes, moduleTypes } from "../ts";
|
|
5
5
|
declare const TABLET_WIDTH = 1024;
|
|
6
6
|
declare const MOBILE_WIDTH = 640;
|
|
7
|
-
declare const calcResponsiveDirection: (deviceType: DeviceType, desktopDir:
|
|
7
|
+
declare const calcResponsiveDirection: (deviceType: DeviceType, desktopDir: 'horizontal' | 'vertical', tabletDir: 'horizontal' | 'vertical', mobileDir: 'horizontal' | 'vertical') => 'horizontal' | 'vertical';
|
|
8
8
|
declare const openApps: (appModule: AppModules, tmSession: ITopMediaSession, appRoutes?: any[]) => Promise<void>;
|
|
9
9
|
export declare const setSDK_GlobalsInfoAsync: (tms: ITopMediaSession | undefined) => Promise<ITopMediaSession>;
|
|
10
10
|
declare const calcResponsiveSizes: (deviceType: DeviceType | undefined, desktopSize: string, tabletSize: string, mobileSize: string) => string;
|
package/lib/hooks/useForm.d.ts
CHANGED