fastlion-amis
Version:
一种MIS页面生成工具
275 lines (274 loc) • 14.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageGallery = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var theme_1 = require("../theme");
var helper_1 = require("../utils/helper");
var Modal_1 = (0, tslib_1.__importDefault)(require("./Modal"));
var icons_1 = require("./icons");
var locale_1 = require("../locale");
var UnionImgContent_1 = (0, tslib_1.__importDefault)(require("./Lion/UnionImgContent"));
var ViewerUtils_1 = (0, tslib_1.__importDefault)(require("./Lion/ViewerUtils"));
var MediaShowList_1 = (0, tslib_1.__importDefault)(require("./Lion/MediaShowList"));
var msgsub_1 = (0, tslib_1.__importDefault)(require("../renderers/Lion/utils/msgsub"));
var PdfViewer_1 = (0, tslib_1.__importDefault)(require("../renderers/Lion/components/PdfViewer"));
var ImageViewer_1 = (0, tslib_1.__importDefault)(require("../renderers/Lion/components/ImageViewer"));
// 初始状态
var initState = {
isOpened: false,
index: -1,
items: [],
unionImgShow: false,
unionSelecting: false,
mediaListShow: false,
imgRotate: 0,
selectList: [],
unionList: []
};
var ImageGallery = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ImageGallery, _super);
function ImageGallery() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = (0, tslib_1.__assign)({}, initState);
return _this;
}
ImageGallery.prototype.componentDidUpdate = function (_, prevState) {
var _a = this.state, index = _a.index, unionSelecting = _a.unionSelecting, isOpened = _a.isOpened;
//切换图片的时候清空旋转状态
if (index !== prevState.index) {
var imgRotate = this.computeImgRotate(prevState.imgRotate);
if (imgRotate !== prevState.imgRotate)
this.setState({ imgRotate: imgRotate });
}
// 切换并图选择模式清空selectList
if (unionSelecting !== prevState.unionSelecting) {
this.setState({ selectList: [] });
}
};
ImageGallery.prototype.handleImageEnlarge = function (info) {
this.setState({
isOpened: true,
items: info.list ? info.list : [info],
index: info.index || 0
});
};
ImageGallery.prototype.close = function () {
this.setState((0, tslib_1.__assign)({}, initState));
};
ImageGallery.prototype.prev = function () {
var index = this.state.index;
this.setState({
index: index - 1
});
};
ImageGallery.prototype.next = function () {
var index = this.state.index;
this.setState({
index: index + 1
});
};
ImageGallery.prototype.handleItemClick = function (e) {
var index = parseInt(e.currentTarget.getAttribute('data-index'), 10);
this.setState({
index: index
});
};
// 计算切换文件时 回正的旋转角度
ImageGallery.prototype.computeImgRotate = function (rotate) {
var redundant = rotate % 360;
if (redundant === 0)
return rotate;
if (redundant <= 180)
return rotate - redundant;
else
return rotate + (360 - redundant);
};
// 并图模式-显示对图片进行拼接后的组件
ImageGallery.prototype.handleUnionImgShow = function (show) {
var _a = this.state, selectList = _a.selectList, items = _a.items;
if (show) {
if (selectList.length < 2) {
msgsub_1.default._warning('请至少选择2张图片进行并图');
return;
}
if (selectList.length > 20) {
msgsub_1.default._warning('最多可选20张进行并图');
return;
}
var unionList = items.filter(function (_, mediaIndex) { return selectList.includes(mediaIndex); });
this.setState({
unionImgShow: show,
unionList: unionList
});
}
else {
this.setState({
unionImgShow: show,
unionList: []
});
}
};
// 并图勾选中
ImageGallery.prototype.handleUnionSelecting = function (show) {
this.setState({ unionSelecting: show });
};
// 多选
ImageGallery.prototype.handleMediaListSelect = function (index) {
var _a = this.state, unionSelecting = _a.unionSelecting, selectList = _a.selectList;
if (unionSelecting) {
var newSelectList = (0, tslib_1.__spreadArray)([], selectList, true);
if (newSelectList.includes(index)) {
newSelectList = newSelectList.filter(function (item) { return item !== index; });
}
else {
newSelectList.push(index);
}
this.setState({ selectList: newSelectList });
}
else {
this.setState({ index: index });
}
};
//全选
ImageGallery.prototype.handleSelectAll = function () {
this.setState(function (prev) { return ({ selectList: prev.items.map(function (_, index) { return index; }) }); });
};
//反选
ImageGallery.prototype.handleSelectReverse = function () {
var _a = this.state, selectList = _a.selectList, items = _a.items;
var newSelectList = [];
items.forEach(function (_, index) {
if (!selectList.includes(index))
newSelectList.push(index);
});
this.setState({ selectList: newSelectList });
};
// 图片旋转
ImageGallery.prototype.handleRotate = function (type) {
// 顺时针
var imgRotate = this.state.imgRotate;
if (type === 'clockwise') {
imgRotate += 90;
}
else {
imgRotate -= 90;
}
this.setState({ imgRotate: imgRotate });
};
// 切换缩略图列表是否展示
ImageGallery.prototype.toggleMediaListShow = function () {
this.setState({ mediaListShow: !this.state.mediaListShow });
};
ImageGallery.prototype.render = function () {
var _a = this.props, children = _a.children, cx = _a.classnames, modalContainer = _a.modalContainer;
var _b = this.state, index = _b.index, items = _b.items, mediaListShow = _b.mediaListShow, unionImgShow = _b.unionImgShow, unionSelecting = _b.unionSelecting, selectList = _b.selectList, unionList = _b.unionList, imgRotate = _b.imgRotate;
var __ = this.props.translate;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.cloneElement(children, {
onImageEnlarge: this.handleImageEnlarge
}),
react_1.default.createElement(Modal_1.default, { closeOnEsc: true, size: "full", onHide: this.close, show: this.state.isOpened, contentClassName: cx('ImageGallery'), container: modalContainer },
!unionImgShow && react_1.default.createElement("a", { "data-tooltip": __('Dialog.close'), "data-position": "left", className: cx('ImageGallery-close'), onClick: this.close },
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon" })),
this.state.unionImgShow
? react_1.default.createElement("div", { className: "absoluteCenterWrapper" },
react_1.default.createElement(UnionImgContent_1.default, { unionList: unionList, handleUnionImgShow: this.handleUnionImgShow, onClose: this.close }))
: ~index && items[index]
? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: cx('ImageGallery-title') }, items[index].title),
react_1.default.createElement("div", { className: cx('ImageGallery-main') },
items[index].isNotImg
? react_1.default.createElement(PdfViewer_1.default, { src: items[index].originalSrc })
: react_1.default.createElement(ImageViewer_1.default, { id: "media-picture-viewer", width: '100%', height: '100%', center: true, contain: true },
react_1.default.createElement("img", { src: items[index].originalSrc, style: {
transform: "rotate(" + imgRotate + "deg)",
transition: 'transform 0.8s ease-in-out',
}, alt: "picture", draggable: "false" })),
items.length > 1 ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("a", { className: cx('ImageGallery-prevBtn', index <= 0 ? 'is-disabled' : ''), onClick: this.prev },
react_1.default.createElement(icons_1.Icon, { icon: "prev", className: "icon" })),
react_1.default.createElement("a", { className: cx('ImageGallery-nextBtn', index >= items.length - 1 ? 'is-disabled' : ''), onClick: this.next },
react_1.default.createElement(icons_1.Icon, { icon: "next", className: "icon" })))) : null,
react_1.default.createElement(ViewerUtils_1.default, { mediaList: items, currentIndex: index, mediaListShow: mediaListShow, unionSelecting: unionSelecting, prev: this.prev, next: this.next, handleUnionSelecting: this.handleUnionSelecting, handleRotate: this.handleRotate, toggleMediaListShow: this.toggleMediaListShow }))))
: null,
react_1.default.createElement(MediaShowList_1.default, { mediaList: items, currentIndex: index, mediaListShow: mediaListShow, unionImgShow: unionImgShow, selectList: selectList, unionSelecting: unionSelecting, handleMediaListSelect: this.handleMediaListSelect, handleUnionImgShow: this.handleUnionImgShow, handleUnionSelecting: this.handleUnionSelecting, handleSelectAll: this.handleSelectAll, handleSelectReverse: this.handleSelectReverse }))));
};
var _a;
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [Object]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ImageGallery.prototype, "handleImageEnlarge", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", []),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ImageGallery.prototype, "close", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", []),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ImageGallery.prototype, "prev", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", []),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ImageGallery.prototype, "next", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [typeof (_a = typeof react_1.default !== "undefined" && react_1.default.MouseEvent) === "function" ? _a : Object]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ImageGallery.prototype, "handleItemClick", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [Boolean]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ImageGallery.prototype, "handleUnionImgShow", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [Boolean]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ImageGallery.prototype, "handleUnionSelecting", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [Number]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ImageGallery.prototype, "handleMediaListSelect", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", []),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ImageGallery.prototype, "handleSelectAll", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", []),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ImageGallery.prototype, "handleSelectReverse", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", [String]),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ImageGallery.prototype, "handleRotate", null);
(0, tslib_1.__decorate)([
helper_1.autobind,
(0, tslib_1.__metadata)("design:type", Function),
(0, tslib_1.__metadata)("design:paramtypes", []),
(0, tslib_1.__metadata)("design:returntype", void 0)
], ImageGallery.prototype, "toggleMediaListShow", null);
return ImageGallery;
}(react_1.default.Component));
exports.ImageGallery = ImageGallery;
exports.default = (0, theme_1.themeable)((0, locale_1.localeable)(ImageGallery));
//# sourceMappingURL=./components/ImageGallery.js.map