@ttk/component
Version:
ttk组件库
1,291 lines (1,124 loc) • 55 kB
JavaScript
import { _ as _defineProperty } from '../defineProperty-847730aa.js';
import React__default, { Fragment, useState, PureComponent } from 'react';
import { _ as _inherits, a as _getPrototypeOf, b as _possibleConstructorReturn, c as _classCallCheck, d as _createClass, e as _assertThisInitialized } from '../getPrototypeOf-b95655c5.js';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import omit from 'omit.js';
import { _ as _toConsumableArray } from '../toConsumableArray-04633de7.js';
import { _ as _extends } from '../extends-b1af4ff7.js';
import { _ as _slicedToArray } from '../slicedToArray-da0a5f5c.js';
import { _ as _objectWithoutProperties } from '../objectWithoutProperties-0c3c7796.js';
import { Column as Column$1, Cell as Cell$1, Table, ColumnGroup as ColumnGroup$1 } from 'fixed-data-table-2';
import Icon from '../icon';
import NoData from '../noData';
import { Spin } from 'antd';
import ariaAttributes from 'fixed-data-table-2/internal/ariaAttributes';
import columnWidths from 'fixed-data-table-2/internal/columnWidths';
import columnTemplates from 'fixed-data-table-2/internal/columnTemplates';
import scrollbarsVisible from 'fixed-data-table-2/internal/scrollbarsVisible';
import tableHeights from 'fixed-data-table-2/internal/tableHeights';
import Dropdown from '../dropdown';
import Checkbox from '../checkbox';
import Menu from '../menu';
import Radio from '../radio';
import Tooltip from '../tooltip';
import '../_commonjsHelpers-471920d6.js';
import '../unsupportedIterableToArray-01f9082a.js';
function SequenceColumn(props) {
var enableLink = props.enableLink,
startSequence = props.startSequence,
enableSequenceAddDelrow = props.enableSequenceAddDelrow,
footer = props.footer,
onAddrow = props.onAddrow,
onDelrow = props.onDelrow,
onClick = props.onClick,
sequenceFixed = props.sequenceFixed;
var getContent = function getContent(ps) {
//序号列显示内容，如果有开始序号那么加上
var text = startSequence ? startSequence + ps.rowIndex + '' : ps.rowIndex + 1 + ''; //启用链接，会响应click事件
if (enableLink) {
return /*#__PURE__*/React__default.createElement("div", {
className: "mk-datagrid-sequence-cell",
onClick: onClick ? function () {
return onClick(ps);
} : undefined
}, enableSequenceAddDelrow ? /*#__PURE__*/React__default.createElement(Icon, {
title: "\u5897\u884C",
type: "plus-circle-o",
className: "mk-datagrid-editable-add-row",
onClick: function onClick() {
return onAddrow ? onAddrow(ps) : undefined;
}
}) : null, /*#__PURE__*/React__default.createElement("a", {
className: enableSequenceAddDelrow ? 'addDelrow' : ''
}, text), enableSequenceAddDelrow ? /*#__PURE__*/React__default.createElement(Icon, {
title: "\u5220\u884C",
type: "minus-circle-o",
className: "mk-datagrid-editable-remove-row",
onClick: function onClick() {
return onDelrow ? onDelrow(ps) : undefined;
}
}) : null);
}
return /*#__PURE__*/React__default.createElement("div", {
className: "mk-datagrid-sequence-cell"
}, enableSequenceAddDelrow ? /*#__PURE__*/React__default.createElement(Icon, {
title: "\u5897\u884C",
type: "plus-circle-o",
className: "mk-datagrid-editable-add-row",
onClick: function onClick() {
return onAddrow ? onAddrow(ps) : undefined;
}
}) : null, /*#__PURE__*/React__default.createElement("a", {
className: enableSequenceAddDelrow ? 'addDelrow' : '',
style: {
color: "#444444",
cursor: "default"
}
}, text), enableSequenceAddDelrow ? /*#__PURE__*/React__default.createElement(Icon, {
title: "\u5220\u884C",
type: "minus-circle-o",
className: "mk-datagrid-editable-remove-row",
onClick: function onClick() {
return onDelrow ? onDelrow(ps) : undefined;
}
}) : null);
};
return /*#__PURE__*/React__default.createElement(Column$1, {
key: "_sequence",
width: 42,
fixed: sequenceFixed,
cell: function cell(ps) {
return getContent(ps);
},
header: /*#__PURE__*/React__default.createElement(Cell$1, null, "\u5E8F\u53F7"),
footer: footer
});
}
function AddDelrow$1(props) {
var enableAddDelrow = props.enableAddDelrow,
onAddrow = props.onAddrow,
onDelrow = props.onDelrow;
var getContent = function getContent(ps) {
return /*#__PURE__*/React__default.createElement("div", {
className: "mk-datagrid-addDelRow-cell"
}, enableAddDelrow ? /*#__PURE__*/React__default.createElement(Icon, {
title: "\u5897\u884C",
type: "plus-circle-o",
className: "mk-datagrid-editable-add-row",
onClick: function onClick() {
return onAddrow ? onAddrow(ps) : undefined;
}
}) : null, enableAddDelrow ? /*#__PURE__*/React__default.createElement(Icon, {
title: "\u5220\u884C",
type: "minus-circle-o",
className: "mk-datagrid-editable-remove-row",
onClick: function onClick() {
return onDelrow ? onDelrow(ps) : undefined;
}
}) : null);
};
return /*#__PURE__*/React__default.createElement(Column$1, {
key: "_sequence",
width: 0,
fixed: true,
cell: function cell(ps) {
return getContent(ps);
},
header: /*#__PURE__*/React__default.createElement(Cell$1, {
style: {
position: 'relative',
left: '-25px',
background: '#fff',
width: '24px'
}
}),
footer: /*#__PURE__*/React__default.createElement(Cell$1, {
style: {
position: 'relative',
left: '-25px',
background: '#fff',
width: '24px'
}
})
});
}
function AddDelrow(props) {
var enableUpDownrow = props.enableUpDownrow,
onUprow = props.onUprow,
onDownrow = props.onDownrow,
width = props.width;
var getContent = function getContent(ps) {
return /*#__PURE__*/React__default.createElement("div", {
className: "mk-datagrid-upDownRow-cell",
style: {
position: 'relative',
left: width
}
}, enableUpDownrow ? /*#__PURE__*/React__default.createElement(Icon, {
title: "\u4E0A\u79FB",
type: "up",
className: "mk-datagrid-editable-up-row",
onClick: function onClick() {
return onUprow ? onUprow(ps) : undefined;
}
}) : null, enableUpDownrow ? /*#__PURE__*/React__default.createElement(Icon, {
title: "\u4E0B\u79FB",
type: "down",
className: "mk-datagrid-editable-down-row",
onClick: function onClick() {
return onDownrow ? onDownrow(ps) : undefined;
}
}) : null);
};
return /*#__PURE__*/React__default.createElement(Column$1, {
key: "_sequence",
width: 0,
cell: function cell(ps) {
return getContent(ps);
},
fixed: true,
header: /*#__PURE__*/React__default.createElement(Cell$1, {
style: {
position: 'relative',
left: width,
background: '#fff',
width: '24px'
}
}),
footer: /*#__PURE__*/React__default.createElement(Cell$1, {
style: {
position: 'relative',
left: width,
background: '#fff',
width: '24px'
}
})
});
}
function EndDelRow(props) {
var enableEndDelRow = props.enableEndDelRow,
onDelrow = props.onDelrow,
width = props.width;
var getContent = function getContent(ps) {
return /*#__PURE__*/React__default.createElement("div", {
className: "mk-datagrid-upDownRow-cell",
style: {
position: 'relative',
left: width
}
}, enableEndDelRow ? /*#__PURE__*/React__default.createElement(Icon, {
title: "\u5220\u9664",
type: "close",
className: "mk-datagrid-editable-up-row",
onClick: function onClick() {
return onDelrow ? onDelrow(ps) : undefined;
}
}) : null);
};
return /*#__PURE__*/React__default.createElement(Column$1, {
key: "_sequence",
width: 0,
cell: function cell(ps) {
return getContent(ps);
},
fixed: true,
header: /*#__PURE__*/React__default.createElement(Cell$1, {
style: {
position: 'relative',
left: width,
background: '#fff',
width: '24px'
}
}),
footer: /*#__PURE__*/React__default.createElement(Cell$1, {
style: {
position: 'relative',
left: width,
background: '#fff',
width: '24px'
}
})
});
}
var _excluded$3 = ["columns", "onColumnResizeEnd", "onColumnResizeEndCallback", "allowResizeColumn"],
_excluded2 = ["key", "rowsCount", "headerHeight", "rowHeight", "groupHeaderHeight", "footerHeight", "width", "height", "heightFromRowsCount", "readonly", "enableSequence", "enableSequenceAddDelrow", "startSequence", "enableAddDelrow", "enableUpDownrow", "enableEndDelRow", "sequenceFooter", "onAddrow", "onDelrow", "onUprow", "onDownrow", "onRowClick", "onRowDoubleClick", "onRowMouseEnter", "onRowMouseLeave", "onScrollEnd", "scrollToRow", "isAutoCalcScrollToRow", "scrollToColumn", "columns", "isColumnSort", "isColumnResizing", "onColumnResizeEnd", "onSortChange", "scrollTop", "sequencePostion", "sequenceFixed"];
function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function TableComponent(props) {
var columns = props.columns,
onColumnResizeEnd = props.onColumnResizeEnd,
onColumnResizeEndCallback = props.onColumnResizeEndCallback,
allowResizeColumn = props.allowResizeColumn,
other = _objectWithoutProperties(props, _excluded$3);
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
tableColumns = _useState2[0],
setTableColumns = _useState2[1];
onColumnResizeEndCallback = function onColumnResizeEndCallback(newColumnWidth, columnKey) {
if (newColumnWidth < 41) newColumnWidth = 41;
if (allowResizeColumn) {
setTableColumns((tableColumns || columns).map(function (m) {
var _m$props;
if ((m === null || m === void 0 ? void 0 : (_m$props = m.props) === null || _m$props === void 0 ? void 0 : _m$props.columnKey) === columnKey) {
return /*#__PURE__*/React__default.cloneElement(m, _objectSpread$5(_objectSpread$5({}, m.props), {}, {
width: newColumnWidth
}));
}
return m;
}));
} else {
onColumnResizeEnd && onColumnResizeEnd(newColumnWidth, columnKey);
}
};
var cols = tableColumns ? columns.map(function (m) {
if (m && m.props && m.props.columnKey) {
var item = tableColumns.find(function (f) {
return f && f.props && f.props.columnKey === m.props.columnKey;
});
if (item && item.props.width) {
return /*#__PURE__*/React__default.cloneElement(m, _objectSpread$5(_objectSpread$5({}, m.props), {}, {
width: item.props.width
}));
}
}
return m;
}) : columns;
return /*#__PURE__*/React__default.createElement(Table, _extends({}, other, {
onColumnResizeEndCallback: onColumnResizeEndCallback
}), cols);
}
function GridComponent(props) {
var key = props.key,
rowsCount = props.rowsCount,
headerHeight = props.headerHeight,
rowHeight = props.rowHeight,
groupHeaderHeight = props.groupHeaderHeight,
footerHeight = props.footerHeight,
width = props.width,
height = props.height,
heightFromRowsCount = props.heightFromRowsCount,
readonly = props.readonly,
enableSequence = props.enableSequence,
enableSequenceAddDelrow = props.enableSequenceAddDelrow,
startSequence = props.startSequence,
enableAddDelrow = props.enableAddDelrow,
enableUpDownrow = props.enableUpDownrow,
enableEndDelRow = props.enableEndDelRow,
sequenceFooter = props.sequenceFooter,
onAddrow = props.onAddrow,
onDelrow = props.onDelrow,
onUprow = props.onUprow,
onDownrow = props.onDownrow,
onRowClick = props.onRowClick,
onRowDoubleClick = props.onRowDoubleClick,
onRowMouseEnter = props.onRowMouseEnter,
onRowMouseLeave = props.onRowMouseLeave,
onScrollEnd = props.onScrollEnd,
scrollToRow = props.scrollToRow,
isAutoCalcScrollToRow = props.isAutoCalcScrollToRow,
scrollToColumn = props.scrollToColumn,
columns = props.columns;
props.isColumnSort;
props.isColumnResizing;
props.onColumnResizeEnd;
props.onSortChange;
var scrollTop = props.scrollTop,
_props$sequencePostio = props.sequencePostion,
sequencePostion = _props$sequencePostio === void 0 ? 0 : _props$sequencePostio,
_props$sequenceFixed = props.sequenceFixed,
sequenceFixed = _props$sequenceFixed === void 0 ? true : _props$sequenceFixed,
other = _objectWithoutProperties(props, _excluded2); //高度根据行数计算
if (heightFromRowsCount) {
height = headerHeight + rowHeight * rowsCount + footerHeight;
}
columns = _toConsumableArray(columns);
if (props.allowResizeColumn) {
columns = columns.map(function (m) {
if (m && m.props) {
return /*#__PURE__*/React__default.cloneElement(m, _objectSpread$5(_objectSpread$5({}, m.props), {}, {
isResizable: m.props.isResizable !== undefined ? m.props.isResizable : true
}));
}
return m;
});
}
if (enableSequence) {
if (columns.length > 0 && columns[0] && columns[0].props && columns[0].props.children) {
columns[0].props.children.splice(sequencePostion, 0, SequenceColumn({
startSequence: startSequence,
enableSequenceAddDelrow: readonly === false ? enableSequenceAddDelrow : false,
footer: sequenceFooter,
onAddrow: onAddrow,
onDelrow: onDelrow,
sequenceFixed: sequenceFixed
}));
} else {
columns.splice(sequencePostion, 0, SequenceColumn({
startSequence: startSequence,
enableSequenceAddDelrow: readonly === false ? enableSequenceAddDelrow : false,
footer: sequenceFooter,
onAddrow: onAddrow,
onDelrow: onDelrow,
sequenceFixed: sequenceFixed
}));
}
}
/**
* 行插入、删除
*/
if (enableAddDelrow) {
columns.splice(0, 0, AddDelrow$1({
enableAddDelrow: readonly === false ? enableAddDelrow : false,
onAddrow: onAddrow,
onDelrow: onDelrow
}));
}
/**
* 行上移、下移
*/
if (enableUpDownrow) {
columns.splice(0, 0, AddDelrow({
enableUpDownrow: readonly === false ? enableUpDownrow : false,
onUprow: onUprow,
onDownrow: onDownrow,
width: width
}));
}
/**
* 行 末尾删除
*/
if (enableEndDelRow) {
columns.splice(0, 0, EndDelRow({
enableEndDelRow: readonly === false ? enableEndDelRow : false,
onDelrow: onDelrow,
width: width
}));
}
var onColumnResizeEndCallback = function onColumnResizeEndCallback(newColumnWidth, columnKey) {
if (newColumnWidth < 41) newColumnWidth = 41;
props.onColumnResizeEnd && props.onColumnResizeEnd(newColumnWidth, columnKey);
};
if (isAutoCalcScrollToRow) {
var scrollOffsetHeight = (props.oldRowsCount - rowsCount) * rowHeight;
scrollOffsetHeight = scrollOffsetHeight > 0 ? 0 : scrollOffsetHeight;
var _scrollTop = props.scrollTop || 0;
_scrollTop += scrollOffsetHeight;
_scrollTop = _scrollTop < 0 ? 0 : _scrollTop;
scrollToRow = parseInt(_scrollTop / rowHeight);
}
props.loading = !props.loading ? {
spinning: false
} : props.loading;
if (!props.loading) {
props.loading = {
spinning: false
};
} else if (props.loading == true) {
props.loading = {
spinning: props.loading
};
}
var size = props.loading && props.loading.size ? props.loading.size : "large",
tip = props.loading && props.loading.tip ? props.loading.tip : "数据加载中...",
delay = props.loading && props.loading.delay ? props.loading.delay : props.delay ? props.delay : 2000;
var tableProps = _objectSpread$5(_objectSpread$5({}, other), {}, {
key: key,
rowsCount: height == 0 || width == 0 ? 0 : rowsCount,
headerHeight: headerHeight || 0,
rowHeight: rowHeight,
groupHeaderHeight: groupHeaderHeight || 0,
footerHeight: footerHeight || 0,
width: width,
height: height || 0,
isColumnResizing: false,
scrollToRow: scrollToRow,
scrollToColumn: height != 0 && width != 0 ? scrollToColumn : undefined,
onRowDoubleClick: readonly === false ? undefined : onRowDoubleClick,
onRowClick: readonly === false ? undefined : onRowClick,
onRowMouseEnter: readonly === true ? undefined : onRowMouseEnter,
onRowMouseLeave: readonly === false ? undefined : onRowMouseLeave,
onScrollEnd: onScrollEnd,
scrollTop: scrollTop
});
return /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(Spin, _extends({
delay: delay,
size: size,
tip: tip
}, props.loading), /*#__PURE__*/React__default.createElement("div", {
style: {
position: "relative"
}
}, props.allowResizeColumn ? /*#__PURE__*/React__default.createElement(TableComponent, _extends({}, tableProps, {
columns: columns
})) : /*#__PURE__*/React__default.createElement(Table, _extends({}, tableProps, {
onColumnResizeEndCallback: onColumnResizeEndCallback
}), columns), rowsCount == 0 || height == 0 || width == 0 ? /*#__PURE__*/React__default.createElement(NoData, {
style: {
position: "absolute",
height: "220px",
top: "50%",
marginTop: "-110px"
}
}, "\u6682\u65E0\u6570\u636E") : "")));
}
var _excluded$2 = ["height", "width", "style", "className", "align", "children", "value", "tip"];
function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var cellComponent = /*#__PURE__*/function (_PureComponent) {
_inherits(cellComponent, _PureComponent);
var _super = _createSuper$2(cellComponent);
function cellComponent() {
_classCallCheck(this, cellComponent);
return _super.apply(this, arguments);
}
_createClass(cellComponent, [{
key: "render",
value: function render() {
var _classNames;
var _this$props = this.props,
height = _this$props.height,
width = _this$props.width,
style = _this$props.style,
className = _this$props.className,
align = _this$props.align,
children = _this$props.children,
value = _this$props.value,
tip = _this$props.tip,
other = _objectWithoutProperties(_this$props, _excluded$2);
var cls = classNames((_classNames = {
'mk-datagrid-cellContent': true
}, _defineProperty(_classNames, "mk-datagrid-cellContent-".concat(align), !!align), _defineProperty(_classNames, className, !!className), _classNames));
var innerStyle = _objectSpread$4({
height: height,
width: width
}, style);
var title;
if (tip) {
title = {
title: children || value
};
}
return /*#__PURE__*/React__default.createElement("div", _extends({}, other, {
className: cls,
style: innerStyle
}, title), children || value);
}
}]);
return cellComponent;
}(PureComponent);
var _excluded$1 = ["height", "width", "style", "className", "align", "sand", "value", "dataType", "precision", "enableTooltip", "enableEllipsis"];
function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var textCellComponent = /*#__PURE__*/function (_PureComponent) {
_inherits(textCellComponent, _PureComponent);
var _super = _createSuper$1(textCellComponent);
function textCellComponent() {
_classCallCheck(this, textCellComponent);
return _super.apply(this, arguments);
}
_createClass(textCellComponent, [{
key: "render",
value: function render() {
var _classNames;
var _this$props = this.props,
height = _this$props.height,
width = _this$props.width,
style = _this$props.style,
className = _this$props.className,
align = _this$props.align,
sand = _this$props.sand,
value = _this$props.value,
dataType = _this$props.dataType,
precision = _this$props.precision,
enableTooltip = _this$props.enableTooltip,
enableEllipsis = _this$props.enableEllipsis,
other = _objectWithoutProperties(_this$props, _excluded$1);
var cls = classNames((_classNames = {
'mk-datagrid-cellContent': true
}, _defineProperty(_classNames, "mk-datagrid-cellContent-".concat(align), !!align), _defineProperty(_classNames, className, !!className), _classNames));
var innerStyle = _objectSpread$3({
height: height,
width: width
}, style);
switch (dataType) {
case 'bool':
value = value == undefined || value == false ? '否' : '是';
break;
case 'float':
if (precision && !!value) {
value = parseFloat(value).toFixed(precision);
}
break;
}
if (value == null || value == undefined) {
value = '';
}
value = value + '';
if (sand) {
value = sand(value);
}
var ext = {};
if (enableTooltip) {
ext.title = value;
}
if (enableEllipsis) {
ext.title = value;
value = [/*#__PURE__*/React__default.createElement("span", {
style: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}
}, value)];
}
return /*#__PURE__*/React__default.createElement("div", _extends({}, other, {
className: cls,
style: innerStyle
}, ext), value);
}
}]);
return textCellComponent;
}(PureComponent);
function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var addEvent = function addEvent(ele, funName, fun) {
if (!ele) return;
if (ele.addEventListener) {
ele.addEventListener(funName, fun, false);
} else if (ele.attachEvent) {
ele.attachEvent("on" + funName, fun);
} else {
ele["on" + funName] = fun;
}
};
var removeEvent = function removeEvent(ele, funName, fun) {
if (!ele) return;
if (ele.removeEventListener) {
ele.removeEventListener(funName, fun, false);
} else if (win.detachEvent) {
ele.detachEvent("on" + funName, fun);
} else {
ele["on" + funName] = undefined;
}
}; //import _ from 'underscore'
var DataGrid = /*#__PURE__*/function (_PureComponent) {
_inherits(DataGrid, _PureComponent);
var _super = _createSuper(DataGrid);
function DataGrid(props) {
var _this;
_classCallCheck(this, DataGrid);
_this = _super.call(this, props);
_this.state = {
height: 0,
width: 0,
rowsCount: 0,
scrollLeft: 0
};
_this.onMouseEnter = function (e) {
try {
var dom = e.target.parentElement.parentElement.nextElementSibling;
if (dom) dom.setAttribute("data-before", "show");
} catch (ex) {
console.error("gridComponent onMouseEnter error:", ex);
}
};
_this.onMouseLeave = function (e) {
try {
var dom = e.target.parentElement.parentElement.nextElementSibling;
if (dom) dom.setAttribute("data-before", "hide");
} catch (ex) {
console.error("gridComponent onMouseEnter error:", ex);
}
};
_this.onCellGroup2MouseEnter = function (e) {
try {
var dom = e.target.parentElement.parentElement.nextElementSibling.nextElementSibling;
var isScrollEnd = true;
var horizontalBar = document.querySelector("." + _this.gridClass + " .ScrollbarLayout_face.ScrollbarLayout_faceHorizontal.public_Scrollbar_face");
var width = horizontalBar && horizontalBar.style.width;
var transformX = horizontalBar && horizontalBar.style.transform;
if (width && !transformX) isScrollEnd = false;
if (width && transformX) {
width = width.replace("px", "");
transformX = transformX.replace("translate3d(", "").split("px")[0];
if (Number(horizontalBar.parentElement.style.width.replace("px", "")) <= Number(width) + Number(transformX) + 5) isScrollEnd = true;else isScrollEnd = false;
}
if (dom && isScrollEnd) dom.setAttribute("data-before", "show");
} catch (ex) {
console.error("gridComponent onMouseEnter error:", ex);
}
};
_this.onCellGroup2MouseLeave = function (e) {
try {
var dom = e.target.parentElement.parentElement.nextElementSibling.nextElementSibling;
if (dom) dom.setAttribute("data-before", "hide");
} catch (ex) {
console.error("gridComponent onMouseEnter error:", ex);
}
};
_this.onScrollEnd = function (x, y, n, m) {
if (!!_this.props.rememberScrollTop) {
window[_this.props.className] = y;
var dataInput = document.getElementById('data_input');
if (dataInput) {
dataInput["".concat(_this.props.className, "-x")] = x;
dataInput["".concat(_this.props.className, "-y")] = y;
dataInput["".concat(_this.props.className, "-n")] = n;
dataInput["".concat(_this.props.className, "-m")] = m; // console.log('-------------------------', x, y, n, m)
}
}
_this.props.onScrollEnd && _this.props.onScrollEnd(x, y);
};
_this.filterChildren = function () {
if (!_this.props.columns) return;
_this.props.columns.forEach(function (item, index) {
if (item && item.props && item.props.isColumnGroup && item.props.children && item.props.children.length > 0) {
var newChildren = [];
item.props.children.forEach(function (item) {
if (item && item.key != '_sequence') newChildren.push(item);
});
_this.props.columns[index].props.children = newChildren;
}
});
};
_this.onResize = _this.onResize.bind(_assertThisInitialized(_this)); // this.onScrollEnd = this.onScrollEnd.bind(this)
// this.update = this.update.bind(this)
// this.setStateDebounce = _.debounce(({ width, height }) => {
// this.setState({
// height,
// width
// })
// }, 1)
_this.rowsCount = props.rowsCount;
_this.gridClass = "col-resize-" + new Date().valueOf();
return _this;
}
_createClass(DataGrid, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
//if (this.props.isFix === true) return
var _this$props = this.props,
width = _this$props.width,
height = _this$props.height;
if (!width || !height) {
this.refreshSize();
var win = window;
if (win.addEventListener) {
win.addEventListener('resize', this.onResize, false);
} else if (win.attachEvent) {
win.attachEvent('onresize', this.onResize);
} else {
win.onresize = this.onResize;
}
var dom = ReactDOM.findDOMNode(this);
this.setState({
height: dom.offsetHeight,
width: dom.offsetWidth
});
}
setTimeout(function () {
var cellGroup1 = document.querySelector("." + _this2.gridClass + " .public_fixedDataTable_header .fixedDataTableCellGroupLayout_cellGroupWrapper .public_fixedDataTableCell_main:last-child");
addEvent(cellGroup1, "mouseenter", _this2.onMouseEnter);
addEvent(cellGroup1, "mouseleave", _this2.onMouseLeave);
var cellGroup2 = document.querySelector("." + _this2.gridClass + " .public_fixedDataTable_header .fixedDataTableCellGroupLayout_cellGroupWrapper:nth-child(2) .public_fixedDataTableCell_main:last-child");
addEvent(cellGroup2, "mouseenter", _this2.onCellGroup2MouseEnter);
addEvent(cellGroup2, "mouseleave", _this2.onCellGroup2MouseLeave);
}, 100);
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(prevProps, prevState) {
// console.log(prevProps)
this.rowsCount = this.state.rowsCount;
this.setState({
rowsCount: prevProps.rowsCount // scrollTop: prevProps.top
});
} // shouldComponentUpdate(prevProps, prevState){
// console.log('shouldComponentUpdate',prevState)
// return true
// }
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
//if (this.props.isFix === true) return
var win = window;
if (win.removeEventListener) {
win.removeEventListener('resize', this.onResize, false);
} else if (win.detachEvent) {
win.detachEvent('onresize', this.onResize);
} else {
win.onresize = undefined;
}
var cellGroup1 = document.querySelector("." + this.gridClass + " .public_fixedDataTable_header .fixedDataTableCellGroupLayout_cellGroupWrapper .public_fixedDataTableCell_main:last-child");
var cellGroup2 = document.querySelector("." + this.gridClass + " .public_fixedDataTable_header .fixedDataTableCellGroupLayout_cellGroupWrapper:nth-child(2) .public_fixedDataTableCell_main:last-child");
removeEvent(cellGroup1, "mouseenter", this.onMouseEnter);
removeEvent(cellGroup1, "mouseleave", this.onMouseLeave);
removeEvent(cellGroup2, "mouseenter", this.onCellGroup2MouseEnter);
removeEvent(cellGroup2, "mouseleave", this.onCellGroup2MouseLeave);
var newProps = {
elementHeights: {},
tableSize: {},
scrollFlags: {},
rowSettings: {},
keyboardScrollEnabled: false,
keyboardPageEnabled: false,
touchScrollEnabled: false,
stopScrollPropagation: false
};
ariaAttributes(newProps);
columnWidths(newProps);
columnTemplates(newProps);
scrollbarsVisible(newProps);
tableHeights(newProps);
}
}, {
key: "onResize",
value: function onResize() {
// this.refreshSize()
var self = this;
setTimeout(function (_) {
var dom = ReactDOM.findDOMNode(self);
self.setState({
height: dom.offsetHeight,
width: dom.offsetWidth
});
}, 0);
if (this.props.onResize) setTimeout(this.props.onResize, 16);
}
}, {
key: "refreshSize",
value: function refreshSize() {
var dom = ReactDOM.findDOMNode(this);
this.setState({
height: dom.offsetHeight,
width: dom.offsetWidth
});
} //会造成表格的重复渲染
// componentDidUpdate() {
// let width = ReactDOM.findDOMNode(this).offsetWidth
// if (width !== this.state.width) {
// this.setState({
// width: width
// })
// }
// }
}, {
key: "render",
value: function render() {
var _classNames,
_this3 = this;
this.filterChildren();
var className = classNames((_classNames = {
'mk-datagrid': true,
'mk-datagrid-editable': this.props.readonly === false
}, _defineProperty(_classNames, this.props.className, !!this.props.className), _defineProperty(_classNames, 'mk-addDel', this.props.enableAddDelrow || this.props.showBtnWidth), _defineProperty(_classNames, 'mk-upDown', this.props.enableUpDownrow || this.props.showBtnWidth), _defineProperty(_classNames, 'mk-endDel', this.props.enableEndDelRow || this.props.showBtnWidth), _defineProperty(_classNames, 'mk-ellipsis', this.props.ellipsis), _classNames)); //填制凭证页签切换出现空白行，height和width做特殊处理
var height = this.props.id == 'proofCharge' || this.props.id == 'accountSubjectGrid' ? this.state.height : this.state.height || this.props.height,
width = this.props.id == 'proofCharge' || this.props.id == 'accountSubjectGrid' ? this.state.width : this.state.width || this.props.width,
oldRowsCount = this.rowsCount,
onScrollEnd = this.onScrollEnd,
// scrollLeft = this.state.scrollLeft,
// scrollTop = this.changetab == this.props.changetab ? this.state.scrollTop : 0,
loading = this.props.loading,
scrollToRow,
dataInput = document.getElementById('data_input'),
scrollTop = 0,
hasFocus = false;
if (dataInput) {
dataInput.tabFocus.forEach(function (o) {
if (_this3.props.className && _this3.props.className.includes(o)) {
hasFocus = true;
}
});
}
if (this.props.enableAddDelrow || this.props.enableUpDownrow || this.props.enableEndDelRow || this.props.showBtnWidth) {
height = height;
width = width - 50;
}
if (this.props.isFix) {
if (height > this.props.height) height = this.props.height;
}
if (this.props.rememberScrollTop && window[this.props.className]) {
var _height = this.state.height;
var count = 0;
if (_height) {
_height = _height - this.props.headerHeight - 15;
if (_height > 0) {
count = Math.floor(_height / this.props.rowHeight);
if (typeof count != 'number') {
count = 0;
}
}
}
if (this.props.searchFlag == true) {
scrollToRow = scrollToRow;
} else {
scrollToRow = parseInt(window[this.props.className] / this.props.rowHeight) + count;
}
}
if (scrollToRow) {
if (this.props.selfCalcScrollToRow) {
//会计科目页签切换scrollToRow计算值不对，造成出现空白行，特殊处理
return /*#__PURE__*/React__default.createElement("div", {
className: className,
style: this.props.style ? this.props.style : {},
onKeyDown: this.props.onKeyDown,
onKeyUp: this.props.onKeyUp
}, GridComponent(_objectSpread$2(_objectSpread$2({}, omit(this.props, ['className'])), {}, {
width: width,
height: height,
oldRowsCount: oldRowsCount,
onScrollEnd: onScrollEnd,
scrollToRow: scrollToRow,
// scrollTop,
loading: loading
})));
}
if (dataInput && dataInput["".concat(this.props.className, "-n")]) {
scrollToRow = Math.floor((dataInput["".concat(this.props.className, "-n")] + dataInput["".concat(this.props.className, "-m")]) / 2 + 1);
if (hasFocus && !dataInput['datagridKeydown'] && dataInput["".concat(this.props.className, "-y")] < 1200) {
scrollTop = Math.floor(dataInput["".concat(this.props.className, "-n")] * 37);
} else if (dataInput['datagridKeydown']) {
scrollTop = this.props.scrollTop;
} else {
scrollTop = -1;
}
}
return /*#__PURE__*/React__default.createElement("div", {
className: className,
style: this.props.style ? this.props.style : {},
onKeyDown: this.props.onKeyDown,
onKeyUp: this.props.onKeyUp
}, scrollTop >= 0 ? GridComponent(_objectSpread$2(_objectSpread$2({}, omit(this.props, ['className'])), {}, {
width: width,
height: height,
oldRowsCount: oldRowsCount,
onScrollEnd: onScrollEnd,
// scrollToRow,
scrollTop: scrollTop,
loading: loading
})) : GridComponent(_objectSpread$2(_objectSpread$2({}, omit(this.props, ['className'])), {}, {
width: width,
height: height,
oldRowsCount: oldRowsCount,
onScrollEnd: onScrollEnd,
scrollToRow: scrollToRow,
// scrollTop,
loading: loading
})));
} else {
return /*#__PURE__*/React__default.createElement("div", {
className: className,
style: this.props.style ? this.props.style : {},
onKeyDown: this.props.onKeyDown,
onKeyUp: this.props.onKeyUp
}, GridComponent(_objectSpread$2(_objectSpread$2({}, omit(this.props, ['className'])), {}, {
width: width,
height: height,
oldRowsCount: oldRowsCount,
onScrollEnd: onScrollEnd,
// scrollToRow:0,
scrollTop: this.props.scrollTop,
// scrollLeft,
loading: loading
})));
}
}
}]);
return DataGrid;
}(PureComponent);
DataGrid.Cell = cellComponent;
DataGrid.TextCell = textCellComponent;
DataGrid.Column = Column$1;
DataGrid.ColumnGroup = ColumnGroup$1;
var _excluded = ["rowIndex"];
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var ColumnGroup = DataGrid.ColumnGroup,
Column = DataGrid.Column,
Cell = DataGrid.Cell;
var computeProps = function computeProps(props) {
var dataSource = props.dataSource,
dataIndex = props.dataIndex,
title = props.title,
render = props.render,
detailListName = props.detailListName,
columnType = props.columnType,
onMenuClick = props.onMenuClick,
onSelectChange = props.onSelectChange,
selectedRowKeys = props.selectedRowKeys,
getCheckboxProps = props.getCheckboxProps,
descMark = props.descMark,
onRowCheckboxClick = props.onRowCheckboxClick;
props.totalRow;
props.onRowClick;
if (!Array.isArray(dataSource)) dataSource = [];
if (!Array.isArray(selectedRowKeys)) selectedRowKeys = [];
if (!(title && title.type && title.type.name)) title = /*#__PURE__*/React__default.createElement(Cell, null, title || "");
if (!detailListName) detailListName = "entrys";
switch (columnType) {
case "check":
var allcheck = selectedRowKeys.length == 0 ? false : dataSource.every(function (o) {
return selectedRowKeys.some(function (s) {
return s === o[dataIndex];
});
});
title = /*#__PURE__*/React__default.createElement(Cell, null, /*#__PURE__*/React__default.createElement(Checkbox, {
indeterminate: !allcheck && selectedRowKeys.length > 0,
checked: allcheck,
onChange: function onChange(e) {
if (e.target.checked) {
selectedRowKeys = dataSource.map(function (m) {
return m[dataIndex];
});
} else {
selectedRowKeys = [];
}
datagridCheck();
onSelectChange && onSelectChange(selectedRowKeys);
}
}));
render = function render(text, record, index) {
return /*#__PURE__*/React__default.createElement(Checkbox, {
disabled: getCheckboxProps && getCheckboxProps(text, record, index),
checked: selectedRowKeys.some(function (s) {
return s === Number(text);
}),
onChange: function onChange(e) {
if (e.target.checked) {
selectedRowKeys.push(Number(text));
if (e.nativeEvent.shiftKey) {
selectedRowKeys = onRowCheckboxClick && onRowCheckboxClick(selectedRowKeys);
}
} else {
selectedRowKeys = selectedRowKeys.filter(function (f) {
return f !== Number(text);
});
}
datagridCheck();
onSelectChange && onSelectChange(selectedRowKeys);
}
});
};
break;
case "allcheck":
var moreMenu = /*#__PURE__*/React__default.createElement(Menu, {
onClick: onMenuClick
}, /*#__PURE__*/React__default.createElement(Menu.Item, {
key: "selectPage"
}, "\u9009\u62E9\u672C\u9875"), /*#__PURE__*/React__default.createElement(Menu.Item, {
key: "selectAll"
}, "\u9009\u62E9\u5168\u90E8"), /*#__PURE__*/React__default.createElement(Menu.Item, {
key: "cancelSelect"
}, "\u53D6\u6D88\u9009\u62E9"));
title = /*#__PURE__*/React__default.createElement(Cell, null, /*#__PURE__*/React__default.createElement(Dropdown, {
overlay: moreMenu
}, /*#__PURE__*/React__default.createElement("a", null, "\u9009\u62E9 ", /*#__PURE__*/React__default.createElement(Icon, {
type: "down"
}))));
render = function render(text, record, index) {
var checkbox = /*#__PURE__*/React__default.createElement(Checkbox, {
disabled: getCheckboxProps && getCheckboxProps(text, record, index),
checked: selectedRowKeys.some(function (s) {
return s === Number(text);
}),
onChange: function onChange(e) {
if (e.target.checked) {
selectedRowKeys.push(Number(text));
} else {
selectedRowKeys = selectedRowKeys.filter(function (f) {
return f !== Number(text);
});
}
datagridCheck();
onSelectChange && onSelectChange(selectedRowKeys);
}
});
if (descMark && record[descMark]) {
return /*#__PURE__*/React__default.createElement(Tooltip, {
arrowPointAtCenter: true,
placement: "bottomLeft",
title: record[descMark],
overlayClassName: "inv-tool-tip-warning"
}, checkbox);
}
return checkbox;
};
break;
case "radio":
title = /*#__PURE__*/React__default.createElement(Cell, null, "\u9009\u62E9");
render = function render(text, record, index) {
return /*#__PURE__*/React__default.createElement(Radio, {
disabled: getCheckboxProps && getCheckboxProps(text, record, index),
checked: selectedRowKeys.some(function (s) {
return s === Number(text);
}),
onChange: function onChange(e) {
if (e.target.checked) {
selectedRowKeys = [Number(text)];
} else {
selectedRowKeys = [];
}
datagridCheck();
onSelectChange && onSelectChange(selectedRowKeys);
}
});
};
break;
}
return _objectSpread$1(_objectSpread$1({}, props), {}, {
dataSource: dataSource,
selectedRowKeys: selectedRowKeys,
header: title,
renderCell: render,
detailListName: detailListName
});
};
/*
dataSource, //表格数据源，必传
dataIndex, //列字段名，必传
title, //列头，选传
render, //单元格渲染方法。选传时，值为：单元格文本
width, //列宽，选传
fixed, //列固定，选传。'left'：左侧固定，'right'：右侧固定
align, //列对齐，选传。默认值：'center'；可传：'left','center','right'
className, //单元格样式，选传。默认值：''
flexGrow, //列自适应，选传。默认值：0
lineHeight, //单元格行高，选传，默认值：37
isResizable, //列是否允许改变大小，选传，默认值：false
detailListName, //数据行中 明细行的key，选填
columnType, //列类型，选填。可传：'check','allcheck','radio'
onMenuClick, //列类型为allcheck时，菜单选择事件，选填
onSelectChange, //列类型为'check','allcheck','radio'时，列选择事件，选填,可传入selectedRowKeys
selectedRowKeys, //指定选中项的 key 数组
getCheckboxProps, //选择框的默认属性配置
noShowDetailList,// 如果数据有detailList属性 是否需要渲染 选填 默认渲染
*/
/**
* [renderDataGridCol DataGrid Column render]
* @Author weiyang.qiu
* @DateTime 2019-11-20T09:40:22+0800
* @param {object} props col props
* @return {[type]} fixed-data-table-2 column
*/
function renderDataGridCol(props) {
var _computeProps = computeProps(props),
dataSource = _computeProps.dataSource,
dataIndex = _computeProps.dataIndex,
header = _computeProps.header,
renderCell = _computeProps.renderCell,
width = _computeProps.width,
fixed = _computeProps.fixed,
align = _computeProps.align,
className = _computeProps.className,
flexGrow = _computeProps.flexGrow,
lineHeight = _computeProps.lineHeight,
isResizable = _computeProps.isResizable,
detailListNam