ui/src/components/iframely-card.tsx

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