@etsoo/materialui 1.0.1

package/src/TextFieldEx.tsx

@@ -0,0 +1,249 @@
+import React from 'react';
+import {
+    IconButton,
+    InputAdornment,
+    TextField,
+    TextFieldProps
+} from '@mui/material';
+import { MUGlobal } from './MUGlobal';
+import { Clear, Visibility } from '@mui/icons-material';
+import { Keyboard } from '@etsoo/shared';
+import { useCombinedRefs, useDelayedExecutor } from '@etsoo/react';
+
+/**
+ * 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/Tiplist.tsx

@@ -0,0 +1,303 @@
+import { ReactUtils, useDelayedExecutor } from '@etsoo/react';
+import { DataTypes, IdDefaultType, ListType } from '@etsoo/shared';
+import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
+import React from 'react';
+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/TooltipClick.tsx

@@ -0,0 +1,84 @@
+import { useDelayedExecutor } from '@etsoo/react';
+import { ClickAwayListener, Tooltip, TooltipProps } from '@mui/material';
+import React from 'react';
+
+/**
+ * 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/UserAvatar.tsx

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