feat(lib): allow select items to be disabled (#130)

README.md

@@ -468,16 +468,22 @@ The `dtsSelectItem` directive is used to mark DOM elements as selectable items.
 
 **Inputs**
 
-| Input         | Type | Default            | Description                                  |
-| ------------- | ---- | ------------------ | -------------------------------------------- |
-| dtsSelectItem | any  | Directive Instance | Value that is used when the item is selected |
+| Input         | Type     | Default            | Description                                  |
+| ------------- | -------- | ------------------ | -------------------------------------------- |
+| dtsSelectItem | any      | Directive Instance | Value that is used when the item is selected |
+| dtsDisabled   | boolean  | false              | Whether the item is selectable or not        |
 
 Example:
 
 ```html
 <dts-select-container>
   <ul>
-    <li [dtsSelectItem]="document" *ngFor="let document of documents">{{ document.name }}</li>
+    <li
+        *ngFor="let document of documents"
+        [dtsSelectItem]="document"
+        [dtsDisabled]="document.disabled">
+      {{ document.name }}
+    </li>
   </ul>
 </dts-select-container>
 ```

cypress/integration/clicking.spec.ts

@@ -1,10 +1,12 @@
 import { DEFAULT_CONFIG } from '../../projects/ngx-drag-to-select/src/lib/config';
 
 import {
+  disableEvenItems,
   disableRangeSelection,
   disableSelectOnDrag,
   enableSelectWithShortcut,
   getDesktopExample,
+  selectAll,
   toggleItem,
 } from '../support/utils';
 
@@ -50,6 +52,15 @@ describe('Clicking', () => {
             .should('have.length', 1);
         });
       });
+
+      it('should not select disabled items', () => {
+        getDesktopExample().within(() => {
+          disableEvenItems();
+          selectAll();
+
+          cy.getSelectedItems().should('have.length', 6);
+        });
+      });
     });
 
     it('should select items in a row if shift is pressed', () => {

cypress/integration/styling-and-classes.spec.ts

@@ -1,6 +1,6 @@
 import { DEFAULT_CONFIG } from '../../projects/ngx-drag-to-select/src/lib/config';
 import { NO_SELECT_CLASS } from '../../projects/ngx-drag-to-select/src/lib/constants';
-import { getDesktopExample } from '../support/utils';
+import { disableEvenItems, getDesktopExample, selectAll } from '../support/utils';
 
 const SELECTED_CLASS = DEFAULT_CONFIG.selectedClass;
 
@@ -104,4 +104,13 @@ describe('Styling and Classes', () => {
         });
     });
   });
+
+  it(`should add 'dts-disabled' class to disabled items`, () => {
+    getDesktopExample().within(() => {
+      disableEvenItems();
+      selectAll();
+
+      cy.get('.dts-disabled').should('have.length', 6);
+    });
+  });
 });

cypress/support/utils.ts

@@ -56,6 +56,10 @@ export const disableRangeSelection = () => {
   return cy.get('[data-cy="disableRangeSelection"]').click();
 };
 
+export const disableEvenItems = () => {
+  return cy.get('[data-cy="disableEvenItems"]').click();
+};
+
 export const enableSelectMode = () => {
   return cy.get('[data-cy="selectMode"]').click();
 };

projects/ngx-drag-to-select/src/lib/select-container.component.ts

@@ -320,7 +320,11 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
   private _observeSelectableItems() {
     // Listen for updates and either select or deselect an item
     this.updateItems$
-      .pipe(withLatestFrom(this._selectedItems$), takeUntil(this.destroy$))
+      .pipe(
+        withLatestFrom(this._selectedItems$),
+        takeUntil(this.destroy$),
+        filter(([update]) => !update.item.dtsDisabled)
+      )
       .subscribe(([update, selectedItems]: [UpdateAction, any[]]) => {
         const item = update.item;
 

projects/ngx-drag-to-select/src/lib/select-container.spec.ts

@@ -41,6 +41,10 @@ class TestComponent {
 
   itemSelected(value: any) {}
   itemDeselected(value: any) {}
+
+  getByIndex(index: number) {
+    return this.selectItems.find((_, i) => i === index);
+  }
 }
 
 describe('SelectContainerComponent', () => {
@@ -110,6 +114,22 @@ describe('SelectContainerComponent', () => {
       selectContainerInstance.selectItems((item: SelectItemValue) => item.id === -1);
       selectContainerInstance.selectItems((item: SelectItemValue) => item.id === 100);
     });
+
+    it('should not select disabled item', (done) => {
+      const ids = [1, 3];
+      const result = [{ id: 1 }, { id: 3 }];
+
+      selectContainerInstance.select.subscribe((items) => {
+        expect(testComponent.selectedItems.length).toBe(result.length);
+        expect(items).toEqual(result);
+        expect(testComponent.selectedItems).toEqual(result);
+        done();
+      });
+
+      testComponent.getByIndex(1).dtsDisabled = true;
+
+      selectContainerInstance.selectAll();
+    });
   });
 
   describe('deselectItems()', () => {

projects/ngx-drag-to-select/src/lib/select-item.directive.ts

@@ -34,6 +34,10 @@ export class SelectItemDirective implements OnInit, DoCheck {
 
   @Input() dtsSelectItem: any | undefined;
 
+  @Input()
+  @HostBinding('class.dts-disabled')
+  dtsDisabled = false;
+
   get value(): SelectItemDirective | any {
     return this.dtsSelectItem ? this.dtsSelectItem : this;
   }

src/app/app.component.html

@@ -22,6 +22,7 @@ <h3>
     <mat-checkbox data-cy="selectOnDrag" [(ngModel)]="selectOnDrag">Select on Drag</mat-checkbox>
     <mat-checkbox data-cy="dragOverItems" [(ngModel)]="dragOverItems">Drag Over Items</mat-checkbox>
     <mat-checkbox data-cy="disable" [(ngModel)]="disable">Disable</mat-checkbox>
+    <mat-checkbox data-cy="disableEvenItems" [(ngModel)]="disableEvenItems">Disable even items</mat-checkbox>
     <mat-checkbox data-cy="disableRangeSelection" [(ngModel)]="disableRangeSelection"
       >Disable Range Selection</mat-checkbox
     >
@@ -48,7 +49,10 @@ <h3>
         [dragOverItems]="dragOverItems"
       >
         <mat-grid-list cols="4" rowHeight="200px" gutterSize="20px">
-          <mat-grid-tile [dtsSelectItem]="document" *ngFor="let document of documents">
+          <mat-grid-tile
+              [dtsSelectItem]="document"
+              [dtsDisabled]="disableEvenItems && document.disabled"
+              *ngFor="let document of documents">
             {{ document.name }}
           </mat-grid-tile>
         </mat-grid-list>

src/app/app.component.scss

@@ -70,12 +70,14 @@ dts-select-container {
     font-family: Raleway;
     color: $primary-color;
   }
+
+  &::ng-deep .dts-disabled {
+    color: #b5b5b5;
+  }
 }
 
 mat-checkbox {
-  & + & {
-    margin-left: 1rem;
-  }
+  margin-right: 1rem;
 }
 
 .action-buttons {

src/app/app.component.ts

@@ -20,6 +20,7 @@ export class AppComponent implements OnInit {
   isDesktop = false;
   selectWithShortcut = false;
   dragOverItems = true;
+  disableEvenItems = false;
 
   constructor(
     private titleService: Title,
@@ -48,6 +49,7 @@ export class AppComponent implements OnInit {
       this.documents.push({
         id,
         name: `Document ${id}`,
+        disabled: id % 2 === 0,
       });
     }
   }