@etsoo/materialui 1.0.1

package/lib/SelectEx.d.ts

@@ -0,0 +1,50 @@
+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;

package/lib/SelectEx.js

@@ -0,0 +1,156 @@
+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 '@etsoo/react';
+/**
+ * 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)
+            : 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, option);
+                        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(option[idField])))));
+        }))));
+}

package/lib/ShowDataComparison.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Audit line update data model
+ */
+export interface AuditLineUpdateData {
+    oldData: Record<string, unknown>;
+    newData: Record<string, unknown>;
+}
+/**
+ * Check obj is instance of AuditLineUpdateData
+ * @param obj Input
+ * @returns Result
+ */
+export declare function IsAuditLineUpdateData(obj: any): obj is AuditLineUpdateData;
+/**
+ * Show data comparison
+ * @param data Data
+ * @param modelTitle Model window title
+ * @param getLabel Get label callback
+ */
+export declare const ShowDataComparison: (data: AuditLineUpdateData, modelTitle?: string, getLabel?: ((field: string) => string) | undefined) => void;

package/lib/ShowDataComparison.js

@@ -0,0 +1,58 @@
+import { NotificationMessageType } from '@etsoo/notificationbase';
+import { Utils } from '@etsoo/shared';
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import React from 'react';
+import { globalApp } from './app/ReactApp';
+/**
+ * Check obj is instance of AuditLineUpdateData
+ * @param obj Input
+ * @returns Result
+ */
+export 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
+ */
+export const ShowDataComparison = (data, modelTitle, getLabel) => {
+    modelTitle !== null && modelTitle !== void 0 ? modelTitle : (modelTitle = globalApp.get('dataComparison'));
+    getLabel !== null && getLabel !== void 0 ? getLabel : (getLabel = (key) => {
+        var _a;
+        return (_a = globalApp.get(Utils.formatInitial(key))) !== null && _a !== void 0 ? _a : key;
+    });
+    const keys = new Set([
+        ...Object.keys(data.oldData),
+        ...Object.keys(data.newData)
+    ]);
+    const rows = Array.from(keys).map((field) => ({
+        field,
+        oldValue: data.oldData[field],
+        newValue: data.newData[field]
+    }));
+    const inputs = (React.createElement(Table, null,
+        React.createElement(TableHead, null,
+            React.createElement(TableRow, null,
+                React.createElement(TableCell, { width: "18%" }, getLabel('field')),
+                React.createElement(TableCell, { width: "41%", align: "right" }, getLabel('oldValue')),
+                React.createElement(TableCell, { width: "41%", align: "right" }, getLabel('newValue')))),
+        React.createElement(TableBody, null, rows.map((row) => (React.createElement(TableRow, { key: row.field },
+            React.createElement(TableCell, null, getLabel(row.field)),
+            React.createElement(TableCell, { align: "right" }, formatValue(row.oldValue, globalApp)),
+            React.createElement(TableCell, { align: "right" }, formatValue(row.newValue, globalApp))))))));
+    globalApp.notifier.alert([undefined, modelTitle], undefined, NotificationMessageType.Info, { fullScreen: globalApp.smDown, inputs });
+};

package/lib/Switch.d.ts

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

@@ -0,0 +1,34 @@
+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/SwitchAnt.d.ts

@@ -0,0 +1,25 @@
+/// <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/SwitchAnt.js

@@ -0,0 +1,40 @@
+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/TabBox.d.ts

@@ -0,0 +1,54 @@
+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/TabBox.js

@@ -0,0 +1,31 @@
+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/TableEx.d.ts

@@ -0,0 +1,65 @@
+import { GridColumn, GridLoader } from '@etsoo/react';
+import { GridMethodRef } from '@etsoo/react/lib/components/GridMethodRef';
+import { DataTypes, IdDefaultType } from '@etsoo/shared';
+import { TableProps } from '@mui/material';
+import React from 'react';
+/**
+ * Extended table min width for width-unset column
+ */
+export declare const TableExMinWidth: number;
+/**
+ * Extended table methods ref
+ */
+export interface TableExMethodRef<T> extends GridMethodRef<T> {
+    /**
+     * 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<T>>;
+    /**
+     * 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;