@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
130 lines (129 loc) • 6.68 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _GroupedImage = require("./GroupedImage.styles");
var _CareOfClipPath = _interopRequireDefault(require("./clip-paths/CareOfClipPath"));
var _uuid = require("../../hooks/uuid");
var _SecondImageClipPath = _interopRequireDefault(require("./clip-paths/SecondImageClipPath"));
var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
var _ColorSchemeProvider = require("../color-scheme-provider/ColorSchemeProvider");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const GROUPED_IMAGE_SERVICE_ORIGIN = 'https://tsimg.cloud';
const IMAGE_SERVICE_PARAM_PATTERN = /^(?:[whsbd]\d+|f(?:webp|avif|json|none)|c(?:c|f)|m(?:cr|sd|ct|pd|cv))$/i;
const getGroupedImageDisplayUrl = (url, size) => {
try {
const urlObject = new URL(url);
if (urlObject.origin !== GROUPED_IMAGE_SERVICE_ORIGIN) {
return url;
}
const pathSegments = urlObject.pathname.split('/');
const fileName = pathSegments.pop();
if (!fileName) {
return url;
}
const extensionIndex = fileName.lastIndexOf('.');
const extension = extensionIndex > -1 ? fileName.slice(extensionIndex) : '';
const fileBaseName = extensionIndex > -1 ? fileName.slice(0, extensionIndex) : fileName;
const parameterSegment = fileBaseName.split('_').pop() ?? '';
const hasImageServiceParameters = Boolean(parameterSegment && parameterSegment !== fileBaseName && parameterSegment.split('-').every(parameter => IMAGE_SERVICE_PARAM_PATTERN.test(parameter)));
const normalizedSize = Math.max(1, Math.round(size));
if (hasImageServiceParameters) {
const fileBaseNameWithoutParams = fileBaseName.slice(0, fileBaseName.lastIndexOf('_'));
const preservedParams = parameterSegment.split('-').filter(p => !/^[whs]\d+$/i.test(p));
const newParams = [...preservedParams, `w${normalizedSize}`, `h${normalizedSize}`];
pathSegments.push(`${fileBaseNameWithoutParams}_${newParams.join('-')}${extension}`);
} else {
pathSegments.push(`${fileBaseName}_w${normalizedSize}-h${normalizedSize}${extension}`);
}
urlObject.pathname = pathSegments.join('/');
return urlObject.toString();
} catch {
return url;
}
};
const GroupedImage = ({
cornerImage,
height = 40,
imageBackground,
images,
onClick,
shouldPreventBackground = false,
shouldShowRoundImage = false,
cornerElement,
onImageError,
shouldEnableKeyboardHighlighting
}) => {
const colorScheme = (0, _ColorSchemeProvider.useColorScheme)();
const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.shouldEnableKeyboardHighlighting) ?? false;
const hasCornerImage = Boolean(cornerImage);
const hasCornerElement = Boolean(cornerElement);
const hasMultipleImages = images.length > 1;
const uuid = (0, _uuid.useUuid)();
const cornerImageDisplayUrl = cornerImage ? getGroupedImageDisplayUrl(cornerImage, height) : undefined;
const isClickable = typeof onClick === 'function';
const isKeyboardFocusable = isClickable && shouldEnableKeyboardHighlightingEffective;
const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(isKeyboardFocusable);
const handleKeyDown = (0, _react.useCallback)(event => {
if (!isClickable) {
return;
}
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
onClick === null || onClick === void 0 || onClick(event);
}
}, [isClickable, onClick]);
const imageElements = images.slice(0, 2).map((src, index) => /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledGroupImageElement, {
$background: imageBackground,
$isSecondImage: index === 1,
$hasCornerImage: hasCornerImage,
$hasMultipleImages: hasMultipleImages,
$shouldPreventBackground: shouldPreventBackground,
$shouldShowRoundImage: shouldShowRoundImage,
$uuid: uuid
// eslint-disable-next-line react/no-array-index-key
,
key: index
}, /*#__PURE__*/_react.default.createElement("svg", {
width: "100%",
height: "100%",
viewBox: "0 0 40 40",
xmlns: "http://www.w3.org/2000/svg",
preserveAspectRatio: "xMidYMid slice"
}, /*#__PURE__*/_react.default.createElement("foreignObject", {
width: "40",
height: "40"
}, /*#__PURE__*/_react.default.createElement("img", {
alt: `image--${index}`,
src: getGroupedImageDisplayUrl(src, height),
onError: event => typeof onImageError === 'function' && onImageError(event, index)
})))));
return /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledGroupedImage, {
onClick: isClickable ? onClick : undefined,
onKeyDown: isKeyboardFocusable ? handleKeyDown : undefined,
tabIndex: isKeyboardFocusable ? 0 : -1,
role: isClickable ? 'button' : undefined,
$height: height,
$shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
}, hasCornerImage && /*#__PURE__*/_react.default.createElement(_CareOfClipPath.default, {
height: height,
uuid: uuid,
imageFactors: hasMultipleImages ? [0.76, 0.8] : [1]
}), hasMultipleImages && /*#__PURE__*/_react.default.createElement(_SecondImageClipPath.default, {
height: height,
uuid: uuid,
shouldShowRoundImage: shouldShowRoundImage
}), imageElements, hasCornerImage && /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledCornerImage, {
$background: imageBackground,
$shouldPreventBackground: shouldPreventBackground,
$hasMultipleImages: hasMultipleImages,
src: cornerImageDisplayUrl,
key: "corner-image"
}), hasCornerElement && /*#__PURE__*/_react.default.createElement(_GroupedImage.StyledCornerElement, null, cornerElement));
};
GroupedImage.displayName = 'GroupedImage';
var _default = exports.default = GroupedImage;
//# sourceMappingURL=GroupedImage.js.map