Skip to content

Commit

Permalink
Merge pull request #5123 from IgniteUI/SKrastev/improve-chips-inputs-…
Browse files Browse the repository at this point in the history 
…master

feat(chip): Add an inputs related to the igxDrag directive that the igxChip uses. Expose the reference to it as public.
  • Loading branch information
@kdinev
kdinev authored Jun 24, 2019
2 parents f25c95b + 71fcf58 commit b1c0a83
Show file tree
Hide file tree
Showing 7 changed files with 80 additions and 40 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,11 @@ There are also prebuilt schema presets for all components (light-round/dark-roun
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
- **Breaking Change** The **condition** parameter of the `filterGlobal` method is no longer optional. When the filterGlobal method is called with an invalid condition, it will not clear the existing filters for all columns.

- `IgxChip`
- `hideBaseOnDrag` input is added that allow the chip base that stays at place to be visible while dragging it.
- `animateOnRelease` input is added that allows to disable the animation that returns the chip when the chip is released somewhere.


## 7.3.4
- `IgxGrid` - summaries
- `clearSummaryCache()` and `recalculateSummaries()` methods are now removed from the IgxGrid API, beacause they are no longer needed; summaries are updated when some change is perform and the summary cache is cleared automatically when needed;
Expand Down
2 changes: 2 additions & 0 deletions projects/igniteui-angular/src/lib/chips/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,8 @@ The chips can be focused using the `Tab` key or by clicking on them. Chips can b
| `disabled` | `boolean` | Sets if the chip is disabled. |
| `displayDensity`| `DisplayDensity | string` | Sets the chip theme. Available options are `compact`, `cosy`, `comfortable`. |
| `color` | `string` | Sets the chip background color. |
| `hideBaseOnDrag` | `boolean` | Sets if the chip base should be hidden when the chip is dragged. |
| `animateOnRelease` | `boolean` | Sets if the chip should animate to its position when released. |

### Outputs
| Name | Argument Type | Description |
Expand Down
4 changes: 2 additions & 2 deletions projects/igniteui-angular/src/lib/chips/chip.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
[attr.tabindex]="chipTabindex"
(keydown)="onChipKeyDown($event)"
[igxDrag]="{chip: this}"
[hideBaseOnDrag]="true"
[animateOnRelease]="true"
[hideBaseOnDrag]="hideBaseOnDrag"
[animateOnRelease]="animateOnRelease"
[ghostImageClass]="ghostClass"
(dragStart)="onChipDragStart($event)"
(dragEnd)="onChipDragEnd()"
Expand Down
42 changes: 35 additions & 7 deletions projects/igniteui-angular/src/lib/chips/chip.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,26 @@ export class IgxChipComponent extends DisplayDensityBase {
@Input()
public draggable = false;

/**
* An @Input property that enables/disables the draggable element animation when the element is released.
* By default it's set to true.
* ```html
* <igx-chip [id]="'igx-chip-1'" [draggable]="true" [animateOnRelease]="false"></igx-chip>
* ```
*/
@Input()
public animateOnRelease = true;

/**
* An @Input property that enables/disables the hiding of the base element that has been dragged.
* By default it's set to true.
* ```html
* <igx-chip [id]="'igx-chip-1'" [draggable]="true" [hideBaseOnDrag]="false"></igx-chip>
* ```
*/
@Input()
public hideBaseOnDrag = true;

/**
* An @Input property that defines if the `IgxChipComponent` should render remove button and throw remove events.
* By default it is set to false.
Expand Down Expand Up @@ -311,16 +331,24 @@ export class IgxChipComponent extends DisplayDensityBase {
}

/**
* @hidden
* Property that contains a reference to the `IgxDragDirective` the `IgxChipComponent` uses for dragging behavior.
* ```html
* <igx-chip [id]="chip.id" [draggable]="true"></igx-chip>
* ```
* ```typescript
* onMoveStart(event: IBaseChipEventArgs){
* let dragDirective = event.owner.dragDirective;
* }
* ```
*/
@ViewChild('chipArea', { read: ElementRef, static: true })
public chipArea: ElementRef;
@ViewChild('chipArea', { read: IgxDragDirective, static: true })
public dragDirective: IgxDragDirective;

/**
* @hidden
*/
@ViewChild('chipArea', { read: IgxDragDirective, static: true })
public dragDir: IgxDragDirective;
@ViewChild('chipArea', { read: ElementRef, static: true })
public chipArea: ElementRef;

/**
* @hidden
Expand Down Expand Up @@ -501,7 +529,7 @@ export class IgxChipComponent extends DisplayDensityBase {
* @hidden
*/
public onChipDragEnd() {
this.dragDir.dropFinished();
this.dragDirective.dropFinished();
}

/**
Expand Down Expand Up @@ -542,7 +570,7 @@ export class IgxChipComponent extends DisplayDensityBase {
// -----------------------------
// Start chip igxDrop behaviour
public onChipDragEnterHandler(event: IgxDropEnterEventArgs) {
if (this.dragDir === event.drag || !event.dragData || !event.dragData.chip) {
if (this.dragDirective === event.drag || !event.dragData || !event.dragData.chip) {
return;
}

Expand Down
4 changes: 2 additions & 2 deletions projects/igniteui-angular/src/lib/chips/chip.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,12 +387,12 @@ describe('IgxChip', () => {
}).then(() => {
fix.detectChanges();

expect(thirdChip.dragDir['dragGhost'].className).toEqual('igx-chip__item igx-chip__ghost--compact');
expect(thirdChip.dragDirective['dragGhost'].className).toEqual('igx-chip__item igx-chip__ghost--compact');

return fix.whenStable();
}).then(() => {
fix.detectChanges();
UIInteractions.simulatePointerEvent('pointerup', thirdChip.dragDir['dragGhost'], startingX + 10, startingY + 10);
UIInteractions.simulatePointerEvent('pointerup', thirdChip.dragDirective['dragGhost'], startingX + 10, startingY + 10);

done();
});
Expand Down
30 changes: 15 additions & 15 deletions projects/igniteui-angular/src/lib/chips/chips-area.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ describe('IgxChipsArea', () => {
return fix.whenStable();
}).then(() => {
fix.detectChanges();
const dragDir = firstChip.dragDir['dragGhost'];
const dragDir = firstChip.dragDirective['dragGhost'];

expect(dragDir).toBeUndefined();
});
Expand Down Expand Up @@ -245,14 +245,14 @@ describe('IgxChipsArea', () => {
fix.detectChanges();
UIInteractions.simulatePointerEvent(
'pointermove',
secondChip.dragDir['dragGhost'],
secondChip.dragDirective['dragGhost'],
startingX + xDragDifference,
startingY + yDragDifference
);

setTimeout(() => {
const afterDragTop = secondChip.dragDir['dragGhost'].getBoundingClientRect().top;
const afterDragLeft = secondChip.dragDir['dragGhost'].getBoundingClientRect().left;
const afterDragTop = secondChip.dragDirective['dragGhost'].getBoundingClientRect().top;
const afterDragLeft = secondChip.dragDirective['dragGhost'].getBoundingClientRect().left;
expect(afterDragTop - startingTop).toEqual(yDragDifference);
expect(afterDragLeft - startingLeft).toEqual(xDragDifference);
}, 100);
Expand All @@ -269,8 +269,8 @@ describe('IgxChipsArea', () => {
const firstChip = chipComponents[0].componentInstance;
const secondChip = chipComponents[1].componentInstance;

firstChip.dragDir.animateOnRelease = false;
secondChip.dragDir.animateOnRelease = false;
firstChip.dragDirective.animateOnRelease = false;
secondChip.dragDirective.animateOnRelease = false;

const firstChipElem = firstChip.chipArea.nativeElement;
const secondChipElem = secondChip.chipArea.nativeElement;
Expand Down Expand Up @@ -301,12 +301,12 @@ describe('IgxChipsArea', () => {
return fix.whenStable();
}).then(() => {
fix.detectChanges();
UIInteractions.simulatePointerEvent('pointermove', firstChip.dragDir['dragGhost'], secondChipX, secondChipY);
UIInteractions.simulatePointerEvent('pointermove', firstChip.dragDirective['dragGhost'], secondChipX, secondChipY);
fix.detectChanges();

return fix.whenRenderingDone();
}).then(() => {
UIInteractions.simulatePointerEvent('pointerup', firstChip.dragDir['dragGhost'], secondChipX, secondChipY);
UIInteractions.simulatePointerEvent('pointerup', firstChip.dragDirective['dragGhost'], secondChipX, secondChipY);
return fix.whenRenderingDone();
}).then(() => {
setTimeout(() => {
Expand All @@ -329,8 +329,8 @@ describe('IgxChipsArea', () => {
const firstChip = chipComponents[0].componentInstance;
const secondChip = chipComponents[1].componentInstance;

firstChip.dragDir.animateOnRelease = false;
secondChip.dragDir.animateOnRelease = false;
firstChip.dragDirective.animateOnRelease = false;
secondChip.dragDirective.animateOnRelease = false;

const firstChipElem = firstChip.chipArea.nativeElement;
const secondChipElem = secondChip.chipArea.nativeElement;
Expand Down Expand Up @@ -361,12 +361,12 @@ describe('IgxChipsArea', () => {
return fix.whenStable();
}).then(() => {
fix.detectChanges();
UIInteractions.simulatePointerEvent('pointermove', secondChip.dragDir['dragGhost'], firstChipX, firstChipY);
UIInteractions.simulatePointerEvent('pointermove', secondChip.dragDirective['dragGhost'], firstChipX, firstChipY);
fix.detectChanges();

return fix.whenRenderingDone();
}).then(() => {
UIInteractions.simulatePointerEvent('pointerup', secondChip.dragDir['dragGhost'], firstChipX, firstChipY);
UIInteractions.simulatePointerEvent('pointerup', secondChip.dragDirective['dragGhost'], firstChipX, firstChipY);
return fix.whenRenderingDone();
}).then(() => {
setTimeout(() => {
Expand Down Expand Up @@ -746,7 +746,7 @@ describe('IgxChipsArea', () => {
const secondChip = chipComponents[1].componentInstance;
const secondChipElem = secondChip.chipArea.nativeElement;

secondChip.dragDir.animateOnRelease = false;
secondChip.dragDirective.animateOnRelease = false;
secondChip.chipArea.nativeElement.dispatchEvent(spaceKeyEvent);

const startingTop = secondChipElem.getBoundingClientRect().top;
Expand All @@ -770,7 +770,7 @@ describe('IgxChipsArea', () => {
fix.detectChanges();
UIInteractions.simulatePointerEvent(
'pointermove',
secondChip.dragDir['dragGhost'],
secondChip.dragDirective['dragGhost'],
startingX + xDragDifference,
startingY + yDragDifference
);
Expand All @@ -779,7 +779,7 @@ describe('IgxChipsArea', () => {

UIInteractions.simulatePointerEvent(
'pointerup',
secondChip.dragDir['dragGhost'],
secondChip.dragDirective['dragGhost'],
startingX + xDragDifference,
startingY + yDragDifference
);
Expand Down
33 changes: 19 additions & 14 deletions projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1836,21 +1836,22 @@ describe('IgxGrid - GroupBy', () => {
const chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent));
// Disable chip animations
chipComponents.forEach((chip) => {
chip.componentInstance.dragDir.animateOnRelease = false;
chip.componentInstance.dragDirective.animateOnRelease = false;
});

// Trigger initial pointer events on the element with igxDrag. When the drag begins the dragGhost should receive events.
UIInteractions.simulatePointerEvent('pointerdown', chipComponents[0].componentInstance.dragDir.element.nativeElement, 75, 30);
UIInteractions.simulatePointerEvent('pointerdown', chipComponents[0].componentInstance.dragDirective.element.nativeElement, 75, 30);
await wait();
UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDir.element.nativeElement, 110, 30);
UIInteractions.simulatePointerEvent('pointermove',
chipComponents[0].componentInstance.dragDirective.element.nativeElement, 110, 30);
await wait();
fix.detectChanges();

UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDir['dragGhost'], 250, 30);
UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDirective['dragGhost'], 250, 30);
await wait();
fix.detectChanges();

UIInteractions.simulatePointerEvent('pointerup', chipComponents[0].componentInstance.dragDir['dragGhost'], 250, 30);
UIInteractions.simulatePointerEvent('pointerup', chipComponents[0].componentInstance.dragDirective['dragGhost'], 250, 30);
await wait();
fix.detectChanges();
const chipsElems = fix.nativeElement.querySelectorAll('igx-chip');
Expand Down Expand Up @@ -1903,22 +1904,24 @@ describe('IgxGrid - GroupBy', () => {
let chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent));
// Disable chip animations
chipComponents.forEach((chip) => {
chip.componentInstance.dragDir.animateOnRelease = false;
chip.componentInstance.dragDirective.animateOnRelease = false;
});
fix.detectChanges();

// Trigger initial pointer events on the element with igxDrag. When the drag begins the dragGhost should receive events.
UIInteractions.simulatePointerEvent('pointerdown', chipComponents[0].componentInstance.dragDir.element.nativeElement, 100, 30);
UIInteractions.simulatePointerEvent('pointerdown',
chipComponents[0].componentInstance.dragDirective.element.nativeElement, 100, 30);
await wait();
UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDir.element.nativeElement, 110, 30);
UIInteractions.simulatePointerEvent('pointermove',
chipComponents[0].componentInstance.dragDirective.element.nativeElement, 110, 30);
await wait();
fix.detectChanges();

UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDir['dragGhost'], 250, 30);
UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDirective['dragGhost'], 250, 30);
await wait();
fix.detectChanges();

UIInteractions.simulatePointerEvent('pointerup', chipComponents[0].componentInstance.dragDir['dragGhost'], 250, 30);
UIInteractions.simulatePointerEvent('pointerup', chipComponents[0].componentInstance.dragDirective['dragGhost'], 250, 30);
await wait();
fix.detectChanges();

Expand All @@ -1933,17 +1936,19 @@ describe('IgxGrid - GroupBy', () => {
chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent));

// Trigger initial pointer events on the element with igxDrag. When the drag begins the dragGhost should receive events.
UIInteractions.simulatePointerEvent('pointerdown', chipComponents[0].componentInstance.dragDir.element.nativeElement, 100, 30);
UIInteractions.simulatePointerEvent('pointerdown',
chipComponents[0].componentInstance.dragDirective.element.nativeElement, 100, 30);
await wait();
UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDir.element.nativeElement, 110, 30);
UIInteractions.simulatePointerEvent('pointermove',
chipComponents[0].componentInstance.dragDirective.element.nativeElement, 110, 30);
await wait();
fix.detectChanges();

UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDir['dragGhost'], 250, 30);
UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDirective['dragGhost'], 250, 30);
await wait();
fix.detectChanges();

UIInteractions.simulatePointerEvent('pointerup', chipComponents[0].componentInstance.dragDir['dragGhost'], 250, 30);
UIInteractions.simulatePointerEvent('pointerup', chipComponents[0].componentInstance.dragDirective['dragGhost'], 250, 30);
await wait();
fix.detectChanges();

Expand Down

0 comments on commit b1c0a83

Please sign in to comment.