fix(Popover): 修复children为Icon弹窗无法准确定位问题 #639 (#651)

uiwjs · Mar 10, 2022 · 9bfa248 · 9bfa248
1 parent e3f4651
commit 9bfa248
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/packages/react-popover/README.md b/packages/react-popover/README.md
@@ -21,7 +21,7 @@ import Popover from '@uiw/react-popover';
 ```jsx
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Popover, Card, Button } from 'uiw';
+import { Popover, Card, Icon,Row,Col, Button } from 'uiw';
 
 class Demo extends React.Component {
   constructor() {
@@ -38,7 +38,7 @@ class Demo extends React.Component {
   }
   render() {
     return (
-      <div>
+      <Row style={{ alignItems:'center' }}>
         <Popover
           trigger="click"
           placement="top"
@@ -60,7 +60,28 @@ class Demo extends React.Component {
         >
           <Button active={this.state.isOpen}>弹出目标</Button>
         </Popover>
-      </div>
+                <div style={{marginLeft:20}}>
+        <Popover
+          trigger="click"
+          placement="top"
+          content={
+            <Card bordered={false} title="Card标题" extra={<a href="#">更多</a>} style={{ width: 200 }}>
+              <div>Are you sure you want to delete these items? You won't be able to recover them.</div>
+              <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>
+                <Button size="small" onClick={this.onClick.bind(this)}>
+                  Cancel
+                </Button>
+                <Button type="danger" size="small" onClick={this.onClick.bind(this)}>
+                  Delete
+                </Button>
+              </div>
+            </Card>
+          }
+        >
+          <Icon type="setting" color="#343a40" style={{ fontSize: 20 }} />
+        </Popover>
+                </div>
+      </Row>
     )
   }
 }
@@ -323,4 +344,4 @@ ReactDOM.render(<Demo />, _mount_);
 | autoAdjustOverflow | 弹出层被遮挡时自动调整位置，继承 `<OverlayTrigger />` 组件属性 | Boolean | `false` |
 | onVisibleChange | 显示隐藏的回调，继承 `<OverlayTrigger />` 组件属性 | Function(isVisible:bool) | - |
 
-更多属性请参考 [OverlayTrigger](#/components/overlay-trigger)。
+更多属性请参考 [OverlayTrigger](#/components/overlay-trigger)。
diff --git a/packages/react-popover/src/index.tsx b/packages/react-popover/src/index.tsx
@@ -45,7 +45,11 @@ export default class Popover extends React.Component<PopoverProps> {
           </div>
         }
       >
-        {typeof this.props.children === 'object' ? this.props.children : <span>{this.props.children}</span>}
+        {typeof this.props.children === 'object' && (this.props.children as JSX.Element).type.name !== 'Icon' ? (
+          this.props.children
+        ) : (
+          <span>{this.props.children}</span>
+        )}
       </OverlayTrigger>
     );
   }

diff --git a/website/src/routes/components/popover/index.tsx b/website/src/routes/components/popover/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { Popover, Button, Input, Card } from 'uiw';
+import { Popover, Button, Icon, Row, Col, Input, Card } from 'uiw';
 import Markdown from '../../../components/Markdown';
 
 export default function Page() {
   return (
     <Markdown
       path="https://github.com/uiwjs/uiw/tree/master/packages/react-popover/README.md"
-      dependencies={{ Popover, Button, Input, Card }}
+      dependencies={{ Popover, Button, Icon, Row, Input, Col, Card }}
       renderPage={async () => {
         const md = await import('uiw/node_modules/@uiw/react-popover/README.md');
         return md.default || md;