@mui/material#TextareaAutosize TypeScript Examples

function QueryEditor({ value, onChange }: QueryEditorProps<PostgresQuery>) {
  const handleChange = React.useCallback(
    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
      onChange({ ...value, text: event.target.value });
    },
    [value, onChange],
  );
  return (
    <div>
      <TextareaAutosize
        maxRows={4}
        value={value.text}
        onChange={handleChange}
        style={{ width: 200 }}
      />
    </div>
  );
}

export function TableInput(props: {
    error: Error | undefined;
    value: string;
    multiline: boolean;
    focused: boolean;
    disabled: boolean;
    updateValue: (newValue: (string | null)) => void;
}) {
    const { disabled, value, multiline, updateValue, focused } = props;
    const [internalValue, setInternalValue] = useState<typeof value>(value);
    const focusedState = useRef<boolean>(false);

    useEffect(
        () => {
            const doUpdate = () => {
                const emptyInitialValue = !value || value.length === 0;
                if (emptyInitialValue && !internalValue)
                    return;
                if (internalValue !== value)
                    updateValue(internalValue);
            };
            const handler = setTimeout(doUpdate, 300);

            return () => {
                clearTimeout(handler);
            };

        },
        [internalValue]
    );

    useEffect(
        () => {
            if (!focused && value !== internalValue)
                setInternalValue(value);
        },
        [value, focused]
    );

    const classes = useInputStyles();

    const ref = React.createRef<HTMLTextAreaElement>();
    useEffect(() => {
        if (ref.current && focused && !focusedState.current) {
            focusedState.current = true;
            ref.current.focus({ preventScroll: true });
            ref.current.selectionStart = ref.current.value.length;
            ref.current.selectionEnd = ref.current.value.length;
        } else {
            focusedState.current = focused;
        }
    }, [focused, ref]);

    return (
        <div style={{ display: "flex" }}>
            <TextareaAutosize
                ref={ref}
                disabled={disabled}
                className={clsx(classes.input)}
                value={internalValue ?? ""}
                onChange={(evt) => {
                    const newValue = evt.target.value as string;
                    if (multiline || !newValue.endsWith("\n"))
                        setInternalValue(newValue);
                }}
            />
        </div>
    );
}

function CompInput(props: { miniscript: Compiler }) {
    type ResultT = ['err', string, string] | ['ok', string, string];
    const [compiled, set_compiled] = React.useState<ResultT[]>([]);
    const [keytab_string, set_keytab_string] = React.useState<string>('');
    const updated = (
        event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
    ) => {
        // some unicode thing
        const ret: ResultT[] = event.target.value
            .split(UNICODE_LINE)
            .flatMap((v: string): ResultT[] => {
                if (v.match(UNICODE_LINE)) return [];
                try {
                    /// TODO: Cache based on V
                    const s = props.miniscript.compile(v);
                    return [['ok', v, s]];
                } catch (e) {
                    if (typeof e === 'string') return [['err', v, e]];
                    else throw e;
                }
            });
        set_compiled(ret);
    };
    const keytab_updated = (
        event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
    ) => {
        set_keytab_string(event.target.value);
    };
    const [taproot, set_taproot] = React.useState<taproot_t | null>(null);
    React.useEffect(() => {
        // some unicode thing
        const k = props.miniscript.KeyTab.new();
        const ret = keytab_string.split(UNICODE_LINE).forEach((v: string) => {
            if (v.match(UNICODE_LINE)) return [];
            if (v === '') return [];
            const nick_key = v.split(':', 2);
            if (nick_key.length !== 2) return []; //throw new Error(`Malformed Keytab Entry: ${v}`);
            k.add(nick_key[0]!.trim(), nick_key[1]!.trim());
        });
        const frags = props.miniscript.Fragments.new();
        for (const frag of compiled) {
            // eslint-disable-next-line no-constant-condition
            if (frag[0] === 'err') {
                set_taproot(null);
                console.log(frag);
                return;
            }
            frags.add(frag[2]);
        }
        try {
            const compiled = props.miniscript.taproot(frags, k);
            set_taproot(JSON.parse(compiled));
        } catch (e) {
            set_taproot(null);
            console.log(e);
        }
    }, [keytab_string, compiled]);

    return (
        <Box className="MiniscriptCompiler">
            <h1>Input</h1>
            <TextareaAutosize
                onChange={updated}
                minRows={3}
                style={{ width: '50%' }}
            />

            <Table>
                <TableHead>
                    <TableRow>
                        <TableCell variant="head">Input</TableCell>
                        <TableCell variant="head">{'=>'}</TableCell>
                        <TableCell variant="head">Output</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {compiled.map((row, i) => (
                        <TableRow key={`${row[1]}#${i}`}>
                            <TableCell
                                style={{
                                    whiteSpace: 'pre-wrap',
                                    wordBreak: 'break-word',
                                }}
                            >
                                <Typography
                                    className="CompilerOutput"
                                    component="code"
                                >
                                    {row[1]}
                                </Typography>
                            </TableCell>
                            <TableCell> {'=>'} </TableCell>
                            <TableCell>
                                <Typography
                                    style={{
                                        whiteSpace: 'pre-wrap',
                                        wordBreak: 'break-word',
                                    }}
                                    className="CompilerOutput"
                                    component="code"
                                >
                                    {row[2]}
                                </Typography>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
            <h1>Translate Keys</h1>
            <TextareaAutosize
                onChange={keytab_updated}
                minRows={3}
                style={{ width: '50%' }}
            />
            <div>{taproot && <ShowTaproot {...taproot}></ShowTaproot>}</div>
        </Box>
    );
}