react-fex-gallery
Version:
React gallery powered by FEX.net API
228 lines (211 loc) • 6.82 kB
Markdown
# react-fex-gallery
> React gallery powered by FEX.net API
[](https://www.npmjs.com/package/react-fex-gallery) [](https://standardjs.com)
## 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<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
<table>
<tr>
<td colspan="2"><b>Name</b></td>
<td colspan="4"><b>Description</b></td>
</tr>
<tr>
<td colspan="2"><code>images?:</code></td>
<td colspan="4"><code>Image[]</code> - array of images</td>
</tr>
<tr>
<td colspan="2"><code>onReachEnd?:</code></td>
<td colspan="4"><code>(fetchAll?: boolean) => Promise(Image[] | undefined)</code> - on scroll bottom fetch more images, return <code>Promise</code> with array of images or <code>undefined</code> for no more data</td>
</tr>
<tr>
<td colspan="2"><code>apiEndpoint?:</code></td>
<td colspan="4"><code>string</code> - see example 1 for details</td>
</tr>
<tr>
<td colspan="2"><code>onClose?:</code></td>
<td colspan="4"><code>() => void</code> - on close gallery</td>
</tr>
<tr>
<td colspan="2"><code>currentIndex?:</code></td>
<td colspan="4"><code>number</code> - set current index of <code>images[]</code></td>
</tr>
<tr>
<td colspan="2"><code>showInfoPanel?:</code></td>
<td colspan="4"><code>boolean;</code> - show right panel with file information at start, default <code>false</code></td>
</tr>
<tr>
<td colspan="2"><code>defaultView?:</code></td>
<td colspan="4"><code>'grid' | 'gallery' | 'viewer'</code>, default <code>'viewer'</code> - for mobile, <code>'gallery'</code> - desktop</td>
</tr>
<tr>
<td colspan="2"><code>zIndex?:</code></td>
<td colspan="4"><code>number</code> - set <code>z-index</code> for gallery, default - 999</td>
</tr>
<tr>
<td colspan="2"><code>count?:</code></td>
<td colspan="4"><code>number</code> - the number of objects in the folder</td>
</tr>
<tr>
<td colspan="2"><code>contentText?:</code></td>
<td colspan="4"><code>IContentText</code> - content text for gallery, see interface bellow</td>
</tr>
<tr>
<td colspan="2"><code>accessRights?:</code></td>
<td colspan="4"><code>'full' | 'read'</code>, access rights for folder, default - <code>'read'</code></td>
</tr>
<tr>
<td colspan="2"><code>folderName:</code></td>
<td colspan="4"><code>string</code> - required, name of current folder</td>
</tr>
<tr>
<td colspan="2"><code>onToggleViewCallback?:</code></td>
<td colspan="4"><code>(view: Properties['view']) => void</code> - callback on changing view mode</td>
</tr>
<tr>
<td colspan="2"><code>onCopyImages?:</code></td>
<td colspan="4"><code>(images: Image[]) => void</code> - handler for copy images</td>
</tr>
<tr>
<td colspan="2"><code>onDownloadImages?:</code></td>
<td colspan="4"><code>(images: Image[]) => void</code> - handler for download images</td>
</tr>
<tr>
<td colspan="2"><code>onPrintImages?:</code></td>
<td colspan="4"><code>(images: Image[]) => void</code> - handler for print images</td>
</tr>
<tr>
<td colspan="2"><code>onDeleteImages?:</code></td>
<td colspan="4"><code>(images: Image[]) => Promise<{ count?: number, newIndex?: number, images?: Image[] } | undefined></code> - handler for delete images</td>
</tr>
<tr>
<td colspan="2"><code>onShareImage?:</code></td>
<td colspan="4"><code>(image: Image) => void</code> - handler for share an image</td>
</tr>
<tr>
<td colspan="2"><code>topViewerPromoBanner?:</code></td>
<td colspan="4"><code>ReactNode</code> - banner with max size 768x90</td>
</tr>
<tr>
<td colspan="2"><code>bottomViewerPromoBanner?:</code></td>
<td colspan="4"><code>ReactNode</code> - banner with max size 768x90</td>
</tr>
</table>
##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 <code>IContentText</code>
```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](https://github.com/karaushu)