@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.
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
2
  import './index.less';
3
3
  import { CenterModalPropsType } from './type';
4
- declare const _default: React.NamedExoticComponent<CenterModalPropsType>;
5
- export default _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, { useRef, useState } from 'react';
18
- import Draggable from 'react-draggable';
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 _useState = useState(false),
51
- _useState2 = _slicedToArray(_useState, 2),
52
- disabled = _useState2[0],
53
- setDisabled = _useState2[1];
54
- var _useState3 = useState({
55
- left: 0,
56
- top: 0,
57
- bottom: 0,
58
- right: 0
59
- }),
60
- _useState4 = _slicedToArray(_useState3, 2),
61
- bounds = _useState4[0],
62
- setBounds = _useState4[1];
63
- var draggleRef = useRef(null);
64
- var domList = document.querySelectorAll('.modal-header');
65
- var id = 'modal-header';
66
- if ((domList === null || domList === void 0 ? void 0 : domList.length) > 0) {
67
- id = "modal-header-".concat(domList === null || domList === void 0 ? void 0 : domList.length);
68
- }
69
- var _onStart = function onStart(event, uiData) {
70
- var _window, _draggleRef$current;
71
- // eslint-disable-next-line no-unsafe-optional-chaining
72
- var _window$document$docu = (_window = window) === null || _window === void 0 || (_window = _window.document) === null || _window === void 0 ? void 0 : _window.documentElement,
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
- setBounds({
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
- id: id,
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: true,
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
- afterClose: afterClose,
103
+ width: width,
137
104
  modalRender: function modalRender(modal) {
138
- return /*#__PURE__*/_jsx(Draggable, {
139
- disabled: disabled,
140
- bounds: bounds,
141
- handle: "#".concat(id),
142
- onStart: function onStart(event, uiData) {
143
- return _onStart(event, uiData);
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
- children: /*#__PURE__*/_jsx("div", {
146
- children: modal
147
- })
122
+ minWidth: minResizeWidth,
123
+ minHeight: minResizeHeight,
124
+ children: modal
148
125
  });
149
126
  }
150
127
  }, rest), {}, {
151
- children: renderContent ? renderContent : /*#__PURE__*/_jsx("div", {
152
- className: "gantt-leftbar-defalutItem"
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 /*#__PURE__*/React.memo(CenterModal);
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 {};