@chayns-components/core 5.0.0-beta.201 → 5.0.0-beta.202
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.
|
@@ -43,32 +43,30 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
43
43
|
width: pseudoWidth
|
|
44
44
|
} = popupPseudoContentRef.current.getBoundingClientRect();
|
|
45
45
|
const {
|
|
46
|
-
x: childrenX,
|
|
47
|
-
y: childrenY,
|
|
48
46
|
height: childrenHeight,
|
|
47
|
+
left: childrenLeft,
|
|
48
|
+
top: childrenTop,
|
|
49
49
|
width: childrenWidth
|
|
50
50
|
} = popupRef.current.getBoundingClientRect();
|
|
51
|
-
if (pseudoHeight >
|
|
52
|
-
if (pseudoWidth >
|
|
51
|
+
if (pseudoHeight > childrenTop - 25) {
|
|
52
|
+
if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
|
|
53
53
|
setAlignment(_types.PopupAlignment.BottomRight);
|
|
54
54
|
} else {
|
|
55
55
|
setAlignment(_types.PopupAlignment.BottomLeft);
|
|
56
56
|
}
|
|
57
57
|
setCoordinates({
|
|
58
|
-
x:
|
|
59
|
-
y:
|
|
60
|
-
});
|
|
61
|
-
} else if (pseudoWidth > childrenX + childrenWidth / 2 - 25) {
|
|
62
|
-
setAlignment(_types.PopupAlignment.TopRight);
|
|
63
|
-
setCoordinates({
|
|
64
|
-
x: childrenX + childrenWidth / 2,
|
|
65
|
-
y: childrenY
|
|
58
|
+
x: childrenLeft + childrenWidth / 2,
|
|
59
|
+
y: childrenTop + childrenHeight + 4
|
|
66
60
|
});
|
|
67
61
|
} else {
|
|
68
|
-
|
|
62
|
+
if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
|
|
63
|
+
setAlignment(_types.PopupAlignment.TopRight);
|
|
64
|
+
} else {
|
|
65
|
+
setAlignment(_types.PopupAlignment.TopLeft);
|
|
66
|
+
}
|
|
69
67
|
setCoordinates({
|
|
70
|
-
x:
|
|
71
|
-
y:
|
|
68
|
+
x: childrenLeft + childrenWidth / 2,
|
|
69
|
+
y: childrenTop - 4
|
|
72
70
|
});
|
|
73
71
|
}
|
|
74
72
|
setIsOpen(true);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popup.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_reactDom","_uuid","_PopupContent","_interopRequireDefault","_Popup","_types","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Popup","forwardRef","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","coordinates","setCoordinates","useState","x","y","container","document","body","alignment","setAlignment","PopupAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","uuid","useUuid","popupContentRef","useRef","popupPseudoContentRef","popupRef","handleShow","useCallback","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenX","childrenY","childrenHeight","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","handleMouseLeave","handleDocumentClick","event","_popupContentRef$curr","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","useEffect","addEventListener","window","removeEventListener","createPortal","createElement","AnimatePresence","initial","Fragment","StyledPopupPseudo","StyledPopup","onClick","onMouseLeave","onMouseEnter","displayName","_default","exports"],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\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 PopupContent from './popup-content/PopupContent';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from './types';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\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 opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n ({ content, onShow, onHide, children, shouldShowOnHover = false }, ref) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n const container = document.body;\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [isOpen, setIsOpen] = 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 popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && popupPseudoContentRef.current) {\n const { height: pseudoHeight, width: pseudoWidth } =\n popupPseudoContentRef.current.getBoundingClientRect();\n\n const {\n x: childrenX,\n y: childrenY,\n height: childrenHeight,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenY - 25) {\n if (pseudoWidth > childrenX + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n setCoordinates({\n x: childrenX + childrenWidth / 2,\n y: childrenY + childrenHeight - 15,\n });\n } else if (pseudoWidth > childrenX + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n setCoordinates({\n x: childrenX + childrenWidth / 2,\n y: childrenY,\n });\n } else {\n setAlignment(PopupAlignment.TopLeft);\n setCoordinates({\n x: childrenX + childrenWidth / 2,\n y: childrenY + 15,\n });\n }\n\n setIsOpen(true);\n }\n }, []);\n\n const handleChildrenClick = () => {\n if (!shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = () => {\n if (shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleMouseLeave = () => {\n if (shouldShowOnHover) {\n handleHide();\n }\n };\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n event.preventDefault();\n event.stopPropagation();\n\n if (!shouldShowOnHover) {\n handleHide();\n }\n }\n },\n [handleHide, shouldShowOnHover]\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow]\n );\n\n useEffect(() => {\n if (isOpen) {\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, isOpen, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContent\n coordinates={coordinates}\n content={content}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n />\n )}\n </AnimatePresence>,\n container\n )\n );\n }, [alignment, container, content, coordinates, isOpen, uuid]);\n\n return (\n <>\n <StyledPopupPseudo ref={popupPseudoContentRef}>{content}</StyledPopupPseudo>\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n }\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Popup.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_reactDom","_uuid","_PopupContent","_interopRequireDefault","_Popup","_types","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Popup","forwardRef","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","coordinates","setCoordinates","useState","x","y","container","document","body","alignment","setAlignment","PopupAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","uuid","useUuid","popupContentRef","useRef","popupPseudoContentRef","popupRef","handleShow","useCallback","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","handleMouseLeave","handleDocumentClick","event","_popupContentRef$curr","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","useEffect","addEventListener","window","removeEventListener","createPortal","createElement","AnimatePresence","initial","Fragment","StyledPopupPseudo","StyledPopup","onClick","onMouseLeave","onMouseEnter","displayName","_default","exports"],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\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 PopupContent from './popup-content/PopupContent';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from './types';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\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 opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n ({ content, onShow, onHide, children, shouldShowOnHover = false }, ref) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n const container = document.body;\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [isOpen, setIsOpen] = 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 popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && popupPseudoContentRef.current) {\n const { height: pseudoHeight, width: pseudoWidth } =\n popupPseudoContentRef.current.getBoundingClientRect();\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n setCoordinates({\n x: childrenLeft + childrenWidth / 2,\n y: childrenTop + childrenHeight + 4,\n });\n } else {\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n setCoordinates({\n x: childrenLeft + childrenWidth / 2,\n y: childrenTop - 4,\n });\n }\n\n setIsOpen(true);\n }\n }, []);\n\n const handleChildrenClick = () => {\n if (!shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = () => {\n if (shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleMouseLeave = () => {\n if (shouldShowOnHover) {\n handleHide();\n }\n };\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n event.preventDefault();\n event.stopPropagation();\n\n if (!shouldShowOnHover) {\n handleHide();\n }\n }\n },\n [handleHide, shouldShowOnHover]\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow]\n );\n\n useEffect(() => {\n if (isOpen) {\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, isOpen, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContent\n coordinates={coordinates}\n content={content}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n />\n )}\n </AnimatePresence>,\n container\n )\n );\n }, [alignment, container, content, coordinates, isOpen, uuid]);\n\n return (\n <>\n <StyledPopupPseudo ref={popupPseudoContentRef}>{content}</StyledPopupPseudo>\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n }\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.202",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"publishConfig": {
|
|
65
65
|
"access": "public"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "b8f2c69cb90ee0315a97148d817a8c9f16af5d51"
|
|
68
68
|
}
|