概述

基于 react-sortable-hoc 的二次封装，向外暴露 DraggerSort（排序）以及 DraggerTable（自定义表格排序）组件

安装依赖

npm i --save react-sort-assembly

DraggerSort（排序）组件

使用

import { DraggerSort } from 'react-sort-assembly';
import type { DraggerSortProps } from 'react-sort-assembly/DraggerSort';

const Demo = () => {
  const draggerSortProps: DraggerSortProps<string> = {
    list: [
      'item1',
      'item2',
      'item3',
      'item4',
      'item5',
      'item6',
      'item7',
      'item8',
    ],
    generatorRecordView: list => {
      return list?.map((ele, index) => (
        <div
          key={`${index}`}
          className={classNames({
            [styles.tagItem]: true,
          })}
        >
          {ele}
        </div>
      ));
    },
    axis: 'y',
    onSortChange: list => {
      console.log('onSortChange', list);
    },
    wrapperStyle: {
      flexDirection: 'column',
    },
  };

  return <DraggerSort {...draggerSortProps} />;
};
export default Demo;

参数

| 名称 | 描述 | 必填 | 类型 | 初始值 | | :------------------ | :--------------------------: | :--: | :------------------------------------------------------------------: | :-------: | | mode | 拖拽功能开启或关闭 | 否 | 'open' 或 'close' | open | | list | 列表数组 | 是 | T[]泛型 | undefined | | generatorRecordView | 渲染列表数组方法 | 是 | (data: T[]) => JSX.Element[] | undefined | | onSortChange | 排序完回调，参数是已排序数组 | 否 | (list: T[], oldIndex: number, newIndex: number, oldData: T) => void; | undefined | | wrapperStyle | 包裹排序 div 的 style | 否 | React.CSSProperties | undefined | | wrapperClassName | 包裹排序 div 的 classname | 否 | string | undefined |

注：其余参数见 react-sortable-hoc 的 SortableContainerProps 除去 onSortEnd 和 useDragHandle

DraggerTable（自定义表格排序）组件

使用

const size = 12;

const DataLists = new Array(30)?.fill(0)?.map((_, idx) => ({
  name: `名称${idx + 1}`, id: idx + 1, url: require('./assets/pointer.png')
}))

import { DraggerTable } from 'react-sort-assembly';
import type { DraggerTableProps } from 'react-sort-assembly/DraggerTable';
import { EditOutlined } from '@ant-design/icons';

const Demo = () => {
  const [queryInfo, setQueryInfo] = useState<any>({ current: 1, pageSize: size })
  const [dataSource, setDataSource] = useState<any[]>(DataLists?.slice(0, size))

    const draggerTableProps: DraggerTableProps<dataType> = {
    /** 关闭 close ,开启 open */
    mode: 'close',
    list: dataSource,
    pagination: {
      ...queryInfo!,
      total: DataLists?.length,
    },
    generatorRecordView: (list) => list?.map((ele, index) => (
      <div key={`${index}`} className={classNames({
        [styles.tableItem]: true,
      })}>
        <div className={styles.header}>
          <span>{ele?.name}</span>
          <div className={styles.menus}>
            <EditOutlined />
          </div>
        </div>
        <div className={styles.body}>
          {!!ele?.url && <img src={ele?.url} />}
        </div>
      </div>
    )),
    onChange: (page, pageSize) => {
      setQueryInfo({
        current: page,
        pageSize,
      })
      const newList = DataLists?.slice((page - 1) * size, page * size);
      setDataSource(newList);
    },
    wrapperTableClassName: styles.tableWrapper,
    wrapperClassName: styles.sortWrapper,
  }

  return <DraggerTable {...draggerTableProps} />;
};
export default Demo;

参数

| 名称 | 描述 | 必填 | 类型 | 初始值 | | :-------------------- | :-----------------------------: | :--: | :------------------------------------------------------------------: | :-------: | | list | 列表数组 | 是 | T[]泛型 | undefined | | generatorRecordView | 渲染列表数组方法 | 是 | (data: T[]) => JSX.Element[] | undefined | | pagination | 分页 props | 否 | Omit<PaginationProps, 'onChange'>; | undefined | | onChange | 分页器的 onChange 方法 | 否 | (page: number, pageSize: number) => void | undefined | | onSortChange | 排序完回调，参数是已排序数组 | 否 | (list: T[], oldIndex: number, newIndex: number, oldData: T) => void; | undefined | | wrapperTableStyle | 包裹表格和分页 div 的 style | 否 | React.CSSProperties | undefined | | wrapperTableClassName | 包裹表格和分页 div 的 classname | 否 | string | undefined |

注：其余参数见 DraggerSort 的 DraggerSortProps