@etsoo/react 1.5.74 → 1.5.77

package/src/mu/ComboBox.tsx

@@ -1,5 +1,4 @@
-import { IdLabelDto } from '@etsoo/appscript';
-import { Keyboard } from '@etsoo/shared';
+import { DataTypes, Keyboard } from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
 import { Utils as SharedUtils } from '@etsoo/shared';
@@ -11,8 +10,10 @@ import { ReactUtils } from '../app/ReactUtils';
 /**
  * ComboBox props
  */
-export interface ComboBoxProps<T extends {}>
-    extends AutocompleteExtendedProps<T> {
+export interface ComboBoxProps<
+    T extends {},
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+> extends AutocompleteExtendedProps<T, D> {
     /**
      * Auto add blank item
      */
@@ -26,7 +27,7 @@ export interface ComboBoxProps<T extends {}>
     /**
      * Label field
      */
-    labelField?: string & keyof T;
+    labelField: T extends DataTypes.IdLabelItem ? D | undefined : D;
 
     /**
      * Load data callback
@@ -49,12 +50,15 @@ export interface ComboBoxProps<T extends {}>
  * @param props Props
  * @returns Component
  */
-export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
+export function ComboBox<
+    T extends {} = DataTypes.IdLabelItem,
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+>(props: ComboBoxProps<T, D>) {
     // Destruct
     const {
         search = false,
         autoAddBlankItem = search,
-        idField = 'id',
+        idField = 'id' as D,
         idValue,
         inputError,
         inputHelperText,
@@ -64,7 +68,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         inputVariant,
         defaultValue,
         label,
-        labelField = 'label',
+        labelField = 'label' as D,
         loadData,
         onLoadData,
         name,
@@ -75,7 +79,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         onChange,
         openOnFocus = true,
         value,
-        getOptionLabel = (option: T) => String(Reflect.get(option, labelField)),
+        getOptionLabel = (option: T) => `${option[labelField]}`,
         sx = { minWidth: '150px' },
         ...rest
     } = props;
@@ -97,7 +101,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
     // Local default value
     let localValue =
         idValue != null
-            ? localOptions.find((o) => Reflect.get(o, idField) === idValue)
+            ? localOptions.find((o) => o[idField] === idValue)
             : defaultValue ?? value;
 
     if (localValue === undefined) localValue = null;
@@ -108,7 +112,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
 
     // Current id value
     // One time calculation for input's default value (uncontrolled)
-    const localIdValue = stateValue && Reflect.get(stateValue, idField);
+    const localIdValue = stateValue && stateValue[idField];
 
     React.useEffect(() => {
         if (localValue != null) setStateValue(localValue);
@@ -147,8 +151,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         const input = inputRef.current;
         if (input) {
             // Update value
-            const newValue =
-                value != null ? `${Reflect.get(value, idField)}` : '';
+            const newValue = value != null ? `${value[idField]}` : '';
 
             if (newValue !== input.value) {
                 // Different value, trigger change event
@@ -186,7 +189,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
                 type="text"
                 style={{ display: 'none' }}
                 name={name}
-                value={localIdValue ?? ''}
+                value={`${localIdValue ?? ''}`}
                 readOnly
                 onChange={inputOnChange}
             />
@@ -195,7 +198,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
                 value={stateValue}
                 getOptionLabel={getOptionLabel}
                 isOptionEqualToValue={(option: T, value: T) =>
-                    Reflect.get(option, idField) === Reflect.get(value, idField)
+                    option[idField] === value[idField]
                 }
                 onChange={(event, value, reason, details) => {
                     // Set value

package/src/mu/DataGridEx.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { Utils } from '@etsoo/shared';
+import { DataTypes, Utils } from '@etsoo/shared';
 import {
     Box,
     BoxProps,
@@ -30,9 +30,7 @@ import { MouseEventWithDataHandler } from './MUGlobal';
 /**
  * Footer item renderer props
  */
-export interface DataGridExFooterItemRendererProps<
-    T extends Record<string, any>
-> {
+export interface DataGridExFooterItemRendererProps<T extends {}> {
     column: GridColumn<T>;
     index: number;
     states: GridLoaderStates<T>;
@@ -43,9 +41,11 @@ export interface DataGridExFooterItemRendererProps<
 /**
  * Extended DataGrid with VariableSizeGrid props
  */
-export interface DataGridExProps<T extends Record<string, any>>
-    extends Omit<
-        ScrollerGridProps<T>,
+export interface DataGridExProps<
+    T extends {},
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+> extends Omit<
+        ScrollerGridProps<T, D>,
         'itemRenderer' | 'columnCount' | 'columnWidth' | 'width'
     > {
     /**
@@ -210,9 +210,10 @@ export function DataGridExCalColumns<T>(columns: GridColumn<T>[]) {
  * @param props Props
  * @returns Component
  */
-export function DataGridEx<T extends Record<string, any>>(
-    props: DataGridExProps<T>
-) {
+export function DataGridEx<
+    T extends {},
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+>(props: DataGridExProps<T, D>) {
     // Theme
     const theme = useTheme();
 
@@ -360,7 +361,7 @@ export function DataGridEx<T extends Record<string, any>>(
         footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer,
         hideFooter = false,
         hoverColor = '#f6f9fb',
-        idField = 'id',
+        idField = 'id' as D,
         mRef = React.createRef(),
         onClick,
         onDoubleClick,
@@ -372,7 +373,7 @@ export function DataGridEx<T extends Record<string, any>>(
 
     if (checkable) {
         const cbColumn: GridColumn<T> = {
-            field: 'selected',
+            field: 'selected' as any, // Avoid validation from data model
             header: '',
             sortable: false,
             width: 50,

package/src/mu/MUGlobal.ts

@@ -1,10 +1,5 @@
 import { NumberUtils } from '@etsoo/shared';
-import {
-    Breakpoint,
-    ListItemButtonProps,
-    ListItemProps,
-    Theme
-} from '@mui/material';
+import { Breakpoint, ListItemButtonProps, Theme } from '@mui/material';
 import { RLink } from './RLink';
 
 /**

package/src/mu/OptionGroup.tsx

@@ -1,4 +1,3 @@
-import { IdLabelDto } from '@etsoo/appscript';
 import { DataTypes, Utils } from '@etsoo/shared';
 import {
     Checkbox,
@@ -16,13 +15,13 @@ import React from 'react';
  * OptionGroup props
  */
 export interface OptionGroupProps<
-    T extends Record<string, any> = IdLabelDto,
-    D extends DataTypes.IdType = string
+    T extends {} = DataTypes.IdLabelItem,
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
 > extends Omit<FormControlProps<'fieldset'>, 'defaultValue'> {
     /**
      * Default value
      */
-    defaultValue?: D | D[];
+    defaultValue?: T[D] | T[D][];
 
     /**
      * Get option label function
@@ -32,7 +31,7 @@ export interface OptionGroupProps<
     /**
      * Id field, default is id
      */
-    idField?: string & keyof T;
+    idField: T extends DataTypes.IdLabelItem ? D | undefined : D;
 
     /**
      * Label
@@ -42,7 +41,7 @@ export interface OptionGroupProps<
     /**
      * Label field, default is label
      */
-    labelField?: string & keyof T;
+    labelField: T extends DataTypes.IdLabelItem ? D | undefined : D;
 
     /**
      * Multiple choose item
@@ -57,7 +56,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.
@@ -81,16 +80,16 @@ export interface OptionGroupProps<
  * @returns Component
  */
 export function OptionGroup<
-    T extends Record<string, unknown> = IdLabelDto,
-    D extends DataTypes.IdType = string
+    T extends {} = DataTypes.IdLabelItem,
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
 >(props: OptionGroupProps<T, D>) {
     // Destruct
     const {
         getOptionLabel,
         defaultValue,
-        idField = 'id',
+        idField = 'id' as D,
         label,
-        labelField = 'label',
+        labelField = 'label' as D,
         multiple = false,
         name,
         onValueChange,
@@ -103,10 +102,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 +141,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 +174,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 +196,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

@@ -32,9 +32,10 @@ import { SearchBar } from './SearchBar';
  */
 export interface ResponsibleContainerProps<
     T extends {},
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
+    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
 > extends Omit<
-        DataGridExProps<T>,
+        DataGridExProps<T, D>,
         | 'height'
         | 'itemKey'
         | 'loadData'
@@ -163,8 +164,9 @@ function defaultContainerBoxSx(
  */
 export function ResponsibleContainer<
     T extends {},
-    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
->(props: ResponsibleContainerProps<T, F>) {
+    F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate,
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+>(props: ResponsibleContainerProps<T, F, D>) {
     // Destruct
     const {
         adjustHeight,
@@ -319,7 +321,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

@@ -117,8 +117,10 @@ export type ScrollerListExItemSize =
 /**
  * Extended ScrollerList Props
  */
-export interface ScrollerListExProps<T>
-    extends Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> {
+export interface ScrollerListExProps<
+    T extends {},
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+> extends Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> {
     /**
      * Alternating colors for odd/even rows
      */
@@ -127,7 +129,7 @@ export interface ScrollerListExProps<T>
     /**
      * Id field
      */
-    idField?: string & keyof T;
+    idField?: D;
 
     /**
      * Inner item renderer
@@ -260,9 +262,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 {},
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+>(props: ScrollerListExProps<T, D>) {
     // Selected item ref
     const selectedItem = React.useRef<[HTMLDivElement, T]>();
 
@@ -295,11 +298,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

package/src/mu/SearchOptionGroup.tsx

@@ -1,4 +1,3 @@
-import { IdLabelDto } from '@etsoo/appscript';
 import { DataTypes } from '@etsoo/shared';
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
@@ -10,8 +9,8 @@ import { OptionGroup, OptionGroupProps } from './OptionGroup';
  * @returns Component
  */
 export function SearchOptionGroup<
-    T extends Record<string, any> = IdLabelDto,
-    D extends DataTypes.IdType = string
+    T extends {} = DataTypes.IdLabelItem,
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
 >(props: OptionGroupProps<T, D>) {
     // Destruct
     const {

package/src/mu/SelectBool.tsx

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

package/src/mu/SelectEx.tsx

@@ -11,25 +11,26 @@ import {
 } from '@mui/material';
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
-import { IdLabelDto } from '@etsoo/appscript';
 import { ListItemRightIcon } from './ListItemRightIcon';
-import { Utils } from '@etsoo/shared';
+import { DataTypes, Utils } from '@etsoo/shared';
 import { ReactUtils } from '../app/ReactUtils';
 
 /**
  * Extended select component props
  */
-export interface SelectExProps<T extends {}>
-    extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
+export interface SelectExProps<
+    T extends {},
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+> extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
     /**
      * Auto add blank item
      */
     autoAddBlankItem?: boolean;
 
     /**
-     * Id field, default is id
+     * Id field
      */
-    idField?: string & keyof T;
+    idField: T extends DataTypes.IdLabelItem ? D | undefined : D;
 
     /**
      * Item icon renderer
@@ -37,9 +38,11 @@ export interface SelectExProps<T extends {}>
     itemIconRenderer?: (id: unknown) => React.ReactNode;
 
     /**
-     * Label field, default is label
+     * Label field
      */
-    labelField?: ((option: T) => string) | (string & keyof T);
+    labelField:
+        | ((option: T) => string)
+        | (T extends DataTypes.IdLabelItem ? D | undefined : D);
 
     /**
      * Load data callback
@@ -72,14 +75,17 @@ export interface SelectExProps<T extends {}>
  * @param props Props
  * @returns Component
  */
-export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
+export function SelectEx<
+    T extends {} = DataTypes.IdLabelItem,
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+>(props: SelectExProps<T, D>) {
     // Destruct
     const {
         defaultValue,
-        idField = 'id',
+        idField = 'id' as D,
         itemIconRenderer,
         label,
-        labelField = 'label',
+        labelField = 'label' as D,
         loadData,
         onItemClick,
         onLoadData,
@@ -153,14 +159,14 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
 
     // Get option id
     const getId = (option: T) => {
-        return Reflect.get(option, idField);
+        return option[idField] as unknown as React.Key;
     };
 
     // Get option label
     const getLabel = (option: T) => {
         return typeof labelField === 'function'
             ? labelField(option)
-            : Reflect.get(option, labelField);
+            : new String(option[labelField]);
     };
 
     // Refs

package/src/mu/TableEx.tsx

@@ -47,8 +47,10 @@ export interface TableExMethodRef extends GridMethodRef {
 /**
  * Extended table props
  */
-export interface TableExProps<T extends Record<string, any>>
-    extends TableProps,
+export interface TableExProps<
+    T extends {},
+    D extends DataTypes.Keys<T> = DataTypes.Keys<T>
+> extends TableProps,
         GridLoader<T> {
     /**
      * Alternating colors for odd/even rows
@@ -68,7 +70,7 @@ export interface TableExProps<T extends Record<string, any>>
     /**
      * Id field
      */
-    idField?: string & keyof T;
+    idField?: D;
 
     /**
      * Max height
@@ -101,14 +103,13 @@ export interface TableExProps<T extends Record<string, any>>
  * @param props Props
  * @returns Component
  */
-export function TableEx<T extends Record<string, unknown>>(
-    props: TableExProps<T>
-) {
+export function TableEx<
+    T extends {},
+    D extends DataTypes.Keys<T> = DataTypes.Keys<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}