@etsoo/materialui 1.4.21 → 1.4.23

package/src/Switch.tsx

@@ -1,31 +1,31 @@
-import React from 'react';
-import { FormControlLabel, FormControlLabelProps } from '@mui/material';
-import MuiCheckbox from '@mui/material/Checkbox';
-import MuiSwitch from '@mui/material/Switch';
+import React from "react";
+import { FormControlLabel, FormControlLabelProps } from "@mui/material";
+import MuiCheckbox from "@mui/material/Checkbox";
+import MuiSwitch from "@mui/material/Switch";
 
 /**
  * Switch props
  */
-export interface SwitchProps extends Omit<FormControlLabelProps, 'control'> {
-    /**
-     * Value, default 'on'
-     */
-    value?: string;
+export interface SwitchProps extends Omit<FormControlLabelProps, "control"> {
+  /**
+   * Value, default 'on'
+   */
+  value?: string;
 
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
+  /**
+   * Is the field read only?
+   */
+  readOnly?: boolean;
 
-    /**
-     * Size
-     */
-    size?: 'small' | 'medium';
+  /**
+   * Size
+   */
+  size?: "small" | "medium";
 
-    /**
-     * Display as Checkbox
-     */
-    checkbox?: boolean;
+  /**
+   * Display as Checkbox
+   */
+  checkbox?: boolean;
 }
 
 /**
@@ -34,61 +34,61 @@ export interface SwitchProps extends Omit<FormControlLabelProps, 'control'> {
  * @returns Component
  */
 export function Switch(props: SwitchProps) {
-    // Destruct
-    const {
-        checked,
-        defaultChecked,
-        defaultValue,
-        onChange,
-        readOnly,
-        size,
-        checkbox = false,
-        value = 'true',
-        ...rest
-    } = props;
+  // Destruct
+  const {
+    checked,
+    defaultChecked,
+    defaultValue,
+    onChange,
+    readOnly,
+    size,
+    checkbox = false,
+    value = "true",
+    ...rest
+  } = props;
 
-    // Checked state
-    const [controlChecked, setControlChecked] = React.useState(
-        checked ?? defaultChecked ?? defaultValue == value
-    );
+  // Checked state
+  const [controlChecked, setControlChecked] = React.useState(
+    checked ?? defaultChecked ?? defaultValue == value
+  );
 
-    React.useEffect(() => {
-        if (checked) setControlChecked(checked);
-    }, [checked]);
+  React.useEffect(() => {
+    if (checked) setControlChecked(checked);
+  }, [checked]);
 
-    // Handle change
-    const handleChange = (
-        event: React.ChangeEvent<HTMLInputElement>,
-        checked: boolean
-    ) => {
-        if (onChange) onChange(event, checked);
-        setControlChecked(checked);
-    };
+  // Handle change
+  const handleChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean
+  ) => {
+    if (onChange) onChange(event, checked);
+    setControlChecked(checked);
+  };
 
-    // Control
-    const control = checkbox ? (
-        <MuiCheckbox
-            readOnly={readOnly}
-            checked={controlChecked}
-            onChange={handleChange}
-            size={size}
-            value={value}
-        />
-    ) : (
-        <MuiSwitch
-            readOnly={readOnly}
-            checked={controlChecked}
-            onChange={handleChange}
-            size={size}
-            value={value}
-        />
-    );
+  // Control
+  const control = checkbox ? (
+    <MuiCheckbox
+      readOnly={readOnly}
+      checked={controlChecked}
+      onChange={handleChange}
+      size={size}
+      value={value}
+    />
+  ) : (
+    <MuiSwitch
+      readOnly={readOnly}
+      checked={controlChecked}
+      onChange={handleChange}
+      size={size}
+      value={value}
+    />
+  );
 
-    // Default state
-    React.useEffect(() => {
-        setControlChecked(controlChecked);
-    }, [controlChecked]);
+  // Default state
+  React.useEffect(() => {
+    setControlChecked(controlChecked);
+  }, [controlChecked]);
 
-    // Layout
-    return <FormControlLabel control={control} {...rest} />;
+  // Layout
+  return <FormControlLabel control={control} {...rest} />;
 }

package/src/TabBox.tsx

@@ -1,61 +1,61 @@
-import { Utils } from '@etsoo/shared';
-import { Box, BoxProps, Tab, TabProps, Tabs, TabsProps } from '@mui/material';
-import React from 'react';
-import { Link } from 'react-router-dom';
+import { Utils } from "@etsoo/shared";
+import { Box, BoxProps, Tab, TabProps, Tabs, TabsProps } from "@mui/material";
+import React from "react";
+import { Link } from "react-router-dom";
 
 /**
  * Tab with box panel props
  */
-export interface TabBoxPanel extends Omit<TabProps, 'value' | 'children'> {
-    /**
-     * Children
-     */
-    children?: ((visible: boolean) => React.ReactNode) | React.ReactNode;
+export interface TabBoxPanel extends Omit<TabProps, "value" | "children"> {
+  /**
+   * Children
+   */
+  children?: ((visible: boolean) => React.ReactNode) | React.ReactNode;
 
-    /**
-     * Panel box props
-     */
-    panel?: Omit<BoxProps, 'hidden'>;
+  /**
+   * Panel box props
+   */
+  panel?: Omit<BoxProps, "hidden">;
 
-    /**
-     * To URL
-     */
-    to?: string;
+  /**
+   * To URL
+   */
+  to?: string;
 }
 
 /**
  * Tabs with box props
  */
 export interface TabBoxPros extends BoxProps {
-    /**
-     * Container props
-     */
-    container?: Omit<TabsProps, 'value'>;
+  /**
+   * Container props
+   */
+  container?: Omit<TabsProps, "value">;
 
-    /**
-     * Default selected index
-     */
-    defaultIndex?: number;
+  /**
+   * Default selected index
+   */
+  defaultIndex?: number;
 
-    /**
-     * Current index
-     */
-    index?: number;
+  /**
+   * Current index
+   */
+  index?: number;
 
-    /**
-     * Add a hidden input and its name
-     */
-    inputName?: string;
+  /**
+   * Add a hidden input and its name
+   */
+  inputName?: string;
 
-    /**
-     * Root props
-     */
-    root?: BoxProps;
+  /**
+   * Root props
+   */
+  root?: BoxProps;
 
-    /**
-     * Tabs
-     */
-    tabs: TabBoxPanel[];
+  /**
+   * Tabs
+   */
+  tabs: TabBoxPanel[];
 }
 
 /**
@@ -64,55 +64,53 @@ export interface TabBoxPros extends BoxProps {
  * @returns Component
  */
 export function TabBox(props: TabBoxPros) {
-    // Destruct
-    const {
-        index,
-        inputName,
-        root,
-        container = {},
-        defaultIndex = 0,
-        tabs
-    } = props;
-    const { onChange, ...rest } = container;
+  // Destruct
+  const {
+    index,
+    inputName,
+    root,
+    container = {},
+    defaultIndex = 0,
+    tabs
+  } = props;
+  const { onChange, ...rest } = container;
 
-    // State
-    const [value, setValue] = React.useState(defaultIndex);
+  // State
+  const [value, setValue] = React.useState(defaultIndex);
 
-    React.useEffect(() => {
-        if (index == null) return;
-        setValue(index);
-    }, [index]);
+  React.useEffect(() => {
+    if (index == null) return;
+    setValue(index);
+  }, [index]);
 
-    // Layout
-    return (
-        <React.Fragment>
-            {inputName && (
-                <input type="hidden" name={inputName} value={value} />
-            )}
-            <Box {...root}>
-                <Tabs
-                    value={value}
-                    onChange={(event, newValue) => {
-                        setValue(newValue);
-                        if (onChange) onChange(event, newValue);
-                    }}
-                    {...rest}
-                >
-                    {tabs.map(({ children, panel, ...tabRest }, index) => (
-                        <Tab
-                            key={index}
-                            value={index}
-                            LinkComponent={tabRest.to ? Link : undefined}
-                            {...tabRest}
-                        />
-                    ))}
-                </Tabs>
-            </Box>
-            {tabs.map(({ children, panel }, index) => (
-                <Box key={index} hidden={value !== index} {...panel}>
-                    {Utils.getResult(children, value === index)}
-                </Box>
-            ))}
-        </React.Fragment>
-    );
+  // Layout
+  return (
+    <React.Fragment>
+      {inputName && <input type="hidden" name={inputName} value={value} />}
+      <Box {...root}>
+        <Tabs
+          value={value}
+          onChange={(event, newValue) => {
+            setValue(newValue);
+            if (onChange) onChange(event, newValue);
+          }}
+          {...rest}
+        >
+          {tabs.map(({ children, panel, ...tabRest }, index) => (
+            <Tab
+              key={index}
+              value={index}
+              LinkComponent={tabRest.to ? Link : undefined}
+              {...tabRest}
+            />
+          ))}
+        </Tabs>
+      </Box>
+      {tabs.map(({ children, panel }, index) => (
+        <Box key={index} hidden={value !== index} {...panel}>
+          {Utils.getResult(children, value === index)}
+        </Box>
+      ))}
+    </React.Fragment>
+  );
 }

package/src/TableEx.tsx

@@ -149,16 +149,11 @@ export function TableEx<
     updateRows(rows);
   };
 
-  var orderByAsc = defaultOrderBy
-    ? columns.find((column) => column.field === defaultOrderBy)?.sortAsc
-    : undefined;
-
   // States
   const stateRefs = React.useRef<GridLoaderStates<T>>({
     queryPaging: {
       currentPage: 0,
       orderBy: defaultOrderBy,
-      orderByAsc,
       batchSize: rowsPerPageLocal
     },
     autoLoad,
@@ -311,7 +306,7 @@ export function TableEx<
 
   // New sort
   const handleSort = (field: string, asc?: boolean) => {
-    reset({ queryPaging: { orderBy: field, orderByAsc: asc } });
+    reset({ queryPaging: { orderBy: { [field]: asc ?? true } } });
   };
 
   // Set items for rerenderer
@@ -330,7 +325,7 @@ export function TableEx<
     selectedItems
   } = state;
 
-  const currentPage = queryPaging.currentPage;
+  const currentPage = queryPaging.currentPage ?? 0;
   const batchSize = queryPaging.batchSize;
 
   // Current page selected items
@@ -405,7 +400,9 @@ export function TableEx<
                 // Sortable
                 let sortLabel: React.ReactNode;
                 if (sortable && field != null) {
-                  const active = queryPaging.orderBy === field;
+                  const active =
+                    queryPaging.orderBy != null &&
+                    queryPaging.orderBy[field] != null;
 
                   sortLabel = (
                     <TableSortLabel

package/src/TooltipClick.tsx

@@ -1,20 +1,20 @@
-import { useDelayedExecutor } from '@etsoo/react';
-import { ClickAwayListener, Tooltip, TooltipProps } from '@mui/material';
-import React from 'react';
+import { useDelayedExecutor } from "@etsoo/react";
+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' | 'disableTouchListener'
-    > {
-    children: (
-        openTooltip: (newTitle?: string) => void
-    ) => React.ReactElement<any, any>;
+  extends Omit<
+    TooltipProps,
+    "children" | "open" | "disableFocusListener" | "disableTouchListener"
+  > {
+  children: (
+    openTooltip: (newTitle?: string) => void
+  ) => React.ReactElement<any, any>;
 
-    disableHoverListener?: boolean;
+  disableHoverListener?: boolean;
 }
 
 /**
@@ -23,62 +23,60 @@ export interface TooltipClickProps
  * @returns Component
  */
 export function TooltipClick(props: TooltipClickProps) {
-    // Destruct
-    // leaveDelay set to 5 seconds to hide the tooltip automatically
-    const {
-        children,
-        disableHoverListener = true,
-        leaveDelay = 5000,
-        onClose,
-        title,
-        ...rest
-    } = props;
+  // Destruct
+  // leaveDelay set to 5 seconds to hide the tooltip automatically
+  const {
+    children,
+    disableHoverListener = true,
+    leaveDelay = 5000,
+    onClose,
+    title,
+    ...rest
+  } = props;
 
-    // State
-    const [localTitle, setTitle] = React.useState(title);
-    const [open, setOpen] = React.useState(false);
+  // State
+  const [localTitle, setTitle] = React.useState(title);
+  const [open, setOpen] = React.useState(false);
 
-    const delayed =
-        leaveDelay > 0
-            ? useDelayedExecutor(() => setOpen(false), leaveDelay)
-            : undefined;
+  const delayed =
+    leaveDelay > 0
+      ? useDelayedExecutor(() => setOpen(false), leaveDelay)
+      : undefined;
 
-    // Callback for open the tooltip
-    const openTooltip = (newTitle?: string) => {
-        setOpen(true);
-        if (newTitle) setTitle(newTitle);
-        delayed?.call();
-    };
+  // Callback for open the tooltip
+  const openTooltip = (newTitle?: string) => {
+    setOpen(true);
+    if (newTitle) setTitle(newTitle);
+    delayed?.call();
+  };
 
-    React.useEffect(() => {
-        return () => {
-            delayed?.clear();
-        };
-    }, []);
+  React.useEffect(() => {
+    return () => {
+      delayed?.clear();
+    };
+  }, []);
 
-    // Layout
-    return (
-        <ClickAwayListener onClickAway={() => setOpen(false)}>
-            <Tooltip
-                PopperProps={{
-                    disablePortal: true
-                }}
-                onClose={(event) => {
-                    setOpen(false);
-                    if (onClose) onClose(event);
-                }}
-                title={localTitle}
-                open={open}
-                disableFocusListener
-                disableTouchListener
-                disableHoverListener={disableHoverListener}
-                onMouseOver={
-                    disableHoverListener ? undefined : () => setOpen(true)
-                }
-                {...rest}
-            >
-                {children(openTooltip)}
-            </Tooltip>
-        </ClickAwayListener>
-    );
+  // Layout
+  return (
+    <ClickAwayListener onClickAway={() => setOpen(false)}>
+      <Tooltip
+        PopperProps={{
+          disablePortal: true
+        }}
+        onClose={(event) => {
+          setOpen(false);
+          if (onClose) onClose(event);
+        }}
+        title={localTitle}
+        open={open}
+        disableFocusListener
+        disableTouchListener
+        disableHoverListener={disableHoverListener}
+        onMouseOver={disableHoverListener ? undefined : () => setOpen(true)}
+        {...rest}
+      >
+        {children(openTooltip)}
+      </Tooltip>
+    </ClickAwayListener>
+  );
 }