@activecollab/components
Version:
ActiveCollab Components
59 lines (55 loc) • 2.52 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ImageSkeleton = exports.ImagePlaceholder = exports.ImageCard = void 0;
var _react = _interopRequireDefault(require("react"));
var _shared = require("./shared");
var _Icons = require("../../../components/Icons");
var _Loaders = require("../../../components/Loaders");
var _StackedCard = require("../../../components/StackedCard");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
* ImageCard — a full-bleed image and little else. Cover-management controls
* (collapse, remove) appear on hover; there is no other chrome. Fixed-box in
* production (host sets width AND height, the cover scales aspect-locked); shown
* here in the auto-height shell with a reserved image aspect ratio.
*/
var ImageCard = exports.ImageCard = function ImageCard(_ref) {
var _ref$color = _ref.color,
color = _ref$color === void 0 ? "#F0997B" : _ref$color,
src = _ref.src;
return /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardCover, {
aspectRatio: _shared.COVER_RATIO_IMAGE,
topRightSlot: (0, _shared.coverManagement)({
removeLabel: "Remove image"
})
}, src ? /*#__PURE__*/_react.default.createElement("img", {
src: src,
alt: ""
}) : /*#__PURE__*/_react.default.createElement(_shared.StyledColorCover, {
$color: color
}));
};
/* ---- placeholder + skeleton ---- */
/* The placeholder doubles as the drop target (visual only here). */
var ImagePlaceholder = exports.ImagePlaceholder = function ImagePlaceholder(props) {
return /*#__PURE__*/_react.default.createElement(_shared.Placeholder, _extends({
icon: /*#__PURE__*/_react.default.createElement(_Icons.UploadIcon, null),
label: "Drop an image or click to upload",
height: 168,
dashed: true
}, props));
};
var ImageSkeleton = exports.ImageSkeleton = function ImageSkeleton() {
return /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardCover, {
aspectRatio: _shared.COVER_RATIO_IMAGE
}, /*#__PURE__*/_react.default.createElement(_Loaders.SkeletonLoader, {
style: {
width: "100%",
height: "100%"
}
}));
};
//# sourceMappingURL=ImageCard.js.map