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

fixed types

Browse source
This commit is contained in:
Fedor Katurov 2022-06-30 17:34:44 +07:00
parent c173c96b57
commit 12ffd39082
2 changed files with 55 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,14 +1,14 @@
import React, { createElement, FC, memo } 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 {}> {
items: T[]; items: T[];
@ -21,60 +21,56 @@ interface SortableListProps<T extends {}, R extends {}> {
className?: string; className?: string;
} }
const SortableList = memo( const SortableList = <T, R>({
<T, R>({ items,
locked,
getID,
getLockedID,
className,
renderItem,
renderLocked,
onSortEnd,
}: SortableListProps<T, R>) => {
const { sensors, onDragEnd, onDragStart, draggingItem, ids } = useSortableActions(
items, items,
locked,
getID, getID,
getLockedID, onSortEnd
className, );
renderItem,
renderLocked,
onSortEnd,
}: SortableListProps<T, R>) => {
const { sensors, onDragEnd, onDragStart, draggingItem, ids } = useSortableActions(
items,
getID,
onSortEnd
);
return ( return (
<DndContext <DndContext
sensors={sensors} sensors={sensors}
collisionDetection={closestCenter} collisionDetection={closestCenter}
onDragEnd={onDragEnd} onDragEnd={onDragEnd}
onDragStart={onDragStart} onDragStart={onDragStart}
> >
<SortableContext items={ids} strategy={verticalListSortingStrategy}> <SortableContext items={ids} strategy={verticalListSortingStrategy}>
<div className={classNames(styles.grid, className)}> <div className={classNames(styles.grid, className)}>
{items.map(item => ( {items.map(item => (
<SortableItem <SortableItem
key={getID(item)} key={getID(item)}
id={getID(item)} id={getID(item)}
className={ className={
draggingItem && getID(item) === getID(draggingItem) ? styles.dragging : undefined draggingItem && getID(item) === getID(draggingItem) ? styles.dragging : undefined
} }
> >
{createElement(renderItem, { item, key: getID(item) })} {createElement(renderItem, { item, key: getID(item) })}
</SortableItem> </SortableItem>
))} ))}
{locked.map(item => {locked.map(item =>
createElement(renderLocked, { locked: item, key: getLockedID(item) }) createElement(renderLocked, { locked: item, key: getLockedID(item) })
)} )}
<DragOverlay> <DragOverlay>
{draggingItem ? ( {draggingItem ? (
<DragOverlayItem> <DragOverlayItem>{createElement(renderItem, { item: draggingItem })}</DragOverlayItem>
{createElement(renderItem, { item: draggingItem })} ) : null}
</DragOverlayItem> </DragOverlay>
) : null} </div>
</DragOverlay> </SortableContext>
</div> </DndContext>
</SortableContext> );
</DndContext> };
);
}
);
export { SortableList }; export { SortableList };

2
tsconfig.tsbuildinfo
View file

File diff suppressed because one or more lines are too long