@etsoo/materialui 1.0.1

package/src/SelectEx.tsx

@@ -0,0 +1,290 @@
+import {
+    Checkbox,
+    FormControl,
+    InputLabel,
+    ListItemText,
+    MenuItem,
+    OutlinedInput,
+    Select,
+    SelectChangeEvent,
+    SelectProps
+} from '@mui/material';
+import React from 'react';
+import { MUGlobal } from './MUGlobal';
+import { ListItemRightIcon } from './ListItemRightIcon';
+import {
+    DataTypes,
+    IdDefaultType,
+    LabelDefaultType,
+    ListType,
+    Utils
+} from '@etsoo/shared';
+import { ReactUtils } from '@etsoo/react';
+
+/**
+ * Extended select component props
+ */
+export 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 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>) {
+    // Destruct
+    const {
+        defaultValue,
+        idField = 'id' as D,
+        itemIconRenderer,
+        label,
+        labelField = 'label' as L,
+        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 = defaultValue ?? value ?? '';
+    let localValue: unknown | unknown[];
+    if (multiple) {
+        if (Array.isArray(valueSource)) localValue = valueSource;
+        else localValue = [valueSource];
+    } else {
+        localValue = valueSource;
+    }
+
+    // Value state
+    const [valueState, setValueState] = React.useState<unknown>();
+
+    React.useEffect(() => {
+        if (localValue != null) setValueState(localValue);
+    }, [localValue]);
+
+    // Label id
+    const labelId = `selectex-label-${name}`;
+
+    // Item checked or not
+    const itemChecked = (id: unknown) => {
+        if (Array.isArray(valueState)) return valueState.indexOf(id) !== -1;
+        return valueState === id;
+    };
+
+    // Change handler
+    const handleChange = (event: SelectChangeEvent<unknown>) => {
+        const value = event.target.value;
+        if (multiple && !Array.isArray(value)) setItemValue([value]);
+        else setItemValue(value);
+    };
+
+    // Set item
+    const setItemValue = (id: unknown) => {
+        if (id != valueState) {
+            setValueState(id);
+
+            const input = divRef.current?.querySelector('input');
+            if (input) {
+                // Different value, trigger change event
+                ReactUtils.triggerChange(input, id as string, false);
+            }
+        }
+    };
+
+    // Get option id
+    const getId = (option: T) => {
+        return option[idField] as unknown as React.Key;
+    };
+
+    // Get option label
+    const getLabel = (option: T) => {
+        return typeof labelField === 'function'
+            ? labelField(option)
+            : (option[labelField] as string);
+    };
+
+    // Refs
+    const divRef = React.useRef<HTMLDivElement>();
+
+    // 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(() => {
+        const input = divRef.current?.querySelector('input');
+        const inputChange = (event: Event) => {
+            // Reset case
+            if (event.cancelable) setValueState(multiple ? [] : '');
+        };
+        input?.addEventListener('change', inputChange);
+
+        return () => {
+            isMounted.current = false;
+            input?.removeEventListener('change', inputChange);
+        };
+    }, []);
+
+    // Layout
+    return (
+        <FormControl
+            size={search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize}
+            fullWidth={fullWidth}
+        >
+            <InputLabel
+                id={labelId}
+                shrink={
+                    search
+                        ? MUGlobal.searchFieldShrink
+                        : MUGlobal.inputFieldShrink
+                }
+            >
+                {label}
+            </InputLabel>
+            <Select
+                ref={divRef}
+                value={
+                    localOptions.some((option) => itemChecked(getId(option)))
+                        ? valueState ?? ''
+                        : ''
+                }
+                input={<OutlinedInput notched 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 (
+                        <MenuItem
+                            key={id}
+                            value={id}
+                            onClick={(event) => {
+                                if (onItemClick) {
+                                    onItemClick(event, option);
+                                    if (event.defaultPrevented) return;
+                                }
+                                if (!multiple) setItemValue(id);
+                            }}
+                        >
+                            {multiple && <Checkbox checked={itemChecked(id)} />}
+                            <ListItemText primary={label} />
+                            {itemIconRenderer && (
+                                <ListItemRightIcon>
+                                    {itemIconRenderer(option[idField])}
+                                </ListItemRightIcon>
+                            )}
+                        </MenuItem>
+                    );
+                })}
+            </Select>
+        </FormControl>
+    );
+}

package/src/ShowDataComparison.tsx

@@ -0,0 +1,106 @@
+import { IApp } from '@etsoo/appscript/lib/mjs/app/IApp';
+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';
+
+/**
+ * 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 function IsAuditLineUpdateData(obj: any): obj is AuditLineUpdateData {
+    return (
+        typeof obj === 'object' &&
+        'oldData' in obj &&
+        typeof obj.oldData === 'object' &&
+        'newData' in obj &&
+        typeof obj.newData === 'object'
+    );
+}
+
+// Format value
+const formatValue = (value: unknown, app: IApp) => {
+    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: AuditLineUpdateData,
+    modelTitle?: string,
+    getLabel?: (field: string) => string
+) => {
+    modelTitle ??= globalApp.get<string>('dataComparison');
+    getLabel ??= (key) => {
+        return globalApp.get(Utils.formatInitial(key)) ?? 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 = (
+        <Table>
+            <TableHead>
+                <TableRow>
+                    <TableCell width="18%">{getLabel('field')}</TableCell>
+                    <TableCell width="41%" align="right">
+                        {getLabel('oldValue')}
+                    </TableCell>
+                    <TableCell width="41%" align="right">
+                        {getLabel('newValue')}
+                    </TableCell>
+                </TableRow>
+            </TableHead>
+            <TableBody>
+                {rows.map((row) => (
+                    <TableRow key={row.field}>
+                        <TableCell>{getLabel!(row.field)}</TableCell>
+                        <TableCell align="right">
+                            {formatValue(row.oldValue, globalApp)}
+                        </TableCell>
+                        <TableCell align="right">
+                            {formatValue(row.newValue, globalApp)}
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    );
+
+    globalApp.notifier.alert(
+        [undefined, modelTitle],
+        undefined,
+        NotificationMessageType.Info,
+        { fullScreen: globalApp.smDown, inputs }
+    );
+};

package/src/Switch.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { FormControlLabel, FormControlLabelProps } from '@mui/material';
+import MuiCheckbox from '@mui/material/Checkbox';
+import MuiSwitch from '@mui/material/Switch';
+
+/**
+ * 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 function Switch(props: SwitchProps) {
+    // Destruct
+    const {
+        checked,
+        defaultChecked,
+        defaultValue,
+        onChange,
+        readOnly,
+        size,
+        checkbox = false,
+        value = 'true',
+        ...rest
+    } = props;
+
+    // Checked state
+    const [controlChecked, setControlChecked] = React.useState(
+        checked ?? defaultChecked ?? defaultValue == value
+    );
+
+    React.useEffect(() => {
+        if (checked) setControlChecked(checked);
+    }, [checked]);
+
+    // Handle change
+    const handleChange = (
+        event: React.ChangeEvent<HTMLInputElement>,
+        checked: boolean
+    ) => {
+        if (onChange) onChange(event, checked);
+        setControlChecked(checked);
+    };
+
+    // Control
+    const control = checkbox ? (
+        <MuiCheckbox
+            readOnly={readOnly}
+            checked={controlChecked}
+            onChange={handleChange}
+            size={size}
+            value={value}
+        />
+    ) : (
+        <MuiSwitch
+            readOnly={readOnly}
+            checked={controlChecked}
+            onChange={handleChange}
+            size={size}
+            value={value}
+        />
+    );
+
+    // Default state
+    React.useEffect(() => {
+        setControlChecked(controlChecked);
+    }, [controlChecked]);
+
+    // Layout
+    return <FormControlLabel control={control} {...rest} />;
+}

package/src/SwitchAnt.tsx

@@ -0,0 +1,95 @@
+import { Stack, Typography } from '@mui/material';
+import Switch, { SwitchProps } from '@mui/material/Switch';
+import React from 'react';
+
+/**
+ * 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 function SwitchAnt(props: SwitchAntProps) {
+    // Destruct
+    const {
+        activeColor,
+        checked,
+        defaultChecked,
+        defaultValue,
+        endLabel,
+        startLabel,
+        onChange,
+        value = 'true',
+        ...rest
+    } = props;
+
+    // Checked state
+    const [controlChecked, setControlChecked] = React.useState(
+        checked ?? defaultChecked ?? defaultValue == value
+    );
+
+    React.useEffect(() => {
+        if (checked) setControlChecked(checked);
+    }, [checked]);
+
+    // On change
+    const onChangeLocal = (
+        event: React.ChangeEvent<HTMLInputElement>,
+        checked: boolean
+    ) => {
+        if (onChange) onChange(event, checked);
+        setControlChecked(checked);
+    };
+
+    // Layout
+    return (
+        <Stack direction="row" spacing={1} alignItems="center">
+            <Typography
+                onClick={() => setControlChecked(false)}
+                sx={{
+                    cursor: 'pointer',
+                    color: controlChecked
+                        ? undefined
+                        : (theme) => activeColor ?? theme.palette.warning.main
+                }}
+            >
+                {startLabel}
+            </Typography>
+            <Switch
+                checked={controlChecked}
+                value={value}
+                onChange={onChangeLocal}
+                {...rest}
+            />
+            <Typography
+                onClick={() => setControlChecked(true)}
+                sx={{
+                    cursor: 'pointer',
+                    color: controlChecked
+                        ? (theme) => activeColor ?? theme.palette.warning.main
+                        : undefined
+                }}
+            >
+                {endLabel}
+            </Typography>
+        </Stack>
+    );
+}

package/src/TabBox.tsx

@@ -0,0 +1,118 @@
+import { Utils } from '@etsoo/shared';
+import { Box, BoxProps, Tab, TabProps, Tabs, TabsProps } from '@mui/material';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+/**
+ * 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 function TabBox(props: TabBoxPros) {
+    // 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.Fragment>
+            {inputName && (
+                <input type="hidden" name={inputName} value={value} />
+            )}
+            <Box {...root}>
+                <Tabs
+                    value={value}
+                    onChange={(event, newValue) => {
+                        setValue(newValue);
+                        if (onChange) onChange(event, newValue);
+                    }}
+                    {...rest}
+                >
+                    {tabs.map(({ children, panel, ...tabRest }, index) => (
+                        <Tab
+                            key={index}
+                            value={index}
+                            LinkComponent={tabRest.to ? Link : undefined}
+                            {...tabRest}
+                        />
+                    ))}
+                </Tabs>
+            </Box>
+            {tabs.map(({ children, panel }, index) => (
+                <Box key={index} hidden={value !== index} {...panel}>
+                    {Utils.getResult(children, value === index)}
+                </Box>
+            ))}
+        </React.Fragment>
+    );
+}