gristlabs_grist-core/app/client/ui2018/modals.ts

301 lines
9.6 KiB
TypeScript
Raw Normal View History

import {FocusLayer} from 'app/client/lib/FocusLayer';
import * as Mousetrap from 'app/client/lib/Mousetrap';
import {reportError} from 'app/client/models/errors';
import {bigBasicButton, bigPrimaryButton, cssButton} from 'app/client/ui2018/buttons';
import {colors, testId, vars} from 'app/client/ui2018/cssVars';
import {loadingSpinner} from 'app/client/ui2018/loaders';
import {Computed, dom, DomElementArg, MultiHolder, Observable, styled} from 'grainjs';
export interface IModalControl {
close(): void;
focus(): void;
}
export interface IModalOptions {
noEscapeKey?: boolean; // If set, escape key does not close the dialog
noClickAway?: boolean; // If set, clicking into background does not close dialog.
}
// A custom error type to signal to the modal that it should stay open, but not report any error
// (presumably because the error was already reported).
export class StayOpen extends Error {
}
export type ModalWidth =
'normal' | // Normal dialog, from 428px to 480px in width.
'fixed-wide'; // Fixed 600px width.
/**
* A simple modal. Shows up in the middle of the screen with a tinted backdrop.
* Created with the given body content and width.
*
* Closed via clicking anywhere outside the modal. May also be closed by
* calling ctl.close().
*
* The createFn callback may tie the disposal of temporary objects to its `owner` argument.
*
* Example usage:
* modal((ctl, owner) => [
* cssModalTitle(`Pin doc`),
* cssModalBody('Are you sure you want to pin doc?')
* cssModalButtons(
* primary('Yes', dom.on('click', () => { onClick(true); ctl.close(); })),
* secondary('Cancel', dom.on('click', () => { onClick(false); ctl.close(); }))
* )
* ])
*/
export function modal(createFn: (ctl: IModalControl, owner: MultiHolder) => DomElementArg,
options: IModalOptions = {}): void {
function close() {
if (modalDom.isConnected) {
document.body.removeChild(modalDom);
// Ensure we run the disposers for the DOM contained in the modal.
dom.domDispose(modalDom);
}
}
const modalDom = cssModalBacker(
dom.create((owner) => {
// Pause mousetrap keyboard shortcuts while the modal is shown. Without this, arrow keys
// will navigate in a grid underneath the modal, and Enter may open a cell there.
Mousetrap.setPaused(true);
owner.onDispose(() => Mousetrap.setPaused(false));
const focus = () => dialog.focus();
const dialog = cssModalDialog(
createFn({ close, focus }, owner),
dom.on('click', (ev) => ev.stopPropagation()),
options.noEscapeKey ? null : dom.onKeyDown({ Escape: close }),
testId('modal-dialog')
);
FocusLayer.create(owner, {
defaultFocusElem: dialog,
allowFocus: (elem) => (elem !== document.body),
});
return dialog;
}),
options.noClickAway ? null : dom.on('click', close),
);
document.body.appendChild(modalDom);
}
export interface ISaveModalOptions {
title: DomElementArg; // Normally just a string.
body: DomElementArg; // Content of the dialog.
saveLabel?: DomElementArg; // Normally just a string; defaults to "Save".
saveDisabled?: Observable<boolean>; // Optional observable for when to disable Save button.
saveFunc: () => Promise<unknown>; // Called on Save; dialog closes when promise is fulfilled.
hideCancel?: boolean; // If set, hide the Cancel button
width?: ModalWidth; // Set a width style for the dialog.
modalArgs?: DomElementArg; // Extra args to apply to the outer cssModalDialog element.
}
/**
* Creates a modal dialog with a title, body, and Save/Cancel buttons. The provided createFunc()
* is called immediately to get the dialog's contents and options (see ISaveModalOptions for
* details). For example:
*
* saveModal((ctl, owner) => {
* const myObs = Computed.create(owner, ...);
* return {
* title: 'My Dialog',
* body: dom('div', 'Hello', dom.text(myObs)),
* saveDisabled: Computed.create(owner, (use) => !use(myObs)),
* saveFunc: () => server.ping(),
* modalArgs: {style: 'background-color: blue'},
* };
* });
*
* On Save, the dialog calls saveFunc(), disables the Save button, and stays open until saveFunc()
* is resolved. It then closes on success, or reports the error and stays open on rejection. To
* stay open without reporting an error (if one is already reported), throw StayOpen exception.
*
* The dialog interprets Enter/Escape keys as if the Save/Cancel buttons were clicked.
*
* Note that it's possible to close the dialog via Cancel while saveFunc() is pending. That's
* probably desirable, but keep in mind that the dialog may be disposed before saveFunc() returns.
*
* Error handling examples:
* 1. saveFunc: doSomething
* (Most common) If doSomething fails, the error is reported and the dialog stays open.
* 2. saveFunc: () => doSomething().catch(reportError)
* If doSomething fails, the error is reported but the dialog closes anyway.
* 3. saveFunc: () => doSomething().catch((e) => { alert("BOOM"); throw new StayOpen(); })
* If doSomething fails, an alert is shown, and the dialog stays open.
*/
export function saveModal(createFunc: (ctl: IModalControl, owner: MultiHolder) => ISaveModalOptions) {
return modal((ctl, owner) => {
const options = createFunc(ctl, owner);
const isSaving = Observable.create(owner, false);
const isSaveDisabled = Computed.create(owner, (use) =>
use(isSaving) || (options.saveDisabled ? use(options.saveDisabled) : false));
// We mark isSaving() observable to disable the save button while saveFunc() is pending.
// (I decided against a waitWithObsSet() helper for this, since it's too specific to this case
// when saveFunc() is prevented from being called multiple times in parallel.)
async function save() {
isSaving.set(true);
try {
await options.saveFunc();
ctl.close(); // Close on success.
} catch (err) {
// Report errors. If saveFunc() reports its own error and wants the dialog to stay open,
// it should throw StayOpen().
if (!(err instanceof StayOpen)) {
reportError(err);
}
isSaving.set(false);
}
}
return [
cssModalTitle(options.title, testId('modal-title')),
cssModalBody(options.body),
cssModalButtons(
bigPrimaryButton(options.saveLabel || 'Save',
dom.boolAttr('disabled', isSaveDisabled),
dom.on('click', save),
testId('modal-confirm'),
),
options.hideCancel ? null : bigBasicButton('Cancel',
dom.on('click', () => ctl.close()),
testId('modal-cancel'),
),
),
dom.onKeyDown({ Enter: () => isSaveDisabled.get() || save() }),
options.width && cssModalWidth(options.width),
options.modalArgs,
];
});
}
/**
* Builds a simple confirm modal with 'Enter' bound to the confirm action.
*
* See saveModal() for error handling notes that here apply to the onConfirm callback.
*/
export function confirmModal(
title: string,
btnText: string,
onConfirm: () => Promise<void>,
explanation?: Element|string,
{hideCancel}: {hideCancel?: boolean} = {},
): void {
return saveModal((ctl, owner): ISaveModalOptions => ({
title,
body: explanation || null,
saveLabel: btnText,
saveFunc: onConfirm,
hideCancel,
width: 'normal',
}));
}
/**
* Builds a simple spinner modal. The modal gets removed when `promise` resolves.
*/
export async function spinnerModal<T>(
title: string,
promise: Promise<T>): Promise<T> {
modal((ctl, owner) => {
// `finally` is missing from es2016, below is a work-around.
const close = () => ctl.close();
promise.then(close, close);
return [
cssModalSpinner.cls(''),
cssModalTitle(title),
cssSpinner(loadingSpinner()),
testId('modal-spinner'),
];
}, {
noClickAway: true,
noEscapeKey: true,
});
return await promise;
}
/**
* Apply this to a modal as
* modal(() => [cssModalBody(...), cssModalWidth('normal')])
* or
* saveModal(() => {..., width: 'normal'})
*/
export function cssModalWidth(style: ModalWidth) {
return cssModalDialog.cls('-' + style);
}
/* CSS styled components */
const cssModalDialog = styled('div', `
background-color: white;
min-width: 428px;
color: black;
margin: auto;
border-radius: 3px;
box-shadow: 0 2px 18px 0 rgba(31,37,50,0.31), 0 0 1px 0 rgba(76,86,103,0.24);
padding: 40px 64px;
outline: none;
&-normal {
max-width: 480px;
}
&-fixed-wide {
width: 600px;
}
`);
export const cssModalTitle = styled('div', `
font-size: ${vars.xxxlargeFontSize};
font-weight: ${vars.headerControlTextWeight};
color: ${colors.dark};
margin: 0 0 16px 0;
line-height: 32px;
`);
export const cssModalBody = styled('div', `
margin: 16px 0;
`);
export const cssModalButtons = styled('div', `
margin: 40px 0 0 0;
& > button,
& > .${cssButton.className} {
margin: 0 8px 0 0;
}
`);
// For centering, we use 'margin: auto' on the flex item instead of 'justify-content: center' on
// the flex container, to ensure the full item can be scrolled in case of overflow.
// See https://stackoverflow.com/a/33455342/328565
const cssModalBacker = styled('div', `
position: fixed;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
background-color: ${colors.backdrop};
overflow-y: auto;
`);
const cssSpinner = styled('div', `
display: flex;
align-items: center;
height: 80px;
margin: auto;
`);
const cssModalSpinner = styled('div', `
display: flex;
flex-direction: column;
`);