From 9f1f5cd022dfbf7d97eb867228af46632c57e3dc Mon Sep 17 00:00:00 2001 From: Chris Colborne Date: Tue, 3 Mar 2020 02:52:09 +1000 Subject: [PATCH 1/3] Add locale to navigationLabel (#316) * Add locale to navigationLabel call * Update navigationLabel docs --- README.md | 2 +- index.d.ts | 2 +- src/Calendar/Navigation.jsx | 8 +++++++- src/Calendar/__tests__/Navigation.jsx | 9 ++++++++- 4 files changed, 17 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 505db822..7d3fce85 100644 --- a/README.md +++ b/README.md @@ -96,7 +96,7 @@ Displays a complete, interactive calendar. |minDate|Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Calendar will ensure that no earlier date is selected.|n/a|Date: `new Date()`| |minDetail|The least detailed view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"century"`|`"decade"`| |navigationAriaLabel|`aria-label` attribute of a label rendered on calendar navigation bar.|n/a|`"Go up"`| -|navigationLabel|Content of a label rendered on calendar navigation bar.|(default label)|``({ date, view, label }) => `Current view: ${view}, date: ${date.toLocaleDateString()}` ``| +|navigationLabel|Content of a label rendered on calendar navigation bar.|(default label)|``({ locale, date, view, label }) => `Current view: ${view}, date: ${date.toLocaleDateString(locale)}` ``| |nextAriaLabel|`aria-label` attribute of the "next" button on the navigation pane.|n/a|`"Next"`| |nextLabel|Content of the "next" button on the navigation pane.|`"›"`|| |next2AriaLabel|`aria-label` attribute of the "next on higher level" button on the navigation pane.|n/a|`"Jump forwards"`| diff --git a/index.d.ts b/index.d.ts index 676b51a5..b4ad7aaa 100644 --- a/index.d.ts +++ b/index.d.ts @@ -21,7 +21,7 @@ declare module "react-calendar" { maxDetail?: Detail; minDate?: Date; minDetail?: Detail; - navigationLabel?: (props: { date: Date, view: Detail, label: string }) => string | JSX.Element | null; + navigationLabel?: (props: { locale: string, date: Date, view: Detail, label: string }) => string | JSX.Element | null; next2AriaLabel?: string; next2Label?: string | JSX.Element | null; nextAriaLabel?: string; diff --git a/src/Calendar/Navigation.jsx b/src/Calendar/Navigation.jsx index 6b6706ea..1b021971 100644 --- a/src/Calendar/Navigation.jsx +++ b/src/Calendar/Navigation.jsx @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { getUserLocale } from 'get-user-locale'; import { getCenturyLabel, @@ -135,7 +136,12 @@ export default function Navigation({ type="button" > {navigationLabel - ? navigationLabel({ date, view, label }) + ? navigationLabel({ + locale: locale || getUserLocale(), + date, + view, + label, + }) : label} From 54a6384a585ae26da728f1f5789dd1ab66c7bd0c Mon Sep 17 00:00:00 2001 From: Wojciech Maj Date: Thu, 5 Mar 2020 15:58:34 +0100 Subject: [PATCH 3/3] Specify that an array passed to`value` prop must contain 2 values --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 99c86d30..ecfe874b 100644 --- a/README.md +++ b/README.md @@ -123,7 +123,7 @@ Displays a complete, interactive calendar. |tileClassName|Class name(s) that will be applied to a given calendar item (day on month view, month on year view and so on).|n/a|| |tileContent|Allows to render custom content within a given calendar item (day on month view, month on year view and so on).|n/a|| |tileDisabled|Pass a function to determine if a certain day should be displayed as disabled.|n/a|| -|value|Calendar value.|n/a|