wix-style-react/src/common/LocaleUtils/LocaleUtils.js

wix-style-react

import setDay from 'date-fns/setDay';

export const locales = {
  ar: 'ar',
  bg: 'bg',
  cs: 'cs',
  da: 'da',
  de: 'de',
  el: 'el',
  en: 'en',
  es: 'es',
  fi: 'fi',
  fr: 'fr',
  he: 'he',
  hi: 'hi',
  hu: 'hu',
  id: 'id',
  it: 'it',
  ja: 'ja',
  ko: 'ko',
  lt: 'lt',
  ms: 'ms',
  nl: 'nl',
  no: 'no',
  pl: 'pl',
  pt: 'pt',
  ro: 'ro',
  ru: 'ru',
  sv: 'sv',
  th: 'th',
  tl: 'tl',
  tr: 'tr',
  uk: 'uk',
  vi: 'vi',
  zh: 'zh',
};

export const MONTHS_INDEXES = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

export const CAPITALIZED_MONTH_LANGUAGES = [
  'es',
  'de',
  'fr',
  'ru',
  'it',
  'uk',
  'nl',
  'tr',
  'pl',
  'cs',
  'no',
  'pt',
];

export const WEEKDAY_NARROW_FORMAT_LOCALES = {
  ar: 'ar',
  el: 'el',
  he: 'he',
  pl: 'pl',
  vi: 'vi',
  zh: 'zh',
};

export const FIRST_WEEKDAY = {
  vi: 0,
};

export function capitalizeFirstLetter(str) {
  if (!str) {
    return undefined;
  }
  return str[0].toLocaleUpperCase() + str.substring(1);
}

// Capitalize first letter of month in certain languages
export const capitalizeMonth = (month, locale) => {
  const shouldCapitalizeMonth = CAPITALIZED_MONTH_LANGUAGES.includes(locale);

  if (shouldCapitalizeMonth) {
    return capitalizeFirstLetter(month);
  }
  return month;
};

export default (locale, firstDayOfWeek) => {
  /**
   * Return the string used to format the month for the given date. E.g ‘Dec’
   * @param date - a given date
   * @returns {string} - the month of the given date
   */
  const formatShortMonth = date => {
    return capitalizeMonth(
      new Intl.DateTimeFormat(locale, {
        month: 'short',
      }).format(date),
      locale,
    );
  };

  /**
   * Return the string used to format the month and year for the given date. E.g ‘Jan 2022’
   * @param date - a given date
   * @returns {string} - the short month and year of the given date
   */
  const formatShortMonthAndYear = date => {
    return capitalizeMonth(
      new Intl.DateTimeFormat(locale, {
        month: 'short',
        year: 'numeric',
      }).format(date),
      locale,
    );
  };

  return {
    /**
     * This method is required by the ReactDayPicker LocaleUtils API but is not really used since we are using our own CaptionElement - DatePickerHead component.
     *
     * Return the string used to format the month’s title for the given month. e.g ‘December 2021’
     * @param date - a given date
     * @returns {string} - the month title
     */
    formatMonthTitle: date => {
      return capitalizeMonth(
        new Intl.DateTimeFormat(locale, {
          month: 'long',
        }).format(date),
        locale,
      );
    },

    /**
     * Return the string used to format the month and year title for the given date. e.g ‘December 2021’
     * @param date - a given date
     * @returns {string} - the month and year
     */
    formatMonthAndYear: date => {
      return capitalizeMonth(
        new Intl.DateTimeFormat(locale, {
          month: 'long',
          year: 'numeric',
        }).format(date),
        locale,
      );
    },

    /**
     * Return the string used to format the months range for the given dates. E.g ‘Dec - Jan 2022’
     * @param firstDate - first date in the range
     * @param secondDate - last date in the range
     * @returns {string} - the months range for the given dates
     */
    formatMonthsRange: (firstDate, secondDate) => {
      const firstMonth = formatShortMonth(firstDate);
      const secondMonthAndYear = formatShortMonthAndYear(secondDate);
      return `${firstMonth} - ${secondMonthAndYear}`;
    },

    /**
     * Return the string used to render the weekday’s short name, e.g. ‘Mon’ for Monday.
     * @param index: number - a weekday index, from 0 to 6 (Sunday to Saturday)
     * @returns {string} - a weekday in short format
     */
    formatWeekdayShort: index => {
      const weekdayIntlFormat = WEEKDAY_NARROW_FORMAT_LOCALES[locale]
        ? 'narrow'
        : 'short';

      return new Intl.DateTimeFormat(locale, {
        weekday: weekdayIntlFormat,
      }).format(setDay(new Date(), index));
    },

    /**
     * Return the string used to render the weekday’s long name (starting from 0 as Sunday). e.g. ‘Monday’.
     * @param index: number - a weekday index, from 0 to 6 (Sunday to Saturday)
     * @returns {string} - a weekday in long format
     */
    formatWeekdayLong: index => {
      return new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(
        setDay(new Date(), index),
      );
    },

    /**
     * Format the string used as aria-label for the given day.
     * @param date: Date - a given day
     * @returns {string} - formatted string that is used as aria-label for the given day
     */
    formatDay: date => {
      return new Intl.DateTimeFormat(locale, { dateStyle: 'full' }).format(
        date,
      );
    },

    /**
     * Return an array with the twelve months for the given locale
     * @returns {String[]} - an array with all the translated months strings
     */
    getMonths: () => {
      return MONTHS_INDEXES.map(i =>
        capitalizeMonth(
          new Intl.DateTimeFormat(locale, { month: 'long' }).format(
            new Date(2018, i),
          ),
          locale,
        ),
      );
    },

    /**
     * Return the first day of week. Currently the default value is 1 which means Monday.
     * @returns {*|number} - a number between 0 to 6 (Sunday to Saturday) which represent the week day
     */
    getFirstDayOfWeek: () => firstDayOfWeek ?? FIRST_WEEKDAY[locale] ?? 1,
  };
};