@etsoo/materialui 1.4.67 → 1.4.69

package/lib/cjs/Tiplist.js

@@ -0,0 +1,211 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tiplist = Tiplist;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@etsoo/react");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+const react_2 = __importDefault(require("react"));
+const ReactApp_1 = require("./app/ReactApp");
+const SearchField_1 = require("./SearchField");
+const InputField_1 = require("./InputField");
+/**
+ * Tiplist
+ * @param props Props
+ * @returns Component
+ */
+function Tiplist(props) {
+    // Labels
+    const { noOptions, loading, more, open: openDefault } = ReactApp_1.globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
+    // Destruct
+    const { search = false, idField = "id", idValue, inputAutoComplete = "off", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, label, loadData, defaultValue, value, maxItems = 16, width = search ? 160 : undefined, name, readOnly, onChange, onValueChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, sx = {}, minChars, ...rest } = props;
+    if (width && sx)
+        Object.assign(sx, { width: `${width}px` });
+    // Value input ref
+    const inputRef = react_2.default.createRef();
+    // Local value
+    let localValue = value ?? defaultValue;
+    // One time calculation for input's default value (uncontrolled)
+    const localIdValue = idValue ?? shared_1.DataTypes.getValue(localValue, idField);
+    // Changable states
+    const [states, stateUpdate] = react_2.default.useReducer((currentState, newState) => {
+        return { ...currentState, ...newState };
+    }, {
+        // Loading unknown
+        open: false,
+        options: [],
+        value: null
+    });
+    // Input value
+    const inputValue = react_2.default.useMemo(() => states.value && typeof states.value === "object"
+        ? states.value[idField]
+        : undefined, [states.value]);
+    react_2.default.useEffect(() => {
+        if (localValue != null)
+            stateUpdate({ value: localValue });
+    }, [localValue]);
+    // Ref
+    const state = react_2.default.useRef({
+        idLoaded: false,
+        idSet: false,
+        isMounted: false
+    });
+    // Add readOnly
+    const addReadOnly = (params) => {
+        if (readOnly != null) {
+            Object.assign(params, { readOnly });
+        }
+        // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
+        // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
+        Object.assign(params.inputProps, {
+            autoComplete: inputAutoComplete,
+            "data-reset": inputReset
+        });
+        return params;
+    };
+    // Change handler
+    const changeHandle = (event) => {
+        // Stop processing with auto trigger event
+        if (event.nativeEvent.cancelable && !event.nativeEvent.composed) {
+            stateUpdate({ options: [] });
+            return;
+        }
+        // Stop bubble
+        event.stopPropagation();
+        // Call with delay
+        delayed.call(undefined, event.currentTarget.value);
+    };
+    // Directly load data
+    const loadDataDirect = (keyword, id) => {
+        // Reset options
+        // setOptions([]);
+        if (id == null) {
+            // Reset real value
+            const input = inputRef.current;
+            if (input && input.value !== "") {
+                // Different value, trigger change event
+                react_1.ReactUtils.triggerChange(input, "", false);
+            }
+            if (states.options.length > 0) {
+                // Reset options
+                stateUpdate({ options: [] });
+            }
+        }
+        // Loading indicator
+        if (!states.loading)
+            stateUpdate({ loading: true });
+        // Load list
+        loadData(keyword, id, maxItems).then((options) => {
+            if (!state.current.isMounted)
+                return;
+            if (options != null && options.length >= maxItems) {
+                options.push({ [idField]: "n/a" });
+            }
+            if (id && options && onValueChange) {
+                const option = options.find((o) => o[idField] === id);
+                if (option)
+                    onValueChange(option);
+            }
+            // Indicates loading completed
+            stateUpdate({
+                loading: false,
+                ...(options != null && { options })
+            });
+        });
+    };
+    const delayed = (0, react_1.useDelayedExecutor)(loadDataDirect, 480);
+    const setInputValue = (value) => {
+        stateUpdate({ value });
+        // Input value
+        const input = inputRef.current;
+        if (input) {
+            // Update value
+            const newValue = shared_1.DataTypes.getStringValue(value, idField) ?? "";
+            if (newValue !== input.value) {
+                // Different value, trigger change event
+                react_1.ReactUtils.triggerChange(input, newValue, false);
+            }
+        }
+    };
+    react_2.default.useEffect(() => {
+        if (localIdValue == null) {
+            if (inputValue != null)
+                setInputValue(null);
+            return;
+        }
+        if (state.current.idLoaded) {
+            state.current.idLoaded = false;
+            state.current.idSet = false;
+        }
+    }, [localIdValue]);
+    react_2.default.useEffect(() => {
+        if (localIdValue != null && localIdValue !== "") {
+            if (state.current.idLoaded) {
+                // Set default
+                if (!state.current.idSet && states.options.length > 0) {
+                    const item = states.options.find((o) => o[idField] === localIdValue);
+                    if (item) {
+                        stateUpdate({
+                            value: states.options[0]
+                        });
+                        state.current.idSet = true;
+                    }
+                }
+            }
+            else {
+                // Load id data
+                loadDataDirect(undefined, localIdValue);
+                state.current.idLoaded = true;
+            }
+        }
+    }, [localIdValue, states.options]);
+    react_2.default.useEffect(() => {
+        state.current.isMounted = true;
+        return () => {
+            state.current.isMounted = false;
+            delayed.clear();
+        };
+    }, []);
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
+                    // Set value
+                    setInputValue(value);
+                    // Custom
+                    if (onChange != null)
+                        onChange(event, value, reason, details);
+                    if (onValueChange)
+                        onValueChange(value);
+                    // For clear case
+                    if (reason === "clear") {
+                        stateUpdate({ options: [], open: event.type === "click" });
+                        loadDataDirect();
+                    }
+                }, open: states.open, openOnFocus: openOnFocus, onOpen: () => {
+                    // Should load
+                    const loading = states.loading ? true : states.options.length === 0;
+                    stateUpdate({ open: true, loading });
+                    // If not loading
+                    if (loading)
+                        loadDataDirect(undefined, states.value == null ? undefined : states.value[idField]);
+                }, onClose: () => {
+                    stateUpdate({
+                        open: false,
+                        ...(!states.value && { options: [] })
+                    });
+                }, loading: states.loading, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, minChars: minChars, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, minChars: minChars, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
+                    if (item[idField] === "n/a")
+                        return true;
+                    return getOptionDisabled ? getOptionDisabled(item) : false;
+                }, getOptionLabel: (item) => {
+                    if (typeof item !== "object")
+                        return `${item}`;
+                    if (item[idField] === "n/a")
+                        return (more ?? "More") + "...";
+                    return getOptionLabel
+                        ? getOptionLabel(item)
+                        : shared_1.DataTypes.getObjectItemLabel(item);
+                }, ...rest })] }));
+}

package/lib/cjs/TiplistPro.js

@@ -0,0 +1,206 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TiplistPro = TiplistPro;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@etsoo/react");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+const react_2 = __importDefault(require("react"));
+const InputField_1 = require("./InputField");
+const ReactApp_1 = require("./app/ReactApp");
+/**
+ * TiplistPro
+ * @param props Props
+ * @returns Component
+ */
+function TiplistPro(props) {
+    // Labels
+    const { noOptions, loading, more, open: openDefault } = ReactApp_1.globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
+    // Destruct
+    const { label, loadData, defaultValue, value, idValue, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, onChange, onValueChange, minChars, ...rest } = props;
+    if (width && sx)
+        Object.assign(sx, { width: `${width}px` });
+    // Value input ref
+    const inputRef = react_2.default.createRef();
+    // Local value
+    let localValue = value ?? defaultValue;
+    // One time calculation for input's default value (uncontrolled)
+    const localIdValue = idValue ??
+        (localValue != null && typeof localValue === "object"
+            ? localValue.id
+            : null);
+    // Changable states
+    const [states, stateUpdate] = react_2.default.useReducer((currentState, newState) => {
+        return { ...currentState, ...newState };
+    }, {
+        // Loading unknown
+        open: false,
+        options: [],
+        value: null
+    });
+    react_2.default.useEffect(() => {
+        if (localValue != value)
+            stateUpdate({ value: localValue });
+    }, [localValue]);
+    // Input value
+    const inputValue = react_2.default.useMemo(() => states.value && typeof states.value === "object"
+        ? states.value.id
+        : undefined, [states.value]);
+    // Ref
+    const state = react_2.default.useRef({
+        idLoaded: false,
+        idSet: false,
+        isMounted: false
+    });
+    // Change handler
+    const changeHandle = (event) => {
+        // Stop processing with auto trigger event
+        if (event.nativeEvent.cancelable && !event.nativeEvent.composed) {
+            stateUpdate({ options: [] });
+            return;
+        }
+        // Stop bubble
+        event.stopPropagation();
+        // Call with delay
+        delayed.call(undefined, event.currentTarget.value);
+    };
+    // Directly load data
+    const loadDataDirect = (keyword, id) => {
+        // Reset options
+        // setOptions([]);
+        if (id == null) {
+            // Reset real value
+            const input = inputRef.current;
+            if (input && input.value !== "") {
+                // Different value, trigger change event
+                react_1.ReactUtils.triggerChange(input, "", false);
+            }
+            if (states.options.length > 0) {
+                // Reset options
+                stateUpdate({ options: [] });
+            }
+        }
+        // Loading indicator
+        if (!states.loading)
+            stateUpdate({ loading: true });
+        // Load list
+        loadData(keyword, id, maxItems).then((options) => {
+            if (!state.current.isMounted)
+                return;
+            if (options != null && options.length >= maxItems) {
+                options.push({ id: -1, name: "n/a" });
+            }
+            if (id && options && onValueChange) {
+                const option = options.find((o) => o["id"] === id);
+                if (option)
+                    onValueChange(option);
+            }
+            // Indicates loading completed
+            stateUpdate({
+                loading: false,
+                ...(options != null && { options })
+            });
+        });
+    };
+    const delayed = (0, react_1.useDelayedExecutor)(loadDataDirect, 480);
+    const setInputValue = (value) => {
+        stateUpdate({ value });
+        // Input value
+        const input = inputRef.current;
+        if (input) {
+            // Update value
+            const newValue = value?.id.toString() ?? "";
+            if (newValue !== input.value) {
+                // Different value, trigger change event
+                react_1.ReactUtils.triggerChange(input, newValue, false);
+            }
+        }
+    };
+    react_2.default.useEffect(() => {
+        if (localIdValue == null) {
+            if (inputValue != null)
+                setInputValue(null);
+            return;
+        }
+        if (state.current.idLoaded) {
+            state.current.idLoaded = false;
+            state.current.idSet = false;
+        }
+    }, [localIdValue]);
+    react_2.default.useEffect(() => {
+        if (localIdValue != null && localIdValue !== "") {
+            if (state.current.idLoaded) {
+                // Set default
+                if (!state.current.idSet && states.options.length > 0) {
+                    stateUpdate({
+                        value: states.options.find((o) => o.id === localIdValue)
+                    });
+                    state.current.idSet = true;
+                }
+            }
+            else {
+                // Load id data
+                loadDataDirect(undefined, localIdValue);
+                state.current.idLoaded = true;
+            }
+        }
+    }, [localIdValue, states.options]);
+    react_2.default.useEffect(() => {
+        state.current.isMounted = true;
+        return () => {
+            state.current.isMounted = false;
+            delayed.clear();
+        };
+    }, []);
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
+                    if (typeof value === "object") {
+                        // Set value
+                        setInputValue(value);
+                    }
+                    // Custom
+                    if (onChange != null)
+                        onChange(event, value, reason, details);
+                    if (onValueChange) {
+                        if (typeof value === "object")
+                            onValueChange(value == null ? null : value);
+                    }
+                    // For clear case
+                    if (reason === "clear") {
+                        stateUpdate({ options: [], open: event.type === "click" });
+                        loadDataDirect();
+                    }
+                }, open: states.open, openOnFocus: openOnFocus, onOpen: () => {
+                    // Should load
+                    const loading = states.loading ? true : states.options.length === 0;
+                    stateUpdate({ open: true, loading });
+                    // If not loading
+                    if (loading)
+                        loadDataDirect(undefined, states.value && typeof states.value === "object"
+                            ? states.value.id
+                            : undefined);
+                }, onClose: () => {
+                    stateUpdate({
+                        open: false,
+                        ...(!states.value && { options: [] })
+                    });
+                }, loading: states.loading, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { minChars: minChars, ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
+                        if (states.value == null && onChange)
+                            onChange(event, event.target.value, "blur", undefined);
+                    }, "data-reset": inputReset })), isOptionEqualToValue: (option, value) => option.id === value.id, sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
+                    if (item.id === -1)
+                        return true;
+                    return getOptionDisabled ? getOptionDisabled(item) : false;
+                }, getOptionLabel: (item) => {
+                    if (typeof item === "string")
+                        return item;
+                    if (item["id"] === -1)
+                        return (more ?? "More") + "...";
+                    if (getOptionLabel == null)
+                        return shared_1.DataTypes.getListItemLabel(item);
+                    return getOptionLabel(item);
+                }, ...rest })] }));
+}

package/lib/cjs/TooltipClick.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipClick = TooltipClick;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@etsoo/react");
+const material_1 = require("@mui/material");
+const react_2 = __importDefault(require("react"));
+/**
+ * Tooltip with click visibility
+ * @param props Props
+ * @returns Component
+ */
+function TooltipClick(props) {
+    // Destruct
+    // leaveDelay set to 5 seconds to hide the tooltip automatically
+    const { children, disableHoverListener = true, leaveDelay = 5000, onClose, title, ...rest } = props;
+    // State
+    const [localTitle, setTitle] = react_2.default.useState(title);
+    const [open, setOpen] = react_2.default.useState(false);
+    const delayed = leaveDelay > 0
+        ? (0, react_1.useDelayedExecutor)(() => setOpen(false), leaveDelay)
+        : undefined;
+    // Callback for open the tooltip
+    const openTooltip = (newTitle) => {
+        setOpen(true);
+        if (newTitle)
+            setTitle(newTitle);
+        delayed?.call();
+    };
+    react_2.default.useEffect(() => {
+        return () => {
+            delayed?.clear();
+        };
+    }, []);
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { PopperProps: {
+                disablePortal: true
+            }, onClose: (event) => {
+                setOpen(false);
+                if (onClose)
+                    onClose(event);
+            }, title: localTitle, open: open, disableFocusListener: true, disableTouchListener: true, disableHoverListener: disableHoverListener, onMouseOver: disableHoverListener ? undefined : () => setOpen(true), ...rest, children: children(openTooltip) }) }));
+}

package/lib/cjs/TwoFieldInput.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TwoFieldInput = TwoFieldInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const ArrowRightAlt_1 = __importDefault(require("@mui/icons-material/ArrowRightAlt"));
+const react_1 = require("@etsoo/react");
+const react_2 = __importDefault(require("react"));
+const shared_1 = require("@etsoo/shared");
+const InputField_1 = require("./InputField");
+/**
+ * TwoField Input
+ * @param props Props
+ * @returns Component
+ */
+function TwoFieldInput(props) {
+    // Destruct
+    const { name, inputProps, type = inputProps?.inputMode, values, onValuesChange, onChange, onInput, ...rest } = props;
+    // Local values
+    const localValues = values == null
+        ? [null, null]
+        : Array.isArray(values)
+            ? values
+            : [values, null];
+    // Ref
+    const valueRef = react_2.default.useRef(localValues);
+    // Watch container
+    const { dimensions } = (0, react_1.useDimensions)(1, (target, rect) => {
+        const width = (rect.width - 64) / 2;
+        const inputs = target.querySelectorAll("input");
+        inputs[0].style.width = `${width}px`;
+        inputs[1].parentElement.style.width = `${width}px`;
+    }, 0);
+    // Handle change
+    const handleChange = (event) => {
+        const value = shared_1.DomUtils.getInputValue(event.target);
+        const index = event.target.name.endsWith("-start") ? 0 : 1;
+        valueRef.current[index] = value;
+        if (onValuesChange) {
+            if (onValuesChange(valueRef.current) === false)
+                return;
+        }
+        if (onChange)
+            onChange(event);
+    };
+    const formatValue = (v, type) => {
+        if (v == null)
+            return "";
+        if (typeof v === "number")
+            return v;
+        if (type === "date" || type === "datetime-local")
+            return shared_1.DateUtils.formatForInput(v, type);
+        return v;
+    };
+    react_2.default.useEffect(() => {
+        valueRef.current = localValues;
+    }, [localValues]);
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { name: `${name}-start`, type: type, value: formatValue(localValues[0], type), ref: dimensions[0][0], inputProps: inputProps, InputProps: {
+            endAdornment: ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, { position: "end", sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1
+                }, children: [(0, jsx_runtime_1.jsx)(ArrowRightAlt_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Input, { type: type, name: `${name}-end`, value: formatValue(localValues[1], type), disableUnderline: true, onInput: onInput, onChange: handleChange, inputProps: inputProps })] }))
+        }, onInput: onInput, onChange: handleChange, ...rest }));
+}

package/lib/cjs/UserAvatar.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserAvatar = UserAvatar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const appscript_1 = require("@etsoo/appscript");
+const ReactApp_1 = require("./app/ReactApp");
+/**
+ * User avatar
+ * @param props Props
+ * @returns Component
+ */
+function UserAvatar(props) {
+    // Destruct
+    const { src, title, formatTitle = (title) => {
+        return appscript_1.BusinessUtils.formatAvatarTitle(title, 3, ReactApp_1.globalApp?.get("me") ?? "ME");
+    } } = props;
+    // Format
+    const fTitle = formatTitle(title);
+    const count = fTitle.length;
+    return ((0, jsx_runtime_1.jsx)(material_1.Avatar, { title: title, src: src, sx: {
+            width: 48,
+            height: 32,
+            fontSize: count <= 2 ? "15px" : "12px"
+        }, children: fTitle }));
+}