diff --git a/src/components/Article/SharePopup.tsx b/src/components/Article/SharePopup.tsx
index 437dcd89..f7d5d4e6 100644
--- a/src/components/Article/SharePopup.tsx
+++ b/src/components/Article/SharePopup.tsx
@@ -5,12 +5,14 @@ import styles from '../_shared/Popup/Popup.module.scss'
import type { PopupProps } from '../_shared/Popup'
import { Popup } from '../_shared/Popup'
import { useLocalize } from '../../context/localize'
+import { createEffect, createSignal } from 'solid-js'
type SharePopupProps = {
title: string
shareUrl?: string
imageUrl: string
description: string
+ isVisible?: (value: boolean) => void
} & Omit
export const getShareUrl = (params: { pathname?: string } = {}) => {
@@ -21,6 +23,14 @@ export const getShareUrl = (params: { pathname?: string } = {}) => {
export const SharePopup = (props: SharePopupProps) => {
const { t } = useLocalize()
+ const [isVisible, setIsVisible] = createSignal(false)
+
+ createEffect(() => {
+ if (props.isVisible) {
+ props.isVisible(isVisible())
+ }
+ })
+
const [share] = createSocialShare(() => ({
title: props.title,
url: props.shareUrl,
@@ -29,8 +39,9 @@ export const SharePopup = (props: SharePopupProps) => {
const copyLink = async () => {
await navigator.clipboard.writeText(props.shareUrl)
}
+
return (
-
+ setIsVisible(value)}>
-
-
+
+ {(triggerRef: (el) => void) => (
+
+ )}
+
-
-
-
-
-
-
+ {(triggerRef: (el) => void) => (
+
- }
- />
-
+
+ )}
+
+
+
+ {(triggerRef: (el) => void) => (
+
+ setIsSharePopupActive(value)}
+ trigger={
+
+ }
+ />
+
+ )}
+
void) => JSX.Element
content: string
+ disabled?: boolean
}
export const Popover = (props: Props) => {
@@ -35,27 +36,29 @@ export const Popover = (props: Props) => {
const handleMouseOver = () => setShow(true)
const handleMouseOut = () => setShow(false)
- onMount(() => {
- showEvents.forEach((event) => {
- anchor().addEventListener(event, handleMouseOver)
- })
- hideEvents.forEach((event) => {
- anchor().addEventListener(event, handleMouseOut)
- })
- return () => {
+ if (!props.disabled) {
+ onMount(() => {
showEvents.forEach((event) => {
- anchor().removeEventListener(event, handleMouseOver)
+ anchor().addEventListener(event, handleMouseOver)
})
hideEvents.forEach((event) => {
- anchor().removeEventListener(event, handleMouseOut)
+ anchor().addEventListener(event, handleMouseOut)
})
- }
- })
+ return () => {
+ showEvents.forEach((event) => {
+ anchor().removeEventListener(event, handleMouseOver)
+ })
+ hideEvents.forEach((event) => {
+ anchor().removeEventListener(event, handleMouseOut)
+ })
+ }
+ })
+ }
return (
<>
{props.children(setAnchor)}
-
+