@etsoo/materialui/lib/mjs/TextFieldEx.js

TypeScript Material-UI Implementation

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { MUGlobal } from "./MUGlobal";
import VisibilityIcon from "@mui/icons-material/Visibility";
import ClearIcon from "@mui/icons-material/Clear";
import { Keyboard } from "@etsoo/shared";
import { ReactUtils, useCombinedRefs, useDelayedExecutor } from "@etsoo/react";
import { useAppContext } from "./app/ReactApp";
import TextField from "@mui/material/TextField";
import InputAdornment from "@mui/material/InputAdornment";
import IconButton from "@mui/material/IconButton";
export const TextFieldEx = React.forwardRef((props, ref) => {
    // Global app
    const app = useAppContext();
    // Labels
    const { showIt, clearInput } = app?.getLabels("showIt", "clearInput") ?? {};
    // Destructure
    const { changeDelay, clearLabel = clearInput, error, fullWidth = true, helperText, InputLabelProps = {}, InputProps = {}, onChange, onClear, onKeyDown, onEnter, onVisibility, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
    // Shrink
    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
    // State
    const [errorText, updateErrorText] = React.useState();
    const [empty, updateEmpty] = React.useState(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;
    const localRef = (ref) => {
        input = ref;
        if (input.value !== "") {
            updateEmpty(false);
        }
    };
    const doClear = () => {
        if (input == null)
            return;
        ReactUtils.triggerChange(input, "", false);
        input.focus();
    };
    const clearClick = () => {
        if (onClear) {
            onClear(doClear);
        }
        else {
            doClear();
        }
    };
    const preventDefault = (e) => {
        // Prevent long press
        if (e.isPropagationStopped())
            e.stopPropagation();
        if (e.isDefaultPrevented())
            e.preventDefault();
    };
    const touchStart = async (e) => {
        // Show the password
        if (input) {
            if (onVisibility) {
                const result = await onVisibility(input);
                if (result === false)
                    return;
            }
            input.blur();
            input.type = "text";
        }
        preventDefault(e);
    };
    const touchEnd = (e) => {
        // Show the password
        if (input) {
            if (onVisibility)
                return;
            input.type = "password";
        }
        preventDefault(e);
    };
    // Show password and/or clear button
    if (!empty && (showPassword || showClear)) {
        InputProps.endAdornment = (_jsxs(InputAdornment, { position: "end", children: [showPassword && (_jsx(IconButton, { tabIndex: -1, onContextMenu: (event) => event.preventDefault(), onMouseDown: touchStart, onMouseUp: touchEnd, onTouchStart: touchStart, onTouchCancel: touchEnd, onTouchEnd: touchEnd, title: showIt, children: _jsx(VisibilityIcon, {}) })), showClear && (_jsx(IconButton, { onClick: clearClick, tabIndex: -1, title: clearLabel, children: _jsx(ClearIcon, {}) }))] }));
    }
    // Extend key precess
    const onKeyPressEx = onEnter == null
        ? onKeyDown
        : (e) => {
            if (e.key === Keyboard.Keys.Enter) {
                // Enter press callback
                onEnter(e);
            }
            if (!e.isDefaultPrevented && onKeyDown != null) {
                // Common press callback
                onKeyDown(e);
            }
        };
    React.useImperativeHandle(ref, () => ({
        /**
         * Set error
         * @param error Error
         */
        setError(error) {
            updateErrorText(error);
        }
    }), []);
    const isMounted = React.useRef(true);
    const delayed = onChange != null && changeDelay != null && changeDelay >= 1
        ? useDelayedExecutor(onChange, changeDelay)
        : undefined;
    const onChangeEx = (event) => {
        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 (_jsx(TextField, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: useCombinedRefs(inputRef, localRef), InputProps: InputProps, InputLabelProps: InputLabelProps, onChange: onChangeEx, onKeyDown: onKeyPressEx, type: typeEx, variant: variant, ...rest }));
});