@etsoo/materialui 1.4.21 → 1.4.23

package/src/FlexBox.tsx

@@ -1,13 +1,13 @@
-import { Stack, StackProps } from '@mui/material';
-import React from 'react';
+import { Stack, StackProps } from "@mui/material";
+import React from "react";
 
 /**
  * Horizonal box
  * @param props Props
  * @returns Component
  */
-export function HBox(props: Omit<StackProps, 'ref'>) {
-    return <Stack direction="row" width="100%" {...props} />;
+export function HBox(props: Omit<StackProps, "ref">) {
+  return <Stack direction="row" width="100%" {...props} />;
 }
 
 /**
@@ -15,6 +15,6 @@ export function HBox(props: Omit<StackProps, 'ref'>) {
  * @param props Props
  * @returns Component
  */
-export function VBox(props: Omit<StackProps, 'ref'>) {
-    return <Stack direction="column" {...props} />;
+export function VBox(props: Omit<StackProps, "ref">) {
+  return <Stack direction="column" {...props} />;
 }

package/src/GridDataFormat.tsx

@@ -1,7 +1,7 @@
-import { GridColumnRenderProps, GridDataType } from '@etsoo/react';
-import { DateUtils, NumberUtils } from '@etsoo/shared';
-import React from 'react';
-import { DateText } from './texts/DateText';
+import { GridColumnRenderProps, GridDataType } from "@etsoo/react";
+import { DateUtils, NumberUtils } from "@etsoo/shared";
+import React from "react";
+import { DateText } from "./texts/DateText";
 
 /**
  * Grid data format
@@ -11,67 +11,67 @@ import { DateText } from './texts/DateText';
  * @returns Result
  */
 export function GridDataFormat(
-    data: unknown,
-    type: GridDataType,
-    renderProps?: GridColumnRenderProps
+  data: unknown,
+  type: GridDataType,
+  renderProps?: GridColumnRenderProps
 ): React.ReactNode {
-    // Null
-    if (data == null) return undefined;
+  // Null
+  if (data == null) return undefined;
 
-    // For date time
-    // Conversion if necessary
-    if (type === GridDataType.Date || type === GridDataType.DateTime) {
-        const dateValue =
-            data instanceof Date
-                ? data
-                : typeof data === 'number' || typeof data === 'string'
-                ? new Date(data)
-                : undefined;
+  // For date time
+  // Conversion if necessary
+  if (type === GridDataType.Date || type === GridDataType.DateTime) {
+    const dateValue =
+      data instanceof Date
+        ? data
+        : typeof data === "number" || typeof data === "string"
+        ? new Date(data)
+        : undefined;
 
-        if (dateValue == null) return undefined;
+    if (dateValue == null) return undefined;
 
-        const option = type === GridDataType.DateTime ? 'ds' : 'd';
+    const option = type === GridDataType.DateTime ? "ds" : "d";
 
-        const nearDays = renderProps?.nearDays;
-        if (nearDays != null) {
-            return (
-                <DateText
-                    value={dateValue}
-                    locale={renderProps?.culture}
-                    timeZone={renderProps?.timeZone}
-                    options={option}
-                    nearDays={nearDays}
-                />
-            );
-        }
-
-        return DateUtils.format(
-            dateValue,
-            renderProps?.culture,
-            option,
-            renderProps?.timeZone
-        );
+    const nearDays = renderProps?.nearDays;
+    if (nearDays != null) {
+      return (
+        <DateText
+          value={dateValue}
+          locale={renderProps?.culture}
+          timeZone={renderProps?.timeZone}
+          options={option}
+          nearDays={nearDays}
+        />
+      );
     }
 
-    // For numbers
-    if (typeof data === 'number') {
-        if (type === GridDataType.Money || type === GridDataType.IntMoney)
-            return NumberUtils.formatMoney(
-                data,
-                renderProps?.currency,
-                renderProps?.culture,
-                type === GridDataType.IntMoney,
-                renderProps?.numberFormatOptions
-            );
-        else
-            return NumberUtils.format(
-                data,
-                renderProps?.culture,
-                renderProps?.numberFormatOptions
-            );
-    }
+    return DateUtils.format(
+      dateValue,
+      renderProps?.culture,
+      option,
+      renderProps?.timeZone
+    );
+  }
+
+  // For numbers
+  if (typeof data === "number") {
+    if (type === GridDataType.Money || type === GridDataType.IntMoney)
+      return NumberUtils.formatMoney(
+        data,
+        renderProps?.currency,
+        renderProps?.culture,
+        type === GridDataType.IntMoney,
+        renderProps?.numberFormatOptions
+      );
+    else
+      return NumberUtils.format(
+        data,
+        renderProps?.culture,
+        renderProps?.numberFormatOptions
+      );
+  }
 
-    if (typeof data === 'string') return data;
+  if (typeof data === "string") return data;
 
-    return `${data}`;
+  return `${data}`;
 }

package/src/GridUtils.ts

@@ -73,7 +73,8 @@ export namespace GridUtils {
    */
   export function getUpdateRowsHandler<T extends object>(cacheKey?: string) {
     return (rows: T[], state: GridLoaderStates<T>) => {
-      if (state.queryPaging.currentPage > 0 && cacheKey) {
+      const page = state.queryPaging.currentPage ?? 0;
+      if (page > 0 && cacheKey) {
         const data: GridDataCacheType<T> = {
           rows,
           state,

package/src/ListItemRightIcon.tsx

@@ -1,9 +1,9 @@
-import { ListItemIcon, styled } from '@mui/material';
+import { ListItemIcon, styled } from "@mui/material";
 
 /**
  * List item right icon component
  */
 export const ListItemRightIcon = styled(ListItemIcon)(({ theme }) => ({
-    minWidth: '20px!important',
-    paddingLeft: theme.spacing(2)
+  minWidth: "20px!important",
+  paddingLeft: theme.spacing(2)
 })) as typeof ListItemIcon;

package/src/LoadingButton.tsx

@@ -1,19 +1,19 @@
 import {
-    Button,
-    ButtonProps,
-    CircularProgress,
-    CircularProgressProps
-} from '@mui/material';
-import React from 'react';
+  Button,
+  ButtonProps,
+  CircularProgress,
+  CircularProgressProps
+} from "@mui/material";
+import React from "react";
 
 /**
  * Loading button props
  */
 export type LoadingButtonProps = ButtonProps & {
-    /**
-     * Loading icon props
-     */
-    loadingIconProps?: CircularProgressProps;
+  /**
+   * Loading icon props
+   */
+  loadingIconProps?: CircularProgressProps;
 };
 
 /**
@@ -21,55 +21,55 @@ export type LoadingButtonProps = ButtonProps & {
  * @param props Props
  */
 export function LoadingButton(props: LoadingButtonProps) {
-    // Destruct
-    const { endIcon, loadingIconProps = {}, onClick, ...rest } = props;
+  // Destruct
+  const { endIcon, loadingIconProps = {}, onClick, ...rest } = props;
 
-    // Default size
-    loadingIconProps.size ??= 12;
+  // Default size
+  loadingIconProps.size ??= 12;
 
-    // State
-    // https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state
-    const [loading, setLoading] = React.useState(false);
+  // State
+  // https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state
+  const [loading, setLoading] = React.useState(false);
 
-    // Icon
-    const localEndIcon = loading ? (
-        <CircularProgress {...loadingIconProps} />
-    ) : (
-        endIcon
-    );
+  // Icon
+  const localEndIcon = loading ? (
+    <CircularProgress {...loadingIconProps} />
+  ) : (
+    endIcon
+  );
 
-    // Check if the component is mounted
-    const isMounted = React.useRef(true);
+  // Check if the component is mounted
+  const isMounted = React.useRef(true);
 
-    React.useEffect(() => {
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
+  React.useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
 
-    // Layout
-    return (
-        <Button
-            disabled={loading}
-            endIcon={localEndIcon}
-            onClick={async (event) => {
-                if (onClick) {
-                    // Update state
-                    setLoading(true);
+  // Layout
+  return (
+    <Button
+      disabled={loading}
+      endIcon={localEndIcon}
+      onClick={async (event) => {
+        if (onClick) {
+          // Update state
+          setLoading(true);
 
-                    // https://stackoverflow.com/questions/38508420/how-to-know-if-a-function-is-async
-                    // const AsyncFunction = (async () => {}).constructor;
-                    // onClick instanceof AsyncFunction
-                    await onClick(event);
+          // https://stackoverflow.com/questions/38508420/how-to-know-if-a-function-is-async
+          // const AsyncFunction = (async () => {}).constructor;
+          // onClick instanceof AsyncFunction
+          await onClick(event);
 
-                    // Warning: Can't perform a React state update on an unmounted component
-                    // It's necessary to check the component is mounted now
-                    if (isMounted.current) {
-                        setLoading(false);
-                    }
-                }
-            }}
-            {...rest}
-        />
-    );
+          // Warning: Can't perform a React state update on an unmounted component
+          // It's necessary to check the component is mounted now
+          if (isMounted.current) {
+            setLoading(false);
+          }
+        }
+      }}
+      {...rest}
+    />
+  );
 }