Comments 15
onSomethingClicked = async () => {
const ok = await AsyncConfirm({
text: Localizer.get('app.something.confirm'),
okButtonText:Localizer.get('dialog.yes'),
noButtonText: Localizer.get('dialog.no'),
});
if(ok){
TransportController.get('/api/user/something')
.then(data => {
doAnything(data)
})
.catch(error => {
feedback.error(STATUS.FAILURE, error);
});
}
};
Если б я только мог подумать что эта тема стоит отдельной статьи…
Иногда бывают случаи, когда закрытие окна и отмена действия имею разное значение.
Выбор пал на подход с хуками, потому что, вариант, когда мы можем вызвать модальное окно откуда угодно, сложно поддерживать, а в этом варианте, работает только как задумано.
Ваш вариант похож на частный случай, не могу сказать точно, но из примера такой вывод, тут же описывается более общий подход.
Может помните такой PHP фреймворк — Zend? Очень много народу его использовало, все вроде хорошо. Однако, мне лично(подчеркнуто), он сразу казался overengeneered. Всё правильно, всё по инструкции, не докопаться. Но и сходу не разобраться. Класс на наследовании инкапсуляцией полиморфизм погоняет. Ваш подход, на мой личный(подчеркнуто) взгляд — overengeenered.
Разве нельзя обойтись без модальных окон?
Тут уже зависит от дизайна и подхода к ux. В целом обойтись можно, чаще всего, но просто заменить это на страницы, это не решить проблему. Перешёл на другую страницу надо посмотреть, что было на предыдущей, возвращаемся, сморим, вперёд.
Спасибо за статью, в очередной раз напомнила, что в современном React я разбираюсь, как свинья (то есть я!) в апельсинах. Контексты, порталы, useState какой-то — чего несут? o_O
Подход напоминает Java'овский, где в тонне фабрик, интерфейсов, паттернов и прочих абстракций тонет действительно полезный код. А на TypeScript бы и того печальнее выглядело, пожалуй. Уж не бывшие Java'исты ли и испортили вебдев?
// Класс, отвечающий за логику сохранения документа
class SaveDocumentEngine {
async saveDocument(doc: Document): Promise<void> {
const docCount = 1; // константа введена для наглядности
const userAnswer = await new SaveDocsConfirmDialog().show(docCount);
// Если пользователь передумал
if (userAnswer !== UserChoice.SAVE) {
return;
}
// логика сохранения и проверки документа
}
}
Явное создание диалога, вызов с параметрами и обработка результата — ничего лишнего. А вся специфика спрятана в самом диалоге.
/** Диалог подтверждения сохранения документа/документов */
@Component({
// language=Vue
template: `
<dialog-form title="Предупреждение" :width="500">
<template slot="content">
Вы действительно хотите сохранить {{data > 1 ? "документы" : "документ"}}?
</template>
<template slot="footer">
<button class="btn btn-primary" @click="onSave">Сохранить</button>
<button class="btn" @click="onCancel">Отмена</button>
</template>
</dialog-form>
`
})
export class SaveDocsConfirmDialog extends CustomDialog<DocCount, UserChoice> {
/** Желание сохранить */
private onSave() {
this.close(UserChoice.SAVE);
}
/** Желание отменить */
private onCancel() {
this.close(UserChoice.CANCEL);
}
}
// Тип - Количество документов
type DocCount = number;
// Тип - Выбор пользователя
export enum UserChoice {
SAVE, CANCEL
}
Диалоговые окна на Promise