@etsoo/materialui 1.4.22 → 1.4.24

package/src/ProgressCount.tsx

@@ -1,53 +1,53 @@
 import {
-    Box,
-    CircularProgress,
-    LinearProgress,
-    Typography
-} from '@mui/material';
-import React from 'react';
+  Box,
+  CircularProgress,
+  LinearProgress,
+  Typography
+} from "@mui/material";
+import React from "react";
 
 /**
  * Process count props
  */
 export interface ProgressCountProps {
-    /**
-     * Is countdown or opposite
-     * @default 'true'
-     */
-    countdown?: boolean;
-
-    /**
-     * Is linear or circular
-     * @default 'true'
-     */
-    linear?: boolean;
-
-    /**
-     * Min width
-     * @default 36
-     */
-    minWidth?: number;
-
-    /**
-     * On complete callback, return false will stop it
-     */
-    onComplete?: () => boolean;
-
-    /**
-     * On progress callback
-     */
-    onProgress?: (value: number) => void;
-
-    /**
-     * Seconds for count
-     */
-    seconds: number;
-
-    /**
-     * Value unit, like 's' or '%'
-     * @default ''
-     */
-    valueUnit?: string;
+  /**
+   * Is countdown or opposite
+   * @default 'true'
+   */
+  countdown?: boolean;
+
+  /**
+   * Is linear or circular
+   * @default 'true'
+   */
+  linear?: boolean;
+
+  /**
+   * Min width
+   * @default 36
+   */
+  minWidth?: number;
+
+  /**
+   * On complete callback, return false will stop it
+   */
+  onComplete?: () => boolean;
+
+  /**
+   * On progress callback
+   */
+  onProgress?: (value: number) => void;
+
+  /**
+   * Seconds for count
+   */
+  seconds: number;
+
+  /**
+   * Value unit, like 's' or '%'
+   * @default ''
+   */
+  valueUnit?: string;
 }
 
 /**
@@ -56,111 +56,107 @@ export interface ProgressCountProps {
  * @returns Component
  */
 export function ProgressCount(props: ProgressCountProps) {
-    // Destruct
-    const {
-        countdown = true,
-        linear = true,
-        minWidth = 36,
-        onComplete,
-        onProgress,
-        seconds,
-        valueUnit = ''
-    } = props;
-
-    // Progress value
-    const [value, setValue] = React.useState(countdown ? seconds : 0);
-
-    // Variant
-    const [variant, setVariant] = React.useState<
-        'determinate' | 'indeterminate'
-    >('determinate');
-
-    // Progress value
-    const progressValue = (100.0 * value) / seconds;
-
-    React.useEffect(() => {
-        const timer = setInterval(() => {
-            setValue((prev) => {
-                const newValue = countdown
-                    ? prev === 0
-                        ? seconds
-                        : prev - 1
-                    : prev === seconds
-                    ? 0
-                    : prev + 1;
-
-                if (countdown) {
-                    if (newValue === 0) {
-                        if (onComplete) {
-                            const result = onComplete();
-                            // Finish
-                            if (result === false) {
-                                clearInterval(timer);
-                                setVariant('indeterminate');
-                            }
-                        }
-                    }
-                } else {
-                    if (newValue === seconds) {
-                        if (onComplete) {
-                            const result = onComplete();
-                            // Finish
-                            if (result === false) {
-                                clearInterval(timer);
-                                setVariant('indeterminate');
-                            }
-                        }
-                    }
-                }
-
-                if (onProgress) onProgress(newValue);
-
-                return newValue;
-            });
-        }, 1000);
-        return () => {
-            clearInterval(timer);
-        };
-    }, []);
-
-    if (linear)
-        return (
-            <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-                <Box sx={{ width: '100%', mr: 1 }}>
-                    <LinearProgress variant={variant} value={progressValue} />
-                </Box>
-                <Box sx={{ minWidth }}>
-                    <Typography
-                        variant="body2"
-                        color="text.secondary"
-                    >{`${value}${valueUnit}`}</Typography>
-                </Box>
-            </Box>
-        );
-
+  // Destruct
+  const {
+    countdown = true,
+    linear = true,
+    minWidth = 36,
+    onComplete,
+    onProgress,
+    seconds,
+    valueUnit = ""
+  } = props;
+
+  // Progress value
+  const [value, setValue] = React.useState(countdown ? seconds : 0);
+
+  // Variant
+  const [variant, setVariant] = React.useState<"determinate" | "indeterminate">(
+    "determinate"
+  );
+
+  // Progress value
+  const progressValue = (100.0 * value) / seconds;
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setValue((prev) => {
+        const newValue = countdown
+          ? prev === 0
+            ? seconds
+            : prev - 1
+          : prev === seconds
+          ? 0
+          : prev + 1;
+
+        if (countdown) {
+          if (newValue === 0) {
+            if (onComplete) {
+              const result = onComplete();
+              // Finish
+              if (result === false) {
+                clearInterval(timer);
+                setVariant("indeterminate");
+              }
+            }
+          }
+        } else {
+          if (newValue === seconds) {
+            if (onComplete) {
+              const result = onComplete();
+              // Finish
+              if (result === false) {
+                clearInterval(timer);
+                setVariant("indeterminate");
+              }
+            }
+          }
+        }
+
+        if (onProgress) onProgress(newValue);
+
+        return newValue;
+      });
+    }, 1000);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  if (linear)
     return (
-        <Box sx={{ position: 'relative', display: 'inline-flex' }}>
-            <CircularProgress variant={variant} value={progressValue} />
-            <Box
-                sx={{
-                    top: 0,
-                    left: 0,
-                    bottom: 0,
-                    right: 0,
-                    position: 'absolute',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center'
-                }}
-            >
-                <Typography
-                    variant="caption"
-                    component="div"
-                    color="text.secondary"
-                >
-                    {`${value}${valueUnit}`}
-                </Typography>
-            </Box>
+      <Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
+        <Box sx={{ width: "100%", mr: 1 }}>
+          <LinearProgress variant={variant} value={progressValue} />
+        </Box>
+        <Box sx={{ minWidth }}>
+          <Typography
+            variant="body2"
+            color="text.secondary"
+          >{`${value}${valueUnit}`}</Typography>
         </Box>
+      </Box>
     );
+
+  return (
+    <Box sx={{ position: "relative", display: "inline-flex" }}>
+      <CircularProgress variant={variant} value={progressValue} />
+      <Box
+        sx={{
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          position: "absolute",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }}
+      >
+        <Typography variant="caption" component="div" color="text.secondary">
+          {`${value}${valueUnit}`}
+        </Typography>
+      </Box>
+    </Box>
+  );
 }

package/src/RegionsRQ.ts

@@ -0,0 +1,26 @@
+export type RegionsRQ = {
+  /**
+   * Country id
+   */
+  id?: string;
+
+  /**
+   * Favored country ids from top to bottom
+   */
+  favoredIds?: string[];
+
+  /**
+   * Items count to query
+   */
+  items?: number;
+
+  /**
+   * Filter keyword
+   */
+  keyword?: string;
+
+  /**
+   * Cultrue
+   */
+  culture?: string;
+};

package/src/SearchField.tsx

@@ -1,21 +1,21 @@
-import { useDelayedExecutor } from '@etsoo/react';
-import { TextField, TextFieldProps } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from './MUGlobal';
+import { useDelayedExecutor } from "@etsoo/react";
+import { TextField, TextFieldProps } from "@mui/material";
+import React from "react";
+import { MUGlobal } from "./MUGlobal";
 
 /**
  * Search field props
  */
 export type SearchFieldProps = TextFieldProps & {
-    /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
-     */
-    changeDelay?: number;
+  /**
+   * Change delay (ms) to avoid repeatly dispatch onChange
+   */
+  changeDelay?: number;
 
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
+  /**
+   * Is the field read only?
+   */
+  readOnly?: boolean;
 };
 
 /**
@@ -24,59 +24,59 @@ export type SearchFieldProps = TextFieldProps & {
  * @returns Component
  */
 export function SearchField(props: SearchFieldProps) {
-    // Destruct
-    const {
-        changeDelay,
-        InputLabelProps = {},
-        InputProps = {},
-        onChange,
-        readOnly,
-        size = MUGlobal.searchFieldSize,
-        variant = MUGlobal.searchFieldVariant,
-        ...rest
-    } = props;
+  // Destruct
+  const {
+    changeDelay,
+    InputLabelProps = {},
+    InputProps = {},
+    onChange,
+    readOnly,
+    size = MUGlobal.searchFieldSize,
+    variant = MUGlobal.searchFieldVariant,
+    ...rest
+  } = props;
 
-    // Shrink
-    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
+  // Shrink
+  InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
 
-    // Read only
-    if (readOnly != null) InputProps.readOnly = readOnly;
+  // Read only
+  if (readOnly != null) InputProps.readOnly = readOnly;
 
-    const isMounted = React.useRef(true);
-    const delayed =
-        onChange != null && changeDelay != null && changeDelay >= 1
-            ? useDelayedExecutor(onChange, changeDelay)
-            : undefined;
+  const isMounted = React.useRef(true);
+  const delayed =
+    onChange != null && changeDelay != null && changeDelay >= 1
+      ? useDelayedExecutor(onChange, changeDelay)
+      : undefined;
 
-    const onChangeEx = (
-        event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-    ) => {
-        if (onChange == null) return;
+  const onChangeEx = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    if (onChange == null) return;
 
-        if (changeDelay == null || changeDelay < 1) {
-            onChange(event);
-            return;
-        }
+    if (changeDelay == null || changeDelay < 1) {
+      onChange(event);
+      return;
+    }
 
-        delayed?.call(undefined, event);
-    };
+    delayed?.call(undefined, event);
+  };
 
-    React.useEffect(() => {
-        return () => {
-            isMounted.current = false;
-            delayed?.clear();
-        };
-    }, []);
+  React.useEffect(() => {
+    return () => {
+      isMounted.current = false;
+      delayed?.clear();
+    };
+  }, []);
 
-    // Layout
-    return (
-        <TextField
-            InputLabelProps={InputLabelProps}
-            InputProps={InputProps}
-            onChange={onChangeEx}
-            size={size}
-            variant={variant}
-            {...rest}
-        />
-    );
+  // Layout
+  return (
+    <TextField
+      InputLabelProps={InputLabelProps}
+      InputProps={InputProps}
+      onChange={onChangeEx}
+      size={size}
+      variant={variant}
+      {...rest}
+    />
+  );
 }

package/src/SearchOptionGroup.tsx

@@ -1,12 +1,12 @@
 import {
-    DataTypes,
-    IdDefaultType,
-    LabelDefaultType,
-    ListType
-} from '@etsoo/shared';
-import React from 'react';
-import { MUGlobal } from './MUGlobal';
-import { OptionGroup, OptionGroupProps } from './OptionGroup';
+  DataTypes,
+  IdDefaultType,
+  LabelDefaultType,
+  ListType
+} from "@etsoo/shared";
+import React from "react";
+import { MUGlobal } from "./MUGlobal";
+import { OptionGroup, OptionGroupProps } from "./OptionGroup";
 
 /**
  * Search OptionGroup
@@ -14,18 +14,18 @@ import { OptionGroup, OptionGroupProps } from './OptionGroup';
  * @returns Component
  */
 export function SearchOptionGroup<
-    T extends object = ListType,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>,
-    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
+  T extends object = ListType,
+  D extends DataTypes.Keys<T> = IdDefaultType<T>,
+  L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
 >(props: OptionGroupProps<T, D, L>) {
-    // Destruct
-    const {
-        row = true,
-        size = MUGlobal.searchFieldSize,
-        sx = { '& .MuiFormLabel-root': { fontSize: '0.75em' } },
-        ...rest
-    } = props;
+  // Destruct
+  const {
+    row = true,
+    size = MUGlobal.searchFieldSize,
+    sx = { "& .MuiFormLabel-root": { fontSize: "0.75em" } },
+    ...rest
+  } = props;
 
-    // Layout
-    return <OptionGroup<T, D, L> row={row} size={size} sx={sx} {...rest} />;
+  // Layout
+  return <OptionGroup<T, D, L> row={row} size={size} sx={sx} {...rest} />;
 }