Skip to content

Commit

Permalink
Enhancement: locale option for date & relativeDate format (#2658)
Browse files Browse the repository at this point in the history
  • Loading branch information
0phoff authored Jan 17, 2024
1 parent 641eb25 commit 7837864
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 2 deletions.
11 changes: 10 additions & 1 deletion docs/widgets/services/customapi.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,20 @@ widget:
- field: key # needs to be YAML string or object
label: Field 4
format: date # optional - defaults to text
locale: nl # optional
dateStyle: long # optional - defaults to "long". Allowed values: `["full", "long", "medium", "short"]`.
timeStyle: medium # optional - Allowed values: `["full", "long", "medium", "short"]`.
- field: key # needs to be YAML string or object
label: Field 5
format: relativeDate # optional - defaults to text
locale: nl # optional
style: short # optional - defaults to "long". Allowed values: `["long", "short", "narrow"]`.
numeric: auto # optional - defaults to "always". Allowed values `["always", "auto"]`.
```
Supported formats for the values are `text`, `number`, `float`, `percent`, `bytes`, `bitrate` and `date`.
Supported formats for the values are `text`, `number`, `float`, `percent`, `bytes`, `bitrate`, `date` and `relativeDate`.

The `dateStyle` and `timeStyle` options of the `date` format are passed directly to [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) and the `style` and `numeric` options of `relativeDate` are passed to [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat).

## Example

Expand Down
14 changes: 14 additions & 0 deletions next-i18next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,17 @@ function uptime(uptimeInSeconds, i18next) {
return (moDisplay + dDisplay + hDisplay + mDisplay + sDisplay).replace(/,\s*$/, "");
}

function relativeDate(date, formatter) {
const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];
const units = ["second", "minute", "hour", "day", "week", "month", "year"];

const delta = Math.round((date.getTime() - Date.now()) / 1000);
const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(delta));
const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;

return formatter.format(Math.floor(delta / divisor), units[unitIndex]);
}

module.exports = {
i18n: {
defaultLocale: "en",
Expand Down Expand Up @@ -142,6 +153,9 @@ module.exports = {
i18next.services.formatter.add("date", (value, lng, options) =>
new Intl.DateTimeFormat(lng, { ...options }).format(new Date(value)),
);
i18next.services.formatter.add("relativeDate", (value, lng, options) =>
relativeDate(new Date(value), new Intl.RelativeTimeFormat(lng, { ...options })),
);
i18next.services.formatter.add("uptime", (value, lng) => uptime(value, i18next));
},
type: "3rdParty",
Expand Down
1 change: 1 addition & 0 deletions public/locales/en/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"number": "{{value, number}}",
"ms": "{{value, number}}",
"date": "{{value, date}}",
"relativeDate": "{{value, relativeDate}}",
"uptime": "{{value, uptime}}",
"months": "mo",
"days": "d",
Expand Down
15 changes: 14 additions & 1 deletion src/widgets/customapi/component.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,20 @@ function formatValue(t, mapping, rawValue) {
value = t("common.bitrate", { value });
break;
case "date":
value = t("common.date", { value, dateStyle: mapping?.dateStyle ?? "long", timeStyle: mapping?.timeStyle });
value = t("common.date", {
value,
lng: mapping?.locale,
dateStyle: mapping?.dateStyle ?? "long",
timeStyle: mapping?.timeStyle,
});
break;
case "relativeDate":
value = t("common.relativeDate", {
value,
lng: mapping?.locale,
style: mapping?.style,
numeric: mapping?.numeric,
});
break;
case "text":
default:
Expand Down

0 comments on commit 7837864

Please sign in to comment.