Skip to content

Commit a2cf288

Browse files
SAndreevabkulov
SAndreeva
authored and
bkulov
committed
Date/time picker: action buttons customization (#4942)
* feat(pickers): custom buttons functionality #4647 * chore(*): fix lint errors #4647 * chore(*): remove trailing white space #4647 * feat(pickers): add custom styling ability #4647 * feat(pickers): remove css and unify retemplating approach #4647 * chore(*): update README.md and CHANGELOG.md #4647 * chore(*): address some review comments #4647 * chore(*): more code improvements #4647 * fix(time-picker): Fixed failing test #4942 * chore(*): update code snippet in README.md #4647 * fix(*): build error #4647
1 parent 9018e5a commit a2cf288

23 files changed

+507
-52
lines changed

‎CHANGELOG.md

+20
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,26 @@
33
All notable changes for each version of this project will be documented in this file.
44

55
## 7.3.4
6+
67
### New feature
78
- **igxSlider** - exposing new `labels` property accepting a collection of literal values that become equally spread over the slider, by placing each element as a thumb label.
89
- **igxSlider** - deprecate **isContiunous** property.
910

11+
- `igxTimePicker` changes
12+
- `onClosing` event is added.
13+
- **Breaking Change** `onOpen` event is renamed to `onOpened`.
14+
- **Breaking Change** `onClose` event is renamed to `onClosed`.
15+
- **Behavioral Change** - action buttons are now available in the dropdown mode.
16+
- **Feature** `IgxTimePickerComponent` now provides the ability for adding custom action buttons. Read up more information in the [ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/time-picker/README.md)
17+
18+
- `igxDatePicker` changes
19+
- `onClosing` event is added.
20+
- **Breaking Change** `onOpen` event is renamed to `onOpened`.
21+
- **Breaking Change** `onClose` event is renamed to `onClosed`.
22+
- **Behavioral Change** - action buttons are now available in the dropdown mode.
23+
- **Feature** `IgxDatePickerComponent` now provides the ability for adding custom action buttons. Read up more information in the [ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/date-picker/README.md)
24+
25+
1026
## 7.3.3
1127

1228
- `igx-core()` now includes some styles for printing layout.
@@ -15,6 +31,10 @@ In order to turn them off, you need to pass an argument and set it to `false`
1531
@include igx-core($print-layout: false);
1632
```
1733

34+
- `Pager`
35+
- **Behavioral Change** - The pager is now hidden when there are no records in the grid.
36+
37+
1838
## 7.3.1
1939
- `IgxGrid` Custom keyboard navigation
2040
- `onFocusChange` event is deprecated.

‎projects/igniteui-angular/migrations/migration-collection.json

+5
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,11 @@
4040
"version": "7.2.0",
4141
"description": "Updates Ignite UI for Angular from v7.0.2 to v7.2.0",
4242
"factory": "./update-7_2_0"
43+
},
44+
"migration-09": {
45+
"version": "7.3.4",
46+
"description": "Updates Ignite UI for Angular from v7.2.0 to v7.3.4",
47+
"factory": "./update-7_3_4"
4348
}
4449
}
4550
}

‎projects/igniteui-angular/migrations/update-7_3_4/changes/outputs.json

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"$schema": "../../common/schema/binding.schema.json",
3+
"changes": [
4+
{
5+
"name": "onOpen",
6+
"replaceWith": "onOpened",
7+
"owner": {
8+
"selector": "igx-time-picker",
9+
"type": "component"
10+
}
11+
},
12+
{
13+
"name": "onClose",
14+
"replaceWith": "onClosed",
15+
"owner": {
16+
"selector": "igx-time-picker",
17+
"type": "component"
18+
}
19+
},
20+
{
21+
"name": "onOpen",
22+
"replaceWith": "onOpened",
23+
"owner": {
24+
"selector": "igx-date-picker",
25+
"type": "component"
26+
}
27+
},
28+
{
29+
"name": "onClose",
30+
"replaceWith": "onClosed",
31+
"owner": {
32+
"selector": "igx-date-picker",
33+
"type": "component"
34+
}
35+
}
36+
]
37+
}

‎projects/igniteui-angular/migrations/update-7_3_4/index.spec.ts

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import * as path from 'path';
2+
3+
// tslint:disable:no-implicit-dependencies
4+
import { virtualFs } from '@angular-devkit/core';
5+
import { EmptyTree } from '@angular-devkit/schematics';
6+
// tslint:disable-next-line:no-submodule-imports
7+
import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
8+
9+
describe('Update 7.3.4', () => {
10+
let appTree: UnitTestTree;
11+
const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
12+
const configJson = {
13+
defaultProject: 'testProj',
14+
projects: {
15+
testProj: {
16+
sourceRoot: '/testSrc'
17+
}
18+
},
19+
schematics: {
20+
'@schematics/angular:component': {
21+
prefix: 'appPrefix'
22+
}
23+
}
24+
};
25+
26+
beforeEach(() => {
27+
appTree = new UnitTestTree(new EmptyTree());
28+
appTree.create('/angular.json', JSON.stringify(configJson));
29+
});
30+
31+
it('should update time picker events', done => {
32+
appTree.create(
33+
'/testSrc/appPrefix/component/test.component.html',
34+
`<igx-time-picker (onOpen)="handler" (onClose)="handler"></igx-time-picker>`
35+
);
36+
const tree = schematicRunner.runSchematic('migration-09', {}, appTree);
37+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
38+
.toEqual(
39+
`<igx-time-picker (onOpened)="handler" (onClosed)="handler"></igx-time-picker>`);
40+
done();
41+
});
42+
43+
it('should update date picker events', done => {
44+
appTree.create(
45+
'/testSrc/appPrefix/component/test.component.html',
46+
`<igx-date-picker (onOpen)="handler" (onClose)="handler"></igx-date-picker>`
47+
);
48+
const tree = schematicRunner.runSchematic('migration-09', {}, appTree);
49+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
50+
.toEqual(
51+
`<igx-date-picker (onOpened)="handler" (onClosed)="handler"></igx-date-picker>`);
52+
done();
53+
});
54+
});

‎projects/igniteui-angular/migrations/update-7_3_4/index.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import * as path from 'path';
2+
3+
// tslint:disable:no-implicit-dependencies
4+
import { normalize } from '@angular-devkit/core';
5+
import {
6+
chain,
7+
Rule,
8+
SchematicContext,
9+
SchematicsException,
10+
Tree
11+
} from '@angular-devkit/schematics';
12+
import { filterSourceDirs } from '../common/filterSourceDirs';
13+
import { getImportModulePositions } from '../common/tsUtils';
14+
import { UpdateChanges } from '../common/UpdateChanges';
15+
16+
const version = '7.3.4';
17+
18+
export default function(): Rule {
19+
return (host: Tree, context: SchematicContext) => {
20+
context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
21+
22+
const update = new UpdateChanges(__dirname, host, context);
23+
update.applyChanges();
24+
};
25+
}

‎projects/igniteui-angular/src/lib/date-picker/README.md

+15
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,21 @@ In order to re-template a date picker in `dropdown` mode, an element should be m
8888
</ng-template>
8989
</igx-date-picker>
9090
```
91+
The DatePicker action buttons could be retemplated.
92+
```html
93+
<igx-date-picker #picker>
94+
<ng-template igxDatePickerActions>
95+
<div class="action-buttons">
96+
<button igxButton="flat" (click)="selectToday(picker)">Today</button>
97+
</div>
98+
</ng-template>
99+
</igx-date-picker>
100+
```
101+
```typescript
102+
public selectToday(picker: IgxDatePickerComponent) {
103+
picker.calendar.value = picker.calendar.viewDate = new Date(Date.now());
104+
}
105+
```
91106

92107
# API
93108

‎projects/igniteui-angular/src/lib/date-picker/calendar-container.component.html

+13-9
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
<igx-calendar #calendar></igx-calendar>
2-
<div class="igx-date-picker__buttons" *ngIf="isReadonly &&
3-
(cancelButtonLabel || todayButtonLabel)">
4-
<button #closeButton *ngIf="cancelButtonLabel" igxButton="flat" igxRipple (click)="closeCalendar()">
5-
{{ cancelButtonLabel }}
6-
</button>
7-
<button #todayButton *ngIf="todayButtonLabel" igxButton="flat" igxRipple (click)="triggerTodaySelection()">
8-
{{ todayButtonLabel }}
9-
</button>
1+
<ng-template #defaultDatePickerActions>
2+
<div *ngIf="cancelButtonLabel || todayButtonLabel" class="igx-date-picker__buttons">
3+
<button #closeButton *ngIf="cancelButtonLabel" igxButton="flat" igxRipple (click)="closeCalendar()">
4+
{{ cancelButtonLabel }}
5+
</button>
6+
<button #todayButton *ngIf="todayButtonLabel" igxButton="flat" igxRipple (click)="triggerTodaySelection()">
7+
{{ todayButtonLabel }}
8+
</button>
9+
</div>
10+
</ng-template>
11+
<div>
12+
<igx-calendar #calendar></igx-calendar>
13+
<ng-container *ngTemplateOutlet="datePickerActions ? datePickerActions.template : defaultDatePickerActions"></ng-container>
1014
</div>

‎projects/igniteui-angular/src/lib/date-picker/calendar-container.component.ts

+4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, ViewChild, Input, Output, EventEmitter, HostListener, HostBinding } from '@angular/core';
22
import { IgxCalendarComponent } from '../calendar';
33
import { InteractionMode } from '../core/enums';
4+
import { IgxDatePickerActionsDirective } from './date-picker.directives';
45

56
/**
67
* @hidden
@@ -26,6 +27,9 @@ export class IgxCalendarContainerComponent {
2627
@Input()
2728
public todayButtonLabel: string;
2829

30+
@Input()
31+
public datePickerActions: IgxDatePickerActionsDirective;
32+
2933
@Output()
3034
public onClose = new EventEmitter();
3135

‎projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

+11
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,10 @@ describe('IgxDatePicker', () => {
277277
const picker = document.getElementsByClassName('igx-calendar-picker');
278278
const formattedSubHeaderText = (picker[0].children[1] as HTMLElement).innerText;
279279
expect(formattedSubHeaderText).toBe('2019/Oct');
280+
281+
const buttons = document.getElementsByClassName('igx-button--flat');
282+
expect(buttons.length).toEqual(1);
283+
expect((buttons[0]as HTMLElement).innerText).toBe('TEST');
280284
});
281285

282286
it('Retemplated calendar in date picker - dropdown mode', () => {
@@ -295,6 +299,10 @@ describe('IgxDatePicker', () => {
295299
const picker = document.getElementsByClassName('igx-calendar-picker');
296300
const formattedSubHeaderText = (picker[0].children[1] as HTMLElement).innerText;
297301
expect(formattedSubHeaderText).toBe('2019/Oct');
302+
303+
const buttons = document.getElementsByClassName('igx-button--flat');
304+
expect(buttons.length).toEqual(1);
305+
expect((buttons[0]as HTMLElement).innerText).toBe('TEST');
298306
});
299307

300308
it('locale propagate calendar value (de-DE)', () => {
@@ -1197,6 +1205,9 @@ export class IgxDatePickerEditableComponent {
11971205
<span class="date__el" (click)="format.yearView()">{{ format.year.combined }}/</span>
11981206
<span class="date__el" (click)="format.monthView()">{{ format.month.combined | titlecase }}</span>
11991207
</ng-template>
1208+
<ng-template igxDatePickerActions>
1209+
<button igxButton="flat">TEST</button>
1210+
</ng-template>
12001211
</igx-date-picker>
12011212
`
12021213
})

0 commit comments

Comments
 (0)