@ -1,6 +1,11 @@
|
|||||||
|
import { FocusEventHandler } from 'react';
|
||||||
import TextareaAutosize from 'react-textarea-autosize';
|
import TextareaAutosize from 'react-textarea-autosize';
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
|
|
||||||
|
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
|
||||||
|
|
||||||
|
import { InputHotkeyScope } from '../types/InputHotkeyScope';
|
||||||
|
|
||||||
const MAX_ROWS = 5;
|
const MAX_ROWS = 5;
|
||||||
|
|
||||||
export type TextAreaProps = {
|
export type TextAreaProps = {
|
||||||
@ -50,6 +55,19 @@ export const TextArea = ({
|
|||||||
}: TextAreaProps) => {
|
}: TextAreaProps) => {
|
||||||
const computedMinRows = Math.min(minRows, MAX_ROWS);
|
const computedMinRows = Math.min(minRows, MAX_ROWS);
|
||||||
|
|
||||||
|
const {
|
||||||
|
goBackToPreviousHotkeyScope,
|
||||||
|
setHotkeyScopeAndMemorizePreviousScope,
|
||||||
|
} = usePreviousHotkeyScope();
|
||||||
|
|
||||||
|
const handleFocus: FocusEventHandler<HTMLTextAreaElement> = () => {
|
||||||
|
setHotkeyScopeAndMemorizePreviousScope(InputHotkeyScope.TextInput);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBlur: FocusEventHandler<HTMLTextAreaElement> = () => {
|
||||||
|
goBackToPreviousHotkeyScope();
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledTextArea
|
<StyledTextArea
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
@ -57,6 +75,8 @@ export const TextArea = ({
|
|||||||
minRows={computedMinRows}
|
minRows={computedMinRows}
|
||||||
value={value}
|
value={value}
|
||||||
onChange={(event) => onChange?.(event.target.value)}
|
onChange={(event) => onChange?.(event.target.value)}
|
||||||
|
onFocus={handleFocus}
|
||||||
|
onBlur={handleBlur}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user