@etsoo/react 1.4.76 → 1.4.77

package/lib/app/Utils.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * React utils
  */
@@ -8,6 +9,12 @@ export declare namespace Utils {
      * @returns Formatted value
      */
     function formatInputValue(value: unknown): string | number | any[] | undefined;
+    /**
+     * Is safe click
+     * @param event Mouse event
+     * @returns Result
+     */
+    function isSafeClick(event: React.MouseEvent<HTMLElement>): boolean;
     /**
      * Trigger input change event
      * @param input Form input

package/lib/app/Utils.js

@@ -20,6 +20,32 @@ export var Utils;
         return String(value);
     }
     Utils.formatInputValue = formatInputValue;
+    /**
+     * Is safe click
+     * @param event Mouse event
+     * @returns Result
+     */
+    function isSafeClick(event) {
+        // No target
+        // HTMLElement <= Element, SVGElement <= Element
+        if (!(event.target instanceof Element))
+            return true;
+        // Outside of the currentTarget
+        let target = event.target;
+        if (!event.currentTarget.contains(target))
+            return false;
+        while (target != null && target != event.currentTarget) {
+            const nodeName = target.nodeName.toUpperCase();
+            if (nodeName === 'INPUT' ||
+                nodeName === 'BUTTON' ||
+                nodeName === 'A' ||
+                target.hasAttribute('onClick'))
+                return false;
+            target = target.parentElement;
+        }
+        return true;
+    }
+    Utils.isSafeClick = isSafeClick;
     /**
      * Trigger input change event
      * @param input Form input

package/lib/components/GridColumn.d.ts

@@ -123,7 +123,7 @@ export interface GridColumn<T> {
     /**
      * The column identifier. It's used to map with row data
      */
-    field?: string;
+    field?: string & keyof T;
     /**
      * The title of the column rendered in the column header cell
      */

package/lib/mu/DataGridEx.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { GridColumn } from '../components/GridColumn';
 import { GridLoaderStates } from '../components/GridLoader';
 import { ScrollerGridProps } from '../components/ScrollerGrid';
+import { MouseEventWithDataHandler } from './MUGlobal';
 /**
  * Footer item renderer props
  */
@@ -55,6 +56,14 @@ export interface DataGridExProps<T extends Record<string, any>> extends Omit<Scr
      * Hover color
      */
     hoverColor?: string;
+    /**
+     * Double click handler
+     */
+    onDoubleClick?: MouseEventWithDataHandler<T>;
+    /**
+     * Click handler
+     */
+    onClick?: MouseEventWithDataHandler<T>;
     /**
      * Selectable to support hover over and out effect and row clickable
      * @default true

package/lib/mu/DataGridEx.js

@@ -126,7 +126,7 @@ export function DataGridEx(props) {
         })));
     }
     // Destruct
-    const { alternatingColors = [theme.palette.grey[100], undefined], borderRowsCount, bottomHeight = 53, checkable = false, className, columns, defaultOrderBy, height, headerHeight = 56, headerRenderer = defaultHeaderRenderer, footerRenderer = defaultFooterRenderer, footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer, hideFooter = false, hoverColor = '#f6f9fb', idField = 'id', mRef = React.createRef(), selectable = true, selectedColor = '#edf4fb', width, ...rest } = props;
+    const { alternatingColors = [theme.palette.grey[100], undefined], borderRowsCount, bottomHeight = 53, checkable = false, className, columns, defaultOrderBy, height, headerHeight = 56, headerRenderer = defaultHeaderRenderer, footerRenderer = defaultFooterRenderer, footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer, hideFooter = false, hoverColor = '#f6f9fb', idField = 'id', mRef = React.createRef(), onClick, onDoubleClick, selectable = true, selectedColor = '#edf4fb', width, ...rest } = props;
     if (checkable) {
         const cbColumn = {
             field: 'selected',
@@ -261,7 +261,7 @@ export function DataGridEx(props) {
             cellProps,
             renderProps
         });
-        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 },
+        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, onClick: (event) => onClick && data != null && onClick(event, data), onDoubleClick: (event) => onDoubleClick && data != null && onDoubleClick(event, data) },
             React.createElement(Box, { ...cellProps, onMouseEnter: handleMouseEnter }, child)));
     };
     // Column width calculator

package/lib/mu/MUGlobal.d.ts

@@ -1,4 +1,12 @@
+/// <reference types="react" />
 import { Theme } from '@mui/material';
+/**
+ * Mouse event handler with data
+ */
+export declare type MouseEventWithDataHandler<T> = (event: React.MouseEvent<HTMLDivElement>, data: T) => void;
+/**
+ * MUGlobal for global configurations
+ */
 export declare class MUGlobal {
     /**
      * Search field shrink

package/lib/mu/MUGlobal.js

@@ -1,4 +1,7 @@
 import { NumberUtils } from '@etsoo/shared';
+/**
+ * MUGlobal for global configurations
+ */
 export class MUGlobal {
     /**
      * Update object number properties with half of it

package/lib/mu/ResponsibleContainer.d.ts

@@ -72,6 +72,10 @@ export interface ResponsibleContainerProps<T extends {}, F extends DataTypes.Bas
      * Pull to refresh data
      */
     pullToRefresh?: boolean;
+    /**
+     * Quick action for double click or click under mobile
+     */
+    quickAction?: (data: T) => void;
     /**
      * Size ready to read miliseconds span
      */

package/lib/mu/ResponsibleContainer.js

@@ -1,6 +1,7 @@
 import { Box, Stack } from '@mui/material';
 import React from 'react';
 import { Labels } from '../app/Labels';
+import { Utils } from '../app/Utils';
 import { GridDataGet } from '../components/GridLoader';
 import useCombinedRefs from '../uses/useCombinedRefs';
 import { useDimensions } from '../uses/useDimensions';
@@ -24,7 +25,7 @@ function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, sizeReadyMiliseconds = 0, ...rest } = props;
+    const { adjustHeight, columns, containerBoxSx = defaultContainerBoxSx, dataGridMinWidth = Math.max(576, DataGridExCalColumns(columns).total), elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -106,7 +107,7 @@ export function ResponsibleContainer(props) {
             delete rest.itemRenderer;
             return [
                 React.createElement(Box, { className: "DataGridBox" },
-                    React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, outerRef: (element) => {
+                    React.createElement(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), outerRef: (element) => {
                             if (element != null && elementReady)
                                 elementReady(element, true);
                         }, columns: columns, ...rest })),
@@ -124,7 +125,9 @@ export function ResponsibleContainer(props) {
         delete rest.selectable;
         return [
             React.createElement(Box, { className: "ListBox", sx: { height: heightLocal } },
-                React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, oRef: (element) => {
+                React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction &&
+                        Utils.isSafeClick(event) &&
+                        quickAction(data), oRef: (element) => {
                         if (element != null && elementReady)
                             elementReady(element, false);
                     }, ...rest })),

package/lib/mu/ScrollerListEx.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
 import { ScrollerListProps } from '../components/ScrollerList';
+import { MouseEventWithDataHandler } from './MUGlobal';
 /**
  * Extended ScrollerList inner item renderer props
  */
@@ -53,6 +54,14 @@ export interface ScrollerListExProps<T> extends Omit<ScrollerListProps<T>, 'item
      * Item size, a function indicates its a variable size list
      */
     itemSize: ScrollerListExItemSize;
+    /**
+     * Double click handler
+     */
+    onDoubleClick?: MouseEventWithDataHandler<T>;
+    /**
+     * Click handler
+     */
+    onClick?: MouseEventWithDataHandler<T>;
     /**
      * On items select change
      */

package/lib/mu/ScrollerListEx.js

@@ -66,7 +66,7 @@ const defaultMargin = (margin, isNarrow) => {
     };
 };
 // Default itemRenderer
-function defaultItemRenderer({ index, innerItemRenderer, data, onMouseDown, selected, style, itemHeight, space, margins }) {
+function defaultItemRenderer({ index, innerItemRenderer, data, onMouseDown, selected, style, itemHeight, onClick, onDoubleClick, space, margins }) {
     // Child
     const child = innerItemRenderer({
         index,
@@ -81,7 +81,7 @@ function defaultItemRenderer({ index, innerItemRenderer, data, onMouseDown, sele
     if (selected)
         rowClass += ` ${selectedClassName}`;
     // Layout
-    return (React.createElement("div", { className: rowClass, style: style, onMouseDown: (event) => onMouseDown(event.currentTarget, data) }, child));
+    return (React.createElement("div", { className: rowClass, style: style, onMouseDown: (event) => onMouseDown(event.currentTarget, data), onClick: (event) => onClick && onClick(event, data), onDoubleClick: (event) => onDoubleClick && onDoubleClick(event, data) }, child));
 }
 /**
  * Extended ScrollerList
@@ -118,12 +118,14 @@ export function ScrollerListEx(props) {
             itemHeight,
             innerItemRenderer,
             onMouseDown,
+            onClick,
+            onDoubleClick,
             space,
             margins,
             selected: isSelected(itemProps.data),
             ...itemProps
         });
-    }, onSelectChange, selectedColor = '#edf4fb', ...rest } = props;
+    }, onClick, onDoubleClick, onSelectChange, selectedColor = '#edf4fb', ...rest } = props;
     // Theme
     const theme = useTheme();
     // Cache calculation

package/lib/mu/pages/ResponsivePageProps.d.ts

@@ -32,4 +32,8 @@ export interface ResponsePageProps<T, F extends DataTypes.BasicTemplate> extends
      * Pull to refresh data
      */
     pullToRefresh?: boolean;
+    /**
+     * Quick action for double click or click under mobile
+     */
+    quickAction?: (data: T) => void;
 }

package/package.json

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

package/src/app/Utils.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 /**
  * React utils
  */
@@ -19,6 +21,36 @@ export namespace Utils {
         return String(value);
     }
 
+    /**
+     * Is safe click
+     * @param event Mouse event
+     * @returns Result
+     */
+    export function isSafeClick(event: React.MouseEvent<HTMLElement>) {
+        // No target
+        // HTMLElement <= Element, SVGElement <= Element
+        if (!(event.target instanceof Element)) return true;
+
+        // Outside of the currentTarget
+        let target: Element | null = event.target;
+        if (!event.currentTarget.contains(target)) return false;
+
+        while (target != null && target != event.currentTarget) {
+            const nodeName = target.nodeName.toUpperCase();
+            if (
+                nodeName === 'INPUT' ||
+                nodeName === 'BUTTON' ||
+                nodeName === 'A' ||
+                target.hasAttribute('onClick')
+            )
+                return false;
+
+            target = target.parentElement;
+        }
+
+        return true;
+    }
+
     /**
      * Trigger input change event
      * @param input Form input

package/src/components/GridColumn.ts

@@ -160,7 +160,7 @@ export interface GridColumn<T> {
     /**
      * The column identifier. It's used to map with row data
      */
-    field?: string;
+    field?: string & keyof T;
 
     /**
      * The title of the column rendered in the column header cell

package/src/mu/DataGridEx.tsx

@@ -25,6 +25,7 @@ import {
 } from '../components/ScrollerGrid';
 import useCombinedRefs from '../uses/useCombinedRefs';
 import { DataGridRenderers } from './DataGridRenderers';
+import { MouseEventWithDataHandler } from './MUGlobal';
 
 /**
  * Footer item renderer props
@@ -98,6 +99,16 @@ export interface DataGridExProps<T extends Record<string, any>>
      */
     hoverColor?: string;
 
+    /**
+     * Double click handler
+     */
+    onDoubleClick?: MouseEventWithDataHandler<T>;
+
+    /**
+     * Click handler
+     */
+    onClick?: MouseEventWithDataHandler<T>;
+
     /**
      * Selectable to support hover over and out effect and row clickable
      * @default true
@@ -351,6 +362,8 @@ export function DataGridEx<T extends Record<string, any>>(
         hoverColor = '#f6f9fb',
         idField = 'id',
         mRef = React.createRef(),
+        onClick,
+        onDoubleClick,
         selectable = true,
         selectedColor = '#edf4fb',
         width,
@@ -567,6 +580,12 @@ export function DataGridEx<T extends Record<string, any>>(
                 }
                 onMouseOver={selectable ? handleMouseOver : undefined}
                 onMouseOut={selectable ? handleMouseOut : undefined}
+                onClick={(event) =>
+                    onClick && data != null && onClick(event, data)
+                }
+                onDoubleClick={(event) =>
+                    onDoubleClick && data != null && onDoubleClick(event, data)
+                }
             >
                 <Box {...cellProps} onMouseEnter={handleMouseEnter}>
                     {child}

package/src/mu/MUGlobal.ts

@@ -1,6 +1,17 @@
 import { NumberUtils } from '@etsoo/shared';
 import { Breakpoint, Theme } from '@mui/material';
 
+/**
+ * Mouse event handler with data
+ */
+export type MouseEventWithDataHandler<T> = (
+    event: React.MouseEvent<HTMLDivElement>,
+    data: T
+) => void;
+
+/**
+ * MUGlobal for global configurations
+ */
 export class MUGlobal {
     /**
      * Search field shrink

package/src/mu/ResponsibleContainer.tsx

@@ -3,6 +3,7 @@ import { Box, Stack, SxProps, Theme } from '@mui/material';
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
 import { Labels } from '../app/Labels';
+import { Utils } from '../app/Utils';
 import { GridColumn } from '../components/GridColumn';
 import {
     GridDataGet,
@@ -125,6 +126,11 @@ export interface ResponsibleContainerProps<
      */
     pullToRefresh?: boolean;
 
+    /**
+     * Quick action for double click or click under mobile
+     */
+    quickAction?: (data: T) => void;
+
     /**
      * Size ready to read miliseconds span
      */
@@ -173,6 +179,7 @@ export function ResponsibleContainer<
         mRef,
         paddings = MUGlobal.pagePaddings,
         pullToRefresh = true,
+        quickAction,
         sizeReadyMiliseconds = 0,
         ...rest
     } = props;
@@ -285,6 +292,9 @@ export function ResponsibleContainer<
                         width={rect.width}
                         loadData={localLoadData}
                         mRef={mRefs}
+                        onDoubleClick={(_, data) =>
+                            quickAction && quickAction(data)
+                        }
                         outerRef={(element?: HTMLDivElement) => {
                             if (element != null && elementReady)
                                 elementReady(element, true);
@@ -314,6 +324,11 @@ export function ResponsibleContainer<
                     height={heightLocal}
                     loadData={localLoadData}
                     mRef={mRefs}
+                    onClick={(event, data) =>
+                        quickAction &&
+                        Utils.isSafeClick(event) &&
+                        quickAction(data)
+                    }
                     oRef={(element) => {
                         if (element != null && elementReady)
                             elementReady(element, false);

package/src/mu/ScrollerListEx.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '@mui/material';
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
 import { ScrollerList, ScrollerListProps } from '../components/ScrollerList';
-import { MUGlobal } from './MUGlobal';
+import { MouseEventWithDataHandler, MUGlobal } from './MUGlobal';
 
 // Scroll bar size
 const scrollbarSize = 16;
@@ -146,6 +146,16 @@ export interface ScrollerListExProps<T>
      */
     itemSize: ScrollerListExItemSize;
 
+    /**
+     * Double click handler
+     */
+    onDoubleClick?: MouseEventWithDataHandler<T>;
+
+    /**
+     * Click handler
+     */
+    onClick?: MouseEventWithDataHandler<T>;
+
     /**
      * On items select change
      */
@@ -175,6 +185,16 @@ interface defaultItemRendererProps<T> extends ListChildComponentProps<T> {
      */
     itemHeight: number;
 
+    /**
+     * Double click handler
+     */
+    onDoubleClick?: MouseEventWithDataHandler<T>;
+
+    /**
+     * Click handler
+     */
+    onClick?: MouseEventWithDataHandler<T>;
+
     /**
      * Item space
      */
@@ -200,6 +220,8 @@ function defaultItemRenderer<T>({
     selected,
     style,
     itemHeight,
+    onClick,
+    onDoubleClick,
     space,
     margins
 }: defaultItemRendererProps<T>) {
@@ -223,6 +245,10 @@ function defaultItemRenderer<T>({
             className={rowClass}
             style={style}
             onMouseDown={(event) => onMouseDown(event.currentTarget, data)}
+            onClick={(event) => onClick && onClick(event, data)}
+            onDoubleClick={(event) =>
+                onDoubleClick && onDoubleClick(event, data)
+            }
         >
             {child}
         </div>
@@ -282,12 +308,16 @@ export function ScrollerListEx<T extends Record<string, unknown>>(
                 itemHeight,
                 innerItemRenderer,
                 onMouseDown,
+                onClick,
+                onDoubleClick,
                 space,
                 margins,
                 selected: isSelected(itemProps.data),
                 ...itemProps
             });
         },
+        onClick,
+        onDoubleClick,
         onSelectChange,
         selectedColor = '#edf4fb',
         ...rest

package/src/mu/pages/ResponsivePageProps.ts

@@ -46,4 +46,9 @@ export interface ResponsePageProps<T, F extends DataTypes.BasicTemplate>
      * Pull to refresh data
      */
     pullToRefresh?: boolean;
+
+    /**
+     * Quick action for double click or click under mobile
+     */
+    quickAction?: (data: T) => void;
 }