@etsoo/react 1.5.76 → 1.5.79

package/src/mu/OptionGroup.tsx

@@ -1,5 +1,10 @@
-import { IdLabelDto } from '@etsoo/appscript';
-import { DataTypes, Utils } from '@etsoo/shared';
+import {
+    DataTypes,
+    IdDefaultType,
+    LabelDefaultType,
+    ListType,
+    Utils
+} from '@etsoo/shared';
 import {
     Checkbox,
     FormControl,
@@ -15,14 +20,15 @@ import React from 'react';
 /**
  * OptionGroup props
  */
-export interface OptionGroupProps<
-    T extends Record<string, any> = IdLabelDto,
-    D extends DataTypes.IdType = string
-> 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
      */
-    defaultValue?: D | D[];
+    defaultValue?: T[D] | T[D][];
 
     /**
      * Get option label function
@@ -30,9 +36,9 @@ export interface OptionGroupProps<
     getOptionLabel?: (option: T) => string;
 
     /**
-     * Id field, default is id
+     * Id field
      */
-    idField?: string & keyof T;
+    idField?: D;
 
     /**
      * Label
@@ -40,9 +46,9 @@ export interface OptionGroupProps<
     label?: string;
 
     /**
-     * Label field, default is label
+     * Label field
      */
-    labelField?: string & keyof T;
+    labelField?: L;
 
     /**
      * Multiple choose item
@@ -57,7 +63,7 @@ export interface OptionGroupProps<
     /**
      * On value change handler
      */
-    onValueChange?: (value: D | D[] | undefined) => void;
+    onValueChange?: (value: T[D] | T[D][] | undefined) => void;
 
     /**
      * Array of options.
@@ -73,7 +79,7 @@ export interface OptionGroupProps<
      * Display group of elements in a compact row
      */
     row?: boolean;
-}
+};
 
 /**
  * OptionGroup
@@ -81,16 +87,17 @@ export interface OptionGroupProps<
  * @returns Component
  */
 export function OptionGroup<
-    T extends Record<string, unknown> = IdLabelDto,
-    D extends DataTypes.IdType = string
->(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',
+        idField = 'id' as D,
         label,
-        labelField = 'label',
+        labelField = 'label' as L,
         multiple = false,
         name,
         onValueChange,
@@ -103,10 +110,10 @@ export function OptionGroup<
 
     // Get option value
     // D type should be the source id type
-    const getOptionValue = (option: T): D | null => {
+    const getOptionValue = (option: T): T[D] | null => {
         const value = DataTypes.getValue(option, idField);
         if (value == null) return null;
-        return value as D;
+        return value as T[D];
     };
 
     // Checkbox values
@@ -142,7 +149,7 @@ export function OptionGroup<
                 onChange={(event) => {
                     if (firstOptionValue == null) return;
 
-                    const typeValue = Utils.parseString<D>(
+                    const typeValue = Utils.parseString(
                         event.target.value,
                         firstOptionValue
                     );
@@ -175,7 +182,7 @@ export function OptionGroup<
 
         // Value, convert to string
         // Will fail when type is number
-        const value = getOptionValue(option);
+        const value = getOptionValue(option) as unknown as React.Key;
 
         return (
             <FormControlLabel
@@ -197,7 +204,7 @@ export function OptionGroup<
             value={values[0]}
             onChange={(_event, value) => {
                 if (firstOptionValue == null) return;
-                const typeValue = Utils.parseString<D>(value, firstOptionValue);
+                const typeValue = Utils.parseString(value, firstOptionValue);
                 if (onValueChange) onValueChange(typeValue);
                 setValues([typeValue]);
             }}

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,18 +30,14 @@ import { SearchBar } from './SearchBar';
 /**
  * ResponsibleContainer props
  */
-export interface ResponsibleContainerProps<
-    T extends {},
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
-> extends Omit<
-        DataGridExProps<T>,
-        | 'height'
-        | 'itemKey'
-        | 'loadData'
-        | 'mRef'
-        | 'onScroll'
-        | 'onItemsRendered'
-    > {
+export type ResponsibleContainerProps<
+    T extends object,
+    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
+    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
@@ -57,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>;
@@ -119,7 +115,7 @@ export interface ResponsibleContainerProps<
     /**
      * Paddings
      */
-    paddings?: {};
+    paddings?: Record<string, string | number>;
 
     /**
      * Pull to refresh data
@@ -135,7 +131,7 @@ export interface ResponsibleContainerProps<
      * Size ready to read miliseconds span
      */
     sizeReadyMiliseconds?: number;
-}
+};
 
 interface LocalRefs {
     rect?: DOMRect;
@@ -144,7 +140,7 @@ interface LocalRefs {
 }
 
 function defaultContainerBoxSx(
-    paddings: {},
+    paddings: object,
     hasField: boolean,
     _dataGrid?: boolean
 ): SxProps<Theme> {
@@ -162,9 +158,10 @@ function defaultContainerBoxSx(
  * @returns Layout
  */
 export function ResponsibleContainer<
-    T extends {},
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
->(props: ResponsibleContainerProps<T, F>) {
+    T extends object,
+    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
+>(props: ResponsibleContainerProps<T, F, D>) {
     // Destruct
     const {
         adjustHeight,
@@ -286,7 +283,7 @@ export function ResponsibleContainer<
 
             return [
                 <Box className="DataGridBox">
-                    <DataGridEx<T>
+                    <DataGridEx<T, D>
                         autoLoad={!hasFields}
                         height={heightLocal}
                         width={rect.width}
@@ -319,7 +316,7 @@ export function ResponsibleContainer<
 
         return [
             <Box className="ListBox" sx={{ height: heightLocal }}>
-                <ScrollerListEx<T>
+                <ScrollerListEx<T, D>
                     autoLoad={!hasFields}
                     height={heightLocal}
                     loadData={localLoadData}

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,25 +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 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?: string & keyof T;
-
     /**
      * Inner item renderer
      */
@@ -141,6 +138,12 @@ export interface ScrollerListExProps<T>
      */
     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
      */
@@ -165,7 +168,7 @@ export interface ScrollerListExProps<T>
      * Selected color
      */
     selectedColor?: string;
-}
+};
 
 interface defaultItemRendererProps<T> extends ListChildComponentProps<T> {
     /**
@@ -203,7 +206,7 @@ interface defaultItemRendererProps<T> extends ListChildComponentProps<T> {
     /**
      * Default margins
      */
-    margins: {};
+    margins: object;
 
     /**
      * Item selected
@@ -260,9 +263,10 @@ function defaultItemRenderer<T>({
  * @param props Props
  * @returns Component
  */
-export function ScrollerListEx<T extends Record<string, unknown>>(
-    props: ScrollerListExProps<T>
-) {
+export function ScrollerListEx<
+    T extends object,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
+>(props: ScrollerListExProps<T, D>) {
     // Selected item ref
     const selectedItem = React.useRef<[HTMLDivElement, T]>();
 
@@ -295,11 +299,11 @@ export function ScrollerListEx<T extends Record<string, unknown>>(
     const {
         alternatingColors = [undefined, undefined],
         className,
-        idField = 'id',
+        idField = 'id' as D,
         innerItemRenderer,
         itemSize,
         itemKey = (index: number, data: T) =>
-            DataTypes.getValue(data, idField) ?? index,
+            DataTypes.getIdValue1(data, idField) ?? index,
         itemRenderer = (itemProps) => {
             const [itemHeight, space, margins] = calculateItemSize(
                 itemProps.index
@@ -328,7 +332,7 @@ export function ScrollerListEx<T extends Record<string, unknown>>(
 
     // Cache calculation
     const itemSizeResult = React.useMemo(():
-        | [number, number, {}]
+        | [number, number, object]
         | undefined => {
         if (typeof itemSize === 'function') return undefined;
         const [size, spaces, isNarrow] = itemSize;
@@ -347,7 +351,7 @@ export function ScrollerListEx<T extends Record<string, unknown>>(
     }, [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,5 +1,9 @@
-import { IdLabelDto } from '@etsoo/appscript';
-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';
@@ -10,9 +14,10 @@ import { OptionGroup, OptionGroupProps } from './OptionGroup';
  * @returns Component
  */
 export function SearchOptionGroup<
-    T extends Record<string, any> = IdLabelDto,
-    D extends DataTypes.IdType = string
->(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,
@@ -22,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,5 +1,4 @@
-import { IdLabelDto } from '@etsoo/appscript';
-import { Utils } from '@etsoo/shared';
+import { ListType1, Utils } from '@etsoo/shared';
 import React from 'react';
 import { globalApp } from '..';
 import { SelectEx, SelectExProps } from './SelectEx';
@@ -7,8 +6,10 @@ import { SelectEx, SelectExProps } from './SelectEx';
 /**
  * SelectBool props
  */
-export interface SelectBoolProps
-    extends Omit<SelectExProps<IdLabelDto<string>>, 'options' | 'loadData'> {}
+export type SelectBoolProps = Omit<
+    SelectExProps<ListType1>,
+    'options' | 'loadData'
+>;
 
 /**
  * SelectBool (yes/no)
@@ -20,7 +21,7 @@ export function SelectBool(props: SelectBoolProps) {
     const { search = true, autoAddBlankItem = search, ...rest } = props;
 
     // Options
-    const options: IdLabelDto<string>[] = [
+    const options: ListType1[] = [
         { id: 'false', label: globalApp.get('no')! },
         { id: 'true', label: globalApp.get('yes')! }
     ];
@@ -28,11 +29,5 @@ export function SelectBool(props: SelectBoolProps) {
     if (autoAddBlankItem) Utils.addBlankItem(options);
 
     // Layout
-    return (
-        <SelectEx<IdLabelDto<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,7 +37,7 @@ export interface SelectExProps<
     /**
      * Id field
      */
-    idField: D;
+    idField?: D;
 
     /**
      * Item icon renderer
@@ -40,7 +47,7 @@ export interface SelectExProps<
     /**
      * Label field
      */
-    labelField: ((option: T) => string) | D;
+    labelField?: L | ((option: T) => string);
 
     /**
      * Load data callback
@@ -66,7 +73,7 @@ export interface SelectExProps<
      * Is search case?
      */
     search?: boolean;
-}
+};
 
 /**
  * Extended select component
@@ -74,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,
+        idField = 'id' as D,
         itemIconRenderer,
         label,
-        labelField,
+        labelField = 'label' as L,
         loadData,
         onItemClick,
         onLoadData,

package/src/mu/TableEx.tsx

@@ -1,4 +1,4 @@
-import { DataTypes } from '@etsoo/shared';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
 import {
     Checkbox,
     Paper,
@@ -47,68 +47,69 @@ export interface TableExMethodRef extends GridMethodRef {
 /**
  * Extended table props
  */
-export interface TableExProps<T extends Record<string, any>>
-    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?: string & keyof T;
-
-    /**
-     * 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
  * @param props Props
  * @returns Component
  */
-export function TableEx<T extends Record<string, unknown>>(
-    props: TableExProps<T>
-) {
+export function TableEx<
+    T extends object,
+    D extends DataTypes.Keys<T> = IdDefaultType<T>
+>(props: TableExProps<T, D>) {
     // Theme
     const theme = useTheme();
 
-    type keyType = string & keyof T;
-
     // Destruct
     const {
         alternatingColors = [theme.palette.action.hover, undefined],
@@ -116,7 +117,7 @@ export function TableEx<T extends Record<string, unknown>>(
         columns,
         defaultOrderBy,
         headerColors = [undefined, undefined],
-        idField = 'id' as keyType,
+        idField = 'id' as D,
         loadBatchSize,
         loadData,
         maxHeight,
@@ -451,7 +452,10 @@ export function TableEx<T extends Record<string, unknown>>(
                                 : false;
 
                             return (
-                                <TableRow key={rowId} selected={isItemSelected}>
+                                <TableRow
+                                    key={rowId as unknown as React.Key}
+                                    selected={isItemSelected}
+                                >
                                     {selectable && (
                                         <TableCell padding="checkbox">
                                             {row && (
@@ -522,10 +526,7 @@ export function TableEx<T extends Record<string, unknown>>(
 
                                             return (
                                                 <TableCell
-                                                    key={
-                                                        rowId.toString() +
-                                                        columnIndex
-                                                    }
+                                                    key={`${rowId}${columnIndex}`}
                                                     {...cellProps}
                                                 >
                                                     {child}