feat(plugin): add row move shadown item while moving/dragging row

ghiscoding · Oct 26, 2021 · c665ec8 · c665ec8
1 parent 8d6e16b
commit c665ec8
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 1 deletion.
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
@@ -211,6 +211,7 @@ export class Example7 {
         singleRowMove: true,
         disableRowSelection: true,
         cancelEditOnDrag: true,
+        hideRowMoveShadow: false,
         onBeforeMoveRows: this.onBeforeMoveRow.bind(this),
         onMoveRows: this.onMoveRows.bind(this),
 

diff --git a/packages/common/src/extensions/rowMoveManagerExtension.ts b/packages/common/src/extensions/rowMoveManagerExtension.ts
@@ -79,7 +79,7 @@ export class RowMoveManagerExtension implements Extension {
   loadAddonWhenNotExists(columnDefinitions: Column[], gridOptions: GridOption): SlickRowMoveManager | null {
     if (Array.isArray(columnDefinitions) && gridOptions) {
       if (!this._addon) {
-        this._addon = new Slick.RowMoveManager(gridOptions?.rowMoveManager || { cancelEditOnDrag: true });
+        this._addon = new Slick.RowMoveManager(gridOptions?.rowMoveManager || { cancelEditOnDrag: true, hideRowMoveShadow: false, });
       }
       return this._addon;
     }

diff --git a/packages/common/src/interfaces/rowMoveManagerOption.interface.ts b/packages/common/src/interfaces/rowMoveManagerOption.interface.ts
@@ -20,6 +20,8 @@ export interface RowMoveManagerOption {
   /**  Defaults to False, do we want to disable the row selection?  */
   disableRowSelection?: boolean;
 
+  hideRowMoveShadow?: boolean;
+
   /**  Defaults to False, do we want a single row move? Setting this to false means that 1 or more rows can be selected to move together.  */
   singleRowMove?: boolean;
 

diff --git a/packages/common/src/styles/slick-grid.scss b/packages/common/src/styles/slick-grid.scss
@@ -271,6 +271,12 @@
     opacity: 0.7;
   }
 
+  .slick-reorder-shadow-row {
+    position: absolute;
+    z-index: 999999;
+    box-shadow: rgb(0 0 0 / 20%) 8px 2px 8px 4px, rgb(0 0 0 / 19%) 2px 2px 0px 0px;
+  }
+
   .slick-selection {
     z-index: 10;
     position: absolute;

diff --git a/packages/vanilla-bundle/src/salesforce-global-grid-options.ts b/packages/vanilla-bundle/src/salesforce-global-grid-options.ts
@@ -70,5 +70,8 @@ export const SalesforceGlobalGridOptions = {
     formatterPaddingWidthInPx: 8,
     maxItemToInspectCellContentWidth: 500,
   },
+  rowMoveManager: {
+    hideRowMoveShadow: false,
+  },
   useSalesforceDefaultGridOptions: true,
 } as GridOption;