From c665ec88be859feeea89e5ab8826f2b0a57c5cfb Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Tue, 26 Oct 2021 16:39:56 -0400
Subject: [PATCH] feat(plugin): add row move shadown item while moving/dragging
 row

---
 .../webpack-demo-vanilla-bundle/src/examples/example07.ts   | 1 +
 packages/common/src/extensions/rowMoveManagerExtension.ts   | 2 +-
 .../common/src/interfaces/rowMoveManagerOption.interface.ts | 2 ++
 packages/common/src/styles/slick-grid.scss                  | 6 ++++++
 .../vanilla-bundle/src/salesforce-global-grid-options.ts    | 3 +++
 5 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
index 7ffebe5d5..9d3d64d07 100644
--- 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
index 2c83f9444..2fdaf82aa 100644
--- 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
index 86535b2a7..cb1b09b4f 100644
--- 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
index 8fd040624..99d381f94 100644
--- 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
index be572db02..1a813c9bb 100644
--- 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;