feat(tree): added selection via ctrl and shift (#UIM-197)

* feat(tree): added selection via ctrl and shift (#197) * Revert: feat(tree): added selection via ctrl and shift (#197) * linter fix * attributes logic is changed * attributes logic is changed * shift logic changes * review changes * review fixes * review fixes * rewrited some moments
positive-js · Oct 25, 2019 · d5ba275 · d5ba275
1 parent cfa8ad3
commit d5ba275
Show file tree

Hide file tree

Showing 8 changed files with 323 additions and 37 deletions.
diff --git a/packages/mosaic-dev/tree/module.ts b/packages/mosaic-dev/tree/module.ts
@@ -111,7 +111,7 @@ export class DemoComponent {
 
     filterValue: string = '';
 
-    modelValue: any = 'Chrome';
+    modelValue: any = ['Chrome'];
     // modelValue: any[] = ['rootNode_1', 'Documents', 'Calendar', 'Chrome'];
 
     disableState: boolean = false;

diff --git a/packages/mosaic-dev/tree/template.html b/packages/mosaic-dev/tree/template.html
@@ -26,6 +26,7 @@
     <!--no-unselect="false"-->
 <!--    multiple-->
 <mc-tree-selection
+    multiple="keyboard"
     [disabled]="disableState"
     [(ngModel)]="modelValue"
     [dataSource]="dataSource"

diff --git a/packages/mosaic/tree-select/tree-select.component.spec.ts b/packages/mosaic/tree-select/tree-select.component.spec.ts
@@ -651,7 +651,7 @@ class BasicSelectOnPushPreselected {
     template: `
         <mc-form-field>
             <mc-tree-select
-                [multiple]="true"
+                multiple
                 placeholder="Food"
                 [formControl]="control">
 

diff --git a/packages/mosaic/tree-select/tree-select.component.ts b/packages/mosaic/tree-select/tree-select.component.ts
@@ -73,7 +73,7 @@ import {
 } from '@ptsecurity/mosaic/core';
 import { McFormField, McFormFieldControl } from '@ptsecurity/mosaic/form-field';
 import { McTag } from '@ptsecurity/mosaic/tags';
-import { McTreeSelection, McTreeOption } from '@ptsecurity/mosaic/tree';
+import { McTreeSelection, McTreeOption, MultipleMode } from "@ptsecurity/mosaic/tree";
 import { defer, merge, Observable, Subject } from 'rxjs';
 import {
     filter,
@@ -428,10 +428,6 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
     }
 
     ngOnInit() {
-        if (this.tree) {
-            this.tree.multiple = this.multiple;
-        }
-
         this.stateChanges.next();
 
         // We need `distinctUntilChanged` here, because some browsers will
@@ -462,7 +458,7 @@ export class McTreeSelect extends McTreeSelectMixinBase implements
 
         this.options = this.tree.renderedOptions;
         this.tree.autoSelect = this.autoSelect;
-        this.tree.multiple = this.multiple;
+        this.tree.multipleMode = this.multiple ? MultipleMode.CHECKBOX : null;
 
         if (this.multiple) {
             this.tree.noUnselectLast = false;

diff --git a/packages/mosaic/tree/tree-option.component.ts b/packages/mosaic/tree/tree-option.component.ts
@@ -77,6 +77,10 @@ export class McTreeOption extends CdkTreeNode<McTreeOption> implements OnInit, O
 
     private _disabled: boolean = false;
 
+    get showCheckbox(): boolean {
+        return this.tree.showCheckbox;
+    }
+
     @Output() readonly onSelectionChange = new EventEmitter<McTreeOptionChange>();
 
     get selected(): boolean {
@@ -141,9 +145,9 @@ export class McTreeOption extends CdkTreeNode<McTreeOption> implements OnInit, O
         this._selected = selected;
 
         if (selected) {
-            this.tree.selectionModel.select(this.value);
+            this.tree.selectionModel.select(this.data);
         } else {
-            this.tree.selectionModel.deselect(this.value);
+            this.tree.selectionModel.deselect(this.data);
         }
 
         this.changeDetectorRef.markForCheck();

diff --git a/packages/mosaic/tree/tree-option.html b/packages/mosaic/tree/tree-option.html
@@ -1,11 +1,11 @@
 <ng-content select="[mc-icon]"></ng-content>
 
 <mc-pseudo-checkbox
-    *ngIf="multiple"
+    *ngIf="showCheckbox"
     [state]="selected ? 'checked' : ''"
     [disabled]="disabled">
 </mc-pseudo-checkbox>
 
-<span class="mc-option-text"><ng-content></ng-content></span>
+<span class="mc-option-text mc-no-select"><ng-content></ng-content></span>
 
 <div class="mc-option-overlay"></div>