@arim-aisdc/public-components 2.3.19 → 2.3.21
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.
|
@@ -1,5 +1,5 @@
|
|
|
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", "enableResizing", "enableDragging", "minResizeWidth", "minResizeHeight"];
|
|
2
|
+
var _excluded = ["open", "title", "okText", "hasfooter", "footer", "width", "height", "size", "renderContent", "handleConfirm", "handleCancel", "confirmLoading", "maskClosable", "bodyStyle", "afterClose", "enableResizing", "enableDragging", "minResizeWidth", "minResizeHeight", "maxResizeWidth", "maxResizeHeight"];
|
|
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; }
|
|
@@ -33,6 +33,7 @@ var CenterModal = function CenterModal(_ref) {
|
|
|
33
33
|
footer = _ref.footer,
|
|
34
34
|
_ref$width = _ref.width,
|
|
35
35
|
width = _ref$width === void 0 ? 500 : _ref$width,
|
|
36
|
+
height = _ref.height,
|
|
36
37
|
_ref$size = _ref.size,
|
|
37
38
|
size = _ref$size === void 0 ? '' : _ref$size,
|
|
38
39
|
renderContent = _ref.renderContent,
|
|
@@ -54,35 +55,131 @@ var CenterModal = function CenterModal(_ref) {
|
|
|
54
55
|
_ref$minResizeWidth = _ref.minResizeWidth,
|
|
55
56
|
minResizeWidth = _ref$minResizeWidth === void 0 ? 200 : _ref$minResizeWidth,
|
|
56
57
|
_ref$minResizeHeight = _ref.minResizeHeight,
|
|
57
|
-
minResizeHeight = _ref$minResizeHeight === void 0 ?
|
|
58
|
+
minResizeHeight = _ref$minResizeHeight === void 0 ? 50 : _ref$minResizeHeight,
|
|
59
|
+
_ref$maxResizeWidth = _ref.maxResizeWidth,
|
|
60
|
+
maxResizeWidth = _ref$maxResizeWidth === void 0 ? 1800 : _ref$maxResizeWidth,
|
|
61
|
+
maxResizeHeight = _ref.maxResizeHeight,
|
|
58
62
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
59
|
-
var modalRef = useRef(null);
|
|
60
63
|
var modalBodyRef = useRef(null);
|
|
61
|
-
var
|
|
62
|
-
var
|
|
64
|
+
var modalBodySizeRef = useRef(null);
|
|
65
|
+
var rndRef = useRef(null);
|
|
66
|
+
var contentObserverRef = useRef();
|
|
67
|
+
var modalContentRef = useRef(null);
|
|
68
|
+
var hasResized = useRef(false);
|
|
63
69
|
var dragHandleClassName = useMemo(function () {
|
|
64
|
-
var _titleElementRef$curr;
|
|
65
|
-
return "drag-handle-".concat((_titleElementRef$curr = titleElementRef.current) === null || _titleElementRef$curr === void 0 ? void 0 : _titleElementRef$curr.length);
|
|
66
|
-
}, [titleElementRef.current]);
|
|
67
|
-
useEffect(function () {
|
|
68
70
|
var titleElements = document.querySelectorAll('.modal-header');
|
|
69
|
-
if (titleElements)
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}, []);
|
|
71
|
+
if (!open || !titleElements) return "drag-handle";
|
|
72
|
+
return "drag-handle-".concat(titleElements.length);
|
|
73
|
+
}, [open]);
|
|
73
74
|
useEffect(function () {
|
|
74
|
-
var
|
|
75
|
-
|
|
76
|
-
var
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
75
|
+
var timer;
|
|
76
|
+
var cleanup = function cleanup() {
|
|
77
|
+
var _contentObserverRef$c;
|
|
78
|
+
clearTimeout(timer);
|
|
79
|
+
(_contentObserverRef$c = contentObserverRef.current) === null || _contentObserverRef$c === void 0 || _contentObserverRef$c.disconnect();
|
|
80
|
+
};
|
|
81
|
+
if (!open) {
|
|
82
|
+
cleanup();
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
timer = setTimeout(function () {
|
|
86
|
+
if (height) {
|
|
87
|
+
var _modalContentRef$curr, _rndRef$current;
|
|
88
|
+
var contentRect = (_modalContentRef$curr = modalContentRef.current) === null || _modalContentRef$curr === void 0 ? void 0 : _modalContentRef$curr.getBoundingClientRect();
|
|
89
|
+
if (!contentRect) return;
|
|
90
|
+
(_rndRef$current = rndRef.current) === null || _rndRef$current === void 0 || _rndRef$current.updateSize({
|
|
91
|
+
width: formatSize(width, contentRect.width),
|
|
92
|
+
height: formatSize(height, contentRect.height)
|
|
93
|
+
});
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
if (!modalContentRef.current || !rndRef.current || !modalBodyRef.current) return;
|
|
97
|
+
|
|
98
|
+
// Initialize size synchronization
|
|
99
|
+
syncSizeIfNeeded();
|
|
100
|
+
|
|
101
|
+
// Set up ResizeObserver for content area
|
|
102
|
+
contentObserverRef.current = new ResizeObserver(syncSizeIfNeeded);
|
|
103
|
+
contentObserverRef.current.observe(modalBodyRef.current);
|
|
104
|
+
}, 0);
|
|
105
|
+
return cleanup;
|
|
106
|
+
}, [open, height, width]);
|
|
107
|
+
|
|
108
|
+
// Helper function to format size values
|
|
109
|
+
var formatSize = function formatSize(size, defaultSize) {
|
|
110
|
+
if (typeof size === 'string') return size;
|
|
111
|
+
if (typeof size === 'number') return "".concat(size, "px");
|
|
112
|
+
return defaultSize;
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
// Optimized size synchronization logic
|
|
116
|
+
var syncSizeIfNeeded = function syncSizeIfNeeded() {
|
|
117
|
+
if (!rndRef.current || !modalContentRef.current) return;
|
|
118
|
+
var rndElement = rndRef.current.getSelfElement();
|
|
119
|
+
var contentRect = modalContentRef.current.getBoundingClientRect();
|
|
120
|
+
var bodyRect = modalBodyRef.current;
|
|
121
|
+
var documentRect = document.body.getBoundingClientRect();
|
|
122
|
+
var hasExplicitWidth = rndElement.style.width !== '';
|
|
123
|
+
var hasExplicitHeight = rndElement.style.height !== '';
|
|
124
|
+
var rndElementWidth = Number(rndElement.style.width.split('px')[0]);
|
|
125
|
+
var rndElementHeight = Number(rndElement.style.height.split('px')[0]);
|
|
126
|
+
var needsSync = !hasExplicitWidth || !hasExplicitHeight;
|
|
127
|
+
var maxHeight = documentRect.height - contentRect.top - 24;
|
|
128
|
+
if (needsSync) {
|
|
129
|
+
rndRef.current.updateSize({
|
|
130
|
+
width: width || !hasExplicitWidth ? Math.ceil(contentRect.width) : undefined,
|
|
131
|
+
height: !hasExplicitHeight ? Math.min(Math.ceil(contentRect.height), maxHeight) : undefined
|
|
132
|
+
});
|
|
133
|
+
modalBodySizeRef.current = {
|
|
134
|
+
width: bodyRect.scrollWidth,
|
|
135
|
+
height: bodyRect.scrollHeight
|
|
81
136
|
};
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
if (!hasResized.current && modalBodySizeRef.current) {
|
|
140
|
+
var widthDiff = Math.abs(modalBodySizeRef.current.width - bodyRect.scrollWidth);
|
|
141
|
+
var heightDiff = Math.abs(modalBodySizeRef.current.height - bodyRect.scrollHeight);
|
|
142
|
+
var significantChange = widthDiff > 5 || heightDiff > 5;
|
|
143
|
+
if (significantChange) {
|
|
144
|
+
var delta = {
|
|
145
|
+
width: bodyRect.scrollWidth - modalBodySizeRef.current.width,
|
|
146
|
+
height: bodyRect.scrollHeight - modalBodySizeRef.current.height
|
|
147
|
+
};
|
|
148
|
+
rndRef.current.updateSize({
|
|
149
|
+
width: width || Math.ceil(rndElementWidth + delta.width),
|
|
150
|
+
height: Math.min(Math.ceil(rndElementHeight + delta.height), maxHeight)
|
|
151
|
+
});
|
|
152
|
+
modalBodySizeRef.current = {
|
|
153
|
+
width: bodyRect.scrollWidth,
|
|
154
|
+
height: bodyRect.scrollHeight
|
|
155
|
+
};
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
};
|
|
159
|
+
var adjustResize = function adjustResize(e, direction, ref, delta, position) {
|
|
160
|
+
var _ref$querySelector, _ref$style$height, _ref$style$width;
|
|
161
|
+
hasResized.current = true;
|
|
162
|
+
var modalContent = (_ref$querySelector = ref.querySelector('.ant-modal-content')) === null || _ref$querySelector === void 0 ? void 0 : _ref$querySelector.getBoundingClientRect();
|
|
163
|
+
var modalContentHeight = Math.ceil(modalContent.height);
|
|
164
|
+
var modalContentWidth = Math.ceil(modalContent.width);
|
|
165
|
+
var refHeight = Number((_ref$style$height = ref.style.height) === null || _ref$style$height === void 0 || (_ref$style$height = _ref$style$height.split('px')) === null || _ref$style$height === void 0 ? void 0 : _ref$style$height[0]);
|
|
166
|
+
var refWidth = Number((_ref$style$width = ref.style.width) === null || _ref$style$width === void 0 || (_ref$style$width = _ref$style$width.split('px')) === null || _ref$style$width === void 0 ? void 0 : _ref$style$width[0]);
|
|
167
|
+
if ((direction === 'left' || direction === 'right') && modalContentHeight !== refHeight) {
|
|
168
|
+
rndRef.current.updateSize({
|
|
169
|
+
width: ref.style.width,
|
|
170
|
+
height: modalContentHeight + 'px'
|
|
171
|
+
});
|
|
172
|
+
}
|
|
173
|
+
if ((direction === 'top' || direction === 'bottom') && modalContentWidth !== refWidth) {
|
|
174
|
+
ref.style.width = modalContentWidth + 'px';
|
|
175
|
+
rndRef.current.updateSize({
|
|
176
|
+
width: modalContentWidth + 'px',
|
|
177
|
+
height: ref.style.height
|
|
178
|
+
});
|
|
82
179
|
}
|
|
83
|
-
}
|
|
180
|
+
};
|
|
84
181
|
return /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({
|
|
85
|
-
className: "centerModal".concat(size),
|
|
182
|
+
className: "centerModalContainer centerModal".concat(size),
|
|
86
183
|
wrapClassName: 'wrapClassName',
|
|
87
184
|
title: /*#__PURE__*/_jsx("div", {
|
|
88
185
|
className: "modal-header ".concat(dragHandleClassName),
|
|
@@ -114,7 +211,7 @@ var CenterModal = function CenterModal(_ref) {
|
|
|
114
211
|
width: width,
|
|
115
212
|
modalRender: function modalRender(modal) {
|
|
116
213
|
return /*#__PURE__*/_jsx(Rnd, {
|
|
117
|
-
ref:
|
|
214
|
+
ref: rndRef,
|
|
118
215
|
enableResizing: enableResizing,
|
|
119
216
|
disableDragging: !enableDragging,
|
|
120
217
|
resizeHandleWrapperClass: "resizeHandles",
|
|
@@ -126,16 +223,8 @@ var CenterModal = function CenterModal(_ref) {
|
|
|
126
223
|
width: 'fit-content',
|
|
127
224
|
height: 'fit-content'
|
|
128
225
|
},
|
|
129
|
-
onResizeStop:
|
|
130
|
-
|
|
131
|
-
if (direction === 'left' || direction === 'right') return;
|
|
132
|
-
var modalContent = (_ref$querySelector = ref.querySelector('.ant-modal-content')) === null || _ref$querySelector === void 0 ? void 0 : _ref$querySelector.getBoundingClientRect();
|
|
133
|
-
var resizeContent = ref === null || ref === void 0 ? void 0 : ref.getBoundingClientRect();
|
|
134
|
-
var height = modalContent.height;
|
|
135
|
-
if (modalContent.height !== resizeContent.height) {
|
|
136
|
-
ref.style.height = height + "px";
|
|
137
|
-
}
|
|
138
|
-
},
|
|
226
|
+
onResizeStop: adjustResize,
|
|
227
|
+
onResize: adjustResize,
|
|
139
228
|
style: {
|
|
140
229
|
display: 'flex',
|
|
141
230
|
flexDirection: 'column',
|
|
@@ -143,12 +232,25 @@ var CenterModal = function CenterModal(_ref) {
|
|
|
143
232
|
},
|
|
144
233
|
minWidth: minResizeWidth,
|
|
145
234
|
minHeight: minResizeHeight,
|
|
146
|
-
|
|
235
|
+
maxWidth: maxResizeWidth,
|
|
236
|
+
maxHeight: maxResizeHeight,
|
|
237
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
238
|
+
ref: modalContentRef,
|
|
239
|
+
className: "custom-modal-content",
|
|
240
|
+
style: {
|
|
241
|
+
height: '100%'
|
|
242
|
+
},
|
|
243
|
+
children: modal
|
|
244
|
+
})
|
|
147
245
|
});
|
|
148
246
|
}
|
|
149
247
|
}, rest), {}, {
|
|
150
248
|
children: /*#__PURE__*/_jsx("div", {
|
|
151
249
|
ref: modalBodyRef,
|
|
250
|
+
className: "custom-modal-body",
|
|
251
|
+
style: {
|
|
252
|
+
height: height ? '100%' : 'fit-content'
|
|
253
|
+
},
|
|
152
254
|
children: renderContent || /*#__PURE__*/_jsx("div", {
|
|
153
255
|
className: "gantt-leftbar-defalutItem"
|
|
154
256
|
})
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
.centerModalContainer {
|
|
2
4
|
.resizeHandles div {
|
|
3
5
|
pointer-events: auto;
|
|
4
6
|
z-index: 1002;
|
|
@@ -7,6 +9,8 @@
|
|
|
7
9
|
.ant-modal-content {
|
|
8
10
|
display: flex;
|
|
9
11
|
flex-direction: column;
|
|
12
|
+
height: 100%;
|
|
13
|
+
overflow: hidden;
|
|
10
14
|
|
|
11
15
|
.ant-modal-body {
|
|
12
16
|
flex: 1;
|
|
@@ -16,6 +20,10 @@
|
|
|
16
20
|
|
|
17
21
|
.react-draggable {
|
|
18
22
|
position: relative !important;
|
|
23
|
+
|
|
24
|
+
.custom-modal-body {
|
|
25
|
+
height: fit-content;
|
|
26
|
+
}
|
|
19
27
|
}
|
|
20
28
|
|
|
21
29
|
.resizeHandleBottomLeft, .resizeHandleBottomRight, .resizeHandleTopLeft, .resizeHandleTopRight {
|
|
@@ -25,6 +25,9 @@ export interface CenterModalPropsType extends ModalProps {
|
|
|
25
25
|
enableDragging?: boolean;
|
|
26
26
|
minResizeWidth?: string | number;
|
|
27
27
|
minResizeHeight?: string | number;
|
|
28
|
+
maxResizeWidth?: string | number;
|
|
29
|
+
maxResizeHeight?: string | number;
|
|
30
|
+
height?: string | number;
|
|
28
31
|
}
|
|
29
32
|
export type ModalSizeType = {
|
|
30
33
|
width: number | string;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { TableMaxColumnType } from "../../type";
|
|
2
|
-
export declare const numberSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
3
|
-
export declare const stringSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
4
|
-
export declare const numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
5
|
-
export declare const timeSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
2
|
+
export declare const numberSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
3
|
+
export declare const stringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
4
|
+
export declare const numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
5
|
+
export declare const timeSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
6
6
|
declare const customSortFns: {
|
|
7
|
-
numberSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
8
|
-
stringSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
9
|
-
timeSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
10
|
-
numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
7
|
+
numberSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
8
|
+
stringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
9
|
+
timeSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
10
|
+
numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
11
11
|
};
|
|
12
12
|
export default customSortFns;
|
|
13
13
|
export type SortFnType = keyof typeof customSortFns | undefined;
|