muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

tried to make types

Browse source
This commit is contained in:
Fedor Katurov 2022-07-03 15:29:26 +07:00
parent 12ffd39082
commit ba83d16345
2 changed files with 36 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/sortable/SortableAudioGrid/index.tsx
View file

@ -18,27 +18,22 @@ interface SortableAudioGridProps {
onTitleChange: (file_id: IFile['id'], title: string) => void; onTitleChange: (file_id: IFile['id'], title: string) => void;
} }
const renderItem: FC<{
item: IFile;
onDelete: (file_id: IFile['id']) => void;
onTitleChange: (file_id: IFile['id'], title: string) => void;
}> = ({ item, onDelete, onTitleChange }) => (
<AudioPlayer file={item} onDelete={onDelete} isEditing onTitleChange={onTitleChange} />
);
const SortableAudioGrid: FC<SortableAudioGridProps> = ({ const SortableAudioGrid: FC<SortableAudioGridProps> = ({
items, items,
locked, locked,
onDelete,
className, className,
onSortEnd, onSortEnd,
onDelete,
onTitleChange, onTitleChange,
}) => { }) => {
const renderItem = useCallback<FC<{ item: IFile; key?: string | number }>>(
({ item, key }) => (
<AudioPlayer
file={item}
onDelete={onDelete}
isEditing
onTitleChange={onTitleChange}
key={key}
/>
),
[onTitleChange, onDelete]
);
const renderLocked = useCallback<FC<{ locked: UploadStatus }>>( const renderLocked = useCallback<FC<{ locked: UploadStatus }>>(
({ locked }) => ( ({ locked }) => (
<AudioUpload <AudioUpload
@ -62,6 +57,10 @@ const SortableAudioGrid: FC<SortableAudioGridProps> = ({
renderLocked={renderLocked} renderLocked={renderLocked}
onSortEnd={onSortEnd} onSortEnd={onSortEnd}
className={className} className={className}
renderItemProps={{
onDelete,
onTitleChange,
}}
/> />
); );
}; };

37
src/components/sortable/SortableList/index.tsx
View file

@ -1,27 +1,33 @@
import React, { createElement, FC } from "react"; import React, { createElement, FC } from 'react';
import { closestCenter, DndContext, DragOverlay } from "@dnd-kit/core"; import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"; import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import classNames from "classnames"; import classNames from 'classnames';
import { DragOverlayItem } from "~/components/sortable/DragOverlayItem"; import { DragOverlayItem } from '~/components/sortable/DragOverlayItem';
import { SortableItem } from "~/components/sortable/SortableItem"; import { SortableItem } from '~/components/sortable/SortableItem';
import { useSortableActions } from "~/hooks/sortable"; import { useSortableActions } from '~/hooks/sortable';
import styles from "./styles.module.scss"; import styles from './styles.module.scss';
interface SortableListProps<T extends {}, R extends {}> { interface SortableListProps<
T extends {},
R extends {},
P extends {},
U extends {},
> {
items: T[]; items: T[];
locked: R[]; locked: R[];
getID: (item: T) => number | string; getID: (item: T) => number | string;
getLockedID: (locked: R) => number | string; getLockedID: (locked: R) => number | string;
renderItem: FC<{ item: T }>; renderItem: FC<P>;
renderItemProps: U;
renderLocked: FC<{ locked: R }>; renderLocked: FC<{ locked: R }>;
onSortEnd: (newVal: T[]) => void; onSortEnd: (newVal: T[]) => void;
className?: string; className?: string;
} }
const SortableList = <T, R>({ const SortableList = <T, R, P extends { item: T }, U>({
items, items,
locked, locked,
getID, getID,
@ -29,8 +35,9 @@ const SortableList = <T, R>({
className, className,
renderItem, renderItem,
renderLocked, renderLocked,
renderItemProps,
onSortEnd, onSortEnd,
}: SortableListProps<T, R>) => { }: SortableListProps<T, R, P, U>) => {
const { sensors, onDragEnd, onDragStart, draggingItem, ids } = useSortableActions( const { sensors, onDragEnd, onDragStart, draggingItem, ids } = useSortableActions(
items, items,
getID, getID,
@ -54,7 +61,7 @@ const SortableList = <T, R>({
draggingItem && getID(item) === getID(draggingItem) ? styles.dragging : undefined draggingItem && getID(item) === getID(draggingItem) ? styles.dragging : undefined
} }
> >
{createElement(renderItem, { item, key: getID(item) })} {createElement(renderItem, { ...renderItemProps, item })}
</SortableItem> </SortableItem>
))} ))}
@ -64,7 +71,9 @@ const SortableList = <T, R>({
<DragOverlay> <DragOverlay>
{draggingItem ? ( {draggingItem ? (
<DragOverlayItem>{createElement(renderItem, { item: draggingItem })}</DragOverlayItem> <DragOverlayItem>
{createElement(renderItem, { ...(renderItemProps || {}), item: draggingItem })}
</DragOverlayItem>
) : null} ) : null}
</DragOverlay> </DragOverlay>
</div> </div>