chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
198 lines (195 loc) • 7.95 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _SmallWaitCursor = _interopRequireDefault(require("../../react-chayns-smallwaitcursor/component/SmallWaitCursor"));
var _is = require("../../utils/is");
var _isServer = require("../../utils/isServer");
var _getDataUrl = require("../utils/getDataUrl");
var _getImageMetaData = require("../utils/getImageMetaData");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/* eslint-disable jsx-a11y/click-events-have-key-events,no-return-assign,react/forbid-prop-types */
class Image extends _react.PureComponent {
constructor(props) {
super(props);
this.getElementDimensions = () => {
this.setState({
elementDimensions: {
height: Math.ceil(this.imageRef.current.clientHeight / 50) * 50,
width: Math.ceil(this.imageRef.current.clientWidth / 50) * 50
}
});
};
this.init = async () => {
// set url and metadata
this.getElementDimensions();
const {
image,
styleLandscape,
stylePortrait
} = this.props;
if ((0, _is.isString)(image)) {
// url
if (Image.imageMetaData[image]) {
// use cached metadata
this.setState({
metaData: Image.imageMetaData[image],
imageUrl: image
});
} else if (image.indexOf('tsimg.cloud') >= 0) {
// get preview and dimensions from tsimg.cloud
const metaData = await (0, _getImageMetaData.getImageMetaDataFromApi)(image);
Image.imageMetaData[image] = metaData;
this.setState({
metaData,
imageUrl: image
});
} else if (styleLandscape || stylePortrait) {
// get dimensions if needed
const metaData = await (0, _getImageMetaData.getImageMetaDataFromPreview)(image);
Image.imageMetaData[image] = metaData;
this.setState({
metaData,
imageUrl: image
});
} else {
// set only the image url
this.setState({
imageUrl: image
});
}
} else {
// file
const cacheId = `##FILE##${image.name}${image.lastModified}${image.size}`;
if (Image.imageMetaData[cacheId]) {
// use cache
this.setState(Image.imageMetaData[cacheId]);
} else {
// get dataUrl, metaData and exifData and set cache
const imageUrl = await (0, _getDataUrl.getDataUrlFromFile)(image);
const newImage = {
imageUrl
};
if (styleLandscape || stylePortrait) {
// get dimensions if needed
newImage.metaData = await (0, _getImageMetaData.getImageMetaDataFromPreview)(imageUrl);
}
Image.imageMetaData[cacheId] = newImage;
this.setState(newImage);
}
}
};
this.onReady = () => {
this.setState({
ready: true
});
};
this.state = {
ready: false,
imageUrl: null,
metaData: null,
elementDimensions: null
};
this.imageRef = /*#__PURE__*/_react.default.createRef();
}
componentDidMount() {
this.init();
}
componentDidUpdate(prevProps) {
if (prevProps !== this.props) {
this.init();
}
}
render() {
const {
moreImages,
onClick,
className,
classNameLandscape,
classNamePortrait,
style,
styleLandscape,
stylePortrait,
preventParams
} = this.props;
const {
metaData,
imageUrl,
ready,
elementDimensions
} = this.state;
let format = 0;
if (metaData) {
format = metaData.width > metaData.height ? Image.format.LANDSCAPE : Image.format.PORTRAIT;
}
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _clsx.default)('cc__image', className, format === Image.format.LANDSCAPE && ['cc__image--landscape', classNameLandscape], format === Image.format.PORTRAIT && ['cc__image--portrait', classNamePortrait], moreImages > 0 && 'cc__image--more-images', ready && 'cc__image--ready'),
ref: this.imageRef,
style: {
...style,
...(format === Image.format.LANDSCAPE ? styleLandscape : null),
...(format === Image.format.PORTRAIT ? stylePortrait : null)
},
"data-more": moreImages > 0 ? `+${moreImages}` : undefined
}, imageUrl ? /*#__PURE__*/_react.default.createElement("img", {
onClick: onClick,
key: "image",
alt: "",
src: preventParams === true ? imageUrl : chayns.utils.getScaledImageUrl(imageUrl, !preventParams.height && elementDimensions.height, !preventParams.width && elementDimensions.width, preventParams.format),
className: 'cc__image__img' + (onClick ? " cc__image--clickable" : ""),
onLoad: this.onReady
}) : null, !ready && metaData && metaData.preview ? [/*#__PURE__*/_react.default.createElement("img", {
onClick: onClick,
key: "preview",
alt: "",
src: (0, _getDataUrl.getDataUrlFromBase64)(metaData.preview),
className: 'cc__image__preview' + (onClick ? " cc__image--clickable" : "")
}), /*#__PURE__*/_react.default.createElement("div", {
className: "cc__image__wait-cursor",
key: "waitCursor"
}, /*#__PURE__*/_react.default.createElement(_SmallWaitCursor.default, {
show: !ready,
showBackground: false
}))] : null);
}
}
exports.default = Image;
Image.format = {
LANDSCAPE: 1,
PORTRAIT: 2
};
Image.imageMetaData = {};
Image.propTypes = {
// eslint-disable-next-line react/require-default-props
image: (0, _isServer.isServer)() ? _propTypes.default.any.isRequired : _propTypes.default.oneOfType([_propTypes.default.instanceOf(File), _propTypes.default.string]).isRequired,
onClick: _propTypes.default.func,
moreImages: _propTypes.default.number,
className: _propTypes.default.string,
classNameLandscape: _propTypes.default.string,
classNamePortrait: _propTypes.default.string,
style: _propTypes.default.object,
stylePortrait: _propTypes.default.object,
styleLandscape: _propTypes.default.object,
preventParams: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape({
width: _propTypes.default.bool,
height: _propTypes.default.bool,
format: _propTypes.default.bool
})])
};
Image.defaultProps = {
moreImages: 0,
onClick: null,
className: '',
classNameLandscape: '',
classNamePortrait: '',
style: {},
stylePortrait: {},
styleLandscape: {},
preventParams: {}
};
Image.displayName = 'Image';
//# sourceMappingURL=Image.js.map