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 && (
  31           <div class="card my-2">
  32             <div class="row no-gutters">
  33               {iframely.thumbnail_url && (
  34                 <div class="col-sm-3">
  35                   {iframely.html ? (
  36                     <span
  37                       class="pointer"
  38                       onClick={linkEvent(this, this.handleIframeExpand)}
  39                     >
  40                       <img class="card-img" src={iframely.thumbnail_url} />
  41                     </span>
  42                   ) : (
  43                     <img
  44                       class="img-fluid card-img"
  45                       src={iframely.thumbnail_url}
  46                     />
  47                   )}
  48                 </div>
  49               )}
  50               <div class="col-sm-9">
  51                 <div class="card-body">
  52                   <h5 class="card-title d-inline">
  53                     <span>
  54                       <a class="text-body" target="_blank" href={iframely.url}>
  55                         {iframely.title}
  56                       </a>
  57                     </span>
  58                   </h5>
  59                   <span class="d-inline-block ml-2 mb-2 small text-muted">
  60                     <a class="text-muted" target="_blank" href={iframely.url}>
  61                       {new URL(iframely.url).hostname}
  62                       <svg class="ml-1 icon">
  63                         <use xlinkHref="#icon-external-link"></use>
  64                       </svg>
  65                     </a>
  66                     {iframely.html && (
  67                       <span
  68                         class="ml-2 pointer"
  69                         onClick={linkEvent(this, this.handleIframeExpand)}
  70                       >
  71                         {this.state.expanded ? '[-]' : '[+]'}
  72                       </span>
  73                     )}
  74                   </span>
  75                   {iframely.description && (
  76                     <div
  77                       className="card-text small text-muted md-div"
  78                       dangerouslySetInnerHTML={mdToHtml(iframely.description)}
  79                     />
  80                   )}
  81                 </div>
  82               </div>
  83             </div>
  84           </div>
  85         )}
  86         {this.state.expanded && (
  87           <div
  88             class="my-2"
  89             dangerouslySetInnerHTML={{ __html: iframely.html }}
  90           />
  91         )}
  92       </>
  93     );
  94   }
  95
  96   handleIframeExpand(i: IFramelyCard) {
  97     i.state.expanded = !i.state.expanded;
  98     i.setState(i.state);
  99   }
 100 }