src/views-components/rich-text-editor-dialog/rich-text-editor-dialog.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from "react";
   6 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, DialogContentText } from "@material-ui/core";
   7 import { WithDialogProps } from "../../store/dialog/with-dialog";
   8 import { withDialog } from '~/store/dialog/with-dialog';
   9 import { RICH_TEXT_EDITOR_DIALOG_NAME } from "~/store/rich-text-editor-dialog/rich-text-editor-dialog-actions";
  10 import RichTextEditor from 'react-rte';
  11
  12 export interface RichTextEditorDialogDataProps {
  13     title: string;
  14     text: string;
  15 }
  16
  17 export const RichTextEditorDialog = withDialog(RICH_TEXT_EDITOR_DIALOG_NAME)(
  18     (props: WithDialogProps<RichTextEditorDialogDataProps>) =>
  19         <Dialog open={props.open}
  20             onClose={props.closeDialog}
  21             fullWidth
  22             maxWidth='sm'>
  23             <DialogTitle>{props.data.title}</DialogTitle>
  24             <DialogContent>
  25                 <DialogContentText>
  26                     <RichTextEditor
  27                         value={RichTextEditor.createValueFromString(props.data.text, 'html')}
  28                         readOnly={true}
  29                         onChange={() => { return; }} />
  30                 </DialogContentText>
  31             </DialogContent>
  32             <DialogActions>
  33                 <Button
  34                     variant='flat'
  35                     color='primary'
  36                     onClick={props.closeDialog}>
  37                     Close
  38                 </Button>
  39             </DialogActions>
  40         </Dialog>
  41 );