Skip to content

Commit

Permalink
feat(datepicker): removed dependency on moment.js (#2465)
Browse files Browse the repository at this point in the history
* chore(datepicker): covering with tests

* WIP

* WIP

* feat(datepicker): removed dependency on moment.js
  • Loading branch information
valorkin authored Aug 21, 2017
1 parent e0a6adf commit 7c87162
Show file tree
Hide file tree
Showing 15 changed files with 256 additions and 73 deletions.
2 changes: 0 additions & 2 deletions demo/src/app/getting-started/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,6 @@

ngx-bootstrap contains all core (and not only) Bootstrap components powered by Angular. So you don't need to include original JS components, but we are using markup and css provided by Bootstrap.

Additionally to allow reach experience while working with Dates we are using [moment.js](http://momentjs.com/), de facto base date manipulation library at the moment.

# Installation instructions

Install `ngx-bootstrap` from `npm`
Expand Down
5 changes: 2 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@
},
"homepage": "https://github.com/valor-software/ngx-bootstrap#readme",
"dependencies": {
"moment": "2.18.1"
},
"peerDependencies": {
"@angular/common": "^2.3.1 || >=4.0.0",
Expand All @@ -65,7 +64,7 @@
"@angular/forms": "^2.3.1 || >=4.0.0"
},
"devDependencies": {
"@angular/cli": "1.3.0",
"@angular/cli": "1.3.1",
"@angular/common": "^2.4.4",
"@angular/compiler": "^2.4.4",
"@angular/compiler-cli": "^2.4.4",
Expand All @@ -79,7 +78,7 @@
"@angular/tsc-wrapped": "0.5.1",
"@types/jasmine": "2.5.53",
"@types/marked": "0.3.0",
"@types/node": "8.0.23",
"@types/node": "8.0.24",
"@types/webpack": "3.0.9",
"bootstrap": "3.3.7",
"classlist-polyfill": "1.2.0",
Expand Down
2 changes: 1 addition & 1 deletion scripts/test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ let context = require.context('../demo/src', true, /\.spec\.ts/);
// And load the modules.
context.keys().map(context);

let context2 = require.context('../src/spec', true, /\.spec\.ts/);
let context2 = require.context('../src', true, /\.spec\.ts/);
context2.keys().map(context2);
// Finally, start Karma to run the tests.
__karma__.start();
46 changes: 46 additions & 0 deletions src/baseline.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { async, TestBed } from '@angular/core/testing';
import { AlertModule } from './alert/alert.module';
import { AccordionModule } from './accordion/accordion.module';
import { ButtonsModule } from './buttons/buttons.module';
import { CarouselModule } from './carousel/carousel.module';
import { CollapseModule } from './collapse/collapse.module';
import { DatepickerModule } from './datepicker/datepicker.module';
import { BsDropdownModule } from './dropdown/bs-dropdown.module';
import { ModalModule } from './modal/modal.module';
import { PaginationModule } from './pagination/pagination.module';
import { ProgressbarModule } from './progressbar/progressbar.module';
import { PopoverModule } from './popover/popover.module';
import { RatingModule } from './rating/rating.module';
import { TabsModule } from './tabs/tabs.module';
import { TimepickerModule } from './timepicker/timepicker.module';
import { TooltipModule } from './tooltip/tooltip.module';
import { TypeaheadModule } from './typeahead/typeahead.module';

describe('datepicker: [bsDatepickerDayDecorator]', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
AccordionModule.forRoot(),
AlertModule.forRoot(),
ButtonsModule.forRoot(),
CarouselModule.forRoot(),
CollapseModule.forRoot(),
DatepickerModule.forRoot(),
BsDropdownModule.forRoot(),
ModalModule.forRoot(),
PaginationModule.forRoot(),
ProgressbarModule.forRoot(),
PopoverModule.forRoot(),
RatingModule.forRoot(),
TabsModule.forRoot(),
TimepickerModule.forRoot(),
TooltipModule.forRoot(),
TypeaheadModule.forRoot()
]
})
.compileComponents();
}));

// beforeEach(() => {
// });
});
11 changes: 8 additions & 3 deletions src/datepicker/bs-datepicker.module.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import { CommonModule } from '@angular/common';
import { ModuleWithProviders, NgModule } from '@angular/core';
import { isDevMode, ModuleWithProviders, NgModule } from '@angular/core';
import { BsDatepickerActions } from './reducer/bs-datepicker.actions';
import { BsDatepickerStore } from './reducer/bs-datepicker.store';
import { BsDatepickerContainerComponent } from './themes/bs/bs-datepicker-container.component';
import { BsDatepickerMonthViewComponent } from './themes/bs/bs-datepicker-month-view.component';
import { BsDatepickerNavigationViewComponent } from './themes/bs/bs-datepicker-navigation-view.component';
import { BsDatepickerViewComponent } from './themes/bs/bs-datepicker-view.component';
import { BsDatepickerDayViewComponent } from './themes/bs/bs-datepicker-day-view.component';
import { BsDatepickerConfig } from './bs-datepicker-config';
import { BsDatepickerEffects } from './reducer/bs-datepicker.effects';
import { BsDaterangepickerContainerComponent } from './themes/bs/bs-daterangepicker-container.component';
Expand All @@ -22,7 +21,6 @@ import { BsDatepickerDayDecoratorComponent } from './themes/bs/bs-datepicker-day
BsDatepickerMonthViewComponent,
BsDatepickerViewComponent,
BsDatepickerNavigationViewComponent,
BsDatepickerDayViewComponent,
BsDatepickerDayDecoratorComponent,
BsDatepickerContainerComponent,
BsDaterangepickerContainerComponent,
Expand All @@ -34,6 +32,13 @@ import { BsDatepickerDayDecoratorComponent } from './themes/bs/bs-datepicker-day
BsDatepickerComponent, BsDaterangepickerComponent]
})
export class BsDatepickerModule {
constructor() {
if (isDevMode()) {
console.warn(`BsDatepickerModule is under development,
BREAKING CHANGES are possible,
PLEASE, read changelog`);
}
}
static forRoot(): ModuleWithProviders {
return {
ngModule: BsDatepickerModule,
Expand Down
6 changes: 3 additions & 3 deletions src/datepicker/date-formatter.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import moment from 'moment';
import { formatDate } from '../bs-moment/format';

export class DateFormatter {
public format(date:Date, format:string):string {
return moment(date.getTime()).format(format);
public format(date: Date, format: string): string {
return formatDate(date, format);
}
}
14 changes: 0 additions & 14 deletions src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@ import { DayHoverEvent, DayViewModel } from '../../models/index';
selector: '[bsDatepickerDayDecorator]',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'(click)': 'selectDay(day)',
'(mouseenter)': 'hoverDay(day, true)',
'(mouseleave)': 'hoverDay(day, false)',
'[class.disabled]': 'day.isDisabled',
'[class.is-highlighted]': 'day.isHovered',
'[class.is-other-month]': 'day.isOtherMonth',
Expand All @@ -20,15 +17,4 @@ import { DayHoverEvent, DayViewModel } from '../../models/index';
})
export class BsDatepickerDayDecoratorComponent {
@Input() day: DayViewModel;

@Output() onSelect = new EventEmitter<DayViewModel>();
@Output() onHover = new EventEmitter<DayHoverEvent>();

selectDay(day: DayViewModel): void {
this.onSelect.emit(day);
}

hoverDay(day: DayViewModel, isHovered: boolean): void {
this.onHover.emit({day, isHovered});
}
}
76 changes: 76 additions & 0 deletions src/datepicker/themes/bs/bs-datepicker-day-decorator.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { Component } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DayViewModel } from '../../models/index';
import { BsDatepickerDayDecoratorComponent } from './bs-datepicker-day-decorator.directive';

function getDayElement(fixture: ComponentFixture<TestComponent>): HTMLElement {
return fixture.nativeElement.querySelector('[bsDatepickerDayDecorator]') as HTMLElement;
}

function setDay(fixture: ComponentFixture<TestComponent>, day: Partial<DayViewModel>): void {
fixture.componentInstance.day = day as DayViewModel;
fixture.detectChanges();
}

describe('datepicker: [bsDatepickerDayDecorator]', () => {
let fixture: ComponentFixture<TestComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TestComponent, BsDatepickerDayDecoratorComponent]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(TestComponent);
});

it('should display date', () => {
// arrange
const label = 'some label';
setDay(fixture, {label});
const el = getDayElement(fixture);
// assert
expect(el.innerText).toBe(label);
});

it('should not add any special classes by default', () => {
fixture.detectChanges();
const el = getDayElement(fixture);
expect(el).not.toHaveCssClass('disabled');
expect(el).not.toHaveCssClass('is-highlighted');
expect(el).not.toHaveCssClass('is-other-month');
expect(el).not.toHaveCssClass('in-range');
expect(el).not.toHaveCssClass('select-start');
expect(el).not.toHaveCssClass('select-end');
expect(el).not.toHaveCssClass('selected');
});

it('should add classes corresponding to day state', () => {
setDay(fixture, {
isDisabled: true,
isHovered: true,
isOtherMonth: true,
isInRange: true,
isSelectionStart: true,
isSelectionEnd: true,
isSelected: true
});
const el = getDayElement(fixture);
expect(el).toHaveCssClass('disabled');
expect(el).toHaveCssClass('is-highlighted');
expect(el).toHaveCssClass('is-other-month');
expect(el).toHaveCssClass('in-range');
expect(el).toHaveCssClass('select-start');
expect(el).toHaveCssClass('select-end');
expect(el).toHaveCssClass('selected');
});
});

@Component({
selector: 'test-cmp',
template: `<span bsDatepickerDayDecorator [day]="day">{{ day.label }}</span>`
})
class TestComponent {
day: DayViewModel = { } as DayViewModel;
}
35 changes: 0 additions & 35 deletions src/datepicker/themes/bs/bs-datepicker-day-view.component.ts

This file was deleted.

12 changes: 7 additions & 5 deletions src/datepicker/themes/bs/bs-datepicker-month-view.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,11 @@ import { DatepickerRenderOptions, DayHoverEvent, DayViewModel, MonthViewModel }
<td class="week" *ngIf="options.showWeekNumbers"><span>{{ month.weekNumbers[i] }}</span>
</td>
<td *ngFor="let day of week.days" role="gridcell">
<span bsDatepickerDayDecorator [day]="day"
(onSelect)="selectDay($event)"
(onHover)="hoverDay($event)">{{ day.label }}</span>
<span bsDatepickerDayDecorator
[day]="day"
(click)="selectDay(day)"
(mouseenter)="hoverDay(day, true)"
(mouseleave)="hoverDay(day, false)">{{ day.label }}</span>
</td>
</tr>
</tbody>
Expand All @@ -40,8 +42,8 @@ export class BsDatepickerMonthViewComponent {
this.onSelect.emit(event);
}

hoverDay(event: DayHoverEvent): void {
this.onHover.emit(event);
hoverDay(day: DayViewModel, isHovered: boolean): void {
this.onHover.emit({day, isHovered});
}
}

Loading

0 comments on commit 7c87162

Please sign in to comment.