ui/src/components/iframely-card.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Post } from '../interfaces';
   3 import { mdToHtml } from '../utils';
   4 import { i18n } from '../i18next';
   5
   6 interface FramelyCardProps {
   7   post: Post;
   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 post = this.props.post;
  29     return (
  30       <>
  31         {post.embed_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                     {post.embed_html ? (
  38                       <span
  39                         class="unselectable pointer"
  40                         onClick={linkEvent(this, this.handleIframeExpand)}
  41                         data-tippy-content={i18n.t('expand_here')}
  42                       >
  43                         {post.embed_title}
  44                       </span>
  45                     ) : (
  46                       <span>
  47                         <a class="text-body" target="_blank" href={post.url}>
  48                           {post.embed_title}
  49                         </a>
  50                       </span>
  51                     )}
  52                   </h5>
  53                   <span class="d-inline-block ml-2 mb-2 small text-muted">
  54                     <a
  55                       class="text-muted font-italic"
  56                       target="_blank"
  57                       href={post.url}
  58                     >
  59                       {new URL(post.url).hostname}
  60                       <svg class="ml-1 icon">
  61                         <use xlinkHref="#icon-external-link"></use>
  62                       </svg>
  63                     </a>
  64                     {post.embed_html && (
  65                       <span
  66                         class="ml-2 pointer text-monospace"
  67                         onClick={linkEvent(this, this.handleIframeExpand)}
  68                         data-tippy-content={i18n.t('expand_here')}
  69                       >
  70                         {this.state.expanded ? '[-]' : '[+]'}
  71                       </span>
  72                     )}
  73                   </span>
  74                   {post.embed_description && (
  75                     <div
  76                       className="card-text small text-muted md-div"
  77                       dangerouslySetInnerHTML={mdToHtml(post.embed_description)}
  78                     />
  79                   )}
  80                 </div>
  81               </div>
  82             </div>
  83           </div>
  84         )}
  85         {this.state.expanded && (
  86           <div
  87             class="mt-3 mb-2"
  88             dangerouslySetInnerHTML={{ __html: post.embed_html }}
  89           />
  90         )}
  91       </>
  92     );
  93   }
  94
  95   handleIframeExpand(i: IFramelyCard) {
  96     i.state.expanded = !i.state.expanded;
  97     i.setState(i.state);
  98   }
  99 }