feat(list-item): Add dragDisabled property. #8284

Esri · Nov 28, 2023 · c704ac1 · c704ac1
1 parent 0a9b262
commit c704ac1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -48,6 +48,7 @@ import {
   setComponentLoaded,
   setUpLoadableComponent,
 } from "../../utils/loadable";
+import { SortableComponentItem } from "../../utils/sortableComponent";
 
 /**
  * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
@@ -65,7 +66,12 @@ import {
   assetsDirs: ["assets"],
 })
 export class ListItem
-  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent
+  implements
+    InteractiveComponent,
+    LoadableComponent,
+    LocalizedComponent,
+    T9nComponent,
+    SortableComponentItem
 {
   // --------------------------------------------------------------------------
   //
@@ -113,6 +119,11 @@ export class ListItem
     this.emitCalciteInternalListItemChange();
   }
 
+  /**
+   * When `true`, the item is not draggable.
+   */
+  @Prop({ reflect: true }) dragDisabled = false;
+
   /**
    * When `true`, the component displays a draggable button.
    *
@@ -388,7 +399,12 @@ export class ListItem
   renderDragHandle(): VNode {
     return this.dragHandle ? (
       <td class={CSS.dragContainer} key="drag-handle-container">
-        <calcite-handle label={this.label} setPosition={this.setPosition} setSize={this.setSize} />
+        <calcite-handle
+          disabled={this.dragDisabled}
+          label={this.label}
+          setPosition={this.setPosition}
+          setSize={this.setSize}
+        />
       </td>
     ) : null;
   }

diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
@@ -697,6 +697,9 @@ export const sortableList_TestOnly = (): string => html`<calcite-list
   <calcite-list-item disabled label="test4" value="test4" description="hello world 4">
     <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-ui-success)"></calcite-icon>
   </calcite-list-item>
+  <calcite-list-item drag-disabled label="test5" value="test5" description="hello world 55">
+    <calcite-icon icon="compass" slot="content-start" style="color: var(--calcite-ui-success)"></calcite-icon>
+  </calcite-list-item>
 </calcite-list>`;
 
 export const sortableNestedList_TestOnly = (): string => html`<calcite-list

diff --git a/packages/calcite-components/src/utils/sortableComponent.ts b/packages/calcite-components/src/utils/sortableComponent.ts
@@ -75,6 +75,13 @@ export interface SortableComponent {
   onDragEnd: () => void;
 }
 
+export interface SortableComponentItem {
+  /**
+   * When `true`, the item is not draggable.
+   */
+  dragDisabled: boolean;
+}
+
 /**
  * Helper to keep track of a SortableComponent. This should be called in the `connectedCallback` lifecycle method as well as any other method necessary to rebuild the sortable instance.
  *
@@ -105,6 +112,7 @@ export function connectSortableComponent(component: SortableComponent): void {
       },
     }),
     handle,
+    filter: "[drag-disabled]",
     onStart: () => {
       dragState.active = true;
       onDragStart();