linkmore-design/es/lm-table/hooks/useDndItems.js

🌈 🚀lm组件库。🚀

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import { useState, useEffect } from 'react';
import { treeFind } from "../common/index";
// import { useUpdate } from 'ahooks';

function del(arr, target) {
  if (!arr || !arr.length) {
    return null;
  }
  var index = arr.findIndex(function (item) {
    return item === target;
  });
  if (index !== -1) {
    arr.splice(index, 1);
  }
}
function getSortInsert(tableHeader, value, _ref) {
  var columns = _ref.columns;
  if (!tableHeader) {
    return [];
  }
  var arr = new Array(columns.length);
  tableHeader.push(value);
  tableHeader.forEach(function (val) {
    var index = columns.findIndex(function (item) {
      return item.title === val;
    });
    columns[index].show = true;
    arr.splice(index, 0, val);
  });
  return arr.filter(Boolean);
}
function getSortDndColumns(value, _ref2) {
  var columns = _ref2.columns;
  var tableHeader = value.tableHeader;
  var hiddenArr = [];
  if (value.row) {
    hiddenArr = [].concat(_toConsumableArray(hiddenArr), _toConsumableArray(value.row));
  }
  if (value.col) {
    hiddenArr = [].concat(_toConsumableArray(hiddenArr), _toConsumableArray(value.col));
  }
  if (!tableHeader || !tableHeader.length) {
    return [];
  }
  var result = [];
  var _loop = function _loop(i) {
    var item = columns.find(function (item) {
      return item.title === tableHeader[i];
    });
    if (item) {
      item.order = i;
      result.push(item);
    }
  };
  for (var i = 0; i < tableHeader.length; i++) {
    _loop(i);
  }
  var _loop2 = function _loop2(i) {
    var item = columns.find(function (item) {
      return item.title === hiddenArr[i];
    });
    if (item) {
      item.show = false;
      result.push(item);
    }
  };
  for (var _i = 0; _i < hiddenArr.length; _i++) {
    _loop2(_i);
  }
  return result;
}
function getDataIndexForTitle(row, columns) {
  if (!row) {
    return [];
  }
  return row.map(function (title) {
    var col = columns.find(function (item) {
      return item.title === title;
    });
    if (col) {
      return col.dataIndex;
    }
  });
}
function useDndItems(props) {
  var columns = props.columns,
    colSortOpen = props.colSortOpen,
    filterChange = props.filterChange,
    openRowGroup = props.openRowGroup,
    openColGroup = props.openColGroup,
    customizeGroupRowKeys = props.customizeGroupRowKeys,
    customizeGroupColKeys = props.customizeGroupColKeys;
  var _useState = useState(columns),
    _useState2 = _slicedToArray(_useState, 2),
    dndColumns = _useState2[0],
    setDndColumns = _useState2[1];
  var _useState3 = useState(customizeGroupRowKeys || []),
    _useState4 = _slicedToArray(_useState3, 2),
    groupRowKeys = _useState4[0],
    setGroupRowKeys = _useState4[1];
  var _useState5 = useState(customizeGroupColKeys || []),
    _useState6 = _slicedToArray(_useState5, 2),
    groupColKeys = _useState6[0],
    setGroupColKeys = _useState6[1];
  useEffect(function () {
    if (customizeGroupRowKeys) {
      setGroupRowKeys(customizeGroupRowKeys);
    }
    if (customizeGroupColKeys) {
      setGroupColKeys(customizeGroupColKeys);
    }
  }, [customizeGroupRowKeys, customizeGroupColKeys]);

  // 初始化
  var defaultItems = {
    tableHeader: []
  };
  if (openRowGroup) {
    defaultItems.row = [];
  }
  if (openColGroup) {
    defaultItems.col = [];
  }
  if (openColGroup || openRowGroup || colSortOpen) {
    treeFind(columns, function (node) {
      if (openRowGroup && groupRowKeys.includes(node.dataIndex)) {
        defaultItems.row && defaultItems.row.push(node.title);
      } else if (groupColKeys.includes(node.dataIndex)) {
        defaultItems.col && defaultItems.col.push(node.title);
      } else {
        defaultItems.tableHeader.push(node.title);
      }
      return false;
    });
  }
  var _useState7 = useState(defaultItems),
    _useState8 = _slicedToArray(_useState7, 2),
    items = _useState8[0],
    setItems = _useState8[1];
  useEffect(function () {
    if (customizeGroupRowKeys || customizeGroupColKeys) {
      columns.forEach(function (c) {
        if (customizeGroupRowKeys.includes(c.dataIndex) || customizeGroupColKeys.includes(c.dataIndex)) {
          c.show = false;
        }
      });
    }
    setDndColumns(columns);
    setItems(defaultItems);
  }, [columns]);

  // 更新
  var updateItems = function updateItems(value, resume) {
    var _value$col;
    if (value.row) {
      value.row = value === null || value === void 0 ? void 0 : value.row.filter(Boolean);
    }
    if (value.col) {
      value.col = value.col.filter(Boolean);
    }
    if (resume) {
      // 删除
      del(value.row, resume);
      del(value.col, resume);
      value.tableHeader = getSortInsert(value.tableHeader, resume, {
        columns: columns
      });
    }
    // 列分组进行覆盖，只允许存在一个
    if ((value === null || value === void 0 ? void 0 : (_value$col = value.col) === null || _value$col === void 0 ? void 0 : _value$col.length) >= 2) {
      value.tableHeader = getSortInsert(value.tableHeader, items.col[0], {
        columns: columns
      });
      value.col = value.col.filter(function (item) {
        return item !== items.col[0];
      });
    }
    setItems(value);
    setGroupRowKeys(getDataIndexForTitle(value.row, columns));
    setGroupColKeys(getDataIndexForTitle(value.col, columns));
    var newColumns = getSortDndColumns(value, {
      columns: columns
    });
    setDndColumns(newColumns);
    filterChange === null || filterChange === void 0 ? void 0 : filterChange(newColumns);
  };
  return {
    dndColumns: dndColumns,
    items: items,
    groupRowKeys: groupRowKeys,
    groupColKeys: groupColKeys,
    updateItems: updateItems
  };
}
export default useDndItems;