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

ZeroETP React Component Library

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.DraggableBodyRow = exports.DraggableContainer = exports.SortContext = exports.SortContainer = exports.SortableItem = exports.DragHandle = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactSortableHoc = require("react-sortable-hoc");

var _icons = require("@ant-design/icons");

var _proTable = require("@ant-design/pro-table");

var _arrayMove = require("../../util/array-move");

require("./index.less");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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 = void 0 && (void 0).__spreadArray || function (to, from) {
  for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) {
    to[j] = from[i];
  }

  return to;
};

var DragHandle = (0, _reactSortableHoc.SortableHandle)(function () {
  return /*#__PURE__*/_react.default.createElement(_icons.MenuOutlined, {
    style: {
      cursor: "grab",
      color: "#999"
    }
  });
});
exports.DragHandle = DragHandle;
var SortableItem = (0, _reactSortableHoc.SortableElement)(function (props) {
  return /*#__PURE__*/_react.default.createElement("tr", __assign({}, props));
});
exports.SortableItem = SortableItem;
var SortContainer = (0, _reactSortableHoc.SortableContainer)(function (props) {
  return /*#__PURE__*/_react.default.createElement("tbody", __assign({}, props));
});
exports.SortContainer = SortContainer;
var SortContext = /*#__PURE__*/(0, _react.createContext)({});
exports.SortContext = SortContext;

var DraggableContainer = function DraggableContainer(props) {
  var _a = (0, _react.useContext)(SortContext) || {},
      onSortEnd = _a.onSortEnd,
      onSortStart = _a.onSortStart;

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

exports.DraggableContainer = DraggableContainer;

var DraggableBodyRow = function DraggableBodyRow(props) {
  var _a;

  var datasource = ((_a = (0, _react.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.default.createElement(SortableItem, __assign({
    index: index
  }, props));
}; // EditableProTable默认非受控的，受控模式时容易卡


exports.DraggableBodyRow = DraggableBodyRow;
var DragSortEditableTable = /*#__PURE__*/(0, _react.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 = (0, _react.useState)(_value),
      value = _b[0],
      setValue = _b[1];

  var editableFormRef = _editableFormRef || (0, _react.useRef)();

  var rootRef = (0, _react.useRef)(null);
  var scrollRef = (0, _react.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.default.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 = (0, _react.useCallback)(function (_a) {
    var oldIndex = _a.oldIndex,
        newIndex = _a.newIndex;

    if (oldIndex !== newIndex) {
      var newData = (0, _arrayMove.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;
    }
  };

  (0, _react.useEffect)(function () {
    if (rootRef.current) {
      scrollRef.current = rootRef.current.querySelector(".ant-table-body");
    }
  }, []);
  (0, _react.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.default.createElement(SortContext.Provider, {
    value: {
      datasource: value,
      onSortEnd: onSortEnd
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "dragsort-editable-table",
    onMouseLeave: function onMouseLeave() {
      onChange === null || onChange === void 0 ? void 0 : onChange(getLatestDataSource());
    },
    ref: rootRef
  }, /*#__PURE__*/_react.default.createElement(_proTable.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
  }))));
});
var _default = DragSortEditableTable;
exports.default = _default;