@etsoo/react 1.5.72 → 1.5.75

package/__tests__/mu/MUGlobalTests.tsx

@@ -6,6 +6,17 @@ const updateFunc = (value: number) => `${value * 8}px`;
 // Arrange
 const paddings = { sx: 2, sm: 3, key: 'a' };
 
+test('getMenuItem tests', () => {
+    // Assert
+    expect(
+        MUGlobal.getMenuItem('/user/add', '/user/all').selected
+    ).toBeTruthy();
+    expect(MUGlobal.getMenuItem('/user/add', '/user/*').selected).toBeTruthy();
+    expect(
+        MUGlobal.getMenuItem('/user/add', '/user/edit').selected
+    ).toBeFalsy();
+});
+
 test('half tests', () => {
     // Act
     const result = MUGlobal.half(paddings);

package/lib/mu/DnDList.d.ts

@@ -1,8 +1,21 @@
 import { UniqueIdentifier } from '@dnd-kit/core';
 import { DataTypes } from '@etsoo/shared';
+import { Theme } from '@mui/material';
 import React, { CSSProperties } from 'react';
 /**
- * Scroller list forward ref
+ * DnD item default style
+ * @param index Item index
+ * @param isDragging Is dragging
+ * @param theme Theme
+ * @returns Style
+ */
+export declare const DnDItemStyle: (index: number, isDragging: boolean, theme: Theme) => {
+    padding: string;
+    zIndex: string | number;
+    background: string;
+};
+/**
+ * DnD list forward ref
  */
 export interface DnDListRef<D extends {}> {
     /**

package/lib/mu/DnDList.js

@@ -1,6 +1,7 @@
 import { DndContext } from '@dnd-kit/core';
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { useTheme } from '@mui/material';
 import React from 'react';
 function SortableItem(props) {
     // Destruct
@@ -23,6 +24,22 @@ function SortableItem(props) {
     };
     return itemRenderer(nodeRef, actionNodeRef);
 }
+/**
+ * DnD item default style
+ * @param index Item index
+ * @param isDragging Is dragging
+ * @param theme Theme
+ * @returns Style
+ */
+export const DnDItemStyle = (index, isDragging, theme) => ({
+    padding: theme.spacing(1),
+    zIndex: isDragging ? 1 : 'auto',
+    background: isDragging
+        ? theme.palette.primary.light
+        : index % 2 === 0
+            ? theme.palette.grey[100]
+            : theme.palette.grey[50]
+});
 /**
  * DnD (Drag and Drop) sortable list
  * @param props Props
@@ -30,7 +47,13 @@ function SortableItem(props) {
  */
 export function DnDList(props) {
     // Destruct
-    const { getItemStyle, keyField, itemRenderer, labelField, mRef, onChange, onDragEnd } = props;
+    const { keyField, itemRenderer, labelField, mRef, onChange, onDragEnd } = props;
+    let getItemStyle = props.getItemStyle;
+    if (getItemStyle == null) {
+        // Theme
+        const theme = useTheme();
+        getItemStyle = (index, isDragging) => DnDItemStyle(index, isDragging, theme);
+    }
     // States
     const [items, setItems] = React.useState([]);
     const [activeId, setActiveId] = React.useState();
@@ -124,10 +147,7 @@ export function DnDList(props) {
     }, [props.items]);
     return (React.createElement(DndContext, { onDragStart: handleDragStart, onDragEnd: handleDragEnd },
         React.createElement(SortableContext, { items: items, strategy: verticalListSortingStrategy }, items.map((item, index) => {
-            var id = item[keyField];
-            var itemStyle = getItemStyle == null
-                ? undefined
-                : getItemStyle(index, id === activeId);
-            return (React.createElement(SortableItem, { id: id, key: id, style: itemStyle, itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }));
+            const id = item[keyField];
+            return (React.createElement(SortableItem, { id: id, key: id, style: getItemStyle(index, id === activeId), itemRenderer: (nodeRef, actionNodeRef) => itemRenderer(item, index, nodeRef, actionNodeRef) }));
         }))));
 }

package/lib/mu/MUGlobal.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Theme } from '@mui/material';
+import { ListItemButtonProps, Theme } from '@mui/material';
 /**
  * Mouse event handler with data
  */
@@ -43,6 +43,13 @@ export declare class MUGlobal {
         xs: number;
         sm: number;
     };
+    /**
+     * Get menu item props
+     * @param path Current path
+     * @param href Item's href
+     * @returns Props
+     */
+    static getMenuItem(path: string, href: string): ListItemButtonProps<"div", {}>;
     /**
      * Update object number properties with half of it
      * @param input Input object

package/lib/mu/MUGlobal.js

@@ -1,8 +1,41 @@
 import { NumberUtils } from '@etsoo/shared';
+import { RLink } from './RLink';
 /**
  * MUGlobal for global configurations
  */
 export class MUGlobal {
+    /**
+     * Get menu item props
+     * @param path Current path
+     * @param href Item's href
+     * @returns Props
+     */
+    static getMenuItem(path, href) {
+        let selected = false;
+        if (path === href) {
+            // Exact match, most common case
+            selected = true;
+        }
+        else if (href.endsWith('*')) {
+            href = href.slice(0, -1);
+            selected = path.startsWith(href);
+        }
+        else if (href.endsWith('/all')) {
+            selected = path.startsWith(href.slice(0, -3));
+        }
+        return {
+            component: RLink,
+            selected,
+            href,
+            sx: {
+                ...(selected && {
+                    '.MuiListItemIcon-root': {
+                        color: (theme) => theme.palette.primary.main
+                    }
+                })
+            }
+        };
+    }
     /**
      * Update object number properties with half of it
      * @param input Input object

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.72",
+    "version": "1.5.75",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -51,7 +51,7 @@
         "@emotion/css": "^11.10.0",
         "@emotion/react": "^11.10.0",
         "@emotion/styled": "^11.10.0",
-        "@etsoo/appscript": "^1.2.77",
+        "@etsoo/appscript": "^1.2.78",
         "@etsoo/notificationbase": "^1.1.6",
         "@etsoo/shared": "^1.1.45",
         "@mui/icons-material": "^5.8.4",
@@ -75,14 +75,14 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.18.10",
-        "@babel/core": "^7.18.10",
+        "@babel/core": "^7.18.13",
         "@babel/plugin-transform-runtime": "^7.18.10",
         "@babel/preset-env": "^7.18.10",
         "@babel/runtime-corejs3": "^7.18.9",
         "@types/jest": "^28.1.7",
         "@types/react-test-renderer": "^18.0.0",
-        "@typescript-eslint/eslint-plugin": "^5.33.1",
-        "@typescript-eslint/parser": "^5.33.1",
+        "@typescript-eslint/eslint-plugin": "^5.34.0",
+        "@typescript-eslint/parser": "^5.34.0",
         "eslint": "^8.22.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",

package/src/mu/DnDList.tsx

@@ -11,6 +11,7 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { DataTypes } from '@etsoo/shared';
+import { Theme, useTheme } from '@mui/material';
 import React, { CSSProperties } from 'react';
 
 function SortableItem(props: {
@@ -55,7 +56,28 @@ function SortableItem(props: {
 }
 
 /**
- * Scroller list forward ref
+ * DnD item default style
+ * @param index Item index
+ * @param isDragging Is dragging
+ * @param theme Theme
+ * @returns Style
+ */
+export const DnDItemStyle = (
+    index: number,
+    isDragging: boolean,
+    theme: Theme
+) => ({
+    padding: theme.spacing(1),
+    zIndex: isDragging ? 1 : 'auto',
+    background: isDragging
+        ? theme.palette.primary.light
+        : index % 2 === 0
+        ? theme.palette.grey[100]
+        : theme.palette.grey[50]
+});
+
+/**
+ * DnD list forward ref
  */
 export interface DnDListRef<D extends {}> {
     /**
@@ -147,15 +169,16 @@ export function DnDList<
     >
 >(props: DnDListPros<D, K>) {
     // Destruct
-    const {
-        getItemStyle,
-        keyField,
-        itemRenderer,
-        labelField,
-        mRef,
-        onChange,
-        onDragEnd
-    } = props;
+    const { keyField, itemRenderer, labelField, mRef, onChange, onDragEnd } =
+        props;
+
+    let getItemStyle = props.getItemStyle;
+    if (getItemStyle == null) {
+        // Theme
+        const theme = useTheme();
+        getItemStyle = (index, isDragging) =>
+            DnDItemStyle(index, isDragging, theme);
+    }
 
     // States
     const [items, setItems] = React.useState<D[]>([]);
@@ -298,16 +321,12 @@ export function DnDList<
                 strategy={verticalListSortingStrategy}
             >
                 {items.map((item, index) => {
-                    var id = item[keyField] as unknown as UniqueIdentifier;
-                    var itemStyle =
-                        getItemStyle == null
-                            ? undefined
-                            : getItemStyle(index, id === activeId);
+                    const id = item[keyField] as unknown as UniqueIdentifier;
                     return (
                         <SortableItem
                             id={id}
                             key={id}
-                            style={itemStyle}
+                            style={getItemStyle!(index, id === activeId)}
                             itemRenderer={(nodeRef, actionNodeRef) =>
                                 itemRenderer(
                                     item,

package/src/mu/MUGlobal.ts

@@ -1,5 +1,6 @@
 import { NumberUtils } from '@etsoo/shared';
-import { Breakpoint, Theme } from '@mui/material';
+import { Breakpoint, ListItemButtonProps, Theme } from '@mui/material';
+import { RLink } from './RLink';
 
 /**
  * Mouse event handler with data
@@ -53,6 +54,39 @@ export class MUGlobal {
      */
     static pagePaddings = { xs: 2, sm: 3 };
 
+    /**
+     * Get menu item props
+     * @param path Current path
+     * @param href Item's href
+     * @returns Props
+     */
+    static getMenuItem(path: string, href: string) {
+        let selected = false;
+
+        if (path === href) {
+            // Exact match, most common case
+            selected = true;
+        } else if (href.endsWith('*')) {
+            href = href.slice(0, -1);
+            selected = path.startsWith(href);
+        } else if (href.endsWith('/all')) {
+            selected = path.startsWith(href.slice(0, -3));
+        }
+
+        return {
+            component: RLink,
+            selected,
+            href,
+            sx: {
+                ...(selected && {
+                    '.MuiListItemIcon-root': {
+                        color: (theme) => theme.palette.primary.main
+                    }
+                })
+            }
+        } as ListItemButtonProps;
+    }
+
     /**
      * Update object number properties with half of it
      * @param input Input object