ze-react-component-library/es/components/DragSortEditableTable/index.js

ZeroETP React Component Library

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

var __spreadArray = this && this.__spreadArray || function (to, from) {
  for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) {
    to[j] = from[i];
  }

  return to;
};

import React, { memo, useRef, useCallback, createContext, useContext, useState, useEffect } from "react";
import { SortableContainer, SortableElement, SortableHandle } from "react-sortable-hoc";
import { MenuOutlined } from "@ant-design/icons";
import { EditableProTable } from "@ant-design/pro-table";
import { arrayMoveImmutable } from "../../util/array-move";
import "./index.less";
export var DragHandle = SortableHandle(function () {
  return /*#__PURE__*/React.createElement(MenuOutlined, {
    style: {
      cursor: "grab",
      color: "#999"
    }
  });
});
export var SortableItem = SortableElement(function (props) {
  return /*#__PURE__*/React.createElement("tr", __assign({}, props));
});
export var SortContainer = SortableContainer(function (props) {
  return /*#__PURE__*/React.createElement("tbody", __assign({}, props));
});
export var SortContext = /*#__PURE__*/createContext({});
export var DraggableContainer = function DraggableContainer(props) {
  var _a = useContext(SortContext) || {},
      onSortEnd = _a.onSortEnd,
      onSortStart = _a.onSortStart;

  return /*#__PURE__*/React.createElement(SortContainer, __assign({
    useDragHandle: true,
    disableAutoscroll: true,
    helperClass: "row-dragging",
    lockAxis: "y",
    // 限制元素只能在容器里拖动
    lockToContainerEdges: true,
    onSortEnd: onSortEnd,
    onSortStart: onSortStart
  }, props));
};
export var DraggableBodyRow = function DraggableBodyRow(props) {
  var _a;

  var datasource = ((_a = useContext(SortContext)) === null || _a === void 0 ? void 0 : _a.datasource) || [];
  var index = datasource.findIndex(function (x) {
    return String(x.id || x._id) === "" + props["data-row-key"];
  });
  return /*#__PURE__*/React.createElement(SortableItem, __assign({
    index: index
  }, props));
}; // EditableProTable默认非受控的，受控模式时容易卡

var DragSortEditableTable = /*#__PURE__*/memo(function (props) {
  var _a;

  var _editableFormRef = props.editableFormRef,
      onChange = props.onChange,
      sortable = props.sortable,
      columns = props.columns,
      _value = props.value,
      restProps = __rest(props, ["editableFormRef", "onChange", "sortable", "columns", "value"]);

  var _b = useState(_value),
      value = _b[0],
      setValue = _b[1];

  var editableFormRef = _editableFormRef || useRef();

  var rootRef = useRef(null);
  var scrollRef = useRef(null);
  var finalColumns = columns;

  if (sortable) {
    finalColumns = __spreadArray([{
      title: "排序",
      dataIndex: "sort",
      width: 60,
      editable: false,
      className: "drag-visible",
      fixed: true,
      render: function render() {
        return /*#__PURE__*/React.createElement(DragHandle, null);
      }
    }], columns);
  }

  var getLatestDataSource = function getLatestDataSource() {
    var _a;

    if ("current" in editableFormRef) {
      var newValue_1 = ((_a = editableFormRef.current) === null || _a === void 0 ? void 0 : _a.getFieldsValue()) || {};
      var datasource = value === null || value === void 0 ? void 0 : value.map(function (k) {
        return __assign(__assign({}, k), newValue_1[k.id]);
      });
      return datasource;
    }

    return [];
  };

  var onSortEnd = useCallback(function (_a) {
    var oldIndex = _a.oldIndex,
        newIndex = _a.newIndex;

    if (oldIndex !== newIndex) {
      var newData = arrayMoveImmutable(__spreadArray([], value || []), oldIndex, newIndex).filter(function (el) {
        return !!el;
      });
      setValue(newData);
    }
  }, [(_a = value === null || value === void 0 ? void 0 : value.map(function (m) {
    return m.id;
  })) === null || _a === void 0 ? void 0 : _a.join(",")]);

  var scrollToBottom = function scrollToBottom() {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight - scrollRef.current.clientHeight;
    }
  };

  useEffect(function () {
    if (rootRef.current) {
      scrollRef.current = rootRef.current.querySelector(".ant-table-body");
    }
  }, []);
  useEffect(function () {
    if ((value === null || value === void 0 ? void 0 : value.length) > (_value === null || _value === void 0 ? void 0 : _value.length)) {
      scrollToBottom();
    }
  }, [value === null || value === void 0 ? void 0 : value.length]);
  return /*#__PURE__*/React.createElement(SortContext.Provider, {
    value: {
      datasource: value,
      onSortEnd: onSortEnd
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "dragsort-editable-table",
    onMouseLeave: function onMouseLeave() {
      onChange === null || onChange === void 0 ? void 0 : onChange(getLatestDataSource());
    },
    ref: rootRef
  }, /*#__PURE__*/React.createElement(EditableProTable, __assign({
    locale: {
      emptyText: " "
    },
    rowKey: "id",
    style: {
      margin: "0 -24px"
    }
  }, restProps, {
    value: value,
    onChange: setValue,
    scroll: __assign({
      x: props.columns.length * 150,
      y: 400
    }, (props === null || props === void 0 ? void 0 : props.scroll) || {}),
    columns: finalColumns,
    editableFormRef: editableFormRef,
    recordCreatorProps: (props === null || props === void 0 ? void 0 : props.recordCreatorProps) === undefined ? {
      newRecordType: "dataSource",
      record: function record() {
        return {
          id: Date.now()
        };
      },
      creatorButtonText: props === null || props === void 0 ? void 0 : props.placeholder
    } : props === null || props === void 0 ? void 0 : props.recordCreatorProps,
    editable: {
      type: "multiple",
      editableKeys: value === null || value === void 0 ? void 0 : value.map(function (i) {
        return i.id;
      }),
      actionRender: function actionRender(_row, _, dom) {
        return [dom.delete];
      }
    },
    components: sortable ? {
      body: {
        wrapper: DraggableContainer,
        row: DraggableBodyRow
      }
    } : undefined
  }))));
});
export default DragSortEditableTable;