@geneui/components/Image/index.js

The Gene UI components library designed for BI tools

import { _ as __rest } from '../tslib.es6-f211516f.js';
import React__default from 'react';
import { c as classnames } from '../index-031ff73c.js';
import Empty from '../Empty/index.js';
import { T as Tooltip } from '../index-6d7e99cd.js';
import Checkbox from '../Checkbox/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import 'react-dom';
import 'prop-types';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import '../hooks/useDeviceType.js';
import '../configs-00612ce0.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../GeneUIProvider/index.js';
import '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import '../index-a0e4e333.js';
import '../checkboxRadioSwitcher-5b69d7bd.js';
import '../guid-8ddf77b3.js';

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .image-holder{--image-border-radius:1rem;padding:100% 0 0;position:relative;transition:box-shadow .4s;-webkit-user-select:none;user-select:none;width:100%}[data-gene-ui-version=\"2.16.5\"] .image-holder.with-border{--distance:0.8rem;--image-border-radius:0.6rem;border-radius:1rem;box-shadow:inset 0 0 0 1px rgba(var(--background-sc-rgb),.2)}[data-gene-ui-version=\"2.16.5\"] .image-holder.with-border:hover{box-shadow:inset 0 0 0 1px rgba(var(--background-sc-rgb),.5)}[data-gene-ui-version=\"2.16.5\"] .image-holder.with-border.error{box-shadow:inset 0 0 0 1px rgba(var(--danger-rgb),.5)}[data-gene-ui-version=\"2.16.5\"] .image-holder.with-border.error:hover{box-shadow:inset 0 0 0 1px var(--danger)}[data-gene-ui-version=\"2.16.5\"] .image-content{bottom:var(--distance,0);left:var(--distance,0);position:absolute;right:var(--distance,0);top:var(--distance,0)}[data-gene-ui-version=\"2.16.5\"] .image-content img{border-radius:var(--image-border-radius);display:block;height:100%;object-fit:cover;width:100%}[data-gene-ui-version=\"2.16.5\"] .image-label-holder{background:#0003;border-radius:var(--image-border-radius);cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.16.5\"] .image-heading{align-items:center;display:flex;left:0;padding:0 .7rem;position:absolute;top:1.2rem;width:100%}[data-gene-ui-version=\"2.16.5\"] .image-heading>li{margin:0 .5rem}[data-gene-ui-version=\"2.16.5\"] .image-heading>li.image-cra{background:#fff;border-radius:.3rem;flex-shrink:0}[data-gene-ui-version=\"2.16.5\"] .image-heading>li.image-title{color:#fff;flex:auto;font:700 1.2rem/2rem var(--font-family)}[data-gene-ui-version=\"2.16.5\"] .image-actions-holder{align-items:center;background:#0009;border-radius:var(--image-border-radius);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;transition:opacity .4s,visibility .4s;width:100%}[data-gene-ui-version=\"2.16.5\"] .image-holder:not(:hover) .image-actions-holder{opacity:0;visibility:hidden}[data-gene-ui-version=\"2.16.5\"] .image-actions{align-items:center;display:flex}[data-gene-ui-version=\"2.16.5\"] .image-actions>*{box-shadow:inset 0 0 0 5rem #ffffffe6}html:not([dir=rtl]) .image-actions>*+*{margin-left:.5rem}html[dir=rtl] .image-actions>*+*{margin-right:.5rem}[data-gene-ui-version=\"2.16.5\"] .image-empty-state-holder{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}";
styleInject(css_248z);

const Image = (_a) => {
    var { src, withBorder = false, selectMode = false, actions, title, imageProps, checkboxProps, className, isValid = true, tooltipTitle, emptyText = 'No image to display' } = _a, restProps = __rest(_a, ["src", "withBorder", "selectMode", "actions", "title", "imageProps", "checkboxProps", "className", "isValid", "tooltipTitle", "emptyText"]);
    return (
    /*@ts-ignore */
    React__default.createElement(Tooltip, { title: tooltipTitle },
        React__default.createElement("div", Object.assign({ className: classnames('image-holder', className, {
                'with-border': withBorder,
                error: !isValid
            }) }, restProps), src ? (React__default.createElement("div", { className: "image-content" },
            React__default.createElement("img", Object.assign({ src: src, alt: title }, imageProps)),
            selectMode && (React__default.createElement("label", { className: "image-label-holder" },
                React__default.createElement("ul", { className: "image-heading" },
                    React__default.createElement("li", { className: "image-cra" },
                        React__default.createElement(Checkbox, Object.assign({ size: "big" }, checkboxProps))),
                    title && React__default.createElement("li", { className: "image-title ellipsis-text" }, title)))),
            actions && !selectMode && (React__default.createElement("div", { className: "image-actions-holder" },
                title && (React__default.createElement("ul", { className: "image-heading" },
                    React__default.createElement("li", { className: "image-title ellipsis-text" }, title))),
                React__default.createElement("div", { className: "image-actions" }, actions))))) : (
        /*@ts-ignore */
        React__default.createElement(Empty, { type: "data", title: emptyText, className: "image-empty-state-holder" })))));
};

export { Image as default };