@etsoo/react 1.5.80 → 1.5.83

package/src/mu/TextFieldEx.tsx

@@ -1,250 +0,0 @@
-import React from 'react';
-import {
-    IconButton,
-    InputAdornment,
-    TextField,
-    TextFieldProps
-} from '@mui/material';
-import { MUGlobal } from './MUGlobal';
-import { Clear, Visibility } from '@mui/icons-material';
-import useCombinedRefs from '../uses/useCombinedRefs';
-import { Keyboard } from '@etsoo/shared';
-import { useDelayedExecutor } from '../uses/useDelayedExecutor';
-
-/**
- * Extended text field props
- */
-export type TextFieldExProps = TextFieldProps & {
-    /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
-     */
-    changeDelay?: number;
-
-    /**
-     * On enter click
-     */
-    onEnter?: React.KeyboardEventHandler<HTMLDivElement>;
-
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
-
-    /**
-     * Show clear button
-     */
-    showClear?: boolean;
-
-    /**
-     * Show password button
-     */
-    showPassword?: boolean;
-};
-
-/**
- * Extended text field methods
- */
-export interface TextFieldExMethods {
-    /**
-     * Set error
-     * @param error Error
-     */
-    setError(error: React.ReactNode): void;
-}
-
-export const TextFieldEx = React.forwardRef<
-    TextFieldExMethods,
-    TextFieldExProps
->((props, ref) => {
-    // Destructure
-    const {
-        changeDelay,
-        error,
-        fullWidth = true,
-        helperText,
-        InputProps = {},
-        onChange,
-        onKeyPress,
-        onEnter,
-        inputRef,
-        readOnly,
-        showClear,
-        showPassword,
-        type,
-        variant = MUGlobal.textFieldVariant,
-        ...rest
-    } = props;
-
-    // State
-    const [errorText, updateErrorText] = React.useState<React.ReactNode>();
-    const [empty, updateEmpty] = React.useState<boolean>(true);
-
-    // Read only
-    if (readOnly != null) InputProps.readOnly = readOnly;
-
-    // Calculate
-    let errorEx = error;
-    let helperTextEx = helperText;
-    if (errorText != null) {
-        errorEx = true;
-        helperTextEx = errorText;
-    }
-
-    let typeEx = showPassword ? 'password' : type;
-
-    let input: HTMLInputElement | undefined;
-    const localRef = (ref: HTMLInputElement) => {
-        input = ref;
-
-        if (input.value !== '') {
-            updateEmpty(false);
-        }
-    };
-
-    const clearClick = () => {
-        if (input != null) {
-            input.value = '';
-            input.focus();
-        }
-
-        if (errorText != null) {
-            // Reset
-            updateErrorText(undefined);
-        }
-
-        updateEmpty(true);
-    };
-
-    const preventDefault = (e: React.TouchEvent | React.MouseEvent) => {
-        // Prevent long press
-        if (e.isPropagationStopped()) e.stopPropagation();
-
-        if (e.isDefaultPrevented()) e.preventDefault();
-    };
-
-    const touchStart = (e: React.TouchEvent | React.MouseEvent) => {
-        // Show the password
-        if (input) {
-            input.blur();
-            input.type = 'text';
-        }
-        preventDefault(e);
-    };
-
-    const touchEnd = (e: React.TouchEvent | React.MouseEvent) => {
-        // Show the password
-        if (input) input.type = 'password';
-        preventDefault(e);
-    };
-
-    // Show password and/or clear button
-    if (!empty && (showPassword || showClear)) {
-        InputProps.endAdornment = (
-            <InputAdornment position="end">
-                {showPassword && (
-                    <IconButton
-                        tabIndex={-1}
-                        onContextMenu={(event) => event.preventDefault()}
-                        onMouseDown={touchStart}
-                        onMouseUp={touchEnd}
-                        onTouchStart={touchStart}
-                        onTouchCancel={touchEnd}
-                        onTouchEnd={touchEnd}
-                    >
-                        <Visibility />
-                    </IconButton>
-                )}
-                {showClear && (
-                    <IconButton onClick={clearClick} tabIndex={-1}>
-                        <Clear />
-                    </IconButton>
-                )}
-            </InputAdornment>
-        );
-    }
-
-    // Extend key precess
-    const onKeyPressEx =
-        onEnter == null
-            ? onKeyPress
-            : (e: React.KeyboardEvent<HTMLDivElement>) => {
-                  if (e.key === Keyboard.Keys.Enter) {
-                      // Enter press callback
-                      onEnter(e);
-                  }
-
-                  if (!e.isDefaultPrevented && onKeyPress != null) {
-                      // Common press callback
-                      onKeyPress(e);
-                  }
-              };
-
-    React.useImperativeHandle(
-        ref,
-        () => ({
-            /**
-             * Set error
-             * @param error Error
-             */
-            setError(error: React.ReactNode): void {
-                updateErrorText(error);
-            }
-        }),
-        []
-    );
-
-    const isMounted = React.useRef(true);
-    const delayed =
-        onChange != null && changeDelay != null && changeDelay >= 1
-            ? useDelayedExecutor(onChange, changeDelay)
-            : undefined;
-
-    const onChangeEx = (
-        event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-    ) => {
-        if (errorText != null) {
-            // Reset
-            updateErrorText(undefined);
-        }
-
-        if (showClear || showPassword) {
-            if (event.target.value === '') {
-                updateEmpty(true);
-            } else if (empty) {
-                updateEmpty(false);
-            }
-        }
-
-        if (onChange == null) return;
-
-        if (changeDelay == null || changeDelay < 1) {
-            onChange(event);
-            return;
-        }
-
-        delayed?.call(undefined, event);
-    };
-
-    React.useEffect(() => {
-        return () => {
-            isMounted.current = false;
-            delayed?.clear();
-        };
-    }, []);
-
-    // Textfield
-    return (
-        <TextField
-            error={errorEx}
-            fullWidth={fullWidth}
-            helperText={helperTextEx}
-            inputRef={useCombinedRefs(inputRef, localRef)}
-            InputProps={InputProps}
-            onChange={onChangeEx}
-            onKeyPress={onKeyPressEx}
-            type={typeEx}
-            variant={variant}
-            {...rest}
-        />
-    );
-});

package/src/mu/Tiplist.tsx

@@ -1,304 +0,0 @@
-import { DataTypes, IdDefaultType, ListType } from '@etsoo/shared';
-import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
-import React from 'react';
-import { ReactUtils } from '../app/ReactUtils';
-import { useDelayedExecutor } from '../uses/useDelayedExecutor';
-import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
-import { InputField } from './InputField';
-import { SearchField } from './SearchField';
-
-/**
- * Tiplist props
- */
-export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<
-    AutocompleteExtendedProps<T, D>,
-    'open'
-> & {
-    /**
-     * Load data callback
-     */
-    loadData: (
-        keyword?: string,
-        id?: T[D]
-    ) => PromiseLike<T[] | null | undefined>;
-};
-
-// Multiple states
-interface States<T extends object> {
-    open: boolean;
-    options: T[];
-    value?: T | null;
-    loading?: boolean;
-}
-
-/**
- * Tiplist
- * @param props Props
- * @returns Component
- */
-export function Tiplist<
-    T extends object = ListType,
-    D extends DataTypes.Keys<T> = IdDefaultType<T>
->(props: TiplistProps<T, D>) {
-    // Destruct
-    const {
-        search = false,
-        idField = 'id' as D,
-        idValue,
-        inputAutoComplete = 'off',
-        inputError,
-        inputHelperText,
-        inputMargin,
-        inputOnChange,
-        inputRequired,
-        inputVariant,
-        label,
-        loadData,
-        defaultValue,
-        value,
-        name,
-        readOnly,
-        onChange,
-        openOnFocus = true,
-        sx = { minWidth: '180px' },
-        ...rest
-    } = props;
-
-    // Value input ref
-    const inputRef = React.createRef<HTMLInputElement>();
-
-    // Local value
-    let localValue = value ?? defaultValue;
-
-    // One time calculation for input's default value (uncontrolled)
-    const localIdValue =
-        idValue ?? DataTypes.getValue(localValue, idField as any);
-
-    // Changable states
-    const [states, stateUpdate] = React.useReducer(
-        (currentState: States<T>, newState: Partial<States<T>>) => {
-            return { ...currentState, ...newState };
-        },
-        {
-            // Loading unknown
-            open: false,
-            options: [],
-            value: null
-        }
-    );
-
-    // Input value
-    const inputValue = React.useMemo(
-        () => states.value && states.value[idField],
-        [states.value]
-    );
-
-    React.useEffect(() => {
-        if (localValue != null) stateUpdate({ value: localValue });
-    }, [localValue]);
-
-    // State
-    const [state] = React.useState<{
-        idLoaded?: boolean;
-        idSet?: boolean;
-    }>({});
-    const isMounted = React.useRef(true);
-
-    // Add readOnly
-    const addReadOnly = (params: AutocompleteRenderInputParams) => {
-        if (readOnly != null) {
-            Object.assign(params, { readOnly });
-        }
-
-        // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
-        // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
-        Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
-
-        return params;
-    };
-
-    // Change handler
-    const changeHandle = (event: React.ChangeEvent<HTMLInputElement>) => {
-        // Stop processing with auto trigger event
-        if (event.nativeEvent.cancelable && !event.nativeEvent.composed) {
-            stateUpdate({ options: [] });
-            return;
-        }
-
-        // Stop bubble
-        event.stopPropagation();
-
-        // Call with delay
-        delayed.call(undefined, event.currentTarget.value);
-    };
-
-    // Directly load data
-    const loadDataDirect = (keyword?: string, id?: T[D]) => {
-        // Reset options
-        // setOptions([]);
-
-        if (id == null) {
-            // Reset real value
-            const input = inputRef.current;
-
-            if (input && input.value !== '') {
-                // Different value, trigger change event
-                ReactUtils.triggerChange(input, '', false);
-            }
-
-            if (states.options.length > 0) {
-                // Reset options
-                stateUpdate({ options: [] });
-            }
-        }
-
-        // Loading indicator
-        if (!states.loading) stateUpdate({ loading: true });
-
-        // Load list
-        loadData(keyword, id).then((options) => {
-            if (!isMounted.current) return;
-
-            // Indicates loading completed
-            stateUpdate({
-                loading: false,
-                ...(options != null && { options })
-            });
-        });
-    };
-
-    const delayed = useDelayedExecutor(loadDataDirect, 480);
-
-    const setInputValue = (value: T | null) => {
-        stateUpdate({ value });
-
-        // Input value
-        const input = inputRef.current;
-        if (input) {
-            // Update value
-            const newValue = DataTypes.getStringValue(value, idField) ?? '';
-            if (newValue !== input.value) {
-                // Different value, trigger change event
-                ReactUtils.triggerChange(input, newValue, false);
-            }
-        }
-    };
-
-    if (localIdValue != null && (localIdValue as any) !== '') {
-        if (state.idLoaded) {
-            // Set default
-            if (!state.idSet && states.options.length == 1) {
-                stateUpdate({ value: states.options[0] });
-                state.idSet = true;
-            }
-        } else {
-            // Load id data
-            loadDataDirect(undefined, localIdValue);
-            state.idLoaded = true;
-        }
-    }
-
-    React.useEffect(() => {
-        return () => {
-            isMounted.current = false;
-            delayed.clear();
-        };
-    }, []);
-
-    // Layout
-    return (
-        <div>
-            <input
-                ref={inputRef}
-                data-reset="true"
-                type="text"
-                style={{ display: 'none' }}
-                name={name}
-                value={`${inputValue ?? ''}`}
-                readOnly
-                onChange={inputOnChange}
-            />
-            {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
-            <Autocomplete<T, undefined, false, false>
-                filterOptions={(options, _state) => options}
-                value={states.value}
-                options={states.options}
-                onChange={(event, value, reason, details) => {
-                    // Set value
-                    setInputValue(value);
-
-                    // Custom
-                    if (onChange != null)
-                        onChange(event, value, reason, details);
-
-                    // For clear case
-                    if (reason === 'clear') {
-                        stateUpdate({ options: [] });
-                        loadDataDirect();
-                    }
-                }}
-                open={states.open}
-                openOnFocus={openOnFocus}
-                onOpen={() => {
-                    // Should load
-                    const loading = states.loading
-                        ? true
-                        : states.options.length === 0;
-
-                    stateUpdate({ open: true, loading });
-
-                    // If not loading
-                    if (loading)
-                        loadDataDirect(
-                            undefined,
-                            states.value == null
-                                ? undefined
-                                : states.value[idField]
-                        );
-                }}
-                onClose={() => {
-                    stateUpdate({
-                        open: false,
-                        ...(!states.value && { options: [] })
-                    });
-                }}
-                loading={states.loading}
-                sx={sx}
-                renderInput={(params) =>
-                    search ? (
-                        <SearchField
-                            onChange={changeHandle}
-                            {...params}
-                            readOnly={readOnly}
-                            label={label}
-                            name={name + 'Input'}
-                            margin={inputMargin}
-                            variant={inputVariant}
-                            required={inputRequired}
-                            autoComplete={inputAutoComplete}
-                            error={inputError}
-                            helperText={inputHelperText}
-                        />
-                    ) : (
-                        <InputField
-                            onChange={changeHandle}
-                            {...addReadOnly(params)}
-                            label={label}
-                            name={name + 'Input'}
-                            margin={inputMargin}
-                            variant={inputVariant}
-                            required={inputRequired}
-                            autoComplete={inputAutoComplete}
-                            error={inputError}
-                            helperText={inputHelperText}
-                        />
-                    )
-                }
-                isOptionEqualToValue={(option: T, value: T) =>
-                    option[idField] === value[idField]
-                }
-                {...rest}
-            />
-        </div>
-    );
-}

package/src/mu/TooltipClick.tsx

@@ -1,84 +0,0 @@
-import { ClickAwayListener, Tooltip, TooltipProps } from '@mui/material';
-import React from 'react';
-import { useDelayedExecutor } from '../uses/useDelayedExecutor';
-
-/**
- * Tooltip with click visibility props
- */
-export interface TooltipClickProps
-    extends Omit<
-        TooltipProps,
-        'children' | 'open' | 'disableFocusListener' | 'disableTouchListener'
-    > {
-    children: (
-        openTooltip: (newTitle?: string) => void
-    ) => React.ReactElement<any, any>;
-
-    disableHoverListener?: boolean;
-}
-
-/**
- * Tooltip with click visibility
- * @param props Props
- * @returns Component
- */
-export function TooltipClick(props: TooltipClickProps) {
-    // Destruct
-    // leaveDelay set to 5 seconds to hide the tooltip automatically
-    const {
-        children,
-        disableHoverListener = true,
-        leaveDelay = 5000,
-        onClose,
-        title,
-        ...rest
-    } = props;
-
-    // State
-    const [localTitle, setTitle] = React.useState(title);
-    const [open, setOpen] = React.useState(false);
-
-    const delayed =
-        leaveDelay > 0
-            ? useDelayedExecutor(() => setOpen(false), leaveDelay)
-            : undefined;
-
-    // Callback for open the tooltip
-    const openTooltip = (newTitle?: string) => {
-        setOpen(true);
-        if (newTitle) setTitle(newTitle);
-        delayed?.call();
-    };
-
-    React.useEffect(() => {
-        return () => {
-            delayed?.clear();
-        };
-    }, []);
-
-    // Layout
-    return (
-        <ClickAwayListener onClickAway={() => setOpen(false)}>
-            <Tooltip
-                PopperProps={{
-                    disablePortal: true
-                }}
-                onClose={(event) => {
-                    setOpen(false);
-                    if (onClose) onClose(event);
-                }}
-                title={localTitle}
-                open={open}
-                disableFocusListener
-                disableTouchListener
-                disableHoverListener={disableHoverListener}
-                onMouseOver={
-                    disableHoverListener ? undefined : () => setOpen(true)
-                }
-                {...rest}
-            >
-                {children(openTooltip)}
-            </Tooltip>
-        </ClickAwayListener>
-    );
-}

package/src/mu/UserAvatar.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import { Avatar } from '@mui/material';
-import { BusinessUtils } from '@etsoo/appscript';
-import { globalApp } from '../app/ReactApp';
-
-/**
- * User avatar props
- */
-export interface UserAvatarProps {
-    /**
-     * Photo src
-     */
-    src?: string;
-
-    /**
-     * Format title
-     */
-    formatTitle?: (title?: string) => string;
-
-    /**
-     * Title of the user
-     */
-    title?: string;
-}
-
-/**
- * User avatar
- * @param props Props
- * @returns Component
- */
-export function UserAvatar(props: UserAvatarProps) {
-    // Destruct
-    const {
-        src,
-        title,
-        formatTitle = (title?: string) => {
-            return BusinessUtils.formatAvatarTitle(
-                title,
-                3,
-                typeof globalApp === 'undefined'
-                    ? 'ME'
-                    : globalApp.get<string>('me')
-            );
-        }
-    } = props;
-
-    // Format
-    const fTitle = formatTitle(title);
-    const count = fTitle.length;
-
-    return (
-        <Avatar
-            title={title}
-            src={src}
-            sx={{
-                width: 48,
-                height: 32,
-                fontSize: count <= 2 ? '15px' : '12px'
-            }}
-        >
-            {fTitle}
-        </Avatar>
-    );
-}