Merge pull request #435 from bethinkpl/IT-5862-rli_drag_state

bethinkpl · Nov 14, 2024 · ca27124 · ca27124
2 parents 786bb3a + d485d83
commit ca27124
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/lib/js/components/RichList/RichListItem/RichListItem.consts.ts b/lib/js/components/RichList/RichListItem/RichListItem.consts.ts
@@ -7,6 +7,7 @@ export type RichListItemType = typeof RICH_LIST_ITEM_TYPE[keyof typeof RICH_LIST
 export const RICH_LIST_ITEM_STATE = {
 	DEFAULT: 'default',
 	LOADING: 'loading',
+	DRAG: 'drag',
 } as const;
 export type RichListItemState = typeof RICH_LIST_ITEM_STATE[keyof typeof RICH_LIST_ITEM_STATE];
 

diff --git a/lib/js/components/RichList/RichListItem/RichListItem.vue b/lib/js/components/RichList/RichListItem/RichListItem.vue
@@ -87,11 +87,13 @@ $rich-list-item-background-colors: (
 		default: $color-neutral-background,
 		hover: $color-neutral-background-hovered,
 		loading: $color-neutral-background,
+		drag: $color-neutral-background-hovered,
 	),
 	neutral-weak: (
 		default: $color-neutral-background-weak,
 		hover: $color-neutral-background-weak-hovered,
 		loading: $color-neutral-background-weak,
+		drag: $color-neutral-background-weak-hovered,
 	),
 );
 
@@ -308,7 +310,7 @@ $rich-list-item-media-horizontal-height: 80px;
 			}
 		}
 
-		&.-ds-draggable {
+		&.-ds-draggable-without-handler {
 			&:hover {
 				cursor: grab;
 			}
@@ -333,6 +335,10 @@ $rich-list-item-media-horizontal-height: 80px;
 		#{$root}__wrapper {
 			border: none;
 		}
+
+		&.-ds-interactive.-ds-draggable.-ds-drag {
+			background: $color-neutral-background-ghost-hovered;
+		}
 	}
 
 	&.-ds-default {
@@ -345,6 +351,14 @@ $rich-list-item-media-horizontal-height: 80px;
 			}
 		}
 
+		&.-ds-interactive.-ds-draggable.-ds-drag {
+			@each $color, $value in $rich-list-item-background-colors {
+				&.-ds-background-#{$color} {
+					background-color: map-get($value, 'drag');
+				}
+			}
+		}
+
 		#{$root}__border {
 			@each $color, $value in $rich-list-item-border-colors {
 				&.-ds-border-#{$color} {
@@ -622,8 +636,10 @@ export default defineComponent({
 					this.type !== RICH_LIST_ITEM_TYPE.FLAT && {
 						[`-ds-elevation-${this.elevation}`]: true,
 					}),
-				'-ds-draggable': this.isDraggable && !this.hasDraggableHandler,
+				'-ds-draggable': this.isDraggable,
+				'-ds-draggable-without-handler': this.isDraggable && !this.hasDraggableHandler,
 				'-ds-has-media': this.hasMedia,
+				'-ds-drag': this.isDragging,
 			};
 		},
 		isHorizontal() {
@@ -663,6 +679,9 @@ export default defineComponent({
 		hasMedia() {
 			return !!this.$slots.media;
 		},
+		isDragging() {
+			return this.isDraggable && this.state === RICH_LIST_ITEM_STATE.DRAG;
+		},
 	},
 });
 </script>