@hhgtech/hhg-components
Version:
Hello Health Group common components
152 lines (145 loc) • 6.38 kB
JavaScript
'use strict';
var tslib_es6 = require('./tslib.es6-92cccef3.js');
var React = require('react');
var core = require('@mantine/core');
var index$1 = require('./index-b0c1d50a.js');
var index = require('./index-25f2e7a5.js');
var togetherComponentGlobalContext = require('./utils-aea77f4a.js');
var styled = require('@emotion/styled');
var togetherApiPaths = require('./togetherApiPaths.js');
var constants = require('./constants-bb30dda6.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
const StyledCardLink = styled__default["default"].div `
.link-info-container {
padding: 0.5rem 1rem;
background: ${(props) => props.color || '#f4faff'};
}
.link-image-wrapper {
position: relative;
overflow: hidden;
width: 100%;
padding-top: min(280px, 56.25%);
.link-image-blur {
position: absolute;
top: 50%;
left: 50%;
width: 110%;
height: 110%;
/* Add the blur effect */
-webkit-filter: blur(8px);
filter: blur(8px);
object-fit: cover;
object-position: center;
opacity: 0.8;
transform: translate(-50%, -50%);
}
.link-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
}
a {
text-decoration: none;
}
&[data-is-marrybaby='true'] {
overflow: hidden;
border-radius: 1rem;
.link-info-container {
padding-bottom: 1rem;
p {
color: #2661ad;
}
.link-logo {
max-width: 2rem;
height: 13px;
margin-right: 4px;
object-fit: contain;
vertical-align: middle;
}
}
.link-image-wrapper {
padding-top: min(360px, 56.25%);
.link-image {
object-fit: cover;
}
}
}
`;
const CardLink = ({ title, url, image, logo, className, style, noRefetch, }) => {
const { data: { locale, env: { isMarryBaby }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
const [hideLogo, setHideLogo] = React.useState(false);
const _theme = core.useMantineTheme();
const noRefetchRef = React.useRef(noRefetch);
noRefetchRef.current = noRefetch;
const [previewData, setPreviewData] = React.useState(null);
React.useEffect(() => {
(() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
if (noRefetchRef.current)
return;
if (!url)
return setPreviewData(null);
setPreviewData((_data) => (Object.assign(Object.assign({}, _data), { isFetching: true })));
togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.FETCH_PREVIEW, {
_locale: locale,
}), 'POST', {
data: {
link: url,
},
headers: {
'Content-Type': 'application/json',
},
})
.then((res) => {
var _a, _b, _c;
setHideLogo(false);
setPreviewData({
title: (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.title,
url,
image: ((_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.image) || ((_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.logo),
// logo: meta.logo,
});
})
.catch(() => {
setPreviewData(null);
});
}))();
}, [url]);
const displayImage = (previewData === null || previewData === void 0 ? void 0 : previewData.image) || image;
const displayTitle = (previewData === null || previewData === void 0 ? void 0 : previewData.title) || title;
const displayLogo = (previewData === null || previewData === void 0 ? void 0 : previewData.logo) || logo;
const displayUrl = (previewData === null || previewData === void 0 ? void 0 : previewData.url) || url;
const urlParts = displayUrl
.replace('http://', '')
.replace('https://', '')
.split(/[/?#]/);
const domain = urlParts[0];
const showDefaultRef = React.useRef(false);
return (React__default["default"].createElement(StyledCardLink, { "data-is-marrybaby": isMarryBaby, className: `${className} no-replace-click`, style: style, color: _theme.colors[_theme.primaryColor][0] },
React__default["default"].createElement("a", { href: displayUrl, target: "_blank", rel: "noreferrer" },
displayImage && (React__default["default"].createElement("div", { className: "link-image-wrapper" },
!isMarryBaby && (React__default["default"].createElement("img", { className: "link-image-blur", src: displayImage, onError: (e) => {
if (!showDefaultRef.current) {
showDefaultRef.current = true;
e.currentTarget.src = constants.DEFAULT_IMG;
}
}, loading: "lazy" })),
React__default["default"].createElement("img", { className: "link-image", src: displayImage, onError: (e) => {
if (!showDefaultRef.current) {
showDefaultRef.current = true;
e.currentTarget.src = constants.DEFAULT_IMG;
}
}, loading: "lazy" }))),
React__default["default"].createElement("div", { className: "link-info-container" },
React__default["default"].createElement(index.Text, { size: "n1" },
isMarryBaby && displayLogo && !hideLogo && (React__default["default"].createElement("img", { className: "link-logo", src: displayLogo, onError: () => setHideLogo(true), loading: "lazy" })),
domain),
React__default["default"].createElement(index$1.Heading, { tag: "h6" }, displayTitle)))));
};
exports.CardLink = CardLink;