fd5c0c9747
* applied eslint * add locales and lint the project * removed error boundary * updated locales * fix min files * fix locales
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
import cn from 'classnames';
|
|
import useInputState from 'App/hooks/useInputState';
|
|
|
|
interface Props {
|
|
value: string;
|
|
commit: (string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
// TODO: maybe a better way exists?
|
|
const stopPropagation: React.KeyboardEventHandler = (e) => {
|
|
if (e.key === 'Backspace' || e.key === 'Delete') {
|
|
e.stopPropagation();
|
|
}
|
|
};
|
|
|
|
export default function InlineInput({ value, commit, className }: Props) {
|
|
const [valueState, onChange] = useInputState(value);
|
|
// useEffect(() => setValueState(value), [ value ]);
|
|
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
useEffect(() => {
|
|
inputRef.current?.focus();
|
|
inputRef.current?.setSelectionRange(0, value.length);
|
|
}, []);
|
|
|
|
const onKeyPress = (e) => {
|
|
if (e.key === 'Enter') {
|
|
commit(valueState);
|
|
e.target.blur();
|
|
}
|
|
};
|
|
const onBlur = () => {
|
|
commit(valueState);
|
|
};
|
|
return (
|
|
<input
|
|
value={valueState}
|
|
size={valueState.length}
|
|
onChange={onChange}
|
|
onKeyPress={onKeyPress}
|
|
onKeyDown={stopPropagation}
|
|
onBlur={onBlur}
|
|
ref={inputRef}
|
|
className={cn('font-mono', className)}
|
|
/>
|
|
);
|
|
}
|