@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
116 lines • 6.48 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Depiction = Depiction;
const react_1 = __importStar(require("react"));
const react_inlinesvg_1 = __importDefault(require("react-inlinesvg"));
const color_1 = __importDefault(require("color"));
const constants_1 = require("../../configuration/constants");
const Tooltip_1 = __importDefault(require("../Tooltip/Tooltip"));
const colorDecideContrastvalue_1 = __importDefault(require("./../../common/utils/colorDecideContrastvalue"));
/**
* Display a graphical representation and attache a caption or a badge to it.
*/
function Depiction(_a) {
var { className = "", image, forceInlineSvg = false, size = "medium", resizing = "cover", ratio = "source", caption, captionPosition = "none", backgroundColor, border, rounded, padding = "none", disabled, badge, tooltipProps } = _a, otherFigureProps = __rest(_a, ["className", "image", "forceInlineSvg", "size", "resizing", "ratio", "caption", "captionPosition", "backgroundColor", "border", "rounded", "padding", "disabled", "badge", "tooltipProps"]);
const containerRef = (0, react_1.useRef)(null);
let styleDepictionColors = Object.create(null);
if (!!backgroundColor && backgroundColor !== "light" && backgroundColor !== "dark") {
try {
const color = (0, color_1.default)(backgroundColor);
styleDepictionColors = {
[`--${constants_1.CLASSPREFIX}-depiction-background`]: color.rgb().toString(),
[`--${constants_1.CLASSPREFIX}-depiction-color`]: (0, colorDecideContrastvalue_1.default)({ testColor: color }),
};
}
catch (ex) {
// eslint-disable-next-line no-console
console.warn("Received invalid background color for depiction: " + backgroundColor);
}
}
const updateSvgResizing = react_1.default.useCallback((el) => {
let preserveAspectRatio = "";
switch (resizing) {
case "cover":
preserveAspectRatio = "xMidYMid slice";
break;
case "stretch":
preserveAspectRatio = "none";
break;
}
el.setAttribute("preserveAspectRatio", preserveAspectRatio);
}, [resizing]);
const inlineSvgCall = (0, react_1.useCallback)((svgElement) => {
if (svgElement) {
updateSvgResizing(svgElement);
}
}, [updateSvgResizing]);
(0, react_1.useEffect)(() => {
// Resize element after every render
const svgElement = containerRef.current.getElementsByTagName("svg");
if (svgElement.length > 0) {
updateSvgResizing(svgElement[0]);
}
});
let depiction = image;
if (forceInlineSvg &&
image.type === "img" &&
"src" in image.props &&
!!image.props.src &&
image.props.src.startsWith("data:image/svg+xml")) {
depiction = (react_1.default.createElement(react_inlinesvg_1.default, { src: image.props.src, innerRef: inlineSvgCall }, image));
}
const depictionContainer = (react_1.default.createElement("div", { ref: containerRef, className: `${constants_1.CLASSPREFIX}-depiction__image` +
` ${constants_1.CLASSPREFIX}-depiction__image--${size}` +
` ${constants_1.CLASSPREFIX}-depiction__image--${resizing}-sizing` +
` ${constants_1.CLASSPREFIX}-depiction__image--ratio-${ratio.replace(":", "to")}` +
(backgroundColor === "light" || backgroundColor === "dark"
? ` ${constants_1.CLASSPREFIX}-depiction__image--color-${backgroundColor}`
: "") +
(backgroundColor ? ` ${constants_1.CLASSPREFIX}-depiction__image--color-config` : "") +
(border ? ` ${constants_1.CLASSPREFIX}-depiction__image--hasborder` : "") +
(rounded ? ` ${constants_1.CLASSPREFIX}-depiction__image--roundedborder` : "") +
(padding && padding !== "none" ? ` ${constants_1.CLASSPREFIX}-depiction__image--padding-${padding}` : "") +
(disabled ? ` ${constants_1.CLASSPREFIX}-depiction__image--disabled` : ""), style: styleDepictionColors }, depiction));
return (react_1.default.createElement("figure", Object.assign({ className: `${constants_1.CLASSPREFIX}-depiction` + (className ? ` ${className}` : "") }, otherFigureProps),
captionPosition === "tooltip" && !!caption ? (react_1.default.createElement(Tooltip_1.default, Object.assign({ content: caption, size: "medium" }, tooltipProps), depictionContainer)) : (depictionContainer),
!!caption && (react_1.default.createElement("figcaption", { className: `${constants_1.CLASSPREFIX}-depiction__caption` + ` ${constants_1.CLASSPREFIX}-depiction__caption--${captionPosition}` }, caption)),
badge));
}
//# sourceMappingURL=Depiction.js.map