src/components/rich-text-editor-link/rich-text-editor-link.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { Dispatch } from 'redux';
   7 import { connect } from 'react-redux';
   8 import { withStyles, StyleRulesCallback, WithStyles, Typography } from '@material-ui/core';
   9 import { ArvadosTheme } from 'common/custom-theme';
  10 import { openRichTextEditorDialog } from 'store/rich-text-editor-dialog/rich-text-editor-dialog-actions';
  11
  12 type CssRules = "root";
  13
  14 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  15     root: {
  16         color: theme.palette.primary.main,
  17         cursor: 'pointer'
  18     }
  19 });
  20
  21 interface RichTextEditorLinkData {
  22     title: string;
  23     label: string;
  24     content: string;
  25 }
  26
  27 interface RichTextEditorLinkActions {
  28     onClick: (title: string, content: string) => void;
  29 }
  30
  31 type RichTextEditorLinkProps = RichTextEditorLinkData & RichTextEditorLinkActions & WithStyles<CssRules>;
  32
  33 const mapDispatchToProps = (dispatch: Dispatch) => ({
  34     onClick: (title: string, content: string) => dispatch<any>(openRichTextEditorDialog(title, content))
  35 });
  36
  37 export const RichTextEditorLink = connect(undefined, mapDispatchToProps)(
  38     withStyles(styles)(({ classes, title, content, label, onClick }: RichTextEditorLinkProps) =>
  39         <Typography component='span' className={classes.root}
  40             onClick={() => onClick(title, content) }>
  41             {label}
  42         </Typography>
  43     ));