Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 1x 1x 1x 1x 6x 6x 6x 6x 2x 2x 6x 1x | import React, {
useCallback,
forwardRef,
useImperativeHandle,
useRef,
} from "react";
import { StyledInput } from "ui/form/style";
import { useIMEIsComposing } from "ui/hooks/use-ime-is-composing";
export interface IMEInputProps
extends React.InputHTMLAttributes<HTMLInputElement> {
readonly displaySize?: "small" | "medium" | "large";
}
export const IMEInput = forwardRef<HTMLInputElement, IMEInputProps>(
({ onKeyDown, displaySize, ...rest }, outerRef) => {
const inputRef = useRef<HTMLInputElement>(null);
const isComposing = useIMEIsComposing(inputRef);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
useImperativeHandle(outerRef, () => inputRef.current!, []);
const onKeyDownInner = useCallback(
(e: React.KeyboardEvent<HTMLInputElement>) => {
if (!isComposing) {
onKeyDown?.(e);
}
},
[isComposing, onKeyDown]
);
return (
<StyledInput
ref={inputRef}
onKeyDown={onKeyDownInner}
$displaySize={displaySize}
{...rest}
/>
);
}
);
export const IMEUnstyledInput = forwardRef<
HTMLInputElement,
React.InputHTMLAttributes<HTMLInputElement>
>(({ onKeyDown, ...rest }, outerRef) => {
const inputRef = useRef<HTMLInputElement>(null);
const isComposing = useIMEIsComposing(inputRef);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
useImperativeHandle(outerRef, () => inputRef.current!, []);
const onKeyDownInner = useCallback(
(e: React.KeyboardEvent<HTMLInputElement>) => {
Iif (!isComposing) {
onKeyDown?.(e);
}
},
[isComposing, onKeyDown]
);
return <input ref={inputRef} onKeyDown={onKeyDownInner} {...rest} />;
});
|