feat: updated libs and components

Author: lvargas

package.json

@@ -35,39 +35,41 @@
     "axios": "^0.21.1",
     "case": "^1.6.3",
     "code-easy-components": "^0.0.16",
-    "cross-env": "^7.0.2",
-    "dateformat": "^3.0.3",
+    "cross-env": "^7.0.3",
+    "dateformat": "^4.5.1",
     "file-saver": "^2.0.5",
-    "jszip": "^3.5.0",
-    "react": "^16.10.2",
-    "react-dnd": "^9.4.0",
-    "react-dnd-html5-backend": "^9.4.0",
-    "react-dom": "^16.10.2",
-    "react-icons": "^4.1.0",
-    "react-monaco-editor": "^0.41.2",
+    "jszip": "^3.6.0",
+    "react": "^17.0.2",
+    "react-dnd": "^14.0.2",
+    "react-dnd-html5-backend": "^14.0.0",
+    "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0",
+    "react-monaco-editor": "^0.43.0",
     "react-observing": "^1.3.7",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "^3.2.0",
-    "yup": "^0.32.8"
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^4.0.3",
+    "uuid": "^8.3.2",
+    "yup": "^0.32.9"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^13.1.9",
     "@types/dateformat": "^3.0.1",
-    "@types/file-saver": "^2.0.1",
-    "@types/jest": "^26.0.13",
-    "@types/mocha": "^8.0.3",
-    "@types/react": "^16.9.9",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/file-saver": "^2.0.2",
+    "@types/jest": "^26.0.23",
+    "@types/mocha": "^8.2.2",
+    "@types/react": "^17.0.5",
+    "@types/react-dom": "^17.0.5",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/uuid": "^8.3.0",
     "@types/yup": "^0.29.11",
     "commitizen": "^4.0.4",
     "cz-conventional-changelog": "3.1.0",
     "husky": "^4.2.5",
-    "typescript": "^3.6.3"
+    "typescript": "^4.2.4"
   },
   "config": {
     "commitizen": {

src/app/pages/editor/editor-tab/TreeManager.Controller.tsx

@@ -3,7 +3,7 @@ import { ISubscription, observe, transform, useObserver, useObserverValue } from
 import { IconTrash, Utils } from 'code-easy-components';
 
 import { Tab, TreeItemFolder, TreeItemGlobalAction, TreeItemInputVariable, TreeItemLocalVariable, TreeItemOutpuVariable, TreeItemRouterConsume, TreeItemRouterExpose, TreeItemRouterInputVariable } from '../../../shared/models';
-import { TreeManager, ITreeItem, CustomDragLayer } from '../../../shared/components/external';
+import { TreeManager, ITreeItem } from '../../../shared/components/external';
 import { useEditorContext, useTabList, useCurrentFocus } from '../../../shared/hooks';
 import { ECurrentFocus, EComponentType, ETabType, } from '../../../shared/enuns';
 import { AssetsService, openContextMenu } from '../../../shared/services';
@@ -378,6 +378,7 @@ export const TreeManagerController: React.FC = () => {
             isDisabledDrop: observe(undefined),
             isDisabled: observe(undefined),
             iconSize: observe(undefined),
+            order: observe(0),
         }));
     }, [itemsCurrent]);
 
@@ -425,11 +426,7 @@ export const TreeManagerController: React.FC = () => {
                 id: 'Inspector',
                 isUseDrag: true,
                 isUseDrop: true,
-                activeItemBackgroundColor: '#ffffff05',
-                focusedItemBackgroundColor: '#ffffff05',
-                editingItemBackgroundColor: '#ffffff10',
                 showEmptyMessage: treeManagerItems.length === 0,
-                customDragLayer: item => <CustomDragLayer children={item} />
             }}
         />
     );

src/app/shared/components/external/flow-editor/components/editor-panel/EditorPanel.tsx

@@ -48,7 +48,8 @@ export const EditorPanel = React.forwardRef(({ allowedsInDrop, onDropItem, onDro
         }
     }
 
-    if (!ref) ref = useRef<SVGSVGElement>(null);
+    const newRef = useRef<SVGSVGElement>(null);
+    if (!ref) ref = newRef;
 
     const handleKeyDown = useCallback((e: React.KeyboardEvent<SVGSVGElement>) => {
         /** Delete   */ if (e.key === 'Delete') onKeyDownDelete && onKeyDownDelete(e);

src/app/shared/components/external/flow-editor/components/tool-bar/components/ListItemDraggable.tsx

@@ -15,6 +15,7 @@ const ListItemDraggable: React.FC<ListItemProps> = ({ flowItemType, itemType, la
 
     /** Permite que uym elemento seja arrastado e adicionado dentro do editor de fluxo. */
     const [, dragRef] = useDrag<IDroppableItem, any, any>({
+        type: itemType || 'undefined',
         item: { type: itemType || 'undefined', itemProps: { id: undefined, label, itemType, flowItemType, icon, width: 40, height: 40 } },
         collect: monitor => ({ isDragging: monitor.isDragging() }),
     });

src/app/shared/components/external/flow-editor/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import HTML5Backend from 'react-dnd-html5-backend';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { DndProvider } from 'react-dnd';
 
 import { ConfigurationProvider, ItemsProvider } from './shared/contexts';

src/app/shared/components/external/properties-editor/shared/components/auto-complete/SearchAutoCompleteOption.tsx

@@ -21,7 +21,7 @@ export const SearchAutoCompleteOption: React.FC<ISearchAutoCompleteOptionProps>
         id={String(id)}
         disabled={disabled}
         onKeyDown={e => {
-          if (onSelect && !disabled && (e.keyCode === 13 || e.keyCode === 32)) {
+          if (!disabled && (e.keyCode === 13 || e.keyCode === 32)) {
             onSelect();
           }
         }}

src/app/shared/components/external/tree-manager/TreeManagerBase.css

@@ -1,51 +1,55 @@
 :root {
-    --selected-item-color: #1f724320;
-    --focused-item-color: #1f724320;
-    --editing-item-color: #1f724340;
+    --border-selected-item-color: #ffffff30;
+    --selected-item-color: #ffffff10;
+    --hovered-item-color: #ffffff10;
+    --editing-item-color: #ffffff15;
     /*  */
     --warning-item-text-color: yellow;
     --error-item-text-color: red;
+    /*  */
+    --font-size: smaller;
 }
 
 /* Estiliza a base da árvore*/
 
 .tree-base {
+    border: thin solid transparent;
+    font-size: var(--font-size);
     scroll-behavior: smooth;
     flex-direction: column;
-    font-size: smaller;
-    overflow: auto;
+    overflow-y: overlay;
+    overflow-x: hidden;
+    display: block;
+    outline: none;
     flex: 1;
 }
 
-.tree-base-internal {
-    flex-direction: column;
-    width: fit-content;
-    min-width: 100%;
-}
-
 .tree-base:focus {
+    border: thin solid var(--border-selected-item-color);
     outline: none;
 }
 
+/* Scroll */
+
 .tree-base::-webkit-scrollbar {
-    width: 10px;
+    width: 12px;
     height: 20px;
 }
 
 .tree-base::-webkit-scrollbar-thumb {
-    background-color: #ffffff10;
+    background-color: #ffffff00;
 }
 
 .tree-base:hover::-webkit-scrollbar-thumb {
-    background-color: #ffffff40;
+    background-color: #ffffff10;
 }
 
 .tree-base::-webkit-scrollbar-thumb:hover {
-    background-color: #ffffff50;
+    background-color: #ffffff30;
 }
 
 .tree-base::-webkit-scrollbar-thumb:active {
-    background-color: #ffffff70;
+    background-color: #ffffff50;
 }
 
 .tree-base::-webkit-scrollbar-corner {
@@ -54,76 +58,11 @@
 
 /* Configure tree item */
 
-.tree-item input {
-    position: absolute;
-    float: right;
-    opacity: 0;
-    height: 0;
-    width: 0;
-}
-
-.tree-item label {
-    flex: 1;
-    padding: 4px;
-    display: flex;
-    cursor: pointer;
-    text-align: start;
-    align-items: center;
-    white-space: nowrap;
-    word-break: keep-all;
-}
-
-.tree-item label:hover {
-    background-color: var(--focused-item-color);
-}
-
-.tree-item label.error {
-    color: var(--error-item-text-color);
-    text-decoration: underline wavy;
-}
-
-.tree-item label.warning {
-    color: var(--warning-item-text-color);
-    text-decoration: underline wavy;
-}
-
-.tree-item.disabled label {
-    filter: brightness(0.6);
-}
-
-.tree-item.selected label {
-    background-color: var(--selected-item-color);
-}
-
 .tree-item.dragging label {
     filter: brightness(0.4);
     background-color: #ffffff10;
 }
 
 .tree-item.dragging-over label {
-    animation-name: animation-dragging-over;
-    animation-iteration-count: infinite;
     background-color: #ffffff10;
-    animation-duration: 1s;
-    border-radius: 50px;
-}
-
-.tree-item :checked:focus+label {
-    background-color: var(--focused-item-color);
-}
-
-.tree-item.editing label, .tree-item.editing.selected label, .tree-item.editing.selected :checked:focus+label label {
-    background-color: var(--editing-item-color);
-}
-
-@keyframes animation-dragging-over {
-    0% {
-        opacity: 0.2;
-    }
-    50% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 0.2;
-    }
 }

src/app/shared/components/external/tree-manager/TreeManagerBase.tsx

@@ -1,46 +1,80 @@
 import React, { useCallback } from 'react';
 
-import { ITreeManagerProps, ITreeManagerEvents } from './shared/interfaces';
-import { useBaseItems, useConfigs } from './shared/hooks';
 import { EmptyFeedback, OnEditListener, OnSelectListener, Tree } from './components';
+import { ITreeManagerProps, ITreeManagerEvents } from './shared/interfaces';
+import { useBaseItems, useConfigs, useItems } from './shared/hooks';
 import './TreeManagerBase.css';
 
 interface TreeManagerBaseProps extends Omit<ITreeManagerProps, 'items'>, ITreeManagerEvents { }
 export const TreeManagerBase: React.FC<TreeManagerBaseProps> = ({ childrenWhenEmpty, onFocus, onContextMenu, onKeyDown, onSelect, onEdit }) => {
-    const { showEmptyMessage } = useConfigs();
+    const { showEmptyMessage, id } = useConfigs();
     const baseItems = useBaseItems();
+    const { selectAll } = useItems();
 
     const handleContextMenu = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
         e.stopPropagation();
         onContextMenu && onContextMenu(undefined, e);
     }, [onContextMenu]);
 
+    const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement | HTMLLabelElement> = useCallback(e => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        const allTreeItems = document.querySelectorAll(`#${id} .tree-item > .tree-item-label[tabIndex="0"]`);
+        if (allTreeItems.length === 0) {
+            onKeyDown && onKeyDown(e);
+            return;
+        }
+
+        switch (e.key) {
+            case 'ArrowUp':
+                (allTreeItems[0] as any)?.click();
+                (allTreeItems[0] as any)?.focus();
+                break;
+            case 'ArrowDown':
+                (allTreeItems[0] as any)?.click();
+                (allTreeItems[0] as any)?.focus();
+                break;
+            case 'a':
+                if (e.ctrlKey) selectAll();
+                break;
+            default: break;
+        }
+
+        onKeyDown && onKeyDown(e);
+    }, [id, onKeyDown, selectAll]);
+
     return (
         <div
+            id={id}
+            role="tree"
             tabIndex={0}
             onFocus={onFocus}
-            onKeyDown={onKeyDown}
-            className={"tree-base"}
+            className="tree-base"
+            onKeyDown={handleKeyDown}
             onContextMenu={handleContextMenu}
         >
             {baseItems.length > 0 && baseItems.map((item, index) => (
-                <div key={index} className="tree-base-internal">
-                    <Tree
-                        item={item}
-                        onContextMenu={onContextMenu}
-                    />
-                </div>
+                <Tree
+                    key={index}
+                    item={item}
+                    onKeyDown={handleKeyDown}
+                    onContextMenu={onContextMenu}
+                />
             ))}
+
             {!((childrenWhenEmpty && baseItems.length === 0) || showEmptyMessage) &&
-                <div style={{ padding: 50 }} />
+                <div style={{ padding: 64 }} />
             }
-            <OnEditListener onEdit={onEdit} />
-            <OnSelectListener onSelect={onSelect} />
+
             <EmptyFeedback
                 children={childrenWhenEmpty}
                 onContextMenu={handleContextMenu}
                 show={!!((childrenWhenEmpty && baseItems.length === 0) || showEmptyMessage)}
             />
+
+            <OnEditListener onEdit={onEdit} />
+            <OnSelectListener onSelect={onSelect} />
         </div>
     );
 }