# react-fex-gallery

> React gallery powered by FEX.net API

[![NPM](https://img.shields.io/npm/v/@karaushu/react-fex-gallery.svg)](https://www.npmjs.com/package/react-fex-gallery) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](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)