@opensumi/antd-theme - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

package.json

 {
   "name": "@opensumi/antd-theme",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "OpenSumi theme for antd4",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -42,1 +42,49 @@ # OpenSumi Ant Design Theme
 - [suyu34](https://github.com/suyu34)
+
+## FAQ
+### 根节点错误导致样式失效问题
+在 Antd 组件库中，对于 Dialog、Overlay、Popover 等组件会通过在顶层通过 createPortal 的方式在 组件树顶层插入根节点。当插件注册的视图中使用到这些组件时，由于 portal 的特性，会导致这类组件被插入在插件视图槽（即插件 ShadowDOM）外部，而又因为 ShadowDOM 的隔离性，插件中对这类组件的自定义样式都无法生效，因为插件的 head 样式只会被插入到它自身所在的 ShadowDOM 内。
+
+在 Antd 中，这类组件一般会提供一个 getContainer 的 props，用于指定它们所挂载的 DOM 根节点，可以将 container 设置为插件所注册组件的根元素，例如
+
+```jsx
+// antd Modal
+import Modal from 'antd/lib/modal';
+
+const MyPanel = () => {
+  const rootRef = React.createRef();
+    return (<div ref={rootRef}>
+    <Modal getContainer={() => rootRef.current}>{content}</Modal>
+  </div>
+};
+
+
+// antd Popover
+
+import Popover from 'antd/lib/popover';
+
+const MyPanel = () => {
+  const rootRef = React.createRef(null);
+    return (<div ref={rootRef}>
+    <Popover getPopupDomNode={() => rootRef.current}>{content}</Popover>
+  </div>
+};
+```
+
+### 合成事件问题
+由于 React 基于事件委托实现的合成事件依赖 DOM 树根节点，在某些组件中(如 antd/popover) 可能无法捕获到其子组件冒泡上来的事件，这会导致这类组件的子组件们事件处理程序失效，建议使用 [react-shadow-dom-retarget-events](https://www.npmjs.com/package/react-shadow-dom-retarget-events) 手动将事件委托的根节点指定到上述的 container 组件中，例如
+```jsx
+import Popover from 'antd/lib/popover';
+import retargetEvents from 'react-shadow-dom-retarget-events';
+
+const MyPanel = () => {
+  const rootRef = React.createRef(null);
+    return (<div ref={rootRef}>
+    <Popover getPopupDomNode={() => {
+    retargetEvents(rootRef.current);
+        return rootRef.current;
+    }}>{content}</Popover>
+  </div>
+};
+```
+

No alert changes

Improved metrics

Lines of code

33052

increased by0.24%

Number of lines in readme file

90

increased by114.29%

Worsened metrics

Total package byte prevSize

1464976

decreased by-11.27%

Number of package files

26

decreased by-7.14%

No dependency changes