resizer

Author: RafaelGB

src/components/Header.tsx

@@ -10,7 +10,7 @@ import TextIcon from 'components/img/Text';
 import MultiIcon from 'components/img/Multi';
 import HashIcon from 'components/img/Hash';
 import PlusIcon from 'components/img/Plus';
-import { ActionTypes, DataTypes, MAX_CAPACITY_DATABASE, MetadataColumns } from 'helpers/Constants';
+import { ActionTypes, DataTypes, MetadataColumns } from 'helpers/Constants';
 import { LOGGER } from 'services/Logger';
 import { DatabaseHeaderProps } from 'cdm/FolderModel';
 import ReactDOM from 'react-dom';

src/components/Table.tsx

@@ -239,9 +239,12 @@ export function Table(initialState: TableDataType){
                     setColumnOrder(colOrder);
                   }
                 }}
-                onDragEnd={() => {
-                  // save on disk
-                  initialState.view.diskConfig.reorderColumns((state as any).columnOrder);
+                onDragEnd={(result) => {
+                  // save on disk in case of changes
+                  if(result.source.index!==result.destination!.index){
+                    initialState.view.diskConfig.reorderColumns((state as any).columnOrder);
+                  }
+                  
                   // clear the current order
                   currentColOrder.current = null;
                 }}
@@ -281,6 +284,14 @@ export function Table(initialState: TableDataType){
                               }}
                             >
                               {column.render("Header")}
+                              {/* Use column.getResizerProps to hook up the events correctly */}
+                              <div
+                                {...(column as any).getResizerProps()}
+                                key={`resizer-${column.id}`}
+                                className={`resizer ${
+                                  (column as any).isResizing ? 'isResizing' : ''
+                                }`}
+                              />
                             </div>
                           </div>
                         );

src/components/styles/DragableStyle.ts

@@ -3,10 +3,6 @@ const DraggableStyle = (styleProps:any) => ({
     ...styleProps.draggableStyle,
     // some basic styles to make the items look a bit nicer
     userSelect: "none",
-  
-    // change background colour if dragging
-    // background: styleProps.dragableProps.isDragging ? "lightgreen" : "grey",
-  
     ...(!styleProps.dragableProps.isDragging && { transform: "translate(0,0)" }),
     ...(styleProps.dragableProps.isDropAnimating && { transitionDuration: "0.001s" })
 

styles.css

@@ -296,4 +296,21 @@ html {
   margin-left: auto;
   margin-right: auto;
   display: flex;
-}
+}
+
+.resizer {
+  display: inline-block;
+  width: 15px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translateX(50%);
+  z-index: 1;
+  /* prevents from scrolling while dragging on touch devices */
+  touch-action:none;
+}
+
+.isResizing {
+  background: rgb(182, 119, 119);
+}