@etsoo/react 1.2.13 → 1.2.17

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
  */

package/src/mu/SelectEx.tsx

@@ -28,6 +28,11 @@ export interface SelectExProps<T = any>
      */
     labelField?: ((option: T) => string) | string;
 
+    /**
+     * Load data callback
+     */
+    loadData?: () => PromiseLike<T[] | null | undefined>;
+
     /**
      * Array of options.
      */
@@ -51,6 +56,7 @@ export function SelectEx<T = any>(props: SelectExProps<T>) {
         idField = 'id',
         label,
         labelField = 'label',
+        loadData,
         multiple = false,
         name,
         options = [],
@@ -59,6 +65,10 @@ export function SelectEx<T = any>(props: SelectExProps<T>) {
         ...rest
     } = props;
 
+    // Options state
+    const [localOptions, setOptions] = React.useState(options);
+    const isMounted = React.useRef(true);
+
     // Local value
     const valueSource = defaultValue ?? value ?? '';
     let localValue: unknown | unknown[];
@@ -69,7 +79,7 @@ export function SelectEx<T = any>(props: SelectExProps<T>) {
         localValue = valueSource;
     }
 
-    // State
+    // Value state
     const [valueState, setValueState] = React.useState(localValue);
 
     // Label id
@@ -107,11 +117,23 @@ export function SelectEx<T = any>(props: SelectExProps<T>) {
     // When layout ready
     React.useEffect(() => {
         const input = divRef.current?.querySelector('input');
-        if (input)
-            input.addEventListener('change', (event) => {
-                // Reset case
-                if (event.cancelable) setValueState(multiple ? [] : '');
+        const inputChange = (event: Event) => {
+            // Reset case
+            if (event.cancelable) setValueState(multiple ? [] : '');
+        };
+        input?.addEventListener('change', inputChange);
+
+        if (loadData) {
+            loadData().then((result) => {
+                if (result == null || !isMounted.current) return;
+                setOptions(result);
             });
+        }
+
+        return () => {
+            isMounted.current = false;
+            input?.removeEventListener('change', inputChange);
+        };
     }, []);
 
     // Layout
@@ -139,7 +161,7 @@ export function SelectEx<T = any>(props: SelectExProps<T>) {
                 onChange={multiple ? handleChange : undefined}
                 renderValue={(selected) => {
                     // The text shows up
-                    return options
+                    return localOptions
                         .filter((option: any) =>
                             Array.isArray(selected)
                                 ? selected.indexOf(option.id) !== -1
@@ -151,7 +173,7 @@ export function SelectEx<T = any>(props: SelectExProps<T>) {
                 sx={{ minWidth: '150px' }}
                 {...rest}
             >
-                {options.map((option: any) => {
+                {localOptions.map((option: any) => {
                     // Option id
                     const id = option[idField];
 

package/src/mu/Tiplist.tsx

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

package/src/notifier/Notifier.ts

@@ -4,6 +4,7 @@ import {
     INotifier,
     Notification,
     NotificationAlign,
+    NotificationCallProps,
     NotificationContainer,
     NotificationDictionary,
     NotificationRenderProps
@@ -11,13 +12,59 @@ import {
 import { IAction } from '@etsoo/appscript';
 import { State } from '../states/State';
 import { IProviderProps, IUpdate } 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> {}
 
-interface ReactNotifications extends NotificationDictionary<React.ReactNode> {}
+interface ReactNotifications
+    extends NotificationDictionary<
+        React.ReactNode,
+        NotificationReactCallProps
+    > {}
 
 /**
  * Action to manage the notifier
@@ -37,7 +84,10 @@ interface INotifierAction extends IAction {
 /**
  * React notification
  */
-export abstract class NotificationReact extends Notification<React.ReactNode> {}
+export abstract class NotificationReact extends Notification<
+    React.ReactNode,
+    NotificationReactCallProps
+> {}
 
 /**
  * React notification render props
@@ -49,7 +99,8 @@ export interface NotificationReactRenderProps
 /**
  * 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
@@ -73,7 +124,7 @@ export interface INotifierOptions {
  * Notifier for React
  */
 export abstract class NotifierReact
-    extends NotificationContainer<React.ReactNode>
+    extends NotificationContainer<React.ReactNode, NotificationReactCallProps>
     implements INotifierReact
 {
     // Instance
@@ -117,17 +168,15 @@ export abstract class NotifierReact
      */
     protected abstract createContainer(
         align: NotificationAlign,
-        children: React.ReactNode[],
-        options: any
+        children: React.ReactNode[]
     ): React.ReactElement;
 
     /**
      * Create state provider
      * @param className Style class name
-     * @param optionGenerator Options generator
      * @returns Provider
      */
-    createProvider(className?: string, optionGenerator?: INotifierOptions) {
+    createProvider(className?: string) {
         // Custom creator
         const creator = (
             state: ReactNotifications,
@@ -137,9 +186,6 @@ export abstract class NotifierReact
             // Hold the current state update
             this.stateUpdate = update;
 
-            // Options
-            const options = optionGenerator ? optionGenerator() : {};
-
             // Aligns collection
             const aligns: React.ReactNode[] = [];
             for (const align in state) {
@@ -148,11 +194,11 @@ export abstract class NotifierReact
 
                 // UI collections
                 const ui = notifications.map((notification) =>
-                    notification.render(props, className + '-item', options)
+                    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
@@ -162,7 +208,10 @@ export abstract class NotifierReact
         // Create state
         const { provider } = State.create(
             (
-                state: NotificationDictionary<React.ReactNode>,
+                state: NotificationDictionary<
+                    React.ReactNode,
+                    NotificationReactCallProps
+                >,
                 _action: INotifierAction
             ) => {
                 // Collection update is done with NotificationContainer
@@ -170,7 +219,10 @@ export abstract class NotifierReact
             },
             this.notifications,
             {} as IUpdate<
-                NotificationDictionary<React.ReactNode>,
+                NotificationDictionary<
+                    React.ReactNode,
+                    NotificationReactCallProps
+                >,
                 INotifierAction
             >,
             creator