@etsoo/materialui 1.4.67 → 1.4.69

package/lib/cjs/SelectEx.js

@@ -0,0 +1,180 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectEx = SelectEx;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const MUGlobal_1 = require("./MUGlobal");
+const ListItemRightIcon_1 = require("./ListItemRightIcon");
+const Refresh_1 = __importDefault(require("@mui/icons-material/Refresh"));
+const shared_1 = require("@etsoo/shared");
+const react_2 = require("@etsoo/react");
+/**
+ * Extended select component
+ * @param props Props
+ * @returns Component
+ */
+function SelectEx(props) {
+    // Destruct
+    const { defaultValue, idField = "id", error, helperText, inputReset, itemIconRenderer, itemStyle, label, labelField = "label", loadData, onItemChange, onItemClick, onLoadData, multiple = false, name, options, refresh, search = false, autoAddBlankItem = search, value, onChange, fullWidth, required, variant = "outlined", ...rest } = props;
+    // Options state
+    const [localOptions, setOptions] = react_1.default.useState([]);
+    const isMounted = react_1.default.useRef(false);
+    const doItemChange = (options, value, userAction) => {
+        if (onItemChange == null)
+            return;
+        let option;
+        if (multiple && Array.isArray(value)) {
+            option = options.find((option) => value.includes(option[idField]));
+        }
+        else if (value == null || value === "") {
+            option = undefined;
+        }
+        else {
+            option = options.find((option) => option[idField] === value);
+        }
+        onItemChange(option, userAction);
+    };
+    // Local value
+    const v = defaultValue ?? value;
+    const valueSource = react_1.default.useMemo(() => (multiple ? (v ? (Array.isArray(v) ? v : [v]) : []) : v ?? ""), [multiple, v]);
+    const setOptionsAdd = react_1.default.useCallback((options) => {
+        setOptions(options);
+        if (valueSource != null)
+            doItemChange(options, valueSource, false);
+    }, [valueSource]);
+    // When options change
+    // [options] will cause infinite loop
+    const propertyWay = loadData == null;
+    react_1.default.useEffect(() => {
+        if (options == null || !propertyWay)
+            return;
+        setOptionsAdd(options);
+    }, [options, propertyWay, setOptionsAdd]);
+    // Value state
+    const [valueState, setValueStateBase] = react_1.default.useState(valueSource);
+    const valueRef = react_1.default.useRef();
+    const setValueState = (newValue) => {
+        valueRef.current = newValue;
+        setValueStateBase(newValue);
+    };
+    react_1.default.useEffect(() => {
+        if (valueSource != null)
+            setValueState(valueSource);
+    }, [valueSource]);
+    // Label id
+    const labelId = `selectex-label-${name}`;
+    // Set item
+    const setItemValue = (id) => {
+        if (id !== valueRef.current) {
+            // Difference
+            const diff = multiple
+                ? shared_1.ArrayUtils.differences(id, valueRef.current)
+                : id;
+            setValueState(id);
+            const input = divRef.current?.querySelector("input");
+            if (input) {
+                // Different value, trigger change event
+                react_2.ReactUtils.triggerChange(input, id, false);
+            }
+            return diff;
+        }
+        return undefined;
+    };
+    // Get option id
+    const getId = (option) => {
+        return option[idField];
+    };
+    // Get option label
+    const getLabel = (option) => {
+        return typeof labelField === "function"
+            ? labelField(option)
+            : option[labelField];
+    };
+    // Refs
+    const divRef = react_1.default.useRef();
+    // Refresh list data
+    const refreshData = () => {
+        if (loadData == null)
+            return;
+        loadData().then((result) => {
+            if (result == null || !isMounted.current)
+                return;
+            if (onLoadData)
+                onLoadData(result);
+            if (autoAddBlankItem) {
+                shared_1.Utils.addBlankItem(result, idField, labelField);
+            }
+            setOptionsAdd(result);
+        });
+    };
+    // When value change
+    react_1.default.useEffect(() => {
+        refreshData();
+    }, [valueSource]);
+    // When layout ready
+    react_1.default.useEffect(() => {
+        const input = divRef.current?.querySelector("input");
+        const inputChange = (event) => {
+            // Reset case
+            if (event.cancelable)
+                setValueState(multiple ? [] : "");
+        };
+        input?.addEventListener("change", inputChange);
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+            input?.removeEventListener("change", inputChange);
+        };
+    }, [multiple]);
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: search ? MUGlobal_1.MUGlobal.searchFieldSize : MUGlobal_1.MUGlobal.inputFieldSize, fullWidth: fullWidth, error: error, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: labelId, variant: variant, shrink: search ? MUGlobal_1.MUGlobal.searchFieldShrink : MUGlobal_1.MUGlobal.inputFieldShrink, required: required, children: label }), (0, jsx_runtime_1.jsx)(material_1.Select, { ref: divRef, value: multiple
+                            ? valueState
+                            : localOptions.some((o) => o[idField] === valueState)
+                                ? valueState
+                                : "", input: (0, jsx_runtime_1.jsx)(material_1.OutlinedInput, { notched: true, label: label, required: required, inputProps: { "data-reset": inputReset } }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+                            if (onChange) {
+                                onChange(event, child);
+                                // event.preventDefault() will block executing
+                                if (event.defaultPrevented)
+                                    return;
+                            }
+                            // Set item value
+                            const value = event.target.value;
+                            if (multiple && !Array.isArray(value))
+                                return;
+                            const diff = setItemValue(value);
+                            if (diff != null) {
+                                doItemChange(localOptions, diff, true);
+                            }
+                        }, renderValue: (selected) => {
+                            // The text shows up
+                            return localOptions
+                                .filter((option) => {
+                                const id = getId(option);
+                                return Array.isArray(selected)
+                                    ? selected.indexOf(id) !== -1
+                                    : selected === id;
+                            })
+                                .map((option) => getLabel(option))
+                                .join(", ");
+                        }, sx: { minWidth: "150px" }, fullWidth: fullWidth, required: required, variant: variant, ...rest, children: localOptions.map((option) => {
+                            // Option id
+                            const id = getId(option);
+                            // Option label
+                            const label = getLabel(option);
+                            // Option
+                            return ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { value: id, onClick: (event) => {
+                                    if (onItemClick) {
+                                        onItemClick(event, option);
+                                    }
+                                }, style: itemStyle == null ? undefined : itemStyle(option), children: [multiple && ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: Array.isArray(valueState)
+                                            ? valueState.includes(id)
+                                            : valueState === id })), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: label }), itemIconRenderer && ((0, jsx_runtime_1.jsx)(ListItemRightIcon_1.ListItemRightIcon, { children: itemIconRenderer(option[idField]) }))] }, id));
+                        }) }), helperText != null && (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: helperText })] }), refresh != null &&
+                loadData != null &&
+                (typeof refresh === "string" ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", title: refresh, onClick: refreshData, children: (0, jsx_runtime_1.jsx)(Refresh_1.default, {}) })) : (refresh))] }));
+}

package/lib/cjs/ShowDataComparison.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowDataComparison = void 0;
+exports.IsAuditLineUpdateData = IsAuditLineUpdateData;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const notificationbase_1 = require("@etsoo/notificationbase");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+const ReactApp_1 = require("./app/ReactApp");
+/**
+ * Check obj is instance of AuditLineChangesDto
+ * @param obj Input
+ * @returns Result
+ */
+function IsAuditLineUpdateData(obj) {
+    return (typeof obj === "object" &&
+        "oldData" in obj &&
+        typeof obj.oldData === "object" &&
+        "newData" in obj &&
+        typeof obj.newData === "object");
+}
+// Format value
+const formatValue = (value, app) => {
+    if (value == null)
+        return "";
+    if (value instanceof Date)
+        return app.formatDate(value, "ds");
+    return `${value}`;
+};
+/**
+ * Show data comparison
+ * @param data Data
+ * @param modelTitle Model window title
+ * @param getLabel Get label callback
+ * @param equalCheck Equal check for properties
+ */
+const ShowDataComparison = (data, modelTitle, getLabel, equalCheck = true) => {
+    // Validate app
+    const app = ReactApp_1.globalApp;
+    if (app == null) {
+        throw new Error("No globalApp");
+    }
+    // Labels
+    const { dataComparison, field, newValue, oldValue } = app.getLabels("dataComparison", "field", "newValue", "oldValue");
+    modelTitle ??= dataComparison;
+    getLabel ??= (key) => {
+        return app.get(shared_1.Utils.formatInitial(key)) ?? key;
+    };
+    const keys = new Set([
+        ...Object.keys(data.oldData),
+        ...Object.keys(data.newData)
+    ]);
+    let rows = Array.from(keys).map((field) => ({
+        field,
+        oldValue: data.oldData[field],
+        newValue: data.newData[field]
+    }));
+    if (equalCheck)
+        rows = rows.filter((item) => !shared_1.Utils.equals(item.oldValue, item.newValue));
+    const inputs = ((0, jsx_runtime_1.jsxs)(material_1.Table, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "18%", children: field }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "41%", align: "right", children: oldValue }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { width: "41%", align: "right", children: newValue })] }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { children: rows.map((row) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: getLabel(row.field) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { align: "right", children: formatValue(row.oldValue, app) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { align: "right", children: formatValue(row.newValue, app) })] }, row.field))) })] }));
+    app.notifier.alert([undefined, modelTitle], undefined, notificationbase_1.NotificationMessageType.Info, { fullScreen: app.smDown, inputs });
+};
+exports.ShowDataComparison = ShowDataComparison;

package/lib/cjs/Switch.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = Switch;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+const Switch_1 = __importDefault(require("@mui/material/Switch"));
+/**
+ * Switch
+ * @param props Props
+ * @returns Component
+ */
+function Switch(props) {
+    // Destruct
+    const { checked, defaultChecked, defaultValue, onChange, readOnly, size, checkbox = false, value = "true", ...rest } = props;
+    // Checked state
+    const [controlChecked, setControlChecked] = react_1.default.useState(checked ?? defaultChecked ?? defaultValue == value);
+    react_1.default.useEffect(() => {
+        if (checked)
+            setControlChecked(checked);
+    }, [checked]);
+    // Handle change
+    const handleChange = (event, checked) => {
+        if (onChange)
+            onChange(event, checked);
+        setControlChecked(checked);
+    };
+    // Control
+    const control = checkbox ? ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { readOnly: readOnly, checked: controlChecked, onChange: handleChange, size: size, value: value })) : ((0, jsx_runtime_1.jsx)(Switch_1.default, { readOnly: readOnly, checked: controlChecked, onChange: handleChange, size: size, value: value }));
+    // Default state
+    react_1.default.useEffect(() => {
+        setControlChecked(controlChecked);
+    }, [controlChecked]);
+    // Layout
+    return (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: control, ...rest });
+}

package/lib/cjs/SwitchAnt.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchAnt = SwitchAnt;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Switch_1 = __importDefault(require("@mui/material/Switch"));
+const react_1 = __importDefault(require("react"));
+const ReactApp_1 = require("./app/ReactApp");
+/**
+ * Ant style switch
+ * @param props Props
+ * @returns Component
+ */
+function SwitchAnt(props) {
+    // Labels
+    const { yes = "Yes", no = "No" } = ReactApp_1.globalApp?.getLabels("yes", "no") ?? {};
+    // Destruct
+    const { activeColor, checked, defaultChecked, defaultValue, endLabel = yes, startLabel = no, onChange, value = "true", ...rest } = props;
+    // Checked state
+    const [controlChecked, setControlChecked] = react_1.default.useState(checked ?? defaultChecked ?? defaultValue == value);
+    // Ref
+    const ref = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        if (checked)
+            setControlChecked(checked);
+    }, [checked]);
+    // On change
+    const onChangeLocal = (event, checked) => {
+        if (onChange)
+            onChange(event, checked);
+        setControlChecked(checked);
+    };
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { onClick: () => controlChecked && ref.current?.click(), sx: {
+                    cursor: "pointer",
+                    color: controlChecked
+                        ? undefined
+                        : (theme) => activeColor ?? theme.palette.warning.main
+                }, children: startLabel }), (0, jsx_runtime_1.jsx)(Switch_1.default, { checked: controlChecked, inputRef: ref, value: value, onChange: onChangeLocal, ...rest }), (0, jsx_runtime_1.jsx)(material_1.Typography, { onClick: () => !controlChecked && ref.current?.click(), sx: {
+                    cursor: "pointer",
+                    color: controlChecked
+                        ? (theme) => activeColor ?? theme.palette.warning.main
+                        : undefined
+                }, children: endLabel })] }));
+}

package/lib/cjs/SwitchField.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchField = SwitchField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const OutlinedInput_1 = __importDefault(require("@mui/material/OutlinedInput"));
+const react_1 = __importDefault(require("react"));
+const SwitchAnt_1 = require("./SwitchAnt");
+/**
+ * SwitchField
+ * @param props Props
+ * @returns Component
+ */
+function SwitchField(props) {
+    // Destruct
+    const { activeColor, startLabel, endLabel, value = true, fullWidth, helperText, label, name, required, checked, variant = "outlined", ...rest } = props;
+    // Outlined
+    const outlined = variant === "outlined";
+    // Group
+    const group = ((0, jsx_runtime_1.jsx)(SwitchAnt_1.SwitchAnt, { activeColor: activeColor, name: name, startLabel: startLabel, endLabel: endLabel, value: value, checked: checked }));
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { fullWidth: fullWidth, ...rest, children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { required: required, variant: variant, shrink: true, children: label })), outlined ? ((0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
+                            cursor: "default",
+                            display: "flex",
+                            gap: 1,
+                            paddingX: 2,
+                            paddingY: "7px",
+                            width: fullWidth ? "100%" : "auto",
+                            "& input": {
+                                display: "none"
+                            }
+                        } })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: helperText })] }));
+}

package/lib/cjs/TabBox.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabBox = TabBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const react_router_1 = require("react-router");
+/**
+ * Tabs with box
+ * @param props Props
+ * @returns Component
+ */
+function TabBox(props) {
+    // Destruct
+    const { index, inputName, root, container = {}, defaultIndex = 0, tabs } = props;
+    const { onChange, ...rest } = container;
+    // State
+    const [value, setValue] = react_1.default.useState(defaultIndex);
+    react_1.default.useEffect(() => {
+        if (index == null)
+            return;
+        setValue(index);
+    }, [index]);
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [inputName && (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: inputName, value: value }), (0, jsx_runtime_1.jsx)(material_1.Box, { ...root, children: (0, jsx_runtime_1.jsx)(material_1.Tabs, { value: value, onChange: (event, newValue) => {
+                        setValue(newValue);
+                        if (onChange)
+                            onChange(event, newValue);
+                    }, ...rest, children: tabs.map(({ children, panel, ...tabRest }, index) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { value: index, LinkComponent: tabRest.to ? react_router_1.Link : undefined, ...tabRest }, index))) }) }), tabs.map(({ children, panel }, index) => ((0, jsx_runtime_1.jsx)(material_1.Box, { hidden: value !== index, ...panel, children: shared_1.Utils.getResult(children, value === index) }, index)))] }));
+}

package/lib/{TableEx.d.ts → cjs/TableEx.d.ts}

@@ -1,5 +1,4 @@
-import { GridColumn, GridLoader } from "@etsoo/react";
-import { GridMethodRef } from "@etsoo/react/lib/components/GridMethodRef";
+import { GridColumn, GridLoader, GridMethodRef } from "@etsoo/react";
 import { DataTypes, IdDefaultType } from "@etsoo/shared";
 import { TableProps } from "@mui/material";
 import React from "react";