@etsoo/materialui 1.4.68 → 1.4.69

package/lib/cjs/ScrollerListEx.js

@@ -0,0 +1,168 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollerListEx = ScrollerListEx;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("@emotion/css");
+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 MUGlobal_1 = require("./MUGlobal");
+// Scroll bar size
+const scrollbarSize = 16;
+// Selected class name
+const selectedClassName = "ScrollerListEx-Selected";
+const createGridStyle = (alternatingColors, selectedColor) => {
+    return (0, css_1.css)({
+        "& .ScrollerListEx-Selected": {
+            backgroundColor: selectedColor
+        },
+        "& .ScrollerListEx-Row0:not(.ScrollerListEx-Selected)": {
+            backgroundColor: alternatingColors[0]
+        },
+        "& .ScrollerListEx-Row1:not(.ScrollerListEx-Selected)": {
+            backgroundColor: alternatingColors[1]
+        },
+        "@media (min-width: 800px)": {
+            "::-webkit-scrollbar": {
+                width: scrollbarSize,
+                height: scrollbarSize,
+                backgroundColor: "#f6f6f6"
+            },
+            "::-webkit-scrollbar-thumb": {
+                backgroundColor: "rgba(0,0,0,0.4)",
+                borderRadius: "2px"
+            },
+            "::-webkit-scrollbar-track-piece:start": {
+                background: "transparent"
+            },
+            "::-webkit-scrollbar-track-piece:end": {
+                background: "transparent"
+            }
+        }
+    });
+};
+// Default margin
+const defaultMargin = (margin, isNarrow) => {
+    const half = MUGlobal_1.MUGlobal.half(margin);
+    if (isNarrow == null) {
+        const half = MUGlobal_1.MUGlobal.half(margin);
+        return {
+            marginLeft: margin,
+            marginRight: margin,
+            marginTop: half,
+            marginBottom: half
+        };
+    }
+    if (isNarrow) {
+        return {
+            marginLeft: 0,
+            marginRight: 0,
+            marginTop: half,
+            marginBottom: half
+        };
+    }
+    return {
+        marginLeft: half,
+        marginRight: half,
+        marginTop: half,
+        marginBottom: half
+    };
+};
+// Default itemRenderer
+function defaultItemRenderer({ index, innerItemRenderer, data, onMouseDown, selected, style, itemHeight, onClick, onDoubleClick, space, margins }) {
+    // Child
+    const child = innerItemRenderer({
+        index,
+        data,
+        style,
+        selected,
+        itemHeight,
+        space,
+        margins
+    });
+    let rowClass = `ScrollerListEx-Row${index % 2}`;
+    if (selected)
+        rowClass += ` ${selectedClassName}`;
+    // Layout
+    return ((0, jsx_runtime_1.jsx)("div", { className: rowClass, style: style, onMouseDown: (event) => onMouseDown(event.currentTarget, data), onClick: (event) => onClick && onClick(event, data), onDoubleClick: (event) => onDoubleClick && onDoubleClick(event, data), children: child }));
+}
+/**
+ * Extended ScrollerList
+ * @param props Props
+ * @returns Component
+ */
+function ScrollerListEx(props) {
+    // Selected item ref
+    const selectedItem = react_2.default.useRef();
+    const onMouseDown = (div, data) => {
+        // Destruct
+        const [selectedDiv, selectedData] = selectedItem.current ?? [];
+        if (selectedData != null && selectedData[idField] === data[idField])
+            return;
+        selectedDiv?.classList.remove(selectedClassName);
+        div.classList.add(selectedClassName);
+        selectedItem.current = [div, data];
+        if (onSelectChange)
+            onSelectChange([data]);
+    };
+    const isSelected = (data) => {
+        const [_, selectedData] = selectedItem.current ?? [];
+        const selected = selectedData && data && selectedData[idField] === data[idField]
+            ? true
+            : false;
+        return selected;
+    };
+    // Destruct
+    const { alternatingColors = [undefined, undefined], className, idField = "id", innerItemRenderer, itemSize, itemRenderer = (itemProps) => {
+        const [itemHeight, space, margins] = calculateItemSize(itemProps.index);
+        return defaultItemRenderer({
+            itemHeight,
+            innerItemRenderer,
+            onMouseDown,
+            onClick,
+            onDoubleClick,
+            space,
+            margins,
+            selected: isSelected(itemProps.data),
+            ...itemProps
+        });
+    }, onClick, onDoubleClick, onSelectChange, selectedColor = "#edf4fb", ...rest } = props;
+    // Theme
+    const theme = (0, material_1.useTheme)();
+    // Cache calculation
+    const itemSizeResult = react_2.default.useMemo(() => {
+        if (typeof itemSize === "function")
+            return undefined;
+        const [size, spaces, isNarrow] = itemSize;
+        if (typeof spaces === "number")
+            return [size, spaces, defaultMargin(MUGlobal_1.MUGlobal.pagePaddings, undefined)];
+        return [
+            size,
+            MUGlobal_1.MUGlobal.getSpace(spaces, theme),
+            defaultMargin(spaces, isNarrow)
+        ];
+    }, [itemSize]);
+    // Calculate size
+    const calculateItemSize = (index) => {
+        // Callback function
+        if (typeof itemSize === "function") {
+            const result = itemSize(index);
+            if (result.length == 2)
+                return [...result, defaultMargin(MUGlobal_1.MUGlobal.pagePaddings)];
+            return result;
+        }
+        // Calculation
+        return itemSizeResult;
+    };
+    // Local item size
+    const itemSizeLocal = (index) => {
+        const [size, space] = calculateItemSize(index);
+        return size + space;
+    };
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(react_1.ScrollerList, { className: shared_1.Utils.mergeClasses("ScrollerListEx-Body", className, createGridStyle(alternatingColors, selectedColor)), idField: idField, itemRenderer: itemRenderer, itemSize: itemSizeLocal, ...rest }));
+}

package/lib/cjs/SearchBar.js

@@ -0,0 +1,270 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBar = SearchBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const MoreHoriz_1 = __importDefault(require("@mui/icons-material/MoreHoriz"));
+const shared_1 = require("@etsoo/shared");
+const react_2 = require("@etsoo/react");
+const Labels_1 = require("./app/Labels");
+// Cached width attribute name
+const cachedWidthName = "data-cached-width";
+// Reset form
+const resetForm = (form) => {
+    for (const input of form.elements) {
+        // Ignore disabled inputs
+        if ("disabled" in input && input.disabled)
+            continue;
+        // All non hidden inputs
+        if (input instanceof HTMLInputElement) {
+            // Ignore hidden and data-reset=false input
+            var reset = input.dataset.reset;
+            if (input.type === "hidden" || reset === "false")
+                continue;
+            // Ignore readOnly without data-reset=true inputs
+            if (!input.readOnly || reset === "true") {
+                react_2.ReactUtils.triggerChange(input, "", true);
+            }
+            continue;
+        }
+        // All selects
+        if (input instanceof HTMLSelectElement) {
+            if (input.options.length > 0 && input.options[0].value === "") {
+                input.selectedIndex = 0;
+            }
+            else {
+                input.selectedIndex = -1;
+            }
+            continue;
+        }
+    }
+    // Trigger reset event
+    const resetEvent = new Event("reset");
+    form.dispatchEvent(resetEvent);
+};
+// Disable inputs avoid auto trigger change events for them
+const setChildState = (child, enabled) => {
+    const inputs = child.getElementsByTagName("input");
+    for (const input of inputs) {
+        input.disabled = !enabled;
+    }
+};
+function checkFormEvent(event) {
+    if (event.nativeEvent.cancelable && !event.nativeEvent.composed)
+        return true;
+    if (event.target instanceof HTMLInputElement ||
+        event.target instanceof HTMLTextAreaElement) {
+        const minChars = shared_1.NumberUtils.parse(event.target.dataset.minChars);
+        if (minChars != null && minChars > 0) {
+            const len = event.target.value.length;
+            if (len > 0 && len < minChars) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+/**
+ * Search bar
+ * @param props Props
+ * @returns Component
+ */
+function SearchBar(props) {
+    // Destruct
+    const { className, fields, onSubmit, itemGap = 6, itemWidth = 160 } = props;
+    // Labels
+    const labels = Labels_1.Labels.CommonPage;
+    // Menu index
+    const [index, updateIndex] = react_1.default.useState();
+    // Drawer open / close
+    const [open, updateOpen] = react_1.default.useState(false);
+    // State
+    const state = react_1.default.useRef({ hasMore: true, lastMaxWidth: 9999 }).current;
+    // Watch container
+    const { dimensions } = (0, react_2.useDimensions)(1, (target, rect) => {
+        // Same logic from resetButtonRefe);
+        if (rect.width === state.lastMaxWidth ||
+            (!state.hasMore && rect.width > state.lastMaxWidth))
+            return false;
+        // Len
+        const len = target.children.length;
+        for (let i = 0; i < len; i++) {
+            var classList = target.children[i].classList;
+            classList.remove("showChild");
+        }
+    }, 0);
+    // Show or hide element
+    const setElementVisible = (element, visible) => {
+        element.classList.remove(visible ? "hiddenChild" : "showChild");
+        element.classList.add(visible ? "showChild" : "hiddenChild");
+    };
+    // Reset button ref
+    const resetButtonRef = (instance) => {
+        // Reset button
+        const resetButton = instance;
+        if (resetButton == null)
+            return;
+        // First
+        const [_, container, containerRect] = dimensions[0];
+        if (container == null || containerRect == null || containerRect.width < 10)
+            return;
+        // Container width
+        let maxWidth = containerRect.width;
+        if (maxWidth === state.lastMaxWidth ||
+            (!state.hasMore && maxWidth > state.lastMaxWidth)) {
+            return;
+        }
+        state.lastMaxWidth = maxWidth;
+        // More button
+        const buttonMore = resetButton.previousElementSibling;
+        // Cached button width
+        const cachedButtonWidth = container.getAttribute(cachedWidthName);
+        if (cachedButtonWidth) {
+            maxWidth -= Number.parseFloat(cachedButtonWidth);
+        }
+        else {
+            // Reset button rect
+            const resetButtonRect = resetButton.getBoundingClientRect();
+            // More button rect
+            const buttonMoreRect = buttonMore.getBoundingClientRect();
+            // Total
+            const totalButtonWidth = resetButtonRect.width + buttonMoreRect.width + 3 * itemGap;
+            // Cache
+            container.setAttribute(cachedWidthName, totalButtonWidth.toString());
+            maxWidth -= totalButtonWidth;
+        }
+        // Children
+        const children = container.children;
+        // Len
+        const len = children.length;
+        // Other elements
+        const others = len - 2;
+        let hasMore = false;
+        let newIndex = others;
+        for (let c = 0; c < others; c++) {
+            const child = children[c];
+            const cachedWidth = child.getAttribute(cachedWidthName);
+            let childWidth;
+            if (cachedWidth) {
+                childWidth = Number.parseFloat(cachedWidth);
+            }
+            else {
+                const childD = child.getBoundingClientRect();
+                childWidth = childD.width + itemGap;
+                child.setAttribute(cachedWidthName, childWidth.toString());
+            }
+            // No gap here, child width includes the gap
+            if (childWidth <= maxWidth) {
+                maxWidth -= childWidth;
+                setChildState(child, true);
+                setElementVisible(child, true);
+            }
+            else {
+                setChildState(child, false);
+                setElementVisible(child, false);
+                if (!hasMore) {
+                    // Make sure coming logic to the block
+                    maxWidth = 0;
+                    // Keep the current index
+                    newIndex = c;
+                    // Indicates more
+                    hasMore = true;
+                }
+            }
+        }
+        // Show or hide more button
+        state.hasMore = hasMore;
+        setElementVisible(buttonMore, hasMore);
+        setElementVisible(resetButton, true);
+        // Update menu start index
+        updateIndex(newIndex);
+    };
+    // More items creator
+    const moreItems = [];
+    if (index != null) {
+        for (let i = index; i < fields.length; i++) {
+            moreItems.push((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: fields[i] }, i));
+        }
+    }
+    const hasMoreItems = moreItems.length > 0;
+    // Handle main form
+    const handleForm = (event) => {
+        if (checkFormEvent(event))
+            return;
+        if (state.form == null)
+            state.form = event.currentTarget;
+        delayed.call();
+    };
+    // Handle more button click
+    const handleMore = () => {
+        updateOpen(!open);
+    };
+    // More form change
+    const moreFormChange = (event) => {
+        if (checkFormEvent(event))
+            return;
+        if (state.moreForm == null)
+            state.moreForm = event.currentTarget;
+        delayed.call();
+    };
+    // Submit at once
+    const handleSubmitInstant = (reset = false) => {
+        // Prepare data
+        const data = new FormData(state.form);
+        if (state.moreForm != null) {
+            shared_1.DomUtils.mergeFormData(data, new FormData(state.moreForm));
+        }
+        onSubmit(data, reset);
+    };
+    const delayed = (0, react_2.useDelayedExecutor)(handleSubmitInstant, 480);
+    // Reset
+    const handleReset = () => {
+        // Clear form values
+        if (state.form != null)
+            resetForm(state.form);
+        if (state.moreForm != null)
+            resetForm(state.moreForm);
+        // Resubmit
+        handleSubmitInstant(true);
+    };
+    react_1.default.useEffect(() => {
+        // Delayed way
+        delayed.call(100);
+        return () => {
+            delayed.clear();
+        };
+    }, [className]);
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
+                    if (form)
+                        state.form = form;
+                }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { ref: dimensions[0][0], className: "SearchBarContainer", justifyContent: "center", alignItems: "center", direction: "row", spacing: `${itemGap}px`, width: "100%", overflow: "hidden", paddingTop: "6px", sx: {
+                        "& > :not(style)": {
+                            flexBasis: "auto",
+                            flexGrow: 0,
+                            flexShrink: 0,
+                            maxWidth: `${itemWidth}px`,
+                            visibility: "hidden"
+                        },
+                        "& > .hiddenChild": {
+                            display: "none"
+                        },
+                        "& > .showChild": {
+                            display: "block",
+                            visibility: "visible"
+                        }
+                    }, children: [fields.map((item, index) => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: item }, index))), (0, jsx_runtime_1.jsx)(material_1.IconButton, { title: labels.more, size: "medium", sx: { height: "40px" }, onClick: handleMore, children: (0, jsx_runtime_1.jsx)(MoreHoriz_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "medium", ref: resetButtonRef, onClick: handleReset, children: labels.reset })] }) }), hasMoreItems && ((0, jsx_runtime_1.jsx)(material_1.Drawer, { anchor: "right", sx: { minWidth: "180px" }, ModalProps: {
+                    keepMounted: true
+                }, open: open, onClose: () => updateOpen(false), children: (0, jsx_runtime_1.jsx)("form", { onChange: moreFormChange, ref: (form) => {
+                        if (form)
+                            state.moreForm = form;
+                    }, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2, sx: {
+                            "& > :not(style)": {
+                                minWidth: "100px"
+                            }
+                        }, children: moreItems }) }) }))] }));
+}

package/lib/cjs/SearchField.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchField = SearchField;
+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"));
+const MUGlobal_1 = require("./MUGlobal");
+/**
+ * Search field
+ * @param props Props
+ * @returns Component
+ */
+function SearchField(props) {
+    // Destruct
+    const { changeDelay, InputLabelProps = {}, InputProps = {}, inputProps = {}, onChange, readOnly, size = MUGlobal_1.MUGlobal.searchFieldSize, variant = MUGlobal_1.MUGlobal.searchFieldVariant, minChars = 0, ...rest } = props;
+    // Shrink
+    InputLabelProps.shrink ??= MUGlobal_1.MUGlobal.searchFieldShrink;
+    // Read only
+    if (readOnly != null)
+        InputProps.readOnly = readOnly;
+    // Min characters
+    inputProps["data-min-chars"] = minChars;
+    const isMounted = react_2.default.useRef(true);
+    const delayed = onChange != null && changeDelay != null && changeDelay >= 1
+        ? (0, react_1.useDelayedExecutor)(onChange, changeDelay)
+        : undefined;
+    const onChangeEx = (event) => {
+        if (onChange == null)
+            return;
+        // Min characters check
+        const len = event.target.value.length;
+        if (len > 0 && len < minChars)
+            return;
+        if (changeDelay == null || changeDelay < 1) {
+            onChange(event);
+            return;
+        }
+        delayed?.call(undefined, event);
+    };
+    react_2.default.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+            delayed?.clear();
+        };
+    }, []);
+    // Layout
+    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
+}

package/lib/cjs/SearchOptionGroup.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchOptionGroup = SearchOptionGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MUGlobal_1 = require("./MUGlobal");
+const OptionGroup_1 = require("./OptionGroup");
+/**
+ * Search OptionGroup
+ * @param props Props
+ * @returns Component
+ */
+function SearchOptionGroup(props) {
+    // Destruct
+    const { row = true, size = MUGlobal_1.MUGlobal.searchFieldSize, sx = { "& .MuiFormLabel-root": { fontSize: "0.75em" } }, ...rest } = props;
+    // Layout
+    return (0, jsx_runtime_1.jsx)(OptionGroup_1.OptionGroup, { row: row, size: size, sx: sx, ...rest });
+}

package/lib/cjs/SelectBool.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectBool = SelectBool;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("@etsoo/shared");
+const ReactApp_1 = require("./app/ReactApp");
+const SelectEx_1 = require("./SelectEx");
+/**
+ * SelectBool (yes/no)
+ * @param props Props
+ * @returns Component
+ */
+function SelectBool(props) {
+    // Destruct
+    const { search = true, autoAddBlankItem = search, ...rest } = props;
+    // Options
+    const options = ReactApp_1.globalApp?.getBools() ?? [];
+    if (autoAddBlankItem)
+        shared_1.Utils.addBlankItem(options);
+    // Layout
+    return (0, jsx_runtime_1.jsx)(SelectEx_1.SelectEx, { options: options, search: search, ...rest });
+}