demo: code optimization (#48621)

components/table/demo/drag-sorting-handler.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { HolderOutlined } from '@ant-design/icons';
 import type { DragEndEvent } from '@dnd-kit/core';
 import { DndContext } from '@dnd-kit/core';
@@ -14,6 +14,13 @@ import { CSS } from '@dnd-kit/utilities';
 import { Button, Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 
+interface DataType {
+  key: string;
+  name: string;
+  age: number;
+  address: string;
+}
+
 interface RowContextProps {
   setActivatorNodeRef?: (element: HTMLElement | null) => void;
   listeners?: SyntheticListenerMap;
@@ -21,7 +28,7 @@ interface RowContextProps {
 
 const RowContext = React.createContext<RowContextProps>({});
 
-const DragHandle = () => {
+const DragHandle: React.FC = () => {
   const { setActivatorNodeRef, listeners } = useContext(RowContext);
   return (
     <Button
@@ -35,39 +42,24 @@ const DragHandle = () => {
   );
 };
 
-interface DataType {
-  key: string;
-  name: string;
-  age: number;
-  address: string;
-}
-
 const columns: ColumnsType<DataType> = [
-  {
-    key: 'sort',
-    align: 'center',
-    width: 80,
-    render: () => <DragHandle />,
-  },
-  {
-    title: 'Name',
-    dataIndex: 'name',
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-  },
+  { key: 'sort', align: 'center', width: 80, render: () => <DragHandle /> },
+  { title: 'Name', dataIndex: 'name' },
+  { title: 'Age', dataIndex: 'age' },
+  { title: 'Address', dataIndex: 'address' },
+];
+
+const initialData: DataType[] = [
+  { key: '1', name: 'John Brown', age: 32, address: 'Long text Long' },
+  { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
+  { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
 ];
 
 interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   'data-row-key': string;
 }
 
-const Row = (props: RowProps) => {
+const Row: React.FC<RowProps> = (props) => {
   const {
     attributes,
     listeners,
@@ -76,9 +68,7 @@ const Row = (props: RowProps) => {
     transform,
     transition,
     isDragging,
-  } = useSortable({
-    id: props['data-row-key'],
-  });
+  } = useSortable({ id: props['data-row-key'] });
 
   const style: React.CSSProperties = {
     ...props.style,
@@ -87,11 +77,8 @@ const Row = (props: RowProps) => {
     ...(isDragging ? { position: 'relative', zIndex: 9999 } : {}),
   };
 
-  const contextValue = useMemo(
-    () => ({
-      setActivatorNodeRef,
-      listeners,
-    }),
+  const contextValue = useMemo<RowContextProps>(
+    () => ({ setActivatorNodeRef, listeners }),
     [setActivatorNodeRef, listeners],
   );
 
@@ -103,51 +90,24 @@ const Row = (props: RowProps) => {
 };
 
 const App: React.FC = () => {
-  const [dataSource, setDataSource] = useState([
-    {
-      key: '1',
-      name: 'John Brown',
-      age: 32,
-      address: 'Long text Long',
-    },
-    {
-      key: '2',
-      name: 'Jim Green',
-      age: 42,
-      address: 'London No. 1 Lake Park',
-    },
-    {
-      key: '3',
-      name: 'Joe Black',
-      age: 32,
-      address: 'Sidney No. 1 Lake Park',
-    },
-  ]);
+  const [dataSource, setDataSource] = React.useState<DataType[]>(initialData);
 
   const onDragEnd = ({ active, over }: DragEndEvent) => {
     if (active.id !== over?.id) {
-      setDataSource((previous) => {
-        const activeIndex = previous.findIndex((i) => i.key === active.id);
-        const overIndex = previous.findIndex((i) => i.key === over?.id);
-        return arrayMove(previous, activeIndex, overIndex);
+      setDataSource((prevState) => {
+        const activeIndex = prevState.findIndex((record) => record.key === active?.id);
+        const overIndex = prevState.findIndex((record) => record.key === over?.id);
+        return arrayMove(prevState, activeIndex, overIndex);
       });
     }
   };
 
   return (
     <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
-      <SortableContext
-        // rowKey array
-        items={dataSource.map((i) => i.key)}
-        strategy={verticalListSortingStrategy}
-      >
+      <SortableContext items={dataSource.map((i) => i.key)} strategy={verticalListSortingStrategy}>
         <Table
-          components={{
-            body: {
-              row: Row,
-            },
-          }}
           rowKey="key"
+          components={{ body: { row: Row } }}
           columns={columns}
           dataSource={dataSource}
         />