@jupyterlab/apputils
Version:
JupyterLab - Application Utilities
403 lines • 12.3 kB
JavaScript
// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
import { Widget } from '@lumino/widgets';
import { Dialog, showDialog } from './dialog';
const INPUT_DIALOG_CLASS = 'jp-Input-Dialog';
const INPUT_BOOLEAN_DIALOG_CLASS = 'jp-Input-Boolean-Dialog';
/**
* Namespace for input dialogs
*/
export var InputDialog;
(function (InputDialog) {
/**
* Create and show a input dialog for a boolean.
*
* @param options - The dialog setup options.
*
* @returns A promise that resolves with whether the dialog was accepted
*/
function getBoolean(options) {
return showDialog({
...options,
body: new InputBooleanDialog(options),
buttons: [
Dialog.cancelButton({ label: options.cancelLabel }),
Dialog.okButton({ label: options.okLabel })
],
focusNodeSelector: 'input'
});
}
InputDialog.getBoolean = getBoolean;
/**
* Create and show a input dialog for a number.
*
* @param options - The dialog setup options.
*
* @returns A promise that resolves with whether the dialog was accepted
*/
function getNumber(options) {
return showDialog({
...options,
body: new InputNumberDialog(options),
buttons: [
Dialog.cancelButton({ label: options.cancelLabel }),
Dialog.okButton({ label: options.okLabel })
],
focusNodeSelector: 'input'
});
}
InputDialog.getNumber = getNumber;
/**
* Create and show a input dialog for a choice.
*
* @param options - The dialog setup options.
*
* @returns A promise that resolves with whether the dialog was accepted
*/
function getItem(options) {
return showDialog({
...options,
body: new InputItemsDialog(options),
buttons: [
Dialog.cancelButton({ label: options.cancelLabel }),
Dialog.okButton({ label: options.okLabel })
],
focusNodeSelector: options.editable ? 'input' : 'select'
});
}
InputDialog.getItem = getItem;
/**
* Create and show a input dialog for a choice.
*
* @param options - The dialog setup options.
*
* @returns A promise that resolves with whether the dialog was accepted
*/
function getMultipleItems(options) {
return showDialog({
...options,
body: new InputMultipleItemsDialog(options),
buttons: [
Dialog.cancelButton({ label: options.cancelLabel }),
Dialog.okButton({ label: options.okLabel })
]
});
}
InputDialog.getMultipleItems = getMultipleItems;
/**
* Create and show a input dialog for a text.
*
* @param options - The dialog setup options.
*
* @returns A promise that resolves with whether the dialog was accepted
*/
function getText(options) {
return showDialog({
...options,
body: new InputTextDialog(options),
buttons: [
Dialog.cancelButton({ label: options.cancelLabel }),
Dialog.okButton({ label: options.okLabel })
],
focusNodeSelector: 'input'
});
}
InputDialog.getText = getText;
/**
* Create and show a input dialog for a password.
*
* @param options - The dialog setup options.
*
* @returns A promise that resolves with whether the dialog was accepted
*/
function getPassword(options) {
return showDialog({
...options,
body: new InputPasswordDialog(options),
buttons: [
Dialog.cancelButton({ label: options.cancelLabel }),
Dialog.okButton({ label: options.okLabel })
],
focusNodeSelector: 'input'
});
}
InputDialog.getPassword = getPassword;
})(InputDialog || (InputDialog = {}));
/**
* Base widget for input dialog body
*/
class InputDialogBase extends Widget {
/**
* InputDialog constructor
*
* @param label Input field label
*/
constructor(options) {
super();
this.addClass(INPUT_DIALOG_CLASS);
this._input = document.createElement('input');
this._input.classList.add('jp-mod-styled');
this._input.id = 'jp-dialog-input-id';
if (options.label !== undefined) {
const labelElement = document.createElement('label');
labelElement.textContent = options.label;
labelElement.htmlFor = this._input.id;
// Initialize the node
this.node.appendChild(labelElement);
}
const wrapper = document.createElement('div');
wrapper.className = 'jp-InputDialog-inputWrapper';
if (options.prefix) {
const prefix = document.createElement('span');
prefix.className = 'jp-InputDialog-inputPrefix';
prefix.textContent = options.prefix;
// Both US WDS (https://designsystem.digital.gov/components/input-prefix-suffix/)
// and UK DS (https://design-system.service.gov.uk/components/text-input/) recommend
// hiding prefixes and suffixes from screen readers.
prefix.ariaHidden = 'true';
wrapper.appendChild(prefix);
}
wrapper.appendChild(this._input);
if (options.suffix) {
const suffix = document.createElement('span');
suffix.className = 'jp-InputDialog-inputSuffix';
suffix.textContent = options.suffix;
suffix.ariaHidden = 'true';
wrapper.appendChild(suffix);
}
this.node.appendChild(wrapper);
}
}
/**
* Widget body for input boolean dialog
*/
class InputBooleanDialog extends InputDialogBase {
/**
* InputBooleanDialog constructor
*
* @param options Constructor options
*/
constructor(options) {
super(options);
this.addClass(INPUT_BOOLEAN_DIALOG_CLASS);
this._input.type = 'checkbox';
this._input.checked = options.value ? true : false;
}
/**
* Get the text specified by the user
*/
getValue() {
return this._input.checked;
}
}
/**
* Widget body for input number dialog
*/
class InputNumberDialog extends InputDialogBase {
/**
* InputNumberDialog constructor
*
* @param options Constructor options
*/
constructor(options) {
super(options);
this._input.type = 'number';
this._input.value = options.value ? options.value.toString() : '0';
}
/**
* Get the number specified by the user.
*/
getValue() {
if (this._input.value) {
return Number(this._input.value);
}
else {
return Number.NaN;
}
}
}
/**
* Base widget body for input text/password/email dialog
*/
class InputDialogTextBase extends InputDialogBase {
/**
* InputDialogTextBase constructor
*
* @param options Constructor options
*/
constructor(options) {
super(options);
this._input.value = options.text ? options.text : '';
if (options.placeholder) {
this._input.placeholder = options.placeholder;
}
if (options.pattern) {
this._input.pattern = options.pattern;
}
if (options.required) {
this._input.required = options.required;
}
}
/**
* Get the text specified by the user
*/
getValue() {
return this._input.value;
}
}
/**
* Widget body for input text dialog
*/
class InputTextDialog extends InputDialogTextBase {
/**
* InputTextDialog constructor
*
* @param options Constructor options
*/
constructor(options) {
var _a;
super(options);
this._input.type = 'text';
this._initialSelectionRange = Math.min(this._input.value.length, Math.max(0, (_a = options.selectionRange) !== null && _a !== void 0 ? _a : this._input.value.length));
}
/**
* A message handler invoked on an `'after-attach'` message.
*/
onAfterAttach(msg) {
super.onAfterAttach(msg);
if (this._initialSelectionRange > 0 && this._input.value) {
this._input.setSelectionRange(0, this._initialSelectionRange);
}
}
}
/**
* Widget body for input password dialog
*/
class InputPasswordDialog extends InputDialogTextBase {
/**
* InputPasswordDialog constructor
*
* @param options Constructor options
*/
constructor(options) {
super(options);
this._input.type = 'password';
}
/**
* A message handler invoked on an `'after-attach'` message.
*/
onAfterAttach(msg) {
super.onAfterAttach(msg);
if (this._input.value) {
this._input.select();
}
}
}
/**
* Widget body for input list dialog
*/
class InputItemsDialog extends InputDialogBase {
/**
* InputItemsDialog constructor
*
* @param options Constructor options
*/
constructor(options) {
super(options);
this._editable = options.editable || false;
let current = options.current || 0;
let defaultIndex;
if (typeof current === 'number') {
defaultIndex = Math.max(0, Math.min(current, options.items.length - 1));
current = '';
}
this._list = document.createElement('select');
options.items.forEach((item, index) => {
const option = document.createElement('option');
if (index === defaultIndex) {
option.selected = true;
current = item;
}
option.value = item;
option.textContent = item;
this._list.appendChild(option);
});
if (options.editable) {
/* Use of list and datalist */
const data = document.createElement('datalist');
data.id = 'input-dialog-items';
data.appendChild(this._list);
this._input.type = 'list';
this._input.value = current;
this._input.setAttribute('list', data.id);
if (options.placeholder) {
this._input.placeholder = options.placeholder;
}
this.node.appendChild(data);
}
else {
/* Use select directly */
this._input.parentElement.replaceChild(this._list, this._input);
}
}
/**
* Get the user choice
*/
getValue() {
if (this._editable) {
return this._input.value;
}
else {
return this._list.value;
}
}
}
/**
* Widget body for input list dialog
*/
class InputMultipleItemsDialog extends InputDialogBase {
/**
* InputMultipleItemsDialog constructor
*
* @param options Constructor options
*/
constructor(options) {
super(options);
let defaults = options.defaults || [];
this._list = document.createElement('select');
this._list.setAttribute('multiple', '');
options.items.forEach(item => {
const option = document.createElement('option');
option.value = item;
option.textContent = item;
this._list.appendChild(option);
});
// use the select
this._input.remove();
this.node.appendChild(this._list);
// select the current ones
const htmlOptions = this._list.options;
for (let i = 0; i < htmlOptions.length; i++) {
const option = htmlOptions[i];
if (defaults.includes(option.value)) {
option.selected = true;
}
else {
option.selected = false;
}
}
}
/**
* Get the user choices
*/
getValue() {
let result = [];
for (let opt of this._list.options) {
if (opt.selected && !opt.classList.contains('hidden')) {
result.push(opt.value || opt.text);
}
}
return result;
}
}
//# sourceMappingURL=inputdialog.js.map