tntd
Version:
tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
470 lines (468 loc) • 18.4 kB
JavaScript
;
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _throttle2 = _interopRequireDefault(require("lodash/throttle"));
var _pickBy2 = _interopRequireDefault(require("lodash/pickBy"));
var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
var _get2 = _interopRequireDefault(require("lodash/get"));
var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _reactDom = require("react-dom");
var _prevLocale = require("../prev-locale");
var _spin = _interopRequireDefault(require("../spin"));
var _table = _interopRequireDefault(require("../table"));
function _getRequireWildcardCache(e) {
if ("function" != typeof WeakMap) return null;
var r = new WeakMap(),
t = new WeakMap();
return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
return e ? t : r;
})(e);
}
function _interopRequireWildcard(e, r) {
if (!r && e && e.__esModule) return e;
if (null === e || "object" != _typeof(e) && "function" != typeof e) return {
"default": e
};
var t = _getRequireWildcardCache(r);
if (t && t.has(e)) return t.get(e);
var n = {
__proto__: null
},
a = Object.defineProperty && Object.getOwnPropertyDescriptor;
for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
}
return n["default"] = e, t && t.set(e, n), n;
}
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
"default": e
};
}
function _classCallCheck(a, n) {
if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
}
function _defineProperties(e, r) {
for (var t = 0; t < r.length; t++) {
var o = r[t];
o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
}
}
function _createClass(e, r, t) {
return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
writable: !1
}), e;
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _callSuper(t, o, e) {
return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
}
function _possibleConstructorReturn(t, e) {
if (e && ("object" == _typeof(e) || "function" == typeof e)) return e;
if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
return _assertThisInitialized(t);
}
function _assertThisInitialized(e) {
if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return e;
}
function _isNativeReflectConstruct() {
try {
var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
} catch (t) {}
return (_isNativeReflectConstruct = function _isNativeReflectConstruct() {
return !!t;
})();
}
function _getPrototypeOf(t) {
return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
return t.__proto__ || Object.getPrototypeOf(t);
}, _getPrototypeOf(t);
}
function _inherits(t, e) {
if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
t.prototype = Object.create(e && e.prototype, {
constructor: {
value: t,
writable: !0,
configurable: !0
}
}), Object.defineProperty(t, "prototype", {
writable: !1
}), e && _setPrototypeOf(t, e);
}
function _setPrototypeOf(t, e) {
return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
return t.__proto__ = e, t;
}, _setPrototypeOf(t, e);
}
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;
};
/**
* @file QueryList
* @author you.zhang
*/
var QueryList = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
function QueryList(props) {
var _this;
_classCallCheck(this, QueryList);
var _a;
_this = _callSuper(this, QueryList, [props]);
Object.defineProperty(_this, "onWindowResize", {
enumerable: true,
configurable: true,
writable: true,
value: (0, _debounce2["default"])(function () {
var scroll = _this.state.scroll;
_this.setState({
scroll: Object.assign(Object.assign({}, scroll), {
y: window.innerHeight - (_this.initialTop || _this.props.top || 200)
})
});
}, 50)
});
Object.defineProperty(_this, "fetchData", {
enumerable: true,
configurable: true,
writable: true,
value: function value() {
var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
callback = _ref.callback,
_ref$showLoading = _ref.showLoading,
showLoading = _ref$showLoading === void 0 ? true : _ref$showLoading,
isInterval = _ref.isInterval;
var _this$props = _this.props,
query = _this$props.qlsProps.query,
defaultExpandAllRows = _this$props.defaultExpandAllRows,
rowKey = _this$props.rowKey,
actions = _this$props.actions;
var pagination = _this.state.pagination;
var hasPagination = _this.props.pagination !== false;
if (hasPagination) {
params = Object.assign({
pageSize: pagination.pageSize,
current: pagination.current
}, params);
}
showLoading && _this.setState({
loading: true
});
// 当用户操作查询还未得到服务端响应前,不要执行轮询请求时序问题导致覆盖
if (!isInterval) {
_this.isFetching = true;
}
actions.setData('submittedFormData', params);
return query((0, _pickBy2["default"])(params, function (val) {
return val !== '' && val !== null && val !== undefined;
})).then(function (result) {
var dataSource = hasPagination ? result.data || [] : result;
_this.setState(Object.assign({
loading: false,
dataSource: dataSource,
pagination: hasPagination ? {
pageSize: result.pageSize || pagination.pageSize || 10,
current: result.current || params.current || pagination.current || 1,
total: result.total || 0
} : null
}, defaultExpandAllRows ? {
expandedRowKeys: dataSource.map(function (row) {
return row[rowKey];
})
} : {}), function () {
actions.setData('pagination', _this.state.pagination);
actions.setData('dataSource', _this.state.dataSource);
});
})["finally"](function () {
_this.isFetching = false;
showLoading && _this.setState({
loading: false
});
callback && callback();
});
}
});
Object.defineProperty(_this, "updateDataSource", {
enumerable: true,
configurable: true,
writable: true,
value: function value(dataSource) {
_this.setState({
dataSource: dataSource
});
_this.props.actions.setData('dataSource', dataSource);
}
});
Object.defineProperty(_this, "updatePagination", {
enumerable: true,
configurable: true,
writable: true,
value: function value(pagination) {
_this.setState({
pagination: pagination
});
_this.props.actions.setData('pagination', pagination);
}
});
Object.defineProperty(_this, "onFormChange", {
enumerable: true,
configurable: true,
writable: true,
value: function value(values) {
_this.formData = (0, _pickBy2["default"])(Object.assign(Object.assign({}, values), {
sorter: (0, _get2["default"])(_this.formData, 'sorter'),
filters: (0, _get2["default"])(_this.formData, 'filters')
}), function (val) {
return val !== undefined;
});
}
});
Object.defineProperty(_this, "onSearch", {
enumerable: true,
configurable: true,
writable: true,
value: function value(values) {
var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
callback = _ref2.callback,
_ref2$showLoading = _ref2.showLoading,
showLoading = _ref2$showLoading === void 0 ? true : _ref2$showLoading;
_this.formData = Object.assign(Object.assign({}, _this.formData), values);
// this.props.actions.setData('formData', this.formData);
return _this.fetchData(_this.formData, {
callback: callback,
showLoading: showLoading
});
}
});
Object.defineProperty(_this, "onTableChange", {
enumerable: true,
configurable: true,
writable: true,
value: function value(pagination, filters, sorter) {
var _this$props2 = _this.props,
actions = _this$props2.actions,
localPagination = _this$props2.localPagination;
var tableParams = {
pageSize: pagination.pageSize,
current: pagination.current,
filters: (0, _isEmpty2["default"])(filters) ? undefined : filters,
sorter: (0, _isEmpty2["default"])(sorter) ? undefined : sorter
};
Object.assign(_this.formData, tableParams);
// 排序变化暂时不处理，因为有时可能是前端sorter不需要走请求
// 所以暂时排序有使用者自己处理
if (!localPagination) {
_this.fetchData(Object.assign(Object.assign({}, actions.getSubmittedFormData()), tableParams));
return;
}
var dataSource = _this.state.dataSource;
// 前端本地分页
if (localPagination) {
_this.setState({
dataSource: dataSource,
pagination: {
current: pagination.current,
pageSize: pagination.pageSize,
total: pagination.total
}
}, function () {
actions.setData('formData', _this.formData);
actions.setData('pagination', _this.state.pagination);
});
}
}
});
Object.defineProperty(_this, "onTableBodyScroll", {
enumerable: true,
configurable: true,
writable: true,
value: (0, _throttle2["default"])(function (evt) {
_this.updateIsScrollToBottom(evt.target);
}, 50)
});
Object.defineProperty(_this, "updateIsScrollToBottom", {
enumerable: true,
configurable: true,
writable: true,
value: function value(tableBody) {
var isScrollToBottom = function isScrollToBottom(tableBody) {
var scrollHeight = tableBody.scrollHeight,
scrollTop = tableBody.scrollTop,
offsetHeight = tableBody.offsetHeight;
return scrollHeight === scrollTop + offsetHeight;
};
_this.setState({
hasScrollToBottom: isScrollToBottom(tableBody)
});
}
});
_this.state = {
loading: false,
dataSource: [],
pagination: {
// pageSize: 20,
current: 1,
total: 0
},
scroll: props.scroll,
hasScrollToBottom: !((_a = props.scroll) === null || _a === void 0 ? void 0 : _a.y)
};
_this.tableRef = (0, _react.createRef)();
var actions = props.actions;
actions.on('search', _this.onSearch);
actions.on('setTableDataSource', _this.updateDataSource);
actions.on('setPagination', _this.updatePagination);
actions.on('setFormData', _this.onFormChange);
return _this;
}
_inherits(QueryList, _React$PureComponent);
return _createClass(QueryList, [{
key: "render",
value: function render() {
var _a = this.props,
columns = _a.columns,
children = _a.children,
pagination = _a.pagination,
_a$localPagination = _a.localPagination,
localPagination = _a$localPagination === void 0 ? false : _a$localPagination,
_a$paginationSticky = _a.paginationSticky,
paginationSticky = _a$paginationSticky === void 0 ? false : _a$paginationSticky,
_a$className = _a.className,
className = _a$className === void 0 ? '' : _a$className,
qlsProps = _a.qlsProps,
rest = __rest(_a, ["columns", "children", "pagination", "localPagination", "paginationSticky", "className", "qlsProps"]);
var _this$state = this.state,
dataSource = _this$state.dataSource,
loading = _this$state.loading,
_this$state$expandedR = _this$state.expandedRowKeys,
expandedRowKeys = _this$state$expandedR === void 0 ? [] : _this$state$expandedR,
scroll = _this$state.scroll,
hasScrollToBottom = _this$state.hasScrollToBottom;
var hasPagination = typeof pagination !== 'undefined' ? pagination : true;
var paginationInfo = Object.assign(Object.assign(Object.assign({
hideOnSinglePage: false
}, this.state.pagination), {
// size: 'small',
showQuickJumper: true,
showSizeChanger: true,
showTotal: function showTotal(total) {
return (0, _prevLocale.getText)('totalRecords', (0, _prevLocale.getLanguage)(), total);
}
}), pagination || {});
var expandProps = Object.assign({}, rest.defaultExpandAllRows ? {
expandedRowKeys: expandedRowKeys,
onExpandedRowsChange: this.onExpandedRowsChange
} : {});
return _react["default"].createElement("div", {
className: (0, _classnames["default"])("tnt-querylistscene-list ".concat(className), {
paginationSticky: paginationSticky,
hasScrollToBottom: hasScrollToBottom
})
}, _react["default"].createElement(_spin["default"], {
spinning: loading
}, _react["default"].createElement(_table["default"], Object.assign({
ref: this.tableRef,
shadowed: false,
bordered: false
}, expandProps, rest, columns ? {
columns: columns
} : {}, {
scroll: scroll,
dataSource: dataSource,
pagination: hasPagination ? paginationInfo : localPagination,
onChange: this.onTableChange
}), !columns && children)));
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
var _a;
var _this$props3 = this.props,
qlsProps = _this$props3.qlsProps,
actions = _this$props3.actions;
this.formData = Object.assign(Object.assign({}, actions.getFormData() || {}), qlsProps.memory ? actions.getPagination() : {});
if (!qlsProps.initSearch) {
// 默认进来不请求
this.fetchData(this.formData)["finally"](function () {
// 轮询
if (qlsProps.interval && !_this2.isUnmounted) {
var _doIntervalQuery = function doIntervalQuery(ms) {
// 组件unmounted后，不执行轮训逻辑
if (!_this2.isUnmounted) {
_this2.timmer = setTimeout(function () {
// 如果有查询请求还未结束，则该次轮询不执行，重新设置下次轮询
if (!_this2.isFetching) {
_this2.fetchData(actions.getSubmittedFormData(), {
isInterval: true,
showLoading: false
}).then(function () {
_doIntervalQuery(ms);
});
} else {
_doIntervalQuery(ms);
}
}, ms);
}
};
_doIntervalQuery(qlsProps.interval);
}
});
}
if ((_a = this.state.scroll) === null || _a === void 0 ? void 0 : _a.y) {
window.addEventListener('resize', this.onWindowResize);
if (this.tableRef.current) {
// table内垂直滚动，需要动态设置分页组件上阴影样式
var tableBody = (0, _reactDom.findDOMNode)(this.tableRef.current).querySelector('.ant-table-body');
this.initialTop = window.innerHeight - this.state.scroll.y;
this.updateIsScrollToBottom(tableBody);
tableBody.addEventListener('scroll', this.onTableBodyScroll);
}
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
var actions = this.props.actions;
this.isUnmounted = true;
actions.removeListener('search', this.onSearch);
actions.removeListener('setTableDataSource', this.updateDataSource);
actions.removeListener('setPagination', this.updatePagination);
actions.removeListener('setFormData', this.onFormChange);
window.removeEventListener('resize', this.onWindowResize);
this.timmer && clearTimeout(this.timmer);
}
}]);
}(_react["default"].PureComponent);