@etsoo/react 1.2.68 → 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/DataGridEx.js

@@ -192,12 +192,16 @@ export function DataGridEx(props) {
             div.title = '';
         }
     };
-    const handleClick = (event) => {
+    const handleMouseDown = (event) => {
         var _a;
         const div = event.currentTarget;
         const row = div.dataset['row'];
         if (div.parentElement == null || row == null)
             return;
+        const rowIndex = parseFloat(row);
+        // No change
+        if (isNaN(rowIndex) || rowIndex === state.selectedRowIndex)
+            return;
         if (state.selectedRowIndex != null) {
             doRowItems(div.parentElement, state.selectedRowIndex, (preDiv) => {
                 preDiv.classList.remove('DataGridEx-Selected');
@@ -206,7 +210,7 @@ export function DataGridEx(props) {
         rowItems(div, (currentDiv) => {
             currentDiv.classList.add('DataGridEx-Selected');
         });
-        state.selectedRowIndex = parseFloat(row);
+        state.selectedRowIndex = rowIndex;
         (_a = state.ref) === null || _a === void 0 ? void 0 : _a.select(state.selectedRowIndex);
     };
     const handleMouseOver = (event) => {
@@ -263,7 +267,7 @@ export function DataGridEx(props) {
             cellProps,
             renderProps
         });
-        return (React.createElement("div", { className: rowClass, style: style, "data-row": rowIndex, "data-column": columnIndex, onClick: selectable && !checkable ? handleClick : undefined, onMouseOver: selectable ? handleMouseOver : undefined, onMouseOut: selectable ? handleMouseOut : undefined },
+        return (React.createElement("div", { className: rowClass, style: style, "data-row": rowIndex, "data-column": columnIndex, onMouseDown: selectable && !checkable ? handleMouseDown : undefined, onMouseOver: selectable ? handleMouseOver : undefined, onMouseOut: selectable ? handleMouseOut : undefined },
             React.createElement(Box, { ...cellProps, onMouseEnter: handleMouseEnter }, child)));
     };
     // Column width calculator

package/lib/mu/TabBox.d.ts

@@ -17,14 +17,18 @@ export interface TabBoxPanel extends Omit<TabProps, 'value' | 'children'> {
  * Tabs with box props
  */
 export interface TabBoxPros extends BoxProps {
-    /**
-     * Root props
-     */
-    root?: BoxProps;
     /**
      * Container props
      */
     container?: Omit<TabsProps, 'value'>;
+    /**
+     * Add a hidden input and its name
+     */
+    inputName?: string;
+    /**
+     * Root props
+     */
+    root?: BoxProps;
     /**
      * Tabs
      */

package/lib/mu/TabBox.js

@@ -7,17 +7,18 @@ import React from 'react';
  */
 export function TabBox(props) {
     // Destruct
-    const { root, container = {}, tabs } = props;
+    const { inputName, root, container = {}, tabs } = props;
     const { onChange, ...rest } = container;
     // State
     const [value, setValue] = React.useState(0);
     // Layout
     return (React.createElement(React.Fragment, null,
+        inputName && (React.createElement("input", { type: "hidden", name: inputName, value: value })),
         React.createElement(Box, { ...root },
             React.createElement(Tabs, { value: value, onChange: (event, newValue) => {
                     setValue(newValue);
                     if (onChange)
                         onChange(event, newValue);
-                }, ...rest }, tabs.map(({ children, panel, ...tabRest }, index) => (React.createElement(Tab, { value: index, ...tabRest }))))),
-        tabs.map(({ children, panel }, index) => (React.createElement(Box, { hidden: value !== index, ...panel }, children)))));
+                }, ...rest }, tabs.map(({ children, panel, ...tabRest }, index) => (React.createElement(Tab, { key: index, value: index, ...tabRest }))))),
+        tabs.map(({ children, panel }, index) => (React.createElement(Box, { key: index, hidden: value !== index, ...panel }, children)))));
 }

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.68",
+    "version": "1.2.72",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
         "@emotion/react": "^11.5.0",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.3.0",
-        "@etsoo/appscript": "^1.1.20",
-        "@etsoo/notificationbase": "^1.0.88",
-        "@etsoo/shared": "^1.0.57",
+        "@etsoo/appscript": "^1.1.21",
+        "@etsoo/notificationbase": "^1.0.89",
+        "@etsoo/shared": "^1.0.58",
         "@mui/icons-material": "^5.0.4",
         "@mui/material": "^5.0.4",
         "@reach/router": "^1.3.4",

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/DataGridEx.tsx

@@ -458,11 +458,16 @@ export function DataGridEx<T extends Record<string, any>>(
         }
     };
 
-    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
         const div = event.currentTarget;
         const row = div.dataset['row'];
         if (div.parentElement == null || row == null) return;
 
+        const rowIndex = parseFloat(row);
+
+        // No change
+        if (isNaN(rowIndex) || rowIndex === state.selectedRowIndex) return;
+
         if (state.selectedRowIndex != null) {
             doRowItems(div.parentElement, state.selectedRowIndex, (preDiv) => {
                 preDiv.classList.remove('DataGridEx-Selected');
@@ -472,7 +477,7 @@ export function DataGridEx<T extends Record<string, any>>(
         rowItems(div, (currentDiv) => {
             currentDiv.classList.add('DataGridEx-Selected');
         });
-        state.selectedRowIndex = parseFloat(row);
+        state.selectedRowIndex = rowIndex;
 
         state.ref?.select(state.selectedRowIndex);
     };
@@ -565,7 +570,9 @@ export function DataGridEx<T extends Record<string, any>>(
                 style={style}
                 data-row={rowIndex}
                 data-column={columnIndex}
-                onClick={selectable && !checkable ? handleClick : undefined}
+                onMouseDown={
+                    selectable && !checkable ? handleMouseDown : undefined
+                }
                 onMouseOver={selectable ? handleMouseOver : undefined}
                 onMouseOut={selectable ? handleMouseOut : undefined}
             >

package/src/mu/TabBox.tsx

@@ -21,14 +21,19 @@ export interface TabBoxPanel extends Omit<TabProps, 'value' | 'children'> {
  */
 export interface TabBoxPros extends BoxProps {
     /**
-     * Root props
+     * Container props
      */
-    root?: BoxProps;
+    container?: Omit<TabsProps, 'value'>;
 
     /**
-     * Container props
+     * Add a hidden input and its name
      */
-    container?: Omit<TabsProps, 'value'>;
+    inputName?: string;
+
+    /**
+     * Root props
+     */
+    root?: BoxProps;
 
     /**
      * Tabs
@@ -43,7 +48,7 @@ export interface TabBoxPros extends BoxProps {
  */
 export function TabBox(props: TabBoxPros) {
     // Destruct
-    const { root, container = {}, tabs } = props;
+    const { inputName, root, container = {}, tabs } = props;
     const { onChange, ...rest } = container;
 
     // State
@@ -52,6 +57,9 @@ export function TabBox(props: TabBoxPros) {
     // Layout
     return (
         <React.Fragment>
+            {inputName && (
+                <input type="hidden" name={inputName} value={value} />
+            )}
             <Box {...root}>
                 <Tabs
                     value={value}
@@ -62,12 +70,12 @@ export function TabBox(props: TabBoxPros) {
                     {...rest}
                 >
                     {tabs.map(({ children, panel, ...tabRest }, index) => (
-                        <Tab value={index} {...tabRest} />
+                        <Tab key={index} value={index} {...tabRest} />
                     ))}
                 </Tabs>
             </Box>
             {tabs.map(({ children, panel }, index) => (
-                <Box hidden={value !== index} {...panel}>
+                <Box key={index} hidden={value !== index} {...panel}>
                     {children}
                 </Box>
             ))}

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>
+    );
+}