Skip to content

Commit

Permalink
feat(i18n): support i18n functionality (zh-CN, en-US currently)
Browse files Browse the repository at this point in the history
close #427
  • Loading branch information
wilsoncook committed Oct 28, 2017
1 parent 3e007a2 commit 552fa50
Show file tree
Hide file tree
Showing 47 changed files with 811 additions and 122 deletions.
7 changes: 4 additions & 3 deletions src/components/calendar/nz-calendar.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import {

import * as moment from 'moment';
import { Moment } from 'moment';
import 'moment/locale/zh-cn';
// import 'moment/locale/zh-cn';
import { NzLocaleService } from '../locale';

export interface MonthInterface {
index: number;
Expand Down Expand Up @@ -207,7 +208,7 @@ export class NzCalendarComponent implements OnInit {
_showMonth = moment(new Date()).month();
_showYear = moment(new Date()).year();
_value: Date = new Date();
_locale = 'zh-cn';
_locale = this._localeService.getLocale().locale;
@ContentChild('dateCell') dateCell: TemplateRef<any>;
@ContentChild('monthCell') monthCell: TemplateRef<any>;

Expand Down Expand Up @@ -372,7 +373,7 @@ export class NzCalendarComponent implements OnInit {
return listOfYears;
};

constructor(private _elementRef: ElementRef) {
constructor(private _elementRef: ElementRef, private _localeService: NzLocaleService) {
this._el = this._elementRef.nativeElement;
}

Expand Down
3 changes: 2 additions & 1 deletion src/components/calendar/nz-calendar.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@ import { CommonModule } from '@angular/common';
import { NzSelectModule } from '../select/nz-select.module';
import { NzRadioModule } from '../radio/nz-radio.module';
import { FormsModule } from '@angular/forms';
import { NzLocaleModule } from '../locale';

@NgModule({
imports : [ CommonModule, NzSelectModule, NzRadioModule, FormsModule ],
imports : [ CommonModule, NzSelectModule, NzRadioModule, FormsModule, NzLocaleModule ],
declarations: [ NzCalendarComponent ],
exports : [ NzCalendarComponent ]
})
Expand Down
47 changes: 24 additions & 23 deletions src/components/datepicker/nz-datepicker.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { DropDownAnimation } from '../core/animation/dropdown-animations';
import { NzTimePickerInnerComponent } from '../time-picker/nz-timepicker-inner.component';
import { DEFAULT_DATEPICKER_POSITIONS } from '../core/overlay/overlay-position-map';
import { ConnectionPositionPair } from '@angular/cdk/overlay';
import { NzLocaleService } from '../locale';

@Component({
selector : 'nz-datepicker',
Expand Down Expand Up @@ -64,36 +65,36 @@ import { ConnectionPositionPair } from '@angular/cdk/overlay';
#dateBox
(blur)="_blurInput(dateBox)">
</div>
<a class="ant-calendar-clear-btn" title="清除"></a>
<a class="ant-calendar-clear-btn" title="{{ 'DateTime.clear' | nzTranslate }}"></a>
</div>
<div class="ant-calendar-date-panel">
<div class="ant-calendar-header">
<div style="position: relative;" *ngIf="_mode!='time'">
<a class="ant-calendar-prev-year-btn" title="上一年" (click)="_preYear()"></a>
<a class="ant-calendar-prev-month-btn" title="上个月" (click)="_preMonth()"></a>
<a class="ant-calendar-prev-year-btn" title="{{ 'DateTime.prevYear' | nzTranslate }}" (click)="_preYear()"></a>
<a class="ant-calendar-prev-month-btn" title="{{ 'DateTime.prevMonth' | nzTranslate }}" (click)="_preMonth()"></a>
<span class="ant-calendar-ym-select">
<a class="ant-calendar-month-select" title="选择月份" (click)="_changeMonthView()">{{_showMonth + 1}}月</a>
<a class="ant-calendar-year-select" title="选择年份" (click)="_changeDecadeView($event)">{{_showYear}}年</a>
<a class="ant-calendar-month-select" title="{{ 'DateTime.chooseMonth' | nzTranslate }}" (click)="_changeMonthView()">{{ 'DateTime.nMonth' | nzTranslate: { num: _showMonth + 1 } }}</a>
<a class="ant-calendar-year-select" title="{{ 'DateTime.chooseYear' | nzTranslate }}" (click)="_changeDecadeView($event)">{{ 'DateTime.nYear' | nzTranslate: { num: _showYear } }}</a>
</span>
<a class="ant-calendar-next-month-btn" title="下个月" (click)="_nextMonth()"></a>
<a class="ant-calendar-next-year-btn" title="下一年" (click)="_nextYear()"></a>
<a class="ant-calendar-next-month-btn" title="{{ 'DateTime.nextMonth' | nzTranslate }}" (click)="_nextMonth()"></a>
<a class="ant-calendar-next-year-btn" title="{{ 'DateTime.nextYear' | nzTranslate }}" (click)="_nextYear()"></a>
</div>
<div style="position: relative;" *ngIf="_mode=='time'">
<span class="ant-calendar-my-select">
<a class="ant-calendar-year-select" title="Choose a month">{{_selectedYear}}年</a>
<a class="ant-calendar-month-select" title="Choose a month">{{_showMonth + 1}}月</a>
<a class="ant-calendar-day-select">{{_selectedDate}}日</a>
<a class="ant-calendar-year-select" title="Choose a month">{{ 'DateTime.nYear' | nzTranslate: { num: _selectedYear } }}</a>
<a class="ant-calendar-month-select" title="Choose a month">{{ 'DateTime.nMonth' | nzTranslate: { num: _showMonth + 1 } }}</a>
<a class="ant-calendar-day-select">{{ 'DateTime.nDay' | nzTranslate: { num: _selectedDate } }}</a>
</span>
</div>
<div class="ant-calendar-month-panel" *ngIf="_mode=='month'">
<div>
<div class="ant-calendar-month-panel-header">
<a class="ant-calendar-month-panel-prev-year-btn" title="上一年" (click)="_preYear()"></a>
<a class="ant-calendar-month-panel-year-select" title="选择年份" (click)="_changeDecadeView($event)">
<a class="ant-calendar-month-panel-prev-year-btn" title="{{ 'DateTime.prevYear' | nzTranslate }}" (click)="_preYear()"></a>
<a class="ant-calendar-month-panel-year-select" title="{{ 'DateTime.chooseYear' | nzTranslate }}" (click)="_changeDecadeView($event)">
<span class="ant-calendar-month-panel-year-select-content">{{_showYear}}</span>
<span class="ant-calendar-month-panel-year-select-arrow">x</span>
</a>
<a class="ant-calendar-month-panel-next-year-btn" title="下一年" (click)="_nextYear()"></a>
<a class="ant-calendar-month-panel-next-year-btn" title="{{ 'DateTime.nextYear' | nzTranslate }}" (click)="_nextYear()"></a>
</div>
<div class="ant-calendar-month-panel-body">
<nz-calendar
Expand All @@ -115,12 +116,12 @@ import { ConnectionPositionPair } from '@angular/cdk/overlay';
<div class="ant-calendar-year-panel" *ngIf="_mode=='decade'">
<div>
<div class="ant-calendar-year-panel-header">
<a class="ant-calendar-year-panel-prev-decade-btn" title="上一年代" (click)="_preDecade()"></a>
<a class="ant-calendar-year-panel-decade-select" title="选择年代">
<a class="ant-calendar-year-panel-prev-decade-btn" title="{{ 'DateTime.prevDecade' | nzTranslate }}" (click)="_preDecade()"></a>
<a class="ant-calendar-year-panel-decade-select" title="{{ 'DateTime.chooseDecade' | nzTranslate }}">
<span class="ant-calendar-year-panel-decade-select-content">{{_startDecade}}-{{_startDecade + 9}}</span>
<span class="ant-calendar-year-panel-decade-select-arrow">x</span>
</a>
<a class="ant-calendar-year-panel-next-decade-btn" title="下一年代" (click)="_nextDecade()"></a>
<a class="ant-calendar-year-panel-next-decade-btn" title="{{ 'DateTime.nextDecade' | nzTranslate }}" (click)="_nextDecade()"></a>
</div>
<div class="ant-calendar-year-panel-body">
<table class="ant-calendar-year-panel-table" cellspacing="0" role="grid">
Expand All @@ -145,7 +146,7 @@ import { ConnectionPositionPair } from '@angular/cdk/overlay';
</div>
</div>
<nz-timepicker-inner
[nzPlaceHolder]="nzShowTime&&nzShowTime.nzPlaceHolder||'请选择时间'"
[nzPlaceHolder]="nzShowTime && nzShowTime.nzPlaceHolder || ('DateTime.chooseTimePlease' | nzTranslate)"
[nzFormat]="nzShowTime&&nzShowTime.nzFormat||'HH:mm:ss'"
[nzDisabled]="nzShowTime&&nzShowTime.nzDisabled||false"
[nzDisabledHours]="nzShowTime&&nzShowTime.nzDisabledHours||null"
Expand All @@ -159,10 +160,10 @@ import { ConnectionPositionPair } from '@angular/cdk/overlay';
</div>
<div class="ant-calendar-footer ant-calendar-footer-show-ok">
<span class="ant-calendar-footer-btn">
<a class="ant-calendar-today-btn " [attr.title]="_today|nzDate:nzFormat" (click)="_changeToToday()">{{nzShowTime ? '此刻' : '今天'}}</a>
<a class="ant-calendar-time-picker-btn" (click)="_changeTimeView($event)" *ngIf="(_mode != 'time')&&nzShowTime">选择时间</a>
<a class="ant-calendar-time-picker-btn" (click)="_changeYearView($event)" *ngIf="(_mode == 'time')&&nzShowTime">选择日期</a>
<a class="ant-calendar-ok-btn" *ngIf="nzShowTime" (click)="_closeCalendar()">确 定</a>
<a class="ant-calendar-today-btn " [attr.title]="_today|nzDate:nzFormat" (click)="_changeToToday()">{{ (nzShowTime ? 'DateTime.thisMoment' : 'DateTime.today') | nzTranslate }}</a>
<a class="ant-calendar-time-picker-btn" (click)="_changeTimeView($event)" *ngIf="(_mode != 'time')&&nzShowTime">{{ 'DateTime.chooseTime' | nzTranslate }}</a>
<a class="ant-calendar-time-picker-btn" (click)="_changeYearView($event)" *ngIf="(_mode == 'time')&&nzShowTime">{{ 'DateTime.chooseDate' | nzTranslate }}</a>
<a class="ant-calendar-ok-btn" *ngIf="nzShowTime" (click)="_closeCalendar()">{{ 'DateTime.ok' | nzTranslate }}</a>
</span>
</div>
</div>
Expand Down Expand Up @@ -204,7 +205,7 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
@Input() nzDisabledDate;
@Input() nzAllowClear = true;
@Input() nzShowTime: any = null;
@Input() nzPlaceHolder = '请选择日期';
@Input() nzPlaceHolder = this._locale.translate('DateTime.chooseDatePlease');
@Input() nzFormat = 'YYYY-MM-DD';
@Input() nzSize = '';
@Input() nzMode: 'day' | 'month' = 'day';
Expand Down Expand Up @@ -390,7 +391,7 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
this._yearPanel[ 3 ].push('end');
}

constructor(private _elementRef: ElementRef, private _cdr: ChangeDetectorRef) {
constructor(private _elementRef: ElementRef, private _cdr: ChangeDetectorRef, private _locale: NzLocaleService) {
this._el = this._elementRef.nativeElement;
}

Expand Down
3 changes: 2 additions & 1 deletion src/components/datepicker/nz-datepicker.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ import { NzUtilModule } from '../util/nz-util.module';
import { NzCalendarModule } from '../calendar/nz-calendar.module';
import { FormsModule } from '@angular/forms';
import { OverlayModule } from '@angular/cdk/overlay';
import { NzLocaleModule } from '../locale';

@NgModule({
imports : [ CommonModule, NzTimePickerModule, NzUtilModule, NzInputModule, NzCalendarModule, FormsModule, OverlayModule ],
imports : [ CommonModule, NzTimePickerModule, NzUtilModule, NzInputModule, NzCalendarModule, FormsModule, OverlayModule, NzLocaleModule ],
declarations: [ NzDatePickerComponent ],
exports : [ NzDatePickerComponent ]
})
Expand Down
2 changes: 1 addition & 1 deletion src/components/input-number/nz-input-number.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
} from '@angular/core';

import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { TAB } from '@angular/cdk';
import { TAB } from '@angular/cdk/keycodes';

@Component({
selector : 'nz-input-number',
Expand Down
4 changes: 4 additions & 0 deletions src/components/locale/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export { NzLocaleModule } from './nz-locale.module';
export { NZ_LOCALE } from './nz-locale.token';
export { NzLocaleService } from './nz-locale.service';
export * from './locales';
60 changes: 60 additions & 0 deletions src/components/locale/locales/en-US.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { NzLocale } from '../nz-locale.class';
import * as moment from 'moment';

const LOCALE = 'en-US';

moment.locale(LOCALE);

export const enUS: NzLocale = {
locale: LOCALE,

Pagination: {
itemsPerPage: '%num% / page',
jumpTo: 'Goto',
page: '',
forwardPage: '%num% pages forward',
backwardPage: '%num% pages backward',
prevPage: 'Previous page',
nextPage: 'Next page',
firstPage: 'First page',
lastPage: 'Last page: %page%',
totalItems: '%total% items',
},

DateTime: {
clear: 'Clear',
chooseMonth: 'Choose a month',
chooseYear: 'Choose a year',
chooseDecade: 'Choose a decade',
nYear: '%num%',
nMonth: '%num%',
nDay: '%num%',
prevYear: 'Previous year',
nextYear: 'Next year',
prevMonth: 'Previous month',
nextMonth: 'Next month',
prevDecade: 'Previous decade',
nextDecade: 'Next decade',
chooseTime: 'Select time',
chooseDate: 'Select date',
chooseTimePlease: 'Select time',
chooseDatePlease: 'Select date',
thisMoment: 'This moment',
today: 'Today',
ok: 'Ok',
},

Modal: {
okText: 'OK',
cancelText: 'Cancel',
understood: 'Got it',
},

Table: {
emptyText: 'No data',
},

Select: {
notFoundContent: 'Not Found',
},
};
2 changes: 2 additions & 0 deletions src/components/locale/locales/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './zh-CN';
export * from './en-US';
60 changes: 60 additions & 0 deletions src/components/locale/locales/zh-CN.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { NzLocale } from '../nz-locale.class';
import * as moment from 'moment';

const LOCALE = 'zh-CN';

moment.locale(LOCALE);

export const zhCN: NzLocale = {
locale: LOCALE,

Pagination: {
itemsPerPage: '%num% 条/页',
jumpTo: '跳至',
page: '页',
forwardPage: '向前 %num% 页',
backwardPage: '向后 %num% 页',
prevPage: '上一页',
nextPage: '下一页',
firstPage: '第一页',
lastPage: '最后一页: %page%',
totalItems: '共 %total% 条',
},

DateTime: {
clear: '清除',
chooseMonth: '选择月份',
chooseYear: '选择年份',
nYear: '%num%年',
nMonth: '%num%月',
nDay: '%num%日',
prevYear: '上一年',
nextYear: '下一年',
prevMonth: '上个月',
nextMonth: '下个月',
prevDecade: '上一年代',
nextDecade: '下一年代',
chooseDecade: '选择年代',
chooseTime: '选择时间',
chooseDate: '选择日期',
chooseTimePlease: '请选择时间',
chooseDatePlease: '请选择日期',
thisMoment: '此刻',
today: '今天',
ok: '确 定',
},

Modal: {
okText: '确定',
cancelText: '取消',
understood: '知道了',
},

Table: {
emptyText: '没有数据',
},

Select: {
notFoundContent: '无法找到',
},
};
53 changes: 53 additions & 0 deletions src/components/locale/nz-locale.class.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
export class NzLocale {
locale: string; // Present of this locale's lang code

Pagination: {
itemsPerPage: string;
jumpTo: string;
page: string;
forwardPage: string;
backwardPage: string;
prevPage: string;
nextPage: string;
firstPage: string;
lastPage: string;
totalItems: string;
};

DateTime: {
clear: string;
chooseMonth: string;
chooseYear: string;
nYear: string;
nMonth: string;
nDay: string;
prevYear: string;
nextYear: string;
prevMonth: string;
nextMonth: string;
prevDecade: string;
nextDecade: string;
chooseDecade: string;
chooseTime: string;
chooseDate: string;
chooseTimePlease: string;
chooseDatePlease: string;
thisMoment: string;
today: string;
ok: string;
};

Modal: {
okText: string;
cancelText: string;
understood: string;
};

Table: {
emptyText: string;
};

Select: {
notFoundContent: string;
};
}
18 changes: 18 additions & 0 deletions src/components/locale/nz-locale.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { LoggerModule } from '../util/logger';

import { NZ_LOCALE } from './nz-locale.token';
import { zhCN } from './locales';
import { NZ_LOCALE_SERVICE_PROVIDER } from './nz-locale.service';
import { NzTranslatePipe } from './nz-translate.pipe';

@NgModule({
imports: [ LoggerModule ],
declarations: [ NzTranslatePipe ],
exports: [ NzTranslatePipe ],
providers: [
{ provide: NZ_LOCALE, useValue: zhCN },
NZ_LOCALE_SERVICE_PROVIDER,
],
})
export class NzLocaleModule { }
Loading

0 comments on commit 552fa50

Please sign in to comment.