@etsoo/react 1.2.11 → 1.2.15

package/lib/mu/Tiplist.d.ts

@@ -4,7 +4,7 @@ import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
 /**
  * Tiplist props
  */
-export interface TiplistProps<T extends Record<string, any>> extends Omit<AutocompleteExtendedProps<T>, 'options' | 'open'> {
+export interface TiplistProps<T extends Record<string, any>> extends Omit<AutocompleteExtendedProps<T>, 'open'> {
     /**
      * Load data callback
      */

package/lib/notifier/Notifier.d.ts

@@ -1,11 +1,45 @@
 import React from 'react';
-import { INotification, INotifier, Notification, NotificationAlign, NotificationContainer, NotificationRenderProps } from '@etsoo/notificationbase';
+import { INotification, INotifier, Notification, NotificationAlign, NotificationCallProps, NotificationContainer, NotificationRenderProps } from '@etsoo/notificationbase';
 import { IAction } from '@etsoo/appscript';
 import { IProviderProps } from '../states/IState';
+import { Breakpoint } from '@mui/material';
+/**
+ * React notification call props
+ */
+export interface NotificationReactCallProps extends NotificationCallProps {
+    /**
+     * Full width
+     */
+    fullWidth?: boolean;
+    /**
+     * Full screen
+     */
+    fullScreen?: boolean;
+    /**
+     * Inputs layout
+     */
+    inputs?: React.ReactNode;
+    /**
+     * Max width
+     */
+    maxWidth?: Breakpoint | false;
+    /**
+     * OK label
+     */
+    okLabel?: string;
+    /**
+     * Cancel label
+     */
+    cancelLabel?: string;
+    /**
+     * Type
+     */
+    type?: string;
+}
 /**
  * React notification interface
  */
-export interface INotificationReact extends INotification<React.ReactNode> {
+export interface INotificationReact extends INotification<React.ReactNode, NotificationReactCallProps> {
 }
 /**
  * Action to manage the notifier
@@ -23,7 +57,7 @@ interface INotifierAction extends IAction {
 /**
  * React notification
  */
-export declare abstract class NotificationReact extends Notification<React.ReactNode> {
+export declare abstract class NotificationReact extends Notification<React.ReactNode, NotificationReactCallProps> {
 }
 /**
  * React notification render props
@@ -33,7 +67,7 @@ export interface NotificationReactRenderProps extends NotificationRenderProps, I
 /**
  * Notifier interface
  */
-export interface INotifierReact extends INotifier<React.ReactNode> {
+export interface INotifierReact extends INotifier<React.ReactNode, NotificationReactCallProps> {
     /**
      * Create state provider
      * @param className Style class name
@@ -51,7 +85,7 @@ export interface INotifierOptions {
 /**
  * Notifier for React
  */
-export declare abstract class NotifierReact extends NotificationContainer<React.ReactNode> implements INotifierReact {
+export declare abstract class NotifierReact extends NotificationContainer<React.ReactNode, NotificationReactCallProps> implements INotifierReact {
     private static _instance;
     /**
      * Singleton instance
@@ -76,13 +110,12 @@ export declare abstract class NotifierReact extends NotificationContainer<React.
      * @param children Children
      * @param options Other options
      */
-    protected abstract createContainer(align: NotificationAlign, children: React.ReactNode[], options: any): React.ReactElement;
+    protected abstract createContainer(align: NotificationAlign, children: React.ReactNode[]): React.ReactElement;
     /**
      * Create state provider
      * @param className Style class name
-     * @param optionGenerator Options generator
      * @returns Provider
      */
-    createProvider(className?: string, optionGenerator?: INotifierOptions): React.FunctionComponent<NotificationReactRenderProps>;
+    createProvider(className?: string): React.FunctionComponent<NotificationReactRenderProps>;
 }
 export {};

package/lib/notifier/Notifier.js

@@ -35,25 +35,22 @@ export class NotifierReact extends NotificationContainer {
     /**
      * Create state provider
      * @param className Style class name
-     * @param optionGenerator Options generator
      * @returns Provider
      */
-    createProvider(className, optionGenerator) {
+    createProvider(className) {
         // Custom creator
         const creator = (state, update, props) => {
             // Hold the current state update
             this.stateUpdate = update;
-            // Options
-            const options = optionGenerator ? optionGenerator() : {};
             // Aligns collection
             const aligns = [];
             for (const align in state) {
                 // Notifications under the align
                 const notifications = state[align];
                 // UI collections
-                const ui = notifications.map((notification) => notification.render(props, className + '-item', options));
+                const ui = notifications.map((notification) => notification.render(props, className + '-item'));
                 // Add to the collection
-                aligns.push(this.createContainer(Number(align), ui, options));
+                aligns.push(this.createContainer(Number(align), ui));
             }
             // Generate the component
             return React.createElement('div', { className }, aligns);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.2.11",
+    "version": "1.2.15",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -44,9 +44,9 @@
         "@emotion/react": "^11.4.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.3.0",
-        "@etsoo/appscript": "^1.0.99",
-        "@etsoo/notificationbase": "^1.0.78",
-        "@etsoo/shared": "^1.0.44",
+        "@etsoo/appscript": "^1.1.3",
+        "@etsoo/notificationbase": "^1.0.79",
+        "@etsoo/shared": "^1.0.46",
         "@mui/icons-material": "^5.0.1",
         "@mui/material": "^5.0.2",
         "@reach/router": "^1.3.4",

package/src/app/InputDialogProps.ts

@@ -1,9 +1,10 @@
 import { NotificationReturn } from '@etsoo/notificationbase';
+import { NotificationReactCallProps } from '../notifier/Notifier';
 
 /**
  * Input dialog props
  */
-export type InputDialogProps = {
+export type InputDialogProps = NotificationReactCallProps & {
     /**
      * Title
      */
@@ -14,23 +15,8 @@ export type InputDialogProps = {
      */
     message: string;
 
-    /**
-     * Inputs layout
-     */
-    inputs: React.ReactNode;
-
     /**
      * Callback
      */
     callback: NotificationReturn<HTMLFormElement>;
-
-    /**
-     * OK label
-     */
-    okLabel?: string;
-
-    /**
-     * Cancel label
-     */
-    cancelLabel?: string;
 };

package/src/app/ReactApp.ts

@@ -8,6 +8,7 @@ import {
 import { DataTypes } from '@etsoo/shared';
 import React from 'react';
 import { NotifierPromptProps } from '../mu/NotifierPromptProps';
+import { NotificationReactCallProps } from '../notifier/Notifier';
 import { CultureAction } from '../states/CultureState';
 import { IStateProps } from '../states/IState';
 import { IPageData, PageAction, PageActionType } from '../states/PageState';
@@ -56,11 +57,29 @@ export interface IReactApp<
     S extends IAppSettings,
     D extends IUser,
     P extends IPageData
-> extends ICoreApp<S, React.ReactNode> {
+> extends ICoreApp<S, React.ReactNode, NotificationReactCallProps> {
     /**
      * User state
      */
     readonly userState: UserState<D>;
+
+    /**
+     * Set page data
+     * @param data Page data
+     */
+    setPageData(data: P): void;
+
+    /**
+     * Set page title and data
+     * @param key Page title resource key
+     */
+    setPageKey(key: string): void;
+
+    /**
+     * Set page title and data
+     * @param title Page title
+     */
+    setPageTitle(title: string): void;
 }
 
 /**
@@ -71,7 +90,7 @@ export abstract class ReactApp<
         D extends IUser,
         P extends IPageData
     >
-    extends CoreApp<S, React.ReactNode>
+    extends CoreApp<S, React.ReactNode, NotificationReactCallProps>
     implements IReactApp<S, D, P>
 {
     /**
@@ -190,17 +209,10 @@ export abstract class ReactApp<
     showInputDialog({
         title,
         message,
-        inputs,
         callback,
-        cancelLabel,
-        okLabel
+        ...rest
     }: InputDialogProps): void {
-        const props: NotifierPromptProps = {
-            okLabel,
-            cancelLabel,
-            inputs
-        };
-        this.notifier.prompt<HTMLFormElement>(message, callback, title, props);
+        this.notifier.prompt<HTMLFormElement>(message, callback, title, rest);
     }
 
     /**

package/src/mu/AutocompleteExtendedProps.ts

@@ -5,7 +5,10 @@ import { AutocompleteProps } from '@mui/material';
  * Autocomplete extended props
  */
 export interface AutocompleteExtendedProps<T extends Record<string, any>>
-    extends Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput'> {
+    extends Omit<
+        AutocompleteProps<T, undefined, false, false>,
+        'renderInput' | 'options'
+    > {
     /**
      * Id field, default is id
      */

package/src/mu/ComboBox.tsx

@@ -9,7 +9,17 @@ import { SearchField } from './SearchField';
  * ComboBox props
  */
 export interface ComboBoxProps<T extends Record<string, any>>
-    extends AutocompleteExtendedProps<T> {}
+    extends AutocompleteExtendedProps<T> {
+    /**
+     * Load data callback
+     */
+    loadData?: () => PromiseLike<T[] | null | undefined>;
+
+    /**
+     * Array of options.
+     */
+    options?: ReadonlyArray<T>;
+}
 
 /**
  * ComboBox
@@ -29,8 +39,9 @@ export function ComboBox<T extends Record<string, any>>(
         inputVariant,
         defaultValue,
         label,
+        loadData,
         name,
-        options,
+        options = [],
         readOnly = true,
         onChange,
         value,
@@ -41,10 +52,14 @@ export function ComboBox<T extends Record<string, any>>(
     // Value input ref
     const inputRef = React.createRef<HTMLInputElement>();
 
+    // Options state
+    const [localOptions, setOptions] = React.useState(options);
+    const isMounted = React.useRef(true);
+
     // Local default value
     const localValue =
         idValue != null
-            ? options.find((o) => o[idField] === idValue)
+            ? localOptions.find((o) => o[idField] === idValue)
             : defaultValue ?? value;
 
     // Current id value
@@ -64,6 +79,19 @@ export function ComboBox<T extends Record<string, any>>(
         return params;
     };
 
+    React.useEffect(() => {
+        if (loadData) {
+            loadData().then((result) => {
+                if (result == null || !isMounted.current) return;
+                setOptions(result);
+            });
+        }
+
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+
     // Layout
     return (
         <div>
@@ -121,7 +149,7 @@ export function ComboBox<T extends Record<string, any>>(
                         />
                     )
                 }
-                options={options}
+                options={localOptions}
                 {...rest}
             />
         </div>

package/src/mu/NotifierMU.tsx

@@ -16,7 +16,6 @@ import {
     Button,
     CircularProgress,
     CircularProgressProps,
-    ClassNameMap,
     Dialog,
     DialogActions,
     DialogContent,
@@ -35,10 +34,10 @@ import { Labels } from '../app/Labels';
 import {
     INotificationReact,
     NotificationReact,
+    NotificationReactCallProps,
     NotifierReact
 } from '../notifier/Notifier';
 import { DraggablePaperComponent } from './DraggablePaperComponent';
-import { NotifierPromptProps } from './NotifierPromptProps';
 import { LoadingButton } from './LoadingButton';
 
 // Custom icon dialog title bar
@@ -69,13 +68,16 @@ export class NotificationMU extends NotificationReact {
     }
 
     // Create alert
-    private createAlert(
-        _props: NotificationRenderProps,
-        className: string,
-        classes: ClassNameMap<string>
-    ) {
+    private createAlert(_props: NotificationRenderProps, className: string) {
         const labels = Labels.NotificationMU;
 
+        const {
+            inputs,
+            fullScreen,
+            fullWidth = true,
+            maxWidth
+        } = this.inputProps ?? {};
+
         let title = this.title;
         let icon: React.ReactNode;
         if (this.type === NotificationMessageType.Success) {
@@ -98,16 +100,17 @@ export class NotificationMU extends NotificationReact {
                 open={this.open}
                 PaperComponent={DraggablePaperComponent}
                 className={className}
+                fullWidth={fullWidth}
+                maxWidth={maxWidth}
+                fullScreen={fullScreen}
             >
-                <IconDialogTitle
-                    className={classes.iconTitle}
-                    id="draggable-dialog-title"
-                >
+                <IconDialogTitle id="draggable-dialog-title">
                     {icon}
                     <span className="dialogTitle">{title}</span>
                 </IconDialogTitle>
                 <DialogContent>
                     <DialogContentText>{this.content}</DialogContentText>
+                    {inputs}
                 </DialogContent>
                 <DialogActions>
                     <LoadingButton
@@ -123,16 +126,21 @@ export class NotificationMU extends NotificationReact {
     }
 
     // Create confirm
-    private createConfirm(
-        _props: NotificationRenderProps,
-        className: string,
-        classes: ClassNameMap<string>
-    ) {
+    private createConfirm(_props: NotificationRenderProps, className: string) {
         const labels = Labels.NotificationMU;
         const title = this.title ?? labels.confirmTitle;
 
-        const noLabel = labels.confirmNo;
-        const yesLabel = labels.confirmYes;
+        const {
+            okLabel,
+            cancelLabel,
+            inputs,
+            fullScreen,
+            fullWidth = true,
+            maxWidth
+        } = this.inputProps ?? {};
+
+        const noLabel = cancelLabel ?? labels.confirmNo;
+        const yesLabel = okLabel ?? labels.confirmYes;
 
         return (
             <Dialog
@@ -140,16 +148,17 @@ export class NotificationMU extends NotificationReact {
                 open={this.open}
                 PaperComponent={DraggablePaperComponent}
                 className={className}
+                fullWidth={fullWidth}
+                maxWidth={maxWidth}
+                fullScreen={fullScreen}
             >
-                <IconDialogTitle
-                    className={classes.iconTitle}
-                    id="draggable-dialog-title"
-                >
+                <IconDialogTitle id="draggable-dialog-title">
                     <Help color="action" />
                     <span className="dialogTitle">{title}</span>
                 </IconDialogTitle>
                 <DialogContent>
                     <DialogContentText>{this.content}</DialogContentText>
+                    {inputs}
                 </DialogContent>
                 <DialogActions>
                     <LoadingButton
@@ -178,11 +187,7 @@ export class NotificationMU extends NotificationReact {
     }
 
     // Create message
-    private createMessage(
-        _props: NotificationRenderProps,
-        className: string,
-        _classes: ClassNameMap<string>
-    ) {
+    private createMessage(_props: NotificationRenderProps, className: string) {
         if (!this.open) return <React.Fragment key={this.id}></React.Fragment>;
 
         const setupProps: AlertProps = {
@@ -208,11 +213,7 @@ export class NotificationMU extends NotificationReact {
     }
 
     // Create prompt
-    private createPrompt(
-        _props: NotificationRenderProps,
-        className: string,
-        classes: ClassNameMap<string>
-    ) {
+    private createPrompt(_props: NotificationRenderProps, className: string) {
         const labels = Labels.NotificationMU;
         const title = this.title ?? labels.promptTitle;
 
@@ -221,8 +222,11 @@ export class NotificationMU extends NotificationReact {
             okLabel = labels.promptOK,
             inputs,
             type,
+            fullScreen,
+            fullWidth = true,
+            maxWidth,
             ...rest
-        } = this.inputProps as NotifierPromptProps;
+        } = this.inputProps ?? {};
 
         const handleSubmit = async (
             event: React.MouseEvent<HTMLButtonElement>
@@ -286,6 +290,7 @@ export class NotificationMU extends NotificationReact {
                         {...rest}
                         value="true"
                         autoFocus
+                        required
                     />
                 );
             } else if (type === 'slider') {
@@ -297,6 +302,7 @@ export class NotificationMU extends NotificationReact {
                         autoFocus
                         fullWidth
                         type={type}
+                        required
                         {...rest}
                     />
                 );
@@ -311,12 +317,12 @@ export class NotificationMU extends NotificationReact {
                 open={this.open}
                 PaperComponent={DraggablePaperComponent}
                 className={className}
+                fullWidth={fullWidth}
+                maxWidth={maxWidth}
+                fullScreen={fullScreen}
             >
                 <form>
-                    <IconDialogTitle
-                        className={classes.iconTitle}
-                        id="draggable-dialog-title"
-                    >
+                    <IconDialogTitle id="draggable-dialog-title">
                         <Info color="primary" />
                         <span className="dialogTitle">{title}</span>
                     </IconDialogTitle>
@@ -345,16 +351,15 @@ export class NotificationMU extends NotificationReact {
     }
 
     // Create loading
-    private createLoading(
-        _props: NotificationRenderProps,
-        className: string,
-        _classes: ClassNameMap<string>
-    ) {
+    private createLoading(_props: NotificationRenderProps, className: string) {
         // Properties
         const setupProps: CircularProgressProps = { color: 'primary' };
 
         const labels = Labels.NotificationMU;
 
+        // Input props
+        const { maxWidth = 'xs' } = this.inputProps ?? {};
+
         // Content
         let content = this.content;
         if (content === '@') content = labels.loading.toString();
@@ -384,7 +389,13 @@ export class NotificationMU extends NotificationReact {
                     }}
                 >
                     <CircularProgress {...setupProps} />
-                    {content && <Box maxWidth={640}>{content}</Box>}
+                    {content && (
+                        <Box
+                            maxWidth={maxWidth === false ? undefined : maxWidth}
+                        >
+                            {content}
+                        </Box>
+                    )}
                 </Box>
             </Backdrop>
         );
@@ -396,26 +407,22 @@ export class NotificationMU extends NotificationReact {
      * @param className Style class name
      * @param classes Style classes
      */
-    render(
-        props: NotificationRenderProps,
-        className: string,
-        classes: ClassNameMap<string>
-    ) {
+    render(props: NotificationRenderProps, className: string) {
         // Loading bar
         if (this.type === NotificationType.Loading) {
-            return this.createLoading(props, className, classes);
+            return this.createLoading(props, className);
         } else if (this.type === NotificationType.Confirm) {
-            return this.createConfirm(props, className, classes);
+            return this.createConfirm(props, className);
         } else if (this.type === NotificationType.Prompt) {
-            return this.createPrompt(props, className, classes);
+            return this.createPrompt(props, className);
         } else if (
             this.type === NotificationType.Error ||
             (this.modal && this.type in NotificationMessageType)
         ) {
             // Alert or modal message
-            return this.createAlert(props, className, classes);
+            return this.createAlert(props, className);
         } else {
-            return this.createMessage(props, className, classes);
+            return this.createMessage(props, className);
         }
     }
 }
@@ -499,8 +506,7 @@ export class NotifierMU extends NotifierReact {
      */
     protected createContainer = (
         align: NotificationAlign,
-        children: React.ReactNode[],
-        _options: ClassNameMap<string>
+        children: React.ReactNode[]
     ) => {
         // Each align group, class equal to something similar to 'align-topleft'
         const alignText = NotificationAlign[align].toLowerCase();
@@ -555,7 +561,7 @@ export class NotifierMU extends NotifierReact {
      * @param modal Show as modal
      */
     protected addRaw(
-        data: INotificaseBase,
+        data: INotificaseBase<NotificationReactCallProps>,
         modal?: boolean
     ): INotificationReact {
         // Destruct

package/src/mu/NotifierPromptProps.ts

@@ -1,3 +1,5 @@
+import { Breakpoint } from '@mui/material';
+
 /**
  * Notifier prompt props
  */