react-sort-assembly

概述

基于 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