knk
Version:
react components based on react
249 lines (245 loc) • 10.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _antd = require("antd");
var _reactDnd = require("react-dnd");
var _reactDndHtml5Backend = require("react-dnd-html5-backend");
var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
var _api = require("../../../common/api");
var _tool = require("../../../common/tool");
require("../../../style/index.less");
var _excluded = ["isOver", "connectDragSource", "connectDropTarget", "moveRow"];
/**
* 通用可拖动排序表格
*/
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 dragingIndex = -1;
var BodyRow = /*#__PURE__*/function (_React$Component) {
(0, _inherits2.default)(BodyRow, _React$Component);
var _super = (0, _createSuper2.default)(BodyRow);
function BodyRow() {
(0, _classCallCheck2.default)(this, BodyRow);
return _super.apply(this, arguments);
}
(0, _createClass2.default)(BodyRow, [{
key: "render",
value: function render() {
var _this$props = this.props,
isOver = _this$props.isOver,
connectDragSource = _this$props.connectDragSource,
connectDropTarget = _this$props.connectDropTarget,
moveRow = _this$props.moveRow,
restProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
var style = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps.style), {}, {
cursor: 'move'
});
var className = restProps.className;
if (isOver) {
if (restProps.index > dragingIndex) {
className += ' drop-over-downward';
}
if (restProps.index < dragingIndex) {
className += ' drop-over-upward';
}
}
return connectDragSource(connectDropTarget( /*#__PURE__*/_react.default.createElement("tr", (0, _extends2.default)({}, restProps, {
className: className,
style: style
}))));
}
}]);
return BodyRow;
}(_react.default.Component);
var rowSource = {
beginDrag: function beginDrag(props) {
dragingIndex = props.index;
return {
index: props.index
};
}
};
var rowTarget = {
drop: function drop(props, monitor) {
var dragIndex = monitor.getItem().index;
var hoverIndex = props.index;
// Don't replace items with themselves
if (dragIndex === hoverIndex) {
return;
}
// Time to actually perform the action
props.moveRow(dragIndex, hoverIndex);
// Note: we're mutating the monitor item here!
// Generally it's better to avoid mutations,
// but it's good here for the sake of performance
// to avoid expensive index searches.
monitor.getItem().index = hoverIndex;
}
};
var DragableBodyRow = (0, _reactDnd.DropTarget)('row', rowTarget, function (connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver()
};
})((0, _reactDnd.DragSource)('row', rowSource, function (connect) {
return {
connectDragSource: connect.dragSource()
};
})(BodyRow));
var DragSortTable = function DragSortTable(props) {
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
loading = _useState2[0],
setLoading = _useState2[1];
var _useState3 = (0, _react.useState)({}),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
tableData = _useState4[0],
setTableData = _useState4[1];
(0, _react.useEffect)(function () {
handleGetData({
page: 1,
pageSize: 10
});
}, []);
var components = {
body: {
row: DragableBodyRow
}
};
var moveRow = function moveRow(dragIndex, hoverIndex) {
var tableDataArr = tableData.content || [];
var dragRow = tableDataArr[dragIndex];
var resultData = (0, _immutabilityHelper.default)({
tableDataArr: tableDataArr
}, {
tableDataArr: {
$splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]]
}
});
setTableData({
content: resultData.tableDataArr
});
};
var handleGetData = function handleGetData(data) {
var apiPath = props.apiPath,
apiData = props.apiData,
apiMethod = props.apiMethod;
setLoading(true);
var sendData = (0, _tool.filterEmptyData)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, apiData), data));
(0, _api.fetch)(apiPath, sendData, apiMethod).then(function (res) {
// 判断如果卸载,则不再设置数据
if (!res.data || !res.data.content) res.data.content = [];
res.data.content.map(function (item, inx) {
item.key = inx;
});
setLoading(false);
setTableData(res.data);
}).catch(function (err) {
setLoading(false);
_antd.message.error("\u83B7\u53D6\u6570\u636E\u5931\u8D25:".concat(err.message));
});
};
var handleChangePage = function handleChangePage(page, filters, sorter) {
var sortType = props.sortType;
var orders = {};
if (!(0, _tool.isObjEmpty)(sorter)) {
sortType.map(function (item) {
if (item.text === sorter.columnKey) {
orders = {
sortType: item.value,
isDesc: sorter.order === 'descend' ? 1 : 0
};
}
});
}
handleGetData((0, _objectSpread2.default)({
page: page.current,
pageSize: page.pageSize
}, orders));
};
var tableTitle = props.tableTitle,
columns = props.columns,
isShowPagination = props.isShowPagination,
isShowBordered = props.isShowBordered,
rightLink = props.rightLink,
rightLinkTitle = props.rightLinkTitle,
pageSizeOptions = props.pageSizeOptions,
rowKeyFun = props.rowKeyFun,
scroll = props.scroll;
var pageData;
if (isShowPagination && pageSizeOptions) {
pageData = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _tool.getPageData)(tableData)), {}, {
pageSizeOptions: pageSizeOptions
});
} else pageData = (0, _objectSpread2.default)({}, (0, _tool.getPageData)(tableData));
return /*#__PURE__*/_react.default.createElement("div", {
className: "drap-sort-table"
}, /*#__PURE__*/_react.default.createElement(_antd.Spin, {
spinning: loading
}, tableTitle ? /*#__PURE__*/_react.default.createElement("h3", null, tableTitle, rightLink ? /*#__PURE__*/_react.default.createElement("a", {
className: "right-link pull-right",
href: rightLink,
target: "_blank",
rel: "noopener noreferrer"
}, rightLinkTitle) : null) : null, /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
backend: _reactDndHtml5Backend.HTML5Backend
}, /*#__PURE__*/_react.default.createElement(_antd.Table, {
columns: columns,
bordered: isShowBordered,
pagination: isShowPagination ? pageData : false,
dataSource: tableData.content || [],
onChange: handleChangePage,
rowKey: rowKeyFun,
scroll: scroll,
components: components,
onRow: function onRow(record, index) {
return {
index: index,
moveRow: moveRow
};
}
}))));
};
DragSortTable.propTypes = {
rightLink: _propTypes.default.string,
// table 右侧链接
rightLinkTitle: _propTypes.default.string,
// table 右侧链接文案
tableTitle: _propTypes.default.string,
// table名字
columns: _propTypes.default.array.isRequired,
// 表格的配置项
isShowBordered: _propTypes.default.bool,
// table是否带有边框,
isShowPagination: _propTypes.default.bool,
// table是否展示分页
apiPath: _propTypes.default.string.isRequired,
// api接口,由于直接诶读取data.data的数组数据,所以该API不能使用分页
apiData: _propTypes.default.object,
// api请求附加的数据
apiMethod: _propTypes.default.string,
// api请求method,
sortType: _propTypes.default.array,
// table排序类型 [{ text: 'sortName', value: 'sortValue'}],
pageSizeOptions: _propTypes.default.array,
rowKeyFun: _propTypes.default.func,
scroll: _propTypes.default.object
};
DragSortTable.defaultProps = {
isShowBordered: true
};
var _default = exports.default = DragSortTable;