lightning-base-components 1.15.2-alpha → 1.15.3-alpha

package/src/lightning/internationalizationLibrary/datetime/intlFormat.js

@@ -1,53 +1,24 @@
+// TODO: when migrating off aura, remove functions
+// and vaiables only used in dateTimeOptions
 import locale from '@salesforce/i18n/locale';
-import { DateTimeOptions } from './dateTimeOptions';
+import { formattingOptions } from 'lightning/i18nCldrOptions';
+import { getSkeleton } from './dateTimeOptions';
+import { isDate } from './dateTimeUtils';
 import {
     formatDateUTC,
     formatDate,
     toOtherCalendar,
     syncUTCToWallTime,
 } from '../localizationService';
+import { isAuraL10NAvailable } from '../utils';
 import {
     isValidISODateTimeString,
     TIME_SEPARATOR,
 } from 'lightning/iso8601Utils';
-
-const dateTimeFormatInstancesCache = {};
-const POSSIBLE_OPTS = {
-    weekday: true,
-    era: true,
-    year: true,
-    month: true,
-    day: true,
-    hour: true,
-    minute: true,
-    second: true,
-    timeZone: true,
-    timeZoneName: true,
-    hour12: true,
-};
-
-function getOptionsUniqueKey(options) {
-    return Object.keys(options)
-        .sort()
-        .reduce((prev, optionName) => {
-            if (POSSIBLE_OPTS[optionName]) {
-                return prev + optionName + options[optionName] + '';
-            }
-            return prev;
-        }, '');
-}
-
-function getFromCache(options) {
-    const optionsUniqueKey = getOptionsUniqueKey(options);
-    let formatInstance = dateTimeFormatInstancesCache[optionsUniqueKey];
-
-    if (!formatInstance) {
-        formatInstance = new Intl.DateTimeFormat(locale, options);
-        dateTimeFormatInstancesCache[optionsUniqueKey] = formatInstance;
-    }
-
-    return formatInstance;
-}
+import {
+    getDateTimeFormat,
+    getDateTimeISO8601Parser,
+} from 'lightning/i18nService';
 
 function convertAndFormatDate(date, format, timeZone) {
     const translatedDate = toOtherCalendar(date);
@@ -55,29 +26,32 @@ function convertAndFormatDate(date, format, timeZone) {
     return formatDateUTC(converted, format);
 }
 
-function isDate(value) {
-    return (
-        Object.prototype.toString.call(value) === '[object Date]' &&
-        !isNaN(value.getTime())
-    );
-}
-
+/**
+ * Converts a timestamp or ISO-8601 string to a Date object
+ * If a Date object is provided it is returned as-is
+ *
+ * @param {String|Number|Date} value
+ * @returns Date
+ */
 function toDate(value) {
-    let dateObj = value;
-    if (
-        !isDate(value) &&
-        (typeof value === 'string' || typeof value === 'number')
-    ) {
-        dateObj = new Date(
-            isFinite(value) ? parseInt(value, 10) : Date.parse(value)
-        );
+    if (!isDate(value) && isFinite(value)) {
+        // handles timestamp as number or string
+        return new Date(parseInt(value, 10));
+    } else if (value && !isDate(value)) {
+        // handles non-timestamp string
+        return getDateTimeISO8601Parser().parse(value);
     }
-    return dateObj;
+    return value; // handles date object
 }
 
-const isTimeZonesSupported = (function () {
+/**
+ * Returns true if the current browser supports time zones
+ * for Intl other than UTC by seeing if error is thrown when
+ * a non-UTC time zone is passed; should return false for IE11
+ * and true for all other supported browsers.
+ */
+const isNonUTCSupported = (function () {
     try {
-        // IE11 only supports the UTC time zone and throws when given anything else
         // eslint-disable-next-line new-cap
         Intl.DateTimeFormat('en-US', { timeZone: 'America/Los_Angeles' });
     } catch (err) {
@@ -86,13 +60,12 @@ const isTimeZonesSupported = (function () {
     return true;
 })();
 
-function dateTimeFormatFallback(dto) {
-    // localization service will default to mediumDateFormat when no format is provided
-    const format = dto.hasFormattingOptions() ? dto.getSkeleton() : null;
-    const { timeZone } = dto.options;
+function dateTimeFormatFallback(options) {
+    const format = !useDefaultFormat(options) ? getSkeleton(options) : null;
+    const { timeZone } = options;
     return {
         format: (value) => {
-            // if value is an ISO date string (e.g. 2019-10-25), do not convert between timezones and just format the date
+            // if value is an ISO date string with no time component, do not convert between timezones
             if (
                 isValidISODateTimeString(value) &&
                 value.indexOf(TIME_SEPARATOR) < 0
@@ -115,22 +88,69 @@ function dateTimeFormatFallback(dto) {
     };
 }
 
-export function dateTimeFormat(opts) {
-    const options = opts || {};
-    const dto = new DateTimeOptions(options);
-
+/**
+ * Returns true if Aura fallback should be used for
+ * datetime formatting with provided date time optionss
+ *
+ * More specifically, Aura should be used on-core and
+ * when no formatting options are provided or we're
+ * using a non-UTC time zone on a browser that does
+ * not support them
+ */
+function useAuraFallbackFormatting(options) {
+    const { timeZone } = options;
+    const isNonUTCTimeZone = timeZone && timeZone !== 'UTC';
     if (
-        !('Intl' in window) ||
-        !dto.hasFormattingOptions() ||
-        !isTimeZonesSupported
+        isAuraL10NAvailable &&
+        (useDefaultFormat(options) || (!isNonUTCSupported && isNonUTCTimeZone))
     ) {
-        return dateTimeFormatFallback(dto);
+        return true;
+    }
+    return false;
+}
+
+/**
+ * Returns true if the mediumDateFormat options should be used
+ * Medium date format should be used when there are no options
+ * or only options are for the time zone and hour system
+ */
+function useDefaultFormat(options) {
+    const excludedOptions = {
+        hour12: true,
+        hourCycle: true,
+        timeZone: true,
+        timeZoneName: true,
+    };
+    const hasFormattingOption = Object.keys(options).some(
+        (opt) => options[opt] !== undefined && !excludedOptions[opt]
+    );
+    return !hasFormattingOption;
+}
+
+/**
+ * Creates date time formatter based on feature availability and provided options.
+ * When on-core, uses Aura on IE11 or when we need default format, and uses
+ * Intl.DateTimeFormat through i18nService otherwise
+ *
+ * @param {Object} opts - Formatting options from lightning-formatted-date-time
+ * @returns {Object} - Object with "format" function
+ */
+export function dateTimeFormat(opts) {
+    const options = opts || {};
+    if (useAuraFallbackFormatting(options)) {
+        return dateTimeFormatFallback(options);
+    } else if (useDefaultFormat(options)) {
+        // use mediumDateFormat options if not using Aura
+        // and no options outside of hour system or time zone
+        // need to use Object.assign so hour system and
+        // time zone options work as expected when passed in
+        opts = Object.assign(options, formattingOptions.mediumDateFormat);
     }
 
     return {
         format: (value) => {
-            const dtf = getFromCache(options);
-            return dtf.format(toDate(value));
+            const formatter = getDateTimeFormat(locale, opts);
+            return formatter.format(toDate(value));
         },
     };
 }

package/src/lightning/internationalizationLibrary/internationalizationLibrary.js

@@ -18,13 +18,16 @@ export {
     normalizeISODate,
     normalizeISOTime,
     normalizeISODateTime,
-    normalizeFormattedDate,
-    normalizeFormattedTime,
+    parseFormattedDate,
+    parseFormattedTime,
     normalizeFormattedDateTime,
-    getToday,
+    getCurrentDateString,
     getISODateString,
     getISOTimeString,
-    getCurrentTime,
+    getCurrentTimeString,
+    getDateFormatFromStyle,
+    getTimeFormatFromStyle,
+    getDateTimeFormatFromStyle,
 } from './datetime/dateTimeUtils';
 
 export {
@@ -44,3 +47,5 @@ export {
     syncWallTimeToUTC,
     syncUTCToWallTime,
 } from './localizationService';
+
+export { isAuraL10NAvailable } from './utils';

package/src/lightning/internationalizationLibrary/localizationService.js

@@ -1,3 +1,4 @@
+// TODO: remove mosst if not all of file when migrating off aura
 // This is a library for all calls to the aura localizationService.
 
 import { getLocalizationService } from 'lightning/configProvider';

package/src/lightning/internationalizationLibrary/number/NumberFormat.js

@@ -1,19 +1,25 @@
+import currency from '@salesforce/i18n/currency';
+import locale from '@salesforce/i18n/locale';
+import { getNumberFormat } from 'lightning/i18nService';
 import { numberFormatFallback } from './numberFormatFallback';
-import { normalizeOptions, exceedsSafeLength, getFromCache } from './utils';
+import { exceedsSafeLength } from './utils';
+import { isAuraL10NAvailable } from '../utils';
 
 export function numberFormat(options) {
-    const normalizedOpts = Object.assign({}, normalizeOptions(options));
-    if (!('Intl' in window)) {
-        return numberFormatFallback(normalizedOpts);
-    }
-
+    const currencyValue = { currency: options.currency || currency };
+    const normalizedOpts = Object.assign({}, options, currencyValue);
     return {
         format: (value) => {
-            if (value && exceedsSafeLength(value)) {
-                return numberFormatFallback(normalizedOpts).format(value);
-            }
-            const numberFormatInstance = getFromCache(normalizedOpts);
-            return numberFormatInstance.format(value);
+            // TODO: when migrating off aura just use getNumberFormat directly
+            // TD-0117848 will need to be completed before migrating off
+            // aura fallback should only be used when aura is available and value has
+            // too many significant digits to work correctly with localizer
+            const useFallback =
+                isAuraL10NAvailable && value && exceedsSafeLength(value);
+            const numberFormatter = useFallback
+                ? numberFormatFallback(normalizedOpts)
+                : getNumberFormat(locale, normalizedOpts);
+            return numberFormatter.format(value);
         },
     };
 }

package/src/lightning/internationalizationLibrary/number/numberFormatFallback.js

@@ -1,8 +1,9 @@
-import { NumberOptions } from './numberOptions';
+// TODO: remove file when migrating off aura
+import { getSkeleton } from './numberOptions';
 import { getNumberFormat } from '../localizationService';
 
 export function numberFormatFallback(options) {
-    const skeleton = new NumberOptions(options).getSkeleton();
+    const skeleton = getSkeleton(options);
     return {
         format: (value) => {
             return getNumberFormat(skeleton).format(value);

package/src/lightning/internationalizationLibrary/number/numberOptions.js

@@ -1,44 +1,42 @@
+// TODO: remove file when migrating off aura
 import numberFormat from '@salesforce/i18n/number.numberFormat';
 import percentFormat from '@salesforce/i18n/number.percentFormat';
 import currencyFormat from '@salesforce/i18n/number.currencyFormat';
 import currency from '@salesforce/i18n/currency';
 import {
+    STYLE,
     updateFractionPart,
     updateIntegerPart,
     updateCurrencySymbol,
     getCurrency,
 } from './utils';
 
-function NumberOptions(options) {
-    this.options = options || {};
-}
-
-NumberOptions.prototype.isCurrency = function () {
-    return this.options.style === 'currency';
-};
-
-NumberOptions.prototype.isPercent = function () {
-    return this.options.style === 'percent';
+const isDefaultCurrency = (options) => {
+    return !options.currency || currency === options.currency;
 };
 
-NumberOptions.prototype.isDefaultCurrency = function () {
-    return !this.options.currency || currency === this.options.currency;
-};
-
-NumberOptions.prototype.getDefaultSkeleton = function () {
-    return this.isCurrency()
-        ? currencyFormat
-        : this.isPercent()
-        ? percentFormat
-        : numberFormat;
+const getDefaultSkeleton = (options) => {
+    if (options.style === STYLE.CURRENCY) {
+        return currencyFormat;
+    } else if (options.style === STYLE.PERCENT) {
+        return percentFormat;
+    }
+    return numberFormat;
 };
 
-NumberOptions.prototype.getSkeleton = function () {
-    const options = this.options;
-    const defaultSkeleton = this.getDefaultSkeleton();
+/**
+ * Function translating provided number formatting options to a
+ * string that can be passed into Aura localization service.
+ *
+ * @param {Object} options - number formatting options
+ * @returns {string} representing provided options as a string -
+ * e.g. "$#,##,##0.00#"
+ */
+export const getSkeleton = (options) => {
+    const defaultSkeleton = getDefaultSkeleton(options);
     let skeleton = updateFractionPart(defaultSkeleton, options);
     skeleton = updateIntegerPart(skeleton, options);
-    if (!this.isDefaultCurrency()) {
+    if (!isDefaultCurrency(options)) {
         skeleton = updateCurrencySymbol(
             skeleton,
             getCurrency(options),
@@ -47,5 +45,3 @@ NumberOptions.prototype.getSkeleton = function () {
     }
     return skeleton;
 };
-
-export { NumberOptions };