Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

feat(timepicker): add localization config #2719

Merged
merged 4 commits into from
Jun 15, 2021
Merged

feat(timepicker): add localization config #2719

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1f30ab3
fix(timepicker): add localization provider for timepicker
Apr 20, 2021
dd93809
Merge branch 'master' into bugfix/issue-2632
yggg Jun 15, 2021
456b165
refactor: add locale as a property of the existing config object
yggg Jun 15, 2021
fd01cef
docs(timepicker): add note on text localization config
yggg Jun 15, 2021
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
15 changes: 15 additions & 0 deletions src/framework/theme/components/timepicker/model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,24 @@ import { InjectionToken } from '@angular/core';

export const NB_TIME_PICKER_CONFIG = new InjectionToken('NB_TIME_PICKER_CONFIG');

export interface NbTimepickerLocalizationConfig {
hoursText: string,
minutesText: string,
secondsText: string,
ampmText: string,
}

export const NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG: NbTimepickerLocalizationConfig = {
hoursText: 'Hr',
minutesText: 'Min',
secondsText: 'Sec',
ampmText: 'Am/Pm',
};

export interface NbTimePickerConfig {
twelveHoursFormat?: boolean,
format?: string,
localization?: NbTimepickerLocalizationConfig,
}

export interface NbSelectedTimeModel {
Expand Down
36 changes: 25 additions & 11 deletions src/framework/theme/components/timepicker/timepicker.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,12 @@ import { NbPlatform } from '../cdk/platform/platform-service';
import { NbDateService, NbDayPeriod } from '../calendar-kit/services/date.service';
import { range, rangeFromTo } from '../calendar-kit/helpers';
import { NbCalendarTimeModelService } from '../calendar-kit/services/calendar-time-model.service';
import { NB_TIME_PICKER_CONFIG, NbSelectedTimePayload, NbTimePickerConfig } from './model';
import {
NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG,
NB_TIME_PICKER_CONFIG,
NbSelectedTimePayload,
NbTimePickerConfig,
} from './model';

interface NbTimePartOption {
value: number,
Expand Down Expand Up @@ -146,10 +151,10 @@ export class NbTimePickerComponent<D> implements OnChanges, OnInit {
*/
@Input() showFooter: boolean = true;
@Input() applyButtonText: string;
@Input() hoursText = 'Hr';
@Input() minutesText = 'Min';
@Input() secondsText = 'Sec';
@Input() ampmText = 'Am/Pm';
@Input() hoursText: string;
@Input() minutesText: string;
@Input() secondsText: string;
@Input() ampmText: string;
@Input() currentTimeButtonText: string;

/**
Expand All @@ -164,11 +169,7 @@ export class NbTimePickerComponent<D> implements OnChanges, OnInit {
public cd: ChangeDetectorRef,
protected calendarTimeModelService: NbCalendarTimeModelService<D>,
protected dateService: NbDateService<D>) {
if (config) {
this.twelveHoursFormat = config.twelveHoursFormat;
} else {
this.twelveHoursFormat = dateService.getLocaleTimeFormat().includes('h');
}
this.initFromConfig(this.config);
}

ngOnInit(): void {
Expand Down Expand Up @@ -343,7 +344,6 @@ export class NbTimePickerComponent<D> implements OnChanges, OnInit {
}));
}


protected generateMinutesOrSeconds(): NbTimePartOption[] {
return range(60, (v: number) => {
return {value: v, text: this.calendarTimeModelService.paddToTwoSymbols(v)};
Expand All @@ -370,4 +370,18 @@ export class NbTimePickerComponent<D> implements OnChanges, OnInit {
: this.dateService.getTwentyFourHoursFormat()}`;
}
}

protected initFromConfig(config: NbTimePickerConfig) {
if (config) {
this.twelveHoursFormat = config.twelveHoursFormat;
} else {
this.twelveHoursFormat = this.dateService.getLocaleTimeFormat().includes('h');
}

const localeConfig = { ...NB_DEFAULT_TIMEPICKER_LOCALIZATION_CONFIG, ...config?.localization ?? {} };
this.hoursText = localeConfig.hoursText;
this.minutesText = localeConfig.minutesText;
this.secondsText = localeConfig.secondsText;
this.ampmText = localeConfig.ampmText;
}
}
19 changes: 19 additions & 0 deletions src/framework/theme/components/timepicker/timepicker.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,25 @@ import { NB_DOCUMENT } from '../../theme.options';
* <input [nbTimepicker]="timepicker" twelveHoursFormat>
* <nb-timepicker #timepicke [ngModel]="date"></nb-timepicker>
*
* You can provide localized versions of the timepicker text via the `localization` property of the config
* object passed to the `forRoot` or `forChild` methods of the `NbTimepickerModule`:
* ```ts
* @NgModule({
* imports: [
* // ...
* NbTimepickerModule.forRoot({
* localization: {
* hoursText: 'Hr',
* minutesText: 'Min',
* secondsText: 'Sec',
* ampmText: 'Am/Pm',
* }
* }),
* ],
* })
* export class AppModule { }
* ```
*
* @styles
*
* timepicker-cell-text-color:
Expand Down