,
ignoreNonExist = false,
) {
- let content = this._i18n.translation[key];
+ let content = this.$$i18n().translation[key];
if (content == null) {
if (isDevMode() && !ignoreNonExist) {
console.warn(`No exist translate key for ${key}`);
diff --git a/stories/rangepicker/basic.component.ts b/stories/rangepicker/basic.component.ts
index 3eaaac9d5..749fa355c 100644
--- a/stories/rangepicker/basic.component.ts
+++ b/stories/rangepicker/basic.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
import { Dayjs } from 'dayjs';
import { I18nService, en, zh } from '@alauda/ui';
@@ -6,7 +6,7 @@ import { I18nService, en, zh } from '@alauda/ui';
@Component({
template: `
- Current Locale: {{ i18n.i18n.locale }}
+ Current Locale: {{ $locale() }}
@@ -25,9 +25,11 @@ import { I18nService, en, zh } from '@alauda/ui';
export class RangeBasicComponent {
range: [Dayjs, Dayjs] = null;
+ $locale = computed(() => this.i18n.$$i18n().locale);
+
constructor(public i18n: I18nService) {}
changeLocale() {
- this.i18n.setI18n(this.i18n.i18n.locale === 'en' ? zh : en);
+ this.i18n.setI18n(this.$locale() === 'en' ? zh : en);
}
}
From 139a9c47aeadfc6de38b9dd33e2c63a5af0561e9 Mon Sep 17 00:00:00 2001
From: Haoxin Yang <1810849666@qq.com>
Date: Fri, 21 Jun 2024 00:57:31 +0800
Subject: [PATCH 10/12] chore: fix unit test case
---
src/i18n/i18n.service.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/i18n/i18n.service.ts b/src/i18n/i18n.service.ts
index c0da6a6e2..a28e32682 100644
--- a/src/i18n/i18n.service.ts
+++ b/src/i18n/i18n.service.ts
@@ -1,6 +1,6 @@
import { Injectable, computed, inject, isDevMode, signal } from '@angular/core';
-import { DatePickerType } from '..';
+import { DatePickerType } from '../date-picker/calendar/constant';
import { I18NInterface, I18NInterfaceToken } from './i18n.type';
From 8e2acb424b5f5c5e80745ff7474e5f940b588390 Mon Sep 17 00:00:00 2001
From: Haoxin Yang <1810849666@qq.com>
Date: Mon, 24 Jun 2024 13:59:51 +0800
Subject: [PATCH 11/12] feat: trigger show date use locale format default
---
.../date-picker/date-picker.component.ts | 23 +-----
.../range-picker/range-picker.component.ts | 2 +-
src/date-picker/trigger/trigger.component.ts | 76 ++++++++++++++++++-
src/date-picker/trigger/trigger.template.html | 6 +-
4 files changed, 77 insertions(+), 30 deletions(-)
diff --git a/src/date-picker/date-picker/date-picker.component.ts b/src/date-picker/date-picker/date-picker.component.ts
index 93969b348..76fe8f9de 100644
--- a/src/date-picker/date-picker/date-picker.component.ts
+++ b/src/date-picker/date-picker/date-picker.component.ts
@@ -3,7 +3,6 @@ import {
Component,
EventEmitter,
Input,
- OnInit,
Output,
TemplateRef,
ViewEncapsulation,
@@ -41,10 +40,7 @@ import { DatePickerTriggerComponent } from '../trigger/trigger.component';
FormsModule,
],
})
-export class DatePickerComponent
- extends CommonFormControl
- implements OnInit
-{
+export class DatePickerComponent extends CommonFormControl {
@Input()
clearable = true;
@@ -96,13 +92,6 @@ export class DatePickerComponent
value: Dayjs;
DatePickerType = DatePickerType;
- ngOnInit() {
- if (!this.format) {
- this.format = this.getDefaultFormat(this.type);
- this.cdr.markForCheck();
- }
- }
-
override valueIn(obj: ConfigType) {
return obj ? dayjs(obj) : null;
}
@@ -113,16 +102,6 @@ export class DatePickerComponent
this.cdr.markForCheck();
}
- private getDefaultFormat(type = DatePickerType.Day) {
- return type === DatePickerType.Year
- ? 'YYYY'
- : type === DatePickerType.Month
- ? 'YYYY-MM'
- : this.showTime
- ? 'YYYY-MM-DD HH:mm:ss'
- : 'YYYY-MM-DD';
- }
-
clearValue() {
this.value = null;
this.emitValue(null);
diff --git a/src/date-picker/range-picker/range-picker.component.ts b/src/date-picker/range-picker/range-picker.component.ts
index 734e6c2c9..116d6ccff 100644
--- a/src/date-picker/range-picker/range-picker.component.ts
+++ b/src/date-picker/range-picker/range-picker.component.ts
@@ -49,7 +49,7 @@ export class RangePickerComponent extends CommonFormControl<
clearText: string;
@Input()
- format = 'YYYY-MM-DD';
+ format: string;
@Input()
showFooter = true;
diff --git a/src/date-picker/trigger/trigger.component.ts b/src/date-picker/trigger/trigger.component.ts
index d481ec64d..fb338eab7 100644
--- a/src/date-picker/trigger/trigger.component.ts
+++ b/src/date-picker/trigger/trigger.component.ts
@@ -7,6 +7,9 @@ import {
Output,
ViewChild,
ViewEncapsulation,
+ computed,
+ inject,
+ signal,
} from '@angular/core';
import { Dayjs } from 'dayjs';
@@ -16,6 +19,8 @@ import { InputComponent } from '../../input/input.component';
import { ComponentSize } from '../../internal/types';
import { buildBem } from '../../internal/utils';
+import { I18nService } from 'src/i18n';
+
const bem = buildBem('aui-date-picker-trigger');
@Component({
@@ -29,16 +34,50 @@ const bem = buildBem('aui-date-picker-trigger');
})
export class DatePickerTriggerComponent {
@Input()
- format = 'YYYY-MM-DD';
+ get value() {
+ return this.$$value();
+ }
+
+ set value(val) {
+ const currentValue = this.$$value();
+ if (Array.isArray(val)) {
+ if (
+ !Array.isArray(currentValue) ||
+ val.some((v, i) => !v.isSame(currentValue[i]))
+ ) {
+ this.$$value.set(val);
+ }
+ } else {
+ if (Array.isArray(currentValue) || !val?.isSame(currentValue)) {
+ this.$$value.set(val);
+ }
+ }
+ }
@Input()
- size: ComponentSize;
+ get format() {
+ return this.$$format();
+ }
+
+ set format(val) {
+ if (this.$$format() !== val) {
+ this.$$format.set(val);
+ }
+ }
@Input()
- isRange: boolean;
+ get isRange() {
+ return this.$$isRange();
+ }
+
+ set isRange(val) {
+ if (this.$$isRange() !== val) {
+ this.$$isRange.set(val);
+ }
+ }
@Input()
- value: Dayjs | Dayjs[];
+ size: ComponentSize;
@Input()
clearable = true;
@@ -84,6 +123,35 @@ export class DatePickerTriggerComponent {
return !this.disabled && this.clearable && this.hasValue && this.hovered;
}
+ private readonly i18nService = inject(I18nService);
+
+ private readonly $$value = signal(null);
+
+ private readonly $$format = signal(null);
+
+ private readonly $$isRange = signal(null);
+
+ $formatValue = computed(() => {
+ const format = this.$$format();
+ const value = this.$$value();
+ const isRange = this.$$isRange();
+ const locale = this.i18nService.$locale();
+
+ if (!value) {
+ return isRange ? [null, null] : null;
+ }
+
+ if (this.format) {
+ return Array.isArray(value)
+ ? value.map(v => v.format(format))
+ : value.format(format);
+ }
+
+ return Array.isArray(value)
+ ? value.map(v => v.toDate().toLocaleDateString(locale))
+ : value.toDate().toLocaleDateString(locale);
+ });
+
constructor() {
this.focusInput = this.focusInput.bind(this);
}
diff --git a/src/date-picker/trigger/trigger.template.html b/src/date-picker/trigger/trigger.template.html
index 0c6e8e973..2d76cb856 100644
--- a/src/date-picker/trigger/trigger.template.html
+++ b/src/date-picker/trigger/trigger.template.html
@@ -14,7 +14,7 @@
style="flex: 1"
aui-input
#focusRef
- [value]="$any(value || [])[0]?.format(format)"
+ [value]="$any($formatValue() || [])[0]"
[readonly]="true"
[size]="size"
(focus)="leftFocus = true"
@@ -29,7 +29,7 @@
Date: Mon, 24 Jun 2024 16:17:41 +0800
Subject: [PATCH 12/12] feat: mod style var and storybook preview
---
src/date-picker/calendar/header/style.scss | 2 +-
stories/rangepicker/basic.component.ts | 2 +-
stories/rangepicker/basic.stories.ts | 3 ++-
3 files changed, 4 insertions(+), 3 deletions(-)
diff --git a/src/date-picker/calendar/header/style.scss b/src/date-picker/calendar/header/style.scss
index 55ddea30f..ce2f3b2f7 100644
--- a/src/date-picker/calendar/header/style.scss
+++ b/src/date-picker/calendar/header/style.scss
@@ -3,7 +3,7 @@
$block: aui-calendar-header;
$aui-text-button-mini-width: use-var(inline-height-xs);
-$aui-text-button-mini-spacing: 2px;
+$aui-text-button-mini-spacing: use-var(spacing-s);
.#{$block} {
&__container {
diff --git a/stories/rangepicker/basic.component.ts b/stories/rangepicker/basic.component.ts
index 749fa355c..4e9965f4c 100644
--- a/stories/rangepicker/basic.component.ts
+++ b/stories/rangepicker/basic.component.ts
@@ -15,7 +15,7 @@ import { I18nService, en, zh } from '@alauda/ui';
Form value: {{ range | json }}
diff --git a/stories/rangepicker/basic.stories.ts b/stories/rangepicker/basic.stories.ts
index 980d4a0e7..f657e962d 100644
--- a/stories/rangepicker/basic.stories.ts
+++ b/stories/rangepicker/basic.stories.ts
@@ -4,7 +4,7 @@ import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
import { RangeBasicComponent } from './basic.component';
-import { ButtonModule, DatePickerModule } from '@alauda/ui';
+import { ButtonModule, DatePickerModule, I18nModule } from '@alauda/ui';
const meta: Meta = {
title: 'Example/RangePicker',
@@ -18,6 +18,7 @@ const meta: Meta = {
ReactiveFormsModule,
ButtonModule,
BrowserAnimationsModule,
+ I18nModule,
],
}),
],