@etsoo/materialui 1.4.22 → 1.4.24

package/src/MUGlobal.ts

@@ -1,220 +1,213 @@
-import { NumberUtils } from '@etsoo/shared';
-import { Breakpoint, ListItemButtonProps, Theme } from '@mui/material';
-import { Link } from 'react-router-dom';
+import { NumberUtils } from "@etsoo/shared";
+import { Breakpoint, ListItemButtonProps, Theme } from "@mui/material";
+import { Link } from "react-router-dom";
 
 /**
  * Mouse event handler with data
  */
 export type MouseEventWithDataHandler<T> = (
-    event: React.MouseEvent<HTMLDivElement>,
-    data: T
+  event: React.MouseEvent<HTMLDivElement>,
+  data: T
 ) => void;
 
 /**
  * MUGlobal for global configurations
  */
 export class MUGlobal {
-    /**
-     * Search field shrink
-     */
-    static searchFieldShrink: boolean = true;
-
-    /**
-     * Search field size
-     */
-    static searchFieldSize: 'small' | 'medium' = 'small';
-
-    /**
-     * Search field variant
-     */
-    static searchFieldVariant: 'standard' | 'filled' | 'outlined' = 'outlined';
-
-    /**
-     * Input field shrink
-     */
-    static inputFieldShrink: boolean = true;
-
-    /**
-     * Input field size
-     */
-    static inputFieldSize: 'small' | 'medium' = 'medium';
-
-    /**
-     * Input field variant
-     */
-    static inputFieldVariant: 'standard' | 'filled' | 'outlined' = 'outlined';
-
-    /**
-     * TextField variant
-     */
-    static textFieldVariant: 'standard' | 'filled' | 'outlined' = 'filled';
-
-    /**
-     * Page default paddings
-     */
-    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: Link,
-            selected,
-            to: 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
-     * @returns Updated object
-     */
-    static half(input: object) {
-        const newObj = { ...input };
-        Object.entries(newObj).forEach(([key, value]) => {
-            if (typeof value === 'number') {
-                Reflect.set(newObj, key, value / 2.0);
-            }
-        });
-        return newObj;
-    }
-
-    /**
-     * Reverse object number properties, like 5 to -5
-     * @param input Input object
-     * @returns Updated object
-     */
-    static reverse(input: object) {
-        const newObj = { ...input };
-        Object.entries(newObj).forEach(([key, value]) => {
-            if (typeof value === 'number') {
-                Reflect.set(newObj, key, -value);
-            }
-        });
-        return newObj;
-    }
-
-    /**
-     * Update object number properties with adjustment
-     * @param input Input object
-     * @param adjust Adjust value or new size object
-     * @param field Specific field
-     * @returns Updated object
-     */
-    static increase(input: object, adjust: number | object, field?: string) {
-        const newObj = { ...input };
-        Object.entries(newObj).forEach(([key, value]) => {
-            if (typeof value === 'number') {
-                if (field == null || field === key) {
-                    const adjustValue =
-                        typeof adjust === 'number'
-                            ? adjust
-                            : Reflect.get(adjust, key);
-                    if (adjustValue == null || typeof adjustValue !== 'number')
-                        return;
-
-                    Reflect.set(newObj, key, value + adjustValue);
-                }
-            }
-        });
-        return newObj;
-    }
-
-    /**
-     * Adjust size with theme update
-     * @param size Base size
-     * @param adjust Adjustment
-     * @param updateFunc Theme update function
-     * @returns Updated object
-     */
-    static adjustWithTheme(
-        size: number,
-        adjust: object,
-        updateFunc: (value: number) => string
-    ) {
-        const newObj = { ...adjust };
-        Object.entries(newObj).forEach(([key, value]) => {
-            if (typeof value === 'number') {
-                const newValue = NumberUtils.parseWithUnit(updateFunc(value));
-                if (newValue != null) {
-                    Reflect.set(
-                        newObj,
-                        key,
-                        `${size - newValue[0]}${newValue[1]}`
-                    );
-                }
-            }
-        });
-        return newObj;
+  /**
+   * Search field shrink
+   */
+  static searchFieldShrink: boolean = true;
+
+  /**
+   * Search field size
+   */
+  static searchFieldSize: "small" | "medium" = "small";
+
+  /**
+   * Search field variant
+   */
+  static searchFieldVariant: "standard" | "filled" | "outlined" = "outlined";
+
+  /**
+   * Input field shrink
+   */
+  static inputFieldShrink: boolean = true;
+
+  /**
+   * Input field size
+   */
+  static inputFieldSize: "small" | "medium" = "medium";
+
+  /**
+   * Input field variant
+   */
+  static inputFieldVariant: "standard" | "filled" | "outlined" = "outlined";
+
+  /**
+   * TextField variant
+   */
+  static textFieldVariant: "standard" | "filled" | "outlined" = "filled";
+
+  /**
+   * Page default paddings
+   */
+  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));
     }
 
-    /**
-     * Break points defined
-     */
-    static breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
-
-    /**
-     * Get multple medias theme space
-     * Responsive values and Breakpoints as an object
-     * xs = theme.breakpoints.up('xs')
-     * https://mui.com/system/basics/
-     * @param spaces Spaces
-     * @param theme Theme
-     * @returns Result
-     */
-    static getSpace(spaces: object, theme: Theme) {
-        const start = this.breakpoints.length - 1;
-        for (let i = start; i >= 0; i--) {
-            const key = this.breakpoints[i];
-            const value = Reflect.get(spaces, key);
-            if (typeof value === 'number') {
-                const mediaRaw = theme.breakpoints.up(key as Breakpoint);
-                const mediaQuery = mediaRaw.substring(mediaRaw.indexOf('('));
-                if (window.matchMedia(mediaQuery).matches) {
-                    return parseInt(theme.spacing(value), 10);
-                }
-            }
+    return {
+      component: Link,
+      selected,
+      to: 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
+   * @returns Updated object
+   */
+  static half(input: object) {
+    const newObj = { ...input };
+    Object.entries(newObj).forEach(([key, value]) => {
+      if (typeof value === "number") {
+        Reflect.set(newObj, key, value / 2.0);
+      }
+    });
+    return newObj;
+  }
+
+  /**
+   * Reverse object number properties, like 5 to -5
+   * @param input Input object
+   * @returns Updated object
+   */
+  static reverse(input: object) {
+    const newObj = { ...input };
+    Object.entries(newObj).forEach(([key, value]) => {
+      if (typeof value === "number") {
+        Reflect.set(newObj, key, -value);
+      }
+    });
+    return newObj;
+  }
+
+  /**
+   * Update object number properties with adjustment
+   * @param input Input object
+   * @param adjust Adjust value or new size object
+   * @param field Specific field
+   * @returns Updated object
+   */
+  static increase(input: object, adjust: number | object, field?: string) {
+    const newObj = { ...input };
+    Object.entries(newObj).forEach(([key, value]) => {
+      if (typeof value === "number") {
+        if (field == null || field === key) {
+          const adjustValue =
+            typeof adjust === "number" ? adjust : Reflect.get(adjust, key);
+          if (adjustValue == null || typeof adjustValue !== "number") return;
+
+          Reflect.set(newObj, key, value + adjustValue);
         }
-
-        return 0;
+      }
+    });
+    return newObj;
+  }
+
+  /**
+   * Adjust size with theme update
+   * @param size Base size
+   * @param adjust Adjustment
+   * @param updateFunc Theme update function
+   * @returns Updated object
+   */
+  static adjustWithTheme(
+    size: number,
+    adjust: object,
+    updateFunc: (value: number) => string
+  ) {
+    const newObj = { ...adjust };
+    Object.entries(newObj).forEach(([key, value]) => {
+      if (typeof value === "number") {
+        const newValue = NumberUtils.parseWithUnit(updateFunc(value));
+        if (newValue != null) {
+          Reflect.set(newObj, key, `${size - newValue[0]}${newValue[1]}`);
+        }
+      }
+    });
+    return newObj;
+  }
+
+  /**
+   * Break points defined
+   */
+  static breakpoints = ["xs", "sm", "md", "lg", "xl"] as const;
+
+  /**
+   * Get multple medias theme space
+   * Responsive values and Breakpoints as an object
+   * xs = theme.breakpoints.up('xs')
+   * https://mui.com/system/basics/
+   * @param spaces Spaces
+   * @param theme Theme
+   * @returns Result
+   */
+  static getSpace(spaces: object, theme: Theme) {
+    const start = this.breakpoints.length - 1;
+    for (let i = start; i >= 0; i--) {
+      const key = this.breakpoints[i];
+      const value = Reflect.get(spaces, key);
+      if (typeof value === "number") {
+        const mediaRaw = theme.breakpoints.up(key as Breakpoint);
+        const mediaQuery = mediaRaw.substring(mediaRaw.indexOf("("));
+        if (window.matchMedia(mediaQuery).matches) {
+          return parseInt(theme.spacing(value), 10);
+        }
+      }
     }
 
-    /**
-     * Update object number properties with theme
-     * @param input Input object
-     * @param updateFunc Theme update function
-     * @returns Updated object
-     */
-    static updateWithTheme(input: {}, updateFunc: (value: number) => string) {
-        const newObj = { ...input };
-        Object.entries(newObj).forEach(([key, value]) => {
-            if (typeof value === 'number') {
-                Reflect.set(newObj, key, updateFunc(value));
-            }
-        });
-        return newObj;
-    }
+    return 0;
+  }
+
+  /**
+   * Update object number properties with theme
+   * @param input Input object
+   * @param updateFunc Theme update function
+   * @returns Updated object
+   */
+  static updateWithTheme(input: {}, updateFunc: (value: number) => string) {
+    const newObj = { ...input };
+    Object.entries(newObj).forEach(([key, value]) => {
+      if (typeof value === "number") {
+        Reflect.set(newObj, key, updateFunc(value));
+      }
+    });
+    return newObj;
+  }
 }

package/src/MobileListItemRenderer.tsx

@@ -1,8 +1,8 @@
-import { ListItemReact } from '@etsoo/react';
-import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
-import React from 'react';
-import { MoreFab } from './MoreFab';
-import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
+import { ListItemReact } from "@etsoo/react";
+import { Card, CardContent, CardHeader, LinearProgress } from "@mui/material";
+import React from "react";
+import { MoreFab } from "./MoreFab";
+import { ScrollerListExInnerItemRendererProps } from "./ScrollerListEx";
 
 /**
  * Default mobile list item renderer
@@ -12,68 +12,66 @@ import { ScrollerListExInnerItemRendererProps } from './ScrollerListEx';
  * @returns Component
  */
 export function MobileListItemRenderer<T>(
-    { data, itemHeight, margins }: ScrollerListExInnerItemRendererProps<T>,
-    renderer: (
-        data: T
-    ) => [
-        string,
-        string | undefined,
-        React.ReactNode | (ListItemReact | boolean)[],
-        React.ReactNode,
-        React.ReactNode?
-    ]
+  { data, itemHeight, margins }: ScrollerListExInnerItemRendererProps<T>,
+  renderer: (
+    data: T
+  ) => [
+    string,
+    string | undefined,
+    React.ReactNode | (ListItemReact | boolean)[],
+    React.ReactNode,
+    React.ReactNode?
+  ]
 ) {
-    // Loading
-    if (data == null) return <LinearProgress />;
+  // Loading
+  if (data == null) return <LinearProgress />;
 
-    // Elements
-    const [title, subheader, actions, children, cardActions] = renderer(data);
+  // Elements
+  const [title, subheader, actions, children, cardActions] = renderer(data);
 
-    return (
-        <Card
-            sx={{
-                height: itemHeight,
-                ...margins
-            }}
-        >
-            <CardHeader
-                sx={{ paddingBottom: 0.5 }}
-                action={
-                    Array.isArray(actions) ? (
-                        <MoreFab
-                            iconButton
-                            size="small"
-                            anchorOrigin={{
-                                vertical: 'bottom',
-                                horizontal: 'right'
-                            }}
-                            transformOrigin={{
-                                vertical: 'top',
-                                horizontal: 'right'
-                            }}
-                            actions={actions}
-                        />
-                    ) : (
-                        actions
-                    )
-                }
-                title={title}
-                titleTypographyProps={{ variant: 'body2' }}
-                subheader={subheader}
-                subheaderTypographyProps={{ variant: 'caption' }}
+  return (
+    <Card
+      sx={{
+        height: itemHeight,
+        ...margins
+      }}
+    >
+      <CardHeader
+        sx={{ paddingBottom: 0.5 }}
+        action={
+          Array.isArray(actions) ? (
+            <MoreFab
+              iconButton
+              size="small"
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "right"
+              }}
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "right"
+              }}
+              actions={actions}
             />
-            <CardContent
-                sx={{
-                    paddingTop: 0,
-                    paddingBottom:
-                        cardActions == null
-                            ? Reflect.get(margins, 'marginBottom')
-                            : 0
-                }}
-            >
-                {children}
-            </CardContent>
-            {cardActions}
-        </Card>
-    );
+          ) : (
+            actions
+          )
+        }
+        title={title}
+        titleTypographyProps={{ variant: "body2" }}
+        subheader={subheader}
+        subheaderTypographyProps={{ variant: "caption" }}
+      />
+      <CardContent
+        sx={{
+          paddingTop: 0,
+          paddingBottom:
+            cardActions == null ? Reflect.get(margins, "marginBottom") : 0
+        }}
+      >
+        {children}
+      </CardContent>
+      {cardActions}
+    </Card>
+  );
 }

package/src/NotifierPromptProps.ts

@@ -2,23 +2,23 @@
  * Notifier prompt props
  */
 export type NotifierPromptProps = Record<string, any> & {
-    /**
-     * Cancel label
-     */
-    cancelLabel?: string;
+  /**
+   * Cancel label
+   */
+  cancelLabel?: string;
 
-    /**
-     * OK label
-     */
-    okLabel?: string;
+  /**
+   * OK label
+   */
+  okLabel?: string;
 
-    /**
-     * Multiple inputs
-     */
-    inputs: React.ReactNode;
+  /**
+   * Multiple inputs
+   */
+  inputs: React.ReactNode;
 
-    /**
-     * Single type
-     */
-    type?: string;
+  /**
+   * Single type
+   */
+  type?: string;
 };

package/src/PList.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React from "react";
 
 /**
  * Paragraph items list props
  */
 export interface PListProps {
-    /**
-     * List items
-     */
-    items?: string[];
+  /**
+   * List items
+   */
+  items?: string[];
 }
 
 /**
@@ -15,13 +15,13 @@ export interface PListProps {
  * @param items Items
  */
 export function PList(props: PListProps) {
-    const { items } = props;
-    return (
-        <React.Fragment>
-            {items != null &&
-                items.map((item, index) => {
-                    return <p key={index}>{item}</p>;
-                })}
-        </React.Fragment>
-    );
+  const { items } = props;
+  return (
+    <React.Fragment>
+      {items != null &&
+        items.map((item, index) => {
+          return <p key={index}>{item}</p>;
+        })}
+    </React.Fragment>
+  );
 }