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