feat: Add gallery for attachments
Maksim Eltyshev
4 years ago
parent
0be598ca9e
commit
86e4864d1b
@ -1,88 +1,153 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from 'semantic-ui-react';
|
||||
import { Gallery, Item as GalleryItem } from 'react-photoswipe-gallery';
|
||||
import { Button, Grid } from 'semantic-ui-react';
|
||||
import { useToggle } from '../../../lib/hooks';
|
||||
|
||||
import Item from './Item';
|
||||
|
||||
import styles from './Attachments.module.scss';
|
||||
|
||||
const Attachments = React.memo(({ items, onUpdate, onDelete, onCoverUpdate }) => {
|
||||
const [t] = useTranslation();
|
||||
const [isOpened, toggleOpened] = useToggle();
|
||||
|
||||
const handleToggleClick = useCallback(() => {
|
||||
toggleOpened();
|
||||
}, [toggleOpened]);
|
||||
|
||||
const handleCoverSelect = useCallback(
|
||||
(id) => {
|
||||
onCoverUpdate(id);
|
||||
},
|
||||
[onCoverUpdate],
|
||||
);
|
||||
|
||||
const handleCoverDeselect = useCallback(() => {
|
||||
onCoverUpdate(null);
|
||||
}, [onCoverUpdate]);
|
||||
|
||||
const handleUpdate = useCallback(
|
||||
(id, data) => {
|
||||
onUpdate(id, data);
|
||||
},
|
||||
[onUpdate],
|
||||
);
|
||||
|
||||
const handleDelete = useCallback(
|
||||
(id) => {
|
||||
onDelete(id);
|
||||
},
|
||||
[onDelete],
|
||||
);
|
||||
|
||||
const visibleItems = isOpened ? items : items.slice(0, 4);
|
||||
|
||||
return (
|
||||
<>
|
||||
{visibleItems.map((item) => (
|
||||
<Item
|
||||
const INITIALLY_VISIBLE = 4;
|
||||
|
||||
const Attachments = React.memo(
|
||||
({ items, onUpdate, onDelete, onCoverUpdate, onGalleryOpen, onGalleryClose }) => {
|
||||
const [t] = useTranslation();
|
||||
const [isAllVisible, toggleAllVisible] = useToggle();
|
||||
|
||||
const handleCoverSelect = useCallback(
|
||||
(id) => {
|
||||
onCoverUpdate(id);
|
||||
},
|
||||
[onCoverUpdate],
|
||||
);
|
||||
|
||||
const handleCoverDeselect = useCallback(() => {
|
||||
onCoverUpdate(null);
|
||||
}, [onCoverUpdate]);
|
||||
|
||||
const handleUpdate = useCallback(
|
||||
(id, data) => {
|
||||
onUpdate(id, data);
|
||||
},
|
||||
[onUpdate],
|
||||
);
|
||||
|
||||
const handleDelete = useCallback(
|
||||
(id) => {
|
||||
onDelete(id);
|
||||
},
|
||||
[onDelete],
|
||||
);
|
||||
|
||||
const handleBeforeGalleryOpen = useCallback(
|
||||
(gallery) => {
|
||||
onGalleryOpen();
|
||||
|
||||
gallery.on('destroy', () => {
|
||||
onGalleryClose();
|
||||
});
|
||||
},
|
||||
[onGalleryOpen, onGalleryClose],
|
||||
);
|
||||
|
||||
const handleToggleAllVisibleClick = useCallback(() => {
|
||||
toggleAllVisible();
|
||||
}, [toggleAllVisible]);
|
||||
|
||||
const galleryItemsNode = items.map((item, index) => {
|
||||
const props = item.coverUrl
|
||||
? {
|
||||
width: item.imageWidth,
|
||||
height: item.imageHeight,
|
||||
}
|
||||
: {
|
||||
content: (
|
||||
<Grid verticalAlign="middle" className={styles.contentWrapper}>
|
||||
<Grid.Column textAlign="center" className={styles.content}>
|
||||
{t('common.thereIsNoPreviewAvailableForThisAttachment')}
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
),
|
||||
};
|
||||
|
||||
const isVisible = isAllVisible || index < INITIALLY_VISIBLE;
|
||||
|
||||
return (
|
||||
<GalleryItem
|
||||
{...props} // eslint-disable-line react/jsx-props-no-spreading
|
||||
key={item.id}
|
||||
name={item.name}
|
||||
url={item.url}
|
||||
coverUrl={item.coverUrl}
|
||||
createdAt={item.createdAt}
|
||||
isCover={item.isCover}
|
||||
isPersisted={item.isPersisted}
|
||||
onCoverSelect={() => handleCoverSelect(item.id)}
|
||||
onCoverDeselect={handleCoverDeselect}
|
||||
onUpdate={(data) => handleUpdate(item.id, data)}
|
||||
onDelete={() => handleDelete(item.id)}
|
||||
/>
|
||||
))}
|
||||
{items.length > 4 && (
|
||||
<Button
|
||||
fluid
|
||||
content={
|
||||
isOpened
|
||||
? t('action.showFewerAttachments')
|
||||
: t('action.showAllAttachments', {
|
||||
hidden: items.length - visibleItems.length,
|
||||
})
|
||||
original={item.url}
|
||||
caption={item.name}
|
||||
>
|
||||
{({ ref, open }) =>
|
||||
isVisible ? (
|
||||
<Item
|
||||
ref={ref}
|
||||
name={item.name}
|
||||
url={item.url}
|
||||
coverUrl={item.coverUrl}
|
||||
createdAt={item.createdAt}
|
||||
isCover={item.isCover}
|
||||
isPersisted={item.isPersisted}
|
||||
onClick={item.coverUrl ? open : undefined}
|
||||
onCoverSelect={() => handleCoverSelect(item.id)}
|
||||
onCoverDeselect={handleCoverDeselect}
|
||||
onUpdate={(data) => handleUpdate(item.id, data)}
|
||||
onDelete={() => handleDelete(item.id)}
|
||||
/>
|
||||
) : (
|
||||
<span ref={ref} />
|
||||
)
|
||||
}
|
||||
className={styles.toggleButton}
|
||||
onClick={handleToggleClick}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
</GalleryItem>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Gallery
|
||||
withCaption
|
||||
withDownloadButton
|
||||
options={{
|
||||
showHideAnimationType: 'none',
|
||||
closeTitle: '',
|
||||
zoomTitle: '',
|
||||
arrowPrevTitle: '',
|
||||
arrowNextTitle: '',
|
||||
errorMsg: '',
|
||||
}}
|
||||
onBeforeOpen={handleBeforeGalleryOpen}
|
||||
>
|
||||
{galleryItemsNode}
|
||||
</Gallery>
|
||||
{items.length > INITIALLY_VISIBLE && (
|
||||
<Button
|
||||
fluid
|
||||
content={
|
||||
isAllVisible
|
||||
? t('action.showFewerAttachments')
|
||||
: t('action.showAllAttachments', {
|
||||
hidden: items.length - INITIALLY_VISIBLE,
|
||||
})
|
||||
}
|
||||
className={styles.toggleButton}
|
||||
onClick={handleToggleAllVisibleClick}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
Attachments.propTypes = {
|
||||
items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
|
||||
onUpdate: PropTypes.func.isRequired,
|
||||
onDelete: PropTypes.func.isRequired,
|
||||
onCoverUpdate: PropTypes.func.isRequired,
|
||||
onGalleryOpen: PropTypes.func.isRequired,
|
||||
onGalleryClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default Attachments;
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
const path = require('path');
|
||||
const sharp = require('sharp');
|
||||
|
||||
const getConfig = require('../../get-config');
|
||||
|
||||
module.exports.up = async (knex) => {
|
||||
await knex.schema.table('attachment', (table) => {
|
||||
/* Columns */
|
||||
|
||||
table.integer('image_width');
|
||||
table.integer('image_height');
|
||||
});
|
||||
|
||||
const config = await getConfig();
|
||||
const attachments = await knex('attachment');
|
||||
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
for (attachment of attachments) {
|
||||
if (attachment.is_image) {
|
||||
const image = sharp(
|
||||
path.join(config.custom.attachmentsPath, attachment.dirname, attachment.filename),
|
||||
);
|
||||
|
||||
let metadata;
|
||||
try {
|
||||
metadata = await image.metadata(); // eslint-disable-line no-await-in-loop
|
||||
} catch (error) {
|
||||
continue; // eslint-disable-line no-continue
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
await knex('attachment')
|
||||
.update({
|
||||
image_width: metadata.width,
|
||||
image_height: metadata.height,
|
||||
})
|
||||
.where('id', attachment.id);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
module.exports.down = (knex) =>
|
||||
knex.schema.table('attachment', (table) => {
|
||||
table.dropColumns('image_width', 'image_height');
|
||||
});
|
||||
@ -0,0 +1,38 @@
|
||||
const dotenv = require('dotenv');
|
||||
const sails = require('sails');
|
||||
const rc = require('sails/accessible/rc');
|
||||
|
||||
process.chdir(__dirname);
|
||||
dotenv.config();
|
||||
|
||||
const config = rc('sails');
|
||||
|
||||
const getConfigPromise = new Promise((resolve) => {
|
||||
sails.load(
|
||||
{
|
||||
...config,
|
||||
hooks: {
|
||||
...config.hooks,
|
||||
logger: false,
|
||||
request: false,
|
||||
views: false,
|
||||
blueprints: false,
|
||||
responses: false,
|
||||
helpers: false,
|
||||
pubsub: false,
|
||||
policies: false,
|
||||
services: false,
|
||||
security: false,
|
||||
i18n: false,
|
||||
session: false,
|
||||
http: false,
|
||||
userhooks: false,
|
||||
},
|
||||
},
|
||||
() => {
|
||||
resolve(sails.config);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
module.exports = () => getConfigPromise;
|
||||
Loading…
Reference in New Issue