mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
Merge branch 'master' into 15-use-cra-or-nextjs
# Conflicts: # src/components/node/CommentForm/index.tsx # src/utils/node.ts
This commit is contained in:
Fedor Katurov
commit
332d09e3bd
46 changed files with 936 additions and 487 deletions
|
|
@ -1,74 +0,0 @@
|
|||
import React, { FC, HTMLAttributes, memo } from 'react';
|
||||
import { CommentWrapper } from '~/components/containers/CommentWrapper';
|
||||
import { ICommentGroup, IComment } from '~/redux/types';
|
||||
import { CommentContent } from '~/components/node/CommentContent';
|
||||
import styles from './styles.module.scss';
|
||||
import { nodeLockComment, nodeEditComment } from '~/redux/node/actions';
|
||||
import { INodeState } from '~/redux/node/reducer';
|
||||
import { CommentForm } from '../CommentForm';
|
||||
import { CommendDeleted } from '../CommendDeleted';
|
||||
import * as MODAL_ACTIONS from '~/redux/modal/actions';
|
||||
|
||||
type IProps = HTMLAttributes<HTMLDivElement> & {
|
||||
is_empty?: boolean;
|
||||
is_loading?: boolean;
|
||||
comment_group?: ICommentGroup;
|
||||
comment_data: INodeState['comment_data'];
|
||||
is_same?: boolean;
|
||||
can_edit?: boolean;
|
||||
onDelete: typeof nodeLockComment;
|
||||
onEdit: typeof nodeEditComment;
|
||||
modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe;
|
||||
};
|
||||
|
||||
const Comment: FC<IProps> = memo(
|
||||
({
|
||||
comment_group,
|
||||
comment_data,
|
||||
is_empty,
|
||||
is_same,
|
||||
is_loading,
|
||||
className,
|
||||
can_edit,
|
||||
onDelete,
|
||||
onEdit,
|
||||
modalShowPhotoswipe,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<CommentWrapper
|
||||
className={className}
|
||||
is_empty={is_empty}
|
||||
is_loading={is_loading}
|
||||
user={comment_group.user}
|
||||
is_same={is_same}
|
||||
{...props}
|
||||
>
|
||||
<div className={styles.wrap}>
|
||||
{comment_group.comments.map(comment => {
|
||||
if (comment.deleted_at) {
|
||||
return <CommendDeleted id={comment.id} onDelete={onDelete} key={comment.id} />;
|
||||
}
|
||||
|
||||
if (Object.prototype.hasOwnProperty.call(comment_data, comment.id)) {
|
||||
return <CommentForm id={comment.id} key={comment.id} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<CommentContent
|
||||
comment={comment}
|
||||
key={comment.id}
|
||||
can_edit={can_edit}
|
||||
onDelete={onDelete}
|
||||
onEdit={onEdit}
|
||||
modalShowPhotoswipe={modalShowPhotoswipe}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CommentWrapper>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export { Comment };
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
@keyframes appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.wrap {
|
||||
animation: appear 1s;
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
import React, { FC, useMemo, memo, createElement, useCallback, Fragment } from 'react';
|
||||
import { IComment, IFile } from '~/redux/types';
|
||||
import { path } from 'ramda';
|
||||
import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import styles from './styles.module.scss';
|
||||
import { UPLOAD_TYPES } from '~/redux/uploads/constants';
|
||||
import { assocPath } from 'ramda';
|
||||
import { append } from 'ramda';
|
||||
import reduce from 'ramda/es/reduce';
|
||||
import { AudioPlayer } from '~/components/media/AudioPlayer';
|
||||
import classnames from 'classnames';
|
||||
import { PRESETS } from '~/constants/urls';
|
||||
import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
|
||||
import { nodeLockComment, nodeEditComment } from '~/redux/node/actions';
|
||||
import { CommentMenu } from '../CommentMenu';
|
||||
import * as MODAL_ACTIONS from '~/redux/modal/actions';
|
||||
|
||||
interface IProps {
|
||||
comment: IComment;
|
||||
can_edit: boolean;
|
||||
onDelete: typeof nodeLockComment;
|
||||
onEdit: typeof nodeEditComment;
|
||||
modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe;
|
||||
}
|
||||
|
||||
const CommentContent: FC<IProps> = memo(
|
||||
({ comment, can_edit, onDelete, onEdit, modalShowPhotoswipe }) => {
|
||||
const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
|
||||
() =>
|
||||
reduce(
|
||||
(group, file) => assocPath([file.type], append(file, group[file.type]), group),
|
||||
{},
|
||||
comment.files
|
||||
),
|
||||
[comment]
|
||||
);
|
||||
|
||||
const onLockClick = useCallback(() => {
|
||||
onDelete(comment.id, !comment.deleted_at);
|
||||
}, [comment, onDelete]);
|
||||
|
||||
const onEditClick = useCallback(() => {
|
||||
onEdit(comment.id);
|
||||
}, [comment, onEdit]);
|
||||
|
||||
const menu = useMemo(
|
||||
() => can_edit && <CommentMenu onDelete={onLockClick} onEdit={onEditClick} />,
|
||||
[can_edit, comment, onEditClick, onLockClick]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
{comment.text && (
|
||||
<Group className={classnames(styles.block, styles.block_text)}>
|
||||
{menu}
|
||||
|
||||
<Group className={styles.renderers}>
|
||||
{formatCommentText(path(['user', 'username'], comment), comment.text).map(
|
||||
(block, key) =>
|
||||
COMMENT_BLOCK_RENDERERS[block.type] &&
|
||||
createElement(COMMENT_BLOCK_RENDERERS[block.type], { block, key })
|
||||
)}
|
||||
</Group>
|
||||
|
||||
<div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
|
||||
</Group>
|
||||
)}
|
||||
|
||||
{groupped.image && groupped.image.length > 0 && (
|
||||
<div className={classnames(styles.block, styles.block_image)}>
|
||||
{menu}
|
||||
|
||||
<div className={styles.images}>
|
||||
{groupped.image.map((file, index) => (
|
||||
<div key={file.id} onClick={() => modalShowPhotoswipe(groupped.image, index)}>
|
||||
<img src={getURL(file, PRESETS['600'])} alt={file.name} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{groupped.audio && groupped.audio.length > 0 && (
|
||||
<Fragment>
|
||||
{groupped.audio.map(file => (
|
||||
<div className={classnames(styles.block, styles.block_audio)} key={file.id}>
|
||||
{menu}
|
||||
|
||||
<AudioPlayer file={file} />
|
||||
|
||||
<div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
|
||||
</div>
|
||||
))}
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export { CommentContent };
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
@import 'flexbin/flexbin.scss';
|
||||
|
||||
.wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lock,
|
||||
.edit {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: $radius;
|
||||
transform: translate(10px, 0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
transition: opacity 0.25s, transform 0.25s;
|
||||
cursor: pointer;
|
||||
background: $red;
|
||||
z-index: 2;
|
||||
|
||||
& > div {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
right: 0;
|
||||
border-radius: 0 0 0 $radius;
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
background: transparentize($red, $amount: 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.edit {
|
||||
top: 28px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.block {
|
||||
@include outer_shadow();
|
||||
min-height: $comment_height;
|
||||
// box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, inset rgba(0, 0, 0, 0.1) -1px -1px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
padding-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
// padding: $gap 0;
|
||||
|
||||
&:first-child {
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.lock,
|
||||
.edit {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
touch-action: initial;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block_audio {
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.block_image {
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
.date {
|
||||
background: transparentize($color: $content_bg, $amount: 0.2);
|
||||
border-radius: $radius 0 $radius 0;
|
||||
color: transparentize(white, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.block_text {
|
||||
padding: $gap / 2 0;
|
||||
}
|
||||
|
||||
.date {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font: $font_12_regular;
|
||||
color: transparentize($color: white, $amount: 0.8);
|
||||
padding: 0 6px 2px;
|
||||
border-radius: 0 0 $radius 0;
|
||||
z-index: 2;
|
||||
background: $comment_bg;
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.images {
|
||||
@include flexbin(240px, 5px);
|
||||
|
||||
img {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.audios {
|
||||
& > div {
|
||||
height: $comment_height;
|
||||
border-radius: $radius;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.renderers {
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
|
@ -1,336 +0,0 @@
|
|||
import React, { FC, KeyboardEventHandler, memo, useCallback, useEffect, useMemo } from 'react';
|
||||
import { Textarea } from '~/components/input/Textarea';
|
||||
import styles from './styles.module.scss';
|
||||
import { Filler } from '~/components/containers/Filler';
|
||||
import { Button } from '~/components/input/Button';
|
||||
import { assocPath } from 'ramda';
|
||||
import { IFile, IFileWithUUID, InputHandler } from '~/redux/types';
|
||||
import { connect } from 'react-redux';
|
||||
import * as NODE_ACTIONS from '~/redux/node/actions';
|
||||
import { selectNode } from '~/redux/node/selectors';
|
||||
import { LoaderCircle } from '~/components/input/LoaderCircle';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from '~/redux/uploads/constants';
|
||||
import uuid from 'uuid4';
|
||||
import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
|
||||
import { selectUploads } from '~/redux/uploads/selectors';
|
||||
import { IState } from '~/redux/store';
|
||||
import { getFileType } from '~/utils/uploader';
|
||||
import { ButtonGroup } from '~/components/input/ButtonGroup';
|
||||
import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
|
||||
import { moveArrItem } from '~/utils/fn';
|
||||
import { SortEnd } from 'react-sortable-hoc';
|
||||
import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
|
||||
import { getRandomPhrase } from '~/constants/phrases';
|
||||
import { ERROR_LITERAL } from '~/constants/errors';
|
||||
|
||||
const mapStateToProps = (state: IState) => ({
|
||||
node: selectNode(state),
|
||||
uploads: selectUploads(state),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
nodePostComment: NODE_ACTIONS.nodePostComment,
|
||||
nodeCancelCommentEdit: NODE_ACTIONS.nodeCancelCommentEdit,
|
||||
nodeSetCommentData: NODE_ACTIONS.nodeSetCommentData,
|
||||
uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
|
||||
};
|
||||
|
||||
type IProps = ReturnType<typeof mapStateToProps> &
|
||||
typeof mapDispatchToProps & {
|
||||
id: number;
|
||||
is_before?: boolean;
|
||||
};
|
||||
|
||||
const CommentFormUnconnected: FC<IProps> = memo(
|
||||
({
|
||||
node: { comment_data, is_sending_comment },
|
||||
uploads: { statuses, files },
|
||||
id,
|
||||
is_before = false,
|
||||
nodePostComment,
|
||||
nodeSetCommentData,
|
||||
uploadUploadFiles,
|
||||
nodeCancelCommentEdit,
|
||||
}) => {
|
||||
const onInputChange = useCallback(
|
||||
event => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!event.target.files || !event.target.files.length) return;
|
||||
|
||||
const items: IFileWithUUID[] = Array.from(event.target.files).map(
|
||||
(file: File): IFileWithUUID => ({
|
||||
file,
|
||||
temp_id: uuid(),
|
||||
subject: UPLOAD_SUBJECTS.COMMENT,
|
||||
target: UPLOAD_TARGETS.COMMENTS,
|
||||
type: getFileType(file),
|
||||
})
|
||||
);
|
||||
|
||||
const temps = items.map(file => file.temp_id);
|
||||
|
||||
nodeSetCommentData(
|
||||
id,
|
||||
assocPath(['temp_ids'], [...comment_data[id].temp_ids, ...temps], comment_data[id])
|
||||
);
|
||||
uploadUploadFiles(items);
|
||||
},
|
||||
[uploadUploadFiles, comment_data, id, nodeSetCommentData]
|
||||
);
|
||||
|
||||
const onInput = useCallback<InputHandler>(
|
||||
text => {
|
||||
nodeSetCommentData(id, assocPath(['text'], text, comment_data[id]));
|
||||
},
|
||||
[nodeSetCommentData, comment_data, id]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const temp_ids = (comment_data && comment_data[id] && comment_data[id].temp_ids) || [];
|
||||
const added_files = temp_ids
|
||||
.map(temp_uuid => statuses[temp_uuid] && statuses[temp_uuid].uuid)
|
||||
.map(el => !!el && files[el])
|
||||
.filter(el => !!el && !comment_data[id].files.some(file => file && file.id === el.id));
|
||||
|
||||
const filtered_temps = temp_ids.filter(
|
||||
temp_id =>
|
||||
statuses[temp_id] &&
|
||||
(!statuses[temp_id].uuid || !added_files.some(file => file.id === statuses[temp_id].uuid))
|
||||
);
|
||||
|
||||
if (added_files.length) {
|
||||
nodeSetCommentData(id, {
|
||||
...comment_data[id],
|
||||
temp_ids: filtered_temps,
|
||||
files: [...comment_data[id].files, ...added_files],
|
||||
});
|
||||
}
|
||||
}, [statuses, files]);
|
||||
|
||||
const comment = comment_data[id];
|
||||
|
||||
const is_uploading_files = useMemo(() => comment.temp_ids.length > 0, [comment.temp_ids]);
|
||||
|
||||
const onSubmit = useCallback(
|
||||
event => {
|
||||
if (event) event.preventDefault();
|
||||
if (is_uploading_files || is_sending_comment) return;
|
||||
|
||||
nodePostComment(id, is_before);
|
||||
},
|
||||
[nodePostComment, id, is_before, is_uploading_files, is_sending_comment]
|
||||
);
|
||||
|
||||
const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
|
||||
({ ctrlKey, key }) => {
|
||||
if (!!ctrlKey && key === 'Enter') onSubmit(null);
|
||||
},
|
||||
[onSubmit]
|
||||
);
|
||||
|
||||
const images = useMemo(
|
||||
() => comment.files.filter(file => file && file.type === UPLOAD_TYPES.IMAGE),
|
||||
[comment.files]
|
||||
);
|
||||
|
||||
const locked_images = useMemo(
|
||||
() =>
|
||||
comment.temp_ids
|
||||
.filter(temp => statuses[temp] && statuses[temp].type === UPLOAD_TYPES.IMAGE)
|
||||
.map(temp_id => statuses[temp_id]),
|
||||
[statuses, comment.temp_ids]
|
||||
);
|
||||
|
||||
const audios = useMemo(
|
||||
() => comment.files.filter(file => file && file.type === UPLOAD_TYPES.AUDIO),
|
||||
[comment.files]
|
||||
);
|
||||
|
||||
const locked_audios = useMemo(
|
||||
() =>
|
||||
comment.temp_ids
|
||||
.filter(temp => statuses[temp] && statuses[temp].type === UPLOAD_TYPES.AUDIO)
|
||||
.map(temp_id => statuses[temp_id]),
|
||||
[statuses, comment.temp_ids]
|
||||
);
|
||||
|
||||
const onFileDrop = useCallback(
|
||||
(fileId: IFile['id']) => {
|
||||
nodeSetCommentData(
|
||||
id,
|
||||
assocPath(
|
||||
['files'],
|
||||
comment.files.filter(file => file.id != fileId),
|
||||
comment_data[id]
|
||||
)
|
||||
);
|
||||
},
|
||||
[comment_data, id, nodeSetCommentData]
|
||||
);
|
||||
|
||||
const onTitleChange = useCallback(
|
||||
(fileId: IFile['id'], title: IFile['metadata']['title']) => {
|
||||
nodeSetCommentData(
|
||||
id,
|
||||
assocPath(
|
||||
['files'],
|
||||
comment.files.map(file =>
|
||||
file.id === fileId ? { ...file, metadata: { ...file.metadata, title } } : file
|
||||
),
|
||||
comment_data[id]
|
||||
)
|
||||
);
|
||||
},
|
||||
[comment_data, id, nodeSetCommentData]
|
||||
);
|
||||
|
||||
const onImageMove = useCallback(
|
||||
({ oldIndex, newIndex }: SortEnd) => {
|
||||
nodeSetCommentData(
|
||||
id,
|
||||
assocPath(
|
||||
['files'],
|
||||
[
|
||||
...audios,
|
||||
...(moveArrItem(
|
||||
oldIndex,
|
||||
newIndex,
|
||||
images.filter(file => !!file)
|
||||
) as IFile[]),
|
||||
],
|
||||
comment_data[id]
|
||||
)
|
||||
);
|
||||
},
|
||||
[images, audios, comment_data, nodeSetCommentData]
|
||||
);
|
||||
|
||||
const onAudioMove = useCallback(
|
||||
({ oldIndex, newIndex }: SortEnd) => {
|
||||
nodeSetCommentData(
|
||||
id,
|
||||
assocPath(
|
||||
['files'],
|
||||
[
|
||||
...images,
|
||||
...(moveArrItem(
|
||||
oldIndex,
|
||||
newIndex,
|
||||
audios.filter(file => !!file)
|
||||
) as IFile[]),
|
||||
],
|
||||
comment_data[id]
|
||||
)
|
||||
);
|
||||
},
|
||||
[images, audios, comment_data, nodeSetCommentData]
|
||||
);
|
||||
|
||||
const onCancelEdit = useCallback(() => {
|
||||
nodeCancelCommentEdit(id);
|
||||
}, [nodeCancelCommentEdit, comment.id]);
|
||||
|
||||
const placeholder = getRandomPhrase('SIMPLE');
|
||||
|
||||
const hasImageAttaches = images.length > 0 || locked_images.length > 0;
|
||||
const hasAudioAttaches = audios.length > 0 || locked_audios.length > 0;
|
||||
const hasAttaches = hasImageAttaches || hasAudioAttaches;
|
||||
|
||||
const clearError = useCallback(() => nodeSetCommentData(id, { error: '' }), [
|
||||
id,
|
||||
nodeSetCommentData,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (comment.error) clearError();
|
||||
}, [comment.files, comment.text]);
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit} className={styles.wrap}>
|
||||
<div className={styles.input}>
|
||||
<Textarea
|
||||
value={comment.text}
|
||||
handler={onInput}
|
||||
onKeyDown={onKeyDown}
|
||||
disabled={is_sending_comment}
|
||||
placeholder={placeholder}
|
||||
minRows={2}
|
||||
/>
|
||||
|
||||
{comment.error && (
|
||||
<div className={styles.error} onClick={clearError}>
|
||||
{ERROR_LITERAL[comment.error] || comment.error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{hasAttaches && (
|
||||
<div className={styles.attaches}>
|
||||
{hasImageAttaches && (
|
||||
<SortableImageGrid
|
||||
onDrop={onFileDrop}
|
||||
onSortEnd={onImageMove}
|
||||
axis="xy"
|
||||
items={images}
|
||||
locked={locked_images}
|
||||
pressDelay={50}
|
||||
helperClass={styles.helper}
|
||||
size={120}
|
||||
/>
|
||||
)}
|
||||
|
||||
{hasAudioAttaches && (
|
||||
<SortableAudioGrid
|
||||
items={audios}
|
||||
onDrop={onFileDrop}
|
||||
onTitleChange={onTitleChange}
|
||||
onSortEnd={onAudioMove}
|
||||
axis="y"
|
||||
locked={locked_audios}
|
||||
pressDelay={50}
|
||||
helperClass={styles.helper}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Group horizontal className={styles.buttons}>
|
||||
<ButtonGroup>
|
||||
<Button iconLeft="photo" size="small" color="gray" iconOnly>
|
||||
<input type="file" onInput={onInputChange} multiple accept="image/*" />
|
||||
</Button>
|
||||
|
||||
<Button iconRight="audio" size="small" color="gray" iconOnly>
|
||||
<input type="file" onInput={onInputChange} multiple accept="audio/*" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<Filler />
|
||||
|
||||
{(is_sending_comment || is_uploading_files) && <LoaderCircle size={20} />}
|
||||
|
||||
{id !== 0 && (
|
||||
<Button size="small" color="link" type="button" onClick={onCancelEdit}>
|
||||
Отмена
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
color="gray"
|
||||
iconRight={id === 0 ? 'enter' : 'check'}
|
||||
disabled={is_sending_comment || is_uploading_files}
|
||||
>
|
||||
{id === 0 ? 'Сказать' : 'Сохранить'}
|
||||
</Button>
|
||||
</Group>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
const CommentForm = connect(mapStateToProps, mapDispatchToProps)(CommentFormUnconnected);
|
||||
|
||||
export { CommentForm, CommentFormUnconnected };
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
textarea {
|
||||
min-height: 62px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
@include outer_shadow();
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding: ($gap / 2) ($gap / 2 + 1px);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
@include outer_shadow();
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: transparentize(black, 0.8);
|
||||
padding: $gap / 2;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.uploads {
|
||||
padding: ($gap / 2);
|
||||
display: grid;
|
||||
grid-column-gap: $gap / 2;
|
||||
grid-row-gap: $gap / 2;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
}
|
||||
|
||||
.attaches {
|
||||
@include outer_shadow();
|
||||
}
|
||||
|
||||
.error {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
background: $red;
|
||||
z-index: 10;
|
||||
font: $font_12_regular;
|
||||
box-sizing: border-box;
|
||||
padding: 0 $gap;
|
||||
border-radius: 4px 4px 0 0;
|
||||
transform: translate(-50%, 0);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import React, { FC, useState, useCallback } from 'react';
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface IProps {
|
||||
onEdit: () => void;
|
||||
onDelete: () => void;
|
||||
}
|
||||
|
||||
const CommentMenu: FC<IProps> = ({ onEdit, onDelete }) => {
|
||||
const [is_menu_opened, setIsMenuOpened] = useState(false);
|
||||
|
||||
const onFocus = useCallback(() => setIsMenuOpened(true), [setIsMenuOpened]);
|
||||
const onBlur = useCallback(() => setIsMenuOpened(false), [setIsMenuOpened]);
|
||||
|
||||
return (
|
||||
<div className={styles.wrap} onFocus={onFocus} onBlur={onBlur} tabIndex={-1}>
|
||||
<div className={styles.dot} />
|
||||
|
||||
{is_menu_opened && (
|
||||
<div className={styles.menu}>
|
||||
<div className={styles.item} onMouseDown={onEdit}>
|
||||
Редактировать
|
||||
</div>
|
||||
<div className={styles.item} onMouseDown={onDelete}>
|
||||
Удалить
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CommentMenu };
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.wrap {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
z-index: 10;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.dot {
|
||||
background: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
background: transparentize(black, 0.7);
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
transition: background 0.25s;
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 6;
|
||||
white-space: nowrap;
|
||||
|
||||
animation: appear 0.25s forwards;
|
||||
}
|
||||
|
||||
.item {
|
||||
user-select: none;
|
||||
font: $font_12_semibold;
|
||||
text-transform: uppercase;
|
||||
padding: 8px $gap;
|
||||
background: $content_bg;
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@ import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
|
|||
import { selectUploads } from '~/redux/uploads/selectors';
|
||||
import { IState } from '~/redux/store';
|
||||
import { selectUser, selectAuthUser } from '~/redux/auth/selectors';
|
||||
import { CommentForm } from '../CommentForm';
|
||||
import { CommentForm } from '../../comment/CommentForm';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
user: selectAuthUser(state),
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { FC, useMemo, memo } from 'react';
|
||||
import { Comment } from '../Comment';
|
||||
import { Comment } from '../../comment/Comment';
|
||||
import { Filler } from '~/components/containers/Filler';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { PRESETS } from '~/constants/urls';
|
|||
import { LoaderCircle } from '~/components/input/LoaderCircle';
|
||||
import { throttle } from 'throttle-debounce';
|
||||
import { Icon } from '~/components/input/Icon';
|
||||
import { useArrows } from '~/utils/hooks/keys';
|
||||
|
||||
interface IProps extends INodeComponentProps {}
|
||||
|
||||
|
|
@ -77,8 +78,8 @@ const NodeImageSlideBlock: FC<IProps> = ({
|
|||
]);
|
||||
|
||||
// update outside hooks
|
||||
useEffect(() => updateLayout(), [loaded, height, images]);
|
||||
useEffect(() => updateSizes(), [refs, current, loaded, images]);
|
||||
useEffect(updateLayout, [loaded, height, images]);
|
||||
useEffect(updateSizes, [refs, current, loaded, images]);
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(updateLayout, 300);
|
||||
|
|
@ -239,29 +240,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
|
|||
images,
|
||||
]);
|
||||
|
||||
const onKeyDown = useCallback(
|
||||
event => {
|
||||
if (
|
||||
(event.target.tagName && ['TEXTAREA', 'INPUT'].includes(event.target.tagName)) ||
|
||||
is_modal_shown
|
||||
)
|
||||
return;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowLeft':
|
||||
return onPrev();
|
||||
case 'ArrowRight':
|
||||
return onNext();
|
||||
}
|
||||
},
|
||||
[onNext, onPrev, is_modal_shown]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('keydown', onKeyDown);
|
||||
|
||||
return () => window.removeEventListener('keydown', onKeyDown);
|
||||
}, [onKeyDown]);
|
||||
useArrows(onNext, onPrev, is_modal_shown);
|
||||
|
||||
useEffect(() => {
|
||||
setOffset(0);
|
||||
|
|
@ -270,16 +249,6 @@ const NodeImageSlideBlock: FC<IProps> = ({
|
|||
return (
|
||||
<div className={styles.wrap}>
|
||||
<div className={classNames(styles.cutter, { [styles.is_loading]: is_loading })} ref={wrap}>
|
||||
<div
|
||||
className={classNames(styles.placeholder, {
|
||||
[styles.is_loading]: is_loading || !loaded[current],
|
||||
})}
|
||||
>
|
||||
<div>
|
||||
<LoaderCircle size={96} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={classNames(styles.image_container, { [styles.is_dragging]: is_dragging })}
|
||||
style={{
|
||||
|
|
@ -295,13 +264,57 @@ const NodeImageSlideBlock: FC<IProps> = ({
|
|||
images.map((file, index) => (
|
||||
<div
|
||||
className={classNames(styles.image_wrap, {
|
||||
is_active: index === current && loaded[index],
|
||||
[styles.is_active]: index === current,
|
||||
})}
|
||||
ref={setRef(index)}
|
||||
key={node.updated_at + file.id}
|
||||
>
|
||||
<svg
|
||||
viewBox={`0 0 ${file.metadata.width} ${file.metadata.height}`}
|
||||
className={classNames(styles.preview, { [styles.is_loaded]: loaded[index] })}
|
||||
style={{
|
||||
maxHeight: max_height,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
<filter id="f1" x="0" y="0">
|
||||
<feBlend
|
||||
mode="multiply"
|
||||
x="0%"
|
||||
y="0%"
|
||||
width="100%"
|
||||
height="100%"
|
||||
in="SourceGraphic"
|
||||
in2="SourceGraphic"
|
||||
result="blend"
|
||||
/>
|
||||
|
||||
<feGaussianBlur
|
||||
stdDeviation="15 15"
|
||||
x="0%"
|
||||
y="0%"
|
||||
width="100%"
|
||||
height="100%"
|
||||
in="blend"
|
||||
edgeMode="none"
|
||||
result="blur2"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<rect fill="#242222" width="100%" height="100%" stroke="none" rx="8" ry="8" />
|
||||
|
||||
<image
|
||||
xlinkHref={getURL(file, PRESETS['300'])}
|
||||
width="100%"
|
||||
height="100%"
|
||||
filter="url(#f1)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<img
|
||||
className={styles.image}
|
||||
className={classNames(styles.image, { [styles.is_loaded]: loaded[index] })}
|
||||
src={getURL(file, PRESETS['1600'])}
|
||||
alt=""
|
||||
key={file.id}
|
||||
|
|
|
|||
|
|
@ -41,18 +41,6 @@
|
|||
transition: none;
|
||||
}
|
||||
|
||||
.image {
|
||||
max-width: 100%;
|
||||
opacity: 1;
|
||||
border-radius: $radius;
|
||||
box-shadow: transparentize($color: white, $amount: 0.95) 0 -1px,
|
||||
transparentize($color: #000000, $amount: 0.6) 0 2px 5px;
|
||||
|
||||
@include tablet {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.is_dragging {
|
||||
transition: none;
|
||||
}
|
||||
|
|
@ -69,7 +57,7 @@
|
|||
padding: 0 $gap / 2;
|
||||
position: relative;
|
||||
|
||||
&:global(.is_active) {
|
||||
&.is_active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -157,7 +145,6 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $content_bg;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
transition: opacity 2s;
|
||||
|
|
@ -173,3 +160,28 @@
|
|||
fill: white;
|
||||
}
|
||||
}
|
||||
|
||||
.image, .preview {
|
||||
max-width: 100%;
|
||||
border-radius: $radius;
|
||||
|
||||
@include tablet {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
|
||||
&.is_loaded {
|
||||
opacity: 1;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
&.is_loaded {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue