wix-style-react
Version:
wix-style-react
51 lines • 2.43 kB
JavaScript
const getTargetElement = (element) => element && element.querySelectorAll('[data-hook="popover-element"]')[0];
const queryDocumentOrElement = (element, query) => (element && element.querySelectorAll(query)[0]) ||
(document && document.querySelector(query));
const getContentElement = (element) => {
const contentHook = element?.getAttribute('data-content-hook');
const contentSelector = `[data-content-element="${contentHook}"]`;
return queryDocumentOrElement(element, contentSelector);
};
const getArrowElement = (element) => element && element.querySelectorAll('[data-hook="popover-arrow"]')[0];
export const popoverLegacyDriverFactory = ({ element, eventTrigger, }) => ({
/** Whether the element exists or not */
exists: () => !!element,
/** Returns the target element (`<Popover.Element/>`) */
getTargetElement: () => getTargetElement(element),
/** Returns the content element (`<Popover.Content/>`) */
getContentElement: () => getContentElement(element),
/** Returns the arrow element */
getArrowElement: () => getArrowElement(element),
/** Returns `true` whether the target element (`<Popover.Element/>`) exists */
isTargetElementExists: () => !!getTargetElement(element),
/** Returns `true` whether the content element (`<Popover.Content/>`) exists */
isContentElementExists: () => !!getContentElement(element),
/** Trigger `mouseEnter` on the element */
mouseEnter: () => element && eventTrigger.mouseEnter(element),
/** Trigger `mouseLeave` on the element */
mouseLeave: () => element && eventTrigger.mouseLeave(element),
/** Click on the element */
click: () => {
const targetElement = getTargetElement(element);
if (targetElement) {
eventTrigger.click(targetElement);
}
},
/** Click outside the element */
clickOutside: () => {
document.dispatchEvent(new Event('mousedown'));
document.dispatchEvent(new Event('mouseup'));
},
/** Returns the arrow offset */
getArrowOffset: () => {
// @ts-ignore
const { top, left, right, bottom } = getArrowElement(element)?.style;
return { top, left, right, bottom };
},
/** Returns the element's inline styles */
// @ts-ignore
inlineStyles: () => element?.style,
/** Returns the element's id */
getElementId: () => element?.id,
});
//# sourceMappingURL=Popover.driver.js.map