feat(lib): add input to control select on click (#129)

d3lm · Sep 19, 2021 · abeeb1b · abeeb1b
1 parent ec1116e
commit abeeb1b
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -250,6 +250,7 @@ shortcuts: {
 | --------------------- | ---------- | ------- | ------------------------------------------------------------------------------------------------------------- |
 | selectedItems         | Array<any> | /       | Collection of items that are currently selected                                                               |
 | selectOnDrag          | Boolean    | `true`  | Whether items should be selected while dragging                                                               |
+| selectOnClick         | Boolean    | `true`  | Whether items should be selected when clicked                                                           |
 | dragOverItems         | Boolean    | `true`  | Whether drag selection is allowed to start from inside an item                                                |
 | disabled              | Boolean    | `false` | Disable selection                                                                                             |
 | disableRangeSelection | Boolean    | `false` | Disable range selection                                                                                       |

diff --git a/cypress/integration/clicking.spec.ts b/cypress/integration/clicking.spec.ts
@@ -4,6 +4,7 @@ import {
   disableEvenItems,
   disableRangeSelection,
   disableSelectOnDrag,
+  disableSelectOnClick,
   enableSelectWithShortcut,
   getDesktopExample,
   selectAll,
@@ -190,6 +191,19 @@ describe('Clicking', () => {
     });
   });
 
+  it('should not select a single item when selectOnClick is false', () => {
+    getDesktopExample().within(() => {
+      disableSelectOnClick();
+
+      cy.getSelectItem(0)
+        .dispatch('mousedown', { button: 0 })
+        .dispatch('mouseup')
+        .shouldSelect([])
+        .get(`.${SELECTED_CLASS}`)
+        .should('have.length', 0);
+    });
+  });
+
   it('should not clear selected item when clicked outside of draggable area', () => {
     const mousePosition = { pageX: 0, pageY: 0 };
 

diff --git a/cypress/support/utils.ts b/cypress/support/utils.ts
@@ -52,6 +52,10 @@ export const disableSelectOnDrag = () => {
   return cy.get('[data-cy="selectOnDrag"]').click();
 };
 
+export const disableSelectOnClick = () => {
+  return cy.get('[data-cy="selectOnClick"]').click();
+};
+
 export const disableRangeSelection = () => {
   return cy.get('[data-cy="disableRangeSelection"]').click();
 };

diff --git a/projects/ngx-drag-to-select/src/lib/select-container.component.ts b/projects/ngx-drag-to-select/src/lib/select-container.component.ts
@@ -100,6 +100,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
   @Input() selectOnDrag = true;
   @Input() disabled = false;
   @Input() disableDrag = false;
+  @Input() selectOnClick = true;
   @Input() dragOverItems = true;
   @Input() disableRangeSelection = false;
   @Input() selectMode = false;
@@ -161,6 +162,7 @@ export class SelectContainerComponent implements AfterViewInit, OnDestroy, After
       const mousedown$ = fromEvent<MouseEvent>(this.host, 'mousedown').pipe(
         filter((event) => event.button === 0), // only emit left mouse
         filter(() => !this.disabled),
+        filter((event) => this.selectOnClick || event.target === this.host),
         tap((event) => this._onMouseDown(event)),
         share()
       );

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -19,6 +19,7 @@ <h3>
       <span>Desktop Demo</span> <a href="https://github.com/d3lm/ngx-drag-to-select/blob/master/src/app">SOURCE</a>
     </h3>
 
+    <mat-checkbox data-cy="selectOnClick" [(ngModel)]="selectOnClick">Select on Click</mat-checkbox>
     <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>
@@ -44,6 +45,7 @@ <h3>
         [(selectedItems)]="selectedDocuments"
         [disabled]="disable"
         [disableRangeSelection]="disableRangeSelection"
+        [selectOnClick]="selectOnClick"
         [selectOnDrag]="selectOnDrag"
         [selectWithShortcut]="selectWithShortcut"
         [dragOverItems]="dragOverItems"

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -13,6 +13,7 @@ const json = require('../../projects/ngx-drag-to-select/package.json');
 export class AppComponent implements OnInit {
   documents: Array<any> = [];
   selectedDocuments: Array<any> = [];
+  selectOnClick = true;
   selectOnDrag = true;
   selectMode = false;
   disable = false;