@fakel/rest-admin
Version:
An application that makes it easier to work with your API
34 lines (33 loc) • 2.56 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GalleryView = void 0;
var react_1 = __importDefault(require("react"));
var modal_1 = __importDefault(require("antd/lib/modal"));
var space_1 = __importDefault(require("antd/lib/space"));
var divider_1 = __importDefault(require("antd/lib/divider"));
var pagination_1 = __importDefault(require("antd/lib/pagination"));
var mobx_react_1 = require("mobx-react");
var Image_1 = require("./Image");
var GalleryFooter_1 = require("./GalleryFooter");
var useImagesStore_1 = require("../../hooks/useImagesStore");
exports.GalleryView = mobx_react_1.observer(function (_a) {
var uploadHandler = _a.uploadHandler, isMultiple = _a.isMultiple, images = _a.images, currentPage = _a.currentPage, totalPages = _a.totalPages, perPage = _a.perPage, onPageChange = _a.onPageChange, onPerPageChange = _a.onPerPageChange, isVisible = _a.isVisible, onOk = _a.onOk, setVisible = _a.setVisible, showSelectAll = _a.showSelectAll;
if (!uploadHandler) {
throw new Error('Define upload handler - function (file: RcFile) => any');
}
var imagesStore = useImagesStore_1.useImagesStore();
var handleImageSelect = function (image) {
if (!isMultiple) {
imagesStore.clearSelected();
}
imagesStore.setIsSelected(image, !image.isSelected);
};
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(modal_1.default, { width: "90%", title: "\u0413\u0430\u043B\u0435\u0440\u0435\u044F", visible: isVisible, onCancel: function () { return setVisible(false); }, footer: react_1.default.createElement(GalleryFooter_1.GalleryViewFooter, { showSelectAll: showSelectAll, onOk: onOk, setVisible: setVisible, isMultiple: isMultiple, uploadHandler: uploadHandler }) },
react_1.default.createElement(space_1.default, { size: 10, wrap: true }, images.map(function (image) { return (react_1.default.createElement(Image_1.Image, { handleImageClick: handleImageSelect, image: image })); })),
react_1.default.createElement(divider_1.default, null),
react_1.default.createElement(pagination_1.default, { onChange: onPageChange, current: currentPage, total: totalPages, size: "small", showSizeChanger: true, pageSize: perPage, pageSizeOptions: ['2', '10', '15', '20', '50', '100'], onShowSizeChange: onPerPageChange }))));
});