react-fex-gallery

> React gallery powered by FEX.net API

 

Install

``bash
npm install --save react-fex-gallery
`

Usage

`tsx
import ReactFexGallery from 'react-fex-gallery';
import React from 'react';

class Example extends React.Component {
render() {
return (
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={

}
/>
)
}
}
`

##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<{ count?: number, newIndex?: number, images?: Image[] } | undefined> - 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
`ts
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
`ts
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
`ts
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