@arim-aisdc/public-components 2.3.17 → 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/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 +2 -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,18 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ColumnSizing } from '../TableMax';
|
|
3
|
+
interface UseColumnWidthProps {
|
|
4
|
+
tableContentRef: React.RefObject<HTMLDivElement>;
|
|
5
|
+
tableId: string;
|
|
6
|
+
tableKeyPrefixCls: string;
|
|
7
|
+
columnVisibleConfig?: Record<string, boolean>;
|
|
8
|
+
tableKey: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const useColumnWidth: ({ tableContentRef, tableId, tableKeyPrefixCls, columnVisibleConfig, tableKey, }: UseColumnWidthProps) => {
|
|
11
|
+
columnSizing: ColumnSizing;
|
|
12
|
+
allColumnCount: number;
|
|
13
|
+
onColumnSizingChange: (data: any) => void;
|
|
14
|
+
tableContainerWidth: number;
|
|
15
|
+
initializeColumnSizing: (columns: any) => void;
|
|
16
|
+
handleVisibleConfigChange: (key: any, value: any) => void;
|
|
17
|
+
};
|
|
18
|
+
export {};
|