@etsoo/react 1.5.80 → 1.5.81

package/src/mu/SelectEx.tsx

@@ -1,290 +0,0 @@
-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 '../app/ReactUtils';
-
-/**
- * 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/mu/Switch.tsx

@@ -1,94 +0,0 @@
-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/mu/SwitchAnt.tsx

@@ -1,95 +0,0 @@
-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/mu/TabBox.tsx

@@ -1,118 +0,0 @@
-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>
-    );
-}