kopia lustrzana https://github.com/shoelace-style/shoelace
use localize lib for utility components
rodzic
f37907a55a
commit
f87cb8d940
|
@ -1,6 +1,7 @@
|
|||
import { LitElement } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { formatBytes } from '../../internal/number';
|
||||
import { LocalizeController } from '../../utilities/localize';
|
||||
|
||||
/**
|
||||
* @since 2.0
|
||||
|
@ -8,6 +9,8 @@ import { formatBytes } from '../../internal/number';
|
|||
*/
|
||||
@customElement('sl-format-bytes')
|
||||
export default class SlFormatBytes extends LitElement {
|
||||
private localize = new LocalizeController(this);
|
||||
|
||||
/** The number to format in bytes. */
|
||||
@property({ type: Number }) value = 0;
|
||||
|
||||
|
@ -20,7 +23,7 @@ export default class SlFormatBytes extends LitElement {
|
|||
render() {
|
||||
return formatBytes(this.value, {
|
||||
unit: this.unit,
|
||||
lang: this.lang
|
||||
formatter: num => this.localize.number(num)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import { LitElement } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { LocalizeController } from '../../utilities/localize';
|
||||
|
||||
/**
|
||||
* @since 2.0
|
||||
|
@ -7,6 +8,8 @@ import { customElement, property } from 'lit/decorators.js';
|
|||
*/
|
||||
@customElement('sl-format-date')
|
||||
export default class SlFormatDate extends LitElement {
|
||||
private localize = new LocalizeController(this);
|
||||
|
||||
/** The date/time to format. If not set, the current date and time will be used. */
|
||||
@property() date: Date | string = new Date();
|
||||
|
||||
|
@ -55,7 +58,7 @@ export default class SlFormatDate extends LitElement {
|
|||
return;
|
||||
}
|
||||
|
||||
return new Intl.DateTimeFormat(this.lang, {
|
||||
return this.localize.date(date, {
|
||||
weekday: this.weekday,
|
||||
era: this.era,
|
||||
year: this.year,
|
||||
|
@ -67,7 +70,7 @@ export default class SlFormatDate extends LitElement {
|
|||
timeZoneName: this.timeZoneName,
|
||||
timeZone: this.timeZone,
|
||||
hour12: hour12
|
||||
}).format(date);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import { LitElement } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { LocalizeController } from '../../utilities/localize';
|
||||
|
||||
/**
|
||||
* @since 2.0
|
||||
|
@ -7,6 +8,8 @@ import { customElement, property } from 'lit/decorators.js';
|
|||
*/
|
||||
@customElement('sl-format-number')
|
||||
export default class SlFormatNumber extends LitElement {
|
||||
private localize = new LocalizeController(this);
|
||||
|
||||
/** The number to format. */
|
||||
@property({ type: Number }) value = 0;
|
||||
|
||||
|
@ -45,7 +48,7 @@ export default class SlFormatNumber extends LitElement {
|
|||
return '';
|
||||
}
|
||||
|
||||
return new Intl.NumberFormat(this.lang, {
|
||||
return this.localize.number(this.value, {
|
||||
style: this.type,
|
||||
currency: this.currency,
|
||||
currencyDisplay: this.currencyDisplay,
|
||||
|
@ -55,7 +58,7 @@ export default class SlFormatNumber extends LitElement {
|
|||
maximumFractionDigits: this.maximumFractionDigits,
|
||||
minimumSignificantDigits: this.minimumSignificantDigits,
|
||||
maximumSignificantDigits: this.maximumSignificantDigits
|
||||
}).format(this.value);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { LitElement, html } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { LocalizeController } from '../../utilities/localize';
|
||||
|
||||
/**
|
||||
* @since 2.0
|
||||
|
@ -8,6 +8,7 @@ import { watch } from '../../internal/watch';
|
|||
*/
|
||||
@customElement('sl-relative-time')
|
||||
export default class SlRelativeTime extends LitElement {
|
||||
private localize = new LocalizeController(this);
|
||||
private updateTimeout: any;
|
||||
|
||||
@state() private isoTime = '';
|
||||
|
@ -37,23 +38,18 @@ export default class SlRelativeTime extends LitElement {
|
|||
clearTimeout(this.updateTimeout);
|
||||
}
|
||||
|
||||
@watch('date')
|
||||
@watch('lang')
|
||||
@watch('format')
|
||||
@watch('numeric')
|
||||
@watch('sync')
|
||||
updateTime() {
|
||||
render() {
|
||||
const now = new Date();
|
||||
const date = new Date(this.date);
|
||||
const then = new Date(this.date);
|
||||
|
||||
// Check for an invalid date
|
||||
if (isNaN(date.getMilliseconds())) {
|
||||
if (isNaN(then.getMilliseconds())) {
|
||||
this.relativeTime = '';
|
||||
this.isoTime = '';
|
||||
return;
|
||||
return '';
|
||||
}
|
||||
|
||||
const diff = +date - +now;
|
||||
const diff = +then - +now;
|
||||
const availableUnits = [
|
||||
{ max: 2760000, value: 60000, unit: 'minute' }, // max 46 minutes
|
||||
{ max: 72000000, value: 3600000, unit: 'hour' }, // max 20 hours
|
||||
|
@ -64,23 +60,24 @@ export default class SlRelativeTime extends LitElement {
|
|||
];
|
||||
const { unit, value } = availableUnits.find(unit => Math.abs(diff) < unit.max) as any;
|
||||
|
||||
this.isoTime = date.toISOString();
|
||||
this.titleTime = new Intl.DateTimeFormat(this.lang, {
|
||||
this.isoTime = then.toISOString();
|
||||
this.titleTime = this.localize.date(then, {
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: 'numeric',
|
||||
timeZoneName: 'short'
|
||||
}).format(date);
|
||||
});
|
||||
|
||||
this.relativeTime = new Intl.RelativeTimeFormat(this.lang, {
|
||||
this.relativeTime = this.localize.relativeTime(Math.round(diff / value), unit, {
|
||||
numeric: this.numeric,
|
||||
style: this.format
|
||||
}).format(Math.round(diff / value), unit);
|
||||
});
|
||||
|
||||
// If sync is enabled, update as time passes
|
||||
clearTimeout(this.updateTimeout);
|
||||
|
||||
if (this.sync) {
|
||||
// Calculates the number of milliseconds until the next respective unit changes. This ensures that all components
|
||||
// update at the same time which is less distracting than updating independently.
|
||||
|
@ -89,7 +86,6 @@ export default class SlRelativeTime extends LitElement {
|
|||
const value = units[unit];
|
||||
return value - (now.getTime() % value);
|
||||
};
|
||||
|
||||
let nextInterval: number;
|
||||
|
||||
// NOTE: this could be optimized to determine when the next update should actually occur, but the size and cost of
|
||||
|
@ -105,11 +101,10 @@ export default class SlRelativeTime extends LitElement {
|
|||
// value it can accept. https://stackoverflow.com/a/3468650/567486
|
||||
nextInterval = getTimeUntilNextUnit('day'); // next day
|
||||
}
|
||||
this.updateTimeout = setTimeout(() => this.updateTime(), nextInterval);
|
||||
}
|
||||
|
||||
this.updateTimeout = setTimeout(() => this.requestUpdate(), nextInterval);
|
||||
}
|
||||
|
||||
render() {
|
||||
return html` <time datetime=${this.isoTime} title=${this.titleTime}>${this.relativeTime}</time> `;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,7 +5,7 @@ export function formatBytes(bytes: number, options: FormatBytesOptions) {
|
|||
options = Object.assign(
|
||||
{
|
||||
unit: 'bytes',
|
||||
lang: undefined
|
||||
formatter: (number: number) => number.toLocaleString()
|
||||
},
|
||||
options
|
||||
);
|
||||
|
@ -20,7 +20,7 @@ export function formatBytes(bytes: number, options: FormatBytesOptions) {
|
|||
|
||||
const i = Math.min(Math.floor(Math.log10(bytes) / 3), units.length - 1);
|
||||
const num = Number((bytes / Math.pow(1000, i)).toPrecision(3));
|
||||
const numString = num.toLocaleString(options.lang);
|
||||
const numString = options.formatter ? options.formatter(num) : num;
|
||||
const prefix = isNegative ? '-' : '';
|
||||
|
||||
return `${prefix}${numString} ${units[i]}`;
|
||||
|
@ -28,5 +28,5 @@ export function formatBytes(bytes: number, options: FormatBytesOptions) {
|
|||
|
||||
interface FormatBytesOptions {
|
||||
unit?: 'bytes' | 'bits';
|
||||
lang?: string;
|
||||
formatter?: (number: number) => string;
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue