-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add a dialog to the translation feature (#2027)
- Loading branch information
Showing
11 changed files
with
221 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| --- | ||
| "@comet/admin": minor | ||
| "@comet/admin-rte": minor | ||
| --- | ||
|
|
||
| Add a dialog option to the translation feature | ||
|
|
||
| If enabled a dialog will open when pressing the translation button showing the original text and an editable translation | ||
|
|
||
| Control if the dialog should be shown for the current scope via the `showApplyTranslationDialog` prop (default: true) | ||
|
|
||
| ```diff | ||
| <ContentTranslationServiceProvider | ||
| enabled={true} | ||
| + showApplyTranslationDialog={true} | ||
| translate={...} | ||
| > | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
packages/admin/admin-rte/src/core/translation/EditorStateTranslationDialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import { BaseTranslationDialog } from "@comet/admin"; | ||
| import { EditorState } from "draft-js"; | ||
| import * as React from "react"; | ||
|
|
||
| import Rte from "../Rte"; | ||
| import RteReadOnly from "../RteReadOnly"; | ||
|
|
||
| interface EditorStateTranslationDialogProps { | ||
| open: boolean; | ||
| onClose: () => void; | ||
| originalText: EditorState; | ||
| translatedText: EditorState; | ||
| onApplyTranslation: (newValue: EditorState) => void; | ||
| } | ||
|
|
||
| export const EditorStateTranslationDialog: React.FC<EditorStateTranslationDialogProps> = (props) => { | ||
| const { open, onClose, originalText, translatedText, onApplyTranslation } = props; | ||
|
|
||
| return ( | ||
| <BaseTranslationDialog | ||
| open={open} | ||
| onClose={onClose} | ||
| originalText={originalText} | ||
| translatedText={translatedText} | ||
| onApplyTranslation={onApplyTranslation} | ||
| renderOriginalText={(text) => <RteReadOnly value={text} />} | ||
| renderTranslatedText={(text, onChange) => <Rte value={text} onChange={onChange} options={{ disableContentTranslation: true }} />} | ||
| /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 59 additions & 0 deletions
59
packages/admin/admin/src/translator/BaseTranslationDialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Grid, Typography } from "@mui/material"; | ||
| import * as React from "react"; | ||
| import { FormattedMessage } from "react-intl"; | ||
|
|
||
| import { messages } from "../messages"; | ||
|
|
||
| interface TranslationDialogBaseProps<T> { | ||
| open: boolean; | ||
| onClose: () => void; | ||
| originalText: T; | ||
| translatedText: T; | ||
| onApplyTranslation: (value: T) => void; | ||
| renderOriginalText: (text: T) => JSX.Element; | ||
| renderTranslatedText: (text: T, onChange: (value: T) => void) => JSX.Element; | ||
| } | ||
|
|
||
| export const BaseTranslationDialog = <T,>(props: TranslationDialogBaseProps<T>) => { | ||
| const { open, onClose, originalText, translatedText, onApplyTranslation, renderOriginalText, renderTranslatedText } = props; | ||
| const [translation, setTranslation] = React.useState(translatedText); | ||
|
|
||
| return ( | ||
| <Dialog open={open} onClose={onClose} fullWidth maxWidth="lg"> | ||
| <DialogTitle> | ||
| <FormattedMessage id="comet.translator.translation" defaultMessage="Translation" /> | ||
| </DialogTitle> | ||
| <DialogContent> | ||
| <Grid container spacing={4} columns={2} alignItems="center"> | ||
| <Grid item xs={1}> | ||
| <Typography variant="h6"> | ||
| <FormattedMessage id="comet.translator.original" defaultMessage="Original" /> | ||
| </Typography> | ||
| {renderOriginalText(originalText)} | ||
| </Grid> | ||
| <Grid item xs={1}> | ||
| <Typography variant="h6"> | ||
| <FormattedMessage id="comet.translator.translation" defaultMessage="Translation" /> | ||
| </Typography> | ||
| {renderTranslatedText(translation, setTranslation)} | ||
| </Grid> | ||
| </Grid> | ||
| </DialogContent> | ||
| <DialogActions> | ||
| <Button onClick={onClose} color="primary"> | ||
| <FormattedMessage {...messages.cancel} /> | ||
| </Button> | ||
| <Button | ||
| onClick={() => { | ||
| onApplyTranslation(translation); | ||
| onClose(); | ||
| }} | ||
| color="primary" | ||
| variant="contained" | ||
| > | ||
| <FormattedMessage {...messages.apply} /> | ||
| </Button> | ||
| </DialogActions> | ||
| </Dialog> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
packages/admin/admin/src/translator/PlainTextTranslationDialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { TextField } from "@mui/material"; | ||
| import * as React from "react"; | ||
|
|
||
| import { BaseTranslationDialog } from "./BaseTranslationDialog"; | ||
|
|
||
| interface PlainTextTranslationDialogProps { | ||
| open: boolean; | ||
| onClose: () => void; | ||
| originalText: string; | ||
| translatedText: string; | ||
| onApplyTranslation: (value: string) => void; | ||
| } | ||
|
|
||
| export const PlainTextTranslationDialog: React.FC<PlainTextTranslationDialogProps> = (props) => { | ||
| const { open, onClose, originalText, translatedText, onApplyTranslation } = props; | ||
|
|
||
| return ( | ||
| <BaseTranslationDialog | ||
| open={open} | ||
| onClose={onClose} | ||
| originalText={originalText} | ||
| translatedText={translatedText} | ||
| onApplyTranslation={onApplyTranslation} | ||
| renderOriginalText={(text) => <TextField value={text} disabled fullWidth />} | ||
| renderTranslatedText={(text, onChange) => <TextField value={text} onChange={(event) => onChange(event.target.value)} fullWidth />} | ||
| /> | ||
| ); | ||
| }; |