Web:Components:Cron Removed global translates and added local translates
This commit is contained in:
parent
bbd40500c9
commit
ef58bfe1dd
@ -1,17 +1,9 @@
|
|||||||
import { I18nextProvider } from "react-i18next";
|
import { I18nextProvider } from "react-i18next";
|
||||||
import React, { useEffect, Suspense } from "react";
|
import React, { Suspense } from "react";
|
||||||
|
|
||||||
import i18n from "../i18n";
|
import i18n from "../i18n";
|
||||||
|
|
||||||
const i18nextStoryDecorator = (Story, context) => {
|
const i18nextStoryDecorator = (Story) => {
|
||||||
const { locale } = context.globals;
|
|
||||||
|
|
||||||
// When the locale global changes
|
|
||||||
// Set the new locale in i18n
|
|
||||||
useEffect(() => {
|
|
||||||
i18n.changeLanguage(locale);
|
|
||||||
}, [locale]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
// here catches the suspense from components not yet ready (still loading translations)
|
// here catches the suspense from components not yet ready (still loading translations)
|
||||||
// alternative set useSuspense false on i18next.options.react when initializing i18next
|
// alternative set useSuspense false on i18next.options.react when initializing i18next
|
||||||
|
@ -9,47 +9,6 @@ const globalTypes = {
|
|||||||
dynamicTitle: true,
|
dynamicTitle: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
locale: {
|
|
||||||
name: "Locale",
|
|
||||||
description: "Internationalization locale",
|
|
||||||
toolbar: {
|
|
||||||
icon: "globe",
|
|
||||||
defaultValue: "en",
|
|
||||||
dynamicTitle: true,
|
|
||||||
showName: true,
|
|
||||||
items: [
|
|
||||||
{ value: "ar-SA", title: "عربي (المملكة العربية السعودية)" },
|
|
||||||
{ value: "az", title: "Azərbaycan (Latın, Azərbaycan)" },
|
|
||||||
{ value: "bg", title: "Български (България)" },
|
|
||||||
{ value: "cs", title: "Český (Česká republika)" },
|
|
||||||
{ value: "de", title: "Deutsch (Deutschland)" },
|
|
||||||
{ value: "el-GR", title: "Ελληνικά (Ελλάδα)" },
|
|
||||||
{ value: "en", title: "English" },
|
|
||||||
{ value: "es", title: "Español (España)" },
|
|
||||||
{ value: "fi", title: "Suomi (Suomi)" },
|
|
||||||
{ value: "fr", title: "Français (France)" },
|
|
||||||
{ value: "hy-AM", title: "Հայերեն (Հայաստան)" },
|
|
||||||
{ value: "it", title: "Italiano (Italia)" },
|
|
||||||
{ value: "ja-JP", title: "日本語(日本)" },
|
|
||||||
{ value: "ko-KR", title: "한국어(대한민국)" },
|
|
||||||
{ value: "lo-LA", title: "ພາສາລາວ" },
|
|
||||||
{ value: "lv", title: "Latviešu (Latvija)" },
|
|
||||||
{ value: "nl", title: "Nederlands (Nederland)" },
|
|
||||||
{ value: "pl", title: "Polski (Polska)" },
|
|
||||||
{ value: "pt", title: "Português (Portugal)" },
|
|
||||||
{ value: "pt-BR", title: "Português (Brasil)" },
|
|
||||||
{ value: "ro", title: "Română (România)" },
|
|
||||||
{ value: "ru", title: "Русский" },
|
|
||||||
{ value: "sk", title: "Slovenčina (Slovensko)" },
|
|
||||||
{ value: "sl", title: "Slovensko (Slovenija)" },
|
|
||||||
{ value: "tr", title: "Türkçe (Türkiye)" },
|
|
||||||
{ value: "uk-UA", title: "Українська (Україна)" },
|
|
||||||
{ value: "vi", title: "Tiếng Việt (Việt Nam)" },
|
|
||||||
{ value: "zh-CN", title: "中文(简体,中国)" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default globalTypes;
|
export default globalTypes;
|
||||||
|
@ -8,6 +8,9 @@ newInstance
|
|||||||
.use(HttpBackend)
|
.use(HttpBackend)
|
||||||
.use(initReactI18next)
|
.use(initReactI18next)
|
||||||
.init({
|
.init({
|
||||||
|
load: "currentOnly",
|
||||||
|
ns: ["Common"],
|
||||||
|
defaultNS: "Common",
|
||||||
backend: {
|
backend: {
|
||||||
backendOptions: [
|
backendOptions: [
|
||||||
{
|
{
|
||||||
|
@ -11,8 +11,6 @@ import lightTheme from "./lightTheme";
|
|||||||
import darkTheme from "./darkTheme";
|
import darkTheme from "./darkTheme";
|
||||||
import StorybookGlobalStyles from "./styles/StorybookGlobalStyles";
|
import StorybookGlobalStyles from "./styles/StorybookGlobalStyles";
|
||||||
|
|
||||||
import i18nextStoryDecorator from "./decorators/i18nextStoryDecorator";
|
|
||||||
|
|
||||||
const preview = {
|
const preview = {
|
||||||
globalTypes,
|
globalTypes,
|
||||||
parameters: {
|
parameters: {
|
||||||
@ -48,7 +46,6 @@ const preview = {
|
|||||||
</ThemeWrapper>
|
</ThemeWrapper>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
i18nextStoryDecorator,
|
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,14 +1,45 @@
|
|||||||
import React, { useEffect, useMemo, useState } from "react";
|
import React, { FC, useEffect, useMemo, useState } from "react";
|
||||||
import type { Meta, StoryObj } from "@storybook/react";
|
import type { Meta, StoryObj } from "@storybook/react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import i18nextStoryDecorator from "../.storybook/decorators/i18nextStoryDecorator";
|
||||||
|
|
||||||
import Cron, { getNextSynchronization } from ".";
|
import Cron, { getNextSynchronization } from ".";
|
||||||
import TextInput from "../text-input/text-input";
|
import TextInput from "../text-input/text-input";
|
||||||
import Button from "../button";
|
import Button from "../button";
|
||||||
|
import CronProps from "./Cron.props";
|
||||||
|
|
||||||
type CronType = typeof Cron;
|
type CronType = FC<{ locale: string } & CronProps>;
|
||||||
|
|
||||||
type Story = StoryObj<CronType>;
|
type Story = StoryObj<CronType>;
|
||||||
|
|
||||||
|
const locales = [
|
||||||
|
"az",
|
||||||
|
"ar-SA",
|
||||||
|
"zh-cn",
|
||||||
|
"cs",
|
||||||
|
"nl",
|
||||||
|
"en",
|
||||||
|
"fi",
|
||||||
|
"fr",
|
||||||
|
"de",
|
||||||
|
"de-ch",
|
||||||
|
"el",
|
||||||
|
"it",
|
||||||
|
"ja",
|
||||||
|
"ko",
|
||||||
|
"lv",
|
||||||
|
"pl",
|
||||||
|
"pt",
|
||||||
|
"pt-br",
|
||||||
|
"ru",
|
||||||
|
"sk",
|
||||||
|
"sl",
|
||||||
|
"es",
|
||||||
|
"tr",
|
||||||
|
"uk",
|
||||||
|
"vi",
|
||||||
|
];
|
||||||
|
|
||||||
const meta: Meta<CronType> = {
|
const meta: Meta<CronType> = {
|
||||||
title: "Components/Cron",
|
title: "Components/Cron",
|
||||||
component: Cron,
|
component: Cron,
|
||||||
@ -23,21 +54,29 @@ const meta: Meta<CronType> = {
|
|||||||
description:
|
description:
|
||||||
"Triggered when the cron component detects an error with the value.",
|
"Triggered when the cron component detects an error with the value.",
|
||||||
},
|
},
|
||||||
|
locale: { control: "select", options: locales },
|
||||||
},
|
},
|
||||||
|
decorators: [i18nextStoryDecorator],
|
||||||
};
|
};
|
||||||
|
|
||||||
export default meta;
|
export default meta;
|
||||||
|
|
||||||
export const Default: Story = {
|
export const Default: Story = {
|
||||||
args: {},
|
args: {
|
||||||
|
locale: "en",
|
||||||
|
},
|
||||||
|
|
||||||
|
render: ({ value: defaultValue, locale }) => {
|
||||||
|
const { i18n } = useTranslation();
|
||||||
|
|
||||||
render: ({ value: defaultValue }, context) => {
|
|
||||||
const [input, setInput] = useState(defaultValue);
|
const [input, setInput] = useState(defaultValue);
|
||||||
|
|
||||||
const [cron, setCron] = useState(defaultValue);
|
const [cron, setCron] = useState(defaultValue);
|
||||||
const [error, setError] = useState<Error>();
|
const [error, setError] = useState<Error>();
|
||||||
|
|
||||||
const { locale } = context.globals;
|
useEffect(() => {
|
||||||
|
i18n.changeLanguage(locale);
|
||||||
|
}, [locale]);
|
||||||
|
|
||||||
const onError = (error?: Error) => {
|
const onError = (error?: Error) => {
|
||||||
setError(error);
|
setError(error);
|
||||||
|
Loading…
Reference in New Issue
Block a user