@fakel/rest-admin
Version:
An application that makes it easier to work with your API
28 lines (27 loc) • 2.03 kB
JavaScript
import React from 'react';
import Modal from 'antd/lib/modal';
import Space from 'antd/lib/space';
import Divider from 'antd/lib/divider';
import Pagination from 'antd/lib/pagination';
import { observer } from 'mobx-react';
import { Image } from './Image';
import { GalleryViewFooter } from './GalleryFooter';
import { useImagesStore } from '../../hooks/useImagesStore';
export var GalleryView = 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();
var handleImageSelect = function (image) {
if (!isMultiple) {
imagesStore.clearSelected();
}
imagesStore.setIsSelected(image, !image.isSelected);
};
return (React.createElement(React.Fragment, null,
React.createElement(Modal, { width: "90%", title: "\u0413\u0430\u043B\u0435\u0440\u0435\u044F", visible: isVisible, onCancel: function () { return setVisible(false); }, footer: React.createElement(GalleryViewFooter, { showSelectAll: showSelectAll, onOk: onOk, setVisible: setVisible, isMultiple: isMultiple, uploadHandler: uploadHandler }) },
React.createElement(Space, { size: 10, wrap: true }, images.map(function (image) { return (React.createElement(Image, { handleImageClick: handleImageSelect, image: image })); })),
React.createElement(Divider, null),
React.createElement(Pagination, { onChange: onPageChange, current: currentPage, total: totalPages, size: "small", showSizeChanger: true, pageSize: perPage, pageSizeOptions: ['2', '10', '15', '20', '50', '100'], onShowSizeChange: onPerPageChange }))));
});