@wix/design-system
Version:
@wix/design-system
196 lines • 6.5 kB
JavaScript
import setDay from 'date-fns/setDay';
export const languages = {
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',
lv: 'lv',
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_LANGUAGES = {
ar: 'ar',
el: 'el',
he: 'he',
lv: 'lv',
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, language) => {
const shouldCapitalizeMonth = CAPITALIZED_MONTH_LANGUAGES.includes(language);
if (shouldCapitalizeMonth) {
return capitalizeFirstLetter(month);
}
return month;
};
const extractLanguageCode = (locale) => {
return locale.split('-')[0];
};
export default (locale, firstDayOfWeek) => {
/**
* Extract the language code from the given locale
* locale can be en, en-us, en-uk, etc.
* language code is two letters representation, en
*/
const language = extractLanguageCode(locale);
/**
* Return the string used to format the month for the given date. E.g ‘Dec’
* @param date - a given date
* @returns - the month of the given date
*/
const formatShortMonth = (date) => {
return capitalizeMonth(new Intl.DateTimeFormat(locale, {
month: 'short',
}).format(date), language);
};
/**
* Return the string used to format the month and year for the given date. E.g ‘Jan 2022’
* @param date - a given date
* @returns - the short month and year of the given date
*/
const formatShortMonthAndYear = (date) => {
return capitalizeMonth(new Intl.DateTimeFormat(locale, {
month: 'short',
year: 'numeric',
}).format(date), language);
};
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
*/
formatMonthTitle: (date) => {
return capitalizeMonth(new Intl.DateTimeFormat(locale, {
month: 'long',
}).format(date), language);
},
/**
* 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 - the month and year
*/
formatMonthAndYear: (date) => {
return capitalizeMonth(new Intl.DateTimeFormat(locale, {
month: 'long',
year: 'numeric',
}).format(date), language);
},
/**
* 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 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 - a weekday index, from 0 to 6 (Sunday to Saturday)
* @returns - a weekday in short format
*/
formatWeekdayShort: (index) => {
const weekdayIntlFormat = WEEKDAY_NARROW_FORMAT_LANGUAGES[language]
? '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 - a weekday index, from 0 to 6 (Sunday to Saturday)
* @returns - 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 - 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 - 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)), language));
},
/**
* Return the first day of week. Currently the default value is 1 which means Monday.
* @returns - a number between 0 to 6 (Sunday to Saturday) which represent the week day
*/
getFirstDayOfWeek: () => firstDayOfWeek ?? FIRST_WEEKDAY[language] ?? 1,
/**
* Return the string used to format the year for the given date. E.g ‘2023年’
* @param date - a given date
* @returns - the string of the given date
* */
formatYear: (date) => {
return new Intl.DateTimeFormat(locale, {
year: 'numeric',
}).format(date);
},
};
};
//# sourceMappingURL=LocaleUtils.js.map