ong-react-link-preview/index.js

React library to preview links - including hover color.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("react-loading-skeleton");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=t(e),o=t(n);function r(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}r("/* common */\n.Container {\n  text-align: left;\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  border-radius: 7px;\n  border: 1px solid #ccc;\n  color: black;\n  transition: 0.3s all ease;\n  height: fit-content; }\n  .Container:hover {\n    cursor: pointer; }\n\n.Secondary {\n  color: #646464; }\n\n.LowerContainer {\n  padding: 10px; }\n\n.Title {\n  margin-top: 0;\n  margin-bottom: 10px; }\n\n.Image {\n  width: 100%;\n  border-top-left-radius: 7px;\n  border-top-right-radius: 7px;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  height: 30vh; }\n\n.SiteDetails {\n  margin-top: 10px; }\n\n/* sm */\n@media (max-width: 640px) {\n  .Description {\n    display: none; } }\n\n/* md */\n@media (min-width: 641px) and (max-width: 768px) {\n  .Description {\n    display: none; } }\n");r(".skeleton-container {\n  border-radius: 7px;\n  border: 1px solid #eee; }\n\n.skeleton-lower-container {\n  padding: 10px; }\n");r("@keyframes react-loading-skeleton {\n    100% {\n        transform: translateX(100%);\n    }\n}\n\n.react-loading-skeleton {\n    --base-color: #ebebeb;\n    --highlight-color: #f5f5f5;\n    --animation-duration: 1.5s;\n    --animation-direction: normal;\n    --pseudo-element-display: block; /* Enable animation */\n\n    background-color: var(--base-color);\n\n    width: 100%;\n    border-radius: 0.25rem;\n    display: inline-flex;\n    line-height: 1;\n\n    position: relative;\n    overflow: hidden;\n    z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n    content: ' ';\n    display: var(--pseudo-element-display);\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    background-repeat: no-repeat;\n    background-image: linear-gradient(\n        90deg,\n        var(--base-color),\n        var(--highlight-color),\n        var(--base-color)\n    );\n    transform: translateX(-100%);\n\n    animation-name: react-loading-skeleton;\n    animation-direction: var(--animation-direction);\n    animation-duration: var(--animation-duration);\n    animation-timing-function: ease-in-out;\n    animation-iteration-count: infinite;\n}\n");var i=function(e){var n=e.width,t=void 0===n?"100%":n,r=e.imageHeight,i=void 0===r?"30vh":r,l=e.margin;return a.default.createElement("div",{className:"skeleton-container",style:{width:t,margin:l}},a.default.createElement(o.default,{width:t,height:i}),a.default.createElement("div",{className:"skeleton-lower-container"},a.default.createElement(o.default,{count:3})))};exports.LinkPreview=function(n){var t=n.url,o=n.className,r=void 0===o?"":o,l=n.width,d=n.height,c=n.descriptionLength,s=n.borderRadius,u=n.imageHeight,m=n.textAlign,g=n.margin,f=n.fallback,h=void 0===f?null:f,p=n.backgroundColor,v=void 0===p?"white":p,b=n.backgroundHoverColor,k=void 0===b?"white":b,y=n.primaryTextColor,x=void 0===y?"black":y,w=n.secondaryTextColor,N=void 0===w?"rgb(100, 100, 100)":w,E=n.borderColor,C=void 0===E?"#ccc":E,S=n.showLoader,L=void 0===S||S,T=n.customLoader,I=void 0===T?null:T,R=n.openInNewTab,D=void 0===R||R,j=n.fetcher,B=n.fallbackImageSrc,H=void 0===B?"https://i.imgur.com/UeDNBNQ.jpeg":B,U=n.explicitImageSrc,_=void 0===U?null:U,A=n.showPlaceholderIfNoImage,M=void 0===A||A,O=n.onSuccess,P=void 0===O?function(e){}:O,q=e.useRef(!0),z=e.useState(),F=z[0],Q=z[1],X=e.useState(!0),W=X[0],G=X[1];if(e.useEffect((function(){return q.current=!0,G(!0),j?j(t).then((function(e){var n;q.current&&(!function(e){return!!e&&null!==e.title&&null!==e.description&&null!==e.image&&null!==e.siteName&&null!==e.hostname&&void 0!==e.title&&void 0!==e.description&&void 0!==e.image&&void 0!==e.siteName&&void 0!==e.hostname&&"null"!==e.image&&!e.image.startsWith("/")}(e)?(n=null,Q(null)):(n=e,Q(e)),P(n),G(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),q.current&&(P(null),Q(null),G(!1))})):fetch("https://rlp-proxy.herokuapp.com/v2?url="+t).then((function(e){return e.json()})).then((function(e){q.current&&(Q(e.metadata),P(e.metadata),G(!1))})).catch((function(e){console.error(e),console.error("No metadata could be found for the given URL."),q.current&&(P(null),Q(null),G(!1))})),function(){q.current=!1}}),[t,j]),W&&L)return I?a.default.createElement(a.default.Fragment,null,I):a.default.createElement(i,{width:l,imageHeight:u,margin:g});if(!F)return a.default.createElement(a.default.Fragment,null,h);var J=F.image,K=F.description,V=F.title,Y=F.siteName,Z=F.hostname;return a.default.createElement("div",{"data-testid":"container",onClick:function(){var e=D?"_blank":"_self";window.open(t,e)},className:"Container "+r,style:{width:l,height:d,borderRadius:s,textAlign:m,margin:g,backgroundColor:v,borderColor:C}},(J||H)&&M&&a.default.createElement("div",{"data-testid":"image-container",style:{borderTopLeftRadius:s,borderTopRightRadius:s,backgroundImage:"url("+(_||J||H)+"), url("+H+")",height:u},className:"Image"}),a.default.createElement("div",{className:"LowerContainer"},a.default.createElement("h3",{"data-testid":"title",className:"Title",style:{color:x}},V),K&&a.default.createElement("span",{"data-testid":"desc",className:"Description Secondary",style:{color:N}},c?K.length<=c?K:K.slice(0,c)+"...":K),a.default.createElement("div",{className:"Secondary SiteDetails",style:{color:N}},Y&&a.default.createElement("span",null,Y," • "),a.default.createElement("span",{className:"Secondary SiteLink",onMouseOver:function(e){e.target.style.background=k},onMouseOut:function(e){e.target.style.background=v}},Z))))},exports.placeholderImg="https://i.imgur.com/UeDNBNQ.jpeg";
//# sourceMappingURL=index.js.map