@etsoo/react 1.5.77 → 1.5.80

package/src/mu/OptionGroup.tsx

@@ -1,4 +1,10 @@
-import { DataTypes, Utils } from '@etsoo/shared';
+import {
+    DataTypes,
+    IdDefaultType,
+    LabelDefaultType,
+    ListType,
+    Utils
+} from '@etsoo/shared';
 import {
     Checkbox,
     FormControl,
@@ -14,10 +20,11 @@ import React from 'react';
 /**
  * OptionGroup props
  */
-export interface OptionGroupProps<
-    T extends {} = DataTypes.IdLabelItem,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
-> extends Omit<FormControlProps<'fieldset'>, 'defaultValue'> {
+export type OptionGroupProps<
+    T extends object,
+    D extends DataTypes.Keys<T>,
+    L extends DataTypes.Keys<T, string>
+> = Omit<FormControlProps<'fieldset'>, 'defaultValue'> & {
     /**
      * Default value
      */
@@ -29,9 +36,9 @@ export interface OptionGroupProps<
     getOptionLabel?: (option: T) => string;
 
     /**
-     * Id field, default is id
+     * Id field
      */
-    idField: T extends DataTypes.IdLabelItem ? D | undefined : D;
+    idField?: D;
 
     /**
      * Label
@@ -39,9 +46,9 @@ export interface OptionGroupProps<
     label?: string;
 
     /**
-     * Label field, default is label
+     * Label field
      */
-    labelField: T extends DataTypes.IdLabelItem ? D | undefined : D;
+    labelField?: L;
 
     /**
      * Multiple choose item
@@ -72,7 +79,7 @@ export interface OptionGroupProps<
      * Display group of elements in a compact row
      */
     row?: boolean;
-}
+};
 
 /**
  * OptionGroup
@@ -80,16 +87,17 @@ export interface OptionGroupProps<
  * @returns Component
  */
 export function OptionGroup<
-    T extends {} = DataTypes.IdLabelItem,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
->(props: OptionGroupProps<T, D>) {
+    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 {
         getOptionLabel,
         defaultValue,
         idField = 'id' as D,
         label,
-        labelField = 'label' as D,
+        labelField = 'label' as L,
         multiple = false,
         name,
         onValueChange,

package/src/mu/ResponsibleContainer.tsx

@@ -1,4 +1,4 @@
-import { DataTypes } from '@etsoo/shared';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
 import { Box, Stack, SxProps, Theme } from '@mui/material';
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
@@ -30,19 +30,14 @@ import { SearchBar } from './SearchBar';
 /**
  * ResponsibleContainer props
  */
-export interface ResponsibleContainerProps<
-    T extends {},
+export type ResponsibleContainerProps<
+    T extends object,
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
-> extends Omit<
-        DataGridExProps<T, D>,
-        | 'height'
-        | 'itemKey'
-        | 'loadData'
-        | 'mRef'
-        | 'onScroll'
-        | 'onItemsRendered'
-    > {
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
+> = Omit<
+    DataGridExProps<T, D>,
+    'height' | 'itemKey' | 'loadData' | 'mRef' | 'onScroll' | 'onItemsRendered'
+> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height
@@ -58,7 +53,7 @@ export interface ResponsibleContainerProps<
      * Container box SX (dataGrid determines the case)
      */
     containerBoxSx?: (
-        paddings: {},
+        paddings: Record<string, string | number>,
         hasFields: boolean,
         dataGrid?: boolean
     ) => SxProps<Theme>;
@@ -120,7 +115,7 @@ export interface ResponsibleContainerProps<
     /**
      * Paddings
      */
-    paddings?: {};
+    paddings?: Record<string, string | number>;
 
     /**
      * Pull to refresh data
@@ -136,7 +131,7 @@ export interface ResponsibleContainerProps<
      * Size ready to read miliseconds span
      */
     sizeReadyMiliseconds?: number;
-}
+};
 
 interface LocalRefs {
     rect?: DOMRect;
@@ -145,7 +140,7 @@ interface LocalRefs {
 }
 
 function defaultContainerBoxSx(
-    paddings: {},
+    paddings: object,
     hasField: boolean,
     _dataGrid?: boolean
 ): SxProps<Theme> {
@@ -163,9 +158,9 @@ function defaultContainerBoxSx(
  * @returns Layout
  */
 export function ResponsibleContainer<
-    T extends {},
+    T extends object,
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: ResponsibleContainerProps<T, F, D>) {
     // Destruct
     const {
@@ -288,7 +283,7 @@ export function ResponsibleContainer<
 
             return [
                 <Box className="DataGridBox">
-                    <DataGridEx<T>
+                    <DataGridEx<T, D>
                         autoLoad={!hasFields}
                         height={heightLocal}
                         width={rect.width}

package/src/mu/ScrollerListEx.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { DataTypes, Utils } from '@etsoo/shared';
+import { DataTypes, IdDefaultType, Utils } from '@etsoo/shared';
 import { useTheme } from '@mui/material';
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
@@ -47,7 +47,7 @@ const createGridStyle = (
 };
 
 // Default margin
-const defaultMargin = (margin: {}, isNarrow?: boolean) => {
+const defaultMargin = (margin: object, isNarrow?: boolean) => {
     const half = MUGlobal.half(margin);
 
     if (isNarrow == null) {
@@ -100,7 +100,7 @@ export interface ScrollerListExInnerItemRendererProps<T>
     /**
      * Default margins
      */
-    margins: {};
+    margins: object;
 }
 
 /**
@@ -110,27 +110,22 @@ export interface ScrollerListExInnerItemRendererProps<T>
  * 3. Dynamic calculation
  */
 export type ScrollerListExItemSize =
-    | ((index: number) => [number, number] | [number, number, {}])
+    | ((index: number) => [number, number] | [number, number, object])
     | [number, number]
-    | [number, {}, boolean?];
+    | [number, object, boolean?];
 
 /**
  * Extended ScrollerList Props
  */
-export interface ScrollerListExProps<
-    T extends {},
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
-> extends Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> {
+export type ScrollerListExProps<
+    T extends object,
+    D extends DataTypes.Keys<T>
+> = Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> & {
     /**
      * Alternating colors for odd/even rows
      */
     alternatingColors?: [string?, string?];
 
-    /**
-     * Id field
-     */
-    idField?: D;
-
     /**
      * Inner item renderer
      */
@@ -143,6 +138,12 @@ export interface ScrollerListExProps<
      */
     itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
 
+    /**
+     * Id field
+     * Failed: D extends { id: DataTypes.IdType } ? { idField?: D } : { idField: D }
+     */
+    idField?: D;
+
     /**
      * Item size, a function indicates its a variable size list
      */
@@ -167,7 +168,7 @@ export interface ScrollerListExProps<
      * Selected color
      */
     selectedColor?: string;
-}
+};
 
 interface defaultItemRendererProps<T> extends ListChildComponentProps<T> {
     /**
@@ -205,7 +206,7 @@ interface defaultItemRendererProps<T> extends ListChildComponentProps<T> {
     /**
      * Default margins
      */
-    margins: {};
+    margins: object;
 
     /**
      * Item selected
@@ -263,8 +264,8 @@ function defaultItemRenderer<T>({
  * @returns Component
  */
 export function ScrollerListEx<
-    T extends {},
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    T extends object,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: ScrollerListExProps<T, D>) {
     // Selected item ref
     const selectedItem = React.useRef<[HTMLDivElement, T]>();
@@ -331,7 +332,7 @@ export function ScrollerListEx<
 
     // Cache calculation
     const itemSizeResult = React.useMemo(():
-        | [number, number, {}]
+        | [number, number, object]
         | undefined => {
         if (typeof itemSize === 'function') return undefined;
         const [size, spaces, isNarrow] = itemSize;
@@ -350,7 +351,7 @@ export function ScrollerListEx<
     }, [itemSize]);
 
     // Calculate size
-    const calculateItemSize = (index: number): [number, number, {}] => {
+    const calculateItemSize = (index: number): [number, number, object] => {
         // Callback function
         if (typeof itemSize === 'function') {
             const result = itemSize(index);

package/src/mu/SearchOptionGroup.tsx

@@ -1,4 +1,9 @@
-import { DataTypes } from '@etsoo/shared';
+import {
+    DataTypes,
+    IdDefaultType,
+    LabelDefaultType,
+    ListType
+} from '@etsoo/shared';
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { OptionGroup, OptionGroupProps } from './OptionGroup';
@@ -9,9 +14,10 @@ import { OptionGroup, OptionGroupProps } from './OptionGroup';
  * @returns Component
  */
 export function SearchOptionGroup<
-    T extends {} = DataTypes.IdLabelItem,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
->(props: OptionGroupProps<T, D>) {
+    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,
@@ -21,5 +27,5 @@ export function SearchOptionGroup<
     } = props;
 
     // Layout
-    return <OptionGroup<T, D> row={row} size={size} sx={sx} {...rest} />;
+    return <OptionGroup<T, D, L> row={row} size={size} sx={sx} {...rest} />;
 }

package/src/mu/SelectBool.tsx

@@ -1,4 +1,4 @@
-import { DataTypes, Utils } from '@etsoo/shared';
+import { ListType1, Utils } from '@etsoo/shared';
 import React from 'react';
 import { globalApp } from '..';
 import { SelectEx, SelectExProps } from './SelectEx';
@@ -6,11 +6,10 @@ import { SelectEx, SelectExProps } from './SelectEx';
 /**
  * SelectBool props
  */
-export interface SelectBoolProps
-    extends Omit<
-        SelectExProps<DataTypes.IdLabelItem<string>>,
-        'options' | 'loadData'
-    > {}
+export type SelectBoolProps = Omit<
+    SelectExProps<ListType1>,
+    'options' | 'loadData'
+>;
 
 /**
  * SelectBool (yes/no)
@@ -22,7 +21,7 @@ export function SelectBool(props: SelectBoolProps) {
     const { search = true, autoAddBlankItem = search, ...rest } = props;
 
     // Options
-    const options: DataTypes.IdLabelItem<string>[] = [
+    const options: ListType1[] = [
         { id: 'false', label: globalApp.get('no')! },
         { id: 'true', label: globalApp.get('yes')! }
     ];
@@ -30,11 +29,5 @@ export function SelectBool(props: SelectBoolProps) {
     if (autoAddBlankItem) Utils.addBlankItem(options);
 
     // Layout
-    return (
-        <SelectEx<DataTypes.IdLabelItem<string>>
-            options={options}
-            search={search}
-            {...rest}
-        />
-    );
+    return <SelectEx<ListType1> options={options} search={search} {...rest} />;
 }

package/src/mu/SelectEx.tsx

@@ -12,16 +12,23 @@ import {
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { ListItemRightIcon } from './ListItemRightIcon';
-import { DataTypes, Utils } from '@etsoo/shared';
+import {
+    DataTypes,
+    IdDefaultType,
+    LabelDefaultType,
+    ListType,
+    Utils
+} from '@etsoo/shared';
 import { ReactUtils } from '../app/ReactUtils';
 
 /**
  * Extended select component props
  */
-export interface SelectExProps<
-    T extends {},
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
-> extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
+export type SelectExProps<
+    T extends object,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>,
+    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
+> = Omit<SelectProps, 'labelId' | 'input' | 'native'> & {
     /**
      * Auto add blank item
      */
@@ -30,19 +37,17 @@ export interface SelectExProps<
     /**
      * Id field
      */
-    idField: T extends DataTypes.IdLabelItem ? D | undefined : D;
+    idField?: D;
 
     /**
      * Item icon renderer
      */
-    itemIconRenderer?: (id: unknown) => React.ReactNode;
+    itemIconRenderer?: (id: T[D]) => React.ReactNode;
 
     /**
      * Label field
      */
-    labelField:
-        | ((option: T) => string)
-        | (T extends DataTypes.IdLabelItem ? D | undefined : D);
+    labelField?: L | ((option: T) => string);
 
     /**
      * Load data callback
@@ -52,7 +57,7 @@ export interface SelectExProps<
     /**
      * Item click handler
      */
-    onItemClick?: (event: React.MouseEvent, id: unknown) => void;
+    onItemClick?: (event: React.MouseEvent, option: T) => void;
 
     /**
      * On load data handler
@@ -68,7 +73,7 @@ export interface SelectExProps<
      * Is search case?
      */
     search?: boolean;
-}
+};
 
 /**
  * Extended select component
@@ -76,16 +81,17 @@ export interface SelectExProps<
  * @returns Component
  */
 export function SelectEx<
-    T extends {} = DataTypes.IdLabelItem,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
->(props: SelectExProps<T, D>) {
+    T extends object = ListType,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>,
+    L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
+>(props: SelectExProps<T, D, L>) {
     // Destruct
     const {
         defaultValue,
         idField = 'id' as D,
         itemIconRenderer,
         label,
-        labelField = 'label' as D,
+        labelField = 'label' as L,
         loadData,
         onItemClick,
         onLoadData,
@@ -166,7 +172,7 @@ export function SelectEx<
     const getLabel = (option: T) => {
         return typeof labelField === 'function'
             ? labelField(option)
-            : new String(option[labelField]);
+            : (option[labelField] as string);
     };
 
     // Refs
@@ -262,7 +268,7 @@ export function SelectEx<
                             value={id}
                             onClick={(event) => {
                                 if (onItemClick) {
-                                    onItemClick(event, id);
+                                    onItemClick(event, option);
                                     if (event.defaultPrevented) return;
                                 }
                                 if (!multiple) setItemValue(id);
@@ -272,7 +278,7 @@ export function SelectEx<
                             <ListItemText primary={label} />
                             {itemIconRenderer && (
                                 <ListItemRightIcon>
-                                    {itemIconRenderer(id)}
+                                    {itemIconRenderer(option[idField])}
                                 </ListItemRightIcon>
                             )}
                         </MenuItem>

package/src/mu/TableEx.tsx

@@ -1,4 +1,4 @@
-import { DataTypes } from '@etsoo/shared';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
 import {
     Checkbox,
     Paper,
@@ -47,56 +47,56 @@ export interface TableExMethodRef extends GridMethodRef {
 /**
  * Extended table props
  */
-export interface TableExProps<
-    T extends {},
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
-> extends TableProps,
-        GridLoader<T> {
-    /**
-     * Alternating colors for odd/even rows
-     */
-    alternatingColors?: [string?, string?];
-
-    /**
-     * Columns
-     */
-    columns: GridColumn<T>[];
-
-    /**
-     * Header cells background color and font color
-     */
-    headerColors?: [string?, string?];
-
-    /**
-     * Id field
-     */
-    idField?: D;
-
-    /**
-     * Max height
-     */
-    maxHeight?: number;
-
-    /**
-     * Methods
-     */
-    mRef?: React.Ref<TableExMethodRef>;
-
-    /**
-     * On items select change
-     */
-    onSelectChange?: (selectedItems: T[]) => void;
-
-    /**
-     * Row height
-     */
-    rowHeight?: number;
-
-    /**
-     * Header and bottom height
-     */
-    otherHeight?: number;
-}
+export type TableExProps<
+    T extends object,
+    D extends DataTypes.Keys<T>
+> = TableProps &
+    GridLoader<T> & {
+        /**
+         * Alternating colors for odd/even rows
+         */
+        alternatingColors?: [string?, string?];
+
+        /**
+         * Columns
+         */
+        columns: GridColumn<T>[];
+
+        /**
+         * Header cells background color and font color
+         */
+        headerColors?: [string?, string?];
+
+        /**
+         * Id field
+         */
+        idField?: D;
+
+        /**
+         * Max height
+         */
+        maxHeight?: number;
+
+        /**
+         * Methods
+         */
+        mRef?: React.Ref<TableExMethodRef>;
+
+        /**
+         * On items select change
+         */
+        onSelectChange?: (selectedItems: T[]) => void;
+
+        /**
+         * Row height
+         */
+        rowHeight?: number;
+
+        /**
+         * Header and bottom height
+         */
+        otherHeight?: number;
+    };
 
 /**
  * Extended Table
@@ -104,8 +104,8 @@ export interface TableExProps<
  * @returns Component
  */
 export function TableEx<
-    T extends {},
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    T extends object,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: TableExProps<T, D>) {
     // Theme
     const theme = useTheme();

package/src/mu/Tiplist.tsx

@@ -1,4 +1,4 @@
-import { DataTypes } from '@etsoo/shared';
+import { DataTypes, IdDefaultType, ListType } from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
 import { ReactUtils } from '../app/ReactUtils';
@@ -10,8 +10,10 @@ import { SearchField } from './SearchField';
 /**
  * Tiplist props
  */
-export interface TiplistProps<T extends {}, D extends DataTypes.Keys<T>>
-    extends Omit<AutocompleteExtendedProps<T, D>, 'open'> {
+export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<
+    AutocompleteExtendedProps<T, D>,
+    'open'
+> & {
     /**
      * Load data callback
      */
@@ -19,10 +21,10 @@ export interface TiplistProps<T extends {}, D extends DataTypes.Keys<T>>
         keyword?: string,
         id?: T[D]
     ) => PromiseLike<T[] | null | undefined>;
-}
+};
 
 // Multiple states
-interface States<T extends {}> {
+interface States<T extends object> {
     open: boolean;
     options: T[];
     value?: T | null;
@@ -35,8 +37,8 @@ interface States<T extends {}> {
  * @returns Component
  */
 export function Tiplist<
-    T extends {} = DataTypes.IdLabelItem,
-    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+    T extends object = ListType,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: TiplistProps<T, D>) {
     // Destruct
     const {
@@ -67,11 +69,10 @@ export function Tiplist<
 
     // Local value
     let localValue = value ?? defaultValue;
-    if (localValue === undefined) localValue = null;
 
     // One time calculation for input's default value (uncontrolled)
     const localIdValue =
-        idValue ?? DataTypes.getValue(localValue, idField ?? 'id');
+        idValue ?? DataTypes.getValue(localValue, idField as any);
 
     // Changable states
     const [states, stateUpdate] = React.useReducer(
@@ -218,7 +219,7 @@ export function Tiplist<
                 onChange={inputOnChange}
             />
             {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
-            <Autocomplete
+            <Autocomplete<T, undefined, false, false>
                 filterOptions={(options, _state) => options}
                 value={states.value}
                 options={states.options}

package/src/mu/pages/CommonPageProps.ts

@@ -52,7 +52,7 @@ export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
     /**
      * Paddings
      */
-    paddings?: {};
+    paddings?: Record<string, string | number>;
 
     /**
      * Scroll container