@etsoo/react 1.1.90 → 1.1.94

package/lib/mu/ComboBox.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { DataTypes } from '@etsoo/shared';
-import { AutocompleteProps } from '@mui/material';
+import { AutocompleteProps, TextFieldProps } from '@mui/material';
 /**
  * ComboBox props
  */
-export interface ComboBoxProps<T extends Record<string, any>> extends Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput'> {
+export interface ComboBoxProps<T extends Record<string, any>> extends Omit<AutocompleteProps<T, undefined, boolean, false>, 'renderInput'> {
     /**
      * Id field, default is id
      */
@@ -13,6 +13,10 @@ export interface ComboBoxProps<T extends Record<string, any>> extends Omit<Autoc
      * Id value
      */
     idValue?: DataTypes.IdType;
+    /**
+     * Input props
+     */
+    inputProps?: TextFieldProps;
     /**
      * Label of the field
      */

package/lib/mu/ComboBox.js

@@ -10,7 +10,7 @@ import { SearchField } from './SearchField';
  */
 export function ComboBox(props) {
     // Destruct
-    const { search = false, idField = 'id', idValue, defaultValue, label, name, options, readOnly, onChange, value, sx = { minWidth: '120px' }, ...rest } = props;
+    const { search = false, idField = 'id', inputProps, idValue, defaultValue, label, name, options, disableClearable = true, readOnly = true, onChange, value, sx = { minWidth: '120px' }, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Local default value
@@ -34,7 +34,7 @@ export function ComboBox(props) {
     // Layout
     return (React.createElement("div", null,
         React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, defaultValue: localIdValue }),
-        React.createElement(Autocomplete, { defaultValue: localValue, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+        React.createElement(Autocomplete, { defaultValue: localValue, disableClearable: disableClearable, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                 // Input value
                 const input = inputRef.current;
                 if (input) {
@@ -50,5 +50,5 @@ export function ComboBox(props) {
                 // Custom
                 if (onChange != null)
                     onChange(event, value, reason, details);
-            }, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label })) : (React.createElement(InputField, { ...addReadOnly(params), label: label })), options: options, ...rest })));
+            }, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...inputProps, ...addReadOnly(params), label: label })) : (React.createElement(InputField, { ...inputProps, ...addReadOnly(params), label: label })), options: options, ...rest })));
 }

package/lib/mu/NotifierMU.js

@@ -24,10 +24,13 @@ const IconDialogTitle = styled(DialogTitle) `
 export class NotificationMU extends NotificationReact {
     // On return
     // Dismiss first, then run callback
-    returnValue(value) {
+    async returnValue(value) {
+        if (this.onReturn) {
+            const result = await this.onReturn(value);
+            if (result === false)
+                return;
+        }
         this.dismiss();
-        if (this.onReturn)
-            this.onReturn(value);
     }
     // Create alert
     createAlert(_props, className, classes) {
@@ -57,7 +60,7 @@ export class NotificationMU extends NotificationReact {
             React.createElement(DialogContent, null,
                 React.createElement(DialogContentText, null, this.content)),
             React.createElement(DialogActions, null,
-                React.createElement(Button, { color: "primary", onClick: () => this.returnValue(undefined), autoFocus: true }, labels.alertOK))));
+                React.createElement(LoadingButton, { color: "primary", onClick: async () => await this.returnValue(undefined), autoFocus: true }, labels.alertOK))));
     }
     // Create confirm
     createConfirm(_props, className, classes) {
@@ -73,8 +76,8 @@ export class NotificationMU extends NotificationReact {
             React.createElement(DialogContent, null,
                 React.createElement(DialogContentText, null, this.content)),
             React.createElement(DialogActions, null,
-                React.createElement(Button, { color: "secondary", onClick: () => this.returnValue(false) }, noLabel),
-                React.createElement(Button, { color: "primary", onClick: () => this.returnValue(true), autoFocus: true }, yesLabel))));
+                React.createElement(LoadingButton, { color: "secondary", onClick: async () => await this.returnValue(false) }, noLabel),
+                React.createElement(LoadingButton, { color: "primary", onClick: async () => await this.returnValue(true), autoFocus: true }, yesLabel))));
     }
     createMessageColor() {
         if (this.type === NotificationMessageType.Danger)

package/lib/mu/Tiplist.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { DataTypes } from '@etsoo/shared';
-import { AutocompleteProps } from '@mui/material';
+import { AutocompleteProps, TextFieldProps } from '@mui/material';
 /**
  * Tiplist props
  */
-export interface TiplistProps<T extends Record<string, any>> extends Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput' | 'options' | 'open'> {
+export interface TiplistProps<T extends Record<string, any>> extends Omit<AutocompleteProps<T, undefined, boolean, false>, 'renderInput' | 'options' | 'open'> {
     /**
      * Id field, default is id
      */
@@ -13,6 +13,10 @@ export interface TiplistProps<T extends Record<string, any>> extends Omit<Autoco
      * Id value
      */
     idValue?: DataTypes.IdType;
+    /**
+     * Input props
+     */
+    inputProps?: TextFieldProps;
     /**
      * Label of the field
      */

package/lib/mu/Tiplist.js

@@ -10,7 +10,7 @@ import { SearchField } from './SearchField';
  */
 export function Tiplist(props) {
     // Destruct
-    const { search = false, idField = 'id', idValue, label, loadData, defaultValue, value, name, readOnly, onChange, sx = { minWidth: '150px' }, ...rest } = props;
+    const { search = false, idField = 'id', idValue, inputProps, label, loadData, defaultValue, value, name, readOnly, onChange, sx = { minWidth: '150px' }, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Local value
@@ -149,5 +149,5 @@ export function Tiplist(props) {
                     open: false,
                     ...(!states.value && { options: [] })
                 });
-            }, loading: states.loading, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, readOnly: readOnly, ...params, label: label })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], ...rest })));
+            }, loading: states.loading, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...inputProps, onChange: changeHandle, readOnly: readOnly, label: label })) : (React.createElement(InputField, { ...inputProps, onChange: changeHandle, ...addReadOnly(params), label: label })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], ...rest })));
 }

package/lib/states/PageState.d.ts

@@ -8,7 +8,7 @@ export interface IPageData extends IState {
     /**
      * Page title
      */
-    title: string;
+    title?: string;
 }
 /**
  * Page action type

package/lib/states/PageState.js

@@ -35,7 +35,7 @@ export class PageState {
                 default:
                     return state;
             }
-        }, { title: '' }, {});
+        }, {}, {});
         this.context = context;
         this.provider = provider;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.1.90",
+    "version": "1.1.94",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/mu/ComboBox.tsx

@@ -2,7 +2,8 @@ import { DataTypes } from '@etsoo/shared';
 import {
     Autocomplete,
     AutocompleteProps,
-    AutocompleteRenderInputParams
+    AutocompleteRenderInputParams,
+    TextFieldProps
 } from '@mui/material';
 import React from 'react';
 import { Utils } from '../app/Utils';
@@ -13,7 +14,10 @@ import { SearchField } from './SearchField';
  * ComboBox props
  */
 export interface ComboBoxProps<T extends Record<string, any>>
-    extends Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput'> {
+    extends Omit<
+        AutocompleteProps<T, undefined, boolean, false>,
+        'renderInput'
+    > {
     /**
      * Id field, default is id
      */
@@ -24,6 +28,11 @@ export interface ComboBoxProps<T extends Record<string, any>>
      */
     idValue?: DataTypes.IdType;
 
+    /**
+     * Input props
+     */
+    inputProps?: TextFieldProps;
+
     /**
      * Label of the field
      */
@@ -57,12 +66,14 @@ export function ComboBox<T extends Record<string, any>>(
     const {
         search = false,
         idField = 'id',
+        inputProps,
         idValue,
         defaultValue,
         label,
         name,
         options,
-        readOnly,
+        disableClearable = true,
+        readOnly = true,
         onChange,
         value,
         sx = { minWidth: '120px' },
@@ -109,6 +120,7 @@ export function ComboBox<T extends Record<string, any>>(
             {/* Previous input will reset first, next input trigger change works */}
             <Autocomplete
                 defaultValue={localValue}
+                disableClearable={disableClearable}
                 isOptionEqualToValue={(option: T, value: T) =>
                     option[idField] === value[idField]
                 }
@@ -135,9 +147,17 @@ export function ComboBox<T extends Record<string, any>>(
                 sx={sx}
                 renderInput={(params) =>
                     search ? (
-                        <SearchField {...addReadOnly(params)} label={label} />
+                        <SearchField
+                            {...inputProps}
+                            {...addReadOnly(params)}
+                            label={label}
+                        />
                     ) : (
-                        <InputField {...addReadOnly(params)} label={label} />
+                        <InputField
+                            {...inputProps}
+                            {...addReadOnly(params)}
+                            label={label}
+                        />
                     )
                 }
                 options={options}

package/src/mu/NotifierMU.tsx

@@ -60,9 +60,12 @@ const IconDialogTitle = styled(DialogTitle)`
 export class NotificationMU extends NotificationReact {
     // On return
     // Dismiss first, then run callback
-    private returnValue(value: any) {
+    private async returnValue(value: any) {
+        if (this.onReturn) {
+            const result = await this.onReturn(value);
+            if (result === false) return;
+        }
         this.dismiss();
-        if (this.onReturn) this.onReturn(value);
     }
 
     // Create alert
@@ -107,13 +110,13 @@ export class NotificationMU extends NotificationReact {
                     <DialogContentText>{this.content}</DialogContentText>
                 </DialogContent>
                 <DialogActions>
-                    <Button
+                    <LoadingButton
                         color="primary"
-                        onClick={() => this.returnValue(undefined)}
+                        onClick={async () => await this.returnValue(undefined)}
                         autoFocus
                     >
                         {labels.alertOK}
-                    </Button>
+                    </LoadingButton>
                 </DialogActions>
             </Dialog>
         );
@@ -149,19 +152,19 @@ export class NotificationMU extends NotificationReact {
                     <DialogContentText>{this.content}</DialogContentText>
                 </DialogContent>
                 <DialogActions>
-                    <Button
+                    <LoadingButton
                         color="secondary"
-                        onClick={() => this.returnValue(false)}
+                        onClick={async () => await this.returnValue(false)}
                     >
                         {noLabel}
-                    </Button>
-                    <Button
+                    </LoadingButton>
+                    <LoadingButton
                         color="primary"
-                        onClick={() => this.returnValue(true)}
+                        onClick={async () => await this.returnValue(true)}
                         autoFocus
                     >
                         {yesLabel}
-                    </Button>
+                    </LoadingButton>
                 </DialogActions>
             </Dialog>
         );

package/src/mu/Tiplist.tsx

@@ -2,7 +2,8 @@ import { DataTypes } from '@etsoo/shared';
 import {
     Autocomplete,
     AutocompleteProps,
-    AutocompleteRenderInputParams
+    AutocompleteRenderInputParams,
+    TextFieldProps
 } from '@mui/material';
 import React from 'react';
 import { Utils } from '../app/Utils';
@@ -14,7 +15,7 @@ import { SearchField } from './SearchField';
  */
 export interface TiplistProps<T extends Record<string, any>>
     extends Omit<
-        AutocompleteProps<T, undefined, false, false>,
+        AutocompleteProps<T, undefined, boolean, false>,
         'renderInput' | 'options' | 'open'
     > {
     /**
@@ -27,6 +28,11 @@ export interface TiplistProps<T extends Record<string, any>>
      */
     idValue?: DataTypes.IdType;
 
+    /**
+     * Input props
+     */
+    inputProps?: TextFieldProps;
+
     /**
      * Label of the field
      */
@@ -75,6 +81,7 @@ export function Tiplist<T extends Record<string, any>>(props: TiplistProps<T>) {
         search = false,
         idField = 'id',
         idValue,
+        inputProps,
         label,
         loadData,
         defaultValue,
@@ -286,13 +293,14 @@ export function Tiplist<T extends Record<string, any>>(props: TiplistProps<T>) {
                 renderInput={(params) =>
                     search ? (
                         <SearchField
+                            {...inputProps}
                             onChange={changeHandle}
                             readOnly={readOnly}
-                            {...params}
                             label={label}
                         />
                     ) : (
                         <InputField
+                            {...inputProps}
                             onChange={changeHandle}
                             {...addReadOnly(params)}
                             label={label}

package/src/states/PageState.ts

@@ -9,7 +9,7 @@ export interface IPageData extends IState {
     /**
      * Page title
      */
-    title: string;
+    title?: string;
 }
 
 /**
@@ -89,7 +89,7 @@ export class PageState<D extends IPageData> {
                         return state;
                 }
             },
-            { title: '' } as D,
+            {} as D,
             {} as PageCalls<D>
         );