@etsoo/materialui 1.0.37 → 1.0.39

package/lib/DataSteps.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material';
+import { InputDialogProps } from '@etsoo/react';
+/**
+ * Data step
+ */
+export declare type DataStep = Omit<InputDialogProps, 'callback'> & {
+    /**
+     * Callback
+     */
+    callback: (form: HTMLFormElement) => boolean | void;
+};
+/**
+ * Data collecting steps component props
+ */
+export declare type DataStepsProps<T extends object> = Omit<TextFieldProps, 'InputProps' | 'onClick'> & {
+    /**
+     * JSON value
+     */
+    jsonValue?: string;
+    /**
+     * Value formatter
+     */
+    valueFormatter?: (data: T) => string;
+    /**
+     * Steps
+     */
+    steps: (index: number, data: T) => [DataStep, boolean];
+    /**
+     * On value change handler
+     */
+    onValueChange?: (value: T) => void;
+};
+/**
+ * Data collecting steps component
+ * @param props Props
+ * @returns Component
+ */
+export declare function DataSteps<T extends object>(props: DataStepsProps<T>): JSX.Element;

package/lib/DataSteps.js

@@ -0,0 +1,79 @@
+import { Button, IconButton, InputAdornment, TextField } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
+import CheckIcon from '@mui/icons-material/Check';
+import StartIcon from '@mui/icons-material/Start';
+import React from 'react';
+import { globalApp } from './app/ReactApp';
+import { MUGlobal } from './MUGlobal';
+import { HBox } from './FlexBox';
+/**
+ * Data collecting steps component
+ * @param props Props
+ * @returns Component
+ */
+export function DataSteps(props) {
+    var _a;
+    // App
+    const app = globalApp;
+    // Labels
+    const labels = app.getLabels('close', 'nextStep', 'previousStep', 'submit');
+    // Destruct
+    const { InputLabelProps = {}, jsonValue, valueFormatter = (_data) => '...', onValueChange, steps, value = '', ...rest } = props;
+    // Shrink
+    (_a = InputLabelProps.shrink) !== null && _a !== void 0 ? _a : (InputLabelProps.shrink = MUGlobal.searchFieldShrink);
+    // Current index
+    const indexRef = React.useRef(-1);
+    // Current data
+    const dataRef = React.useRef({});
+    // Current value
+    const [localValue, setLocalValue] = React.useState(value);
+    // Get step
+    const showStep = (index) => {
+        indexRef.current = index;
+        const [{ callback, ...rest }, more] = steps(index, dataRef.current);
+        app.showInputDialog({
+            ...rest,
+            buttons: (n, callback) => (React.createElement(HBox, { paddingLeft: 2, paddingRight: 2, paddingBottom: 2, gap: 2, justifyContent: "space-between" },
+                index === 0 ? (React.createElement(Button, { variant: "outlined", startIcon: React.createElement(CloseIcon, null), onClick: () => n.dismiss() }, labels.close)) : (React.createElement(Button, { variant: "outlined", startIcon: React.createElement(NavigateBeforeIcon, null), onClick: () => {
+                        n.dismiss();
+                        showStep(indexRef.current - 1);
+                    } }, labels.previousStep)),
+                more ? (React.createElement(Button, { variant: "contained", startIcon: React.createElement(NavigateNextIcon, null), onClick: async (event) => {
+                        const result = await callback(event);
+                        if (!result)
+                            return;
+                        showStep(indexRef.current + 1);
+                    } }, labels.nextStep)) : (React.createElement(Button, { variant: "contained", startIcon: React.createElement(CheckIcon, null), onClick: async (event) => {
+                        const result = await callback(event);
+                        if (!result)
+                            return;
+                        const value = dataRef.current;
+                        setLocalValue(valueFormatter(value));
+                        if (onValueChange)
+                            onValueChange(value);
+                    } }, labels.submit)))),
+            callback: (form) => {
+                if (form == null)
+                    return;
+                const result = callback(form);
+                if (result !== true) {
+                    return false;
+                }
+            }
+        });
+    };
+    React.useEffect(() => {
+        if (jsonValue) {
+            dataRef.current = JSON.parse(jsonValue);
+            setLocalValue(valueFormatter(dataRef.current));
+        }
+    }, [jsonValue]);
+    return (React.createElement(TextField, { InputLabelProps: InputLabelProps, InputProps: {
+            readOnly: true,
+            endAdornment: (React.createElement(InputAdornment, { position: "end" },
+                React.createElement(IconButton, { edge: "end", size: "small" },
+                    React.createElement(StartIcon, null))))
+        }, onClick: () => showStep(0), value: localValue, ...rest }));
+}

package/lib/InputField.js

@@ -8,10 +8,11 @@ import { MUGlobal } from './MUGlobal';
  * @returns Component
  */
 export function InputField(props) {
+    var _a;
     // Destruct
     const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, ...rest } = props;
     // Shrink
-    InputLabelProps.shrink = MUGlobal.searchFieldShrink;
+    (_a = InputLabelProps.shrink) !== null && _a !== void 0 ? _a : (InputLabelProps.shrink = MUGlobal.searchFieldShrink);
     // Read only
     if (readOnly != null)
         InputProps.readOnly = readOnly;

package/lib/MaskInput.js

@@ -9,6 +9,7 @@ import { useIMask } from 'react-imask';
  * @returns Component
  */
 export function MaskInput(props) {
+    var _a;
     // Destruct
     const { defaultValue, mask, InputLabelProps = {}, InputProps = {}, onAccept, onComplete, readOnly, search = false, size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, value, variant = search
         ? MUGlobal.searchFieldVariant
@@ -25,9 +26,9 @@ export function MaskInput(props) {
     });
     const localValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
     // Shrink
-    InputLabelProps.shrink = search
+    (_a = InputLabelProps.shrink) !== null && _a !== void 0 ? _a : (InputLabelProps.shrink = search
         ? MUGlobal.searchFieldShrink
-        : MUGlobal.inputFieldShrink;
+        : MUGlobal.inputFieldShrink);
     // Read only
     if (readOnly != null)
         InputProps.readOnly = readOnly;

package/lib/NotifierMU.js

@@ -55,6 +55,7 @@ export class NotificationMU extends NotificationReact {
         // Callback
         const callback = async (_event) => {
             await this.returnValue(undefined);
+            return true;
         };
         return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
             React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
@@ -71,7 +72,10 @@ export class NotificationMU extends NotificationReact {
         const labels = Labels.NotificationMU;
         const title = (_a = this.title) !== null && _a !== void 0 ? _a : labels.confirmTitle;
         const { buttons, okLabel = labels.confirmYes, cancelLabel = labels.confirmNo, cancelButton = true, inputs, fullScreen, fullWidth = true, maxWidth, primaryButton } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
-        const callback = async (_event, value) => await this.returnValue(value);
+        const callback = async (_event, value) => {
+            await this.returnValue(value);
+            return true;
+        };
         return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
             React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
                 React.createElement(Help, { color: "action" }),
@@ -134,7 +138,7 @@ export class NotificationMU extends NotificationReact {
                         const dateValue = input.valueAsDate;
                         if (dateValue == null && input.required) {
                             input.focus();
-                            return;
+                            return false;
                         }
                         result = this.onReturn(dateValue);
                     }
@@ -142,7 +146,7 @@ export class NotificationMU extends NotificationReact {
                         const numberValue = input.valueAsNumber;
                         if (isNaN(numberValue) && input.required) {
                             input.focus();
-                            return;
+                            return false;
                         }
                         result = this.onReturn(numberValue);
                     }
@@ -154,7 +158,7 @@ export class NotificationMU extends NotificationReact {
                         const textValue = input.value.trim();
                         if (textValue === '' && input.required) {
                             input.focus();
-                            return;
+                            return false;
                         }
                         result = this.onReturn(textValue);
                     }
@@ -168,14 +172,15 @@ export class NotificationMU extends NotificationReact {
             const v = await result;
             if (v === false) {
                 input === null || input === void 0 ? void 0 : input.focus();
-                return;
+                return false;
             }
             if (typeof v === 'string') {
                 setError(v);
                 input === null || input === void 0 ? void 0 : input.focus();
-                return;
+                return false;
             }
             this.dismiss();
+            return true;
         };
         let localInputs;
         let value = undefined;

package/lib/SearchField.js

@@ -8,10 +8,11 @@ import { MUGlobal } from './MUGlobal';
  * @returns Component
  */
 export function SearchField(props) {
+    var _a;
     // Destruct
     const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, readOnly, size = MUGlobal.searchFieldSize, variant = MUGlobal.searchFieldVariant, ...rest } = props;
     // Shrink
-    InputLabelProps.shrink = MUGlobal.searchFieldShrink;
+    (_a = InputLabelProps.shrink) !== null && _a !== void 0 ? _a : (InputLabelProps.shrink = MUGlobal.searchFieldShrink);
     // Read only
     if (readOnly != null)
         InputProps.readOnly = readOnly;

package/lib/index.d.ts

@@ -31,6 +31,7 @@ export * from './CountdownButton';
 export * from './CustomFabProps';
 export * from './DataGridEx';
 export * from './DataGridRenderers';
+export * from './DataSteps';
 export * from './DialogButton';
 export * from './DnDList';
 export * from './DraggablePaperComponent';

package/lib/index.js

@@ -31,6 +31,7 @@ export * from './CountdownButton';
 export * from './CustomFabProps';
 export * from './DataGridEx';
 export * from './DataGridRenderers';
+export * from './DataSteps';
 export * from './DialogButton';
 export * from './DnDList';
 export * from './DraggablePaperComponent';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/materialui",
-    "version": "1.0.37",
+    "version": "1.0.39",
     "description": "TypeScript Material-UI Implementation",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -51,10 +51,10 @@
         "@emotion/css": "^11.10.0",
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
-        "@etsoo/appscript": "^1.3.0",
-        "@etsoo/notificationbase": "^1.1.11",
-        "@etsoo/react": "^1.6.10",
-        "@etsoo/shared": "^1.1.58",
+        "@etsoo/appscript": "^1.3.1",
+        "@etsoo/notificationbase": "^1.1.12",
+        "@etsoo/react": "^1.6.12",
+        "@etsoo/shared": "^1.1.59",
         "@mui/icons-material": "^5.10.6",
         "@mui/material": "^5.10.7",
         "@types/pica": "^9.0.1",
@@ -82,16 +82,16 @@
         "@babel/runtime-corejs3": "^7.19.1",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
-        "@types/jest": "^29.0.3",
+        "@types/jest": "^29.1.1",
         "@typescript-eslint/eslint-plugin": "^5.38.1",
         "@typescript-eslint/parser": "^5.38.1",
         "eslint": "^8.24.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-react": "^7.31.8",
-        "jest": "^29.0.3",
-        "jest-environment-jsdom": "^29.0.3",
-        "ts-jest": "^29.0.2",
+        "jest": "^29.1.2",
+        "jest-environment-jsdom": "^29.1.2",
+        "ts-jest": "^29.0.3",
         "typescript": "^4.8.4"
     }
 }

package/src/DataSteps.tsx

@@ -0,0 +1,194 @@
+import {
+    Button,
+    IconButton,
+    InputAdornment,
+    TextField,
+    TextFieldProps
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
+import CheckIcon from '@mui/icons-material/Check';
+import StartIcon from '@mui/icons-material/Start';
+import { InputDialogProps } from '@etsoo/react';
+import React from 'react';
+import { globalApp } from './app/ReactApp';
+import { MUGlobal } from './MUGlobal';
+import { HBox } from './FlexBox';
+
+/**
+ * Data step
+ */
+export type DataStep = Omit<InputDialogProps, 'callback'> & {
+    /**
+     * Callback
+     */
+    callback: (form: HTMLFormElement) => boolean | void;
+};
+
+/**
+ * Data collecting steps component props
+ */
+export type DataStepsProps<T extends object> = Omit<
+    TextFieldProps,
+    'InputProps' | 'onClick'
+> & {
+    /**
+     * JSON value
+     */
+    jsonValue?: string;
+
+    /**
+     * Value formatter
+     */
+    valueFormatter?: (data: T) => string;
+
+    /**
+     * Steps
+     */
+    steps: (index: number, data: T) => [DataStep, boolean];
+
+    /**
+     * On value change handler
+     */
+    onValueChange?: (value: T) => void;
+};
+
+/**
+ * Data collecting steps component
+ * @param props Props
+ * @returns Component
+ */
+export function DataSteps<T extends object>(props: DataStepsProps<T>) {
+    // App
+    const app = globalApp;
+
+    // Labels
+    const labels = app.getLabels('close', 'nextStep', 'previousStep', 'submit');
+
+    // Destruct
+    const {
+        InputLabelProps = {},
+        jsonValue,
+        valueFormatter = (_data: T) => '...',
+        onValueChange,
+        steps,
+        value = '',
+        ...rest
+    } = props;
+
+    // Shrink
+    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
+
+    // Current index
+    const indexRef = React.useRef<number>(-1);
+
+    // Current data
+    const dataRef = React.useRef({} as T);
+
+    // Current value
+    const [localValue, setLocalValue] = React.useState(value);
+
+    // Get step
+    const showStep = (index: number) => {
+        indexRef.current = index;
+        const [{ callback, ...rest }, more] = steps(index, dataRef.current);
+
+        app.showInputDialog({
+            ...rest,
+            buttons: (n, callback) => (
+                <HBox
+                    paddingLeft={2}
+                    paddingRight={2}
+                    paddingBottom={2}
+                    gap={2}
+                    justifyContent="space-between"
+                >
+                    {index === 0 ? (
+                        <Button
+                            variant="outlined"
+                            startIcon={<CloseIcon />}
+                            onClick={() => n.dismiss()}
+                        >
+                            {labels.close}
+                        </Button>
+                    ) : (
+                        <Button
+                            variant="outlined"
+                            startIcon={<NavigateBeforeIcon />}
+                            onClick={() => {
+                                n.dismiss();
+                                showStep(indexRef.current - 1);
+                            }}
+                        >
+                            {labels.previousStep}
+                        </Button>
+                    )}
+
+                    {more ? (
+                        <Button
+                            variant="contained"
+                            startIcon={<NavigateNextIcon />}
+                            onClick={async (event) => {
+                                const result = await callback(event);
+                                if (!result) return;
+                                showStep(indexRef.current + 1);
+                            }}
+                        >
+                            {labels.nextStep}
+                        </Button>
+                    ) : (
+                        <Button
+                            variant="contained"
+                            startIcon={<CheckIcon />}
+                            onClick={async (event) => {
+                                const result = await callback(event);
+                                if (!result) return;
+
+                                const value = dataRef.current;
+                                setLocalValue(valueFormatter(value));
+
+                                if (onValueChange) onValueChange(value);
+                            }}
+                        >
+                            {labels.submit}
+                        </Button>
+                    )}
+                </HBox>
+            ),
+            callback: (form) => {
+                if (form == null) return;
+                const result = callback(form);
+                if (result !== true) {
+                    return false;
+                }
+            }
+        });
+    };
+
+    React.useEffect(() => {
+        if (jsonValue) {
+            dataRef.current = JSON.parse(jsonValue);
+            setLocalValue(valueFormatter(dataRef.current));
+        }
+    }, [jsonValue]);
+
+    return (
+        <TextField
+            InputLabelProps={InputLabelProps}
+            InputProps={{
+                readOnly: true,
+                endAdornment: (
+                    <InputAdornment position="end">
+                        <IconButton edge="end" size="small">
+                            <StartIcon />
+                        </IconButton>
+                    </InputAdornment>
+                )
+            }}
+            onClick={() => showStep(0)}
+            value={localValue}
+            {...rest}
+        />
+    );
+}

package/src/InputField.tsx

@@ -37,7 +37,7 @@ export function InputField(props: InputFieldProps) {
     } = props;
 
     // Shrink
-    InputLabelProps.shrink = MUGlobal.searchFieldShrink;
+    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
 
     // Read only
     if (readOnly != null) InputProps.readOnly = readOnly;

package/src/MaskInput.tsx

@@ -80,7 +80,7 @@ export function MaskInput<
     const localValue = defaultValue ?? value;
 
     // Shrink
-    InputLabelProps.shrink = search
+    InputLabelProps.shrink ??= search
         ? MUGlobal.searchFieldShrink
         : MUGlobal.inputFieldShrink;
 

package/src/NotifierMU.tsx

@@ -100,6 +100,7 @@ export class NotificationMU extends NotificationReact {
             _event: React.MouseEvent<HTMLButtonElement>
         ) => {
             await this.returnValue(undefined);
+            return true;
         };
 
         return (
@@ -158,7 +159,10 @@ export class NotificationMU extends NotificationReact {
         const callback = async (
             _event: React.MouseEvent<HTMLButtonElement>,
             value: boolean
-        ) => await this.returnValue(value);
+        ) => {
+            await this.returnValue(value);
+            return true;
+        };
 
         return (
             <Dialog
@@ -291,14 +295,14 @@ export class NotificationMU extends NotificationReact {
                         const dateValue = input.valueAsDate;
                         if (dateValue == null && input.required) {
                             input.focus();
-                            return;
+                            return false;
                         }
                         result = this.onReturn(dateValue);
                     } else if (type === 'number') {
                         const numberValue = input.valueAsNumber;
                         if (isNaN(numberValue) && input.required) {
                             input.focus();
-                            return;
+                            return false;
                         }
                         result = this.onReturn(numberValue);
                     } else if (type === 'switch') {
@@ -308,7 +312,7 @@ export class NotificationMU extends NotificationReact {
                         const textValue = input.value.trim();
                         if (textValue === '' && input.required) {
                             input.focus();
-                            return;
+                            return false;
                         }
                         result = this.onReturn(textValue);
                     }
@@ -322,15 +326,16 @@ export class NotificationMU extends NotificationReact {
             const v = await result;
             if (v === false) {
                 input?.focus();
-                return;
+                return false;
             }
             if (typeof v === 'string') {
                 setError(v);
                 input?.focus();
-                return;
+                return false;
             }
 
             this.dismiss();
+            return true;
         };
 
         let localInputs: React.ReactNode;

package/src/SearchField.tsx

@@ -37,7 +37,7 @@ export function SearchField(props: SearchFieldProps) {
     } = props;
 
     // Shrink
-    InputLabelProps.shrink = MUGlobal.searchFieldShrink;
+    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
 
     // Read only
     if (readOnly != null) InputProps.readOnly = readOnly;

package/src/index.ts

@@ -34,6 +34,7 @@ export * from './CountdownButton';
 export * from './CustomFabProps';
 export * from './DataGridEx';
 export * from './DataGridRenderers';
+export * from './DataSteps';
 export * from './DialogButton';
 export * from './DnDList';
 export * from './DraggablePaperComponent';