Тема: React/and.design: модальний popover
Виникла така дивна проблемка. Роблю таблицю з клітинкою, що може редагуватися... банальний "rename" у контекстному меню. Клітинка перетворюється на input і коли ти, щось змінюєш всередині, з'являється popover з двома кнопочками 'Ok' чи 'Cancel'.
Чесно кажучи, я зовсім не в темі, як робляться модальні вікна. Спочатку я погодився на те, щоб, будь-який клік поза полем вводу просто спрацьовувало як 'Cancel' і почепив на той input обробник onBlur. Цим самим я вбив можливість клікнути на кнопки в popover`і - бо onBlur спрацьовує раніше і просто ховає popover.
От не знаю, що краще, чи якось намагатися обманути оцю проблему. Чи таки спробувати зробити правильний модал, так щоб усе окрім того input'у і popover'у ставало розмитим і не реагувало на кліки, доки не буде завершено редагування поля. Однак, я зовсім не знаю, як це робиться. Буду вдячний за будь які поради і підказки.
Нижче наведу шматочок коду, що є назараз:
function CellEdit({ initialValue, setEditRowName }) {
const [value, setValue] = useState(initialValue);
const [visible, setVisible] = useState(false);
const onOkClick = e => {
console.log('here'); // тут має бути відправка на сервер відредагованих данних
console.log(e);
e.stopPropagation();
};
const onCancelClick = e => {
setEditRowName(); // скидає обраний для редагування рядок і тим самим ховає компонент
e.stopPropagation();
};
const cellEditClick = e => {
e.stopPropagation(); // забороняє функціонал, що працює не в режимі редагування
};
const cellEditChange = e => {
setVisible(e.target.value !== initialValue); // поле відредаговано, показати popover
setValue(e.target.value);
};
const cellEditCancel = () => {
if (!visible) {
setEditRowName(); // onBlur відміна редагування тільки, якщо поле не змінено
}
};
return (
<Popover
content={(
<>
<Button onClick={onOkClick}>Ok</Button>
<Button onClick={onCancelClick}>Cancel</Button>
</>
)}
title="Save changed?"
trigger="focus"
visible={visible}
>
<Input value={value}
onClick={e => cellEditClick(e)}
onChange={cellEditChange}
onBlur={cellEditCancel}
autoFocus
/>
</Popover>
);
}