@topconsultnpm/sdkui-react-beta 6.10.78 → 6.10.80
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/TMFileManager.d.ts +66 -0
- package/lib/components/base/TMFileManager.js +280 -0
- package/lib/helper/SDKUI_Localizator.d.ts +6 -0
- package/lib/helper/SDKUI_Localizator.js +60 -0
- package/lib/helper/TMIcons.d.ts +2 -1
- package/lib/helper/TMIcons.js +4 -1
- package/lib/helper/TMUtils.d.ts +2 -0
- package/lib/helper/TMUtils.js +97 -0
- package/lib/stories/TMIcons.stories.js +2 -2
- package/package.json +1 -1
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
export interface TMThumbnailsViewItemProps {
|
|
2
|
+
item: FileItem;
|
|
3
|
+
isSelected: boolean;
|
|
4
|
+
showId: boolean;
|
|
5
|
+
onClick: (id: number) => void;
|
|
6
|
+
onDoubleClick?: (file: FileItem) => void;
|
|
7
|
+
handleSelectedFiles?: (fileItems: Array<FileItem>) => void;
|
|
8
|
+
handleFocusedFile?: (fileItem: FileItem | undefined) => void;
|
|
9
|
+
}
|
|
10
|
+
export interface TMFileManagerContextMenuItem {
|
|
11
|
+
text: string;
|
|
12
|
+
icon: string;
|
|
13
|
+
onClick?: (param?: any) => void;
|
|
14
|
+
operationType?: 'singleRow' | 'multiRow';
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
id?: string;
|
|
17
|
+
items?: Array<TMFileManagerContextMenuItem>;
|
|
18
|
+
beginGroup?: boolean;
|
|
19
|
+
}
|
|
20
|
+
export interface FileItem {
|
|
21
|
+
id: number;
|
|
22
|
+
name: string;
|
|
23
|
+
isDirectory: boolean;
|
|
24
|
+
items: Array<FileItem>;
|
|
25
|
+
tid?: number;
|
|
26
|
+
did?: number;
|
|
27
|
+
ext?: string;
|
|
28
|
+
creationTime?: Date;
|
|
29
|
+
lastUpdateTime?: Date;
|
|
30
|
+
description?: string;
|
|
31
|
+
checkOutUserID?: number;
|
|
32
|
+
checkoutDate?: Date | null;
|
|
33
|
+
size?: number;
|
|
34
|
+
version?: number;
|
|
35
|
+
}
|
|
36
|
+
export declare enum TMFileManagerPageSize {
|
|
37
|
+
Small = 30,
|
|
38
|
+
Medium = 50,
|
|
39
|
+
Large = 100
|
|
40
|
+
}
|
|
41
|
+
interface TMFileManagerProps<T> {
|
|
42
|
+
/** Determines the view mode of the file manager (Can be either 'thumbnails' or 'details') */
|
|
43
|
+
viewMode?: 'thumbnails' | 'details';
|
|
44
|
+
/** Represents the file system tree structure */
|
|
45
|
+
treeFs: FileItem;
|
|
46
|
+
/** Context menu items for both folders and files */
|
|
47
|
+
contextMenuItems?: {
|
|
48
|
+
folder: Array<TMFileManagerContextMenuItem>;
|
|
49
|
+
file: Array<TMFileManagerContextMenuItem>;
|
|
50
|
+
};
|
|
51
|
+
/** Array of selected files */
|
|
52
|
+
selectedFiles?: Array<FileItem>;
|
|
53
|
+
/** The currently focused file */
|
|
54
|
+
focusedFile?: FileItem;
|
|
55
|
+
/** Callback to handle folder selection changes */
|
|
56
|
+
handleSelectedFolder?: (folderItem: FileItem | undefined) => void;
|
|
57
|
+
/** Callback to handle file selection changes */
|
|
58
|
+
handleSelectedFiles?: (fileItem: Array<FileItem>) => void;
|
|
59
|
+
/** Callback to handle changes in the focused file */
|
|
60
|
+
handleFocusedFile?: (fileItem: FileItem | undefined) => void;
|
|
61
|
+
/** Callback for handling double-click events on a file */
|
|
62
|
+
onDoubleClickHandler?: (fileItem: FileItem | undefined) => void;
|
|
63
|
+
thumbnailsViewItemComponent?: (props: TMThumbnailsViewItemProps) => JSX.Element;
|
|
64
|
+
}
|
|
65
|
+
declare const TMFileManager: <T>(props: TMFileManagerProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
66
|
+
export default TMFileManager;
|
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
3
|
+
import Toolbar, { Item as ToolbarItem } from 'devextreme-react/cjs/toolbar';
|
|
4
|
+
import TreeView from 'devextreme-react/cjs/tree-view';
|
|
5
|
+
import ScrollView from 'devextreme-react/cjs/scroll-view';
|
|
6
|
+
import { ContextMenu, Pagination } from 'devextreme-react';
|
|
7
|
+
import { IconFolder, SDKUI_Localizator, IconHide, IconShow, IconDashboard, IconList, SDKUI_Globals } from '../../helper';
|
|
8
|
+
import { TMSearchBar } from '../sidebar/TMHeader';
|
|
9
|
+
import TMButton from './TMButton';
|
|
10
|
+
import TMDataGrid from './TMDataGrid';
|
|
11
|
+
import { TMSplitterLayout } from './TMLayout';
|
|
12
|
+
import { formatBytes, getFileIcon } from '../../helper/TMUtils';
|
|
13
|
+
export var TMFileManagerPageSize;
|
|
14
|
+
(function (TMFileManagerPageSize) {
|
|
15
|
+
TMFileManagerPageSize[TMFileManagerPageSize["Small"] = 30] = "Small";
|
|
16
|
+
TMFileManagerPageSize[TMFileManagerPageSize["Medium"] = 50] = "Medium";
|
|
17
|
+
TMFileManagerPageSize[TMFileManagerPageSize["Large"] = 100] = "Large";
|
|
18
|
+
})(TMFileManagerPageSize || (TMFileManagerPageSize = {}));
|
|
19
|
+
const TMFileManager = (props) => {
|
|
20
|
+
// Destructure the treeFs prop to get the root file system
|
|
21
|
+
const { treeFs, selectedFiles, focusedFile, handleSelectedFiles, handleFocusedFile, handleSelectedFolder, viewMode: initialViewMode, contextMenuItems, onDoubleClickHandler, thumbnailsViewItemComponent } = props;
|
|
22
|
+
// State to manage the current view mode ('thumbnails' or 'details')
|
|
23
|
+
const [viewMode, setViewMode] = useState(initialViewMode ?? 'thumbnails');
|
|
24
|
+
// State to store the search text entered by the user
|
|
25
|
+
const [searchText, setSearchText] = useState('');
|
|
26
|
+
// State to store the filtered file items after search or filtering
|
|
27
|
+
const [filteredItems, setFilteredItems] = useState([]);
|
|
28
|
+
// State to store transformed directory data for file manager
|
|
29
|
+
const [fileManagerData, setFileManagerData] = useState([]);
|
|
30
|
+
// State to store the currently selected file item
|
|
31
|
+
const [selectedFileItem, setSelectedFileItem] = useState(undefined);
|
|
32
|
+
// State to control the collapse/expand of the left panel
|
|
33
|
+
const [isLeftPanelCollapsed, setIsLeftPanelCollapsed] = useState(false);
|
|
34
|
+
// State to store the files that are dropped into the file manager
|
|
35
|
+
const [droppedFiles, setDroppedFiles] = useState([]);
|
|
36
|
+
// State to track whether a file drag operation is in progress
|
|
37
|
+
const [isDragging, setIsDragging] = useState(false);
|
|
38
|
+
// State to store context menu items for file manager actions
|
|
39
|
+
const [menuItems, setMenuItems] = useState([]);
|
|
40
|
+
// State to manage the anchor element for context menu positioning
|
|
41
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
42
|
+
// Effect to initialize the context menu items when the component mounts or contextMenuItems change
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
if (contextMenuItems)
|
|
45
|
+
setMenuItems(contextMenuItems?.file);
|
|
46
|
+
}, [contextMenuItems]);
|
|
47
|
+
const onTreeViewContextMenu = (event) => {
|
|
48
|
+
if (event === undefined)
|
|
49
|
+
return;
|
|
50
|
+
event.preventDefault();
|
|
51
|
+
setAnchorEl(event.currentTarget);
|
|
52
|
+
const items = contextMenuItems ?? { folder: [], file: [] };
|
|
53
|
+
setMenuItems(items.folder);
|
|
54
|
+
};
|
|
55
|
+
const onViewContextMenu = (event) => {
|
|
56
|
+
if (event === undefined)
|
|
57
|
+
return;
|
|
58
|
+
event.preventDefault();
|
|
59
|
+
setAnchorEl(event.currentTarget);
|
|
60
|
+
const items = contextMenuItems ?? { folder: [], file: [] };
|
|
61
|
+
setMenuItems(items.file);
|
|
62
|
+
};
|
|
63
|
+
// Handle closing the context menu
|
|
64
|
+
const closeContextMenu = useCallback(() => {
|
|
65
|
+
setAnchorEl(null);
|
|
66
|
+
}, []);
|
|
67
|
+
// useEffect hook to transform the data whenever the treeFs prop changes
|
|
68
|
+
useEffect(() => {
|
|
69
|
+
let transformedData = [];
|
|
70
|
+
transformedData.push({ id: -1, text: treeFs.name, subFileFolderCount: treeFs.items.filter(item => !item.isDirectory).length, expanded: true, items: transformItems(treeFs.items) });
|
|
71
|
+
setFileManagerData(transformedData);
|
|
72
|
+
setIsLeftPanelCollapsed(false);
|
|
73
|
+
}, [treeFs]);
|
|
74
|
+
// Collects all text fields from a nested file manager directory structure.
|
|
75
|
+
const extractTextsFromDirectory = (directories) => {
|
|
76
|
+
const collectedTexts = [];
|
|
77
|
+
// Recursively traverses the directory structure and collects text fields.
|
|
78
|
+
const traverseDirectory = (directory) => {
|
|
79
|
+
if (directory.text !== undefined) {
|
|
80
|
+
collectedTexts.push(directory.text);
|
|
81
|
+
}
|
|
82
|
+
if (directory.items && Array.isArray(directory.items)) {
|
|
83
|
+
directory.items.forEach(traverseDirectory);
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
// Start traversal from the first directory if available.
|
|
87
|
+
if (directories.length > 0)
|
|
88
|
+
traverseDirectory(directories[0]);
|
|
89
|
+
return collectedTexts;
|
|
90
|
+
};
|
|
91
|
+
useEffect(() => {
|
|
92
|
+
const extractedTexts = extractTextsFromDirectory(fileManagerData);
|
|
93
|
+
// Reset the selected file item if its name is not found in the extracted texts.
|
|
94
|
+
if (selectedFileItem && !extractedTexts.includes(selectedFileItem.name)) {
|
|
95
|
+
setSelectedFileItem(undefined);
|
|
96
|
+
}
|
|
97
|
+
}, [fileManagerData]);
|
|
98
|
+
useEffect(() => {
|
|
99
|
+
// Filter items whenever searchText or selectedFileItem changes
|
|
100
|
+
const filterItems = () => {
|
|
101
|
+
const items = selectedFileItem?.items ?? [];
|
|
102
|
+
const filtered = items.filter(item => !item.isDirectory &&
|
|
103
|
+
((item.id?.toString()?.includes(searchText.toLowerCase())) ||
|
|
104
|
+
(item.name?.toLowerCase()?.includes(searchText.toLowerCase())) ||
|
|
105
|
+
(item.description?.toLowerCase()?.includes(searchText.toLowerCase())) ||
|
|
106
|
+
(item.ext?.toString().includes(searchText)) ||
|
|
107
|
+
(item.size?.toString().includes(searchText)) ||
|
|
108
|
+
(item.version?.toString().includes(searchText))));
|
|
109
|
+
setFilteredItems(filtered);
|
|
110
|
+
};
|
|
111
|
+
filterItems();
|
|
112
|
+
}, [searchText, selectedFileItem]);
|
|
113
|
+
// Function to recursively transform file items into directory format for TreeView
|
|
114
|
+
const transformItems = (items) => {
|
|
115
|
+
return items
|
|
116
|
+
.filter(item => item.isDirectory)
|
|
117
|
+
.map((item) => {
|
|
118
|
+
const el = {
|
|
119
|
+
id: item.id,
|
|
120
|
+
text: item.name,
|
|
121
|
+
expanded: true,
|
|
122
|
+
subFileFolderCount: item.items.filter(item => !item.isDirectory).length,
|
|
123
|
+
items: item.items && item.items.length > 0 ? transformItems(item.items) : [],
|
|
124
|
+
};
|
|
125
|
+
return el;
|
|
126
|
+
});
|
|
127
|
+
};
|
|
128
|
+
// Function to find a specific file or folder based on its ID (used for finding nested items)
|
|
129
|
+
const findFileItems = (items, folderId) => {
|
|
130
|
+
for (let item of items) {
|
|
131
|
+
if (item.id === folderId) {
|
|
132
|
+
return item; // Return the found item
|
|
133
|
+
}
|
|
134
|
+
// Recursively search in sub-items if any
|
|
135
|
+
if (item.items) {
|
|
136
|
+
const found = findFileItems(item.items, folderId);
|
|
137
|
+
if (found) {
|
|
138
|
+
return found; // Return the found item from recursive call
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
return undefined; // Return undefined if not found
|
|
143
|
+
};
|
|
144
|
+
// Render each TreeView item (directories) with custom styling/icons
|
|
145
|
+
const renderItem = (itemData) => {
|
|
146
|
+
const isSelected = selectedFileItem && selectedFileItem.id === itemData.id;
|
|
147
|
+
return (_jsxs("div", { style: { minWidth: '90px' }, className: isSelected ? 'treeview-selected-item-manager' : '', children: [_jsx(IconFolder, { style: { marginRight: 5, color: '#e6c200' } }), itemData.text, " (", itemData.subFileFolderCount, ")"] }));
|
|
148
|
+
};
|
|
149
|
+
// Function to handle item click event in the TreeView
|
|
150
|
+
const handleTreeViewItemClick = (e) => {
|
|
151
|
+
if (!e)
|
|
152
|
+
return;
|
|
153
|
+
const clickedItemId = e.itemData.id;
|
|
154
|
+
const item = clickedItemId === treeFs.id ? treeFs : findFileItems(treeFs.items, clickedItemId);
|
|
155
|
+
setSelectedFileItem(item);
|
|
156
|
+
handleSelectedFolder?.(item);
|
|
157
|
+
handleFocusedFile?.(undefined);
|
|
158
|
+
handleSelectedFiles?.([]);
|
|
159
|
+
};
|
|
160
|
+
// Update searchText state
|
|
161
|
+
const handleSearchChange = (value) => {
|
|
162
|
+
setSearchText(value);
|
|
163
|
+
};
|
|
164
|
+
const toggleViewMode = () => {
|
|
165
|
+
setViewMode((prevViewMode) => (prevViewMode === 'details' ? 'thumbnails' : 'details'));
|
|
166
|
+
};
|
|
167
|
+
// Handle the file drop
|
|
168
|
+
const handleDrop = (e) => {
|
|
169
|
+
e.preventDefault();
|
|
170
|
+
const files = Array.from(e.dataTransfer?.files || []);
|
|
171
|
+
setDroppedFiles(files);
|
|
172
|
+
setIsDragging(false);
|
|
173
|
+
// Build a single alert string
|
|
174
|
+
let alertMessage = 'Dropped Files Information:\n';
|
|
175
|
+
files.forEach((file) => {
|
|
176
|
+
const fileName = file.name; // Full file name
|
|
177
|
+
const fileParts = fileName.split('.');
|
|
178
|
+
const extension = fileParts.pop(); // Extract the last part as extension
|
|
179
|
+
const baseName = fileParts.join('.'); // Combine the remaining parts
|
|
180
|
+
alertMessage += `File: ${fileName}\nBase Name: ${baseName}\nExtension: ${extension}\n\n`;
|
|
181
|
+
});
|
|
182
|
+
alert(alertMessage); // Show a single alert with all file info
|
|
183
|
+
};
|
|
184
|
+
// Prevent default behavior (i.e., preventing the page from navigating)
|
|
185
|
+
const handleDragOver = (e) => {
|
|
186
|
+
e.preventDefault();
|
|
187
|
+
setIsDragging(true);
|
|
188
|
+
};
|
|
189
|
+
// Main render of the file manager component with a split layout
|
|
190
|
+
return _jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", width: "100%" }, children: [_jsx(Toolbar, { style: { backgroundColor: '#f4f4f4', border: '2px solid #ccc', borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)', height: "40px" }, children: _jsx(ToolbarItem, { location: "before", children: _jsx("div", { style: { paddingLeft: "5px", paddingRight: "5px" }, children: _jsx(TMButton, { caption: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel, btnStyle: 'toolbar', color: 'primaryOutline', icon: isLeftPanelCollapsed ? _jsx(IconHide, {}) : _jsx(IconShow, {}), onClick: () => setIsLeftPanelCollapsed(prev => !prev) }) }) }) }), _jsx("div", { style: {
|
|
191
|
+
display: "flex",
|
|
192
|
+
flexGrow: 1,
|
|
193
|
+
height: "calc(100% - 40px)"
|
|
194
|
+
}, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, { style: { marginTop: "10px" }, dataSource: fileManagerData, displayExpr: "text", itemRender: renderItem, onItemClick: handleTreeViewItemClick }), anchorEl && _jsx(ContextMenu, { dataSource: menuItems, target: anchorEl, onHiding: closeContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%" }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onContextMenu: onViewContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { items: filteredItems, selectedFiles: selectedFiles, contextMenuItems: contextMenuItems?.file, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, thumbnailsViewItemComponent: thumbnailsViewItemComponent }), viewMode === 'details' && _jsx(DetailsView, { items: filteredItems, contextMenuItems: contextMenuItems?.file, selectedFiles: selectedFiles, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), anchorEl && _jsx(ContextMenu, { dataSource: menuItems, target: anchorEl, onHiding: closeContextMenu })] })] })] }, "TMWGs-panels-treeView") })] });
|
|
195
|
+
};
|
|
196
|
+
export default TMFileManager;
|
|
197
|
+
const DetailsView = (props) => {
|
|
198
|
+
const { items, contextMenuItems, focusedFile, selectedFiles, handleFocusedFile, handleSelectedFiles, onDoubleClickHandler } = props;
|
|
199
|
+
const cellExtRender = (cellData) => {
|
|
200
|
+
const data = cellData.data;
|
|
201
|
+
return _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: getFileIcon(data.ext, data.version) });
|
|
202
|
+
};
|
|
203
|
+
// Handles selection change in the data grid
|
|
204
|
+
const onSelectionChanged = useCallback((e) => {
|
|
205
|
+
if (handleSelectedFiles) {
|
|
206
|
+
const selectedKeys = e.component.getSelectedRowsData() ?? [];
|
|
207
|
+
handleSelectedFiles(selectedKeys);
|
|
208
|
+
}
|
|
209
|
+
}, [handleSelectedFiles]);
|
|
210
|
+
// Handles focus change in the data grid
|
|
211
|
+
const onFocusedRowChanged = useCallback((e) => {
|
|
212
|
+
if (handleFocusedFile && e.row)
|
|
213
|
+
handleFocusedFile(e.row.data);
|
|
214
|
+
}, [handleFocusedFile]);
|
|
215
|
+
// Handler for double-click row event
|
|
216
|
+
const onRowDblClick = useCallback((e) => {
|
|
217
|
+
if (onDoubleClickHandler)
|
|
218
|
+
onDoubleClickHandler(e.data);
|
|
219
|
+
}, [onDoubleClickHandler]);
|
|
220
|
+
const onContextMenuPreparing = (e) => {
|
|
221
|
+
if (e === undefined)
|
|
222
|
+
return;
|
|
223
|
+
if (e.target === 'content') {
|
|
224
|
+
e.items = e.items || [];
|
|
225
|
+
e.items = contextMenuItems ? [...contextMenuItems] : [];
|
|
226
|
+
}
|
|
227
|
+
};
|
|
228
|
+
const cellDatetimeRender = useCallback((cellData) => {
|
|
229
|
+
const { value } = cellData;
|
|
230
|
+
const formattedDate = value ? new Date(value).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '';
|
|
231
|
+
return _jsx("div", { children: formattedDate });
|
|
232
|
+
}, []);
|
|
233
|
+
return (items && items.length > 0) ? (_jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: [
|
|
234
|
+
{ dataField: "id", caption: "ID", dataType: 'string', visible: false },
|
|
235
|
+
{ dataField: "ext", caption: SDKUI_Localizator.Extension, cellRender: cellExtRender },
|
|
236
|
+
{ dataField: "name", caption: SDKUI_Localizator.Name },
|
|
237
|
+
{ dataField: "version", caption: SDKUI_Localizator.Version },
|
|
238
|
+
{ dataField: "size", caption: SDKUI_Localizator.Size, cellRender: (cellData) => formatBytes(cellData.data.size ?? 0) },
|
|
239
|
+
{ dataField: "lastUpdateTime", caption: SDKUI_Localizator.LastUpdateTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
|
|
240
|
+
{ dataField: "creationTime", caption: SDKUI_Localizator.CreationTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
|
|
241
|
+
], focusedRowKey: focusedFile?.id, selectedRowKeys: selectedFiles?.map(file => file.id), onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, showRowLines: SDKUI_Globals.dataGridShowRowLines, showColumnLines: SDKUI_Globals.dataGridShowColumnLines })) : _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: SDKUI_Localizator.FolderIsEmpty });
|
|
242
|
+
};
|
|
243
|
+
const ThumbnailsView = (props) => {
|
|
244
|
+
const { items, selectedFiles, handleSelectedFiles, handleFocusedFile, onDoubleClickHandler, thumbnailsViewItemComponent } = props;
|
|
245
|
+
const PAGE_SIZES = [TMFileManagerPageSize.Small, TMFileManagerPageSize.Medium, TMFileManagerPageSize.Large];
|
|
246
|
+
const initPageSize = TMFileManagerPageSize.Small;
|
|
247
|
+
const showPagination = (items?.length ?? 0) > initPageSize;
|
|
248
|
+
const [pageSize, setPageSize] = useState(TMFileManagerPageSize.Small);
|
|
249
|
+
const [pageIndex, setPageIndex] = useState(1);
|
|
250
|
+
const [paginatedItems, setPaginatedItems] = useState([]);
|
|
251
|
+
useEffect(() => {
|
|
252
|
+
if (handleSelectedFiles)
|
|
253
|
+
handleSelectedFiles([]);
|
|
254
|
+
}, [items]);
|
|
255
|
+
// Update paginated items when pageSize or pageIndex changes
|
|
256
|
+
useEffect(() => {
|
|
257
|
+
const startIndex = (pageIndex - 1) * pageSize;
|
|
258
|
+
const endIndex = startIndex + pageSize;
|
|
259
|
+
// Slice the items array based on the current page
|
|
260
|
+
setPaginatedItems(items?.slice(startIndex, endIndex) ?? []);
|
|
261
|
+
}, [pageSize, pageIndex, items]);
|
|
262
|
+
// Handle item selection
|
|
263
|
+
const handleItemClick = (item) => {
|
|
264
|
+
if (handleSelectedFiles)
|
|
265
|
+
handleSelectedFiles([item]);
|
|
266
|
+
};
|
|
267
|
+
// Handle item selection
|
|
268
|
+
const handleItemDoubleClick = (item) => {
|
|
269
|
+
if (onDoubleClickHandler)
|
|
270
|
+
onDoubleClickHandler(item);
|
|
271
|
+
};
|
|
272
|
+
// Fallback to a default div component if no thumbnailsViewItemComponent is provided
|
|
273
|
+
const defaultThumbnailViewItem = (props) => {
|
|
274
|
+
const { item, isSelected } = props;
|
|
275
|
+
return _jsx("div", { style: { padding: '10px', border: isSelected ? '2px solid blue' : '1px solid gray', marginBottom: '5px', cursor: 'pointer', }, children: _jsx("span", { children: item.name }) });
|
|
276
|
+
};
|
|
277
|
+
return items && items.length > 0 ? (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(ScrollView, { width: "100%", height: showPagination ? "calc(100% - 50px)" : "100%", useNative: true, direction: 'both', children: _jsx("div", { style: { width: "100%", height: "100%" }, children: paginatedItems?.map(item => (_jsx("div", { children: thumbnailsViewItemComponent ?
|
|
278
|
+
thumbnailsViewItemComponent({ item, handleSelectedFiles, handleFocusedFile, isSelected: selectedFiles?.map(file => file.id).includes(item.id) ?? false, showId: false, onClick: () => handleItemClick(item), onDoubleClick: () => handleItemDoubleClick(item) }) :
|
|
279
|
+
defaultThumbnailViewItem({ item, handleSelectedFiles, handleFocusedFile, isSelected: selectedFiles?.map(file => file.id).includes(item.id) ?? false, showId: false, onClick: () => handleItemClick(item), onDoubleClick: () => handleItemDoubleClick(item) }) }, item.id))) }) }), showPagination && _jsx(Pagination, { height: "50px", showInfo: true, showNavigationButtons: true, allowedPageSizes: PAGE_SIZES, displayMode: 'compact', itemCount: items.length, pageIndex: pageIndex, pageSize: pageSize, onPageIndexChange: setPageIndex, onPageSizeChange: setPageSize })] })) : _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: SDKUI_Localizator.FolderIsEmpty });
|
|
280
|
+
};
|
|
@@ -80,6 +80,7 @@ export declare class SDKUI_Localizator {
|
|
|
80
80
|
static get DeletionOperationInterrupted(): "Löschvorgang abgebrochen" | "Deletion operation interrupted" | "Operación de eliminación interrumpida" | "Opération de suppression interrompue" | "Operação de exclusão interrompida" | "Operazione di eliminazione interrotta";
|
|
81
81
|
static get Description(): "Beschreibung" | "Description" | "Descripción" | "Descrição" | "Descrizione";
|
|
82
82
|
static get Destination(): "Bestimmung" | "Destination" | "Destino" | "Destinazione";
|
|
83
|
+
static get DetailsView(): string;
|
|
83
84
|
static get Disabled(): "Deaktiviert" | "Disabled" | "Deshabilitado" | "Désactivé" | "Desabilitado" | "Disabilitato";
|
|
84
85
|
static get Domain(): "Domäne" | "Domain" | "Dominio" | "Domaine";
|
|
85
86
|
static get Download_in_Process(): "Download läuft" | "Download in progress" | "Descarga en curso" | "Téléchargement en cours" | "Download em progresso" | "Download in corso";
|
|
@@ -116,6 +117,7 @@ export declare class SDKUI_Localizator {
|
|
|
116
117
|
static get FileManager_QuestionAlreadyExistsFile(): "Ziel enthält bereits eine Datei mit der Bezeichnung {{0}}, ersetzen durch die neue Datei?" | "The destination already contains a file called {{0}}, replace with the new file?" | "El destino ya contiene un archivo llamado {{0}}, ¿sustituir con el nuevo archivo?" | "La destination contient déjà un fichier appelé {{0}}, remplacer avec le nouveau fichier?" | "O destino já contém um ficheiro chamado {{0}}, substitua com o novo arquivo?" | "La destinazione contiene già un file denominato {{0}}, sostituire con il nuovo file?";
|
|
117
118
|
static get FileManager_QuestionAlreadyExistsFiles(): "Ziel enthält {{0}} Datei mit dem gleichen Namen, ersetzen durch neue Dateien?" | "Destination contains {{0}} files with the same name, replace with new files?" | "El destino contiene {{0}} archivos con el mismo nombre, ¿sustituir con los nuevos archivos?" | "La destination contient {{0}} fichier portant le même nom, remplacer avec les nouveaux fichiers?" | "O destino contém ficheiros {{0}} com o mesmo nome, substitua por novos arquivos?" | "La destinazione contiene {{0}} file con lo stesso nome, sostituire con i nuovi file?";
|
|
118
119
|
static get FolderExist(): "Ordner existiert bereits. Bitte versuchen Sie einen anderen Namen" | "Folder already exists. Please try another name" | "La carpeta ya existe. Intente con otro nombre." | "Le dossier existe déjà. Veuillez essayer un autre nom" | "A pasta já existe. Por favor tente outro nome" | "La cartella esiste già. Prova un altro nome";
|
|
120
|
+
static get FolderIsEmpty(): string;
|
|
119
121
|
static get ForgetPassword(): "Passwort vergessen" | "Forgot password" | "Has olvidado tu contraseña" | "Mot de passe oublié" | "Esqueceu sua senha" | "Password dimenticata";
|
|
120
122
|
static get Format(): "Format" | "Formato";
|
|
121
123
|
static get Formats_None(): "Originale (XML)" | "Original (XML)";
|
|
@@ -126,6 +128,7 @@ export declare class SDKUI_Localizator {
|
|
|
126
128
|
static get GetFileUploadErrorMessage(): "Fehler beim Hochladen" | "Error during upload" | "Error al subir el archivo" | "Erreur lors du téléchargement" | "Erro ao carregar o arquivo" | "Errore nel caricamento";
|
|
127
129
|
static get GetFolderDeletionErrorMessage(): "Fehler beim Löschen des Ordners" | "Error deleting the folder" | "Error al eliminar la carpeta" | "Erreur lors de la suppression du dossier" | "Erro ao excluir a pasta" | "Errore nell'eliminazione della cartella";
|
|
128
130
|
static get Hide_CompleteName(): "Vollständigen Namen ausblenden" | "Hide full name" | "Ocultar nombre completo" | "Masquer le nom complet" | "Ocultar nome completo" | "Nascondi nome completo";
|
|
131
|
+
static get HideLeftPanel(): "Linkes Panel ausblenden" | "Hide left panel" | "Ocultar panel izquierdo" | "Masquer le panneau de gauche" | "Ocultar painel esquerdo" | "Nascondi il pannello sinistro";
|
|
129
132
|
static get HideSearch(): "Suche ausblenden" | "Hide search" | "Ocultar búsqueda" | "Masquer la recherche" | "Ocultar pesquisa" | "Nascondi ricerca";
|
|
130
133
|
static get ID_Hide(): "Ausblenden ID" | "Hide ID" | "Ocultar ID" | "Masquer ID" | "Nascondi ID";
|
|
131
134
|
static get ID_Show(): "ID anzeigen" | "Show ID" | "Mostrar ID" | "Afficher ID" | "Visualizza ID";
|
|
@@ -166,6 +169,7 @@ export declare class SDKUI_Localizator {
|
|
|
166
169
|
static get MetadataFormats_ShortDateShortTime(): "Kurzes Datum/Uhrzeit" | "Short date/time" | "Fecha/hora breve" | "Date/heure brève" | "Data/hora curta" | "Data/ora breve";
|
|
167
170
|
static get MetadataFormats_ShortTime(): "Kurze Stunde" | "Short time" | "Hora breve" | "Heure brève" | "Hora curta" | "Ora breve";
|
|
168
171
|
static get MetadataFormats_UpperCase(): "Alle SHIFT" | "Upper case" | "Todo MAYÚSCULA" | "Tout MAJUSCULE" | "Todos os CAPS" | "Tutto MAIUSCOLO";
|
|
172
|
+
static get MetadataOnlyDocument(): string;
|
|
169
173
|
static get MetadataReferenceInsert(): "Metadaten-Referenz einfügen" | "Add metadata reference" | "Introducir referencia metadato" | "Entrez les métadonnée de référence" | "Insira metadados de referência" | "Inserisci riferimento metadato";
|
|
170
174
|
static get MetadataRoot(): "Methadatenstamm" | "Root metadata" | "Metadato raíz" | "Métadonnée racine" | "Metadados raiz" | "Metadato radice";
|
|
171
175
|
static get MetadataSelected(): "Ausgewählte Metadaten" | "Selected metadata" | "Metadatos seleccionados" | "Métadonnées sélectionnées" | "Metadados selecionados" | "Metadati selezionati";
|
|
@@ -216,6 +220,7 @@ export declare class SDKUI_Localizator {
|
|
|
216
220
|
static get Parameters(): "Parameter" | "Parameters" | "Parámetros" | "Paramètres" | "Parâmetros" | "Parametri";
|
|
217
221
|
static get Perms(): "Berechtigungen" | "Permissions" | "Permisos" | "Autorisations" | "Permissão" | "Permessi";
|
|
218
222
|
static get PhysDelete(): "Physische Stornierung" | "Physical delete" | "Cancelación física" | "Supression" | "Cancelamento física" | "Cancellazione fisica";
|
|
223
|
+
static get PreviewView(): string;
|
|
219
224
|
static get Previous(): "Vorherige" | "Previous" | "Anterior" | "Précédent" | "Precedente";
|
|
220
225
|
static get ProcessedItems(): "Durchdachte Elemente" | "Processed items" | "Elementos elaborados" | "Items traités" | "Itens processados" | "Elementi elaborati";
|
|
221
226
|
static get Properties(): "Eigenschaften" | "Properties" | "Propiedades" | "Propriétés" | "Propriedades" | "Proprietà";
|
|
@@ -271,6 +276,7 @@ export declare class SDKUI_Localizator {
|
|
|
271
276
|
static get Show_CompleteName(): "Vollständigen Namen anzeigen" | "View full name" | "Mostrar nombre completo" | "Afficher le nom complet" | "Mostrar nome completo" | "Visualizza nome completo";
|
|
272
277
|
static get ShowDetails(): "Details anzeigen" | "Show details" | "Mostrar detalles" | "Afficher les détails" | "Mostrar detalhes" | "Mostra dettagli";
|
|
273
278
|
static get ShowHideMetadataSystemDesc(): "Anzeigen oder Verbergen von Methadaten des Dokumententypsystems" | "Shows/hides system metadata of selected document type" | "Ver u ocultar los metadatos de sistema del tipo de documento" | "Visualise ou cache les métadonnées de système du type de document" | "Mostra ou oculta o tipo de documento de metadados do sistema" | "Visualizza o nasconde i metadati di sistema del tipo documento";
|
|
279
|
+
static get ShowLeftPanel(): "Linkes Panel anzeigen" | "Show left panel" | "Mostrar panel izquierdo" | "Afficher le panneau de gauche" | "Mostrar painel esquerdo" | "Mostra il pannello sinistro";
|
|
274
280
|
static get ShowSearch(): "Suche anzeigen" | "Show search" | "Mostrar búsqueda" | "Afficher la recherche" | "Mostrar pesquisa" | "Mostra ricerca";
|
|
275
281
|
static get Size(): "Größe" | "Size" | "Dimensión" | "Dimension" | "Tamanho" | "Dimensione";
|
|
276
282
|
static get SortBy(): "Sortieren nach" | "Sort by" | "Ordenar por" | "Trier par" | "Ordinamento";
|
|
@@ -749,6 +749,16 @@ export class SDKUI_Localizator {
|
|
|
749
749
|
default: return "Destinazione";
|
|
750
750
|
}
|
|
751
751
|
}
|
|
752
|
+
static get DetailsView() {
|
|
753
|
+
switch (this._cultureID) {
|
|
754
|
+
case CultureIDs.De_DE: return "Detailansicht";
|
|
755
|
+
case CultureIDs.En_US: return "Details View";
|
|
756
|
+
case CultureIDs.Es_ES: return "Vista Detalles";
|
|
757
|
+
case CultureIDs.Fr_FR: return "Vue Détails";
|
|
758
|
+
case CultureIDs.Pt_PT: return "Vista de Detalhes";
|
|
759
|
+
default: return "Vista Dettagliata";
|
|
760
|
+
}
|
|
761
|
+
}
|
|
752
762
|
static get Disabled() {
|
|
753
763
|
switch (this._cultureID) {
|
|
754
764
|
case CultureIDs.De_DE: return "Deaktiviert";
|
|
@@ -1121,6 +1131,16 @@ export class SDKUI_Localizator {
|
|
|
1121
1131
|
default: return "La cartella esiste già. Prova un altro nome";
|
|
1122
1132
|
}
|
|
1123
1133
|
}
|
|
1134
|
+
static get FolderIsEmpty() {
|
|
1135
|
+
switch (this._cultureID) {
|
|
1136
|
+
case CultureIDs.De_DE: return "Der Ordner ist leer";
|
|
1137
|
+
case CultureIDs.En_US: return "The folder is empty";
|
|
1138
|
+
case CultureIDs.Es_ES: return "La carpeta está vacía";
|
|
1139
|
+
case CultureIDs.Fr_FR: return "Le dossier est vide";
|
|
1140
|
+
case CultureIDs.Pt_PT: return "A pasta está vazia";
|
|
1141
|
+
default: return "La cartella è vuota";
|
|
1142
|
+
}
|
|
1143
|
+
}
|
|
1124
1144
|
static get ForgetPassword() {
|
|
1125
1145
|
switch (this._cultureID) {
|
|
1126
1146
|
case CultureIDs.De_DE: return "Passwort vergessen";
|
|
@@ -1220,6 +1240,16 @@ export class SDKUI_Localizator {
|
|
|
1220
1240
|
default: return "Nascondi nome completo";
|
|
1221
1241
|
}
|
|
1222
1242
|
}
|
|
1243
|
+
static get HideLeftPanel() {
|
|
1244
|
+
switch (this._cultureID) {
|
|
1245
|
+
case CultureIDs.De_DE: return "Linkes Panel ausblenden";
|
|
1246
|
+
case CultureIDs.En_US: return "Hide left panel";
|
|
1247
|
+
case CultureIDs.Es_ES: return "Ocultar panel izquierdo";
|
|
1248
|
+
case CultureIDs.Fr_FR: return "Masquer le panneau de gauche";
|
|
1249
|
+
case CultureIDs.Pt_PT: return "Ocultar painel esquerdo";
|
|
1250
|
+
default: return "Nascondi il pannello sinistro";
|
|
1251
|
+
}
|
|
1252
|
+
}
|
|
1223
1253
|
static get HideSearch() {
|
|
1224
1254
|
switch (this._cultureID) {
|
|
1225
1255
|
case CultureIDs.De_DE: return "Suche ausblenden";
|
|
@@ -1611,6 +1641,16 @@ export class SDKUI_Localizator {
|
|
|
1611
1641
|
default: return "Tutto MAIUSCOLO";
|
|
1612
1642
|
}
|
|
1613
1643
|
}
|
|
1644
|
+
static get MetadataOnlyDocument() {
|
|
1645
|
+
switch (this._cultureID) {
|
|
1646
|
+
case CultureIDs.De_DE: return "Nur-Metadaten-Dokument";
|
|
1647
|
+
case CultureIDs.En_US: return "Metadata-only document";
|
|
1648
|
+
case CultureIDs.Es_ES: return "Documento solo de metadatos";
|
|
1649
|
+
case CultureIDs.Fr_FR: return "Document contenant uniquement des métadonnées";
|
|
1650
|
+
case CultureIDs.Pt_PT: return "Documento apenas de metadados";
|
|
1651
|
+
default: return "Documento di soli metadati";
|
|
1652
|
+
}
|
|
1653
|
+
}
|
|
1614
1654
|
static get MetadataReferenceInsert() {
|
|
1615
1655
|
switch (this._cultureID) {
|
|
1616
1656
|
case CultureIDs.De_DE: return "Metadaten-Referenz einfügen";
|
|
@@ -2111,6 +2151,16 @@ export class SDKUI_Localizator {
|
|
|
2111
2151
|
default: return "Cancellazione fisica";
|
|
2112
2152
|
}
|
|
2113
2153
|
}
|
|
2154
|
+
static get PreviewView() {
|
|
2155
|
+
switch (this._cultureID) {
|
|
2156
|
+
case CultureIDs.De_DE: return "Vorschauansicht";
|
|
2157
|
+
case CultureIDs.En_US: return "Preview View";
|
|
2158
|
+
case CultureIDs.Es_ES: return "Vista Previa";
|
|
2159
|
+
case CultureIDs.Fr_FR: return "Vue Prévisualisation";
|
|
2160
|
+
case CultureIDs.Pt_PT: return "Vista de Pré-visualização";
|
|
2161
|
+
default: return "Anteprima";
|
|
2162
|
+
}
|
|
2163
|
+
}
|
|
2114
2164
|
static get Previous() {
|
|
2115
2165
|
switch (this._cultureID) {
|
|
2116
2166
|
case CultureIDs.De_DE: return "Vorherige";
|
|
@@ -2668,6 +2718,16 @@ export class SDKUI_Localizator {
|
|
|
2668
2718
|
default: return "Visualizza o nasconde i metadati di sistema del tipo documento";
|
|
2669
2719
|
}
|
|
2670
2720
|
}
|
|
2721
|
+
static get ShowLeftPanel() {
|
|
2722
|
+
switch (this._cultureID) {
|
|
2723
|
+
case CultureIDs.De_DE: return "Linkes Panel anzeigen";
|
|
2724
|
+
case CultureIDs.En_US: return "Show left panel";
|
|
2725
|
+
case CultureIDs.Es_ES: return "Mostrar panel izquierdo";
|
|
2726
|
+
case CultureIDs.Fr_FR: return "Afficher le panneau de gauche";
|
|
2727
|
+
case CultureIDs.Pt_PT: return "Mostrar painel esquerdo";
|
|
2728
|
+
default: return "Mostra il pannello sinistro";
|
|
2729
|
+
}
|
|
2730
|
+
}
|
|
2671
2731
|
static get ShowSearch() {
|
|
2672
2732
|
switch (this._cultureID) {
|
|
2673
2733
|
case CultureIDs.De_DE: return "Suche anzeigen";
|
package/lib/helper/TMIcons.d.ts
CHANGED
|
@@ -218,4 +218,5 @@ declare function IconUserExpired(props: React.SVGProps<SVGSVGElement>): import("
|
|
|
218
218
|
declare function IconAddressBook(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
|
|
219
219
|
declare function IconFreeSearch(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
|
|
220
220
|
declare function IconMic(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
|
|
221
|
-
|
|
221
|
+
declare function IconKey(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
|
|
222
|
+
export { Icon123, IconABC, IconAccessPoint, IconAddressBook, IconSignCert, IconServerService, IconActivity, IconActivityLog, IconAdd, IconAddCircleOutline, IconAll, IconApply, IconApplyAndClose, IconArchive, IconArchiveDoc, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconAtSign, IconAttachment, IconAutoConfig, IconBackward, IconBasket, IconBoard, IconBoxArchiveIn, IconBxInfo, IconBxLock, IconCalendar, IconCloseCircle, IconCloseOutline, IconCloud, IconCircleInfo, IconClear, IconColumns, IconCommand, IconCopy, IconCount, IconCrown, IconDashboard, IconDcmtType, IconDcmtTypeOnlyMetadata, IconDcmtTypeSys, IconDelete, IconDetails, IconDown, IconDownload, IconDotsVerticalCircleOutline, IconDuplicate, IconEdit, IconEqual, IconEqualNot, IconEraser, IconExpandRight, IconExport, IconFastBackward, IconFoldeAdd, IconFolderSearch, IconFolderZip, IconFastForward, IconFastSearch, IconFileDots, IconFilter, IconForceStop, IconForward, IconFreeze, IconFreeSearch, IconGreaterThan, IconGreaterThanOrEqual, IconHistory, IconImport, IconTag, IconInfo, IconInsertAbove, IconInsertBelow, IconHeart, IconHide, IconLanguage, IconLeft, IconLessThan, IconLessThanOrEqual, IconLock, IconLockClosed, IconLogin, IconLink, IconLogout, IconMail, IconMapping, IconMaximize, IconMinimize, IconMic, IconMenuHorizontal, IconMenuKebab, IconMenuVertical, IconMetadata, IconMetadata_Computed, IconMetadata_DataList, IconMetadata_Date, IconMetadata_DynamicDataList, IconMetadata_Numerator, IconMetadata_Numeric, IconMetadata_Special, IconMetadata_Text, IconMetadata_User, IconMonitor, IconOpenInNew, IconNotification, IconPassword, IconPencil, IconPlatform, IconPlay, IconPreview, IconPrinter, IconProcess, IconProgressAbortRequested, IconProgressCompleted, IconProgressNotCompleted, IconProgressReady, IconProgressRunning, IconProgressStarted, IconRefresh, IconReset, IconRight, IconSave, IconSearch, IconSelected, IconSettings, IconShow, IconSort, IconStop, IconStopwatch, IconSuccess, IconAlarmPlus, IconHourglass, IconNone, IconNotStarted, IconProgress, IconSuccessCirlce, IconSuitcase, IconSupport, IconUndo, IconUnFreeze, IconUp, IconUpdate, IconUpload, IconUser, IconUserProfile, IconVisible, IconWarning, IconWeb, IconWifi, IconWindowMaximize, IconWindowMinimize, IconWorkflow, IconWorkspace, IconUserGroup, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconDraggabledots, IconRelation, IconEasy, IconSum, IconDisk, IconDataList, IconPalette, IconFormatPageSplit, IconPaste, IconFileSearch, IconStar, IconStarRemove, IconSearchCheck, IconLightningFill, IconArrowUnsorted, IconArrowSortedUp, IconArrowSortedDown, IconConvertFilePdf, IconExportTo, IconSharedDcmt, IconShare, IconBatchUpdate, IconCheckFile, IconStatistics, IconSubstFile, IconAdvanced, IconSync, IconSavedQuery, IconSignature, IconRecursiveOps, IconCheckIn, IconTree, IconGrid, IconList, IconFolder, IconFolderOpen, IconFactory, IconTest, IconCheck, IconUncheck, IconSortAsc, IconSortDesc, IconSortAscLetters, IconSortDescLetters, IconSortAscNumbers, IconSortDescNumbers, IconSortAscClock, IconSortDescClock, IconLayerGroup, IconBell, IconBellCheck, IconBellOutline, IconBellCheckOutline, IconEnvelopeOpenText, IconChangeUser, IconRelationManyToMany, IconRelationOneToMany, IconUserExpired, IconKey };
|
package/lib/helper/TMIcons.js
CHANGED
|
@@ -517,4 +517,7 @@ function IconUserExpired(props) {
|
|
|
517
517
|
function IconAddressBook(props) { return (_jsxs("svg", { fontSize: props?.fontSize ? props.fontSize : FONTSIZE, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: [" ", _jsxs("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", color: "currentColor", children: [" ", _jsx("path", { d: "M4.5 10c0-3.771 0-5.657 1.172-6.828S8.729 2 12.5 2H14c3.771 0 5.657 0 6.828 1.172S22 6.229 22 10v4c0 3.771 0 5.657-1.172 6.828S17.771 22 14 22h-1.5c-3.771 0-5.657 0-6.828-1.172S4.5 17.771 4.5 14z" }), " ", _jsx("path", { d: "M15.25 10v2.5a1.5 1.5 0 0 0 3 0V12a5 5 0 1 0-2 4m-1-4a2 2 0 1 1-4 0a2 2 0 0 1 4 0M4.5 6H2m2.5 6H2m2.5 6H2" }), " "] }), " "] })); }
|
|
518
518
|
function IconFreeSearch(props) { return (_jsxs("svg", { fontSize: props?.fontSize ? props.fontSize : FONTSIZE, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", width: "1em", height: "1em", ...props, children: [" ", _jsxs("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [" ", _jsx("path", { d: "M11.5.5h1a1 1 0 0 1 1 1v1m-13 0v-1a1 1 0 0 1 1-1h1m3 0h3m5 5v2.75M.5 5.5v3m0 3v1a1 1 0 0 0 1 1h1m3 0h2.75" }), " ", _jsx("circle", { cx: "8", cy: "8", r: "3.5" }), " ", _jsx("path", { d: "M10.47 10.47L13 13" }), " "] }), " "] })); }
|
|
519
519
|
function IconMic(props) { return (_jsxs("svg", { fontSize: props?.fontSize ? props.fontSize : FONTSIZE, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: [" ", _jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [" ", _jsx("rect", { width: "6", height: "12", x: "9", y: "2", fill: "currentColor", rx: "3" }), " ", _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 10v1a7 7 0 0 0 7 7v0a7 7 0 0 0 7-7v-1m-7 8v4m0 0H9m3 0h3" }), " "] }), " "] })); }
|
|
520
|
-
|
|
520
|
+
function IconKey(props) {
|
|
521
|
+
return (_jsx("svg", { fontSize: props?.fontSize ? props.fontSize : FONTSIZE, fill: "none", viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, children: _jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M6 8a3 3 0 00-3 3v2a3 3 0 106 0h6v2h2v-2h1v2h2v-4H9a3 3 0 00-3-3zm1 5v-2a1 1 0 10-2 0v2a1 1 0 102 0z", clipRule: "evenodd" }) }));
|
|
522
|
+
}
|
|
523
|
+
export { Icon123, IconABC, IconAccessPoint, IconAddressBook, IconSignCert, IconServerService, IconActivity, IconActivityLog, IconAdd, IconAddCircleOutline, IconAll, IconApply, IconApplyAndClose, IconArchive, IconArchiveDoc, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconAtSign, IconAttachment, IconAutoConfig, IconBackward, IconBasket, IconBoard, IconBoxArchiveIn, IconBxInfo, IconBxLock, IconCalendar, IconCloseCircle, IconCloseOutline, IconCloud, IconCircleInfo, IconClear, IconColumns, IconCommand, IconCopy, IconCount, IconCrown, IconDashboard, IconDcmtType, IconDcmtTypeOnlyMetadata, IconDcmtTypeSys, IconDelete, IconDetails, IconDown, IconDownload, IconDotsVerticalCircleOutline, IconDuplicate, IconEdit, IconEqual, IconEqualNot, IconEraser, IconExpandRight, IconExport, IconFastBackward, IconFoldeAdd, IconFolderSearch, IconFolderZip, IconFastForward, IconFastSearch, IconFileDots, IconFilter, IconForceStop, IconForward, IconFreeze, IconFreeSearch, IconGreaterThan, IconGreaterThanOrEqual, IconHistory, IconImport, IconTag, IconInfo, IconInsertAbove, IconInsertBelow, IconHeart, IconHide, IconLanguage, IconLeft, IconLessThan, IconLessThanOrEqual, IconLock, IconLockClosed, IconLogin, IconLink, IconLogout, IconMail, IconMapping, IconMaximize, IconMinimize, IconMic, IconMenuHorizontal, IconMenuKebab, IconMenuVertical, IconMetadata, IconMetadata_Computed, IconMetadata_DataList, IconMetadata_Date, IconMetadata_DynamicDataList, IconMetadata_Numerator, IconMetadata_Numeric, IconMetadata_Special, IconMetadata_Text, IconMetadata_User, IconMonitor, IconOpenInNew, IconNotification, IconPassword, IconPencil, IconPlatform, IconPlay, IconPreview, IconPrinter, IconProcess, IconProgressAbortRequested, IconProgressCompleted, IconProgressNotCompleted, IconProgressReady, IconProgressRunning, IconProgressStarted, IconRefresh, IconReset, IconRight, IconSave, IconSearch, IconSelected, IconSettings, IconShow, IconSort, IconStop, IconStopwatch, IconSuccess, IconAlarmPlus, IconHourglass, IconNone, IconNotStarted, IconProgress, IconSuccessCirlce, IconSuitcase, IconSupport, IconUndo, IconUnFreeze, IconUp, IconUpdate, IconUpload, IconUser, IconUserProfile, IconVisible, IconWarning, IconWeb, IconWifi, IconWindowMaximize, IconWindowMinimize, IconWorkflow, IconWorkspace, IconUserGroup, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconDraggabledots, IconRelation, IconEasy, IconSum, IconDisk, IconDataList, IconPalette, IconFormatPageSplit, IconPaste, IconFileSearch, IconStar, IconStarRemove, IconSearchCheck, IconLightningFill, IconArrowUnsorted, IconArrowSortedUp, IconArrowSortedDown, IconConvertFilePdf, IconExportTo, IconSharedDcmt, IconShare, IconBatchUpdate, IconCheckFile, IconStatistics, IconSubstFile, IconAdvanced, IconSync, IconSavedQuery, IconSignature, IconRecursiveOps, IconCheckIn, IconTree, IconGrid, IconList, IconFolder, IconFolderOpen, IconFactory, IconTest, IconCheck, IconUncheck, IconSortAsc, IconSortDesc, IconSortAscLetters, IconSortDescLetters, IconSortAscNumbers, IconSortDescNumbers, IconSortAscClock, IconSortDescClock, IconLayerGroup, IconBell, IconBellCheck, IconBellOutline, IconBellCheckOutline, IconEnvelopeOpenText, IconChangeUser, IconRelationManyToMany, IconRelationOneToMany, IconUserExpired, IconKey };
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import { TMTooltip } from '../components';
|
|
4
|
+
import { IconKey } from './TMIcons';
|
|
5
|
+
const StyledIconFileContainer = styled.div `
|
|
6
|
+
height: 22px;
|
|
7
|
+
width: 18px;
|
|
8
|
+
border-radius: 5px;
|
|
9
|
+
background-color: #d2dae2;
|
|
10
|
+
position: relative;
|
|
11
|
+
`;
|
|
12
|
+
const StyledIconFileExt = styled.div `
|
|
13
|
+
top: 25%;
|
|
14
|
+
width: 30px;
|
|
15
|
+
left: -6px;
|
|
16
|
+
border-radius: 5px;
|
|
17
|
+
background-color: ${props => props.$backgroundColor};
|
|
18
|
+
color: ${props => props.$color};
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
justify-content: center;
|
|
22
|
+
font-size: 0.7rem;
|
|
23
|
+
position: absolute;
|
|
24
|
+
height: 12px;
|
|
25
|
+
`;
|
|
26
|
+
export const getFileIcon = (fileExtension, fileCount) => {
|
|
27
|
+
if (!fileExtension)
|
|
28
|
+
fileExtension = "";
|
|
29
|
+
if (fileExtension.startsWith("."))
|
|
30
|
+
fileExtension = fileExtension.substring(1).toUpperCase();
|
|
31
|
+
let fileExtOri = fileExtension;
|
|
32
|
+
fileExtension = fileExtension.replace(".P7M", "").replace(".M7M", "").replace(".TSR", "").replace(".TSD", "").replace(".TS", "");
|
|
33
|
+
let fileBgColor;
|
|
34
|
+
let fileColor = "#FFFFFF";
|
|
35
|
+
switch (fileExtension) {
|
|
36
|
+
case "PDF":
|
|
37
|
+
fileBgColor = '#F15642';
|
|
38
|
+
break;
|
|
39
|
+
case "XLS":
|
|
40
|
+
case "XLSX":
|
|
41
|
+
case "CSV":
|
|
42
|
+
fileBgColor = '#1d6f42';
|
|
43
|
+
break;
|
|
44
|
+
case "PEC":
|
|
45
|
+
fileBgColor = '#F15642';
|
|
46
|
+
break;
|
|
47
|
+
case "MSG":
|
|
48
|
+
case "EML":
|
|
49
|
+
case "RTF":
|
|
50
|
+
case "DOC":
|
|
51
|
+
case "DOTX":
|
|
52
|
+
case "DOCX":
|
|
53
|
+
fileBgColor = '#205ccc';
|
|
54
|
+
break;
|
|
55
|
+
case 'PPT':
|
|
56
|
+
case 'PPTX':
|
|
57
|
+
fileBgColor = '#c45a1c';
|
|
58
|
+
break;
|
|
59
|
+
case 'PNG':
|
|
60
|
+
case 'JPG':
|
|
61
|
+
case 'JPEG':
|
|
62
|
+
case 'SVG':
|
|
63
|
+
case 'TIFF':
|
|
64
|
+
case 'TIF':
|
|
65
|
+
case 'ICO':
|
|
66
|
+
case 'GIF':
|
|
67
|
+
case 'DWG':
|
|
68
|
+
case 'DCM':
|
|
69
|
+
case 'SLDDRW':
|
|
70
|
+
case 'WEBP':
|
|
71
|
+
fileBgColor = '#A066AA';
|
|
72
|
+
break;
|
|
73
|
+
case 'HTM':
|
|
74
|
+
case 'HTML':
|
|
75
|
+
case 'TXT':
|
|
76
|
+
case 'XML':
|
|
77
|
+
fileBgColor = '#576D7E';
|
|
78
|
+
break;
|
|
79
|
+
default:
|
|
80
|
+
fileBgColor = '#576D7E';
|
|
81
|
+
break;
|
|
82
|
+
}
|
|
83
|
+
return (_jsx(StyledIconFileContainer, { children: _jsx(StyledIconFileExt, { "$backgroundColor": fileCount == 0 ? "#424040" : fileBgColor, "$color": fileColor, children: fileCount == 0
|
|
84
|
+
? _jsxs(TMTooltip, { content: "Documento di soli metadati", children: [" ", _jsx(IconKey, { fontSize: 17, color: '#f8d775' }), " "] })
|
|
85
|
+
: _jsx(TMTooltip, { content: fileExtOri, children: fileExtension.toUpperCase() }) }) }));
|
|
86
|
+
};
|
|
87
|
+
export function formatBytes(bytes, decimalPlaces = 2) {
|
|
88
|
+
if (!bytes)
|
|
89
|
+
return '0 B';
|
|
90
|
+
if (bytes === 0)
|
|
91
|
+
return '0 B';
|
|
92
|
+
const k = 1024;
|
|
93
|
+
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
94
|
+
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
95
|
+
const value = parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPlaces));
|
|
96
|
+
return `${value} ${units[i]}`;
|
|
97
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { Icon123, IconABC, IconAccessPoint, IconActivity, IconActivityLog, IconAdd, IconAddCircleOutline, IconAddressBook, IconAdvanced, IconAlarmPlus, IconAll, IconApply, IconApplyAndClose, IconArchive, IconArchiveDoc, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowSortedDown, IconArrowSortedUp, IconArrowUnsorted, IconArrowUp, IconAtSign, IconAttachment, IconAutoConfig, IconBackward, IconBasket, IconBatchUpdate, IconBell, IconBellCheck, IconBellCheckOutline, IconBellOutline, IconBoard, IconBoxArchiveIn, IconBxInfo, IconBxLock, IconCalendar, IconChangeUser, IconCheck, IconCheckIn, IconCircleInfo, IconClear, IconClearButton, IconCloseCircle, IconCloseOutline, IconCloud, IconColumns, IconCommand, IconConvertFilePdf, IconCopy, IconCount, IconCrown, IconDashboard, IconDataList, IconDcmtType, IconDcmtTypeOnlyMetadata, IconDcmtTypeSys, IconDelete, IconDetails, IconDisk, IconDotsVerticalCircleOutline, IconDown, IconDownload, IconDraggabledots, IconDuplicate, IconEasy, IconEdit, IconEnvelopeOpenText, IconEqual, IconEqualNot, IconEraser, IconExpandRight, IconExport, IconExportTo, IconFactory, IconFastBackward, IconFastForward, IconFastSearch, IconFileDots, IconFileSearch, IconFilter, IconFoldeAdd, IconFolder, IconFolderOpen, IconFolderSearch, IconFolderZip, IconForceStop, IconForward, IconFreeSearch, IconFreeze, IconGreaterThan, IconGreaterThanOrEqual, IconGrid, IconHeart, IconHide, IconHistory, IconHourglass, IconImport, IconInfo, IconInsertAbove, IconInsertBelow, IconLanguage, IconLeft, IconLessThan, IconLessThanOrEqual, IconLightningFill, IconLink, IconList, IconLock, IconLockClosed, IconLogin, IconLogout, IconMail, IconMapping, IconMaximize, IconMenuHorizontal, IconMenuKebab, IconMenuVertical, IconMetadata, IconMetadata_Computed, IconMetadata_DataList, IconMetadata_Date, IconMetadata_DynamicDataList, IconMetadata_Numerator, IconMetadata_Numeric, IconMetadata_Special, IconMetadata_Text, IconMetadata_User, IconMic, IconMinimize, IconMonitor, IconNone, IconNotification, IconNotStarted, IconOpenInNew, IconPalette, IconPassword, IconPaste, IconPencil, IconPlatform, IconPlay, IconPreview, IconPrinter, IconProcess, IconProgress, IconProgressAbortRequested, IconProgressCompleted, IconProgressNotCompleted, IconProgressReady, IconProgressRunning, IconProgressStarted, IconRecursiveOps, IconRefresh, IconRelation, IconRelationManyToMany, IconRelationOneToMany, IconReset, IconRight, IconSave, IconSavedQuery, IconSearch, IconSearchCheck, IconSelected, IconServerService, IconSettings, IconShare, IconSharedDcmt, IconShow, IconSignature, IconSignCert, IconSort, IconSortAsc, IconSortAscClock, IconSortAscLetters, IconSortAscNumbers, IconSortDesc, IconSortDescClock, IconSortDescLetters, IconSortDescNumbers, IconStar, IconStarRemove, IconStatistics, IconStop, IconStopwatch, IconSubstFile, IconSuccess, IconSuccessCirlce, IconSuitcase, IconSum, IconSupport, IconSync, IconTag, IconTest, IconTree, IconUndo, IconUnFreeze, IconUp, IconUpdate, IconUpload, IconUser, IconUserExpired, IconUserGroup, IconUserLevelAdministrator, IconUserLevelAutonomousAdministrator, IconUserLevelMember, IconUserLevelSystemAdministrator, IconUserProfile, IconVisible, IconWarning, IconWeb, IconWifi, IconWindowMaximize, IconWindowMinimize, IconWorkflow, IconWorkspace } from "../helper";
|
|
2
|
+
import { Icon123, IconABC, IconAccessPoint, IconActivity, IconActivityLog, IconAdd, IconAddCircleOutline, IconAddressBook, IconAdvanced, IconAlarmPlus, IconAll, IconApply, IconApplyAndClose, IconArchive, IconArchiveDoc, IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowSortedDown, IconArrowSortedUp, IconArrowUnsorted, IconArrowUp, IconAtSign, IconAttachment, IconAutoConfig, IconBackward, IconBasket, IconBatchUpdate, IconBell, IconBellCheck, IconBellCheckOutline, IconBellOutline, IconBoard, IconBoxArchiveIn, IconBxInfo, IconBxLock, IconCalendar, IconChangeUser, IconCheck, IconCheckIn, IconCircleInfo, IconClear, IconClearButton, IconCloseCircle, IconCloseOutline, IconCloud, IconColumns, IconCommand, IconConvertFilePdf, IconCopy, IconCount, IconCrown, IconDashboard, IconDataList, IconDcmtType, IconDcmtTypeOnlyMetadata, IconDcmtTypeSys, IconDelete, IconDetails, IconDisk, IconDotsVerticalCircleOutline, IconDown, IconDownload, IconDraggabledots, IconDuplicate, IconEasy, IconEdit, IconEnvelopeOpenText, IconEqual, IconEqualNot, IconEraser, IconExpandRight, IconExport, IconExportTo, IconFactory, IconFastBackward, IconFastForward, IconFastSearch, IconFileDots, IconFileSearch, IconFilter, IconFoldeAdd, IconFolder, IconFolderOpen, IconFolderSearch, IconFolderZip, IconForceStop, IconForward, IconFreeSearch, IconFreeze, IconGreaterThan, IconGreaterThanOrEqual, IconGrid, IconHeart, IconHide, IconHistory, IconHourglass, IconImport, IconInfo, IconInsertAbove, IconInsertBelow, IconKey, IconLanguage, IconLeft, IconLessThan, IconLessThanOrEqual, IconLightningFill, IconLink, IconList, IconLock, IconLockClosed, IconLogin, IconLogout, IconMail, IconMapping, IconMaximize, IconMenuHorizontal, IconMenuKebab, IconMenuVertical, IconMetadata, IconMetadata_Computed, IconMetadata_DataList, IconMetadata_Date, IconMetadata_DynamicDataList, IconMetadata_Numerator, IconMetadata_Numeric, IconMetadata_Special, IconMetadata_Text, IconMetadata_User, IconMic, IconMinimize, IconMonitor, IconNone, IconNotification, IconNotStarted, IconOpenInNew, IconPalette, IconPassword, IconPaste, IconPencil, IconPlatform, IconPlay, IconPreview, IconPrinter, IconProcess, IconProgress, IconProgressAbortRequested, IconProgressCompleted, IconProgressNotCompleted, IconProgressReady, IconProgressRunning, IconProgressStarted, IconRecursiveOps, IconRefresh, IconRelation, IconRelationManyToMany, IconRelationOneToMany, IconReset, IconRight, IconSave, IconSavedQuery, IconSearch, IconSearchCheck, IconSelected, IconServerService, IconSettings, IconShare, IconSharedDcmt, IconShow, IconSignature, IconSignCert, IconSort, IconSortAsc, IconSortAscClock, IconSortAscLetters, IconSortAscNumbers, IconSortDesc, IconSortDescClock, IconSortDescLetters, IconSortDescNumbers, IconStar, IconStarRemove, IconStatistics, IconStop, IconStopwatch, IconSubstFile, IconSuccess, IconSuccessCirlce, IconSuitcase, IconSum, IconSupport, IconSync, IconTag, IconTest, IconTree, IconUndo, IconUnFreeze, IconUp, IconUpdate, IconUpload, IconUser, IconUserExpired, IconUserGroup, IconUserLevelAdministrator, IconUserLevelAutonomousAdministrator, IconUserLevelMember, IconUserLevelSystemAdministrator, IconUserProfile, IconVisible, IconWarning, IconWeb, IconWifi, IconWindowMaximize, IconWindowMinimize, IconWorkflow, IconWorkspace } from "../helper";
|
|
3
3
|
export default {
|
|
4
4
|
title: "Icons/TMIcons",
|
|
5
5
|
component: IconAccessPoint,
|
|
@@ -8,6 +8,6 @@ export default {
|
|
|
8
8
|
color: { control: "color" },
|
|
9
9
|
},
|
|
10
10
|
};
|
|
11
|
-
const TMIconsTemplate = (args) => (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: "flex", gap: "20px" }, children: [_jsx("span", { title: "IconAccessPoint", children: _jsx(IconAccessPoint, { ...args }) }), _jsx("span", { title: "IconCloseOutline", children: _jsx(IconCloseOutline, { ...args }) }), _jsx("span", { title: "IconArchive", children: _jsx(IconArchive, { ...args }) }), _jsx("span", { title: "IconLogin", children: _jsx(IconLogin, { ...args }) }), _jsx("span", { title: "IconUser", children: _jsx(IconUser, { ...args }) }), _jsx("span", { title: "IconPassword", children: _jsx(IconPassword, { ...args }) }), _jsx("span", { title: "IconLanguage", children: _jsx(IconLanguage, { ...args }) }), _jsx("span", { title: "IconSuitcase", children: _jsx(IconSuitcase, { ...args }) }), _jsx("span", { title: "IconProcess", children: _jsx(IconProcess, { ...args }) }), _jsx("span", { title: "IconSupport", children: _jsx(IconSupport, { ...args }) }), _jsx("span", { title: "IconMonitor", children: _jsx(IconMonitor, { ...args }) }), _jsx("span", { title: "IconDashboard", children: _jsx(IconDashboard, { ...args }) }), _jsx("span", { title: "IconAdd", children: _jsx(IconAdd, { ...args }) }), _jsx("span", { title: "IconDelete", children: _jsx(IconDelete, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconDuplicate", children: _jsx(IconDuplicate, { ...args }) }), _jsx("span", { title: "IconRefresh", children: _jsx(IconRefresh, { ...args }) }), _jsx("span", { title: "IconExpandRight", children: _jsx(IconExpandRight, { ...args }) }), _jsx("span", { title: "IconColumns", children: _jsx(IconColumns, { ...args }) }), _jsx("span", { title: "IconSave", children: _jsx(IconSave, { ...args }) }), _jsx("span", { title: "IconArrowDown", children: _jsx(IconArrowDown, { ...args }) }), _jsx("span", { title: "IconArrowUp", children: _jsx(IconArrowUp, { ...args }) }), _jsx("span", { title: "IconUndo", children: _jsx(IconUndo, { ...args }) }), _jsx("span", { title: "IconShow", children: _jsx(IconShow, { ...args }) }), _jsx("span", { title: "IconHide", children: _jsx(IconHide, { ...args }) }), _jsx("span", { title: "IconPreview", children: _jsx(IconPreview, { ...args }) }), _jsx("span", { title: "IconCount", children: _jsx(IconCount, { ...args }) }), _jsx("span", { title: "IconPencil", children: _jsx(IconPencil, { ...args }) }), _jsx("span", { title: "IconEraser", children: _jsx(IconEraser, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconAll", children: _jsx(IconAll, { ...args }) }), _jsx("span", { title: "IconSelected", children: _jsx(IconSelected, { ...args }) }), _jsx("span", { title: "IconVisible", children: _jsx(IconVisible, { ...args }) }), _jsx("span", { title: "IconCloseCircle", children: _jsx(IconCloseCircle, { ...args }) }), _jsx("span", { title: "IconApplyAndClose", children: _jsx(IconApplyAndClose, { ...args }) }), _jsx("span", { title: "IconApply", children: _jsx(IconApply, { ...args }) }), _jsx("span", { title: "IconSettings", children: _jsx(IconSettings, { ...args }) }), _jsx("span", { title: "IconMaximize", children: _jsx(IconMaximize, { ...args }) }), _jsx("span", { title: "IconMinimize", children: _jsx(IconMinimize, { ...args }) }), _jsx("span", { title: "IconNotification", children: _jsx(IconNotification, { ...args }) }), _jsx("span", { title: "IconHeart", children: _jsx(IconHeart, { ...args }) }), _jsx("span", { title: "IconUserProfile", children: _jsx(IconUserProfile, { ...args }) }), _jsx("span", { title: "IconWorkflow", children: _jsx(IconWorkflow, { ...args }) }), _jsx("span", { title: "IconBackward", children: _jsx(IconBackward, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconForward", children: _jsx(IconForward, { ...args }) }), _jsx("span", { title: "IconFastBackward", children: _jsx(IconFastBackward, { ...args }) }), _jsx("span", { title: "IconFastForward", children: _jsx(IconFastForward, { ...args }) }), _jsx("span", { title: "IconLogout", children: _jsx(IconLogout, { ...args }) }), _jsx("span", { title: "IconWifi", children: _jsx(IconWifi, { ...args }) }), _jsx("span", { title: "IconMenuHorizontal", children: _jsx(IconMenuHorizontal, { ...args }) }), _jsx("span", { title: "IconMenuVertical", children: _jsx(IconMenuVertical, { ...args }) }), _jsx("span", { title: "IconOpenInNew", children: _jsx(IconOpenInNew, { ...args }) }), _jsx("span", { title: "IconMail", children: _jsx(IconMail, { ...args }) }), _jsx("span", { title: "IconCopy", children: _jsx(IconCopy, { ...args }) }), _jsx("span", { title: "IconSearch", children: _jsx(IconSearch, { ...args }) }), _jsx("span", { title: "IconMenuKebab", children: _jsx(IconMenuKebab, { ...args }) }), _jsx("span", { title: "IconDown", children: _jsx(IconDown, { ...args }) }), _jsx("span", { title: "IconUp", children: _jsx(IconUp, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconLeft", children: _jsx(IconLeft, { ...args }) }), _jsx("span", { title: "IconRight", children: _jsx(IconRight, { ...args }) }), _jsx("span", { title: "IconArrowLeft", children: _jsx(IconArrowLeft, { ...args }) }), _jsx("span", { title: "IconArrowRight", children: _jsx(IconArrowRight, { ...args }) }), _jsx("span", { title: "IconFileDots", children: _jsx(IconFileDots, { ...args }) }), _jsx("span", { title: "IconDownload", children: _jsx(IconDownload, { ...args }) }), _jsx("span", { title: "IconUpload", children: _jsx(IconUpload, { ...args }) }), _jsx("span", { title: "IconFolderSearch", children: _jsx(IconFolderSearch, { ...args }) }), _jsx("span", { title: "IconFoldeAdd", children: _jsx(IconFoldeAdd, { ...args }) }), _jsx("span", { title: "IconEqual", children: _jsx(IconEqual, { ...args }) }), _jsx("span", { title: "IconEqualNot", children: _jsx(IconEqualNot, { ...args }) }), _jsx("span", { title: "IconGreaterThan", children: _jsx(IconGreaterThan, { ...args }) }), _jsx("span", { title: "IconLessThan", children: _jsx(IconLessThan, { ...args }) }), _jsx("span", { title: "IconLessThanOrEqual", children: _jsx(IconLessThanOrEqual, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconGreaterThanOrEqual", children: _jsx(IconGreaterThanOrEqual, { ...args }) }), _jsx("span", { title: "IconSort", children: _jsx(IconSort, { ...args }) }), _jsx("span", { title: "IconPlatform", children: _jsx(IconPlatform, { ...args }) }), _jsx("span", { title: "Icon123", children: _jsx(Icon123, { ...args }) }), _jsx("span", { title: "IconABC", children: _jsx(IconABC, { ...args }) }), _jsx("span", { title: "IconCalendar", children: _jsx(IconCalendar, { ...args }) }), _jsx("span", { title: "IconAtSign", children: _jsx(IconAtSign, { ...args }) }), _jsx("span", { title: "IconEdit", children: _jsx(IconEdit, { ...args }) }), _jsx("span", { title: "IconWarning", children: _jsx(IconWarning, { ...args }) }), _jsx("span", { title: "IconInfo", children: _jsx(IconInfo, { ...args }) }), _jsx("span", { title: "IconSuccess", children: _jsx(IconSuccess, { ...args }) }), _jsx("span", { title: "IconAlarmPlus", children: _jsx(IconAlarmPlus, { ...args }) }), _jsx("span", { title: "IconHourglass", children: _jsx(IconHourglass, { ...args }) }), _jsx("span", { title: "IconNone", children: _jsx(IconNone, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconNotStarted", children: _jsx(IconNotStarted, { ...args }) }), _jsx("span", { title: "IconProgress", children: _jsx(IconProgress, { ...args }) }), _jsx("span", { title: "IconInsertAbove", children: _jsx(IconInsertAbove, { ...args }) }), _jsx("span", { title: "IconInsertBelow", children: _jsx(IconInsertBelow, { ...args }) }), _jsx("span", { title: "IconFilter", children: _jsx(IconFilter, { ...args }) }), _jsx("span", { title: "IconDcmtType", children: _jsx(IconDcmtType, { ...args }) }), _jsx("span", { title: "IconDcmtTypeOnlyMetadata", children: _jsx(IconDcmtTypeOnlyMetadata, { ...args }) }), _jsx("span", { title: "IconDcmtTypeSys", children: _jsx(IconDcmtTypeSys, { ...args }) }), _jsx("span", { title: "IconCloud", children: _jsx(IconCloud, { ...args }) }), _jsx("span", { title: "IconWeb", children: _jsx(IconWeb, { ...args }) }), _jsx("span", { title: "IconBxInfo", children: _jsx(IconBxInfo, { ...args }) }), _jsx("span", { title: "IconStop", children: _jsx(IconStop, { ...args }) }), _jsx("span", { title: "IconPlay", children: _jsx(IconPlay, { ...args }) }), _jsx("span", { title: "IconStopwatch", children: _jsx(IconStopwatch, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconUpdate", children: _jsx(IconUpdate, { ...args }) }), _jsx("span", { title: "IconSuccessCirlce", children: _jsx(IconSuccessCirlce, { ...args }) }), _jsx("span", { title: "IconCircleInfo", children: _jsx(IconCircleInfo, { ...args }) }), _jsx("span", { title: "IconDetails", children: _jsx(IconDetails, { ...args }) }), _jsx("span", { title: "IconFreeze", children: _jsx(IconFreeze, { ...args }) }), _jsx("span", { title: "IconUnFreeze", children: _jsx(IconUnFreeze, { ...args }) }), _jsx("span", { title: "IconProgressCompleted", children: _jsx(IconProgressCompleted, { ...args }) }), _jsx("span", { title: "IconProgressNotCompleted", children: _jsx(IconProgressNotCompleted, { ...args }) }), _jsx("span", { title: "IconProgressAbortRequested", children: _jsx(IconProgressAbortRequested, { ...args }) }), _jsx("span", { title: "IconProgressReady", children: _jsx(IconProgressReady, { ...args }) }), _jsx("span", { title: "IconProgressStarted", children: _jsx(IconProgressStarted, { ...args }) }), _jsx("span", { title: "IconProgressRunning", children: _jsx(IconProgressRunning, { ...args }) }), _jsx("span", { title: "IconUserLevelMember", children: _jsx(IconUserLevelMember, { ...args }) }), _jsx("span", { title: "IconUserLevelAdministrator", children: _jsx(IconUserLevelAdministrator, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconUserLevelSystemAdministrator", children: _jsx(IconUserLevelSystemAdministrator, { ...args }) }), _jsx("span", { title: "IconUserLevelAutonomousAdministrator", children: _jsx(IconUserLevelAutonomousAdministrator, { ...args }) }), _jsx("span", { title: "IconHistory", children: _jsx(IconHistory, { ...args }) }), _jsx("span", { title: "IconForceStop", children: _jsx(IconForceStop, { ...args }) }), _jsx("span", { title: "IconDraggabledots", children: _jsx(IconDraggabledots, { ...args }) }), _jsx("span", { title: "IconClear", children: _jsx(IconClear, { ...args }) }), _jsx("span", { title: "IconClearButton", children: _jsx(IconClearButton, { ...args }) }), _jsx("span", { title: "IconAddCircleOutline", children: _jsx(IconAddCircleOutline, { ...args }) }), _jsx("span", { title: "IconDotsVerticalCircleOutline", children: _jsx(IconDotsVerticalCircleOutline, { ...args }) }), _jsx("span", { title: "IconMapping", children: _jsx(IconMapping, { ...args }) }), _jsx("span", { title: "IconAutoConfig", children: _jsx(IconAutoConfig, { ...args }) }), _jsx("span", { title: "IconArchiveDoc", children: _jsx(IconArchiveDoc, { ...args }) }), _jsx("span", { title: "IconCommand", children: _jsx(IconCommand, { ...args }) }), _jsx("span", { title: "IconSum", children: _jsx(IconSum, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconDisk", children: _jsx(IconDisk, { ...args }) }), _jsx("span", { title: "IconDataList", children: _jsx(IconDataList, { ...args }) }), _jsx("span", { title: "IconWindowMaximize", children: _jsx(IconWindowMaximize, { ...args }) }), _jsx("span", { title: "IconWindowMinimize", children: _jsx(IconWindowMinimize, { ...args }) }), _jsx("span", { title: "IconReset", children: _jsx(IconReset, { ...args }) }), _jsx("span", { title: "IconExport", children: _jsx(IconExport, { ...args }) }), _jsx("span", { title: "IconImport", children: _jsx(IconImport, { ...args }) }), _jsx("span", { title: "IconPalette", children: _jsx(IconPalette, { ...args }) }), _jsx("span", { title: "IconFastSearch", children: _jsx(IconFastSearch, { ...args }) }), _jsx("span", { title: "IconUserGroup", children: _jsx(IconUserGroup, { ...args }) }), _jsx("span", { title: "IconBoard", children: _jsx(IconBoard, { ...args }) }), _jsx("span", { title: "IconActivity", children: _jsx(IconActivity, { ...args }) }), _jsx("span", { title: "IconWorkspace", children: _jsx(IconWorkspace, { ...args }) }), _jsx("span", { title: "IconAttachment", children: _jsx(IconAttachment, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconActivityLog", children: _jsx(IconActivityLog, { ...args }) }), _jsx("span", { title: "IconCrown", children: _jsx(IconCrown, { ...args }) }), _jsx("span", { title: "IconChangeUser", children: _jsx(IconChangeUser, { ...args }) }), _jsx("span", { title: "IconPaste", children: _jsx(IconPaste, { ...args }) }), _jsx("span", { title: "IconFileSearch", children: _jsx(IconFileSearch, { ...args }) }), _jsx("span", { title: "IconStar", children: _jsx(IconStar, { ...args }) }), _jsx("span", { title: "IconStarRemove", children: _jsx(IconStarRemove, { ...args }) }), _jsx("span", { title: "IconLightningFill", children: _jsx(IconLightningFill, { ...args }) }), _jsx("span", { title: "IconLink", children: _jsx(IconLink, { ...args }) }), _jsx("span", { title: "IconEasy", children: _jsx(IconEasy, { ...args }) }), _jsx("span", { title: "IconConvertFilePdf", children: _jsx(IconConvertFilePdf, { ...args }) }), _jsx("span", { title: "IconRelation", children: _jsx(IconRelation, { ...args }) }), _jsx("span", { title: "IconCheckIn", children: _jsx(IconCheckIn, { ...args }) }), _jsx("span", { title: "IconRecursiveOps", children: _jsx(IconRecursiveOps, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconSearchCheck", children: _jsx(IconSearchCheck, { ...args }) }), _jsx("span", { title: "IconSignature", children: _jsx(IconSignature, { ...args }) }), _jsx("span", { title: "IconSavedQuery", children: _jsx(IconSavedQuery, { ...args }) }), _jsx("span", { title: "IconSync", children: _jsx(IconSync, { ...args }) }), _jsx("span", { title: "IconAdvanced", children: _jsx(IconAdvanced, { ...args }) }), _jsx("span", { title: "IconSubstFile", children: _jsx(IconSubstFile, { ...args }) }), _jsx("span", { title: "IconBatchUpdate", children: _jsx(IconBatchUpdate, { ...args }) }), _jsx("span", { title: "IconShare", children: _jsx(IconShare, { ...args }) }), _jsx("span", { title: "IconSharedDcmt", children: _jsx(IconSharedDcmt, { ...args }) }), _jsx("span", { title: "IconExportTo", children: _jsx(IconExportTo, { ...args }) }), _jsx("span", { title: "IconArrowSortedDown", children: _jsx(IconArrowSortedDown, { ...args }) }), _jsx("span", { title: "IconArrowSortedUp", children: _jsx(IconArrowSortedUp, { ...args }) }), _jsx("span", { title: "IconStatistics", children: _jsx(IconStatistics, { ...args }) }), _jsx("span", { title: "IconArrowUnsorted", children: _jsx(IconArrowUnsorted, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconPrinter", children: _jsx(IconPrinter, { ...args }) }), _jsx("span", { title: "IconFactory", children: _jsx(IconFactory, { ...args }) }), _jsx("span", { title: "IconTest", children: _jsx(IconTest, { ...args }) }), _jsx("span", { title: "IconCheck", children: _jsx(IconCheck, { ...args }) }), _jsx("span", { title: "IconSortAsc", children: _jsx(IconSortAsc, { ...args }) }), _jsx("span", { title: "IconSortDesc", children: _jsx(IconSortDesc, { ...args }) }), _jsx("span", { title: "IconSortAscLetters", children: _jsx(IconSortAscLetters, { ...args }) }), _jsx("span", { title: "IconSortDescLetters", children: _jsx(IconSortDescLetters, { ...args }) }), _jsx("span", { title: "IconSortAscNumbers", children: _jsx(IconSortAscNumbers, { ...args }) }), _jsx("span", { title: "IconSortDescNumbers", children: _jsx(IconSortDescNumbers, { ...args }) }), _jsx("span", { title: "IconSortAscClock", children: _jsx(IconSortAscClock, { ...args }) }), _jsx("span", { title: "IconSortDescClock", children: _jsx(IconSortDescClock, { ...args }) }), _jsx("span", { title: "IconTree", children: _jsx(IconTree, { ...args }) }), _jsx("span", { title: "IconGrid", children: _jsx(IconGrid, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconList", children: _jsx(IconList, { ...args }) }), _jsx("span", { title: "IconLock", children: _jsx(IconLock, { ...args }) }), _jsx("span", { title: "IconLockClosed", children: _jsx(IconLockClosed, { ...args }) }), _jsx("span", { title: "IconBxLock", children: _jsx(IconBxLock, { ...args }) }), _jsx("span", { title: "IconFolder", children: _jsx(IconFolder, { ...args }) }), _jsx("span", { title: "IconFolderOpen", children: _jsx(IconFolderOpen, { ...args }) }), _jsx("span", { title: "IconTag", children: _jsx(IconTag, { ...args }) }), _jsx("span", { title: "IconFolderZip", children: _jsx(IconFolderZip, { ...args }) }), _jsx("span", { title: "IconBell", children: _jsx(IconBell, { ...args }) }), _jsx("span", { title: "IconBellCheck", children: _jsx(IconBellCheck, { ...args }) }), _jsx("span", { title: "IconBellOutline", children: _jsx(IconBellOutline, { ...args }) }), _jsx("span", { title: "IconBellCheckOutline", children: _jsx(IconBellCheckOutline, { ...args }) }), _jsx("span", { title: "IconEnvelopeOpenText", children: _jsx(IconEnvelopeOpenText, { ...args }) }), _jsx("span", { title: "IconMetadata_Computed", children: _jsx(IconMetadata_Computed, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconMetadata_Text", children: _jsx(IconMetadata_Text, { ...args }) }), _jsx("span", { title: "IconMetadata_User", children: _jsx(IconMetadata_User, { ...args }) }), _jsx("span", { title: "IconMetadata_Date", children: _jsx(IconMetadata_Date, { ...args }) }), _jsx("span", { title: "IconMetadata_DataList", children: _jsx(IconMetadata_DataList, { ...args }) }), _jsx("span", { title: "IconMetadata_DynamicDataList", children: _jsx(IconMetadata_DynamicDataList, { ...args }) }), _jsx("span", { title: "IconMetadata_Numerator", children: _jsx(IconMetadata_Numerator, { ...args }) }), _jsx("span", { title: "IconMetadata_Special", children: _jsx(IconMetadata_Special, { ...args }) }), _jsx("span", { title: "IconMetadata_Numeric", children: _jsx(IconMetadata_Numeric, { ...args }) }), _jsx("span", { title: "IconMetadata", children: _jsx(IconMetadata, { ...args }) }), _jsx("span", { title: "IconRelationManyToMany", children: _jsx(IconRelationManyToMany, { ...args }) }), _jsx("span", { title: "IconRelationOneToMany", children: _jsx(IconRelationOneToMany, { ...args }) }), _jsx("span", { title: "IconBoxArchiveIn", children: _jsx(IconBoxArchiveIn, { ...args }) }), _jsx("span", { title: "IconBasket", children: _jsx(IconBasket, { ...args }) }), _jsx("span", { title: "IconSignCert", children: _jsx(IconSignCert, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconServerService", children: _jsx(IconServerService, { ...args }) }), _jsx("span", { title: "IconUserExpired", children: _jsx(IconUserExpired, { ...args }) }), _jsx("span", { title: "IconAddressBook", children: _jsx(IconAddressBook, { ...args }) }), _jsx("span", { title: "IconFreeSearch", children: _jsx(IconFreeSearch, { ...args }) }), _jsx("span", { title: "IconMic", children: _jsx(IconMic, { ...args }) })] })] }));
|
|
11
|
+
const TMIconsTemplate = (args) => (_jsxs(_Fragment, { children: [_jsxs("div", { style: { display: "flex", gap: "20px" }, children: [_jsx("span", { title: "IconAccessPoint", children: _jsx(IconAccessPoint, { ...args }) }), _jsx("span", { title: "IconCloseOutline", children: _jsx(IconCloseOutline, { ...args }) }), _jsx("span", { title: "IconArchive", children: _jsx(IconArchive, { ...args }) }), _jsx("span", { title: "IconLogin", children: _jsx(IconLogin, { ...args }) }), _jsx("span", { title: "IconUser", children: _jsx(IconUser, { ...args }) }), _jsx("span", { title: "IconPassword", children: _jsx(IconPassword, { ...args }) }), _jsx("span", { title: "IconLanguage", children: _jsx(IconLanguage, { ...args }) }), _jsx("span", { title: "IconSuitcase", children: _jsx(IconSuitcase, { ...args }) }), _jsx("span", { title: "IconProcess", children: _jsx(IconProcess, { ...args }) }), _jsx("span", { title: "IconSupport", children: _jsx(IconSupport, { ...args }) }), _jsx("span", { title: "IconMonitor", children: _jsx(IconMonitor, { ...args }) }), _jsx("span", { title: "IconDashboard", children: _jsx(IconDashboard, { ...args }) }), _jsx("span", { title: "IconAdd", children: _jsx(IconAdd, { ...args }) }), _jsx("span", { title: "IconDelete", children: _jsx(IconDelete, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconDuplicate", children: _jsx(IconDuplicate, { ...args }) }), _jsx("span", { title: "IconRefresh", children: _jsx(IconRefresh, { ...args }) }), _jsx("span", { title: "IconExpandRight", children: _jsx(IconExpandRight, { ...args }) }), _jsx("span", { title: "IconColumns", children: _jsx(IconColumns, { ...args }) }), _jsx("span", { title: "IconSave", children: _jsx(IconSave, { ...args }) }), _jsx("span", { title: "IconArrowDown", children: _jsx(IconArrowDown, { ...args }) }), _jsx("span", { title: "IconArrowUp", children: _jsx(IconArrowUp, { ...args }) }), _jsx("span", { title: "IconUndo", children: _jsx(IconUndo, { ...args }) }), _jsx("span", { title: "IconShow", children: _jsx(IconShow, { ...args }) }), _jsx("span", { title: "IconHide", children: _jsx(IconHide, { ...args }) }), _jsx("span", { title: "IconPreview", children: _jsx(IconPreview, { ...args }) }), _jsx("span", { title: "IconCount", children: _jsx(IconCount, { ...args }) }), _jsx("span", { title: "IconPencil", children: _jsx(IconPencil, { ...args }) }), _jsx("span", { title: "IconEraser", children: _jsx(IconEraser, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconAll", children: _jsx(IconAll, { ...args }) }), _jsx("span", { title: "IconSelected", children: _jsx(IconSelected, { ...args }) }), _jsx("span", { title: "IconVisible", children: _jsx(IconVisible, { ...args }) }), _jsx("span", { title: "IconCloseCircle", children: _jsx(IconCloseCircle, { ...args }) }), _jsx("span", { title: "IconApplyAndClose", children: _jsx(IconApplyAndClose, { ...args }) }), _jsx("span", { title: "IconApply", children: _jsx(IconApply, { ...args }) }), _jsx("span", { title: "IconSettings", children: _jsx(IconSettings, { ...args }) }), _jsx("span", { title: "IconMaximize", children: _jsx(IconMaximize, { ...args }) }), _jsx("span", { title: "IconMinimize", children: _jsx(IconMinimize, { ...args }) }), _jsx("span", { title: "IconNotification", children: _jsx(IconNotification, { ...args }) }), _jsx("span", { title: "IconHeart", children: _jsx(IconHeart, { ...args }) }), _jsx("span", { title: "IconUserProfile", children: _jsx(IconUserProfile, { ...args }) }), _jsx("span", { title: "IconWorkflow", children: _jsx(IconWorkflow, { ...args }) }), _jsx("span", { title: "IconBackward", children: _jsx(IconBackward, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconForward", children: _jsx(IconForward, { ...args }) }), _jsx("span", { title: "IconFastBackward", children: _jsx(IconFastBackward, { ...args }) }), _jsx("span", { title: "IconFastForward", children: _jsx(IconFastForward, { ...args }) }), _jsx("span", { title: "IconLogout", children: _jsx(IconLogout, { ...args }) }), _jsx("span", { title: "IconWifi", children: _jsx(IconWifi, { ...args }) }), _jsx("span", { title: "IconMenuHorizontal", children: _jsx(IconMenuHorizontal, { ...args }) }), _jsx("span", { title: "IconMenuVertical", children: _jsx(IconMenuVertical, { ...args }) }), _jsx("span", { title: "IconOpenInNew", children: _jsx(IconOpenInNew, { ...args }) }), _jsx("span", { title: "IconMail", children: _jsx(IconMail, { ...args }) }), _jsx("span", { title: "IconCopy", children: _jsx(IconCopy, { ...args }) }), _jsx("span", { title: "IconSearch", children: _jsx(IconSearch, { ...args }) }), _jsx("span", { title: "IconMenuKebab", children: _jsx(IconMenuKebab, { ...args }) }), _jsx("span", { title: "IconDown", children: _jsx(IconDown, { ...args }) }), _jsx("span", { title: "IconUp", children: _jsx(IconUp, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconLeft", children: _jsx(IconLeft, { ...args }) }), _jsx("span", { title: "IconRight", children: _jsx(IconRight, { ...args }) }), _jsx("span", { title: "IconArrowLeft", children: _jsx(IconArrowLeft, { ...args }) }), _jsx("span", { title: "IconArrowRight", children: _jsx(IconArrowRight, { ...args }) }), _jsx("span", { title: "IconFileDots", children: _jsx(IconFileDots, { ...args }) }), _jsx("span", { title: "IconDownload", children: _jsx(IconDownload, { ...args }) }), _jsx("span", { title: "IconUpload", children: _jsx(IconUpload, { ...args }) }), _jsx("span", { title: "IconFolderSearch", children: _jsx(IconFolderSearch, { ...args }) }), _jsx("span", { title: "IconFoldeAdd", children: _jsx(IconFoldeAdd, { ...args }) }), _jsx("span", { title: "IconEqual", children: _jsx(IconEqual, { ...args }) }), _jsx("span", { title: "IconEqualNot", children: _jsx(IconEqualNot, { ...args }) }), _jsx("span", { title: "IconGreaterThan", children: _jsx(IconGreaterThan, { ...args }) }), _jsx("span", { title: "IconLessThan", children: _jsx(IconLessThan, { ...args }) }), _jsx("span", { title: "IconLessThanOrEqual", children: _jsx(IconLessThanOrEqual, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconGreaterThanOrEqual", children: _jsx(IconGreaterThanOrEqual, { ...args }) }), _jsx("span", { title: "IconSort", children: _jsx(IconSort, { ...args }) }), _jsx("span", { title: "IconPlatform", children: _jsx(IconPlatform, { ...args }) }), _jsx("span", { title: "Icon123", children: _jsx(Icon123, { ...args }) }), _jsx("span", { title: "IconABC", children: _jsx(IconABC, { ...args }) }), _jsx("span", { title: "IconCalendar", children: _jsx(IconCalendar, { ...args }) }), _jsx("span", { title: "IconAtSign", children: _jsx(IconAtSign, { ...args }) }), _jsx("span", { title: "IconEdit", children: _jsx(IconEdit, { ...args }) }), _jsx("span", { title: "IconWarning", children: _jsx(IconWarning, { ...args }) }), _jsx("span", { title: "IconInfo", children: _jsx(IconInfo, { ...args }) }), _jsx("span", { title: "IconSuccess", children: _jsx(IconSuccess, { ...args }) }), _jsx("span", { title: "IconAlarmPlus", children: _jsx(IconAlarmPlus, { ...args }) }), _jsx("span", { title: "IconHourglass", children: _jsx(IconHourglass, { ...args }) }), _jsx("span", { title: "IconNone", children: _jsx(IconNone, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconNotStarted", children: _jsx(IconNotStarted, { ...args }) }), _jsx("span", { title: "IconProgress", children: _jsx(IconProgress, { ...args }) }), _jsx("span", { title: "IconInsertAbove", children: _jsx(IconInsertAbove, { ...args }) }), _jsx("span", { title: "IconInsertBelow", children: _jsx(IconInsertBelow, { ...args }) }), _jsx("span", { title: "IconFilter", children: _jsx(IconFilter, { ...args }) }), _jsx("span", { title: "IconDcmtType", children: _jsx(IconDcmtType, { ...args }) }), _jsx("span", { title: "IconDcmtTypeOnlyMetadata", children: _jsx(IconDcmtTypeOnlyMetadata, { ...args }) }), _jsx("span", { title: "IconDcmtTypeSys", children: _jsx(IconDcmtTypeSys, { ...args }) }), _jsx("span", { title: "IconCloud", children: _jsx(IconCloud, { ...args }) }), _jsx("span", { title: "IconWeb", children: _jsx(IconWeb, { ...args }) }), _jsx("span", { title: "IconBxInfo", children: _jsx(IconBxInfo, { ...args }) }), _jsx("span", { title: "IconStop", children: _jsx(IconStop, { ...args }) }), _jsx("span", { title: "IconPlay", children: _jsx(IconPlay, { ...args }) }), _jsx("span", { title: "IconStopwatch", children: _jsx(IconStopwatch, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconUpdate", children: _jsx(IconUpdate, { ...args }) }), _jsx("span", { title: "IconSuccessCirlce", children: _jsx(IconSuccessCirlce, { ...args }) }), _jsx("span", { title: "IconCircleInfo", children: _jsx(IconCircleInfo, { ...args }) }), _jsx("span", { title: "IconDetails", children: _jsx(IconDetails, { ...args }) }), _jsx("span", { title: "IconFreeze", children: _jsx(IconFreeze, { ...args }) }), _jsx("span", { title: "IconUnFreeze", children: _jsx(IconUnFreeze, { ...args }) }), _jsx("span", { title: "IconProgressCompleted", children: _jsx(IconProgressCompleted, { ...args }) }), _jsx("span", { title: "IconProgressNotCompleted", children: _jsx(IconProgressNotCompleted, { ...args }) }), _jsx("span", { title: "IconProgressAbortRequested", children: _jsx(IconProgressAbortRequested, { ...args }) }), _jsx("span", { title: "IconProgressReady", children: _jsx(IconProgressReady, { ...args }) }), _jsx("span", { title: "IconProgressStarted", children: _jsx(IconProgressStarted, { ...args }) }), _jsx("span", { title: "IconProgressRunning", children: _jsx(IconProgressRunning, { ...args }) }), _jsx("span", { title: "IconUserLevelMember", children: _jsx(IconUserLevelMember, { ...args }) }), _jsx("span", { title: "IconUserLevelAdministrator", children: _jsx(IconUserLevelAdministrator, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconUserLevelSystemAdministrator", children: _jsx(IconUserLevelSystemAdministrator, { ...args }) }), _jsx("span", { title: "IconUserLevelAutonomousAdministrator", children: _jsx(IconUserLevelAutonomousAdministrator, { ...args }) }), _jsx("span", { title: "IconHistory", children: _jsx(IconHistory, { ...args }) }), _jsx("span", { title: "IconForceStop", children: _jsx(IconForceStop, { ...args }) }), _jsx("span", { title: "IconDraggabledots", children: _jsx(IconDraggabledots, { ...args }) }), _jsx("span", { title: "IconClear", children: _jsx(IconClear, { ...args }) }), _jsx("span", { title: "IconClearButton", children: _jsx(IconClearButton, { ...args }) }), _jsx("span", { title: "IconAddCircleOutline", children: _jsx(IconAddCircleOutline, { ...args }) }), _jsx("span", { title: "IconDotsVerticalCircleOutline", children: _jsx(IconDotsVerticalCircleOutline, { ...args }) }), _jsx("span", { title: "IconMapping", children: _jsx(IconMapping, { ...args }) }), _jsx("span", { title: "IconAutoConfig", children: _jsx(IconAutoConfig, { ...args }) }), _jsx("span", { title: "IconArchiveDoc", children: _jsx(IconArchiveDoc, { ...args }) }), _jsx("span", { title: "IconCommand", children: _jsx(IconCommand, { ...args }) }), _jsx("span", { title: "IconSum", children: _jsx(IconSum, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconDisk", children: _jsx(IconDisk, { ...args }) }), _jsx("span", { title: "IconDataList", children: _jsx(IconDataList, { ...args }) }), _jsx("span", { title: "IconWindowMaximize", children: _jsx(IconWindowMaximize, { ...args }) }), _jsx("span", { title: "IconWindowMinimize", children: _jsx(IconWindowMinimize, { ...args }) }), _jsx("span", { title: "IconReset", children: _jsx(IconReset, { ...args }) }), _jsx("span", { title: "IconExport", children: _jsx(IconExport, { ...args }) }), _jsx("span", { title: "IconImport", children: _jsx(IconImport, { ...args }) }), _jsx("span", { title: "IconPalette", children: _jsx(IconPalette, { ...args }) }), _jsx("span", { title: "IconFastSearch", children: _jsx(IconFastSearch, { ...args }) }), _jsx("span", { title: "IconUserGroup", children: _jsx(IconUserGroup, { ...args }) }), _jsx("span", { title: "IconBoard", children: _jsx(IconBoard, { ...args }) }), _jsx("span", { title: "IconActivity", children: _jsx(IconActivity, { ...args }) }), _jsx("span", { title: "IconWorkspace", children: _jsx(IconWorkspace, { ...args }) }), _jsx("span", { title: "IconAttachment", children: _jsx(IconAttachment, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconActivityLog", children: _jsx(IconActivityLog, { ...args }) }), _jsx("span", { title: "IconCrown", children: _jsx(IconCrown, { ...args }) }), _jsx("span", { title: "IconChangeUser", children: _jsx(IconChangeUser, { ...args }) }), _jsx("span", { title: "IconPaste", children: _jsx(IconPaste, { ...args }) }), _jsx("span", { title: "IconFileSearch", children: _jsx(IconFileSearch, { ...args }) }), _jsx("span", { title: "IconStar", children: _jsx(IconStar, { ...args }) }), _jsx("span", { title: "IconStarRemove", children: _jsx(IconStarRemove, { ...args }) }), _jsx("span", { title: "IconLightningFill", children: _jsx(IconLightningFill, { ...args }) }), _jsx("span", { title: "IconLink", children: _jsx(IconLink, { ...args }) }), _jsx("span", { title: "IconEasy", children: _jsx(IconEasy, { ...args }) }), _jsx("span", { title: "IconConvertFilePdf", children: _jsx(IconConvertFilePdf, { ...args }) }), _jsx("span", { title: "IconRelation", children: _jsx(IconRelation, { ...args }) }), _jsx("span", { title: "IconCheckIn", children: _jsx(IconCheckIn, { ...args }) }), _jsx("span", { title: "IconRecursiveOps", children: _jsx(IconRecursiveOps, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconSearchCheck", children: _jsx(IconSearchCheck, { ...args }) }), _jsx("span", { title: "IconSignature", children: _jsx(IconSignature, { ...args }) }), _jsx("span", { title: "IconSavedQuery", children: _jsx(IconSavedQuery, { ...args }) }), _jsx("span", { title: "IconSync", children: _jsx(IconSync, { ...args }) }), _jsx("span", { title: "IconAdvanced", children: _jsx(IconAdvanced, { ...args }) }), _jsx("span", { title: "IconSubstFile", children: _jsx(IconSubstFile, { ...args }) }), _jsx("span", { title: "IconBatchUpdate", children: _jsx(IconBatchUpdate, { ...args }) }), _jsx("span", { title: "IconShare", children: _jsx(IconShare, { ...args }) }), _jsx("span", { title: "IconSharedDcmt", children: _jsx(IconSharedDcmt, { ...args }) }), _jsx("span", { title: "IconExportTo", children: _jsx(IconExportTo, { ...args }) }), _jsx("span", { title: "IconArrowSortedDown", children: _jsx(IconArrowSortedDown, { ...args }) }), _jsx("span", { title: "IconArrowSortedUp", children: _jsx(IconArrowSortedUp, { ...args }) }), _jsx("span", { title: "IconStatistics", children: _jsx(IconStatistics, { ...args }) }), _jsx("span", { title: "IconArrowUnsorted", children: _jsx(IconArrowUnsorted, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconPrinter", children: _jsx(IconPrinter, { ...args }) }), _jsx("span", { title: "IconFactory", children: _jsx(IconFactory, { ...args }) }), _jsx("span", { title: "IconTest", children: _jsx(IconTest, { ...args }) }), _jsx("span", { title: "IconCheck", children: _jsx(IconCheck, { ...args }) }), _jsx("span", { title: "IconSortAsc", children: _jsx(IconSortAsc, { ...args }) }), _jsx("span", { title: "IconSortDesc", children: _jsx(IconSortDesc, { ...args }) }), _jsx("span", { title: "IconSortAscLetters", children: _jsx(IconSortAscLetters, { ...args }) }), _jsx("span", { title: "IconSortDescLetters", children: _jsx(IconSortDescLetters, { ...args }) }), _jsx("span", { title: "IconSortAscNumbers", children: _jsx(IconSortAscNumbers, { ...args }) }), _jsx("span", { title: "IconSortDescNumbers", children: _jsx(IconSortDescNumbers, { ...args }) }), _jsx("span", { title: "IconSortAscClock", children: _jsx(IconSortAscClock, { ...args }) }), _jsx("span", { title: "IconSortDescClock", children: _jsx(IconSortDescClock, { ...args }) }), _jsx("span", { title: "IconTree", children: _jsx(IconTree, { ...args }) }), _jsx("span", { title: "IconGrid", children: _jsx(IconGrid, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconList", children: _jsx(IconList, { ...args }) }), _jsx("span", { title: "IconLock", children: _jsx(IconLock, { ...args }) }), _jsx("span", { title: "IconLockClosed", children: _jsx(IconLockClosed, { ...args }) }), _jsx("span", { title: "IconBxLock", children: _jsx(IconBxLock, { ...args }) }), _jsx("span", { title: "IconFolder", children: _jsx(IconFolder, { ...args }) }), _jsx("span", { title: "IconFolderOpen", children: _jsx(IconFolderOpen, { ...args }) }), _jsx("span", { title: "IconTag", children: _jsx(IconTag, { ...args }) }), _jsx("span", { title: "IconFolderZip", children: _jsx(IconFolderZip, { ...args }) }), _jsx("span", { title: "IconBell", children: _jsx(IconBell, { ...args }) }), _jsx("span", { title: "IconBellCheck", children: _jsx(IconBellCheck, { ...args }) }), _jsx("span", { title: "IconBellOutline", children: _jsx(IconBellOutline, { ...args }) }), _jsx("span", { title: "IconBellCheckOutline", children: _jsx(IconBellCheckOutline, { ...args }) }), _jsx("span", { title: "IconEnvelopeOpenText", children: _jsx(IconEnvelopeOpenText, { ...args }) }), _jsx("span", { title: "IconMetadata_Computed", children: _jsx(IconMetadata_Computed, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconMetadata_Text", children: _jsx(IconMetadata_Text, { ...args }) }), _jsx("span", { title: "IconMetadata_User", children: _jsx(IconMetadata_User, { ...args }) }), _jsx("span", { title: "IconMetadata_Date", children: _jsx(IconMetadata_Date, { ...args }) }), _jsx("span", { title: "IconMetadata_DataList", children: _jsx(IconMetadata_DataList, { ...args }) }), _jsx("span", { title: "IconMetadata_DynamicDataList", children: _jsx(IconMetadata_DynamicDataList, { ...args }) }), _jsx("span", { title: "IconMetadata_Numerator", children: _jsx(IconMetadata_Numerator, { ...args }) }), _jsx("span", { title: "IconMetadata_Special", children: _jsx(IconMetadata_Special, { ...args }) }), _jsx("span", { title: "IconMetadata_Numeric", children: _jsx(IconMetadata_Numeric, { ...args }) }), _jsx("span", { title: "IconMetadata", children: _jsx(IconMetadata, { ...args }) }), _jsx("span", { title: "IconRelationManyToMany", children: _jsx(IconRelationManyToMany, { ...args }) }), _jsx("span", { title: "IconRelationOneToMany", children: _jsx(IconRelationOneToMany, { ...args }) }), _jsx("span", { title: "IconBoxArchiveIn", children: _jsx(IconBoxArchiveIn, { ...args }) }), _jsx("span", { title: "IconBasket", children: _jsx(IconBasket, { ...args }) }), _jsx("span", { title: "IconSignCert", children: _jsx(IconSignCert, { ...args }) })] }), _jsxs("div", { style: { display: "flex", gap: "20px", marginTop: 20 }, children: [_jsx("span", { title: "IconServerService", children: _jsx(IconServerService, { ...args }) }), _jsx("span", { title: "IconUserExpired", children: _jsx(IconUserExpired, { ...args }) }), _jsx("span", { title: "IconAddressBook", children: _jsx(IconAddressBook, { ...args }) }), _jsx("span", { title: "IconFreeSearch", children: _jsx(IconFreeSearch, { ...args }) }), _jsx("span", { title: "IconMic", children: _jsx(IconMic, { ...args }) }), _jsx("span", { title: "IconKey", children: _jsx(IconKey, { ...args }) })] })] }));
|
|
12
12
|
export const TMIcons = TMIconsTemplate.bind({});
|
|
13
13
|
TMIcons.args = { fontSize: "48px", color: "black" };
|