fix: remove ripple effect in dimension list when drag starts/ends (#584)

There are 2 separate fixes in this PR: * Remove "ripple" effect on drag start (where other items in the list briefly shift position when an item above it is dragged). ** Add transform: none !important to all items not being dragged to remove ripple effect when a drag is started or finished. The ripple effect was solved previously when there was only 1 list, but with 3 separate lists introduced with the Sections, it was necessary to implement differently ** Use a local variable for incrementing the dnd index for dnd to remove the console warning about duplicate, non-sequential indexes. This duplicate, non-sequential indexes was also causing unexpected onDrag movements, similar to the "ripple" effect. * Show correct dimension icon on the clone (the clone is shown while dragging). ** use the dimension id for the id property of DimensionItem. The id prop is not actually used as a css attribute, but is used to determine the icon, and the options click behaviour. Since the clone doesn't get an onOptionsClick, the fact that the id is duplicated doesn't matter. But the actual dimension id is needed to get the correct icon.
dhis2 · Feb 3, 2020 · c91ed3b · c91ed3b
1 parent ac8c383
commit c91ed3b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/packages/app/src/components/DimensionsPanel/DndDimensionItem.js b/packages/app/src/components/DimensionsPanel/DndDimensionItem.js
@@ -20,6 +20,7 @@ export class DndDimensionItem extends Component {
         } = this.props
 
         const itemCommonProps = {
+            id,
             name,
             isSelected,
             isLocked,
@@ -39,17 +40,17 @@ export class DndDimensionItem extends Component {
                             innerRef={provided.innerRef}
                             {...provided.draggableProps}
                             {...provided.dragHandleProps}
-                            id={id}
                             className={
-                                snapshot.isDragging ? styles.dragging : null
+                                snapshot.isDragging
+                                    ? styles.dragging
+                                    : styles.notDragging
                             }
                             onClick={onClick}
                             onOptionsClick={onOptionsClick}
                             {...itemCommonProps}
                         />
                         {snapshot.isDragging && (
                             <DimensionItem
-                                id={`dimension-item-clone-${id}`}
                                 className={styles.dimensionItemClone}
                                 {...itemCommonProps}
                             />

diff --git a/packages/app/src/components/DimensionsPanel/DndDimensionList.js b/packages/app/src/components/DimensionsPanel/DndDimensionList.js
@@ -19,6 +19,8 @@ import { SOURCE_DIMENSIONS } from '../../modules/layout'
 import styles from './styles/DndDimensionList.module.css'
 
 export class DndDimensionList extends Component {
+    dndIndex = 0
+
     nameContainsFilterText = dimension =>
         dimension.name
             .toLowerCase()
@@ -29,11 +31,11 @@ export class DndDimensionList extends Component {
     isLockedDimension = id => this.props.lockedDimensions.includes(id)
     isRecommendedDimension = id => this.props.recommendedIds.includes(id)
 
-    renderItem = ({ id, name }, index) => {
+    renderItem = ({ id, name }) => {
         const itemProps = {
             id,
             name,
-            index,
+            index: this.dndIndex++,
             isSelected: this.isSelected(id),
             isLocked: this.isLockedDimension(id),
             isDeactivated: this.isDisabledDimension(id),
@@ -57,6 +59,7 @@ export class DndDimensionList extends Component {
             .map(this.renderItem)
 
     render() {
+        this.dndIndex = 0
         const fixedDimensions = this.getDimensionItemsByFilter(dimension =>
             Object.values(getFixedDimensions()).some(
                 fixedDim => fixedDim.id === dimension.id

diff --git a/packages/app/src/components/DimensionsPanel/styles/DndDimensionItem.module.css b/packages/app/src/components/DimensionsPanel/styles/DndDimensionItem.module.css
@@ -2,7 +2,8 @@
 This keeps the dimension item clone from causing 
 a ripple effect in the Dimension list during drag
 */
-.dimensionItemClone ~ li {
+
+.notDragging {
     transform: none !important;
 }