@tolgee/web 4.9.3-rc.128edeb.0

package/src/ui/KeyDialog/TranslationFields.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { FunctionComponent } from 'react';
+import {
+  useDialogContext,
+  useDialogDispatch,
+} from './TranslationDialogContextProvider';
+import TextField from '@mui/material/TextField';
+import { styled } from '@mui/material/styles';
+import { keyframes } from '@mui/styled-engine';
+import { ScFieldTitle } from '../common/FieldTitle';
+import { isLanguagePermitted } from '../tools/isLanguagePermitted';
+import { getPreferredLanguages } from './tools';
+
+const inputLoading = keyframes`
+  0%   { background-position: 0%; }
+  100% { background-position: 100%; }
+`;
+
+const ScTextField = styled(TextField)`
+  margin: 0px;
+  & .Mui-disabled {
+    background: ${({ theme }) => theme.palette.grey[200]};
+  }
+`;
+
+const LoadingTextArea = styled('div')`
+  margin-top: 10px;
+  padding: 5px;
+  border: 1px solid #ccc;
+  width: 100%;
+  border-radius: 5px;
+  font-style: inherit;
+  font-family: inherit;
+  box-sizing: border-box;
+  display: block;
+  height: 42px;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.1),
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0)
+  );
+  background-size: 500% 500%;
+  animation: ${inputLoading} 1.5s linear infinite alternate;
+`;
+
+export const TranslationFields: FunctionComponent = () => {
+  const dispatch = useDialogDispatch();
+
+  const selectedLanguages = useDialogContext((c) => c.selectedLanguages);
+  const langFields = selectedLanguages.length
+    ? selectedLanguages
+    : getPreferredLanguages();
+  const availableLanguages = useDialogContext((c) => c.availableLanguages);
+  const translationsForm = useDialogContext((c) => c.translationsForm);
+  const formDisabled = useDialogContext((c) => c.formDisabled);
+  const loading = useDialogContext((c) => c.loading);
+  const permittedLanguageIds = useDialogContext((c) => c.permittedLanguageIds);
+
+  const onChange = (key: string) => (e: any) => {
+    dispatch({
+      type: 'ON_INPUT_CHANGE',
+      payload: { key, value: e.target.value },
+    });
+  };
+
+  const Loading = () => (
+    <>
+      {langFields.map((lang) => (
+        <LoadingTextArea key={lang} />
+      ))}
+    </>
+  );
+
+  return (
+    <>
+      {loading ? (
+        <Loading />
+      ) : (
+        [...selectedLanguages].map((key) => {
+          const lang = availableLanguages?.find((l) => l.tag === key);
+          const languagePermitted = isLanguagePermitted(
+            key,
+            permittedLanguageIds,
+            availableLanguages
+          );
+
+          return (
+            <React.Fragment key={key}>
+              <ScFieldTitle>{lang?.name || key}</ScFieldTitle>
+              <ScTextField
+                size="small"
+                disabled={formDisabled || !languagePermitted}
+                key={key}
+                inputProps={{
+                  lang: key,
+                }}
+                minRows={2}
+                maxRows={Infinity}
+                multiline
+                fullWidth
+                value={translationsForm[key] || ''}
+                onChange={onChange(key)}
+              />
+            </React.Fragment>
+          );
+        })
+      )}
+    </>
+  );
+};

package/src/ui/KeyDialog/languageHelpers.ts

@@ -0,0 +1,18 @@
+import { components } from '../client/apiSchema.generated';
+
+type LanguageModel = components['schemas']['LanguageModel'];
+
+export const putBaseLangFirst = (languages: LanguageModel[] | undefined) => {
+  const base = languages?.find((l) => l.base);
+  if (base) {
+    return [base, ...(languages || []).filter((val) => val !== base)];
+  }
+  return languages;
+};
+
+export const putBaseLangFirstTags = (strings: Array<string>, base?: string) => {
+  if (base && strings.includes(base)) {
+    return [base, ...strings.filter((val) => val !== base)];
+  }
+  return strings;
+};

package/src/ui/KeyDialog/tools.ts

@@ -0,0 +1,30 @@
+import {
+  MAX_LANGUAGES_SELECTED,
+  PREFERRED_LANGUAGES_LOCAL_STORAGE_KEY,
+} from '../../constants';
+
+export function getPreferredLanguages(): string[] {
+  try {
+    return JSON.parse(
+      localStorage.getItem(PREFERRED_LANGUAGES_LOCAL_STORAGE_KEY) || ''
+    );
+  } catch {
+    return [];
+  }
+}
+
+export function setPreferredLanguages(languages: string[]) {
+  localStorage.setItem(
+    PREFERRED_LANGUAGES_LOCAL_STORAGE_KEY,
+    JSON.stringify(languages)
+  );
+}
+
+export function getInitialLanguages(available: string[]) {
+  const preferred = getPreferredLanguages();
+  let langs = preferred.filter((l) => available.includes(l));
+  if (langs.length === 0) {
+    langs = available;
+  }
+  return langs.slice(0, MAX_LANGUAGES_SELECTED);
+}

package/src/ui/ThemeProvider.tsx

@@ -0,0 +1,71 @@
+import React, { useRef } from 'react';
+import {
+  createTheme,
+  ThemeProvider as MuiThemeProvider,
+} from '@mui/material/styles';
+import { DEVTOOLS_ID, DEVTOOLS_Z_INDEX } from '../constants';
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+
+let theme = createTheme({
+  typography: {
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+  },
+  palette: {
+    primary: {
+      main: '#822B55',
+    },
+    secondary: {
+      main: '#2B5582',
+    },
+    text: {
+      secondary: '#808080',
+    },
+    background: {
+      default: 'rgb(255, 255, 255)',
+    },
+  },
+  zIndex: {
+    modal: DEVTOOLS_Z_INDEX,
+  },
+});
+
+theme = createTheme(theme, {
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          whiteSpace: 'nowrap',
+        },
+      },
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          fontSize: 12,
+          boxShadow: '1px 1px 6px rgba(0, 0, 0, 0.25)',
+          borderRadius: '11px',
+          color: 'black',
+          backgroundColor: 'white',
+        },
+      },
+    },
+  },
+});
+
+export const ThemeProvider: React.FC = ({ children }) => {
+  const cache = useRef(
+    createCache({
+      key: 'css',
+      prepend: true,
+      container: document.getElementById(DEVTOOLS_ID)?.shadowRoot as Node,
+    })
+  );
+
+  return (
+    <CacheProvider value={cache.current!}>
+      <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+    </CacheProvider>
+  );
+};

package/src/ui/client/QueryProvider.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { QueryClientProvider, QueryClient } from 'react-query';
+
+export type GlobalOptions = {
+  apiKey: string;
+  apiUrl: string;
+};
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      retry: false,
+      cacheTime: 0,
+      staleTime: 0,
+    },
+  },
+});
+
+export const QueryContext = React.createContext({} as GlobalOptions);
+
+type Props = {
+  apiKey: string;
+  apiUrl: string;
+};
+
+export const QueryProvider: React.FC<Props> = ({
+  children,
+  apiUrl,
+  apiKey,
+}) => {
+  return (
+    <QueryContext.Provider value={{ apiUrl, apiKey }}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </QueryContext.Provider>
+  );
+};