Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

issue #202 ability to provide options to the MomentModule #209

Merged
merged 5 commits into from
Jan 13, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ node_modules
.ng_pkg_build
*.log
dist
/package-lock.json
23 changes: 23 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,22 @@ import { MomentModule } from 'ngx-moment';
})
```

If you would like to supply any `NgxMomentOptions` that will be made available to the pipes you can also use:

```typescript
import { MomentModule } from 'ngx-moment';

@NgModule({
imports: [
MomentModule.forRoot({
relativeTimeThresholdOptions: {
'm': 59
}
})
]
})
```

This makes all the `ngx-moment` pipes available for use in your app components.

Available pipes
Expand Down Expand Up @@ -331,6 +347,13 @@ Prints `Today is before tomorrow: true`

Prints `Tomorrow is after today: true`

NgxMomentOptions
----------------
An `NgxMomentOptions` object can be provided to the module using the `forRoot` convention and will provide options for the pipes to use with the `moment` instance, these options are detailed in the table below:

| prop | type | description |
| --- |:---:| --- |
| relativeTimeThresholdOptions | Dictionary<br>key: string<br>value: number | Provides the `relativeTimeThreshold` units allowing a pipe to set the `moment.relativeTimeThreshold` values. <br><br>The `key` is a unit defined as one of `ss`, `s`, `m`, `h`, `d`, `M`.<br><br>See [Relative Time Thresholds](https://momentjs.com/docs/#/customization/relative-time-threshold/) documentation for more details. |

Complete Example
----------------
Expand Down
21 changes: 20 additions & 1 deletion src/duration.pipe.spec.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {DurationPipe} from './duration.pipe';
import { DurationPipe } from './duration.pipe';
import { NgxMomentOptions } from './moment-options';

describe('DurationPipe', () => {
let pipe: DurationPipe;
Expand All @@ -17,5 +18,23 @@ describe('DurationPipe', () => {
expect(pipe.transform(365, 'days')).toEqual('a year');
expect(pipe.transform(86400, 'seconds')).toEqual('a day');
});

it(`should convert '50 minutes' to 'an hour' with default 'relativeTimeThreshold'`, () => {
expect(pipe.transform(50, 'minutes')).toEqual('an hour');
});
});

describe('ctor with NgxMomentOptions', () => {
const momentOptions: NgxMomentOptions = {
relativeTimeThresholdOptions: {
'm': 59
}
};

beforeEach(() => pipe = new DurationPipe(momentOptions));

it(`should convert '50 minutes' to '50 minutes' when relativeTimeThreshold for 'm' unit is set to 59`, () => {
expect(pipe.transform(50, 'minutes')).toEqual('50 minutes');
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

});
});
});
26 changes: 25 additions & 1 deletion src/duration.pipe.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,36 @@
import {Pipe, PipeTransform} from '@angular/core';
import * as moment from 'moment';

import { Inject, Optional, Pipe, PipeTransform } from '@angular/core';
import { NGX_MOMENT_OPTIONS, NgxMomentOptions } from './moment-options';

@Pipe({ name: 'amDuration' })
export class DurationPipe implements PipeTransform {

allowedUnits: Array<string> = ['ss', 's', 'm', 'h', 'd', 'M'];

constructor(@Optional() @Inject(NGX_MOMENT_OPTIONS) momentOptions?: NgxMomentOptions) {
this._applyOptions(momentOptions);
}

transform(value: any, ...args: string[]): string {
if (typeof args === 'undefined' || args.length !== 1) {
throw new Error('DurationPipe: missing required time unit argument');
}
return moment.duration(value, args[0] as moment.unitOfTime.DurationConstructor).humanize();
}

private _applyOptions(momentOptions: NgxMomentOptions): void {
if (!momentOptions) {
return;
}

if (!!momentOptions.relativeTimeThresholdOptions) {
const units: Array<string> = Object.keys(momentOptions.relativeTimeThresholdOptions);
const filteredUnits: Array<string> = units.filter(unit => this.allowedUnits.indexOf(unit) !== -1);
filteredUnits.forEach(unit => {
moment.relativeTimeThreshold(unit, momentOptions.relativeTimeThresholdOptions[unit]);
});
}
}

}
2 changes: 2 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,5 @@ export { LocalePipe } from './locale.pipe';
export { ParseZonePipe } from './parse-zone.pipe';
export { IsBeforePipe } from './is-before.pipe';
export { IsAfterPipe } from './is-after.pipe';

export { NgxMomentOptions, NGX_MOMENT_OPTIONS } from './moment-options';
16 changes: 16 additions & 0 deletions src/moment-options.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { InjectionToken } from '@angular/core';

export const NGX_MOMENT_OPTIONS: InjectionToken<NgxMomentOptions> = new InjectionToken<NgxMomentOptions>('NGX_MOMENT_OPTIONS');

export interface NgxMomentOptions {
/**
* relativeTimeThresholdOptions
* @description Provides the `relativeTimeThreshold` units allowing a pipe to set the `moment.relativeTimeThreshold` values.
* The `key` is a unit defined as one of `ss`, `s`, `m`, `h`, `d`, `M`.
* @see https://momentjs.com/docs/#/customization/relative-time-threshold/
* @example by default more than 45 seconds is considered a minute, more than 22 hours is considered a day and so on.
* So settings the unit 'm' to `59` will adjust the `relativeTimeThreshold` and consider more than 59 minutes
* to be an hour (default is `45 minutes`)
*/
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding this doc comment. Can you please also add a note to the README explaining this?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

README updated in next commit

relativeTimeThresholdOptions: { [key: string]: number };
}
19 changes: 17 additions & 2 deletions src/moment.module.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import { ModuleWithProviders, NgModule } from '@angular/core';
import { NGX_MOMENT_OPTIONS, NgxMomentOptions } from './moment-options';

import { AddPipe } from './add.pipe';
import { CalendarPipe } from './calendar.pipe';
import { DateFormatPipe } from './date-format.pipe';
Expand All @@ -9,7 +12,6 @@ import { IsAfterPipe } from './is-after.pipe';
import { IsBeforePipe } from './is-before.pipe';
import { LocalTimePipe } from './local.pipe';
import { LocalePipe } from './locale.pipe';
import { NgModule } from '@angular/core';
import { ParsePipe } from './parse.pipe';
import { ParseZonePipe } from './parse-zone.pipe';
import { SubtractPipe } from './subtract.pipe';
Expand Down Expand Up @@ -39,4 +41,17 @@ const ANGULAR_MOMENT_PIPES = [
declarations: ANGULAR_MOMENT_PIPES,
exports: ANGULAR_MOMENT_PIPES
})
export class MomentModule { }
export class MomentModule {
static forRoot(options?: NgxMomentOptions): ModuleWithProviders {
return {
ngModule: MomentModule,
providers: [
{
provide: NGX_MOMENT_OPTIONS, useValue: {
...options
}
}
]
};
}
}