@etsoo/react 1.5.79 → 1.5.82

package/lib/mu/SelectEx.js

@@ -1,156 +0,0 @@
-import { Checkbox, FormControl, InputLabel, ListItemText, MenuItem, OutlinedInput, Select } from '@mui/material';
-import React from 'react';
-import { MUGlobal } from './MUGlobal';
-import { ListItemRightIcon } from './ListItemRightIcon';
-import { Utils } from '@etsoo/shared';
-import { ReactUtils } from '../app/ReactUtils';
-/**
- * Extended select component
- * @param props Props
- * @returns Component
- */
-export function SelectEx(props) {
-    var _a;
-    // Destruct
-    const { defaultValue, idField = 'id', itemIconRenderer, label, labelField = 'label', loadData, onItemClick, onLoadData, multiple = false, name, options = [], search = false, autoAddBlankItem = search, value, onChange, fullWidth, ...rest } = props;
-    // Options state
-    const [localOptions, setOptions] = React.useState(options);
-    const isMounted = React.useRef(true);
-    // When options change
-    // [options] will cause infinite loop
-    const propertyWay = loadData == null;
-    React.useEffect(() => {
-        if (propertyWay && options != null)
-            setOptions(options);
-    }, [JSON.stringify(options), propertyWay]);
-    // Local value
-    const valueSource = (_a = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value) !== null && _a !== void 0 ? _a : '';
-    let localValue;
-    if (multiple) {
-        if (Array.isArray(valueSource))
-            localValue = valueSource;
-        else
-            localValue = [valueSource];
-    }
-    else {
-        localValue = valueSource;
-    }
-    // Value state
-    const [valueState, setValueState] = React.useState();
-    React.useEffect(() => {
-        if (localValue != null)
-            setValueState(localValue);
-    }, [localValue]);
-    // Label id
-    const labelId = `selectex-label-${name}`;
-    // Item checked or not
-    const itemChecked = (id) => {
-        if (Array.isArray(valueState))
-            return valueState.indexOf(id) !== -1;
-        return valueState === id;
-    };
-    // Change handler
-    const handleChange = (event) => {
-        const value = event.target.value;
-        if (multiple && !Array.isArray(value))
-            setItemValue([value]);
-        else
-            setItemValue(value);
-    };
-    // Set item
-    const setItemValue = (id) => {
-        var _a;
-        if (id != valueState) {
-            setValueState(id);
-            const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
-            if (input) {
-                // Different value, trigger change event
-                ReactUtils.triggerChange(input, id, false);
-            }
-        }
-    };
-    // Get option id
-    const getId = (option) => {
-        return option[idField];
-    };
-    // Get option label
-    const getLabel = (option) => {
-        return typeof labelField === 'function'
-            ? labelField(option)
-            : new String(option[labelField]);
-    };
-    // Refs
-    const divRef = React.useRef();
-    // When value change
-    React.useEffect(() => {
-        if (loadData) {
-            loadData().then((result) => {
-                if (result == null || !isMounted.current)
-                    return;
-                if (onLoadData)
-                    onLoadData(result);
-                if (autoAddBlankItem) {
-                    Utils.addBlankItem(result, idField, labelField);
-                }
-                setOptions(result);
-            });
-        }
-    }, [localValue]);
-    // When layout ready
-    React.useEffect(() => {
-        var _a;
-        const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
-        const inputChange = (event) => {
-            // Reset case
-            if (event.cancelable)
-                setValueState(multiple ? [] : '');
-        };
-        input === null || input === void 0 ? void 0 : input.addEventListener('change', inputChange);
-        return () => {
-            isMounted.current = false;
-            input === null || input === void 0 ? void 0 : input.removeEventListener('change', inputChange);
-        };
-    }, []);
-    // Layout
-    return (React.createElement(FormControl, { size: search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, fullWidth: fullWidth },
-        React.createElement(InputLabel, { id: labelId, shrink: search
-                ? MUGlobal.searchFieldShrink
-                : MUGlobal.inputFieldShrink }, label),
-        React.createElement(Select, { ref: divRef, value: localOptions.some((option) => itemChecked(getId(option)))
-                ? valueState !== null && valueState !== void 0 ? valueState : ''
-                : '', input: React.createElement(OutlinedInput, { notched: true, label: label }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
-                if (onChange)
-                    onChange(event, child);
-                if (multiple)
-                    handleChange(event);
-            }, 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, ...rest }, localOptions.map((option) => {
-            // Option id
-            const id = getId(option);
-            // Option label
-            const label = getLabel(option);
-            // Option
-            return (React.createElement(MenuItem, { key: id, value: id, onClick: (event) => {
-                    if (onItemClick) {
-                        onItemClick(event, id);
-                        if (event.defaultPrevented)
-                            return;
-                    }
-                    if (!multiple)
-                        setItemValue(id);
-                } },
-                multiple && React.createElement(Checkbox, { checked: itemChecked(id) }),
-                React.createElement(ListItemText, { primary: label }),
-                itemIconRenderer && (React.createElement(ListItemRightIcon, null, itemIconRenderer(id)))));
-        }))));
-}

package/lib/mu/Switch.d.ts

@@ -1,29 +0,0 @@
-/// <reference types="react" />
-import { FormControlLabelProps } from '@mui/material';
-/**
- * Switch props
- */
-export interface SwitchProps extends Omit<FormControlLabelProps, 'control'> {
-    /**
-     * Value, default 'on'
-     */
-    value?: string;
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
-    /**
-     * Size
-     */
-    size?: 'small' | 'medium';
-    /**
-     * Display as Checkbox
-     */
-    checkbox?: boolean;
-}
-/**
- * Switch
- * @param props Props
- * @returns Component
- */
-export declare function Switch(props: SwitchProps): JSX.Element;

package/lib/mu/Switch.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import { FormControlLabel } from '@mui/material';
-import MuiCheckbox from '@mui/material/Checkbox';
-import MuiSwitch from '@mui/material/Switch';
-/**
- * Switch
- * @param props Props
- * @returns Component
- */
-export function Switch(props) {
-    var _a;
-    // Destruct
-    const { checked, defaultChecked, defaultValue, onChange, readOnly, size, checkbox = false, value = 'true', ...rest } = props;
-    // Checked state
-    const [controlChecked, setControlChecked] = React.useState((_a = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _a !== void 0 ? _a : defaultValue == value);
-    React.useEffect(() => {
-        if (checked)
-            setControlChecked(checked);
-    }, [checked]);
-    // Handle change
-    const handleChange = (event, checked) => {
-        if (onChange)
-            onChange(event, checked);
-        setControlChecked(checked);
-    };
-    // Control
-    const control = checkbox ? (React.createElement(MuiCheckbox, { readOnly: readOnly, checked: controlChecked, onChange: handleChange, size: size, value: value })) : (React.createElement(MuiSwitch, { readOnly: readOnly, checked: controlChecked, onChange: handleChange, size: size, value: value }));
-    // Default state
-    React.useEffect(() => {
-        setControlChecked(controlChecked);
-    }, [controlChecked]);
-    // Layout
-    return React.createElement(FormControlLabel, { control: control, ...rest });
-}

package/lib/mu/SwitchAnt.d.ts

@@ -1,25 +0,0 @@
-/// <reference types="react" />
-import { SwitchProps } from '@mui/material/Switch';
-/**
- * Ant style switch props
- */
-export interface SwitchAntProps extends SwitchProps {
-    /**
-     *
-     */
-    activeColor?: string;
-    /**
-     * Start label
-     */
-    startLabel: string;
-    /**
-     * End label
-     */
-    endLabel: string;
-}
-/**
- * Ant style switch
- * @param props Props
- * @returns Component
- */
-export declare function SwitchAnt(props: SwitchAntProps): JSX.Element;

package/lib/mu/SwitchAnt.js

@@ -1,40 +0,0 @@
-import { Stack, Typography } from '@mui/material';
-import Switch from '@mui/material/Switch';
-import React from 'react';
-/**
- * Ant style switch
- * @param props Props
- * @returns Component
- */
-export function SwitchAnt(props) {
-    var _a;
-    // Destruct
-    const { activeColor, checked, defaultChecked, defaultValue, endLabel, startLabel, onChange, value = 'true', ...rest } = props;
-    // Checked state
-    const [controlChecked, setControlChecked] = React.useState((_a = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _a !== void 0 ? _a : defaultValue == value);
-    React.useEffect(() => {
-        if (checked)
-            setControlChecked(checked);
-    }, [checked]);
-    // On change
-    const onChangeLocal = (event, checked) => {
-        if (onChange)
-            onChange(event, checked);
-        setControlChecked(checked);
-    };
-    // Layout
-    return (React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
-        React.createElement(Typography, { onClick: () => setControlChecked(false), sx: {
-                cursor: 'pointer',
-                color: controlChecked
-                    ? undefined
-                    : (theme) => activeColor !== null && activeColor !== void 0 ? activeColor : theme.palette.warning.main
-            } }, startLabel),
-        React.createElement(Switch, { checked: controlChecked, value: value, onChange: onChangeLocal, ...rest }),
-        React.createElement(Typography, { onClick: () => setControlChecked(true), sx: {
-                cursor: 'pointer',
-                color: controlChecked
-                    ? (theme) => activeColor !== null && activeColor !== void 0 ? activeColor : theme.palette.warning.main
-                    : undefined
-            } }, endLabel)));
-}

package/lib/mu/TabBox.d.ts

@@ -1,54 +0,0 @@
-import { BoxProps, TabProps, TabsProps } from '@mui/material';
-import React from 'react';
-/**
- * Tab with box panel props
- */
-export interface TabBoxPanel extends Omit<TabProps, 'value' | 'children'> {
-    /**
-     * Children
-     */
-    children?: ((visible: boolean) => React.ReactNode) | React.ReactNode;
-    /**
-     * Panel box props
-     */
-    panel?: Omit<BoxProps, 'hidden'>;
-    /**
-     * To URL
-     */
-    to?: string;
-}
-/**
- * Tabs with box props
- */
-export interface TabBoxPros extends BoxProps {
-    /**
-     * Container props
-     */
-    container?: Omit<TabsProps, 'value'>;
-    /**
-     * Default selected index
-     */
-    defaultIndex?: number;
-    /**
-     * Current index
-     */
-    index?: number;
-    /**
-     * Add a hidden input and its name
-     */
-    inputName?: string;
-    /**
-     * Root props
-     */
-    root?: BoxProps;
-    /**
-     * Tabs
-     */
-    tabs: TabBoxPanel[];
-}
-/**
- * Tabs with box
- * @param props Props
- * @returns Component
- */
-export declare function TabBox(props: TabBoxPros): JSX.Element;

package/lib/mu/TabBox.js

@@ -1,31 +0,0 @@
-import { Utils } from '@etsoo/shared';
-import { Box, Tab, Tabs } from '@mui/material';
-import React from 'react';
-import { Link } from 'react-router-dom';
-/**
- * Tabs with box
- * @param props Props
- * @returns Component
- */
-export function TabBox(props) {
-    // Destruct
-    const { index, inputName, root, container = {}, defaultIndex = 0, tabs } = props;
-    const { onChange, ...rest } = container;
-    // State
-    const [value, setValue] = React.useState(defaultIndex);
-    React.useEffect(() => {
-        if (index == null)
-            return;
-        setValue(index);
-    }, [index]);
-    // Layout
-    return (React.createElement(React.Fragment, null,
-        inputName && (React.createElement("input", { type: "hidden", name: inputName, value: value })),
-        React.createElement(Box, { ...root },
-            React.createElement(Tabs, { value: value, onChange: (event, newValue) => {
-                    setValue(newValue);
-                    if (onChange)
-                        onChange(event, newValue);
-                }, ...rest }, tabs.map(({ children, panel, ...tabRest }, index) => (React.createElement(Tab, { key: index, value: index, LinkComponent: tabRest.to ? Link : undefined, ...tabRest }))))),
-        tabs.map(({ children, panel }, index) => (React.createElement(Box, { key: index, hidden: value !== index, ...panel }, Utils.getResult(children, value === index))))));
-}

package/lib/mu/TableEx.d.ts

@@ -1,66 +0,0 @@
-import { DataTypes, IdDefaultType } from '@etsoo/shared';
-import { TableProps } from '@mui/material';
-import React from 'react';
-import { GridColumn } from '../components/GridColumn';
-import { GridLoader } from '../components/GridLoader';
-import { GridMethodRef } from './GridMethodRef';
-/**
- * Extended table min width for width-unset column
- */
-export declare const TableExMinWidth: number;
-/**
- * Extended table methods ref
- */
-export interface TableExMethodRef extends GridMethodRef {
-    /**
-     * Refresh data
-     */
-    refresh(): void;
-}
-/**
- * Extended table props
- */
-export declare type TableExProps<T extends object, D extends DataTypes.Keys<T>> = TableProps & GridLoader<T> & {
-    /**
-     * Alternating colors for odd/even rows
-     */
-    alternatingColors?: [string?, string?];
-    /**
-     * Columns
-     */
-    columns: GridColumn<T>[];
-    /**
-     * Header cells background color and font color
-     */
-    headerColors?: [string?, string?];
-    /**
-     * Id field
-     */
-    idField?: D;
-    /**
-     * Max height
-     */
-    maxHeight?: number;
-    /**
-     * Methods
-     */
-    mRef?: React.Ref<TableExMethodRef>;
-    /**
-     * On items select change
-     */
-    onSelectChange?: (selectedItems: T[]) => void;
-    /**
-     * Row height
-     */
-    rowHeight?: number;
-    /**
-     * Header and bottom height
-     */
-    otherHeight?: number;
-};
-/**
- * Extended Table
- * @param props Props
- * @returns Component
- */
-export declare function TableEx<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TableExProps<T, D>): JSX.Element;