@etsoo/react 1.5.80 → 1.5.83

package/lib/mu/ScrollerListEx.js

@@ -1,167 +0,0 @@
-import { css } from '@emotion/css';
-import { DataTypes, Utils } from '@etsoo/shared';
-import { useTheme } from '@mui/material';
-import React from 'react';
-import { ScrollerList } from '../components/ScrollerList';
-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/mu/SearchBar.d.ts

@@ -1,29 +0,0 @@
-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/mu/SearchBar.js

@@ -1,262 +0,0 @@
-import { Button, Drawer, IconButton, Stack, useTheme } from '@mui/material';
-import React from 'react';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import { useDimensions } from '../uses/useDimensions';
-import { DomUtils } from '@etsoo/shared';
-import { Labels } from '../app/Labels';
-import { ReactUtils } from '../app/ReactUtils';
-import { useDelayedExecutor } from '..';
-// 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/mu/SearchField.d.ts

@@ -1,21 +0,0 @@
-/// <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/mu/SearchField.js

@@ -1,39 +0,0 @@
-import { TextField } from '@mui/material';
-import React from 'react';
-import { useDelayedExecutor } from '../uses/useDelayedExecutor';
-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/mu/SearchOptionGroup.d.ts

@@ -1,9 +0,0 @@
-/// <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/mu/SearchOptionGroup.js

@@ -1,14 +0,0 @@
-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/mu/SelectBool.d.ts

@@ -1,13 +0,0 @@
-/// <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/mu/SelectBool.js

@@ -1,22 +0,0 @@
-import { Utils } from '@etsoo/shared';
-import React from 'react';
-import { globalApp } from '..';
-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 });
-}

package/lib/mu/SelectEx.d.ts

@@ -1,50 +0,0 @@
-import { SelectProps } from '@mui/material';
-import React from 'react';
-import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from '@etsoo/shared';
-/**
- * Extended select component props
- */
-export declare type SelectExProps<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>> = Omit<SelectProps, 'labelId' | 'input' | 'native'> & {
-    /**
-     * Auto add blank item
-     */
-    autoAddBlankItem?: boolean;
-    /**
-     * Id field
-     */
-    idField?: D;
-    /**
-     * Item icon renderer
-     */
-    itemIconRenderer?: (id: T[D]) => React.ReactNode;
-    /**
-     * Label field
-     */
-    labelField?: L | ((option: T) => string);
-    /**
-     * Load data callback
-     */
-    loadData?: () => PromiseLike<T[] | null | undefined>;
-    /**
-     * Item click handler
-     */
-    onItemClick?: (event: React.MouseEvent, option: T) => void;
-    /**
-     * On load data handler
-     */
-    onLoadData?: (options: T[]) => void;
-    /**
-     * Array of options.
-     */
-    options?: ReadonlyArray<T>;
-    /**
-     * Is search case?
-     */
-    search?: boolean;
-};
-/**
- * Extended select component
- * @param props Props
- * @returns Component
- */
-export declare function SelectEx<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: SelectExProps<T, D, L>): JSX.Element;