muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

fixed sortable audio grid

Browse source
This commit is contained in:
Fedor Katurov 2022-06-30 17:13:10 +07:00
parent 47a6e02c21
commit 37a2e54543
6 changed files with 131 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/editors/AudioEditor/index.tsx
View file

@ -2,9 +2,7 @@ import React, { FC, useCallback, useMemo } from 'react';
import { UploadDropzone } from '~/components/upload/UploadDropzone';
import { UploadType } from '~/constants/uploads';
import { useNodeAudios } from '~/hooks/node/useNodeAudios';
import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
import { useNodeImages } from '~/hooks/node/useNodeImages';
import { IFile } from '~/types';
import { NodeEditorProps } from '~/types/node';
import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
import { values } from '~/utils/ramda';
@ -17,11 +15,7 @@ import styles from './styles.module.scss';
type IProps = NodeEditorProps;
const AudioEditor: FC<IProps> = () => {
const formik = useNodeFormContext();
const { pending, setFiles, uploadFiles } = useUploaderContext()!;
const images = useNodeImages(formik.values);
const audios = useNodeAudios(formik.values);
const { pending, filesAudios, filesImages, setFiles, uploadFiles } = useUploaderContext()!;
const pendingImages = useMemo(
() => values(pending).filter(item => item.type === UploadType.Image),
@ -33,15 +27,20 @@ const AudioEditor: FC<IProps> = () => {
[pending]
);
const setImages = useCallback(values => setFiles([...values, ...audios]), [setFiles, audios]);
const setAudios = useCallback(values => setFiles([...values, ...images]), [setFiles, images]);
const setImages = useCallback((values: IFile[]) => setFiles([...values, ...filesAudios]), [
setFiles,
filesAudios,
]);
const setAudios = useCallback((values: IFile[]) => setFiles([...values, ...filesImages]), [
setFiles,
filesImages,
]);
return (
<UploadDropzone onUpload={uploadFiles} helperClassName={styles.dropzone}>
<div className={styles.wrap}>
<ImageGrid files={images} setFiles={setImages} locked={pendingImages} />
<AudioGrid files={audios} setFiles={setAudios} locked={pendingAudios} />
<ImageGrid files={filesImages} setFiles={setImages} locked={pendingImages} />
<AudioGrid files={filesAudios} setFiles={setAudios} locked={pendingAudios} />
</div>
</UploadDropzone>
);