From 3a183fba8228e9d8c89782ad5efc43633486fa60 Mon Sep 17 00:00:00 2001 From: Nima Izadi Date: Mon, 11 Feb 2019 15:48:08 -0500 Subject: [PATCH] Extract DatePicker months and week names into en.json --- UNRELEASED.md | 1 + src/components/DatePicker/DatePicker.tsx | 11 +++-- .../DatePicker/components/Month/Month.tsx | 18 +++++-- src/components/DatePicker/utilities.tsx | 49 +++++++++++++++++++ src/locales/en.json | 25 +++++++++- 5 files changed, 95 insertions(+), 9 deletions(-) create mode 100644 src/components/DatePicker/utilities.tsx diff --git a/UNRELEASED.md b/UNRELEASED.md index a10decde6b0..3b15d88a0f1 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -12,6 +12,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Updates `TopBar.UserMenu` interaction states styling ([#1006](https://github.com/Shopify/polaris-react/pull/1006)) - Added `download` prop to `Button` and `UnstyledLink` components that enables setting the download attribute ([#1027](https://github.com/Shopify/polaris-react/pull/1027)) +- Extract months and week names into translation files ([#1005](https://github.com/Shopify/polaris-react/pull/1005)) ### Bug fixes diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx index b4d1189f89a..2862eeca299 100644 --- a/src/components/DatePicker/DatePicker.tsx +++ b/src/components/DatePicker/DatePicker.tsx @@ -17,6 +17,7 @@ import { import {withAppProvider, WithAppProviderProps} from '../AppProvider'; import Button from '../Button'; +import {monthName} from './utilities'; import {Month} from './components'; import styles from './DatePicker.scss'; @@ -98,10 +99,14 @@ export class DatePicker extends React.PureComponent { const showPreviousYear = getPreviousDisplayYear(month, year); const showPreviousMonth = getPreviousDisplayMonth(month); - const previousMonthName = Months[showPreviousMonth]; + const previousMonthName = intl.translate( + `Polaris.DatePicker.months.${monthName(showPreviousMonth)}`, + ); const nextMonth = multiMonth - ? Months[showNextToNextMonth] - : Months[showNextMonth]; + ? intl.translate( + `Polaris.DatePicker.months.${monthName(showNextToNextMonth)}`, + ) + : intl.translate(`Polaris.DatePicker.months.${monthName(showNextMonth)}`); const nextYear = multiMonth ? showNextToNextYear : showNextYear; const secondDatePicker = multiMonth ? ( diff --git a/src/components/DatePicker/components/Month/Month.tsx b/src/components/DatePicker/components/Month/Month.tsx index 9c7d736acca..170f1cb0935 100644 --- a/src/components/DatePicker/components/Month/Month.tsx +++ b/src/components/DatePicker/components/Month/Month.tsx @@ -11,13 +11,14 @@ import { dateIsInRange, dateIsSelected, getNewRange, - abbreviationForWeekday, } from '@shopify/javascript-utilities/dates'; import {noop} from '@shopify/javascript-utilities/other'; import {classNames} from '@shopify/react-utilities/styles'; +import {withAppProvider, WithAppProviderProps} from '../../../AppProvider'; import styles from '../../DatePicker.scss'; import Day from '../Day'; import Weekday from '../Weekday'; +import {monthName, weekdayName} from '../../utilities'; export interface Props { focusedDate?: Date; @@ -36,6 +37,8 @@ export interface Props { weekdayName?(weekday: Weekdays): string; } +export type CombinedProps = Props & WithAppProviderProps; + const WEEKDAYS = [ Weekdays.Sunday, Weekdays.Monday, @@ -46,7 +49,7 @@ const WEEKDAYS = [ Weekdays.Saturday, ]; -export default function Month({ +function Month({ focusedDate, selected, hoverDate, @@ -59,7 +62,8 @@ export default function Month({ month, year, weekStartsOn, -}: Props) { + polaris: {intl}, +}: CombinedProps) { const isInHoveringRange = allowRange ? hoveringDateIsInRange : () => false; const now = new Date(); const current = now.getMonth() === month && now.getFullYear() === year; @@ -71,7 +75,9 @@ export default function Month({ const weekdays = getWeekdaysOrdered(weekStartsOn).map((weekday) => ( @@ -123,7 +129,7 @@ export default function Month({ return (
- {Months[month]} {year} + {intl.translate(`Polaris.DatePicker.months.${monthName(month)}`)} {year}
{weekdays} @@ -133,6 +139,8 @@ export default function Month({ ); } +export default withAppProvider()(Month); + function hoveringDateIsInRange( day: Date | null, range: Range, diff --git a/src/components/DatePicker/utilities.tsx b/src/components/DatePicker/utilities.tsx new file mode 100644 index 00000000000..1389354af33 --- /dev/null +++ b/src/components/DatePicker/utilities.tsx @@ -0,0 +1,49 @@ +import {Months, Weekdays} from '@shopify/javascript-utilities/dates'; + +export function monthName(month: Months) { + switch (month) { + case 0: + return 'january'; + case 1: + return 'february'; + case 2: + return 'march'; + case 3: + return 'april'; + case 4: + return 'may'; + case 5: + return 'june'; + case 6: + return 'july'; + case 7: + return 'august'; + case 8: + return 'september'; + case 9: + return 'october'; + case 10: + return 'november'; + case 11: + return 'december'; + } +} + +export function weekdayName(weekday: Weekdays) { + switch (weekday) { + case 0: + return 'sunday'; + case 1: + return 'monday'; + case 2: + return 'tuesday'; + case 3: + return 'wednesday'; + case 4: + return 'thursday'; + case 5: + return 'friday'; + case 6: + return 'saturday'; + } +} diff --git a/src/locales/en.json b/src/locales/en.json index dba928e1d92..643847fbf28 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -47,7 +47,30 @@ "DatePicker": { "previousMonth": "Show previous month, {previousMonthName} {showPreviousYear}", "nextMonth": "Show next month, {nextMonth} {nextYear}", - "today": "Today " + "today": "Today ", + "months": { + "january": "January", + "february": "February", + "march": "March", + "april": "April", + "may": "May", + "june": "June", + "july": "July", + "august": "August", + "september": "September", + "october": "October", + "november": "November", + "december": "December" + }, + "daysAbbreviated": { + "monday": "Mo", + "tuesday": "Tu", + "wednesday": "We", + "thursday": "Th", + "friday": "Fr", + "saturday": "Sa", + "sunday": "Su" + } }, "DiscardConfirmationModal": {