ui/src/components/iframely-card.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { FramelyData } from '../interfaces';
   3 import { mdToHtml } from '../utils';
   4 import { i18n } from '../i18next';
   5
   6 interface FramelyCardProps {
   7   iframely: FramelyData;
   8 }
   9
  10 interface FramelyCardState {
  11   expanded: boolean;
  12 }
  13
  14 export class IFramelyCard extends Component<
  15   FramelyCardProps,
  16   FramelyCardState
  17 > {
  18   private emptyState: FramelyCardState = {
  19     expanded: false,
  20   };
  21
  22   constructor(props: any, context: any) {
  23     super(props, context);
  24     this.state = this.emptyState;
  25   }
  26
  27   render() {
  28     let iframely = this.props.iframely;
  29     return (
  30       <>
  31         {iframely.title && !this.state.expanded && (
  32           <div class="card mt-3 mb-2">
  33             <div class="row">
  34               <div class="col-12">
  35                 <div class="card-body">
  36                   <h5 class="card-title d-inline">
  37                     <span>
  38                       <a class="text-body" target="_blank" href={iframely.url}>
  39                         {iframely.title}
  40                       </a>
  41                     </span>
  42                   </h5>
  43                   <span class="d-inline-block ml-2 mb-2 small text-muted">
  44                     <a
  45                       class="text-muted font-italic"
  46                       target="_blank"
  47                       href={iframely.url}
  48                     >
  49                       {new URL(iframely.url).hostname}
  50                       <svg class="ml-1 icon">
  51                         <use xlinkHref="#icon-external-link"></use>
  52                       </svg>
  53                     </a>
  54                     {iframely.html && (
  55                       <span
  56                         class="ml-2 pointer text-monospace"
  57                         onClick={linkEvent(this, this.handleIframeExpand)}
  58                         data-tippy-content={i18n.t('expand_here')}
  59                       >
  60                         {this.state.expanded ? '[-]' : '[+]'}
  61                       </span>
  62                     )}
  63                   </span>
  64                   {iframely.description && (
  65                     <div
  66                       className="card-text small text-muted md-div"
  67                       dangerouslySetInnerHTML={mdToHtml(iframely.description)}
  68                     />
  69                   )}
  70                 </div>
  71               </div>
  72             </div>
  73           </div>
  74         )}
  75         {this.state.expanded && (
  76           <div
  77             class="mt-3 mb-2"
  78             dangerouslySetInnerHTML={{ __html: iframely.html }}
  79           />
  80         )}
  81       </>
  82     );
  83   }
  84
  85   handleIframeExpand(i: IFramelyCard) {
  86     i.state.expanded = !i.state.expanded;
  87     i.setState(i.state);
  88   }
  89 }