обавлена кнопка 'Done' на клавиатуре iOS для сворачивания клавиатуры при вводе промпта
This commit is contained in:
parent
5600aec9f8
commit
05a4363d91
@ -1,4 +1,4 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState, useRef } from 'react';
|
||||||
import styles from './TextInputBlock.module.css';
|
import styles from './TextInputBlock.module.css';
|
||||||
import { TextInputBlock as TextInputBlockType } from '../../types/blocks';
|
import { TextInputBlock as TextInputBlockType } from '../../types/blocks';
|
||||||
|
|
||||||
@ -11,6 +11,7 @@ interface TextInputBlockProps {
|
|||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
const TextInputBlock: React.FC<TextInputBlockProps> = ({ block, visible, onTextChange }) => {
|
const TextInputBlock: React.FC<TextInputBlockProps> = ({ block, visible, onTextChange }) => {
|
||||||
const [text, setText] = useState('');
|
const [text, setText] = useState('');
|
||||||
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||||
const newText = e.target.value;
|
const newText = e.target.value;
|
||||||
@ -18,14 +19,33 @@ const TextInputBlock: React.FC<TextInputBlockProps> = ({ block, visible, onTextC
|
|||||||
onTextChange?.(newText);
|
onTextChange?.(newText);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Функция для сворачивания клавиатуры
|
||||||
|
const dismissKeyboard = () => {
|
||||||
|
if (textareaRef.current) {
|
||||||
|
textareaRef.current.blur();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Обработчик нажатия клавиш
|
||||||
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||||
|
// Если нажата клавиша Enter (или Done на iOS)
|
||||||
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||||||
|
e.preventDefault(); // Предотвращаем добавление новой строки
|
||||||
|
dismissKeyboard(); // Сворачиваем клавиатуру
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`${styles.container} ${visible ? styles.visible : ''}`}>
|
<div className={`${styles.container} ${visible ? styles.visible : ''}`}>
|
||||||
<textarea
|
<textarea
|
||||||
|
ref={textareaRef}
|
||||||
className={styles.input}
|
className={styles.input}
|
||||||
placeholder="Опишите, какой стикер вы хотите получить..."
|
placeholder="Опишите, какой стикер вы хотите получить..."
|
||||||
rows={3}
|
rows={3}
|
||||||
value={text}
|
value={text}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
enterKeyHint="done" // Изменяет отображение клавиши Enter на "Done" на iOS
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user