@karaushu/react-fex-gallery
React gallery powered by FEX.net API
Install
npm install --save @karaushu/react-fex-galleryUsage
import ReactFexGallery from '@karaushu/react-fex-gallery';
import React from 'react';
class Example extends React.Component<any, any> {
render() {
return (
<ReactFexGallery
folderName={'Images'}
accessRights={'read'}
images={[]}
count={1000}
onClose={() => console.log('close gallery')}
onReachEnd={() => console.log('load more images')}
onCopyImages={(images) => console.log('images to copy: ', images)}
onDownloadImages={(images) => console.log('images to download: ', images)}
onPrintImages={(images) => console.log('images to print: ', images)}
onDeleteImages={(images) => console.log('images to delete: ', images)}
onShareImage={(image) => console.log('image to share: ', image)}
topViewerPromoBanner={<div>top banner 768x90</div>}
/>
)
}
}##Properties
| Name | Description | ||||
images?: |
Image[] - array of images |
||||
onReachEnd?: |
(fetchAll?: boolean) => Promise(Image[] | undefined) - on scroll bottom fetch more images, return Promise with array of images or undefined for no more data |
||||
apiEndpoint?: |
string - see example 1 for details |
||||
onClose?: |
() => void - on close gallery |
||||
currentIndex?: |
number - set current index of images[]
|
||||
showInfoPanel?: |
boolean; - show right panel with file information at start, default false
|
||||
defaultView?: |
'grid' | 'gallery' | 'viewer', default 'viewer' - for mobile, 'gallery' - desktop |
||||
zIndex?: |
number - set z-index for gallery, default - 999 |
||||
count?: |
number - the number of objects in the folder |
||||
contentText?: |
IContentText - content text for gallery, see interface bellow |
||||
accessRights?: |
'full' | 'read', access rights for folder, default - 'read'
|
||||
folderName: |
string - required, name of current folder |
||||
onToggleViewCallback?: |
(view: Properties['view']) => void - callback on changing view mode |
||||
onCopyImages?: |
(images: Image[]) => void - handler for copy images |
||||
onDownloadImages?: |
(images: Image[]) => void - handler for download images |
||||
onPrintImages?: |
(images: Image[]) => void - handler for print images |
||||
onDeleteImages?: |
(images: Image[]) => Promise - handler for delete images |
||||
onShareImage?: |
(image: Image) => void - handler for share an image |
||||
topViewerPromoBanner?: |
ReactNode - banner with max size 768x90 |
||||
bottomViewerPromoBanner?: |
ReactNode - banner with max size 768x90 |
||||
##Interfaces
####Image
interface Image {
crc32: string,
created_at: number,
download_url: string,
has_children?: boolean,
id: number,
is_dir?: boolean,
is_favorite?: boolean,
is_public: true,
mimetype: string,
name: string,
parent_id: number,
play_url: string,
preview_url: string,
shared_links: string[],
size: number,
updated_at: number,
}####IContentText ####Image
interface IContentText {
highlighted: string,
pluralize: {
image: {
one: string,
two: string,
five: string,
}
},
showHighlighted: string,
showAll: string,
show: string,
clearHighlighted: string,
download: string,
copy: string,
print: string,
fileInfo: string,
delete: string,
search: string,
close: string,
highlightedSearch: string;
loadingImages: string;
fileProperties: string;
size: string;
created: string;
fileExtension: string;
}#####Default interface implementation for IContentText
const defaultContentText: IContentText = {
highlighted: 'Выделено',
clearHighlighted: 'Снять выделение',
pluralize: {
image: {
one: 'изображение',
two: 'изображения',
five: 'изображений',
}
},
showHighlighted: 'Показать выделенные',
showAll: 'Показать все',
show: 'Показать',
download: 'Скачать',
copy: 'Копировать',
print: 'Распечатать',
fileInfo: 'Информация о файле',
delete: 'Удалить',
search: 'Поиск',
close: 'Закрыть',
highlightedSearch: 'Поиск по выделенным',
loadingImages: 'Загрузка изображений...',
fileProperties: 'Свойства файла',
size: 'Размер',
created: 'Создан',
fileExtension: 'Формат файла',
};##Changelog ###0.9.1
- changed styles for topViewerPromoBanner and bottomViewerPromoBanner ###0.9.0 added properties:
- topViewerPromoBanner
- bottomViewerPromoBanner
License
MIT © karaushu