react-sort-assembly v0.1.5

概述

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

参数

注：其余参数见 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;

参数

注：其余参数见 DraggerSort 的 DraggerSortProps