@etsoo/react 1.2.71 → 1.2.72

package/lib/index.d.ts

@@ -57,6 +57,7 @@ export * from './mu/TabBox';
 export * from './mu/TableEx';
 export * from './mu/TextFieldEx';
 export * from './mu/Tiplist';
+export * from './mu/TooltipClick';
 export * from './mu/UserAvatar';
 export * from './mu/UserAvatarEditor';
 export * from './notifier/Notifier';

package/lib/index.js

@@ -60,6 +60,7 @@ export * from './mu/TabBox';
 export * from './mu/TableEx';
 export * from './mu/TextFieldEx';
 export * from './mu/Tiplist';
+export * from './mu/TooltipClick';
 export * from './mu/UserAvatar';
 export * from './mu/UserAvatarEditor';
 // notifier

package/lib/mu/TooltipClick.d.ts

@@ -0,0 +1,14 @@
+import { TooltipProps } from '@mui/material';
+import React from 'react';
+/**
+ * Tooltip with click visibility props
+ */
+export interface TooltipClickProps extends Omit<TooltipProps, 'children' | 'open' | 'disableFocusListener' | 'disableHoverListener' | 'disableTouchListener'> {
+    children: (openTooltip: (newTitle?: string) => void) => React.ReactElement<any, any>;
+}
+/**
+ * Tooltip with click visibility
+ * @param props Props
+ * @returns Component
+ */
+export declare function TooltipClick(props: TooltipClickProps): JSX.Element;

package/lib/mu/TooltipClick.js

@@ -0,0 +1,29 @@
+import { ClickAwayListener, Tooltip } from '@mui/material';
+import React from 'react';
+/**
+ * Tooltip with click visibility
+ * @param props Props
+ * @returns Component
+ */
+export function TooltipClick(props) {
+    // Destruct
+    const { children, onClose, title, ...rest } = props;
+    // State
+    const [localTitle, setTitle] = React.useState(title);
+    const [open, setOpen] = React.useState(false);
+    // Callback for open the tooltip
+    const openTooltip = (newTitle) => {
+        setOpen(true);
+        if (newTitle)
+            setTitle(newTitle);
+    };
+    // Layout
+    return (React.createElement(ClickAwayListener, { onClickAway: () => setOpen(false) },
+        React.createElement(Tooltip, { PopperProps: {
+                disablePortal: true
+            }, onClose: (event) => {
+                setOpen(false);
+                if (onClose)
+                    onClose(event);
+            }, title: localTitle, open: open, disableFocusListener: true, disableHoverListener: true, disableTouchListener: true, ...rest }, children(openTooltip))));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.2.71",
+    "version": "1.2.72",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/index.ts

@@ -64,6 +64,7 @@ export * from './mu/TabBox';
 export * from './mu/TableEx';
 export * from './mu/TextFieldEx';
 export * from './mu/Tiplist';
+export * from './mu/TooltipClick';
 export * from './mu/UserAvatar';
 export * from './mu/UserAvatarEditor';
 

package/src/mu/TooltipClick.tsx

@@ -0,0 +1,62 @@
+import { ClickAwayListener, Tooltip, TooltipProps } from '@mui/material';
+import React from 'react';
+
+/**
+ * Tooltip with click visibility props
+ */
+export interface TooltipClickProps
+    extends Omit<
+        TooltipProps,
+        | 'children'
+        | 'open'
+        | 'disableFocusListener'
+        | 'disableHoverListener'
+        | 'disableTouchListener'
+    > {
+    children: (
+        openTooltip: (newTitle?: string) => void
+    ) => React.ReactElement<any, any>;
+}
+
+/**
+ * Tooltip with click visibility
+ * @param props Props
+ * @returns Component
+ */
+export function TooltipClick(props: TooltipClickProps) {
+    // Destruct
+    const { children, onClose, title, ...rest } = props;
+
+    // State
+    const [localTitle, setTitle] = React.useState(title);
+    const [open, setOpen] = React.useState(false);
+
+    // Callback for open the tooltip
+    const openTooltip = (newTitle?: string) => {
+        setOpen(true);
+        if (newTitle) setTitle(newTitle);
+    };
+
+    // Layout
+    return (
+        <ClickAwayListener onClickAway={() => setOpen(false)}>
+            <Tooltip
+                PopperProps={{
+                    disablePortal: true
+                }}
+                onClose={(event) => {
+                    setOpen(false);
+                    if (onClose) onClose(event);
+                }}
+                title={localTitle}
+                open={open}
+                disableFocusListener
+                disableHoverListener
+                disableTouchListener
+                {...rest}
+            >
+                {children(openTooltip)}
+            </Tooltip>
+        </ClickAwayListener>
+    );
+}