@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
688 lines (675 loc) • 22.1 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/DialogComponents.js";
import { createRef } from 'preact';
import { useState } from 'preact/hooks';
import { Scrollbox } from '../../..';
import Library from '../Library';
import { ConfirmModal, Dialog, IconButton, LabeledButton, Modal, TextInput, TextInputWithButton } from '../../../';
import { LoremIpsum } from './samples';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
function DialogExample() {
const [dialogOpen, setDialogOpen] = useState(false);
const focusRef = createRef();
const buttons = [_jsxDEV(LabeledButton, {
onClick: () => alert('You chose maybe'),
children: "Maybe"
}, "maybe", false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 5
}, this), _jsxDEV(LabeledButton, {
onClick: () => alert('You chose yep'),
variant: "primary",
children: "Do it!"
}, "yep", false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 5
}, this)];
if (!dialogOpen) {
return _jsxDEV(LabeledButton, {
onClick: () => setDialogOpen(!dialogOpen),
variant: "primary",
children: "Show Dialog Example"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 7
}, this);
} else {
return _jsxDEV(Dialog, {
buttons: buttons,
icon: "edit",
initialFocus: focusRef,
onCancel: () => setDialogOpen(false),
title: "This is a Dialog",
children: [_jsxDEV("p", {
children: ["This is a ", _jsxDEV("code", {
children: "Dialog"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 21
}, this), ", with initial focus on a", ' ', _jsxDEV("code", {
children: "TextInputWithButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 11
}, this), " component input."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 9
}, this), _jsxDEV(TextInputWithButton, {
children: [_jsxDEV(TextInput, {
name: "my-input",
inputRef: focusRef
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 11
}, this), _jsxDEV(IconButton, {
icon: "arrow-right",
variant: "dark",
title: "go"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 7
}, this);
}
}
function DialogWithoutCancelButtonExample() {
const [dialogOpen, setDialogOpen] = useState(false);
if (!dialogOpen) {
return _jsxDEV(LabeledButton, {
onClick: () => setDialogOpen(!dialogOpen),
variant: "primary",
children: "Show Dialog Example"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 7
}, this);
} else {
return _jsxDEV(Dialog, {
icon: "edit",
onCancel: () => setDialogOpen(false),
title: "Dialog: No cancel button",
withCancelButton: false,
children: _jsxDEV("p", {
children: "This is a Dialog that has a close button but no Cancel button."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 7
}, this);
}
}
function DialogWithoutCloseButtonExample() {
const [dialogOpen, setDialogOpen] = useState(false);
if (!dialogOpen) {
return _jsxDEV(LabeledButton, {
onClick: () => setDialogOpen(!dialogOpen),
variant: "primary",
children: "Show Dialog Example"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 7
}, this);
} else {
return _jsxDEV(Dialog, {
icon: "edit",
onCancel: () => setDialogOpen(false),
title: "Dialog: no close button",
withCloseButton: false,
children: _jsxDEV("p", {
children: "This is a Dialog that has a Cancel button but no close button."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 7
}, this);
}
}
function ModalExample() {
const [dialogOpen, setDialogOpen] = useState(false);
const focusRef = createRef();
const buttons = [_jsxDEV(LabeledButton, {
onClick: () => alert('You chose Save'),
variant: "primary",
children: "Save"
}, "yep", false, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 5
}, this)];
if (!dialogOpen) {
return _jsxDEV(LabeledButton, {
onClick: () => setDialogOpen(!dialogOpen),
variant: "primary",
children: "Show Modal Example"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 7
}, this);
} else {
return _jsxDEV(Modal, {
buttons: buttons,
initialFocus: focusRef,
onCancel: () => setDialogOpen(false),
title: "Sample Modal",
children: [_jsxDEV("p", {
children: ["This is a ", _jsxDEV("code", {
children: "Modal"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 21
}, this), ", with initial focus on a", ' ', _jsxDEV("code", {
children: "TextInputWithButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 152,
columnNumber: 11
}, this), " component input."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 150,
columnNumber: 9
}, this), _jsxDEV(TextInputWithButton, {
children: [_jsxDEV(TextInput, {
name: "my-input",
inputRef: focusRef
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 11
}, this), _jsxDEV(IconButton, {
icon: "arrow-right",
variant: "dark",
title: "go"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 144,
columnNumber: 7
}, this);
}
}
function LongModalExample() {
const [dialogOpen, setDialogOpen] = useState(false);
const buttons = [_jsxDEV(LabeledButton, {
onClick: () => alert('You chose Save'),
variant: "primary",
children: "Save"
}, "yep", false, {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 5
}, this)];
if (!dialogOpen) {
return _jsxDEV(LabeledButton, {
onClick: () => setDialogOpen(!dialogOpen),
variant: "primary",
children: "Show Long Modal"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 7
}, this);
} else {
return _jsxDEV(Modal, {
buttons: buttons,
onCancel: () => setDialogOpen(false),
title: "Modal with overflowing content",
children: _jsxDEV(Scrollbox, {
classes: "px-4 py-2",
children: _jsxDEV(LoremIpsum, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 193,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 192,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 7
}, this);
}
}
function ConfirmModalExample() {
const [dialogOpen, setDialogOpen] = useState(false);
if (!dialogOpen) {
return _jsxDEV(LabeledButton, {
onClick: () => setDialogOpen(!dialogOpen),
variant: "primary",
children: "Show ConfirmModal Example"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 7
}, this);
} else {
return _jsxDEV(ConfirmModal, {
confirmAction: "OK",
message: "Are you sure you want to take out a second mortgage?",
onCancel: () => setDialogOpen(false),
onConfirm: () => alert('ok'),
title: "Confirm this"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 7
}, this);
}
}
export default function DialogComponents() {
return _jsxDEV(Library.Page, {
title: "Dialogs",
children: [_jsxDEV(Library.Pattern, {
title: "Dialog",
children: [_jsxDEV("p", {
children: ["A ", _jsxDEV("code", {
children: "Dialog"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 230,
columnNumber: 13
}, this), " prompts for user interaction and will take focus when opened."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 229,
columnNumber: 9
}, this), _jsxDEV("p", {
children: ["Use a ", _jsxDEV("code", {
children: "Dialog"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 234,
columnNumber: 17
}, this), " when you want to route focus. Consider using a ", _jsxDEV("code", {
children: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 235,
columnNumber: 13
}, this), " for presenting panel-styled content that does not require grabbing focus."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 233,
columnNumber: 9
}, this), _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Dialogs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 239,
columnNumber: 11
}, this), " are styled using the ", _jsxDEV("code", {
children: "panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 239,
columnNumber: 53
}, this), " pattern."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 238,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Setting initial focus",
children: [_jsxDEV("p", {
children: ["This example shows a dismiss-able ", _jsxDEV("code", {
children: "Dialog"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 243,
columnNumber: 47
}, this), " with an explicitly-provided element (", _jsxDEV("code", {
children: "ref"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 244,
columnNumber: 42
}, this), ") that should take initial focus: a text ", _jsxDEV("code", {
children: "input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 245,
columnNumber: 35
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 242,
columnNumber: 11
}, this), _jsxDEV("p", {
children: ["In some cases, you might need finer control over which element is focused when the ", _jsxDEV("code", {
children: "Dialog"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 249,
columnNumber: 30
}, this), " or ", _jsxDEV("code", {
children: "Modal"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 249,
columnNumber: 53
}, this), " is opened. This might arise if you have nested components within a", ' ', _jsxDEV("code", {
children: "Modal"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 251,
columnNumber: 13
}, this), " or ", _jsxDEV("code", {
children: "Dialog"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 251,
columnNumber: 35
}, this), ", or there is complex logic about focus. Setting the ", _jsxDEV("code", {
children: "initialFocus"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 252,
columnNumber: 38
}, this), " prop to", ' ', _jsxDEV("code", {
children: "null"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 253,
columnNumber: 13
}, this), " will opt out of automatic focus handling."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 247,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
children: _jsxDEV(DialogExample, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 256,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 241,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Dialog with no cancel or close button",
children: [_jsxDEV("p", {
children: ["By default, a ", _jsxDEV("code", {
children: "Dialog"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 263,
columnNumber: 27
}, this), " will render both a close button (x) and a Cancel button if an ", _jsxDEV("code", {
children: "onCancel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 264,
columnNumber: 43
}, this), " callback is provided, but this can be overridden with the", ' ', _jsxDEV("code", {
children: "withCancelButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 266,
columnNumber: 13
}, this), " and ", _jsxDEV("code", {
children: "withCloseButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 266,
columnNumber: 47
}, this), ' ', "boolean props for the cancel button and close button, respectively."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 262,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Dialog with no Cancel button",
children: _jsxDEV(DialogWithoutCancelButtonExample, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 270,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 269,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Dialog with no Close button",
children: _jsxDEV(DialogWithoutCloseButtonExample, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 274,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 273,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 261,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 228,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Modal",
children: [_jsxDEV("p", {
children: ["A ", _jsxDEV("code", {
children: "Modal"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 281,
columnNumber: 13
}, this), " is a type of ", _jsxDEV("code", {
children: "Dialog"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 281,
columnNumber: 45
}, this), " that centers on the screen and obscures the background with an overlay."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 280,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Basic usage",
children: [_jsxDEV("p", {
children: "Close the modal by clicking the close (X) button, the cancel button or clicking anywhere outside of it."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 285,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
children: _jsxDEV(ModalExample, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 290,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 289,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 284,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Handling content overflow",
children: [_jsxDEV("p", {
children: "Modals that may contain a lot of content may need to handle overflow (i.e. make their content scrollable) so that the modal height doesn't exceed available viewport space."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 295,
columnNumber: 11
}, this), _jsxDEV("p", {
children: ["To make something in a modal scroll-able, apply", ' ', _jsxDEV("code", {
children: "overflow: auto"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 302,
columnNumber: 13
}, this), " to the element you wish to contain. This element needs to be an immediate-child element of the", ' ', _jsxDEV("code", {
children: "Modal"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 304,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 300,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
children: _jsxDEV(LongModalExample, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 307,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 306,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 294,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 279,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "ConfirmModal",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ConfirmModal"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 314,
columnNumber: 11
}, this), " is intended to mirror the functionality of", ' ', _jsxDEV("code", {
children: "window.confirm"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 315,
columnNumber: 11
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 313,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ConfirmModal"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 319,
columnNumber: 13
}, this), " prompts the user for a boolean yes/no input. Close and cancel are considered no."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 318,
columnNumber: 11
}, this), _jsxDEV("p", {
children: ["Handlers need to be provided for what to do on yes (", _jsxDEV("code", {
children: "onConfirm"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 324,
columnNumber: 13
}, this), ") and no/cancel (", _jsxDEV("code", {
children: "onCancel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 324,
columnNumber: 52
}, this), "). Typically, both would (also) close the modal, though in this example, the ", _jsxDEV("code", {
children: "onConfirm"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 326,
columnNumber: 26
}, this), " handler does not close the modal."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 322,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
children: _jsxDEV(ConfirmModalExample, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 330,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 329,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 317,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 312,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 5
}, this);
}
//# sourceMappingURL=DialogComponents.js.map