@arim-aisdc/public-components 2.3.16 → 2.3.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/CenterModal/CenterModal.d.ts +2 -2
- package/dist/components/CenterModal/CenterModal.js +70 -90
- package/dist/components/CenterModal/index.less +88 -0
- package/dist/components/CenterModal/type.d.ts +8 -0
- package/dist/components/CustomForm/CustomForm.js +5 -1
- package/dist/components/TableMax/TableBody/components/Total.d.ts +7 -0
- package/dist/components/TableMax/TableBody/components/Total.js +63 -0
- package/dist/components/TableMax/TableBody/index.d.ts +4 -1
- package/dist/components/TableMax/TableBody/index.js +20 -7
- package/dist/components/TableMax/TableBody/index.less +8 -4
- package/dist/components/TableMax/TableHeader/Cell.js +16 -32
- package/dist/components/TableMax/TableHeader/index.less +31 -8
- package/dist/components/TableMax/TableMax.js +9 -9
- package/dist/components/TableMax/components/ColumnSort/customSortFns.d.ts +8 -8
- package/dist/components/TableMax/hooks/useColumnResize.d.ts +9 -0
- package/dist/components/TableMax/hooks/useColumnResize.js +162 -0
- package/dist/components/TableMax/hooks/useColumnWidth copy.d.ts +18 -0
- package/dist/components/TableMax/hooks/useColumnWidth copy.js +369 -0
- package/dist/components/TableMax/hooks/useColumnWidth.d.ts +7 -3
- package/dist/components/TableMax/hooks/useColumnWidth.js +218 -283
- package/dist/components/TableMax/type.d.ts +4 -0
- package/package.json +4 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import './index.less';
|
|
3
3
|
import { CenterModalPropsType } from './type';
|
|
4
|
-
declare const
|
|
5
|
-
export default
|
|
4
|
+
declare const CenterModal: React.FC<CenterModalPropsType>;
|
|
5
|
+
export default CenterModal;
|
|
@@ -1,25 +1,17 @@
|
|
|
1
1
|
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); }
|
|
2
|
-
var _excluded = ["open", "title", "okText", "hasfooter", "footer", "width", "size", "renderContent", "handleConfirm", "handleCancel", "confirmLoading", "maskClosable", "bodyStyle", "afterClose"];
|
|
2
|
+
var _excluded = ["open", "title", "okText", "hasfooter", "footer", "width", "size", "renderContent", "handleConfirm", "handleCancel", "confirmLoading", "maskClosable", "bodyStyle", "afterClose", "enableResizing", "enableDragging", "minResizeWidth", "minResizeHeight"];
|
|
3
3
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
4
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
5
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
6
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
7
7
|
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); }
|
|
8
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
9
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
10
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
11
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
12
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
13
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
8
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
15
9
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
16
10
|
import { Modal } from 'antd';
|
|
17
|
-
import React, {
|
|
18
|
-
import
|
|
11
|
+
import React, { useEffect, useMemo, useRef } from 'react';
|
|
12
|
+
import { Rnd } from 'react-rnd';
|
|
19
13
|
import "./index.less";
|
|
20
14
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
21
|
-
// import 'ant-design-draggable-modal/dist/index.css';
|
|
22
|
-
|
|
23
15
|
var CenterModal = function CenterModal(_ref) {
|
|
24
16
|
var _ref$open = _ref.open,
|
|
25
17
|
open = _ref$open === void 0 ? false : _ref$open,
|
|
@@ -43,114 +35,102 @@ var CenterModal = function CenterModal(_ref) {
|
|
|
43
35
|
_ref$bodyStyle = _ref.bodyStyle,
|
|
44
36
|
bodyStyle = _ref$bodyStyle === void 0 ? {
|
|
45
37
|
position: 'relative'
|
|
46
|
-
// padding: '24px 32px',
|
|
47
38
|
} : _ref$bodyStyle,
|
|
48
39
|
afterClose = _ref.afterClose,
|
|
40
|
+
_ref$enableResizing = _ref.enableResizing,
|
|
41
|
+
enableResizing = _ref$enableResizing === void 0 ? true : _ref$enableResizing,
|
|
42
|
+
_ref$enableDragging = _ref.enableDragging,
|
|
43
|
+
enableDragging = _ref$enableDragging === void 0 ? true : _ref$enableDragging,
|
|
44
|
+
_ref$minResizeWidth = _ref.minResizeWidth,
|
|
45
|
+
minResizeWidth = _ref$minResizeWidth === void 0 ? 200 : _ref$minResizeWidth,
|
|
46
|
+
_ref$minResizeHeight = _ref.minResizeHeight,
|
|
47
|
+
minResizeHeight = _ref$minResizeHeight === void 0 ? 200 : _ref$minResizeHeight,
|
|
49
48
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
50
|
-
var
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
var
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
clientWidth = _window$document$docu.clientWidth,
|
|
74
|
-
clientHeight = _window$document$docu.clientHeight;
|
|
75
|
-
var modalHeader = document.getElementById(id);
|
|
76
|
-
var targetRect = draggleRef === null || draggleRef === void 0 || (_draggleRef$current = draggleRef.current) === null || _draggleRef$current === void 0 ? void 0 : _draggleRef$current.getBoundingClientRect();
|
|
77
|
-
console.log(modalHeader, event.target);
|
|
78
|
-
if (modalHeader && !modalHeader.contains(event.target)) {
|
|
79
|
-
setBounds({
|
|
80
|
-
left: 0,
|
|
81
|
-
right: 0,
|
|
82
|
-
top: 0,
|
|
83
|
-
bottom: 0
|
|
84
|
-
});
|
|
85
|
-
return;
|
|
49
|
+
var modalRef = useRef(null);
|
|
50
|
+
var modalBodyRef = useRef(null);
|
|
51
|
+
var startSizeRef = useRef();
|
|
52
|
+
var titleElementRef = useRef();
|
|
53
|
+
var dragHandleClassName = useMemo(function () {
|
|
54
|
+
var _titleElementRef$curr;
|
|
55
|
+
return "drag-handle-".concat((_titleElementRef$curr = titleElementRef.current) === null || _titleElementRef$curr === void 0 ? void 0 : _titleElementRef$curr.length);
|
|
56
|
+
}, [titleElementRef.current]);
|
|
57
|
+
useEffect(function () {
|
|
58
|
+
var titleElements = document.querySelectorAll('.modal-header');
|
|
59
|
+
if (titleElements) {
|
|
60
|
+
titleElementRef.current = titleElements;
|
|
61
|
+
}
|
|
62
|
+
}, []);
|
|
63
|
+
useEffect(function () {
|
|
64
|
+
var modal = modalBodyRef.current;
|
|
65
|
+
if (modal) {
|
|
66
|
+
var rect = modal.getBoundingClientRect();
|
|
67
|
+
console.log('rect', rect.width, rect.height);
|
|
68
|
+
startSizeRef.current = {
|
|
69
|
+
width: rect.width,
|
|
70
|
+
height: rect.height
|
|
71
|
+
};
|
|
86
72
|
}
|
|
87
|
-
|
|
88
|
-
left: -(targetRect === null || targetRect === void 0 ? void 0 : targetRect.left) + (uiData === null || uiData === void 0 ? void 0 : uiData.x),
|
|
89
|
-
right: clientWidth - ((targetRect === null || targetRect === void 0 ? void 0 : targetRect.right) - (uiData === null || uiData === void 0 ? void 0 : uiData.x)),
|
|
90
|
-
top: -(targetRect === null || targetRect === void 0 ? void 0 : targetRect.top) + (uiData === null || uiData === void 0 ? void 0 : uiData.y),
|
|
91
|
-
bottom: clientHeight - ((targetRect === null || targetRect === void 0 ? void 0 : targetRect.bottom) - (uiData === null || uiData === void 0 ? void 0 : uiData.y))
|
|
92
|
-
});
|
|
93
|
-
};
|
|
73
|
+
}, [modalBodyRef.current]);
|
|
94
74
|
return /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({
|
|
95
75
|
className: "centerModal".concat(size),
|
|
96
76
|
title: /*#__PURE__*/_jsx("div", {
|
|
97
|
-
|
|
98
|
-
className: "modal-header",
|
|
77
|
+
className: "modal-header ".concat(dragHandleClassName),
|
|
99
78
|
style: {
|
|
100
79
|
width: '100%',
|
|
101
80
|
cursor: 'move'
|
|
102
81
|
},
|
|
103
|
-
onMouseOver: function onMouseOver() {
|
|
104
|
-
if (disabled) {
|
|
105
|
-
setDisabled(false);
|
|
106
|
-
}
|
|
107
|
-
},
|
|
108
|
-
onMouseOut: function onMouseOut() {
|
|
109
|
-
setDisabled(false);
|
|
110
|
-
}
|
|
111
|
-
// fix eslintjsx-a11y/mouse-events-have-key-events
|
|
112
|
-
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
|
|
113
|
-
,
|
|
114
|
-
onFocus: function onFocus() {},
|
|
115
|
-
onBlur: function onBlur() {}
|
|
116
|
-
// end
|
|
117
|
-
,
|
|
118
82
|
children: title
|
|
119
83
|
}),
|
|
120
84
|
open: open,
|
|
121
|
-
width: width,
|
|
122
|
-
maskClosable: maskClosable,
|
|
123
85
|
onOk: handleConfirm,
|
|
124
86
|
onCancel: handleCancel,
|
|
125
87
|
okText: okText,
|
|
126
88
|
footer: hasfooter ? footer : null,
|
|
127
|
-
centered:
|
|
89
|
+
centered: false,
|
|
128
90
|
closeIcon: /*#__PURE__*/_jsx("i", {
|
|
129
|
-
className: "iconfont-other icon-other-close"
|
|
91
|
+
className: "iconfont-other icon-other-close",
|
|
92
|
+
children: " "
|
|
130
93
|
}),
|
|
131
94
|
destroyOnClose: true,
|
|
132
95
|
confirmLoading: confirmLoading,
|
|
96
|
+
maskClosable: maskClosable,
|
|
97
|
+
afterClose: afterClose,
|
|
133
98
|
styles: {
|
|
134
|
-
body: bodyStyle
|
|
99
|
+
body: _objectSpread(_objectSpread({}, bodyStyle), {}, {
|
|
100
|
+
overflow: 'auto'
|
|
101
|
+
})
|
|
135
102
|
},
|
|
136
|
-
|
|
103
|
+
width: width,
|
|
137
104
|
modalRender: function modalRender(modal) {
|
|
138
|
-
return /*#__PURE__*/_jsx(
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
105
|
+
return /*#__PURE__*/_jsx(Rnd, {
|
|
106
|
+
ref: modalRef,
|
|
107
|
+
enableResizing: enableResizing,
|
|
108
|
+
disableDragging: !enableDragging,
|
|
109
|
+
resizeHandleWrapperClass: "resizeHandles",
|
|
110
|
+
dragHandleClassName: dragHandleClassName,
|
|
111
|
+
default: {
|
|
112
|
+
x: 0,
|
|
113
|
+
y: 0,
|
|
114
|
+
width: 'fit-content',
|
|
115
|
+
height: 'fit-content'
|
|
116
|
+
},
|
|
117
|
+
style: {
|
|
118
|
+
display: 'flex',
|
|
119
|
+
flexDirection: 'column',
|
|
120
|
+
overflow: 'hidden' // 添加overflow隐藏
|
|
144
121
|
},
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
122
|
+
minWidth: minResizeWidth,
|
|
123
|
+
minHeight: minResizeHeight,
|
|
124
|
+
children: modal
|
|
148
125
|
});
|
|
149
126
|
}
|
|
150
127
|
}, rest), {}, {
|
|
151
|
-
children:
|
|
152
|
-
|
|
128
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
129
|
+
ref: modalBodyRef,
|
|
130
|
+
children: renderContent || /*#__PURE__*/_jsx("div", {
|
|
131
|
+
className: "gantt-leftbar-defalutItem"
|
|
132
|
+
})
|
|
153
133
|
})
|
|
154
134
|
}));
|
|
155
135
|
};
|
|
156
|
-
export default
|
|
136
|
+
export default CenterModal;
|
|
@@ -11,3 +11,91 @@
|
|
|
11
11
|
padding: 0;
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
|
+
|
|
15
|
+
.centerModal {
|
|
16
|
+
.ant-modal-content {
|
|
17
|
+
resize: none; /* disable default resize */
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.resize-handle {
|
|
23
|
+
opacity: 0.6;
|
|
24
|
+
transition: opacity 0.2s;
|
|
25
|
+
|
|
26
|
+
&:hover {
|
|
27
|
+
opacity: 1;
|
|
28
|
+
border-color: #40a9ff;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.is-resizing .resize-handle {
|
|
33
|
+
opacity: 1;
|
|
34
|
+
border-color: #096dd9 !important;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
.centerModal {
|
|
40
|
+
.react-resizable {
|
|
41
|
+
position: absolute !important;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.react-rnd {
|
|
45
|
+
border: 1px solid #d9d9d9;
|
|
46
|
+
border-radius: 6px;
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
background: #fff;
|
|
49
|
+
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
|
50
|
+
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
|
51
|
+
0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.resize-handle {
|
|
55
|
+
position: absolute;
|
|
56
|
+
right: 0;
|
|
57
|
+
bottom: 0;
|
|
58
|
+
width: 16px;
|
|
59
|
+
height: 16px;
|
|
60
|
+
cursor: nwse-resize;
|
|
61
|
+
background: transparent;
|
|
62
|
+
border-right: 2px solid #1890ff;
|
|
63
|
+
border-bottom: 2px solid #1890ff;
|
|
64
|
+
z-index: 1001;
|
|
65
|
+
opacity: 0.7;
|
|
66
|
+
transition: opacity 0.2s;
|
|
67
|
+
|
|
68
|
+
&:hover {
|
|
69
|
+
opacity: 1;
|
|
70
|
+
border-color: #40a9ff;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.ant-modal-body {
|
|
75
|
+
padding: 0 !important;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.resizeHandles div {
|
|
79
|
+
pointer-events: auto;
|
|
80
|
+
z-index: 1002;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
.ant-modal-content {
|
|
85
|
+
display: flex;
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
|
|
88
|
+
.ant-modal-body {
|
|
89
|
+
flex: 1;
|
|
90
|
+
overflow: auto;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.react-draggable {
|
|
95
|
+
position: relative !important;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.react-draggable {
|
|
100
|
+
position: relative;
|
|
101
|
+
}
|
|
@@ -21,4 +21,12 @@ export interface CenterModalPropsType extends ModalProps {
|
|
|
21
21
|
confirmLoading?: boolean;
|
|
22
22
|
bodyStyle?: object;
|
|
23
23
|
afterClose?: () => void;
|
|
24
|
+
enableResizing?: boolean;
|
|
25
|
+
enableDragging?: boolean;
|
|
26
|
+
minResizeWidth?: string | number;
|
|
27
|
+
minResizeHeight?: string | number;
|
|
24
28
|
}
|
|
29
|
+
export type ModalSizeType = {
|
|
30
|
+
width: number | string;
|
|
31
|
+
height: number | string;
|
|
32
|
+
};
|
|
@@ -689,7 +689,11 @@ var CustomForm = function CustomForm(_ref, ref) {
|
|
|
689
689
|
xl: 12,
|
|
690
690
|
xxl: 24
|
|
691
691
|
},
|
|
692
|
-
className: "customFormRow"
|
|
692
|
+
className: "customFormRow",
|
|
693
|
+
style: {
|
|
694
|
+
marginLeft: 0,
|
|
695
|
+
marginRight: 0
|
|
696
|
+
}
|
|
693
697
|
// justify="space-between"
|
|
694
698
|
,
|
|
695
699
|
children: [data.map(function (item, index) {
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
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); }
|
|
7
|
+
import { getPinningStyle } from "../../TableHeader/utils";
|
|
8
|
+
import "../../TableBody/index.less";
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
11
|
+
export var Total = function Total(_ref) {
|
|
12
|
+
var table = _ref.table,
|
|
13
|
+
totalDatas = _ref.totalDatas,
|
|
14
|
+
shadowColumnInfo = _ref.shadowColumnInfo,
|
|
15
|
+
rowHeight = _ref.rowHeight;
|
|
16
|
+
var leftLastColumnId = shadowColumnInfo.leftLastColumnId,
|
|
17
|
+
rightFirstColumnId = shadowColumnInfo.rightFirstColumnId;
|
|
18
|
+
var footerGroups = table.getFooterGroups();
|
|
19
|
+
|
|
20
|
+
// 公共样式对象,避免重复创建
|
|
21
|
+
var rowStyle = {
|
|
22
|
+
width: '100%',
|
|
23
|
+
position: 'sticky',
|
|
24
|
+
bottom: '-0.5px',
|
|
25
|
+
left: '0px',
|
|
26
|
+
zIndex: 200
|
|
27
|
+
};
|
|
28
|
+
var cellWrapperStyle = {
|
|
29
|
+
boxSizing: 'border-box',
|
|
30
|
+
borderTop: '1px solid var(--tableColor2)',
|
|
31
|
+
borderBottom: '1px solid var(--tableColor2)',
|
|
32
|
+
height: "100%"
|
|
33
|
+
};
|
|
34
|
+
return /*#__PURE__*/_jsx(_Fragment, {
|
|
35
|
+
children: footerGroups.map(function (footerGroup) {
|
|
36
|
+
var id = footerGroup.id,
|
|
37
|
+
headers = footerGroup.headers;
|
|
38
|
+
return /*#__PURE__*/_jsx("tr", {
|
|
39
|
+
className: "tbody-tr",
|
|
40
|
+
style: rowStyle,
|
|
41
|
+
children: headers.map(function (header) {
|
|
42
|
+
var headerId = header.id,
|
|
43
|
+
colSpan = header.colSpan;
|
|
44
|
+
var pinningStyle = getPinningStyle(header, table);
|
|
45
|
+
var cellStyle = _objectSpread(_objectSpread({}, pinningStyle), {}, {
|
|
46
|
+
height: "".concat(rowHeight - 1, "px")
|
|
47
|
+
});
|
|
48
|
+
var cellClassNames = ['tbody-tr-td', headerId === leftLastColumnId && 'thead-tr-th-cell-fix-left-last', headerId === rightFirstColumnId && 'thead-tr-th-cell-fix-right-first'].filter(Boolean).join(' ');
|
|
49
|
+
return /*#__PURE__*/_jsx("td", {
|
|
50
|
+
colSpan: colSpan,
|
|
51
|
+
style: cellStyle,
|
|
52
|
+
className: cellClassNames,
|
|
53
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
54
|
+
className: "table-max-cell-wrapper",
|
|
55
|
+
style: cellWrapperStyle,
|
|
56
|
+
children: totalDatas === null || totalDatas === void 0 ? void 0 : totalDatas[headerId]
|
|
57
|
+
})
|
|
58
|
+
}, headerId);
|
|
59
|
+
})
|
|
60
|
+
}, id);
|
|
61
|
+
})
|
|
62
|
+
});
|
|
63
|
+
};
|
|
@@ -71,6 +71,9 @@ type TableBodyPropsType = {
|
|
|
71
71
|
tableTooltip: boolean;
|
|
72
72
|
compactMode: boolean;
|
|
73
73
|
onEditValueChange?: (field: string, value: any, extra?: any) => void;
|
|
74
|
+
hasTotalRow?: boolean;
|
|
75
|
+
totalDatas?: any[];
|
|
74
76
|
};
|
|
75
|
-
declare const TableBody: ({ tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, tableContainerWidth, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, datas, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, dragBeforeStart, shadowColumnInfo, getContextMenu, onClickContextMenu, getRowHoverTipConfig, tableTooltip, compactMode, onEditValueChange, }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
|
|
77
|
+
declare const TableBody: ({ tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, tableContainerWidth, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, datas, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, dragBeforeStart, shadowColumnInfo, getContextMenu, onClickContextMenu, getRowHoverTipConfig, tableTooltip, compactMode, onEditValueChange, hasTotalRow, totalDatas }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
|
|
76
78
|
export default TableBody;
|
|
79
|
+
export declare const MemoizedTableBody: ({ tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, tableContainerWidth, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, datas, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, dragBeforeStart, shadowColumnInfo, getContextMenu, onClickContextMenu, getRowHoverTipConfig, tableTooltip, compactMode, onEditValueChange, hasTotalRow, totalDatas }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -18,16 +18,17 @@ import { CustomDragLayer } from "../components/CustomDragerLayer";
|
|
|
18
18
|
// import RowContent from "../components/RowContent";
|
|
19
19
|
import { DropSide } from "../type";
|
|
20
20
|
import { events, useEventBus } from "../../..";
|
|
21
|
-
import { useCallback, useMemo, useState } from 'react';
|
|
21
|
+
import React, { useCallback, useMemo, useState } from 'react';
|
|
22
22
|
import { createPortal } from 'react-dom';
|
|
23
23
|
import { useConfig } from "../../ConfigProvider";
|
|
24
24
|
import Empty from "../../Empty";
|
|
25
25
|
import Row from "./Row";
|
|
26
26
|
import ContextMenu from "./contextMenu/ContextMenu";
|
|
27
27
|
import "./index.less";
|
|
28
|
+
import { Total } from "./components/Total";
|
|
28
29
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
29
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
30
30
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
31
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
31
32
|
var TableBody = function TableBody(_ref) {
|
|
32
33
|
var _headerGroups, _table$getRowModel$ro2;
|
|
33
34
|
var tableBodyRef = _ref.tableBodyRef,
|
|
@@ -72,7 +73,9 @@ var TableBody = function TableBody(_ref) {
|
|
|
72
73
|
getRowHoverTipConfig = _ref.getRowHoverTipConfig,
|
|
73
74
|
tableTooltip = _ref.tableTooltip,
|
|
74
75
|
compactMode = _ref.compactMode,
|
|
75
|
-
onEditValueChange = _ref.onEditValueChange
|
|
76
|
+
onEditValueChange = _ref.onEditValueChange,
|
|
77
|
+
hasTotalRow = _ref.hasTotalRow,
|
|
78
|
+
totalDatas = _ref.totalDatas;
|
|
76
79
|
var _useConfig = useConfig(),
|
|
77
80
|
root = _useConfig.root;
|
|
78
81
|
var headerGroups = table.getHeaderGroups();
|
|
@@ -379,7 +382,7 @@ var TableBody = function TableBody(_ref) {
|
|
|
379
382
|
return !loading && datas.length !== 0 && ((_table$getRowModel$ro = table.getRowModel().rows) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.length) !== 0;
|
|
380
383
|
}, [loading, datas.length, (_table$getRowModel$ro2 = table.getRowModel().rows) === null || _table$getRowModel$ro2 === void 0 ? void 0 : _table$getRowModel$ro2.length]);
|
|
381
384
|
|
|
382
|
-
// console.log('
|
|
385
|
+
// console.log('rowHeight :>>', rowHeight);
|
|
383
386
|
|
|
384
387
|
return (
|
|
385
388
|
/*#__PURE__*/
|
|
@@ -409,9 +412,16 @@ var TableBody = function TableBody(_ref) {
|
|
|
409
412
|
width: size
|
|
410
413
|
}, header.id);
|
|
411
414
|
})
|
|
412
|
-
}), /*#__PURE__*/
|
|
415
|
+
}), /*#__PURE__*/_jsxs("tbody", {
|
|
413
416
|
id: "table-max-tableBody-tbody-".concat(tableId),
|
|
414
|
-
children: TBodyContent()
|
|
417
|
+
children: [TBodyContent(), /*#__PURE__*/_jsx(_Fragment, {
|
|
418
|
+
children: hasTotalRow && /*#__PURE__*/_jsx(Total, {
|
|
419
|
+
table: table,
|
|
420
|
+
totalDatas: totalDatas,
|
|
421
|
+
shadowColumnInfo: shadowColumnInfo,
|
|
422
|
+
rowHeight: rowHeight
|
|
423
|
+
})
|
|
424
|
+
})]
|
|
415
425
|
})]
|
|
416
426
|
})
|
|
417
427
|
}) : LoadingAndEmptyContent(), /*#__PURE__*/_jsx(ContextMenu, _objectSpread(_objectSpread({}, contextMenuData), {}, {
|
|
@@ -421,4 +431,7 @@ var TableBody = function TableBody(_ref) {
|
|
|
421
431
|
})
|
|
422
432
|
);
|
|
423
433
|
};
|
|
424
|
-
export default TableBody;
|
|
434
|
+
export default TableBody;
|
|
435
|
+
export var MemoizedTableBody = /*#__PURE__*/React.memo(TableBody, function (prev, next) {
|
|
436
|
+
return prev.table.options.data === next.table.options.data;
|
|
437
|
+
});
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
table {
|
|
2
2
|
table-layout: fixed;
|
|
3
|
-
|
|
4
|
-
td {
|
|
5
|
-
|
|
6
|
-
}
|
|
3
|
+
border-collapse: collapse;
|
|
4
|
+
// td {
|
|
5
|
+
// border: 0;
|
|
6
|
+
// }
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.tbody {
|
|
@@ -186,6 +186,10 @@ table {
|
|
|
186
186
|
pointer-events: none;
|
|
187
187
|
}
|
|
188
188
|
|
|
189
|
+
.thead-tr-th-cell {
|
|
190
|
+
background: @globalColor0;
|
|
191
|
+
}
|
|
192
|
+
|
|
189
193
|
.table-max-row-tooltip-wrapper {
|
|
190
194
|
left: 50% !important;
|
|
191
195
|
transform: translateX(-50%) !important;
|
|
@@ -17,14 +17,14 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
|
|
|
17
17
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
18
18
|
import { flexRender } from '@tanstack/react-table';
|
|
19
19
|
import { Tooltip } from 'antd';
|
|
20
|
-
import { useMemo
|
|
20
|
+
import { useMemo } from 'react';
|
|
21
21
|
import { useDrag, useDrop } from 'react-dnd';
|
|
22
|
-
import { createPortal } from 'react-dom';
|
|
23
22
|
import { useConfig } from "../../ConfigProvider";
|
|
24
23
|
import { ColumnType } from "../TableMax";
|
|
25
24
|
import { ColumnFilter } from "../components/ColumnFilterV2";
|
|
26
25
|
import Sort from "../components/ColumnSort";
|
|
27
26
|
import "./index.less";
|
|
27
|
+
import { useColumnResize } from "../hooks/useColumnResize";
|
|
28
28
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
29
29
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
30
30
|
var reorderColumn = function reorderColumn(draggedColumnId, targetColumnId, columnOrder) {
|
|
@@ -32,7 +32,6 @@ var reorderColumn = function reorderColumn(draggedColumnId, targetColumnId, colu
|
|
|
32
32
|
return _toConsumableArray(columnOrder);
|
|
33
33
|
};
|
|
34
34
|
var Cell = function Cell(_ref) {
|
|
35
|
-
var _tableContentRef$curr;
|
|
36
35
|
var tableContentRef = _ref.tableContentRef,
|
|
37
36
|
header = _ref.header,
|
|
38
37
|
table = _ref.table,
|
|
@@ -81,33 +80,26 @@ var Cell = function Cell(_ref) {
|
|
|
81
80
|
var columns = useMemo(function () {
|
|
82
81
|
return columnDef.columns;
|
|
83
82
|
}, [header]);
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
83
|
+
|
|
84
|
+
// 使用自定义Hook
|
|
85
|
+
var _useColumnResize = useColumnResize({
|
|
86
|
+
header: header,
|
|
87
|
+
table: table,
|
|
88
|
+
tableContentRef: tableContentRef,
|
|
89
|
+
rootContainer: root
|
|
87
90
|
}),
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
setInitPosition = _useState2[1];
|
|
91
|
-
return /*#__PURE__*/_jsxs("div", {
|
|
91
|
+
handleResizeStart = _useColumnResize.handleResizeStart;
|
|
92
|
+
return /*#__PURE__*/_jsx("div", {
|
|
92
93
|
ref: function ref(node) {
|
|
93
94
|
dropRef(node);
|
|
94
|
-
dragRef(disableColumnDrag || cannotDragColumn.includes(header.column.id) || header.column.getIsPinned() ? null : node);
|
|
95
|
+
dragRef(disableColumnDrag || cannotDragColumn.includes(header.column.id) || header.column.getIsPinned() || header.column.getIsResizing() ? null : node);
|
|
95
96
|
},
|
|
96
|
-
children:
|
|
97
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
97
98
|
className: "cell-wapper ".concat(columns ? 'wapper-top-parent' : '', " table-max-header-cell-wrapper"),
|
|
98
99
|
ref: previewRef,
|
|
99
100
|
style: _objectSpread({
|
|
100
101
|
transform: header.column.parent || columns || !hasGroup ? 'translateY(0px)' : 'translateY(-20px)'
|
|
101
102
|
}, getHeaderCellProps === null || getHeaderCellProps === void 0 ? void 0 : getHeaderCellProps(columns)),
|
|
102
|
-
onMouseDown: function onMouseDown(e) {
|
|
103
|
-
var elem = tableContentRef === null || tableContentRef === void 0 ? void 0 : tableContentRef.current;
|
|
104
|
-
var clientRect = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect();
|
|
105
|
-
var y = clientRect === null || clientRect === void 0 ? void 0 : clientRect.top;
|
|
106
|
-
setInitPosition({
|
|
107
|
-
x: e.clientX,
|
|
108
|
-
y: y
|
|
109
|
-
});
|
|
110
|
-
},
|
|
111
103
|
children: [/*#__PURE__*/_jsx("div", {
|
|
112
104
|
className: "cell-left",
|
|
113
105
|
onClick: header.column.getToggleSortingHandler(),
|
|
@@ -143,18 +135,10 @@ var Cell = function Cell(_ref) {
|
|
|
143
135
|
}) : null]
|
|
144
136
|
}) : null, /*#__PURE__*/_jsx("div", {
|
|
145
137
|
className: "cell-resize-handler ".concat(header.column.getIsResizing() ? 'column-is-resizing' : ''),
|
|
146
|
-
onMouseDown:
|
|
147
|
-
onTouchStart
|
|
138
|
+
onMouseDown: handleResizeStart
|
|
139
|
+
// onTouchStart={handleResizeStart}
|
|
148
140
|
})]
|
|
149
|
-
})
|
|
150
|
-
className: 'column-resizing-divide-line',
|
|
151
|
-
style: {
|
|
152
|
-
left: initPosition.x,
|
|
153
|
-
top: initPosition.y,
|
|
154
|
-
height: (_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 ? void 0 : _tableContentRef$curr.clientHeight,
|
|
155
|
-
transform: "translateX(".concat(table.getState().columnSizingInfo.deltaOffset || 0, "px)")
|
|
156
|
-
}
|
|
157
|
-
}), root ? document.querySelector(root) : document.body) : null]
|
|
141
|
+
})
|
|
158
142
|
});
|
|
159
143
|
};
|
|
160
144
|
export default Cell;
|