From f87cb8d940e447a9ae0a2419a628015644856875 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 7 Dec 2021 13:20:27 -0500 Subject: [PATCH] use localize lib for utility components --- src/components/format-bytes/format-bytes.ts | 5 ++- src/components/format-date/format-date.ts | 7 +++- src/components/format-number/format-number.ts | 7 +++- src/components/relative-time/relative-time.ts | 37 ++++++++----------- src/internal/number.ts | 6 +-- 5 files changed, 33 insertions(+), 29 deletions(-) diff --git a/src/components/format-bytes/format-bytes.ts b/src/components/format-bytes/format-bytes.ts index 4cdf2400..90cb6698 100644 --- a/src/components/format-bytes/format-bytes.ts +++ b/src/components/format-bytes/format-bytes.ts @@ -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) }); } } diff --git a/src/components/format-date/format-date.ts b/src/components/format-date/format-date.ts index 750e9486..e2e60b6f 100644 --- a/src/components/format-date/format-date.ts +++ b/src/components/format-date/format-date.ts @@ -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); + }); } } diff --git a/src/components/format-number/format-number.ts b/src/components/format-number/format-number.ts index 8b8dd32c..384fee14 100644 --- a/src/components/format-number/format-number.ts +++ b/src/components/format-number/format-number.ts @@ -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); + }); } } diff --git a/src/components/relative-time/relative-time.ts b/src/components/relative-time/relative-time.ts index 9898f84b..90e9af52 100644 --- a/src/components/relative-time/relative-time.ts +++ b/src/components/relative-time/relative-time.ts @@ -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); - } - } - render() { + this.updateTimeout = setTimeout(() => this.requestUpdate(), nextInterval); + } + return html` `; } } diff --git a/src/internal/number.ts b/src/internal/number.ts index b719c674..4401d0d4 100644 --- a/src/internal/number.ts +++ b/src/internal/number.ts @@ -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; }