zent
Version:
一套前端设计语言和基于React的实现
128 lines (127 loc) • 6.76 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } from 'react';
import cx from 'classnames';
import debounce from '../utils/debounce';
import { I18nReceiver as Receiver } from '../i18n';
import Portal from '../portal';
import Icon from '../icon';
var TRANSITION_DURATION = 500;
var Image = (function (_super) {
__extends(Image, _super);
function Image() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
imageIndex: _this.props.index || 0,
imageStyle: {},
rotateIndex: 0,
scaleTag: false,
};
_this.onMaskClick = function (e) {
if (e.target === e.currentTarget) {
_this.props.onClose();
}
};
_this.onClose = function () {
_this.props.onClose();
};
_this.handlePreviousAction = function () {
var imagesNum = _this.props.images.length;
var imageIndex = _this.state.imageIndex;
imageIndex = (imageIndex - 1 + imagesNum) % imagesNum;
_this.setState({
imageIndex: imageIndex,
imageStyle: {
transform: 'rotate(0deg)',
},
rotateIndex: 0,
scaleTag: false,
});
};
_this.handleNextAction = function () {
var imagesNum = _this.props.images.length;
var imageIndex = _this.state.imageIndex;
imageIndex = (imageIndex + 1) % imagesNum;
_this.setState({
imageIndex: imageIndex,
imageStyle: {
transform: 'rotate(0deg)',
},
rotateIndex: 0,
scaleTag: false,
});
};
_this.handleRotate = function () {
var scaleTag = _this.state.scaleTag;
var scaleRatio = _this.props.scaleRatio;
if (scaleRatio < 1) {
throw new Error("Invalid prop `scaleRatio` in previewImage, it should be greater than 1.");
}
var rotateIndex = _this.state.rotateIndex;
var deg = 90 + rotateIndex * 90;
rotateIndex++;
var transformStyle = scaleTag
? "rotate(" + deg + "deg) scale(" + scaleRatio + ")"
: "rotate(" + deg + "deg) scale(1)";
_this.setState({
imageStyle: {
transform: transformStyle,
transitionDuration: TRANSITION_DURATION + "ms",
},
rotateIndex: rotateIndex,
});
};
_this.handleScale = function () {
var _a = _this.state, rotateIndex = _a.rotateIndex, scaleTag = _a.scaleTag;
var scaleRatio = _this.props.scaleRatio;
if (scaleRatio < 1) {
throw new Error("Invalid prop `scaleRatio` in previewImage, it should be greater than 1.");
}
var deg = rotateIndex * 90;
var transformStyle = scaleTag
? "rotate(" + deg + "deg) scale(1)"
: "rotate(" + deg + "deg) scale(" + scaleRatio + ")";
_this.setState({
imageStyle: {
transform: transformStyle,
transitionDuration: TRANSITION_DURATION + "ms",
},
scaleTag: !scaleTag,
});
};
return _this;
}
Image.prototype.render = function () {
var _this = this;
var _a = this.props, images = _a.images, showRotateBtn = _a.showRotateBtn, className = _a.className;
var _b = this.state, scaleTag = _b.scaleTag, imageIndex = _b.imageIndex, imageStyle = _b.imageStyle;
var imageClassName = cx('zent-image-p-show-image', {
'zent-image-p-is-zooming': scaleTag,
});
return (_jsx(Portal, __assign({ visible: true, onClose: this.onClose, className: cx('zent-image-p-anchor', className), closeOnESC: true, blockPageScroll: true }, { children: _jsx("div", __assign({ className: "zent-image-p-backdrop", "data-zv": '10.0.17' }, { children: _jsxs("div", __assign({ className: "zent-image-p-wrap", "data-zv": '10.0.17' }, { children: [_jsx("div", __assign({ className: "zent-image-p-close", onClick: this.onClose, "data-zv": '10.0.17' }, { children: _jsx(Icon, { type: "close" }, void 0) }), void 0), _jsx(Receiver, __assign({ componentName: "PreviewImage" }, { children: function (i18n) { return (_jsx("div", __assign({ className: "zent-image-p-body", onClick: _this.onMaskClick, "data-zv": '10.0.17' }, { children: images.map(function (image, index) {
if (index === imageIndex) {
return (_jsx("img", { className: imageClassName, onClick: _this.handleScale, style: imageStyle, src: image, alt: i18n.alt, "data-zv": '10.0.17' }, index));
}
return null;
}) }), void 0)); } }), void 0), _jsx(Receiver, __assign({ componentName: "PreviewImage" }, { children: function (i18n) {
var needPager = images.length > 1;
var footerCxs = cx('zent-image-p-footer', {
'zent-image-p-show-rotate-btn': showRotateBtn,
'zent-image-p-footer-paging': needPager,
});
var rotateCxs = cx('zent-image-p-action', {
'zent-image-p-rotate-action': !needPager,
});
return (_jsxs("div", __assign({ className: footerCxs, "data-zv": '10.0.17' }, { children: [needPager && (_jsx("span", __assign({ className: "zent-image-p-action", onClick: _this.handlePreviousAction, "data-zv": '10.0.17' }, { children: i18n.prev }), void 0)), showRotateBtn && (_jsx("span", __assign({ className: rotateCxs, onClick: debounce(_this.handleRotate, TRANSITION_DURATION, { immediate: true }), "data-zv": '10.0.17' }, { children: i18n.rotate }), void 0)), needPager && (_jsx("span", __assign({ className: "zent-image-p-action", onClick: _this.handleNextAction, "data-zv": '10.0.17' }, { children: i18n.next }), void 0))] }), void 0));
} }), void 0)] }), void 0) }), void 0) }), void 0));
};
Image.defaultProps = {
className: '',
showRotateBtn: true,
images: [],
index: 0,
scaleRatio: 1.5,
};
return Image;
}(Component));
export default Image;