@mui/material#FilledInput TypeScript Examples

function Typing(props: { channel_id: string }) {
    const [typed, set_typed] = React.useState('');
    const { focused } = useFormControl() || {};
    return (
        <Box
            component="form"
            noValidate
            autoComplete="off"
            onSubmit={(ev: React.FormEvent) => {
                ev.preventDefault();
            }}
        >
            <FormControl fullWidth={true}>
                <FormGroup row={true} sx={{ width: '100%' }} className="Typing">
                    <FilledInput
                        sx={{ width: '75%' }}
                        onChange={(ev) => set_typed(ev.currentTarget.value)}
                        value={typed}
                        autoFocus
                        type="text"
                    />
                    <Button
                        type="submit"
                        color="success"
                        onClick={async (ev) => {
                            ev.preventDefault();
                            if (typed !== '') {
                                window.electron.chat.send({
                                    msg: { Data: typed },
                                    channel: props.channel_id,
                                    sent_time_ms: Date.now(),
                                });
                                set_typed('');
                            }
                        }}
                    >
                        Send
                    </Button>
                </FormGroup>
            </FormControl>
        </Box>
    );
}

/**
 * Generic text field.
 * This is one of the internal components that get mapped natively inside forms
 * and tables to the specified properties.
 * @category Form fields
 */
export function TextField<T extends string | number>({
                                                         name,
                                                         value,
                                                         setValue,
                                                         error,
                                                         showError,
                                                         disabled,
                                                         autoFocus,
                                                         property,
                                                         includeDescription,
                                                         allowInfinity,
                                                         shouldAlwaysRerender
                                                     }: TextFieldProps<T>) {

    const classes = formStyles();

    let mediaType: MediaType | undefined;
    let multiline: boolean | undefined;
    if (property.dataType === "string") {
        const url = (property as StringProperty).config?.url;
        mediaType = typeof url === "string" ? url : undefined;
        multiline = (property as StringProperty).config?.multiline;
    }

    useClearRestoreValue({
        property,
        value,
        setValue
    });

    const isMultiline = !!multiline;

    const internalValue = value ?? (property.dataType === "string" ? "" : value === 0 ? 0 : "");

    const valueIsInfinity = internalValue === Infinity;
    const inputType = !valueIsInfinity && property.dataType === "number" ? "number" : undefined;

    const updateValue = (newValue: typeof internalValue | undefined) => {

        if (!newValue) {
            setValue(
                null
            );
        } else if (inputType === "number") {
            const numValue = parseFloat(newValue as string);
            setValue(
                numValue as T
            );
        } else {
            setValue(
                newValue
            );
        }
    };

    const filledInput = (
        <FilledInput
            sx={{
                minHeight: "64px"
            }}
            autoFocus={autoFocus}
            type={inputType}
            multiline={isMultiline}
            inputProps={{
                rows: 4
            }}
            value={valueIsInfinity ? "Infinity" : (value ?? "")}
            disabled={disabled}
            onChange={(evt) => {
                updateValue(evt.target.value as T);
            }}
        />
    );

    return (
        <>

            <FormControl
                variant="filled"
                required={property.validation?.required}
                error={showError}
                disabled={valueIsInfinity}
                fullWidth>

                <InputLabel
                    classes={{
                        root: classes.inputLabel,
                        shrink: classes.shrinkInputLabel
                    }}>
                    <LabelWithIcon property={property}/>
                </InputLabel>

                {filledInput}

                <Box display={"flex"}>

                    <Box flexGrow={1}>
                        {showError && <FormHelperText>{error}</FormHelperText>}

                        {includeDescription &&
                        <FieldDescription property={property}/>}
                    </Box>

                    {allowInfinity &&
                    <FormControlLabel
                        checked={valueIsInfinity}
                        style={{ marginRight: 0 }}
                        labelPlacement={"start"}
                        control={
                            <Switch
                                size={"small"}
                                type={"checkbox"}
                                onChange={(evt) => {
                                    updateValue(
                                        evt.target.checked ? Infinity as T : undefined);
                                }}/>
                        }
                        disabled={disabled}
                        label={
                            <Typography variant={"caption"}>
                                Set value to Infinity
                            </Typography>
                        }
                    />
                    }
                </Box>

            </FormControl>

            {mediaType && internalValue &&
            <ErrorBoundary>
                <Box m={1}>
                    <PreviewComponent name={name}
                                      value={internalValue}
                                      property={property}
                                      size={"regular"}/>
                </Box>
            </ErrorBoundary>
            }
        </>
    );

}