fixed types

src/components/sortable/SortableList/index.tsx

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