From 24f7aea0753d552d16cb0dabf03cfa240e94d522 Mon Sep 17 00:00:00 2001 From: v-lianghao Date: Mon, 4 Jul 2022 16:38:44 +0800 Subject: [PATCH 1/2] feat: add right-click --- components/popover/index.d.ts | 2 +- components/popover/index.js | 14 +++++++++++++- docs/demo/popover/section-base.jsx | 3 +++ docs/zh-CN/components/popover.mdx | 2 +- 4 files changed, 18 insertions(+), 3 deletions(-) diff --git a/components/popover/index.d.ts b/components/popover/index.d.ts index fc88b068f..1e13b3401 100644 --- a/components/popover/index.d.ts +++ b/components/popover/index.d.ts @@ -4,7 +4,7 @@ export interface PopoverProps { title?: string | JSX.Element content: string | JSX.Element placement?: 'top' | 'right' | 'bottom' | 'left' - trigger?: 'click' | 'focus' | 'hover' + trigger?: 'click' | 'focus' | 'hover' | 'right-click' visible?: boolean style?: React.CSSProperties className?: string diff --git a/components/popover/index.js b/components/popover/index.js index c9afe1112..f7db61035 100644 --- a/components/popover/index.js +++ b/components/popover/index.js @@ -12,7 +12,7 @@ export default class Popover extends Component { } static propTypes = { placement: PropTypes.oneOf(['top', 'bottom', 'left', 'right']), - trigger: PropTypes.oneOf(['click', 'focus', 'hover']), + trigger: PropTypes.oneOf(['click', 'focus', 'hover', 'right-click']), title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), width: PropTypes.string @@ -112,6 +112,18 @@ export default class Popover extends Component { this.delayHidePopper(e) clearTimeout(this.delayShowPopperTimer) }) + } else if (trigger === 'right-click') { + referenceRef.addEventListener('contextmenu', (e) => { + e.preventDefault() + this.state.showPopper ? this.hidePopper() : this.showPopper() + }) + + document.addEventListener('click', (e) => { + this.eventTarget = e.target + if (this.isInPopover()) return + + this.hidePopper() + }) } } render() { diff --git a/docs/demo/popover/section-base.jsx b/docs/demo/popover/section-base.jsx index 7dbbfc824..359b6bff4 100644 --- a/docs/demo/popover/section-base.jsx +++ b/docs/demo/popover/section-base.jsx @@ -32,6 +32,9 @@ class Demo extends React.Component { + + + ) } diff --git a/docs/zh-CN/components/popover.mdx b/docs/zh-CN/components/popover.mdx index 3e3e52c0c..6d2dc5a06 100755 --- a/docs/zh-CN/components/popover.mdx +++ b/docs/zh-CN/components/popover.mdx @@ -27,6 +27,6 @@ import DemoMix from "../../demo/popover/section-mix.jsx"; | title | 气泡卡片标题 | string | - | - | | content | 气泡卡片内容 | string \| ReactNode | - | - | | placement | 气泡卡片显示的位置 | string | 'top' \| 'right' \| 'bottom' \| 'left' | 'top' | -| trigger | 气泡卡片触发方式 | string | 'click' \| 'focus' \| 'hover' | 'click' | +| trigger | 气泡卡片触发方式 | string | 'click' \| 'focus' \| 'hover' \| 'right-click' | 'click' | | visible | 控制气泡卡片的显示和隐藏（需要组件完全受控时使用） | boolean | true \| false | - | | overlayClassName | 下拉根元素的类名称 (3.0 新增) | string | - | - | From aad1ae4d4537d286fb8ab37d561d60de3f84adb2 Mon Sep 17 00:00:00 2001 From: v-lianghao Date: Wed, 6 Jul 2022 13:38:46 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20Popover=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=8F=B3=E9=94=AE=E7=82=B9=E5=87=BB=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/popover/index.d.ts | 2 +- components/popover/index.js | 4 ++-- docs/demo/popover/section-base.jsx | 4 ++-- docs/zh-CN/components/popover.mdx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/popover/index.d.ts b/components/popover/index.d.ts index 1e13b3401..af433fe80 100644 --- a/components/popover/index.d.ts +++ b/components/popover/index.d.ts @@ -4,7 +4,7 @@ export interface PopoverProps { title?: string | JSX.Element content: string | JSX.Element placement?: 'top' | 'right' | 'bottom' | 'left' - trigger?: 'click' | 'focus' | 'hover' | 'right-click' + trigger?: 'click' | 'focus' | 'hover' | 'contextmenu' visible?: boolean style?: React.CSSProperties className?: string diff --git a/components/popover/index.js b/components/popover/index.js index f7db61035..255664082 100644 --- a/components/popover/index.js +++ b/components/popover/index.js @@ -12,7 +12,7 @@ export default class Popover extends Component { } static propTypes = { placement: PropTypes.oneOf(['top', 'bottom', 'left', 'right']), - trigger: PropTypes.oneOf(['click', 'focus', 'hover', 'right-click']), + trigger: PropTypes.oneOf(['click', 'focus', 'hover', 'contextmenu']), title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), width: PropTypes.string @@ -112,7 +112,7 @@ export default class Popover extends Component { this.delayHidePopper(e) clearTimeout(this.delayShowPopperTimer) }) - } else if (trigger === 'right-click') { + } else if (trigger === 'contextmenu') { referenceRef.addEventListener('contextmenu', (e) => { e.preventDefault() this.state.showPopper ? this.hidePopper() : this.showPopper() diff --git a/docs/demo/popover/section-base.jsx b/docs/demo/popover/section-base.jsx index 359b6bff4..e15144179 100644 --- a/docs/demo/popover/section-base.jsx +++ b/docs/demo/popover/section-base.jsx @@ -32,8 +32,8 @@ class Demo extends React.Component { - - + + ) diff --git a/docs/zh-CN/components/popover.mdx b/docs/zh-CN/components/popover.mdx index 6d2dc5a06..80eab1ee3 100755 --- a/docs/zh-CN/components/popover.mdx +++ b/docs/zh-CN/components/popover.mdx @@ -27,6 +27,6 @@ import DemoMix from "../../demo/popover/section-mix.jsx"; | title | 气泡卡片标题 | string | - | - | | content | 气泡卡片内容 | string \| ReactNode | - | - | | placement | 气泡卡片显示的位置 | string | 'top' \| 'right' \| 'bottom' \| 'left' | 'top' | -| trigger | 气泡卡片触发方式 | string | 'click' \| 'focus' \| 'hover' \| 'right-click' | 'click' | +| trigger | 气泡卡片触发方式 | string | 'click' \| 'focus' \| 'hover' \| 'contextmenu' | 'click' | | visible | 控制气泡卡片的显示和隐藏（需要组件完全受控时使用） | boolean | true \| false | - | | overlayClassName | 下拉根元素的类名称 (3.0 新增) | string | - | - |