@etsoo/materialui 1.0.1

package/lib/ScrollerListEx.d.ts

@@ -0,0 +1,81 @@
+import { ScrollerListProps } from '@etsoo/react';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
+import React from 'react';
+import { ListChildComponentProps } from 'react-window';
+import { MouseEventWithDataHandler } from './MUGlobal';
+/**
+ * Extended ScrollerList inner item renderer props
+ */
+export interface ScrollerListExInnerItemRendererProps<T> extends ListChildComponentProps<T> {
+    /**
+     * Item selected
+     */
+    selected: boolean;
+    /**
+     * Item height
+     */
+    itemHeight: number;
+    /**
+     * Item space
+     */
+    space: number;
+    /**
+     * Default margins
+     */
+    margins: object;
+}
+/**
+ * Extended ScrollerList ItemSize type
+ * 1. Callback function
+ * 2. Static sets
+ * 3. Dynamic calculation
+ */
+export declare type ScrollerListExItemSize = ((index: number) => [number, number] | [number, number, object]) | [number, number] | [number, object, boolean?];
+/**
+ * Extended ScrollerList Props
+ */
+export declare type ScrollerListExProps<T extends object, D extends DataTypes.Keys<T>> = Omit<ScrollerListProps<T>, 'itemRenderer' | 'itemSize'> & {
+    /**
+     * Alternating colors for odd/even rows
+     */
+    alternatingColors?: [string?, string?];
+    /**
+     * Inner item renderer
+     */
+    innerItemRenderer: (props: ScrollerListExInnerItemRendererProps<T>) => React.ReactNode;
+    /**
+     * Item renderer
+     */
+    itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
+    /**
+     * Id field
+     * Failed: D extends { id: DataTypes.IdType } ? { idField?: D } : { idField: D }
+     */
+    idField?: D;
+    /**
+     * Item size, a function indicates its a variable size list
+     */
+    itemSize: ScrollerListExItemSize;
+    /**
+     * Double click handler
+     */
+    onDoubleClick?: MouseEventWithDataHandler<T>;
+    /**
+     * Click handler
+     */
+    onClick?: MouseEventWithDataHandler<T>;
+    /**
+     * On items select change
+     */
+    onSelectChange?: (selectedItems: T[]) => void;
+    /**
+     * Selected color
+     */
+    selectedColor?: string;
+};
+/**
+ * Extended ScrollerList
+ * @param props Props
+ * @returns Component
+ */
+export declare function ScrollerListEx<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: ScrollerListExProps<T, D>): JSX.Element;

package/lib/ScrollerListEx.js

@@ -0,0 +1,167 @@
+import { css } from '@emotion/css';
+import { ScrollerList } from '@etsoo/react';
+import { DataTypes, Utils } from '@etsoo/shared';
+import { useTheme } from '@mui/material';
+import React from 'react';
+import { MUGlobal } from './MUGlobal';
+// Scroll bar size
+const scrollbarSize = 16;
+// Selected class name
+const selectedClassName = 'ScrollerListEx-Selected';
+const createGridStyle = (alternatingColors, selectedColor) => {
+    return 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.half(margin);
+    if (isNarrow == null) {
+        const half = 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 (React.createElement("div", { className: rowClass, style: style, onMouseDown: (event) => onMouseDown(event.currentTarget, data), onClick: (event) => onClick && onClick(event, data), onDoubleClick: (event) => onDoubleClick && onDoubleClick(event, data) }, child));
+}
+/**
+ * Extended ScrollerList
+ * @param props Props
+ * @returns Component
+ */
+export function ScrollerListEx(props) {
+    // Selected item ref
+    const selectedItem = React.useRef();
+    const onMouseDown = (div, data) => {
+        var _a;
+        // Destruct
+        const [selectedDiv, selectedData] = (_a = selectedItem.current) !== null && _a !== void 0 ? _a : [];
+        if (selectedData != null && selectedData[idField] === data[idField])
+            return;
+        selectedDiv === null || selectedDiv === void 0 ? void 0 : selectedDiv.classList.remove(selectedClassName);
+        div.classList.add(selectedClassName);
+        selectedItem.current = [div, data];
+        if (onSelectChange)
+            onSelectChange([data]);
+    };
+    const isSelected = (data) => {
+        var _a;
+        const [_, selectedData] = (_a = selectedItem.current) !== null && _a !== void 0 ? _a : [];
+        const selected = selectedData && data && selectedData[idField] === data[idField]
+            ? true
+            : false;
+        return selected;
+    };
+    // Destruct
+    const { alternatingColors = [undefined, undefined], className, idField = 'id', innerItemRenderer, itemSize, itemKey = (index, data) => { var _a; return (_a = DataTypes.getIdValue1(data, idField)) !== null && _a !== void 0 ? _a : index; }, 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 = useTheme();
+    // Cache calculation
+    const itemSizeResult = React.useMemo(() => {
+        if (typeof itemSize === 'function')
+            return undefined;
+        const [size, spaces, isNarrow] = itemSize;
+        if (typeof spaces === 'number')
+            return [
+                size,
+                spaces,
+                defaultMargin(MUGlobal.pagePaddings, undefined)
+            ];
+        return [
+            size,
+            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.pagePaddings)];
+            return result;
+        }
+        // Calculation
+        return itemSizeResult;
+    };
+    // Local item size
+    const itemSizeLocal = (index) => {
+        const [size, space] = calculateItemSize(index);
+        return size + space;
+    };
+    // Layout
+    return (React.createElement(ScrollerList, { className: Utils.mergeClasses('ScrollerListEx-Body', className, createGridStyle(alternatingColors, selectedColor)), itemKey: itemKey, itemRenderer: itemRenderer, itemSize: itemSizeLocal, ...rest }));
+}

package/lib/SearchBar.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+/**
+ * Search bar props
+ */
+export interface SearchBarProps {
+    /**
+     * Style class name
+     */
+    className?: string;
+    /**
+     * Fields
+     */
+    fields: React.ReactElement[];
+    /**
+     * Inner height
+     * @default 40
+     */
+    innerHeight?: number;
+    /**
+     * On submit callback
+     */
+    onSubmit: (data: FormData, reset: boolean) => void | PromiseLike<void>;
+}
+/**
+ * Search bar
+ * @param props Props
+ * @returns Component
+ */
+export declare function SearchBar(props: SearchBarProps): JSX.Element;

package/lib/SearchBar.js

@@ -0,0 +1,260 @@
+import { Button, Drawer, IconButton, Stack, useTheme } from '@mui/material';
+import React from 'react';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import { DomUtils } from '@etsoo/shared';
+import { ReactUtils, useDelayedExecutor, useDimensions } from '@etsoo/react';
+import { Labels } from './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 input
+            if (input.type === 'hidden')
+                continue;
+            // Ignore readOnly without data-reset=true inputs
+            if (!input.readOnly || input.dataset.reset === 'true') {
+                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;
+    }
+};
+/**
+ * Search bar
+ * @param props Props
+ * @returns Component
+ */
+export function SearchBar(props) {
+    // Destruct
+    const { className, fields, innerHeight = 40, onSubmit } = props;
+    // Labels
+    const labels = Labels.CommonPage;
+    // Spacing
+    const theme = useTheme();
+    const gap = parseFloat(theme.spacing(1));
+    // Menu index
+    const [index, updateIndex] = React.useState();
+    // Drawer open / close
+    const [open, updateOpen] = React.useState(false);
+    // State
+    const state = React.useRef({ hasMore: true, lastMaxWidth: 9999 }).current;
+    // Watch container
+    const { dimensions } = useDimensions(1, (target, rect) => {
+        // Same logic from resetButtonRef
+        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 * gap;
+            // 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 + gap;
+                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(React.createElement(React.Fragment, { key: i }, fields[i]));
+        }
+    }
+    // Handle main form
+    const handleForm = (event) => {
+        if (event.nativeEvent.cancelable && !event.nativeEvent.composed)
+            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 (event.nativeEvent.cancelable && !event.nativeEvent.composed)
+            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) {
+            DomUtils.mergeFormData(data, new FormData(state.moreForm));
+        }
+        onSubmit(data, reset);
+    };
+    const delayed = 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.useEffect(() => {
+        // Delayed way
+        delayed.call(100);
+        return () => {
+            delayed.clear();
+        };
+    }, [className]);
+    // Layout
+    return (React.createElement(React.Fragment, null,
+        React.createElement("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
+                if (form)
+                    state.form = form;
+            } },
+            React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, height: innerHeight, sx: {
+                    '& > :not(style)': {
+                        flexBasis: 'auto',
+                        flexGrow: 0,
+                        flexShrink: 0,
+                        maxWidth: '180px',
+                        visibility: 'hidden'
+                    },
+                    '& > .hiddenChild': {
+                        display: 'none'
+                    },
+                    '& > .showChild': {
+                        display: 'block',
+                        visibility: 'visible'
+                    }
+                } },
+                fields.map((item, index) => (React.createElement(React.Fragment, { key: index }, item))),
+                React.createElement(IconButton, { "aria-label": "delete", size: "medium", onClick: handleMore },
+                    React.createElement(MoreHorizIcon, null)),
+                React.createElement(Button, { variant: "contained", size: "medium", ref: resetButtonRef, onClick: handleReset }, labels.reset))),
+        index != null && index < fields.length && (React.createElement(Drawer, { anchor: "right", sx: { minWidth: '250px' }, ModalProps: {
+                keepMounted: true // Better open performance on mobile.
+            }, open: open, onClose: () => updateOpen(false) },
+            React.createElement("form", { onChange: moreFormChange, ref: (form) => {
+                    if (form)
+                        state.moreForm = form;
+                } },
+                React.createElement(Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2, sx: {
+                        '& > :not(style)': {
+                            minWidth: '100px'
+                        }
+                    } }, moreItems))))));
+}

package/lib/SearchField.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material';
+/**
+ * Search field props
+ */
+export declare type SearchFieldProps = TextFieldProps & {
+    /**
+     * Change delay (ms) to avoid repeatly dispatch onChange
+     */
+    changeDelay?: number;
+    /**
+     * Is the field read only?
+     */
+    readOnly?: boolean;
+};
+/**
+ * Search field
+ * @param props Props
+ * @returns Component
+ */
+export declare function SearchField(props: SearchFieldProps): JSX.Element;

package/lib/SearchField.js

@@ -0,0 +1,39 @@
+import { useDelayedExecutor } from '@etsoo/react';
+import { TextField } from '@mui/material';
+import React from 'react';
+import { MUGlobal } from './MUGlobal';
+/**
+ * Search field
+ * @param props Props
+ * @returns Component
+ */
+export function SearchField(props) {
+    // Destruct
+    const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, readOnly, size = MUGlobal.searchFieldSize, variant = MUGlobal.searchFieldVariant, ...rest } = props;
+    // Shrink
+    InputLabelProps.shrink = MUGlobal.searchFieldShrink;
+    // Read only
+    if (readOnly != null)
+        InputProps.readOnly = readOnly;
+    const isMounted = React.useRef(true);
+    const delayed = onChange != null && changeDelay != null && changeDelay >= 1
+        ? useDelayedExecutor(onChange, changeDelay)
+        : undefined;
+    const onChangeEx = (event) => {
+        if (onChange == null)
+            return;
+        if (changeDelay == null || changeDelay < 1) {
+            onChange(event);
+            return;
+        }
+        delayed === null || delayed === void 0 ? void 0 : delayed.call(undefined, event);
+    };
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+            delayed === null || delayed === void 0 ? void 0 : delayed.clear();
+        };
+    }, []);
+    // Layout
+    return (React.createElement(TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
+}

package/lib/SearchOptionGroup.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from '@etsoo/shared';
+import { OptionGroupProps } from './OptionGroup';
+/**
+ * Search OptionGroup
+ * @param props Props
+ * @returns Component
+ */
+export declare function SearchOptionGroup<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: OptionGroupProps<T, D, L>): JSX.Element;

package/lib/SearchOptionGroup.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { MUGlobal } from './MUGlobal';
+import { OptionGroup } from './OptionGroup';
+/**
+ * Search OptionGroup
+ * @param props Props
+ * @returns Component
+ */
+export function SearchOptionGroup(props) {
+    // Destruct
+    const { row = true, size = MUGlobal.searchFieldSize, sx = { '& .MuiFormLabel-root': { fontSize: '0.75em' } }, ...rest } = props;
+    // Layout
+    return React.createElement(OptionGroup, { row: row, size: size, sx: sx, ...rest });
+}

package/lib/SelectBool.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ListType1 } from '@etsoo/shared';
+import { SelectExProps } from './SelectEx';
+/**
+ * SelectBool props
+ */
+export declare type SelectBoolProps = Omit<SelectExProps<ListType1>, 'options' | 'loadData'>;
+/**
+ * SelectBool (yes/no)
+ * @param props Props
+ * @returns Component
+ */
+export declare function SelectBool(props: SelectBoolProps): JSX.Element;

package/lib/SelectBool.js

@@ -0,0 +1,22 @@
+import { Utils } from '@etsoo/shared';
+import React from 'react';
+import { globalApp } from './app/ReactApp';
+import { SelectEx } from './SelectEx';
+/**
+ * SelectBool (yes/no)
+ * @param props Props
+ * @returns Component
+ */
+export function SelectBool(props) {
+    // Destruct
+    const { search = true, autoAddBlankItem = search, ...rest } = props;
+    // Options
+    const options = [
+        { id: 'false', label: globalApp.get('no') },
+        { id: 'true', label: globalApp.get('yes') }
+    ];
+    if (autoAddBlankItem)
+        Utils.addBlankItem(options);
+    // Layout
+    return React.createElement(SelectEx, { options: options, search: search, ...rest });
+}