@topconsultnpm/sdkui-react-beta 6.14.53 → 6.14.55

package/lib/components/base/TMAreaManager.js

@@ -7,12 +7,15 @@ import FileSystemError from "devextreme/file_management/error";
 import Button from "devextreme/ui/button";
 import { alert, confirm } from "devextreme/ui/dialog";
 import { loadMessages } from 'devextreme/localization';
-import { Globalization, IconAll, IconCloud, IconSelected, SDKUI_Localizator } from '../../helper';
+import { Globalization, IconAll, IconCloud, IconFolder, IconFolderForCSS, IconSelected, SDKUI_Localizator, svgToString } from '../../helper';
 import { TMExceptionBoxManager } from './TMPopUp';
 import ShowAlert from './TMAlert';
 import { TMLayoutWaitingContainer } from './TMWaitPanel';
 import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
-import { IconFolder, IconPdf, IconTxt, IconXls, IconDocx, IconImage, IconZip, IconXml, IconMp4, IconEmail, IconPpt, IconSigned, IconExe, IconHtml, IconDwg, IconDicom, IconSlddrw } from '../../assets/thumbnails';
+import { IconPdf, IconTxt, IconXls, IconDocx, IconImage, IconZip, IconXml, IconMp4, IconEmail, IconPpt, IconSigned, IconExe, IconHtml, IconDwg, IconDicom, IconSlddrw } from '../../assets/thumbnails';
+import { TMColors } from '../../utils/theme';
+import styled from 'styled-components';
+import { renderToStaticMarkup } from 'react-dom/server';
 export class TMFileSystemItem {
     constructor() {
         this.name = "";
@@ -22,6 +25,32 @@ export class TMFileSystemItem {
     }
 }
 let abortController = new AbortController();
+const svgString = encodeURIComponent(renderToStaticMarkup(_jsx(IconFolderForCSS, { fill: "#9fc6e7" })));
+const svgDataUrl = `data:image/svg+xml,${svgString}`;
+const StyledFileManagerWrapper = styled.div `
+  .dx-filemanager .dx-treeview-item .dx-icon-folder {
+    display: none !important;
+  }
+  .dx-filemanager .dx-treeview-item .dx-treeview-item-content {
+    position: relative !important;
+    padding-left: 26px !important;
+    min-height: 22px !important;
+  }
+  .dx-filemanager .dx-treeview-item .dx-treeview-item-content::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 60%;
+    width: 20px;
+    height: 20px;
+    transform: translateY(-50%);
+    background-image: url("${svgDataUrl}");
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: inline-block;
+    z-index: 1;
+  }
+`;
 const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false }) => {
     // State to store the instance of CustomFileSystemProvider. It is initialized once and used for managing file system operations.
     const [areaProvider, setAreaProvider] = useState();
@@ -603,7 +632,7 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
     };
     const customizeIcon = useCallback((fileSystemItem) => {
         if (fileSystemItem.isDirectory) {
-            return IconFolder;
+            return svgToString(_jsx(IconFolder, { fontSize: 20, color: TMColors.iconLight }));
         }
         else {
             const fileExtension = fileSystemItem.getFileExtension();
@@ -694,7 +723,7 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
             alert(`"${e.name}" ${SDKUI_Localizator.FolderExist}`, SDKUI_Localizator.Attention);
         }
     };
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs(FileManager, { width: props.width, ref: fileManagerRef, height: `calc(${props.height} - 30px)`, onItemMoving: onItemCopying, onItemCopying: onItemCopying, onFileUploading: onFileUploading, fileSystemProvider: areaProvider, customizeThumbnail: customizeIcon, rootFolderName: SDK_Localizator.Areas, onSelectionChanged: onSelectionChanged, onDirectoryCreating: onDirectoryCreating, onFocusedItemChanged: onFocusedItemChanged, onSelectedFileOpened: onSelectedFileOpened, onContextMenuItemClick: onContextMenuItemClick, 
+    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs(StyledFileManagerWrapper, { style: { width: "100%", height: "100%" }, children: [_jsxs(FileManager, { width: props.width, ref: fileManagerRef, height: `calc(${props.height} - 30px)`, onItemMoving: onItemCopying, onItemCopying: onItemCopying, onFileUploading: onFileUploading, fileSystemProvider: areaProvider, customizeThumbnail: customizeIcon, rootFolderName: SDK_Localizator.Areas, onSelectionChanged: onSelectionChanged, onDirectoryCreating: onDirectoryCreating, onFocusedItemChanged: onFocusedItemChanged, onSelectedFileOpened: onSelectedFileOpened, onContextMenuItemClick: onContextMenuItemClick, 
                     /* onItemMoved={() => setCounter(counter => counter + 1)}
                     onItemCopied={() => setCounter(counter => counter + 1)}
                     onItemDeleted={() => setCounter(counter => counter - 1)}

package/lib/helper/TMIcons.d.ts

@@ -188,6 +188,10 @@ declare function IconLock(props: Readonly<React.SVGProps<SVGSVGElement>>): impor
 declare function IconLockClosed(props?: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 declare function IconBxLock(props?: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 declare function IconFolder(props?: Readonly<React.SVGProps<SVGSVGElement>>): import("react/jsx-runtime").JSX.Element;
+export declare function IconFolderForCSS({ fill, ...props }: {
+    [x: string]: any;
+    fill?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
 declare function IconFolderOpen(props: Readonly<React.SVGProps<SVGSVGElement>>): import("react/jsx-runtime").JSX.Element;
 declare function IconTag(props?: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 declare function IconFolderZip(props?: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/lib/helper/TMIcons.js

@@ -477,6 +477,9 @@ function IconFolder(props) {
     // <svg fontSize={props?.fontSize ? props?.fontSize : FONTSIZE} viewBox="0 0 1024 1024" fill="currentColor" height="1em" width="1em" {...props} > <path d="M880 298.4H521L403.7 186.2a8.15 8.15 0 00-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32z" /> </svg>
     _jsx("svg", { focusable: "false", viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, fill: "currentColor", children: _jsxs("g", { children: [_jsx("path", { d: "M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" }), _jsx("path", { d: "M0 0h24v24H0z", fill: "none" })] }) }));
 }
+export function IconFolderForCSS({ fill = "#9fc6e7", ...props }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "20", height: "20", ...props, children: _jsxs("g", { children: [_jsx("path", { d: "M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z", fill: fill }), _jsx("path", { d: "M0 0h24v24H0z", fill: "none" })] }) }));
+}
 function IconFolderOpen(props) { return (_jsxs("svg", { fontSize: props.fontSize ? props.fontSize : FONTSIZE, viewBox: "0 0 1024 1024", fill: "currentColor", height: "1em", width: "1em", ...props, children: [" ", _jsx("path", { d: "M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 00-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zm-180 0H238c-13 0-24.8 7.9-29.7 20L136 643.2V256h188.5l119.6 114.4H748V444z" }), " "] })); }
 function IconTag(props) { return (_jsxs("svg", { fontSize: props?.fontSize ? props.fontSize : FONTSIZE, viewBox: "0 0 448 512", fill: "currentColor", height: "1em", width: "1em", ...props, children: [" ", _jsx("path", { d: "M0 80v149.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0l133.5-133.5c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7H48C21.5 32 0 53.5 0 80zm112 96c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z" }), " "] })); }
 function IconFolderZip(props) { return (_jsxs("svg", { fontSize: props?.fontSize ? props.fontSize : FONTSIZE, viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: [" ", _jsx("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2m-2 6h-2v2h2v2h-2v2h-2v-2h2v-2h-2v-2h2v-2h-2V8h2v2h2v2z" }), " "] })); }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.14.53",
+    "version": "6.14.55",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",