@gingkoo/pandora-metabase 1.0.62 → 1.0.63

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.
Files changed (7) hide show
  1. package/lib/cjs/components/metabase/index.js +8 -4
  2. package/lib/cjs/components/popup.d.ts +40 -102
  3. package/lib/cjs/components/popup.js +219 -190
  4. package/lib/es/components/metabase/index.js +8 -4
  5. package/lib/es/components/popup.d.ts +40 -102
  6. package/lib/es/components/popup.js +220 -191
  7. package/package.json +1 -1
package/lib/cjs/components/metabase/index.js CHANGED
@@ -157,8 +157,10 @@ var Metabase = function Metabase(props) {
157
157
  disabled: saveLoading,
158
158
  onClick: onCheck,
159
159
  children: btnText || (0, _locale.__)('SqlQueryBuilder.visualize')
160
- }) : null, store.popupContainer.current && (0, _jsxRuntime.jsx)(_popup["default"], {
161
- container: store.popupData.container || store.popupContainer.current,
160
+ }) : null, store.popupContainer.current && (0, _jsxRuntime.jsx)(_popup["default"]
161
+ // container={store.popupData.container || store.popupContainer.current}
162
+ , {
163
+ // container={store.popupData.container || store.popupContainer.current}
162
164
  visible: store.popupData.visible,
163
165
  node: store.popupData.node,
164
166
  closable: store.popupClosable,
@@ -168,8 +170,10 @@ var Metabase = function Metabase(props) {
168
170
  });
169
171
  },
170
172
  children: popupContent
171
- }), store.popupContainer.current && (0, _jsxRuntime.jsx)(_popup["default"], {
172
- container: store.popupData2.container || store.popupContainer.current,
173
+ }), store.popupContainer.current && (0, _jsxRuntime.jsx)(_popup["default"]
174
+ // container={store.popupData2.container || store.popupContainer.current}
175
+ , {
176
+ // container={store.popupData2.container || store.popupContainer.current}
173
177
  visible: store.popupData2.visible,
174
178
  node: store.popupData2.node,
175
179
  closable: store.popupClosable2,
package/lib/cjs/components/popup.d.ts CHANGED
@@ -1,109 +1,47 @@
1
1
  import * as React from 'react';
2
+ interface PropsType {
3
+ visible: boolean;
4
+ children: React.ReactNode;
5
+ hideVisible: () => void;
6
+ node: HTMLElement;
7
+ innerSpacing?: number;
8
+ zIndex?: string | number;
9
+ closable?: boolean;
10
+ }
2
11
  interface StateType {
3
12
  popupRefreshKey: number;
4
13
  }
5
- export declare function generateTrigger(PortalComponent: any): {
6
- new (props: PropsType): {
7
- resizeObserver: ResizeObserver | null;
8
- resetId: number;
9
- ref: any;
10
- componentDidMount(): void;
11
- componentDidUpdate(prevProps: PropsType): void;
12
- componentWillUnmount(): void;
13
- refreshPopup: () => void;
14
- initResizeObserver: () => void;
15
- bindEvent: () => void;
16
- closePopup: () => void;
17
- attachParent: (popupContainer: HTMLSpanElement) => void;
18
- getCurrentNodePos: () => {
19
- x: number;
20
- y: number;
21
- t: number;
22
- h: any;
23
- };
24
- getContainer: () => HTMLSpanElement;
25
- getComponent: () => import("react/jsx-runtime").JSX.Element;
26
- didUpdate: () => void | false;
27
- render(): import("react/jsx-runtime").JSX.Element | null;
28
- context: unknown;
29
- setState<K extends "popupRefreshKey">(state: StateType | ((prevState: Readonly<StateType>, props: Readonly<PropsType>) => StateType | Pick<StateType, K> | null) | Pick<StateType, K> | null, callback?: (() => void) | undefined): void;
30
- forceUpdate(callback?: (() => void) | undefined): void;
31
- readonly props: Readonly<PropsType>;
32
- state: Readonly<StateType>;
33
- refs: {
34
- [key: string]: React.ReactInstance;
35
- };
36
- shouldComponentUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): boolean;
37
- componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
38
- getSnapshotBeforeUpdate?(prevProps: Readonly<PropsType>, prevState: Readonly<StateType>): any;
39
- componentWillMount?(): void;
40
- UNSAFE_componentWillMount?(): void;
41
- componentWillReceiveProps?(nextProps: Readonly<PropsType>, nextContext: any): void;
42
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<PropsType>, nextContext: any): void;
43
- componentWillUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): void;
44
- UNSAFE_componentWillUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): void;
45
- };
46
- defaultProps: {
14
+ declare class TriggerInternal extends React.Component<PropsType, StateType> {
15
+ private resizeObserver;
16
+ private resetId;
17
+ private popupContainer;
18
+ private contentResizeObserver;
19
+ private scrollHeightCheckTimer;
20
+ private lastScrollHeight;
21
+ private handleClickOutside;
22
+ static defaultProps: {
47
23
  visible: boolean;
48
- children: null;
24
+ closable: boolean;
25
+ innerSpacing: number;
49
26
  };
50
- contextType?: React.Context<any> | undefined;
51
- };
52
- declare const _default: {
53
- new (props: PropsType): {
54
- resizeObserver: ResizeObserver | null;
55
- resetId: number;
56
- ref: any;
57
- componentDidMount(): void;
58
- componentDidUpdate(prevProps: PropsType): void;
59
- componentWillUnmount(): void;
60
- refreshPopup: () => void;
61
- initResizeObserver: () => void;
62
- bindEvent: () => void;
63
- closePopup: () => void;
64
- attachParent: (popupContainer: HTMLSpanElement) => void;
65
- getCurrentNodePos: () => {
66
- x: number;
67
- y: number;
68
- t: number;
69
- h: any;
70
- };
71
- getContainer: () => HTMLSpanElement;
72
- getComponent: () => import("react/jsx-runtime").JSX.Element;
73
- didUpdate: () => void | false;
74
- render(): import("react/jsx-runtime").JSX.Element | null;
75
- context: unknown;
76
- setState<K extends "popupRefreshKey">(state: StateType | ((prevState: Readonly<StateType>, props: Readonly<PropsType>) => StateType | Pick<StateType, K> | null) | Pick<StateType, K> | null, callback?: (() => void) | undefined): void;
77
- forceUpdate(callback?: (() => void) | undefined): void;
78
- readonly props: Readonly<PropsType>;
79
- state: Readonly<StateType>;
80
- refs: {
81
- [key: string]: React.ReactInstance;
82
- };
83
- shouldComponentUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): boolean;
84
- componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
85
- getSnapshotBeforeUpdate?(prevProps: Readonly<PropsType>, prevState: Readonly<StateType>): any;
86
- componentWillMount?(): void;
87
- UNSAFE_componentWillMount?(): void;
88
- componentWillReceiveProps?(nextProps: Readonly<PropsType>, nextContext: any): void;
89
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<PropsType>, nextContext: any): void;
90
- componentWillUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): void;
91
- UNSAFE_componentWillUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): void;
92
- };
93
- defaultProps: {
94
- visible: boolean;
95
- children: null;
96
- };
97
- contextType?: React.Context<any> | undefined;
98
- };
99
- export default _default;
100
- interface PropsType {
101
- visible: boolean;
102
- children: any;
103
- hideVisible: Function;
104
- node: any;
105
- innerSpacing?: number;
106
- container?: HTMLDivElement;
107
- zIndex?: string | null;
108
- closable?: boolean;
27
+ ref: React.RefObject<HTMLDivElement>;
28
+ constructor(props: PropsType);
29
+ componentDidMount(): void;
30
+ componentDidUpdate(prevProps: PropsType): void;
31
+ componentWillUnmount(): void;
32
+ private mountPopup;
33
+ private unmountPopup;
34
+ private cleanup;
35
+ private refreshPopup;
36
+ private initContentResizeObserver;
37
+ private startScrollHeightCheck;
38
+ private closePopup;
39
+ private createPopupContainer;
40
+ private getContainer;
41
+ private getComponent;
42
+ private didUpdate;
43
+ render(): import("react/jsx-runtime").JSX.Element | null;
109
44
  }
45
+ export declare function generateTrigger(PortalComponent: any): typeof TriggerInternal;
46
+ declare const _default: typeof TriggerInternal;
47
+ export default _default;
package/lib/cjs/components/popup.js CHANGED
@@ -21,207 +21,236 @@ var _event = require("../utils/event");
21
21
  var _Portal = _interopRequireDefault(require("../common/Portal"));
22
22
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
23
23
  function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
24
- function returnDocument(element) {
25
- if (element) {
26
- return element.ownerDocument;
27
- }
28
- return window.document;
29
- }
30
24
  var outSpacing = 10;
31
- function generateTrigger(PortalComponent) {
32
- var Trigger = /*#__PURE__*/function (_React$Component) {
33
- function Trigger(props) {
34
- var _this;
35
- (0, _classCallCheck2["default"])(this, Trigger);
36
- _this = _callSuper(this, Trigger, [props]);
37
- (0, _defineProperty2["default"])(_this, "resizeObserver", null);
38
- // 显式声明 resizeObserver 属性
39
- (0, _defineProperty2["default"])(_this, "resetId", -1);
40
- (0, _defineProperty2["default"])(_this, "ref", React.createRef());
41
- // 刷新弹窗内容
42
- (0, _defineProperty2["default"])(_this, "refreshPopup", function () {
43
- _this.setState(function (prev) {
44
- return {
45
- popupRefreshKey: prev.popupRefreshKey + 1
46
- };
47
- });
48
- });
49
- // children高度变化后，从新计算高度
50
- (0, _defineProperty2["default"])(_this, "initResizeObserver", function () {
51
- var targetNode = _this.ref.current;
52
- if (!targetNode) return;
53
- // 如果已经存在 ResizeObserver，先断开连接
54
- if (_this.resizeObserver) {
55
- _this.resizeObserver.disconnect();
25
+ var TriggerInternal = /*#__PURE__*/function (_React$Component) {
26
+ function TriggerInternal(props) {
27
+ var _this;
28
+ (0, _classCallCheck2["default"])(this, TriggerInternal);
29
+ _this = _callSuper(this, TriggerInternal, [props]);
30
+ (0, _defineProperty2["default"])(_this, "resizeObserver", null);
31
+ (0, _defineProperty2["default"])(_this, "resetId", -1);
32
+ (0, _defineProperty2["default"])(_this, "popupContainer", null);
33
+ (0, _defineProperty2["default"])(_this, "contentResizeObserver", null);
34
+ (0, _defineProperty2["default"])(_this, "scrollHeightCheckTimer", null);
35
+ (0, _defineProperty2["default"])(_this, "lastScrollHeight", 0);
36
+ (0, _defineProperty2["default"])(_this, "handleClickOutside", function (e) {
37
+ var ele = e.target;
38
+ while (ele) {
39
+ if (ele === _this.props.node) return;
40
+ if (_this.popupContainer && ele === _this.popupContainer) return;
41
+ ele = ele.parentNode;
42
+ }
43
+ _this.closePopup();
44
+ });
45
+ (0, _defineProperty2["default"])(_this, "ref", React.createRef());
46
+ (0, _defineProperty2["default"])(_this, "mountPopup", function () {
47
+ _this.createPopupContainer();
48
+ _this.resetId = _event.winResetEvent.addEvent(_this.didUpdate, _this, 300);
49
+ window.addEventListener('scroll', _this.didUpdate, true);
50
+ document.body.addEventListener('click', _this.handleClickOutside, false);
51
+ _this.initContentResizeObserver();
52
+ _this.startScrollHeightCheck();
53
+ setTimeout(function () {
54
+ _this.didUpdate();
55
+ if (_this.popupContainer) {
56
+ _this.popupContainer.style.opacity = '1';
57
+ _this.popupContainer.style.willChange = 'transform';
56
58
  }
57
- // 初始化 ResizeObserver 并开始观察目标节点
58
- _this.resizeObserver = new ResizeObserver(function (entries) {
59
- entries.forEach(function (entry) {
60
- _this.didUpdate();
61
- });
62
- });
63
- _this.resizeObserver.observe(targetNode);
64
- });
65
- (0, _defineProperty2["default"])(_this, "bindEvent", function () {
66
- var that = _this;
67
- returnDocument().body.addEventListener('click', function (e) {
68
- var ele = e.target;
69
- while (ele != null) {
70
- if (ele === that.props.node) {
71
- return false;
72
- }
73
- ele = ele.parentNode;
74
- }
75
- that.closePopup();
76
- }, false);
77
- });
78
- (0, _defineProperty2["default"])(_this, "closePopup", function () {
79
- _this.props.visible && _this.props.closable && _this.props.hideVisible();
80
- });
81
- (0, _defineProperty2["default"])(_this, "attachParent", function (popupContainer) {
82
- var mountNode = _this.props.container || returnDocument().body;
83
- mountNode.appendChild(popupContainer);
84
- });
85
- (0, _defineProperty2["default"])(_this, "getCurrentNodePos", function () {
86
- var _this$props = _this.props,
87
- node = _this$props.node,
88
- container = _this$props.container;
59
+ }, 0);
60
+ setTimeout(function () {
61
+ _this.didUpdate();
62
+ }, 100);
63
+ });
64
+ (0, _defineProperty2["default"])(_this, "unmountPopup", function () {
65
+ if (_this.popupContainer) {
66
+ _this.popupContainer.style.opacity = '0';
67
+ }
68
+ _this.cleanup();
69
+ });
70
+ (0, _defineProperty2["default"])(_this, "cleanup", function () {
71
+ _event.winResetEvent.removeEvent(_this.resetId);
72
+ window.removeEventListener('scroll', _this.didUpdate, true);
73
+ document.body.removeEventListener('click', _this.handleClickOutside, false);
74
+ if (_this.resizeObserver) {
75
+ _this.resizeObserver.disconnect();
76
+ _this.resizeObserver = null;
77
+ }
78
+ if (_this.contentResizeObserver) {
79
+ _this.contentResizeObserver.disconnect();
80
+ _this.contentResizeObserver = null;
81
+ }
82
+ if (_this.scrollHeightCheckTimer) {
83
+ clearInterval(_this.scrollHeightCheckTimer);
84
+ _this.scrollHeightCheckTimer = null;
85
+ }
86
+ if (_this.popupContainer && document.body.contains(_this.popupContainer)) {
87
+ document.body.removeChild(_this.popupContainer);
88
+ _this.popupContainer = null;
89
+ }
90
+ });
91
+ (0, _defineProperty2["default"])(_this, "refreshPopup", function () {
92
+ _this.setState(function (prev) {
89
93
  return {
90
- x: (0, _helperDom.getElementLeft)(node) - (0, _helperDom.getElementLeft)(container),
91
- y: (0, _helperDom.getElementTop)(node) - (0, _helperDom.getElementTop)(container),
92
- t: (0, _helperDom.getElementTop)(container),
93
- h: node.offsetHeight
94
+ popupRefreshKey: prev.popupRefreshKey + 1
94
95
  };
95
96
  });
96
- (0, _defineProperty2["default"])(_this, "getContainer", function () {
97
- var pos = _this.getCurrentNodePos();
98
- var _this$props2 = _this.props,
99
- _this$props2$innerSpa = _this$props2.innerSpacing,
100
- innerSpacing = _this$props2$innerSpa === void 0 ? 10 : _this$props2$innerSpa,
101
- zIndex = _this$props2.zIndex;
102
- var popupContainer = returnDocument().createElement('span');
103
- popupContainer.style.position = 'absolute';
104
- popupContainer.style.top = '0px';
105
- popupContainer.style.left = '0px';
106
- popupContainer.style.transform = "translateX(".concat(pos.x, "px) translateY(").concat(pos.y + pos.h + innerSpacing, "px) translateZ(0px)");
107
- popupContainer.style.pointerEvents = 'none';
108
- popupContainer.style.zIndex = zIndex || '999';
109
- _this.attachParent(popupContainer);
110
- return popupContainer;
97
+ });
98
+ (0, _defineProperty2["default"])(_this, "initContentResizeObserver", function () {
99
+ var targetNode = _this.ref.current;
100
+ if (!targetNode) return;
101
+ if (_this.contentResizeObserver) {
102
+ _this.contentResizeObserver.disconnect();
103
+ }
104
+ _this.contentResizeObserver = new ResizeObserver(function () {
105
+ _this.didUpdate();
111
106
  });
112
- (0, _defineProperty2["default"])(_this, "getComponent", function () {
113
- return (0, _jsxRuntime.jsx)("div", {
114
- ref: _this.ref,
115
- style: {
116
- overflowX: 'hidden',
117
- overflowY: 'auto',
118
- backgroundColor: '#fff',
119
- pointerEvents: 'auto',
120
- transition: 'all 0.3s',
121
- boxShadow: '0 4px 10px rgba(0,0,0,0.13)',
122
- borderRadius: 6
123
- },
124
- onClick: function onClick(e) {
125
- return _this.props.closable && e.stopPropagation();
126
- },
127
- onMouseDown: function onMouseDown(e) {
128
- return e.stopPropagation();
129
- },
130
- children: React.cloneElement(_this.props.children, {
131
- key: _this.state.popupRefreshKey,
132
- didUpdate: _this.didUpdate
133
- })
134
- });
107
+ _this.contentResizeObserver.observe(targetNode);
108
+ // 额外监听图片加载
109
+ var images = targetNode.querySelectorAll('img');
110
+ images.forEach(function (img) {
111
+ if (!img.complete) {
112
+ img.addEventListener('load', _this.didUpdate);
113
+ img.addEventListener('error', _this.didUpdate);
114
+ }
135
115
  });
136
- (0, _defineProperty2["default"])(_this, "didUpdate", function () {
137
- var _this$ref;
138
- if (!_this.props.node) return false;
139
- var _this$props3 = _this.props,
140
- _this$props3$innerSpa = _this$props3.innerSpacing,
141
- innerSpacing = _this$props3$innerSpa === void 0 ? 10 : _this$props3$innerSpa,
142
- container = _this$props3.container;
143
- var pos = _this.getCurrentNodePos();
144
- var posY = pos.y - (0, _helperDom.getScrollTop)(container);
145
- if (!_this.ref) return false;
146
- var realHeight = ((_this$ref = _this.ref) === null || _this$ref === void 0 || (_this$ref = _this$ref.current) === null || _this$ref === void 0 || (_this$ref = _this$ref.childNodes) === null || _this$ref === void 0 || (_this$ref = _this$ref[0]) === null || _this$ref === void 0 ? void 0 : _this$ref.offsetHeight) || 0;
147
- if (!realHeight) return false;
148
- var _getWindowSize = (0, _helperDom.getWindowSize)(),
149
- winH = _getWindowSize.height;
150
- var containerH = (0, _helperDom.getContainerVisibleHeight)(container);
151
- var downH = (containerH || winH) - posY - pos.h; // 元素下面可用高度
152
- var maxHeight = 0;
153
- var topHeight = (0, _helperDom.getScrollTop)(container);
154
- if (downH >= posY || realHeight <= downH - innerSpacing - outSpacing) {
155
- // 下面比上面宽敞 或 下面足够放下所有 放下面
156
- maxHeight = Math.min(realHeight, downH - innerSpacing - outSpacing);
157
- topHeight += posY + pos.h + innerSpacing;
158
- } else {
159
- // 放上面
160
- maxHeight = Math.min(realHeight, posY - innerSpacing - outSpacing);
161
- topHeight += posY - innerSpacing - maxHeight;
116
+ });
117
+ (0, _defineProperty2["default"])(_this, "startScrollHeightCheck", function () {
118
+ if (_this.scrollHeightCheckTimer) {
119
+ clearInterval(_this.scrollHeightCheckTimer);
120
+ }
121
+ _this.scrollHeightCheckTimer = window.setInterval(function () {
122
+ if (_this.ref.current) {
123
+ var currentScrollHeight = _this.ref.current.scrollHeight;
124
+ if (currentScrollHeight !== _this.lastScrollHeight) {
125
+ _this.lastScrollHeight = currentScrollHeight;
126
+ _this.didUpdate();
127
+ }
162
128
  }
163
- _this.ref.current.offsetParent.style.transform = "translateX(".concat(pos.x, "px) translateY(").concat(topHeight, "px) translateZ(0px)");
164
- _this.ref.current.offsetParent.style.transition = 'all 0.3s';
165
- _this.ref.current.style.cssText += "max-height: ".concat(maxHeight, "px");
166
- _this.ref.current.style.cssText += "position: relative";
129
+ }, 100);
130
+ });
131
+ (0, _defineProperty2["default"])(_this, "closePopup", function () {
132
+ if (_this.props.visible && _this.props.closable) {
133
+ _this.props.hideVisible();
134
+ }
135
+ });
136
+ (0, _defineProperty2["default"])(_this, "createPopupContainer", function () {
137
+ var _this$props$zIndex;
138
+ if (_this.popupContainer) return;
139
+ var container = document.createElement('span');
140
+ container.style.cssText = "\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: ".concat((_this$props$zIndex = _this.props.zIndex) !== null && _this$props$zIndex !== void 0 ? _this$props$zIndex : 999, ";\n opacity: 0;\n transition: opacity 0.2s ease;\n will-change: transform;\n ");
141
+ document.body.appendChild(container);
142
+ _this.popupContainer = container;
143
+ });
144
+ (0, _defineProperty2["default"])(_this, "getContainer", function () {
145
+ if (!_this.popupContainer) {
146
+ _this.createPopupContainer();
147
+ }
148
+ return _this.popupContainer;
149
+ });
150
+ (0, _defineProperty2["default"])(_this, "getComponent", function () {
151
+ return (0, _jsxRuntime.jsx)("div", {
152
+ ref: _this.ref,
153
+ style: {
154
+ overflowX: 'hidden',
155
+ overflowY: 'auto',
156
+ backgroundColor: '#fff',
157
+ pointerEvents: 'auto',
158
+ transition: 'max-height 0.3s ease',
159
+ boxShadow: '0 4px 10px rgba(0,0,0,0.13)',
160
+ borderRadius: 6,
161
+ position: 'relative'
162
+ },
163
+ onClick: function onClick(e) {
164
+ return _this.props.closable && e.stopPropagation();
165
+ },
166
+ onMouseDown: function onMouseDown(e) {
167
+ return e.stopPropagation();
168
+ },
169
+ children: React.cloneElement(_this.props.children, {
170
+ key: _this.state.popupRefreshKey
171
+ })
167
172
  });
168
- _this.state = {
169
- popupRefreshKey: 1
170
- };
171
- return _this;
173
+ });
174
+ (0, _defineProperty2["default"])(_this, "didUpdate", function () {
175
+ if (!_this.props.visible || !_this.props.node || !_this.ref.current || !_this.popupContainer) return;
176
+ var _this$props = _this.props,
177
+ node = _this$props.node,
178
+ _this$props$innerSpac = _this$props.innerSpacing,
179
+ innerSpacing = _this$props$innerSpac === void 0 ? 10 : _this$props$innerSpac;
180
+ var rect = node.getBoundingClientRect();
181
+ var triggerTop = rect.top + window.scrollY;
182
+ var triggerLeft = rect.left + window.scrollX;
183
+ var triggerHeight = rect.height;
184
+ var popupContent = _this.ref.current;
185
+ var realHeight = popupContent.scrollHeight;
186
+ var _getWindowSize = (0, _helperDom.getWindowSize)(),
187
+ viewportHeight = _getWindowSize.height;
188
+ var spaceBelow = viewportHeight - rect.bottom;
189
+ var spaceAbove = rect.top;
190
+ var topPosition;
191
+ var maxHeight;
192
+ if (spaceBelow >= realHeight + innerSpacing + outSpacing || spaceBelow >= spaceAbove) {
193
+ topPosition = triggerTop + triggerHeight + innerSpacing;
194
+ maxHeight = Math.min(realHeight, spaceBelow - innerSpacing - outSpacing);
195
+ } else {
196
+ maxHeight = Math.min(realHeight, spaceAbove - innerSpacing - outSpacing);
197
+ topPosition = triggerTop - innerSpacing - maxHeight;
198
+ }
199
+ _this.popupContainer.style.transform = "translate(".concat(triggerLeft, "px, ").concat(topPosition, "px)");
200
+ popupContent.style.maxHeight = "".concat(maxHeight, "px");
201
+ });
202
+ _this.state = {
203
+ popupRefreshKey: 1
204
+ };
205
+ return _this;
206
+ }
207
+ (0, _inherits2["default"])(TriggerInternal, _React$Component);
208
+ return (0, _createClass2["default"])(TriggerInternal, [{
209
+ key: "componentDidMount",
210
+ value: function componentDidMount() {
211
+ if (this.props.visible) {
212
+ this.mountPopup();
213
+ }
172
214
  }
173
- (0, _inherits2["default"])(Trigger, _React$Component);
174
- return (0, _createClass2["default"])(Trigger, [{
175
- key: "componentDidMount",
176
- value: function componentDidMount() {
177
- this.resetId = _event.winResetEvent.addEvent(this.didUpdate, this, 300);
178
- this.props.container && this.props.container.addEventListener('scroll', this.didUpdate);
179
- this.bindEvent();
180
- // 延迟绑定 ResizeObserver 到 ensure the element is ready
181
- this.initResizeObserver();
182
- }
183
- }, {
184
- key: "componentDidUpdate",
185
- value: function componentDidUpdate(prevProps) {
186
- // 如果 children 发生变化，重新初始化观察器
187
- if (prevProps.children !== this.props.children) {
188
- this.initResizeObserver();
189
- }
190
- if (prevProps.node !== this.props.node) {
191
- this.refreshPopup(); //点击元素不同，刷新一下
192
- }
215
+ }, {
216
+ key: "componentDidUpdate",
217
+ value: function componentDidUpdate(prevProps) {
218
+ if (!prevProps.visible && this.props.visible) {
219
+ this.mountPopup();
193
220
  }
194
- }, {
195
- key: "componentWillUnmount",
196
- value: function componentWillUnmount() {
197
- _event.winResetEvent.removeEvent(this.resetId);
198
- this.props.container && this.props.container.removeEventListener('scroll', this.didUpdate);
199
- if (this.resizeObserver) {
200
- this.resizeObserver.disconnect();
201
- this.resizeObserver = null;
202
- }
221
+ if (prevProps.visible && !this.props.visible) {
222
+ this.unmountPopup();
203
223
  }
204
- }, {
205
- key: "render",
206
- value: function render() {
207
- var portal = null;
208
- if (this.props.visible) {
209
- portal = (0, _jsxRuntime.jsx)(PortalComponent, {
210
- getContainer: this.getContainer,
211
- didUpdate: this.didUpdate,
212
- children: this.getComponent()
213
- });
214
- }
215
- return portal;
216
- }
217
- }]);
218
- }(React.Component);
219
- // 监听窗口改变事件id 用于组件销毁的时候清除事件
220
- (0, _defineProperty2["default"])(Trigger, "defaultProps", {
221
- visible: false,
222
- // 是否显示
223
- children: null
224
- });
225
- return Trigger;
224
+ if (prevProps.children !== this.props.children) {
225
+ this.initContentResizeObserver();
226
+ }
227
+ if (prevProps.node !== this.props.node) {
228
+ this.refreshPopup();
229
+ }
230
+ }
231
+ }, {
232
+ key: "componentWillUnmount",
233
+ value: function componentWillUnmount() {
234
+ this.cleanup();
235
+ }
236
+ }, {
237
+ key: "render",
238
+ value: function render() {
239
+ if (!this.props.visible || !this.popupContainer) return null;
240
+ return (0, _jsxRuntime.jsx)(_Portal["default"], {
241
+ getContainer: this.getContainer,
242
+ didUpdate: this.didUpdate,
243
+ children: this.getComponent()
244
+ });
245
+ }
246
+ }]);
247
+ }(React.Component);
248
+ (0, _defineProperty2["default"])(TriggerInternal, "defaultProps", {
249
+ visible: false,
250
+ closable: true,
251
+ innerSpacing: 10
252
+ });
253
+ function generateTrigger(PortalComponent) {
254
+ return TriggerInternal;
226
255
  }
227
256
  var _default = exports["default"] = generateTrigger(_Portal["default"]);
package/lib/es/components/metabase/index.js CHANGED
@@ -151,8 +151,10 @@ var Metabase = function Metabase(props) {
151
151
  disabled: saveLoading,
152
152
  onClick: onCheck,
153
153
  children: btnText || __('SqlQueryBuilder.visualize')
154
- }) : null, store.popupContainer.current && _jsx(Popup, {
155
- container: store.popupData.container || store.popupContainer.current,
154
+ }) : null, store.popupContainer.current && _jsx(Popup
155
+ // container={store.popupData.container || store.popupContainer.current}
156
+ , {
157
+ // container={store.popupData.container || store.popupContainer.current}
156
158
  visible: store.popupData.visible,
157
159
  node: store.popupData.node,
158
160
  closable: store.popupClosable,
@@ -162,8 +164,10 @@ var Metabase = function Metabase(props) {
162
164
  });
163
165
  },
164
166
  children: popupContent
165
- }), store.popupContainer.current && _jsx(Popup, {
166
- container: store.popupData2.container || store.popupContainer.current,
167
+ }), store.popupContainer.current && _jsx(Popup
168
+ // container={store.popupData2.container || store.popupContainer.current}
169
+ , {
170
+ // container={store.popupData2.container || store.popupContainer.current}
167
171
  visible: store.popupData2.visible,
168
172
  node: store.popupData2.node,
169
173
  closable: store.popupClosable2,
package/lib/es/components/popup.d.ts CHANGED
@@ -1,109 +1,47 @@
1
1
  import * as React from 'react';
2
+ interface PropsType {
3
+ visible: boolean;
4
+ children: React.ReactNode;
5
+ hideVisible: () => void;
6
+ node: HTMLElement;
7
+ innerSpacing?: number;
8
+ zIndex?: string | number;
9
+ closable?: boolean;
10
+ }
2
11
  interface StateType {
3
12
  popupRefreshKey: number;
4
13
  }
5
- export declare function generateTrigger(PortalComponent: any): {
6
- new (props: PropsType): {
7
- resizeObserver: ResizeObserver | null;
8
- resetId: number;
9
- ref: any;
10
- componentDidMount(): void;
11
- componentDidUpdate(prevProps: PropsType): void;
12
- componentWillUnmount(): void;
13
- refreshPopup: () => void;
14
- initResizeObserver: () => void;
15
- bindEvent: () => void;
16
- closePopup: () => void;
17
- attachParent: (popupContainer: HTMLSpanElement) => void;
18
- getCurrentNodePos: () => {
19
- x: number;
20
- y: number;
21
- t: number;
22
- h: any;
23
- };
24
- getContainer: () => HTMLSpanElement;
25
- getComponent: () => import("react/jsx-runtime").JSX.Element;
26
- didUpdate: () => void | false;
27
- render(): import("react/jsx-runtime").JSX.Element | null;
28
- context: unknown;
29
- setState<K extends "popupRefreshKey">(state: StateType | ((prevState: Readonly<StateType>, props: Readonly<PropsType>) => StateType | Pick<StateType, K> | null) | Pick<StateType, K> | null, callback?: (() => void) | undefined): void;
30
- forceUpdate(callback?: (() => void) | undefined): void;
31
- readonly props: Readonly<PropsType>;
32
- state: Readonly<StateType>;
33
- refs: {
34
- [key: string]: React.ReactInstance;
35
- };
36
- shouldComponentUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): boolean;
37
- componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
38
- getSnapshotBeforeUpdate?(prevProps: Readonly<PropsType>, prevState: Readonly<StateType>): any;
39
- componentWillMount?(): void;
40
- UNSAFE_componentWillMount?(): void;
41
- componentWillReceiveProps?(nextProps: Readonly<PropsType>, nextContext: any): void;
42
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<PropsType>, nextContext: any): void;
43
- componentWillUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): void;
44
- UNSAFE_componentWillUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): void;
45
- };
46
- defaultProps: {
14
+ declare class TriggerInternal extends React.Component<PropsType, StateType> {
15
+ private resizeObserver;
16
+ private resetId;
17
+ private popupContainer;
18
+ private contentResizeObserver;
19
+ private scrollHeightCheckTimer;
20
+ private lastScrollHeight;
21
+ private handleClickOutside;
22
+ static defaultProps: {
47
23
  visible: boolean;
48
- children: null;
24
+ closable: boolean;
25
+ innerSpacing: number;
49
26
  };
50
- contextType?: React.Context<any> | undefined;
51
- };
52
- declare const _default: {
53
- new (props: PropsType): {
54
- resizeObserver: ResizeObserver | null;
55
- resetId: number;
56
- ref: any;
57
- componentDidMount(): void;
58
- componentDidUpdate(prevProps: PropsType): void;
59
- componentWillUnmount(): void;
60
- refreshPopup: () => void;
61
- initResizeObserver: () => void;
62
- bindEvent: () => void;
63
- closePopup: () => void;
64
- attachParent: (popupContainer: HTMLSpanElement) => void;
65
- getCurrentNodePos: () => {
66
- x: number;
67
- y: number;
68
- t: number;
69
- h: any;
70
- };
71
- getContainer: () => HTMLSpanElement;
72
- getComponent: () => import("react/jsx-runtime").JSX.Element;
73
- didUpdate: () => void | false;
74
- render(): import("react/jsx-runtime").JSX.Element | null;
75
- context: unknown;
76
- setState<K extends "popupRefreshKey">(state: StateType | ((prevState: Readonly<StateType>, props: Readonly<PropsType>) => StateType | Pick<StateType, K> | null) | Pick<StateType, K> | null, callback?: (() => void) | undefined): void;
77
- forceUpdate(callback?: (() => void) | undefined): void;
78
- readonly props: Readonly<PropsType>;
79
- state: Readonly<StateType>;
80
- refs: {
81
- [key: string]: React.ReactInstance;
82
- };
83
- shouldComponentUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): boolean;
84
- componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
85
- getSnapshotBeforeUpdate?(prevProps: Readonly<PropsType>, prevState: Readonly<StateType>): any;
86
- componentWillMount?(): void;
87
- UNSAFE_componentWillMount?(): void;
88
- componentWillReceiveProps?(nextProps: Readonly<PropsType>, nextContext: any): void;
89
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<PropsType>, nextContext: any): void;
90
- componentWillUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): void;
91
- UNSAFE_componentWillUpdate?(nextProps: Readonly<PropsType>, nextState: Readonly<StateType>, nextContext: any): void;
92
- };
93
- defaultProps: {
94
- visible: boolean;
95
- children: null;
96
- };
97
- contextType?: React.Context<any> | undefined;
98
- };
99
- export default _default;
100
- interface PropsType {
101
- visible: boolean;
102
- children: any;
103
- hideVisible: Function;
104
- node: any;
105
- innerSpacing?: number;
106
- container?: HTMLDivElement;
107
- zIndex?: string | null;
108
- closable?: boolean;
27
+ ref: React.RefObject<HTMLDivElement>;
28
+ constructor(props: PropsType);
29
+ componentDidMount(): void;
30
+ componentDidUpdate(prevProps: PropsType): void;
31
+ componentWillUnmount(): void;
32
+ private mountPopup;
33
+ private unmountPopup;
34
+ private cleanup;
35
+ private refreshPopup;
36
+ private initContentResizeObserver;
37
+ private startScrollHeightCheck;
38
+ private closePopup;
39
+ private createPopupContainer;
40
+ private getContainer;
41
+ private getComponent;
42
+ private didUpdate;
43
+ render(): import("react/jsx-runtime").JSX.Element | null;
109
44
  }
45
+ export declare function generateTrigger(PortalComponent: any): typeof TriggerInternal;
46
+ declare const _default: typeof TriggerInternal;
47
+ export default _default;
package/lib/es/components/popup.js CHANGED
@@ -8,210 +8,239 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
8
8
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
9
9
  import { jsx as _jsx } from "react/jsx-runtime";
10
10
  import * as React from 'react';
11
- import { getWindowSize, getScrollTop, getElementLeft, getElementTop, getContainerVisibleHeight } from '../utils/helper-dom';
11
+ import { getWindowSize } from '../utils/helper-dom';
12
12
  import { winResetEvent } from '../utils/event';
13
13
  import Portal from '../common/Portal';
14
- function returnDocument(element) {
15
- if (element) {
16
- return element.ownerDocument;
17
- }
18
- return window.document;
19
- }
20
14
  var outSpacing = 10;
21
- export function generateTrigger(PortalComponent) {
22
- var Trigger = /*#__PURE__*/function (_React$Component) {
23
- function Trigger(props) {
24
- var _this;
25
- _classCallCheck(this, Trigger);
26
- _this = _callSuper(this, Trigger, [props]);
27
- _defineProperty(_this, "resizeObserver", null);
28
- // 显式声明 resizeObserver 属性
29
- _defineProperty(_this, "resetId", -1);
30
- _defineProperty(_this, "ref", React.createRef());
31
- // 刷新弹窗内容
32
- _defineProperty(_this, "refreshPopup", function () {
33
- _this.setState(function (prev) {
34
- return {
35
- popupRefreshKey: prev.popupRefreshKey + 1
36
- };
37
- });
38
- });
39
- // children高度变化后，从新计算高度
40
- _defineProperty(_this, "initResizeObserver", function () {
41
- var targetNode = _this.ref.current;
42
- if (!targetNode) return;
43
- // 如果已经存在 ResizeObserver，先断开连接
44
- if (_this.resizeObserver) {
45
- _this.resizeObserver.disconnect();
15
+ var TriggerInternal = /*#__PURE__*/function (_React$Component) {
16
+ function TriggerInternal(props) {
17
+ var _this;
18
+ _classCallCheck(this, TriggerInternal);
19
+ _this = _callSuper(this, TriggerInternal, [props]);
20
+ _defineProperty(_this, "resizeObserver", null);
21
+ _defineProperty(_this, "resetId", -1);
22
+ _defineProperty(_this, "popupContainer", null);
23
+ _defineProperty(_this, "contentResizeObserver", null);
24
+ _defineProperty(_this, "scrollHeightCheckTimer", null);
25
+ _defineProperty(_this, "lastScrollHeight", 0);
26
+ _defineProperty(_this, "handleClickOutside", function (e) {
27
+ var ele = e.target;
28
+ while (ele) {
29
+ if (ele === _this.props.node) return;
30
+ if (_this.popupContainer && ele === _this.popupContainer) return;
31
+ ele = ele.parentNode;
32
+ }
33
+ _this.closePopup();
34
+ });
35
+ _defineProperty(_this, "ref", React.createRef());
36
+ _defineProperty(_this, "mountPopup", function () {
37
+ _this.createPopupContainer();
38
+ _this.resetId = winResetEvent.addEvent(_this.didUpdate, _this, 300);
39
+ window.addEventListener('scroll', _this.didUpdate, true);
40
+ document.body.addEventListener('click', _this.handleClickOutside, false);
41
+ _this.initContentResizeObserver();
42
+ _this.startScrollHeightCheck();
43
+ setTimeout(function () {
44
+ _this.didUpdate();
45
+ if (_this.popupContainer) {
46
+ _this.popupContainer.style.opacity = '1';
47
+ _this.popupContainer.style.willChange = 'transform';
46
48
  }
47
- // 初始化 ResizeObserver 并开始观察目标节点
48
- _this.resizeObserver = new ResizeObserver(function (entries) {
49
- entries.forEach(function (entry) {
50
- _this.didUpdate();
51
- });
52
- });
53
- _this.resizeObserver.observe(targetNode);
54
- });
55
- _defineProperty(_this, "bindEvent", function () {
56
- var that = _this;
57
- returnDocument().body.addEventListener('click', function (e) {
58
- var ele = e.target;
59
- while (ele != null) {
60
- if (ele === that.props.node) {
61
- return false;
62
- }
63
- ele = ele.parentNode;
64
- }
65
- that.closePopup();
66
- }, false);
67
- });
68
- _defineProperty(_this, "closePopup", function () {
69
- _this.props.visible && _this.props.closable && _this.props.hideVisible();
70
- });
71
- _defineProperty(_this, "attachParent", function (popupContainer) {
72
- var mountNode = _this.props.container || returnDocument().body;
73
- mountNode.appendChild(popupContainer);
74
- });
75
- _defineProperty(_this, "getCurrentNodePos", function () {
76
- var _this$props = _this.props,
77
- node = _this$props.node,
78
- container = _this$props.container;
49
+ }, 0);
50
+ setTimeout(function () {
51
+ _this.didUpdate();
52
+ }, 100);
53
+ });
54
+ _defineProperty(_this, "unmountPopup", function () {
55
+ if (_this.popupContainer) {
56
+ _this.popupContainer.style.opacity = '0';
57
+ }
58
+ _this.cleanup();
59
+ });
60
+ _defineProperty(_this, "cleanup", function () {
61
+ winResetEvent.removeEvent(_this.resetId);
62
+ window.removeEventListener('scroll', _this.didUpdate, true);
63
+ document.body.removeEventListener('click', _this.handleClickOutside, false);
64
+ if (_this.resizeObserver) {
65
+ _this.resizeObserver.disconnect();
66
+ _this.resizeObserver = null;
67
+ }
68
+ if (_this.contentResizeObserver) {
69
+ _this.contentResizeObserver.disconnect();
70
+ _this.contentResizeObserver = null;
71
+ }
72
+ if (_this.scrollHeightCheckTimer) {
73
+ clearInterval(_this.scrollHeightCheckTimer);
74
+ _this.scrollHeightCheckTimer = null;
75
+ }
76
+ if (_this.popupContainer && document.body.contains(_this.popupContainer)) {
77
+ document.body.removeChild(_this.popupContainer);
78
+ _this.popupContainer = null;
79
+ }
80
+ });
81
+ _defineProperty(_this, "refreshPopup", function () {
82
+ _this.setState(function (prev) {
79
83
  return {
80
- x: getElementLeft(node) - getElementLeft(container),
81
- y: getElementTop(node) - getElementTop(container),
82
- t: getElementTop(container),
83
- h: node.offsetHeight
84
+ popupRefreshKey: prev.popupRefreshKey + 1
84
85
  };
85
86
  });
86
- _defineProperty(_this, "getContainer", function () {
87
- var pos = _this.getCurrentNodePos();
88
- var _this$props2 = _this.props,
89
- _this$props2$innerSpa = _this$props2.innerSpacing,
90
- innerSpacing = _this$props2$innerSpa === void 0 ? 10 : _this$props2$innerSpa,
91
- zIndex = _this$props2.zIndex;
92
- var popupContainer = returnDocument().createElement('span');
93
- popupContainer.style.position = 'absolute';
94
- popupContainer.style.top = '0px';
95
- popupContainer.style.left = '0px';
96
- popupContainer.style.transform = "translateX(".concat(pos.x, "px) translateY(").concat(pos.y + pos.h + innerSpacing, "px) translateZ(0px)");
97
- popupContainer.style.pointerEvents = 'none';
98
- popupContainer.style.zIndex = zIndex || '999';
99
- _this.attachParent(popupContainer);
100
- return popupContainer;
87
+ });
88
+ _defineProperty(_this, "initContentResizeObserver", function () {
89
+ var targetNode = _this.ref.current;
90
+ if (!targetNode) return;
91
+ if (_this.contentResizeObserver) {
92
+ _this.contentResizeObserver.disconnect();
93
+ }
94
+ _this.contentResizeObserver = new ResizeObserver(function () {
95
+ _this.didUpdate();
101
96
  });
102
- _defineProperty(_this, "getComponent", function () {
103
- return _jsx("div", {
104
- ref: _this.ref,
105
- style: {
106
- overflowX: 'hidden',
107
- overflowY: 'auto',
108
- backgroundColor: '#fff',
109
- pointerEvents: 'auto',
110
- transition: 'all 0.3s',
111
- boxShadow: '0 4px 10px rgba(0,0,0,0.13)',
112
- borderRadius: 6
113
- },
114
- onClick: function onClick(e) {
115
- return _this.props.closable && e.stopPropagation();
116
- },
117
- onMouseDown: function onMouseDown(e) {
118
- return e.stopPropagation();
119
- },
120
- children: React.cloneElement(_this.props.children, {
121
- key: _this.state.popupRefreshKey,
122
- didUpdate: _this.didUpdate
123
- })
124
- });
97
+ _this.contentResizeObserver.observe(targetNode);
98
+ // 额外监听图片加载
99
+ var images = targetNode.querySelectorAll('img');
100
+ images.forEach(function (img) {
101
+ if (!img.complete) {
102
+ img.addEventListener('load', _this.didUpdate);
103
+ img.addEventListener('error', _this.didUpdate);
104
+ }
125
105
  });
126
- _defineProperty(_this, "didUpdate", function () {
127
- var _this$ref;
128
- if (!_this.props.node) return false;
129
- var _this$props3 = _this.props,
130
- _this$props3$innerSpa = _this$props3.innerSpacing,
131
- innerSpacing = _this$props3$innerSpa === void 0 ? 10 : _this$props3$innerSpa,
132
- container = _this$props3.container;
133
- var pos = _this.getCurrentNodePos();
134
- var posY = pos.y - getScrollTop(container);
135
- if (!_this.ref) return false;
136
- var realHeight = ((_this$ref = _this.ref) === null || _this$ref === void 0 || (_this$ref = _this$ref.current) === null || _this$ref === void 0 || (_this$ref = _this$ref.childNodes) === null || _this$ref === void 0 || (_this$ref = _this$ref[0]) === null || _this$ref === void 0 ? void 0 : _this$ref.offsetHeight) || 0;
137
- if (!realHeight) return false;
138
- var _getWindowSize = getWindowSize(),
139
- winH = _getWindowSize.height;
140
- var containerH = getContainerVisibleHeight(container);
141
- var downH = (containerH || winH) - posY - pos.h; // 元素下面可用高度
142
- var maxHeight = 0;
143
- var topHeight = getScrollTop(container);
144
- if (downH >= posY || realHeight <= downH - innerSpacing - outSpacing) {
145
- // 下面比上面宽敞 或 下面足够放下所有 放下面
146
- maxHeight = Math.min(realHeight, downH - innerSpacing - outSpacing);
147
- topHeight += posY + pos.h + innerSpacing;
148
- } else {
149
- // 放上面
150
- maxHeight = Math.min(realHeight, posY - innerSpacing - outSpacing);
151
- topHeight += posY - innerSpacing - maxHeight;
106
+ });
107
+ _defineProperty(_this, "startScrollHeightCheck", function () {
108
+ if (_this.scrollHeightCheckTimer) {
109
+ clearInterval(_this.scrollHeightCheckTimer);
110
+ }
111
+ _this.scrollHeightCheckTimer = window.setInterval(function () {
112
+ if (_this.ref.current) {
113
+ var currentScrollHeight = _this.ref.current.scrollHeight;
114
+ if (currentScrollHeight !== _this.lastScrollHeight) {
115
+ _this.lastScrollHeight = currentScrollHeight;
116
+ _this.didUpdate();
117
+ }
152
118
  }
153
- _this.ref.current.offsetParent.style.transform = "translateX(".concat(pos.x, "px) translateY(").concat(topHeight, "px) translateZ(0px)");
154
- _this.ref.current.offsetParent.style.transition = 'all 0.3s';
155
- _this.ref.current.style.cssText += "max-height: ".concat(maxHeight, "px");
156
- _this.ref.current.style.cssText += "position: relative";
119
+ }, 100);
120
+ });
121
+ _defineProperty(_this, "closePopup", function () {
122
+ if (_this.props.visible && _this.props.closable) {
123
+ _this.props.hideVisible();
124
+ }
125
+ });
126
+ _defineProperty(_this, "createPopupContainer", function () {
127
+ var _this$props$zIndex;
128
+ if (_this.popupContainer) return;
129
+ var container = document.createElement('span');
130
+ container.style.cssText = "\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: ".concat((_this$props$zIndex = _this.props.zIndex) !== null && _this$props$zIndex !== void 0 ? _this$props$zIndex : 999, ";\n opacity: 0;\n transition: opacity 0.2s ease;\n will-change: transform;\n ");
131
+ document.body.appendChild(container);
132
+ _this.popupContainer = container;
133
+ });
134
+ _defineProperty(_this, "getContainer", function () {
135
+ if (!_this.popupContainer) {
136
+ _this.createPopupContainer();
137
+ }
138
+ return _this.popupContainer;
139
+ });
140
+ _defineProperty(_this, "getComponent", function () {
141
+ return _jsx("div", {
142
+ ref: _this.ref,
143
+ style: {
144
+ overflowX: 'hidden',
145
+ overflowY: 'auto',
146
+ backgroundColor: '#fff',
147
+ pointerEvents: 'auto',
148
+ transition: 'max-height 0.3s ease',
149
+ boxShadow: '0 4px 10px rgba(0,0,0,0.13)',
150
+ borderRadius: 6,
151
+ position: 'relative'
152
+ },
153
+ onClick: function onClick(e) {
154
+ return _this.props.closable && e.stopPropagation();
155
+ },
156
+ onMouseDown: function onMouseDown(e) {
157
+ return e.stopPropagation();
158
+ },
159
+ children: React.cloneElement(_this.props.children, {
160
+ key: _this.state.popupRefreshKey
161
+ })
157
162
  });
158
- _this.state = {
159
- popupRefreshKey: 1
160
- };
161
- return _this;
163
+ });
164
+ _defineProperty(_this, "didUpdate", function () {
165
+ if (!_this.props.visible || !_this.props.node || !_this.ref.current || !_this.popupContainer) return;
166
+ var _this$props = _this.props,
167
+ node = _this$props.node,
168
+ _this$props$innerSpac = _this$props.innerSpacing,
169
+ innerSpacing = _this$props$innerSpac === void 0 ? 10 : _this$props$innerSpac;
170
+ var rect = node.getBoundingClientRect();
171
+ var triggerTop = rect.top + window.scrollY;
172
+ var triggerLeft = rect.left + window.scrollX;
173
+ var triggerHeight = rect.height;
174
+ var popupContent = _this.ref.current;
175
+ var realHeight = popupContent.scrollHeight;
176
+ var _getWindowSize = getWindowSize(),
177
+ viewportHeight = _getWindowSize.height;
178
+ var spaceBelow = viewportHeight - rect.bottom;
179
+ var spaceAbove = rect.top;
180
+ var topPosition;
181
+ var maxHeight;
182
+ if (spaceBelow >= realHeight + innerSpacing + outSpacing || spaceBelow >= spaceAbove) {
183
+ topPosition = triggerTop + triggerHeight + innerSpacing;
184
+ maxHeight = Math.min(realHeight, spaceBelow - innerSpacing - outSpacing);
185
+ } else {
186
+ maxHeight = Math.min(realHeight, spaceAbove - innerSpacing - outSpacing);
187
+ topPosition = triggerTop - innerSpacing - maxHeight;
188
+ }
189
+ _this.popupContainer.style.transform = "translate(".concat(triggerLeft, "px, ").concat(topPosition, "px)");
190
+ popupContent.style.maxHeight = "".concat(maxHeight, "px");
191
+ });
192
+ _this.state = {
193
+ popupRefreshKey: 1
194
+ };
195
+ return _this;
196
+ }
197
+ _inherits(TriggerInternal, _React$Component);
198
+ return _createClass(TriggerInternal, [{
199
+ key: "componentDidMount",
200
+ value: function componentDidMount() {
201
+ if (this.props.visible) {
202
+ this.mountPopup();
203
+ }
162
204
  }
163
- _inherits(Trigger, _React$Component);
164
- return _createClass(Trigger, [{
165
- key: "componentDidMount",
166
- value: function componentDidMount() {
167
- this.resetId = winResetEvent.addEvent(this.didUpdate, this, 300);
168
- this.props.container && this.props.container.addEventListener('scroll', this.didUpdate);
169
- this.bindEvent();
170
- // 延迟绑定 ResizeObserver 到 ensure the element is ready
171
- this.initResizeObserver();
172
- }
173
- }, {
174
- key: "componentDidUpdate",
175
- value: function componentDidUpdate(prevProps) {
176
- // 如果 children 发生变化，重新初始化观察器
177
- if (prevProps.children !== this.props.children) {
178
- this.initResizeObserver();
179
- }
180
- if (prevProps.node !== this.props.node) {
181
- this.refreshPopup(); //点击元素不同，刷新一下
182
- }
205
+ }, {
206
+ key: "componentDidUpdate",
207
+ value: function componentDidUpdate(prevProps) {
208
+ if (!prevProps.visible && this.props.visible) {
209
+ this.mountPopup();
183
210
  }
184
- }, {
185
- key: "componentWillUnmount",
186
- value: function componentWillUnmount() {
187
- winResetEvent.removeEvent(this.resetId);
188
- this.props.container && this.props.container.removeEventListener('scroll', this.didUpdate);
189
- if (this.resizeObserver) {
190
- this.resizeObserver.disconnect();
191
- this.resizeObserver = null;
192
- }
211
+ if (prevProps.visible && !this.props.visible) {
212
+ this.unmountPopup();
193
213
  }
194
- }, {
195
- key: "render",
196
- value: function render() {
197
- var portal = null;
198
- if (this.props.visible) {
199
- portal = _jsx(PortalComponent, {
200
- getContainer: this.getContainer,
201
- didUpdate: this.didUpdate,
202
- children: this.getComponent()
203
- });
204
- }
205
- return portal;
206
- }
207
- }]);
208
- }(React.Component);
209
- // 监听窗口改变事件id 用于组件销毁的时候清除事件
210
- _defineProperty(Trigger, "defaultProps", {
211
- visible: false,
212
- // 是否显示
213
- children: null
214
- });
215
- return Trigger;
214
+ if (prevProps.children !== this.props.children) {
215
+ this.initContentResizeObserver();
216
+ }
217
+ if (prevProps.node !== this.props.node) {
218
+ this.refreshPopup();
219
+ }
220
+ }
221
+ }, {
222
+ key: "componentWillUnmount",
223
+ value: function componentWillUnmount() {
224
+ this.cleanup();
225
+ }
226
+ }, {
227
+ key: "render",
228
+ value: function render() {
229
+ if (!this.props.visible || !this.popupContainer) return null;
230
+ return _jsx(Portal, {
231
+ getContainer: this.getContainer,
232
+ didUpdate: this.didUpdate,
233
+ children: this.getComponent()
234
+ });
235
+ }
236
+ }]);
237
+ }(React.Component);
238
+ _defineProperty(TriggerInternal, "defaultProps", {
239
+ visible: false,
240
+ closable: true,
241
+ innerSpacing: 10
242
+ });
243
+ export function generateTrigger(PortalComponent) {
244
+ return TriggerInternal;
216
245
  }
217
246
  export default generateTrigger(Portal);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gingkoo/pandora-metabase",
3
- "version": "1.0.62",
3
+ "version": "1.0.63",
4
4
  "description": "",
5
5
  "main": "lib/es/index.js",
6
6
  "module": "lib/es/index.js",