feat(Popover): 新增 Confirm 用法 (#751)

uiwjs · Apr 8, 2022 · 89da44a · 89da44a
1 parent e5cd99a
commit 89da44a
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 1 deletion.
diff --git a/packages/react-popover/README.md b/packages/react-popover/README.md
@@ -334,6 +334,26 @@ class Demo extends React.Component {
 ReactDOM.render(<Demo />, _mount_);
 ```
 
+### Confirm 用法
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Popover, Row } from 'uiw';
+
+class Demo extends React.Component {
+  render() {
+    return (
+      <Row style={{ alignItems: 'center' }}>
+        <Popover.Confirm title="Are you sure delete this?">delete</Popover.Confirm>
+      </Row>
+    )
+  }
+}
+ReactDOM.render(<Demo />, _mount_);
+```
+
 ## Props
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -348,4 +368,18 @@ ReactDOM.render(<Demo />, _mount_);
 | autoAdjustOverflow | 弹出层被遮挡时自动调整位置，继承 `<OverlayTrigger />` 组件属性 | Boolean | `false` |
 | onVisibleChange | 显示隐藏的回调，继承 `<OverlayTrigger />` 组件属性 | Function(isVisible:bool) | - |
 
+## Confirm Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|--------- |-------- |--------- |-------- |
+| trigger| 悬停/点击弹出窗口，继承 `<OverlayTrigger />` 组件属性 | Enum{`hover`, `click`, `focus`} | `hover` |
+| placement | 气泡框位置，可现实箭头在不同的方位 | Enum{`top`, `topLeft`, `topRight`,<br /> `left`, `leftTop`, `leftBottom`,<br /> `right`, `rightTop`, `rightBottom`,<br /> `bottom`, `bottomLeft`, `bottomRight`} | `top` |
+| visibleArrow | 是否显示箭头 | Boolean | `true` |
+| children | 子元素 | React.ReactNode | - |
+| onConfirm | 确定方法 | ()=>void |  |
+| confirmText | 确定按钮文本 | string | Yes |
+| title | 标题信息 | React.ReactNode | - |
+| cancelText | 取消按钮文本 | string | No |
+
+
 更多属性请参考 [OverlayTrigger](#/components/overlay-trigger)。
diff --git a/packages/react-popover/package.json b/packages/react-popover/package.json
@@ -44,6 +44,8 @@
     "react-dom": ">=16.9.0"
   },
   "dependencies": {
-    "@uiw/react-overlay-trigger": "^4.19.0"
+    "@uiw/react-overlay-trigger": "^4.19.0",
+    "@uiw/react-icon": "^4.19.0",
+    "@uiw/react-button": "^4.19.0"
   }
 }
diff --git a/packages/react-popover/src/Confirm.tsx b/packages/react-popover/src/Confirm.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import Popover, { PopoverProps } from './';
+import './style/index.less';
+import Button from '@uiw/react-button';
+import Icon from '@uiw/react-icon';
+
+interface Confirm {
+  trigger?: PopoverProps['trigger'];
+  placement?: PopoverProps['placement'];
+  children?: React.ReactNode;
+  visibleArrow?: PopoverProps['visibleArrow'];
+  onConfirm?: () => void;
+  confirmText?: string;
+  title?: React.ReactNode;
+  cancelText?: string;
+}
+
+export default function Confirm(props: Confirm) {
+  const {
+    trigger = 'click',
+    placement = 'top',
+    confirmText = 'Yes',
+    title,
+    cancelText = 'No',
+    visibleArrow,
+    children,
+    onConfirm,
+  } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <Popover
+      isOpen={isOpen}
+      visibleArrow={visibleArrow}
+      content={
+        <div style={{ padding: '12px 16px', position: 'relative' }}>
+          <Icon
+            type="information"
+            style={{ position: 'absolute', top: 13.5, fontSize: 14, transform: 'rotate(180deg)', color: '#faad14' }}
+          />
+          <div style={{ paddingLeft: 20 }}>
+            <div style={{ fontSize: 14 }}>{title}</div>
+            <div style={{ position: 'relative', bottom: 0, marginTop: 12, display: 'flex', justifyContent: 'end' }}>
+              <Button size="small" onClick={() => setIsOpen(false)}>
+                {cancelText}
+              </Button>
+              <Button
+                size="small"
+                type="primary"
+                style={{ marginLeft: 10 }}
+                onClick={() => {
+                  onConfirm?.();
+                  setIsOpen(false);
+                }}
+              >
+                {confirmText}
+              </Button>
+            </div>
+          </div>
+        </div>
+      }
+      trigger={trigger}
+      placement={placement}
+    >
+      <div onClick={() => setIsOpen(true)}>{children}</div>
+    </Popover>
+  );
+}
diff --git a/packages/react-popover/src/index.tsx b/packages/react-popover/src/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import OverlayTrigger, { OverlayTriggerProps } from '@uiw/react-overlay-trigger';
+import Confirm from './Confirm';
 import './style/index.less';
 
 export interface PopoverProps extends OverlayTriggerProps {
@@ -8,6 +9,7 @@ export interface PopoverProps extends OverlayTriggerProps {
 }
 
 export default class Popover extends React.Component<PopoverProps> {
+  static Confirm = Confirm;
   public static defaultProps: PopoverProps = {
     prefixCls: 'w-popover',
     placement: 'top',