@quadrats/react 0.6.7 → 0.7.1

package/components/Tooltip/index.js

@@ -6,115 +6,115 @@ import { ThemeContext } from '@quadrats/react/configs';
 import Portal from '../Portal/index.js';
 import { calculatePosition } from './calculatePosition.js';
 
-const clsPrefix = 'qdr-tooltip';
-const defaultTriggers = ['hover'];
-const defaultGetContainer = () => document.body;
-const defaultTransitionClassNames = {
-    enter: `${clsPrefix}__fade--enter`,
-    enterActive: `${clsPrefix}__fade--enter-active`,
-    exit: `${clsPrefix}__fade--exit`,
-    exitActive: `${clsPrefix}__fade--exit-active`,
-};
-/**
- * @todo
- * To implement all placement.
- * Extract Popup from Tooltip.
- */
-function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = defaultGetContainer, placement = 'top', horizontalOffset = 0, verticalOffset = 0, transitionClassNames = defaultTransitionClassNames, mouseEnterDelay = 0, mouseLeaveDelay = 0.1, }) {
-    const { props: themeProps } = useContext(ThemeContext);
-    const [visible, setVisible] = useState(false);
-    const delayTimer = useRef(NaN);
-    const clearDelayTimer = useCallback(() => {
-        if (delayTimer.current) {
-            window.clearTimeout(delayTimer.current);
-            delayTimer.current = NaN;
-        }
-    }, []);
-    const delaySetVisible = useCallback((setVisibleAction, delay) => {
-        clearDelayTimer();
-        if (delay) {
-            delayTimer.current = window.setTimeout(() => {
-                setVisible(setVisibleAction);
-                clearDelayTimer();
-            }, delay * 1000);
-        }
-        else {
-            setVisible(setVisibleAction);
-        }
-    }, [clearDelayTimer]);
-    const triggerRef = useRef(null);
-    const popupRef = useRef(null);
-    const [firstPlacement, secondPlacement] = placement.split('-');
-    const child = Children.only(children);
-    const triggerProps = {};
-    const popupProps = {};
-    if (triggers.includes('click')) {
-        triggerProps.onClick = (event) => {
-            var _a, _b;
-            delaySetVisible((prevVisible) => !prevVisible, 0);
-            (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        };
-    }
-    if (triggers.includes('hover')) {
-        popupProps.onMouseEnter = clearDelayTimer;
-        popupProps.onMouseLeave = (event) => {
-            var _a;
-            if (!(event.relatedTarget instanceof Node && ((_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)))) {
-                delaySetVisible(false, mouseLeaveDelay);
-            }
-        };
-        triggerProps.onMouseEnter = (event) => {
-            var _a, _b;
-            delaySetVisible(true, mouseEnterDelay);
-            (_b = (_a = child.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        };
-        triggerProps.onMouseLeave = (event) => {
-            var _a, _b;
-            delaySetVisible(false, mouseLeaveDelay);
-            (_b = (_a = child.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        };
-    }
-    const trigger = cloneElement(child, Object.assign(Object.assign({}, triggerProps), { ref: composeRefs([triggerRef, child.ref]) }));
-    useLayoutEffect(() => {
-        const triggerEl = triggerRef.current;
-        const popupEl = popupRef.current;
-        if (!(visible && triggerEl && popupEl)) {
-            return;
-        }
-        const { top, left } = calculatePosition({
-            placement, getContainer, horizontalOffset, verticalOffset,
-        }, triggerEl, popupEl);
-        popupEl.style.top = `${top}px`;
-        popupEl.style.left = `${left}px`;
-    }, [visible, placement, getContainer, horizontalOffset, verticalOffset]);
-    useLayoutEffect(() => {
-        if (!visible) {
-            return;
-        }
-        function clickOutSideHandler(event) {
-            event.preventDefault();
-            const popupEl = popupRef.current;
-            const targetEl = event.target;
-            const targetUnmount = targetEl.offsetParent === null;
-            if (!((popupEl === null || popupEl === void 0 ? void 0 : popupEl.contains(targetEl)) || targetUnmount)) {
-                setVisible(false);
-            }
-        }
-        document.addEventListener('click', clickOutSideHandler);
-        return () => {
-            document.removeEventListener('click', clickOutSideHandler);
-        };
-    }, [visible]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Portal, { getContainer: getContainer },
-            React.createElement(CSSTransition, { in: visible, classNames: transitionClassNames, timeout: 200, unmountOnExit: true },
-                React.createElement("div", { className: `${clsPrefix}__mask` },
-                    React.createElement("div", Object.assign({ className: clsx(themeProps.className, `${clsPrefix}__popup`, `${clsPrefix}__popup--${firstPlacement}`), ref: popupRef, style: themeProps.style }, popupProps),
-                        React.createElement("div", { className: clsx(`${clsPrefix}__arrow`, `${clsPrefix}__arrow--${firstPlacement}`, {
-                                [`${clsPrefix}__arrow--${placement}`]: secondPlacement,
-                            }) }),
-                        React.createElement("div", { className: `${clsPrefix}__content` }, popup))))),
-        trigger));
+const clsPrefix = 'qdr-tooltip';
+const defaultTriggers = ['hover'];
+const defaultGetContainer = () => document.body;
+const defaultTransitionClassNames = {
+    enter: `${clsPrefix}__fade--enter`,
+    enterActive: `${clsPrefix}__fade--enter-active`,
+    exit: `${clsPrefix}__fade--exit`,
+    exitActive: `${clsPrefix}__fade--exit-active`,
+};
+/**
+ * @todo
+ * To implement all placement.
+ * Extract Popup from Tooltip.
+ */
+function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = defaultGetContainer, placement = 'top', horizontalOffset = 0, verticalOffset = 0, transitionClassNames = defaultTransitionClassNames, mouseEnterDelay = 0, mouseLeaveDelay = 0.1, }) {
+    const { props: themeProps } = useContext(ThemeContext);
+    const [visible, setVisible] = useState(false);
+    const delayTimer = useRef(NaN);
+    const clearDelayTimer = useCallback(() => {
+        if (delayTimer.current) {
+            window.clearTimeout(delayTimer.current);
+            delayTimer.current = NaN;
+        }
+    }, []);
+    const delaySetVisible = useCallback((setVisibleAction, delay) => {
+        clearDelayTimer();
+        if (delay) {
+            delayTimer.current = window.setTimeout(() => {
+                setVisible(setVisibleAction);
+                clearDelayTimer();
+            }, delay * 1000);
+        }
+        else {
+            setVisible(setVisibleAction);
+        }
+    }, [clearDelayTimer]);
+    const triggerRef = useRef(null);
+    const popupRef = useRef(null);
+    const [firstPlacement, secondPlacement] = placement.split('-');
+    const child = Children.only(children);
+    const triggerProps = {};
+    const popupProps = {};
+    if (triggers.includes('click')) {
+        triggerProps.onClick = (event) => {
+            var _a, _b;
+            delaySetVisible(prevVisible => !prevVisible, 0);
+            (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        };
+    }
+    if (triggers.includes('hover')) {
+        popupProps.onMouseEnter = clearDelayTimer;
+        popupProps.onMouseLeave = (event) => {
+            var _a;
+            if (!(event.relatedTarget instanceof Node && ((_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)))) {
+                delaySetVisible(false, mouseLeaveDelay);
+            }
+        };
+        triggerProps.onMouseEnter = (event) => {
+            var _a, _b;
+            delaySetVisible(true, mouseEnterDelay);
+            (_b = (_a = child.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        };
+        triggerProps.onMouseLeave = (event) => {
+            var _a, _b;
+            delaySetVisible(false, mouseLeaveDelay);
+            (_b = (_a = child.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        };
+    }
+    const trigger = cloneElement(child, Object.assign(Object.assign({}, triggerProps), { ref: composeRefs([triggerRef, child.ref]) }));
+    useLayoutEffect(() => {
+        const triggerEl = triggerRef.current;
+        const popupEl = popupRef.current;
+        if (!(visible && triggerEl && popupEl)) {
+            return;
+        }
+        const { top, left } = calculatePosition({
+            placement, getContainer, horizontalOffset, verticalOffset,
+        }, triggerEl, popupEl);
+        popupEl.style.top = `${top}px`;
+        popupEl.style.left = `${left}px`;
+    }, [visible, placement, getContainer, horizontalOffset, verticalOffset]);
+    useLayoutEffect(() => {
+        if (!visible) {
+            return;
+        }
+        function clickOutSideHandler(event) {
+            event.preventDefault();
+            const popupEl = popupRef.current;
+            const targetEl = event.target;
+            const targetUnmount = targetEl.offsetParent === null;
+            if (!((popupEl === null || popupEl === void 0 ? void 0 : popupEl.contains(targetEl)) || targetUnmount)) {
+                setVisible(false);
+            }
+        }
+        document.addEventListener('click', clickOutSideHandler);
+        return () => {
+            document.removeEventListener('click', clickOutSideHandler);
+        };
+    }, [visible]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Portal, { getContainer: getContainer },
+            React.createElement(CSSTransition, { in: visible, classNames: transitionClassNames, timeout: 200, unmountOnExit: true },
+                React.createElement("div", { className: `${clsPrefix}__mask` },
+                    React.createElement("div", Object.assign({ className: clsx(themeProps.className, `${clsPrefix}__popup`, `${clsPrefix}__popup--${firstPlacement}`), ref: popupRef, style: themeProps.style }, popupProps),
+                        React.createElement("div", { className: clsx(`${clsPrefix}__arrow`, `${clsPrefix}__arrow--${firstPlacement}`, {
+                                [`${clsPrefix}__arrow--${placement}`]: secondPlacement,
+                            }) }),
+                        React.createElement("div", { className: `${clsPrefix}__content` }, popup))))),
+        trigger));
 }
 
 export { Tooltip as default };

package/components/Tooltip/typings.d.ts

@@ -1,10 +1,10 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { CSSTransitionClassNames } from 'react-transition-group/CSSTransition';
 import { PortalProps } from '../Portal';
-export declare type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'right-top' | 'right-bottom';
-export declare type TooltipTrigger = 'hover' | 'click';
+export type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'right-top' | 'right-bottom';
+export type TooltipTrigger = 'hover' | 'click';
 export interface TooltipProps {
-    children?: ReactElement;
+    children?: React.ReactNode;
     triggers?: TooltipTrigger[];
     popup?: ReactNode;
     getContainer?: PortalProps['getContainer'];