@etsoo/react 1.4.83 → 1.4.87

package/lib/app/ServiceApp.d.ts

@@ -34,8 +34,9 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, P extends
     constructor(settings: S, name: string);
     /**
      * Go to the login page
+     * @param tryLogin Try to login again
      */
-    toLoginPage(): void;
+    toLoginPage(tryLogin?: boolean): void;
     /**
      * Refresh token
      * @param props Props

package/lib/app/ServiceApp.js

@@ -41,8 +41,9 @@ export class ServiceApp extends ReactApp {
     }
     /**
      * Go to the login page
+     * @param tryLogin Try to login again
      */
-    toLoginPage() {
+    toLoginPage(tryLogin) {
         const coreUrl = this.settings.webUrl;
         window.location.href =
             coreUrl +
@@ -51,7 +52,8 @@ export class ServiceApp extends ReactApp {
                 '&' +
                 DomUtils.CultureField +
                 '=' +
-                this.culture;
+                this.culture +
+                (tryLogin ? '' : '&tryLogin=false');
     }
     /**
      * Refresh token

package/lib/mu/AuditDisplay.js

@@ -1,5 +1,5 @@
 import { Utils } from '@etsoo/shared';
-import { Button, Divider, Table, TableBody, TableCell, TableHead, TableRow, useTheme } from '@mui/material';
+import { Button, Divider, Table, TableBody, TableCell, TableHead, TableRow, Typography, useTheme } from '@mui/material';
 import React from 'react';
 import { globalApp, NotificationMessageType } from '..';
 import { ListMoreDisplay } from './ListMoreDisplay';
@@ -57,11 +57,11 @@ export function AuditDisplay(props) {
                 React.createElement(TableCell, null, getLabel(row.field)),
                 React.createElement(TableCell, { align: "right" }, formatValue(row.oldValue)),
                 React.createElement(TableCell, { align: "right" }, formatValue(row.newValue))))))));
-        globalApp.notifier.alert(undefined, undefined, NotificationMessageType.Info, { fullScreen: globalApp.smDown, inputs, title: dataComparisonLabel });
+        globalApp.notifier.alert([undefined, dataComparisonLabel], undefined, NotificationMessageType.Info, { fullScreen: globalApp.smDown, inputs });
     };
     // Destruct
     const { getItemStyle = (index, theme) => ({
-        padding: theme.spacing(1),
+        padding: [theme.spacing(1.5), theme.spacing(1)].join(' '),
         background: index % 2 === 0
             ? theme.palette.grey[100]
             : theme.palette.grey[50]
@@ -69,15 +69,16 @@ export function AuditDisplay(props) {
         return (React.createElement(React.Fragment, null,
             data.changes != null && (React.createElement(Button, { variant: "outlined", size: "small", onClick: () => showDataComparison(data.changes), sx: {
                     marginLeft: theme.spacing(1),
+                    marginTop: theme.spacing(-0.5),
                     float: 'right'
                 } }, dataComparisonLabel)),
-            formatDate(data.creation) +
+            React.createElement(Typography, null, formatDate(data.creation) +
                 ', [' +
                 getLabel(data.action) +
                 '], ' +
-                data.user));
+                data.user)));
     }, headerTitle = (React.createElement(React.Fragment, null,
-        getLabel('audits'),
+        React.createElement(Typography, null, getLabel('audits')),
         React.createElement(Divider, null))), ...rest } = props;
     // Layout
     return (React.createElement(ListMoreDisplay, { headerTitle: headerTitle, ...rest }, (data, index) => (React.createElement("div", { key: data.id, style: getItemStyle(index, theme) }, itemRenderer(data, index)))));

package/lib/mu/ComboBox.d.ts

@@ -5,6 +5,10 @@ import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
  * ComboBox props
  */
 export interface ComboBoxProps<T extends {}> extends AutocompleteExtendedProps<T> {
+    /**
+     * Auto add blank item
+     */
+    autoAddBlankItem?: boolean;
     /**
      * Data readonly
      */

package/lib/mu/ComboBox.js

@@ -12,7 +12,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, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, getOptionLabel = (option) => String(Reflect.get(option, labelField)), sx = { minWidth: '150px' }, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, 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
@@ -82,7 +82,7 @@ export function ComboBox(props) {
                     return;
                 if (onLoadData)
                     onLoadData(result);
-                if (search) {
+                if (autoAddBlankItem) {
                     SharedUtils.addBlankItem(result, idField, labelField);
                 }
                 setOptions(result);

package/lib/mu/SelectBool.js

@@ -9,13 +9,13 @@ import { SelectEx } from './SelectEx';
  */
 export function SelectBool(props) {
     // Destruct
-    const { search = true, ...rest } = props;
+    const { search = true, autoAddBlankItem = search, ...rest } = props;
     // Options
     const options = [
         { id: 'false', label: globalApp.get('no') },
         { id: 'true', label: globalApp.get('yes') }
     ];
-    if (search)
+    if (autoAddBlankItem)
         Utils.addBlankItem(options);
     // Layout
     return React.createElement(SelectEx, { options: options, search: search, ...rest });

package/lib/mu/SelectEx.d.ts

@@ -5,6 +5,10 @@ import { IdLabelDto } from '@etsoo/appscript';
  * Extended select component props
  */
 export interface SelectExProps<T extends {}> extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
+    /**
+     * Auto add blank item
+     */
+    autoAddBlankItem?: boolean;
     /**
      * Id field, default is id
      */

package/lib/mu/SelectEx.js

@@ -12,7 +12,7 @@ import { Utils } from '@etsoo/shared';
 export function SelectEx(props) {
     var _a;
     // Destruct
-    const { defaultValue, idField = 'id', itemIconRenderer, label, labelField = 'label', loadData, onItemClick, onLoadData, multiple = false, name, options = [], search = false, value, onChange, ...rest } = props;
+    const { defaultValue, idField = 'id', itemIconRenderer, label, labelField = 'label', loadData, onItemClick, onLoadData, multiple = false, name, options = [], search = false, autoAddBlankItem = search, value, onChange, ...rest } = props;
     // Options state
     const [localOptions, setOptions] = React.useState(options);
     const isMounted = React.useRef(true);
@@ -97,7 +97,7 @@ export function SelectEx(props) {
                     return;
                 if (onLoadData)
                     onLoadData(result);
-                if (search) {
+                if (autoAddBlankItem) {
                     Utils.addBlankItem(result, idField, labelField);
                 }
                 setOptions(result);

package/lib/mu/pages/ViewPage.js

@@ -18,6 +18,7 @@ function getItemField(field, data) {
     var _a, _b, _c;
     // Item data and label
     let itemData, itemLabel, gridProps = {};
+    let xs = 6;
     if (Array.isArray(field)) {
         const [fieldData, fieldType, renderProps] = field;
         itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
@@ -25,11 +26,13 @@ function getItemField(field, data) {
     }
     else if (typeof field === 'object') {
         // Destruct
-        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = false, ...rest } = field;
+        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow, ...rest } = field;
         gridProps = {
             ...rest,
             ...(singleRow && { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 })
         };
+        if (singleRow === false)
+            xs = 12;
         // Field data
         if (typeof fieldData === 'function')
             itemData = fieldData(data);
@@ -50,7 +53,7 @@ function getItemField(field, data) {
     return [
         itemData,
         itemLabel,
-        { xs: 12, sm: 6, md: 6, lg: 4, xl: 3, ...gridProps }
+        { xs, sm: 6, md: 6, lg: 4, xl: 3, ...gridProps }
     ];
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.83",
+    "version": "1.4.87",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,8 +50,8 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.32",
-        "@etsoo/notificationbase": "^1.1.0",
+        "@etsoo/appscript": "^1.2.34",
+        "@etsoo/notificationbase": "^1.1.1",
         "@etsoo/shared": "^1.1.9",
         "@mui/icons-material": "^5.3.1",
         "@mui/material": "^5.4.0",

package/src/app/ServiceApp.ts

@@ -69,8 +69,9 @@ export class ServiceApp<
 
     /**
      * Go to the login page
+     * @param tryLogin Try to login again
      */
-    override toLoginPage() {
+    override toLoginPage(tryLogin?: boolean) {
         const coreUrl = this.settings.webUrl;
         window.location.href =
             coreUrl +
@@ -79,7 +80,8 @@ export class ServiceApp<
             '&' +
             DomUtils.CultureField +
             '=' +
-            this.culture;
+            this.culture +
+            (tryLogin ? '' : '&tryLogin=false');
     }
 
     /**

package/src/mu/AuditDisplay.tsx

@@ -8,6 +8,7 @@ import {
     TableHead,
     TableRow,
     Theme,
+    Typography,
     useTheme
 } from '@mui/material';
 import React, { CSSProperties } from 'react';
@@ -126,17 +127,17 @@ export function AuditDisplay(props: AuditDisplayProps) {
         );
 
         globalApp.notifier.alert(
-            undefined,
+            [undefined, dataComparisonLabel],
             undefined,
             NotificationMessageType.Info,
-            { fullScreen: globalApp.smDown, inputs, title: dataComparisonLabel }
+            { fullScreen: globalApp.smDown, inputs }
         );
     };
 
     // Destruct
     const {
         getItemStyle = (index, theme) => ({
-            padding: theme.spacing(1),
+            padding: [theme.spacing(1.5), theme.spacing(1)].join(' '),
             background:
                 index % 2 === 0
                     ? theme.palette.grey[100]
@@ -152,23 +153,26 @@ export function AuditDisplay(props: AuditDisplayProps) {
                             onClick={() => showDataComparison(data.changes!)}
                             sx={{
                                 marginLeft: theme.spacing(1),
+                                marginTop: theme.spacing(-0.5),
                                 float: 'right'
                             }}
                         >
                             {dataComparisonLabel}
                         </Button>
                     )}
-                    {formatDate(data.creation) +
-                        ', [' +
-                        getLabel(data.action) +
-                        '], ' +
-                        data.user}
+                    <Typography>
+                        {formatDate(data.creation) +
+                            ', [' +
+                            getLabel(data.action) +
+                            '], ' +
+                            data.user}
+                    </Typography>
                 </React.Fragment>
             );
         },
         headerTitle = (
             <React.Fragment>
-                {getLabel('audits')}
+                <Typography>{getLabel('audits')}</Typography>
                 <Divider />
             </React.Fragment>
         ),

package/src/mu/ComboBox.tsx

@@ -13,6 +13,11 @@ import { SearchField } from './SearchField';
  */
 export interface ComboBoxProps<T extends {}>
     extends AutocompleteExtendedProps<T> {
+    /**
+     * Auto add blank item
+     */
+    autoAddBlankItem?: boolean;
+
     /**
      * Data readonly
      */
@@ -48,6 +53,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
     // Destruct
     const {
         search = false,
+        autoAddBlankItem = search,
         idField = 'id',
         idValue,
         inputError,
@@ -156,7 +162,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
             loadData().then((result) => {
                 if (result == null || !isMounted.current) return;
                 if (onLoadData) onLoadData(result);
-                if (search) {
+                if (autoAddBlankItem) {
                     SharedUtils.addBlankItem(result, idField, labelField);
                 }
                 setOptions(result);

package/src/mu/SelectBool.tsx

@@ -17,7 +17,7 @@ export interface SelectBoolProps
  */
 export function SelectBool(props: SelectBoolProps) {
     // Destruct
-    const { search = true, ...rest } = props;
+    const { search = true, autoAddBlankItem = search, ...rest } = props;
 
     // Options
     const options: IdLabelDto<string>[] = [
@@ -25,7 +25,7 @@ export function SelectBool(props: SelectBoolProps) {
         { id: 'true', label: globalApp.get('yes')! }
     ];
 
-    if (search) Utils.addBlankItem(options);
+    if (autoAddBlankItem) Utils.addBlankItem(options);
 
     // Layout
     return <SelectEx options={options} search={search} {...rest} />;

package/src/mu/SelectEx.tsx

@@ -21,6 +21,11 @@ import { Utils } from '@etsoo/shared';
  */
 export interface SelectExProps<T extends {}>
     extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
+    /**
+     * Auto add blank item
+     */
+    autoAddBlankItem?: boolean;
+
     /**
      * Id field, default is id
      */
@@ -82,6 +87,7 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
         name,
         options = [],
         search = false,
+        autoAddBlankItem = search,
         value,
         onChange,
         ...rest
@@ -172,7 +178,7 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
             loadData().then((result) => {
                 if (result == null || !isMounted.current) return;
                 if (onLoadData) onLoadData(result);
-                if (search) {
+                if (autoAddBlankItem) {
                     Utils.addBlankItem(result, idField, labelField);
                 }
                 setOptions(result);

package/src/mu/pages/ViewPage.tsx

@@ -103,6 +103,8 @@ function getItemField<T>(
         itemLabel: React.ReactNode,
         gridProps: GridProps = {};
 
+    let xs = 6;
+
     if (Array.isArray(field)) {
         const [fieldData, fieldType, renderProps] = field;
         itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
@@ -114,7 +116,7 @@ function getItemField<T>(
             dataType,
             label: fieldLabel,
             renderProps,
-            singleRow = false,
+            singleRow,
             ...rest
         } = field;
 
@@ -123,6 +125,8 @@ function getItemField<T>(
             ...(singleRow && { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 })
         };
 
+        if (singleRow === false) xs = 12;
+
         // Field data
         if (typeof fieldData === 'function') itemData = fieldData(data);
         else if (dataType == null) itemData = formatItemData(data[fieldData]);
@@ -144,7 +148,7 @@ function getItemField<T>(
     return [
         itemData,
         itemLabel,
-        { xs: 12, sm: 6, md: 6, lg: 4, xl: 3, ...gridProps }
+        { xs, sm: 6, md: 6, lg: 4, xl: 3, ...gridProps }
     ];
 }