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 React, { useEffect, Suspense } from "react";
|
||||
import React, { Suspense } from "react";
|
||||
|
||||
import i18n from "../i18n";
|
||||
|
||||
const i18nextStoryDecorator = (Story, context) => {
|
||||
const { locale } = context.globals;
|
||||
|
||||
// When the locale global changes
|
||||
// Set the new locale in i18n
|
||||
useEffect(() => {
|
||||
i18n.changeLanguage(locale);
|
||||
}, [locale]);
|
||||
|
||||
const i18nextStoryDecorator = (Story) => {
|
||||
return (
|
||||
// here catches the suspense from components not yet ready (still loading translations)
|
||||
// alternative set useSuspense false on i18next.options.react when initializing i18next
|
||||
|
@ -9,47 +9,6 @@ const globalTypes = {
|
||||
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;
|
||||
|
@ -8,6 +8,9 @@ newInstance
|
||||
.use(HttpBackend)
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
load: "currentOnly",
|
||||
ns: ["Common"],
|
||||
defaultNS: "Common",
|
||||
backend: {
|
||||
backendOptions: [
|
||||
{
|
||||
|
@ -11,8 +11,6 @@ import lightTheme from "./lightTheme";
|
||||
import darkTheme from "./darkTheme";
|
||||
import StorybookGlobalStyles from "./styles/StorybookGlobalStyles";
|
||||
|
||||
import i18nextStoryDecorator from "./decorators/i18nextStoryDecorator";
|
||||
|
||||
const preview = {
|
||||
globalTypes,
|
||||
parameters: {
|
||||
@ -48,7 +46,6 @@ const preview = {
|
||||
</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 { useTranslation } from "react-i18next";
|
||||
import i18nextStoryDecorator from "../.storybook/decorators/i18nextStoryDecorator";
|
||||
|
||||
import Cron, { getNextSynchronization } from ".";
|
||||
import TextInput from "../text-input/text-input";
|
||||
import Button from "../button";
|
||||
import CronProps from "./Cron.props";
|
||||
|
||||
type CronType = typeof Cron;
|
||||
type CronType = FC<{ locale: string } & CronProps>;
|
||||
|
||||
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> = {
|
||||
title: "Components/Cron",
|
||||
component: Cron,
|
||||
@ -23,21 +54,29 @@ const meta: Meta<CronType> = {
|
||||
description:
|
||||
"Triggered when the cron component detects an error with the value.",
|
||||
},
|
||||
locale: { control: "select", options: locales },
|
||||
},
|
||||
decorators: [i18nextStoryDecorator],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
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 [cron, setCron] = useState(defaultValue);
|
||||
const [error, setError] = useState<Error>();
|
||||
|
||||
const { locale } = context.globals;
|
||||
useEffect(() => {
|
||||
i18n.changeLanguage(locale);
|
||||
}, [locale]);
|
||||
|
||||
const onError = (error?: Error) => {
|
||||
setError(error);
|
||||
|
Loading…
Reference in New Issue
Block a user