@chayns-components/core 5.0.0-beta.827 → 5.0.0-beta.828

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -25,6 +25,7 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)(({
25
25
  }),
26
26
  container = document.querySelector('.page-provider') || document.querySelector('.tapp') || document.body,
27
27
  coordinates,
28
+ isInDialog = false,
28
29
  items,
29
30
  onHide,
30
31
  onShow,
@@ -79,8 +80,8 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)(({
79
80
  top,
80
81
  left
81
82
  } = container.getBoundingClientRect();
82
- const x = childrenLeft + window.scrollX + childrenWidth / 2 - left;
83
- const y = childrenTop + window.scrollY + childrenHeight / 2 - top;
83
+ const x = childrenLeft + (isInDialog ? 0 : window.scrollX) + childrenWidth / 2 - left;
84
+ const y = childrenTop + (isInDialog ? 0 : window.scrollY) + childrenHeight / 2 - top;
84
85
  setInternalCoordinates({
85
86
  x,
86
87
  y
@@ -98,7 +99,7 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)(({
98
99
  }
99
100
  setIsContentShown(true);
100
101
  }
101
- }, [container, items]);
102
+ }, [container, isInDialog, items]);
102
103
  const handleClick = (0, _react.useCallback)(event => {
103
104
  event.preventDefault();
104
105
  event.stopPropagation();
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenu.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_contextMenu","_environment","_Icon","_interopRequireDefault","_ContextMenuContent","_ContextMenu","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContextMenu","forwardRef","alignment","children","createElement","icons","size","container","document","querySelector","body","coordinates","items","onHide","onShow","shouldCloseOnPopupClick","ref","internalCoordinates","setInternalCoordinates","useState","x","y","internalAlignment","setInternalAlignment","ContextMenuAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","useUuid","contextMenuContentRef","useRef","contextMenuRef","handleHide","useCallback","handleShow","isTouch","getIsTouch","result","createDialog","type","DialogType","SELECT","buttons","list","map","text","index","name","id","icon","open","_items$result$","onClick","current","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","window","scrollX","scrollY","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","_contextMenuContentRe","contains","target","useImperativeHandle","hide","show","useEffect","addEventListener","removeEventListener","createPortal","AnimatePresence","initial","key","Fragment","StyledContextMenu","className","displayName","_default","exports"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n x: number;\n y: number;\n};\n\nexport type ContextMenuItem = {\n icons: string[];\n key: string;\n onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n text: string;\n};\n\nexport type ContextMenuRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n /**\n * Optional custom alignment used instead of calculating it using the\n * alignment within the page. The available alignment can be taken from the\n * ContextMenuAlignment enum.\n */\n alignment?: ContextMenuAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `ContextMenu` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * Optional own coordinates to be used instead of calculating the alignment\n * based on the alignment of the children.\n */\n coordinates?: ContextMenuCoordinates;\n /**\n * The items that will be displayed in the content of the `ContextMenu`.\n */\n items: ContextMenuItem[];\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be closed if its clicked.\n */\n shouldCloseOnPopupClick?: boolean;\n};\n\ninterface SelectDialogResult {\n buttonType: number;\n result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n container = document.querySelector('.page-provider') ||\n document.querySelector('.tapp') ||\n document.body,\n coordinates,\n items,\n onHide,\n onShow,\n shouldCloseOnPopupClick = true,\n },\n ref,\n ) => {\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n ContextMenuAlignment.TopLeft,\n );\n\n const [isContentShown, setIsContentShown] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n const handleHide = useCallback(() => {\n setIsContentShown(false);\n }, []);\n\n const handleShow = useCallback(async () => {\n const isTouch = getIsTouch();\n\n if (isTouch) {\n const { result } = (await createDialog({\n type: DialogType.SELECT,\n buttons: [],\n list: items.map(({ icons, text }, index) => ({\n name: text,\n id: index,\n icon: icons[0],\n })),\n }).open()) as SelectDialogResult;\n\n if (result && typeof result[0] === 'number') {\n void items[result[0]]?.onClick();\n }\n } else if (contextMenuRef.current) {\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = contextMenuRef.current.getBoundingClientRect();\n\n const { height, width, top, left } = container.getBoundingClientRect();\n\n const x = childrenLeft + window.scrollX + childrenWidth / 2 - left;\n const y = childrenTop + window.scrollY + childrenHeight / 2 - top;\n\n setInternalCoordinates({ x, y });\n\n if (x < width / 2) {\n if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomRight);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopRight);\n }\n } else if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomLeft);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopLeft);\n }\n\n setIsContentShown(true);\n }\n }, [container, items]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void handleShow();\n },\n [handleShow],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !shouldCloseOnPopupClick &&\n contextMenuContentRef.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n handleHide();\n },\n [handleHide, shouldCloseOnPopupClick],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isContentShown) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isContentShown && (\n <ContextMenuContent\n coordinates={coordinates ?? internalCoordinates}\n items={items}\n key={`contextMenu_${uuid}`}\n alignment={alignment ?? internalAlignment}\n ref={contextMenuContentRef}\n />\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n alignment,\n container,\n coordinates,\n internalAlignment,\n internalCoordinates,\n isContentShown,\n items,\n uuid,\n ]);\n\n return (\n <>\n <StyledContextMenu\n className=\"beta-chayns-context-menu\"\n onClick={handleClick}\n ref={contextMenuRef}\n >\n {children}\n </StyledContextMenu>\n {portal}\n </>\n );\n },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ContextMenu.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_contextMenu","_environment","_Icon","_interopRequireDefault","_ContextMenuContent","_ContextMenu","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContextMenu","forwardRef","alignment","children","createElement","icons","size","container","document","querySelector","body","coordinates","isInDialog","items","onHide","onShow","shouldCloseOnPopupClick","ref","internalCoordinates","setInternalCoordinates","useState","x","y","internalAlignment","setInternalAlignment","ContextMenuAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","useUuid","contextMenuContentRef","useRef","contextMenuRef","handleHide","useCallback","handleShow","isTouch","getIsTouch","result","createDialog","type","DialogType","SELECT","buttons","list","map","text","index","name","id","icon","open","_items$result$","onClick","current","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","window","scrollX","scrollY","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","_contextMenuContentRe","contains","target","useImperativeHandle","hide","show","useEffect","addEventListener","removeEventListener","createPortal","AnimatePresence","initial","key","Fragment","StyledContextMenu","className","displayName","_default","exports"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n x: number;\n y: number;\n};\n\nexport type ContextMenuItem = {\n icons: string[];\n key: string;\n onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n text: string;\n};\n\nexport type ContextMenuRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n /**\n * Optional custom alignment used instead of calculating it using the\n * alignment within the page. The available alignment can be taken from the\n * ContextMenuAlignment enum.\n */\n alignment?: ContextMenuAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `ContextMenu` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * Optional own coordinates to be used instead of calculating the alignment\n * based on the alignment of the children.\n */\n coordinates?: ContextMenuCoordinates;\n /**\n * Whether the ContextMenu is inside a dialog.\n */\n isInDialog?: boolean;\n /**\n * The items that will be displayed in the content of the `ContextMenu`.\n */\n items: ContextMenuItem[];\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be closed if its clicked.\n */\n shouldCloseOnPopupClick?: boolean;\n};\n\ninterface SelectDialogResult {\n buttonType: number;\n result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n container = document.querySelector('.page-provider') ||\n document.querySelector('.tapp') ||\n document.body,\n coordinates,\n isInDialog = false,\n items,\n onHide,\n onShow,\n shouldCloseOnPopupClick = true,\n },\n ref,\n ) => {\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n ContextMenuAlignment.TopLeft,\n );\n\n const [isContentShown, setIsContentShown] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n const handleHide = useCallback(() => {\n setIsContentShown(false);\n }, []);\n\n const handleShow = useCallback(async () => {\n const isTouch = getIsTouch();\n\n if (isTouch) {\n const { result } = (await createDialog({\n type: DialogType.SELECT,\n buttons: [],\n list: items.map(({ icons, text }, index) => ({\n name: text,\n id: index,\n icon: icons[0],\n })),\n }).open()) as SelectDialogResult;\n\n if (result && typeof result[0] === 'number') {\n void items[result[0]]?.onClick();\n }\n } else if (contextMenuRef.current) {\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = contextMenuRef.current.getBoundingClientRect();\n\n const { height, width, top, left } = container.getBoundingClientRect();\n\n const x =\n childrenLeft + (isInDialog ? 0 : window.scrollX) + childrenWidth / 2 - left;\n const y =\n childrenTop + (isInDialog ? 0 : window.scrollY) + childrenHeight / 2 - top;\n\n setInternalCoordinates({ x, y });\n\n if (x < width / 2) {\n if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomRight);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopRight);\n }\n } else if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomLeft);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopLeft);\n }\n\n setIsContentShown(true);\n }\n }, [container, isInDialog, items]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void handleShow();\n },\n [handleShow],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !shouldCloseOnPopupClick &&\n contextMenuContentRef.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n handleHide();\n },\n [handleHide, shouldCloseOnPopupClick],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isContentShown) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isContentShown && (\n <ContextMenuContent\n coordinates={coordinates ?? internalCoordinates}\n items={items}\n key={`contextMenu_${uuid}`}\n alignment={alignment ?? internalAlignment}\n ref={contextMenuContentRef}\n />\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n alignment,\n container,\n coordinates,\n internalAlignment,\n internalCoordinates,\n isContentShown,\n items,\n uuid,\n ]);\n\n return (\n <>\n <StyledContextMenu\n className=\"beta-chayns-context-menu\"\n onClick={handleClick}\n ref={contextMenuRef}\n >\n {children}\n </StyledContextMenu>\n {portal}\n </>\n );\n },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
@@ -19,7 +19,8 @@ const SharingBar = ({
19
19
  label,
20
20
  link,
21
21
  popupAlignment,
22
- container
22
+ container,
23
+ isInDialog
23
24
  }) => {
24
25
  const contextMenuRef = (0, _react.useRef)(null);
25
26
  const handleImageDownload = () => {
@@ -1 +1 @@
1
- {"version":3,"file":"SharingBar.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_sharingBar","_environment","_sharingBar2","_ContextMenu","_interopRequireDefault","_Icon","_SharingBar","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SharingBar","label","link","popupAlignment","container","contextMenuRef","useRef","handleImageDownload","shareWithUrl","SHAREPROVIDER","url","replace","encodeURIComponent","getSite","color","handleShare","key","_contextMenuRef$curre","current","hide","isTouch","getIsTouch","trim","shareWithApp","copyToClipboard","contextMenuItems","icons","onClick","text","handleSharingBarClick","_contextMenuRef$curre2","show","createElement","StyledSharingBar","onTouchStart","StyledSharingBarIconWrapper","items","ref","alignment","StyledSharingBarText","displayName","_default","exports"],"sources":["../../../../src/components/sharing-bar/SharingBar.tsx"],"sourcesContent":["import { getSite } from 'chayns-api';\nimport React, { FC, useRef } from 'react';\nimport { SHAREPROVIDER } from '../../constants/sharingBar';\nimport type { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport { copyToClipboard, shareWithApp, shareWithUrl } from '../../utils/sharingBar';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport {\n StyledSharingBar,\n StyledSharingBarIconWrapper,\n StyledSharingBarText,\n} from './SharingBar.styles';\n\nexport type SharingBarProps = {\n /**\n * The element where the content of the `SharingBar` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The label that should be displayed.\n */\n label: string;\n /**\n * The link that should be shared.\n */\n link: string;\n /**\n * The alignment of the sharing options.\n */\n popupAlignment: ContextMenuAlignment;\n};\n\nconst SharingBar: FC<SharingBarProps> = ({ label, link, popupAlignment, container }) => {\n const contextMenuRef = useRef<{ hide: VoidFunction; show: VoidFunction }>(null);\n\n const handleImageDownload = () => {\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[5].url\n .replace('{url}', encodeURIComponent(link))\n .replace('{linkText}', 'Teilen')\n .replace('{color}', getSite().color.replace('#', '')),\n );\n };\n\n const handleShare = (key: string) => {\n contextMenuRef.current?.hide();\n\n const isTouch = getIsTouch();\n\n switch (key) {\n case 'whatsapp':\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[0].url.replace('{url}', encodeURIComponent(`${link}`.trim())),\n );\n break;\n case 'facebook':\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n shareWithUrl(SHAREPROVIDER[3].url.replace('{url}', encodeURIComponent(link)));\n break;\n case 'twitter':\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[4].url\n .replace('{url}', encodeURIComponent(link))\n .replace('{linkText}', ''),\n );\n break;\n case 'mail':\n if (isTouch) {\n shareWithApp(`${link}`.trim());\n } else {\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[2].url.replace('{url}', encodeURIComponent(`${link}`.trim())),\n );\n }\n break;\n case 'copy':\n copyToClipboard(link);\n break;\n default:\n break;\n }\n };\n\n const contextMenuItems = [\n {\n icons: ['fa fa-copy'],\n key: 'copy',\n onClick: () => handleShare('copy'),\n text: 'Zwischenablage',\n },\n {\n icons: ['fa-solid fa-brands fa-whatsapp'],\n key: 'whatsapp',\n onClick: () => handleShare('whatsapp'),\n text: 'Whatsapp',\n },\n {\n icons: ['fa-solid fa-brands fa-facebook-f'],\n key: 'facebook',\n onClick: () => handleShare('facebook'),\n text: 'Facebook',\n },\n {\n icons: ['fa-solid fa-brands fa-x-twitter'],\n key: 'twitter',\n onClick: () => handleShare('twitter'),\n text: 'X',\n },\n {\n icons: ['fa fa-envelope'],\n key: 'mail',\n onClick: () => handleShare('mail'),\n text: 'Mail',\n },\n {\n icons: ['fa fa-qrcode'],\n key: 'callingCode',\n onClick: handleImageDownload,\n text: 'Calling Code herunterladen',\n },\n ];\n\n const handleSharingBarClick = () => {\n contextMenuRef.current?.show();\n };\n\n return (\n <StyledSharingBar onClick={handleSharingBarClick} onTouchStart={handleSharingBarClick}>\n <StyledSharingBarIconWrapper>\n <Icon icons={['fa-solid fa-share-nodes']} />\n </StyledSharingBarIconWrapper>\n <ContextMenu\n items={contextMenuItems}\n ref={contextMenuRef}\n alignment={popupAlignment}\n container={container}\n >\n {null}\n </ContextMenu>\n <StyledSharingBarText>{label}</StyledSharingBarText>\n </StyledSharingBar>\n );\n};\n\nSharingBar.displayName = 'SharingBar';\n\nexport default SharingBar;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"SharingBar.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_sharingBar","_environment","_sharingBar2","_ContextMenu","_interopRequireDefault","_Icon","_SharingBar","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SharingBar","label","link","popupAlignment","container","isInDialog","contextMenuRef","useRef","handleImageDownload","shareWithUrl","SHAREPROVIDER","url","replace","encodeURIComponent","getSite","color","handleShare","key","_contextMenuRef$curre","current","hide","isTouch","getIsTouch","trim","shareWithApp","copyToClipboard","contextMenuItems","icons","onClick","text","handleSharingBarClick","_contextMenuRef$curre2","show","createElement","StyledSharingBar","onTouchStart","StyledSharingBarIconWrapper","items","ref","alignment","StyledSharingBarText","displayName","_default","exports"],"sources":["../../../../src/components/sharing-bar/SharingBar.tsx"],"sourcesContent":["import { getSite } from 'chayns-api';\nimport React, { FC, useRef } from 'react';\nimport { SHAREPROVIDER } from '../../constants/sharingBar';\nimport type { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport { copyToClipboard, shareWithApp, shareWithUrl } from '../../utils/sharingBar';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport {\n StyledSharingBar,\n StyledSharingBarIconWrapper,\n StyledSharingBarText,\n} from './SharingBar.styles';\n\nexport type SharingBarProps = {\n /**\n * The element where the content of the `SharingBar` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * Whether the ContextMenu is inside a dialog.\n */\n isInDialog?: boolean;\n /**\n * The label that should be displayed.\n */\n label: string;\n /**\n * The link that should be shared.\n */\n link: string;\n /**\n * The alignment of the sharing options.\n */\n popupAlignment: ContextMenuAlignment;\n};\n\nconst SharingBar: FC<SharingBarProps> = ({\n label,\n link,\n popupAlignment,\n container,\n isInDialog,\n}) => {\n const contextMenuRef = useRef<{ hide: VoidFunction; show: VoidFunction }>(null);\n\n const handleImageDownload = () => {\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[5].url\n .replace('{url}', encodeURIComponent(link))\n .replace('{linkText}', 'Teilen')\n .replace('{color}', getSite().color.replace('#', '')),\n );\n };\n\n const handleShare = (key: string) => {\n contextMenuRef.current?.hide();\n\n const isTouch = getIsTouch();\n\n switch (key) {\n case 'whatsapp':\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[0].url.replace('{url}', encodeURIComponent(`${link}`.trim())),\n );\n break;\n case 'facebook':\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n shareWithUrl(SHAREPROVIDER[3].url.replace('{url}', encodeURIComponent(link)));\n break;\n case 'twitter':\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[4].url\n .replace('{url}', encodeURIComponent(link))\n .replace('{linkText}', ''),\n );\n break;\n case 'mail':\n if (isTouch) {\n shareWithApp(`${link}`.trim());\n } else {\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[2].url.replace('{url}', encodeURIComponent(`${link}`.trim())),\n );\n }\n break;\n case 'copy':\n copyToClipboard(link);\n break;\n default:\n break;\n }\n };\n\n const contextMenuItems = [\n {\n icons: ['fa fa-copy'],\n key: 'copy',\n onClick: () => handleShare('copy'),\n text: 'Zwischenablage',\n },\n {\n icons: ['fa-solid fa-brands fa-whatsapp'],\n key: 'whatsapp',\n onClick: () => handleShare('whatsapp'),\n text: 'Whatsapp',\n },\n {\n icons: ['fa-solid fa-brands fa-facebook-f'],\n key: 'facebook',\n onClick: () => handleShare('facebook'),\n text: 'Facebook',\n },\n {\n icons: ['fa-solid fa-brands fa-x-twitter'],\n key: 'twitter',\n onClick: () => handleShare('twitter'),\n text: 'X',\n },\n {\n icons: ['fa fa-envelope'],\n key: 'mail',\n onClick: () => handleShare('mail'),\n text: 'Mail',\n },\n {\n icons: ['fa fa-qrcode'],\n key: 'callingCode',\n onClick: handleImageDownload,\n text: 'Calling Code herunterladen',\n },\n ];\n\n const handleSharingBarClick = () => {\n contextMenuRef.current?.show();\n };\n\n return (\n <StyledSharingBar onClick={handleSharingBarClick} onTouchStart={handleSharingBarClick}>\n <StyledSharingBarIconWrapper>\n <Icon icons={['fa-solid fa-share-nodes']} />\n </StyledSharingBarIconWrapper>\n <ContextMenu\n items={contextMenuItems}\n ref={contextMenuRef}\n alignment={popupAlignment}\n container={container}\n >\n {null}\n </ContextMenu>\n <StyledSharingBarText>{label}</StyledSharingBarText>\n </StyledSharingBar>\n );\n};\n\nSharingBar.displayName = 'SharingBar';\n\nexport default SharingBar;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAEA,IAAAI,YAAA,GAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAL,OAAA;AACA,IAAAM,YAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,KAAA,GAAAD,sBAAA,CAAAP,OAAA;AACA,IAAAS,WAAA,GAAAT,OAAA;AAI6B,SAAAO,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAyB7B,MAAMW,UAA+B,GAAGA,CAAC;EACrCC,KAAK;EACLC,IAAI;EACJC,cAAc;EACdC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,cAAc,GAAG,IAAAC,aAAM,EAA6C,IAAI,CAAC;EAE/E,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;IAC9B,IAAAC,yBAAY;IACR;IACA;IACAC,yBAAa,CAAC,CAAC,CAAC,CAACC,GAAG,CACfC,OAAO,CAAC,OAAO,EAAEC,kBAAkB,CAACX,IAAI,CAAC,CAAC,CAC1CU,OAAO,CAAC,YAAY,EAAE,QAAQ,CAAC,CAC/BA,OAAO,CAAC,SAAS,EAAE,IAAAE,kBAAO,EAAC,CAAC,CAACC,KAAK,CAACH,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAC5D,CAAC;EACL,CAAC;EAED,MAAMI,WAAW,GAAIC,GAAW,IAAK;IAAA,IAAAC,qBAAA;IACjC,CAAAA,qBAAA,GAAAZ,cAAc,CAACa,OAAO,cAAAD,qBAAA,eAAtBA,qBAAA,CAAwBE,IAAI,CAAC,CAAC;IAE9B,MAAMC,OAAO,GAAG,IAAAC,uBAAU,EAAC,CAAC;IAE5B,QAAQL,GAAG;MACP,KAAK,UAAU;QACX,IAAAR,yBAAY;QACR;QACA;QACAC,yBAAa,CAAC,CAAC,CAAC,CAACC,GAAG,CAACC,OAAO,CAAC,OAAO,EAAEC,kBAAkB,CAAC,GAAGX,IAAI,EAAE,CAACqB,IAAI,CAAC,CAAC,CAAC,CAC9E,CAAC;QACD;MACJ,KAAK,UAAU;QACX;QACA;QACA,IAAAd,yBAAY,EAACC,yBAAa,CAAC,CAAC,CAAC,CAACC,GAAG,CAACC,OAAO,CAAC,OAAO,EAAEC,kBAAkB,CAACX,IAAI,CAAC,CAAC,CAAC;QAC7E;MACJ,KAAK,SAAS;QACV,IAAAO,yBAAY;QACR;QACA;QACAC,yBAAa,CAAC,CAAC,CAAC,CAACC,GAAG,CACfC,OAAO,CAAC,OAAO,EAAEC,kBAAkB,CAACX,IAAI,CAAC,CAAC,CAC1CU,OAAO,CAAC,YAAY,EAAE,EAAE,CACjC,CAAC;QACD;MACJ,KAAK,MAAM;QACP,IAAIS,OAAO,EAAE;UACT,IAAAG,yBAAY,EAAC,GAAGtB,IAAI,EAAE,CAACqB,IAAI,CAAC,CAAC,CAAC;QAClC,CAAC,MAAM;UACH,IAAAd,yBAAY;UACR;UACA;UACAC,yBAAa,CAAC,CAAC,CAAC,CAACC,GAAG,CAACC,OAAO,CAAC,OAAO,EAAEC,kBAAkB,CAAC,GAAGX,IAAI,EAAE,CAACqB,IAAI,CAAC,CAAC,CAAC,CAC9E,CAAC;QACL;QACA;MACJ,KAAK,MAAM;QACP,IAAAE,4BAAe,EAACvB,IAAI,CAAC;QACrB;MACJ;QACI;IACR;EACJ,CAAC;EAED,MAAMwB,gBAAgB,GAAG,CACrB;IACIC,KAAK,EAAE,CAAC,YAAY,CAAC;IACrBV,GAAG,EAAE,MAAM;IACXW,OAAO,EAAEA,CAAA,KAAMZ,WAAW,CAAC,MAAM,CAAC;IAClCa,IAAI,EAAE;EACV,CAAC,EACD;IACIF,KAAK,EAAE,CAAC,gCAAgC,CAAC;IACzCV,GAAG,EAAE,UAAU;IACfW,OAAO,EAAEA,CAAA,KAAMZ,WAAW,CAAC,UAAU,CAAC;IACtCa,IAAI,EAAE;EACV,CAAC,EACD;IACIF,KAAK,EAAE,CAAC,kCAAkC,CAAC;IAC3CV,GAAG,EAAE,UAAU;IACfW,OAAO,EAAEA,CAAA,KAAMZ,WAAW,CAAC,UAAU,CAAC;IACtCa,IAAI,EAAE;EACV,CAAC,EACD;IACIF,KAAK,EAAE,CAAC,iCAAiC,CAAC;IAC1CV,GAAG,EAAE,SAAS;IACdW,OAAO,EAAEA,CAAA,KAAMZ,WAAW,CAAC,SAAS,CAAC;IACrCa,IAAI,EAAE;EACV,CAAC,EACD;IACIF,KAAK,EAAE,CAAC,gBAAgB,CAAC;IACzBV,GAAG,EAAE,MAAM;IACXW,OAAO,EAAEA,CAAA,KAAMZ,WAAW,CAAC,MAAM,CAAC;IAClCa,IAAI,EAAE;EACV,CAAC,EACD;IACIF,KAAK,EAAE,CAAC,cAAc,CAAC;IACvBV,GAAG,EAAE,aAAa;IAClBW,OAAO,EAAEpB,mBAAmB;IAC5BqB,IAAI,EAAE;EACV,CAAC,CACJ;EAED,MAAMC,qBAAqB,GAAGA,CAAA,KAAM;IAAA,IAAAC,sBAAA;IAChC,CAAAA,sBAAA,GAAAzB,cAAc,CAACa,OAAO,cAAAY,sBAAA,eAAtBA,sBAAA,CAAwBC,IAAI,CAAC,CAAC;EAClC,CAAC;EAED,oBACI7D,MAAA,CAAAW,OAAA,CAAAmD,aAAA,CAACtD,WAAA,CAAAuD,gBAAgB;IAACN,OAAO,EAAEE,qBAAsB;IAACK,YAAY,EAAEL;EAAsB,gBAClF3D,MAAA,CAAAW,OAAA,CAAAmD,aAAA,CAACtD,WAAA,CAAAyD,2BAA2B,qBACxBjE,MAAA,CAAAW,OAAA,CAAAmD,aAAA,CAACvD,KAAA,CAAAI,OAAI;IAAC6C,KAAK,EAAE,CAAC,yBAAyB;EAAE,CAAE,CAClB,CAAC,eAC9BxD,MAAA,CAAAW,OAAA,CAAAmD,aAAA,CAACzD,YAAA,CAAAM,OAAW;IACRuD,KAAK,EAAEX,gBAAiB;IACxBY,GAAG,EAAEhC,cAAe;IACpBiC,SAAS,EAAEpC,cAAe;IAC1BC,SAAS,EAAEA;EAAU,GAEpB,IACQ,CAAC,eACdjC,MAAA,CAAAW,OAAA,CAAAmD,aAAA,CAACtD,WAAA,CAAA6D,oBAAoB,QAAEvC,KAA4B,CACrC,CAAC;AAE3B,CAAC;AAEDD,UAAU,CAACyC,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA7D,OAAA,GAEvBkB,UAAU","ignoreList":[]}
@@ -17,6 +17,7 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
17
17
  }),
18
18
  container = document.querySelector('.page-provider') || document.querySelector('.tapp') || document.body,
19
19
  coordinates,
20
+ isInDialog = false,
20
21
  items,
21
22
  onHide,
22
23
  onShow,
@@ -73,8 +74,8 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
73
74
  top,
74
75
  left
75
76
  } = container.getBoundingClientRect();
76
- const x = childrenLeft + window.scrollX + childrenWidth / 2 - left;
77
- const y = childrenTop + window.scrollY + childrenHeight / 2 - top;
77
+ const x = childrenLeft + (isInDialog ? 0 : window.scrollX) + childrenWidth / 2 - left;
78
+ const y = childrenTop + (isInDialog ? 0 : window.scrollY) + childrenHeight / 2 - top;
78
79
  setInternalCoordinates({
79
80
  x,
80
81
  y
@@ -92,7 +93,7 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
92
93
  }
93
94
  setIsContentShown(true);
94
95
  }
95
- }, [container, items]);
96
+ }, [container, isInDialog, items]);
96
97
  const handleClick = useCallback(event => {
97
98
  event.preventDefault();
98
99
  event.stopPropagation();
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","ContextMenuAlignment","getIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenu","_ref","ref","alignment","children","createElement","icons","size","container","document","querySelector","body","coordinates","items","onHide","onShow","shouldCloseOnPopupClick","internalCoordinates","setInternalCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","contextMenuContentRef","contextMenuRef","handleHide","handleShow","isTouch","result","type","SELECT","buttons","list","map","_ref2","index","text","name","id","icon","open","onClick","current","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","window","scrollX","scrollY","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","addEventListener","removeEventListener","initial","key","Fragment","className","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n x: number;\n y: number;\n};\n\nexport type ContextMenuItem = {\n icons: string[];\n key: string;\n onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n text: string;\n};\n\nexport type ContextMenuRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n /**\n * Optional custom alignment used instead of calculating it using the\n * alignment within the page. The available alignment can be taken from the\n * ContextMenuAlignment enum.\n */\n alignment?: ContextMenuAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `ContextMenu` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * Optional own coordinates to be used instead of calculating the alignment\n * based on the alignment of the children.\n */\n coordinates?: ContextMenuCoordinates;\n /**\n * The items that will be displayed in the content of the `ContextMenu`.\n */\n items: ContextMenuItem[];\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be closed if its clicked.\n */\n shouldCloseOnPopupClick?: boolean;\n};\n\ninterface SelectDialogResult {\n buttonType: number;\n result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n container = document.querySelector('.page-provider') ||\n document.querySelector('.tapp') ||\n document.body,\n coordinates,\n items,\n onHide,\n onShow,\n shouldCloseOnPopupClick = true,\n },\n ref,\n ) => {\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n ContextMenuAlignment.TopLeft,\n );\n\n const [isContentShown, setIsContentShown] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n const handleHide = useCallback(() => {\n setIsContentShown(false);\n }, []);\n\n const handleShow = useCallback(async () => {\n const isTouch = getIsTouch();\n\n if (isTouch) {\n const { result } = (await createDialog({\n type: DialogType.SELECT,\n buttons: [],\n list: items.map(({ icons, text }, index) => ({\n name: text,\n id: index,\n icon: icons[0],\n })),\n }).open()) as SelectDialogResult;\n\n if (result && typeof result[0] === 'number') {\n void items[result[0]]?.onClick();\n }\n } else if (contextMenuRef.current) {\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = contextMenuRef.current.getBoundingClientRect();\n\n const { height, width, top, left } = container.getBoundingClientRect();\n\n const x = childrenLeft + window.scrollX + childrenWidth / 2 - left;\n const y = childrenTop + window.scrollY + childrenHeight / 2 - top;\n\n setInternalCoordinates({ x, y });\n\n if (x < width / 2) {\n if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomRight);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopRight);\n }\n } else if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomLeft);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopLeft);\n }\n\n setIsContentShown(true);\n }\n }, [container, items]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void handleShow();\n },\n [handleShow],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !shouldCloseOnPopupClick &&\n contextMenuContentRef.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n handleHide();\n },\n [handleHide, shouldCloseOnPopupClick],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isContentShown) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isContentShown && (\n <ContextMenuContent\n coordinates={coordinates ?? internalCoordinates}\n items={items}\n key={`contextMenu_${uuid}`}\n alignment={alignment ?? internalAlignment}\n ref={contextMenuContentRef}\n />\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n alignment,\n container,\n coordinates,\n internalAlignment,\n internalCoordinates,\n isContentShown,\n items,\n uuid,\n ]);\n\n return (\n <>\n <StyledContextMenu\n className=\"beta-chayns-context-menu\"\n onClick={handleClick}\n ref={contextMenuRef}\n >\n {children}\n </StyledContextMenu>\n {portal}\n </>\n );\n },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","ContextMenuAlignment","getIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenu","_ref","ref","alignment","children","createElement","icons","size","container","document","querySelector","body","coordinates","isInDialog","items","onHide","onShow","shouldCloseOnPopupClick","internalCoordinates","setInternalCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","contextMenuContentRef","contextMenuRef","handleHide","handleShow","isTouch","result","type","SELECT","buttons","list","map","_ref2","index","text","name","id","icon","open","onClick","current","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","window","scrollX","scrollY","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","addEventListener","removeEventListener","initial","key","Fragment","className","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n x: number;\n y: number;\n};\n\nexport type ContextMenuItem = {\n icons: string[];\n key: string;\n onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n text: string;\n};\n\nexport type ContextMenuRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n /**\n * Optional custom alignment used instead of calculating it using the\n * alignment within the page. The available alignment can be taken from the\n * ContextMenuAlignment enum.\n */\n alignment?: ContextMenuAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `ContextMenu` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * Optional own coordinates to be used instead of calculating the alignment\n * based on the alignment of the children.\n */\n coordinates?: ContextMenuCoordinates;\n /**\n * Whether the ContextMenu is inside a dialog.\n */\n isInDialog?: boolean;\n /**\n * The items that will be displayed in the content of the `ContextMenu`.\n */\n items: ContextMenuItem[];\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be closed if its clicked.\n */\n shouldCloseOnPopupClick?: boolean;\n};\n\ninterface SelectDialogResult {\n buttonType: number;\n result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n container = document.querySelector('.page-provider') ||\n document.querySelector('.tapp') ||\n document.body,\n coordinates,\n isInDialog = false,\n items,\n onHide,\n onShow,\n shouldCloseOnPopupClick = true,\n },\n ref,\n ) => {\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n ContextMenuAlignment.TopLeft,\n );\n\n const [isContentShown, setIsContentShown] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n const handleHide = useCallback(() => {\n setIsContentShown(false);\n }, []);\n\n const handleShow = useCallback(async () => {\n const isTouch = getIsTouch();\n\n if (isTouch) {\n const { result } = (await createDialog({\n type: DialogType.SELECT,\n buttons: [],\n list: items.map(({ icons, text }, index) => ({\n name: text,\n id: index,\n icon: icons[0],\n })),\n }).open()) as SelectDialogResult;\n\n if (result && typeof result[0] === 'number') {\n void items[result[0]]?.onClick();\n }\n } else if (contextMenuRef.current) {\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = contextMenuRef.current.getBoundingClientRect();\n\n const { height, width, top, left } = container.getBoundingClientRect();\n\n const x =\n childrenLeft + (isInDialog ? 0 : window.scrollX) + childrenWidth / 2 - left;\n const y =\n childrenTop + (isInDialog ? 0 : window.scrollY) + childrenHeight / 2 - top;\n\n setInternalCoordinates({ x, y });\n\n if (x < width / 2) {\n if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomRight);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopRight);\n }\n } else if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomLeft);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopLeft);\n }\n\n setIsContentShown(true);\n }\n }, [container, isInDialog, items]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void handleShow();\n },\n [handleShow],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !shouldCloseOnPopupClick &&\n contextMenuContentRef.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n handleHide();\n },\n [handleHide, shouldCloseOnPopupClick],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isContentShown) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isContentShown && (\n <ContextMenuContent\n coordinates={coordinates ?? internalCoordinates}\n items={items}\n key={`contextMenu_${uuid}`}\n alignment={alignment ?? internalAlignment}\n ref={contextMenuContentRef}\n />\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n alignment,\n container,\n coordinates,\n internalAlignment,\n internalCoordinates,\n isContentShown,\n items,\n uuid,\n ]);\n\n return (\n <>\n <StyledContextMenu\n className=\"beta-chayns-context-menu\"\n onClick={handleClick}\n ref={contextMenuRef}\n >\n {children}\n </StyledContextMenu>\n {portal}\n </>\n );\n },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
@@ -11,7 +11,8 @@ const SharingBar = _ref => {
11
11
  label,
12
12
  link,
13
13
  popupAlignment,
14
- container
14
+ container,
15
+ isInDialog
15
16
  } = _ref;
16
17
  const contextMenuRef = useRef(null);
17
18
  const handleImageDownload = () => {
@@ -1 +1 @@
1
- {"version":3,"file":"SharingBar.js","names":["getSite","React","useRef","SHAREPROVIDER","getIsTouch","copyToClipboard","shareWithApp","shareWithUrl","ContextMenu","Icon","StyledSharingBar","StyledSharingBarIconWrapper","StyledSharingBarText","SharingBar","_ref","label","link","popupAlignment","container","contextMenuRef","handleImageDownload","url","replace","encodeURIComponent","color","handleShare","key","current","hide","isTouch","trim","contextMenuItems","icons","onClick","text","handleSharingBarClick","show","createElement","onTouchStart","items","ref","alignment","displayName"],"sources":["../../../../src/components/sharing-bar/SharingBar.tsx"],"sourcesContent":["import { getSite } from 'chayns-api';\nimport React, { FC, useRef } from 'react';\nimport { SHAREPROVIDER } from '../../constants/sharingBar';\nimport type { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport { copyToClipboard, shareWithApp, shareWithUrl } from '../../utils/sharingBar';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport {\n StyledSharingBar,\n StyledSharingBarIconWrapper,\n StyledSharingBarText,\n} from './SharingBar.styles';\n\nexport type SharingBarProps = {\n /**\n * The element where the content of the `SharingBar` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * The label that should be displayed.\n */\n label: string;\n /**\n * The link that should be shared.\n */\n link: string;\n /**\n * The alignment of the sharing options.\n */\n popupAlignment: ContextMenuAlignment;\n};\n\nconst SharingBar: FC<SharingBarProps> = ({ label, link, popupAlignment, container }) => {\n const contextMenuRef = useRef<{ hide: VoidFunction; show: VoidFunction }>(null);\n\n const handleImageDownload = () => {\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[5].url\n .replace('{url}', encodeURIComponent(link))\n .replace('{linkText}', 'Teilen')\n .replace('{color}', getSite().color.replace('#', '')),\n );\n };\n\n const handleShare = (key: string) => {\n contextMenuRef.current?.hide();\n\n const isTouch = getIsTouch();\n\n switch (key) {\n case 'whatsapp':\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[0].url.replace('{url}', encodeURIComponent(`${link}`.trim())),\n );\n break;\n case 'facebook':\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n shareWithUrl(SHAREPROVIDER[3].url.replace('{url}', encodeURIComponent(link)));\n break;\n case 'twitter':\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[4].url\n .replace('{url}', encodeURIComponent(link))\n .replace('{linkText}', ''),\n );\n break;\n case 'mail':\n if (isTouch) {\n shareWithApp(`${link}`.trim());\n } else {\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[2].url.replace('{url}', encodeURIComponent(`${link}`.trim())),\n );\n }\n break;\n case 'copy':\n copyToClipboard(link);\n break;\n default:\n break;\n }\n };\n\n const contextMenuItems = [\n {\n icons: ['fa fa-copy'],\n key: 'copy',\n onClick: () => handleShare('copy'),\n text: 'Zwischenablage',\n },\n {\n icons: ['fa-solid fa-brands fa-whatsapp'],\n key: 'whatsapp',\n onClick: () => handleShare('whatsapp'),\n text: 'Whatsapp',\n },\n {\n icons: ['fa-solid fa-brands fa-facebook-f'],\n key: 'facebook',\n onClick: () => handleShare('facebook'),\n text: 'Facebook',\n },\n {\n icons: ['fa-solid fa-brands fa-x-twitter'],\n key: 'twitter',\n onClick: () => handleShare('twitter'),\n text: 'X',\n },\n {\n icons: ['fa fa-envelope'],\n key: 'mail',\n onClick: () => handleShare('mail'),\n text: 'Mail',\n },\n {\n icons: ['fa fa-qrcode'],\n key: 'callingCode',\n onClick: handleImageDownload,\n text: 'Calling Code herunterladen',\n },\n ];\n\n const handleSharingBarClick = () => {\n contextMenuRef.current?.show();\n };\n\n return (\n <StyledSharingBar onClick={handleSharingBarClick} onTouchStart={handleSharingBarClick}>\n <StyledSharingBarIconWrapper>\n <Icon icons={['fa-solid fa-share-nodes']} />\n </StyledSharingBarIconWrapper>\n <ContextMenu\n items={contextMenuItems}\n ref={contextMenuRef}\n alignment={popupAlignment}\n container={container}\n >\n {null}\n </ContextMenu>\n <StyledSharingBarText>{label}</StyledSharingBarText>\n </StyledSharingBar>\n );\n};\n\nSharingBar.displayName = 'SharingBar';\n\nexport default SharingBar;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"SharingBar.js","names":["getSite","React","useRef","SHAREPROVIDER","getIsTouch","copyToClipboard","shareWithApp","shareWithUrl","ContextMenu","Icon","StyledSharingBar","StyledSharingBarIconWrapper","StyledSharingBarText","SharingBar","_ref","label","link","popupAlignment","container","isInDialog","contextMenuRef","handleImageDownload","url","replace","encodeURIComponent","color","handleShare","key","current","hide","isTouch","trim","contextMenuItems","icons","onClick","text","handleSharingBarClick","show","createElement","onTouchStart","items","ref","alignment","displayName"],"sources":["../../../../src/components/sharing-bar/SharingBar.tsx"],"sourcesContent":["import { getSite } from 'chayns-api';\nimport React, { FC, useRef } from 'react';\nimport { SHAREPROVIDER } from '../../constants/sharingBar';\nimport type { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport { copyToClipboard, shareWithApp, shareWithUrl } from '../../utils/sharingBar';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport {\n StyledSharingBar,\n StyledSharingBarIconWrapper,\n StyledSharingBarText,\n} from './SharingBar.styles';\n\nexport type SharingBarProps = {\n /**\n * The element where the content of the `SharingBar` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * Whether the ContextMenu is inside a dialog.\n */\n isInDialog?: boolean;\n /**\n * The label that should be displayed.\n */\n label: string;\n /**\n * The link that should be shared.\n */\n link: string;\n /**\n * The alignment of the sharing options.\n */\n popupAlignment: ContextMenuAlignment;\n};\n\nconst SharingBar: FC<SharingBarProps> = ({\n label,\n link,\n popupAlignment,\n container,\n isInDialog,\n}) => {\n const contextMenuRef = useRef<{ hide: VoidFunction; show: VoidFunction }>(null);\n\n const handleImageDownload = () => {\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[5].url\n .replace('{url}', encodeURIComponent(link))\n .replace('{linkText}', 'Teilen')\n .replace('{color}', getSite().color.replace('#', '')),\n );\n };\n\n const handleShare = (key: string) => {\n contextMenuRef.current?.hide();\n\n const isTouch = getIsTouch();\n\n switch (key) {\n case 'whatsapp':\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[0].url.replace('{url}', encodeURIComponent(`${link}`.trim())),\n );\n break;\n case 'facebook':\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n shareWithUrl(SHAREPROVIDER[3].url.replace('{url}', encodeURIComponent(link)));\n break;\n case 'twitter':\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[4].url\n .replace('{url}', encodeURIComponent(link))\n .replace('{linkText}', ''),\n );\n break;\n case 'mail':\n if (isTouch) {\n shareWithApp(`${link}`.trim());\n } else {\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[2].url.replace('{url}', encodeURIComponent(`${link}`.trim())),\n );\n }\n break;\n case 'copy':\n copyToClipboard(link);\n break;\n default:\n break;\n }\n };\n\n const contextMenuItems = [\n {\n icons: ['fa fa-copy'],\n key: 'copy',\n onClick: () => handleShare('copy'),\n text: 'Zwischenablage',\n },\n {\n icons: ['fa-solid fa-brands fa-whatsapp'],\n key: 'whatsapp',\n onClick: () => handleShare('whatsapp'),\n text: 'Whatsapp',\n },\n {\n icons: ['fa-solid fa-brands fa-facebook-f'],\n key: 'facebook',\n onClick: () => handleShare('facebook'),\n text: 'Facebook',\n },\n {\n icons: ['fa-solid fa-brands fa-x-twitter'],\n key: 'twitter',\n onClick: () => handleShare('twitter'),\n text: 'X',\n },\n {\n icons: ['fa fa-envelope'],\n key: 'mail',\n onClick: () => handleShare('mail'),\n text: 'Mail',\n },\n {\n icons: ['fa fa-qrcode'],\n key: 'callingCode',\n onClick: handleImageDownload,\n text: 'Calling Code herunterladen',\n },\n ];\n\n const handleSharingBarClick = () => {\n contextMenuRef.current?.show();\n };\n\n return (\n <StyledSharingBar onClick={handleSharingBarClick} onTouchStart={handleSharingBarClick}>\n <StyledSharingBarIconWrapper>\n <Icon icons={['fa-solid fa-share-nodes']} />\n </StyledSharingBarIconWrapper>\n <ContextMenu\n items={contextMenuItems}\n ref={contextMenuRef}\n alignment={popupAlignment}\n container={container}\n >\n {null}\n </ContextMenu>\n <StyledSharingBarText>{label}</StyledSharingBarText>\n </StyledSharingBar>\n );\n};\n\nSharingBar.displayName = 'SharingBar';\n\nexport default SharingBar;\n"],"mappings":"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","ignoreList":[]}
@@ -34,6 +34,10 @@ type ContextMenuProps = {
34
34
  * based on the alignment of the children.
35
35
  */
36
36
  coordinates?: ContextMenuCoordinates;
37
+ /**
38
+ * Whether the ContextMenu is inside a dialog.
39
+ */
40
+ isInDialog?: boolean;
37
41
  /**
38
42
  * The items that will be displayed in the content of the `ContextMenu`.
39
43
  */
@@ -5,6 +5,10 @@ export type SharingBarProps = {
5
5
  * The element where the content of the `SharingBar` should be rendered via React Portal.
6
6
  */
7
7
  container?: Element;
8
+ /**
9
+ * Whether the ContextMenu is inside a dialog.
10
+ */
11
+ isInDialog?: boolean;
8
12
  /**
9
13
  * The label that should be displayed.
10
14
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.827",
3
+ "version": "5.0.0-beta.828",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -85,5 +85,5 @@
85
85
  "publishConfig": {
86
86
  "access": "public"
87
87
  },
88
- "gitHead": "d252443a4542ec80164b619d56ba6d71e8fbfa25"
88
+ "gitHead": "65c2d0d7e0ba31577080509cc3d6fe234a43883d"
89
89
  }