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