@etsoo/react 1.4.51 → 1.4.56

package/lib/app/ReactApp.d.ts

@@ -114,9 +114,10 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
     };
     /**
      * Get money format props
+     * @param currency Currency, if undefined, default currency applied
      * @returns Props
      */
-    getMoneyFormatProps(): {
+    getMoneyFormatProps(currency?: string): {
         culture: string;
         currency: string;
     };

package/lib/app/ReactApp.js

@@ -150,10 +150,11 @@ export class ReactApp extends CoreApp {
     }
     /**
      * Get money format props
+     * @param currency Currency, if undefined, default currency applied
      * @returns Props
      */
-    getMoneyFormatProps() {
-        return { culture: this.culture, currency: this.currency };
+    getMoneyFormatProps(currency) {
+        return { culture: this.culture, currency: currency !== null && currency !== void 0 ? currency : this.currency };
     }
     /**
      * Fresh countdown UI

package/lib/mu/ComboBox.d.ts

@@ -5,6 +5,10 @@ import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
  * ComboBox props
  */
 export interface ComboBoxProps<T extends {}> extends AutocompleteExtendedProps<T> {
+    /**
+     * Data readonly
+     */
+    dataReadonly?: boolean;
     /**
      * Label field
      */

package/lib/mu/ComboBox.js

@@ -1,3 +1,4 @@
+import { Keyboard } from '@etsoo/shared';
 import { Autocomplete } from '@mui/material';
 import React from 'react';
 import { Utils } from '../app/Utils';
@@ -10,7 +11,7 @@ import { SearchField } from './SearchField';
  */
 export function ComboBox(props) {
     // Destruct
-    const { search = false, idField = 'id', idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = 'label', loadData, onLoadData, name, inputAutoComplete = 'off', options, readOnly = true, onChange, value, getOptionLabel = (option) => String(Reflect.get(option, labelField)), sx = { minWidth: '150px' }, ...rest } = props;
+    const { search = false, idField = 'id', idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = 'label', loadData, onLoadData, name, inputAutoComplete = 'off', options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, getOptionLabel = (option) => String(Reflect.get(option, labelField)), sx = { minWidth: '150px' }, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
@@ -47,6 +48,13 @@ export function ComboBox(props) {
                 Object.assign(params.inputProps, { 'data-reset': true });
             }
         }
+        if (dataReadonly) {
+            params.inputProps.onKeyDown = (event) => {
+                if (Keyboard.isTypingContent(event.key)) {
+                    event.preventDefault();
+                }
+            };
+        }
         // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
         // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
         Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
@@ -89,5 +97,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, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, ...rest })));
+            }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, name: name + 'Input', margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, ...rest })));
 }

package/lib/mu/MobileListItemRenderer.d.ts

@@ -12,5 +12,6 @@ export declare function MobileListItemRenderer<T>({ data, itemHeight, margins }:
     string,
     string | undefined,
     React.ReactNode | (ListItemReact | boolean)[],
-    React.ReactNode
+    React.ReactNode,
+    React.ReactNode?
 ]): JSX.Element;

package/lib/mu/MobileListItemRenderer.js

@@ -22,8 +22,9 @@ export function MobileListItemRenderer({ data, itemHeight, margins }, renderer)
     // Loading
     if (data == null)
         return React.createElement(LinearProgress, null);
+    console.log('margins', margins);
     // Elements
-    const [title, subheader, actions, children] = renderer(data);
+    const [title, subheader, actions, children, cardActions] = renderer(data);
     return (React.createElement(Card, { sx: {
             height: itemHeight,
             ...margins
@@ -61,6 +62,8 @@ export function MobileListItemRenderer({ data, itemHeight, margins }, renderer)
                     }
                 } })) : (actions), title: title, titleTypographyProps: { variant: 'body2' }, subheader: subheader, subheaderTypographyProps: { variant: 'caption' } }),
         React.createElement(CardContent, { sx: {
-                paddingTop: 0
-            } }, children)));
+                paddingTop: 0,
+                paddingBottom: cardActions == null ? margins : 0
+            } }, children),
+        cardActions));
 }

package/lib/mu/TextFieldEx.js

@@ -3,6 +3,7 @@ import { IconButton, InputAdornment, TextField } from '@mui/material';
 import { MUGlobal } from './MUGlobal';
 import { Clear, Visibility } from '@mui/icons-material';
 import useCombinedRefs from '../uses/useCombinedRefs';
+import { Keyboard } from '@etsoo/shared';
 export const TextFieldEx = React.forwardRef((props, ref) => {
     // Destructure
     const { changeDelay, error, fullWidth = true, helperText, InputProps = {}, onChange, onKeyPress, onEnter, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
@@ -71,7 +72,7 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
     const onKeyPressEx = onEnter == null
         ? onKeyPress
         : (e) => {
-            if (e.key === 'Enter') {
+            if (e.key === Keyboard.Keys.Enter) {
                 // Enter press callback
                 onEnter(e);
             }

package/lib/mu/Tiplist.js

@@ -11,7 +11,7 @@ import { SearchField } from './SearchField';
  */
 export function Tiplist(props) {
     // Destruct
-    const { search = false, idField = 'id', idValue, inputAutoComplete = 'off', inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, name, readOnly, onChange, sx = { minWidth: '180px' }, ...rest } = props;
+    const { search = false, idField = 'id', idValue, inputAutoComplete = 'off', inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, name, readOnly, onChange, openOnFocus = true, sx = { minWidth: '180px' }, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Local value
@@ -145,7 +145,7 @@ export function Tiplist(props) {
                     stateUpdate({ options: [] });
                     loadDataDirect();
                 }
-            }, open: states.open, onOpen: () => {
+            }, open: states.open, openOnFocus: openOnFocus, onOpen: () => {
                 // Should load
                 const loading = states.loading
                     ? true

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.51",
+    "version": "1.4.56",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.25",
+        "@etsoo/appscript": "^1.2.27",
         "@etsoo/notificationbase": "^1.1.0",
-        "@etsoo/shared": "^1.1.5",
+        "@etsoo/shared": "^1.1.6",
         "@mui/icons-material": "^5.3.0",
         "@mui/material": "^5.3.0",
         "@reach/router": "^1.3.4",
@@ -77,9 +77,9 @@
     },
     "devDependencies": {
         "@babel/cli": "^7.16.8",
-        "@babel/core": "^7.16.7",
-        "@babel/plugin-transform-runtime": "^7.16.8",
-        "@babel/preset-env": "^7.16.8",
+        "@babel/core": "^7.16.10",
+        "@babel/plugin-transform-runtime": "^7.16.10",
+        "@babel/preset-env": "^7.16.11",
         "@babel/runtime-corejs3": "^7.16.8",
         "@types/jest": "^27.4.0",
         "@types/react-test-renderer": "^17.0.1",
@@ -92,6 +92,6 @@
         "jest": "^27.4.7",
         "react-test-renderer": "^17.0.2",
         "ts-jest": "^27.1.3",
-        "typescript": "^4.5.4"
+        "typescript": "^4.5.5"
     }
 }

package/src/app/ReactApp.ts

@@ -292,10 +292,11 @@ export class ReactApp<
 
     /**
      * Get money format props
+     * @param currency Currency, if undefined, default currency applied
      * @returns Props
      */
-    getMoneyFormatProps() {
-        return { culture: this.culture, currency: this.currency };
+    getMoneyFormatProps(currency?: string) {
+        return { culture: this.culture, currency: currency ?? this.currency };
     }
 
     /**

package/src/mu/ComboBox.tsx

@@ -1,4 +1,5 @@
 import { IdLabelDto } from '@etsoo/appscript';
+import { Keyboard } from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
 import { Utils } from '../app/Utils';
@@ -11,6 +12,11 @@ import { SearchField } from './SearchField';
  */
 export interface ComboBoxProps<T extends {}>
     extends AutocompleteExtendedProps<T> {
+    /**
+     * Data readonly
+     */
+    dataReadonly?: boolean;
+
     /**
      * Label field
      */
@@ -57,8 +63,10 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         name,
         inputAutoComplete = 'off',
         options,
-        readOnly = true,
+        dataReadonly = true,
+        readOnly,
         onChange,
+        openOnFocus = true,
         value,
         getOptionLabel = (option: T) => String(Reflect.get(option, labelField)),
         sx = { minWidth: '150px' },
@@ -109,6 +117,14 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
             }
         }
 
+        if (dataReadonly) {
+            params.inputProps.onKeyDown = (event) => {
+                if (Keyboard.isTypingContent(event.key)) {
+                    event.preventDefault();
+                }
+            };
+        }
+
         // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
         // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
         Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
@@ -176,6 +192,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
                     if (onChange != null)
                         onChange(event, value, reason, details);
                 }}
+                openOnFocus={openOnFocus}
                 sx={sx}
                 renderInput={(params) =>
                     search ? (

package/src/mu/MobileListItemRenderer.tsx

@@ -29,14 +29,17 @@ export function MobileListItemRenderer<T>(
         string,
         string | undefined,
         React.ReactNode | (ListItemReact | boolean)[],
-        React.ReactNode
+        React.ReactNode,
+        React.ReactNode?
     ]
 ) {
     // Loading
     if (data == null) return <LinearProgress />;
 
+    console.log('margins', margins);
+
     // Elements
-    const [title, subheader, actions, children] = renderer(data);
+    const [title, subheader, actions, children, cardActions] = renderer(data);
 
     return (
         <Card
@@ -100,11 +103,13 @@ export function MobileListItemRenderer<T>(
             />
             <CardContent
                 sx={{
-                    paddingTop: 0
+                    paddingTop: 0,
+                    paddingBottom: cardActions == null ? margins : 0
                 }}
             >
                 {children}
             </CardContent>
+            {cardActions}
         </Card>
     );
 }

package/src/mu/TextFieldEx.tsx

@@ -8,6 +8,7 @@ import {
 import { MUGlobal } from './MUGlobal';
 import { Clear, Visibility } from '@mui/icons-material';
 import useCombinedRefs from '../uses/useCombinedRefs';
+import { Keyboard } from '@etsoo/shared';
 
 /**
  * Extended text field props
@@ -166,7 +167,7 @@ export const TextFieldEx = React.forwardRef<
         onEnter == null
             ? onKeyPress
             : (e: React.KeyboardEvent<HTMLDivElement>) => {
-                  if (e.key === 'Enter') {
+                  if (e.key === Keyboard.Keys.Enter) {
                       // Enter press callback
                       onEnter(e);
                   }

package/src/mu/Tiplist.tsx

@@ -54,6 +54,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
         name,
         readOnly,
         onChange,
+        openOnFocus = true,
         sx = { minWidth: '180px' },
         ...rest
     } = props;
@@ -242,6 +243,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
                     }
                 }}
                 open={states.open}
+                openOnFocus={openOnFocus}
                 onOpen={() => {
                     // Should load
                     const loading = states.loading