@jupyterlab/ui-components
- Version 4.2.5
- Published
- 932 kB
- 21 dependencies
- BSD-3-Clause license
Install
npm i @jupyterlab/ui-components
yarn add @jupyterlab/ui-components
pnpm add @jupyterlab/ui-components
Overview
ui-components
Index
Variables
- addAboveIcon
- addBelowIcon
- addIcon
- badIcon
- bellIcon
- blankIcon
- bugDotIcon
- bugIcon
- buildIcon
- caretDownEmptyIcon
- caretDownEmptyThinIcon
- caretDownIcon
- caretLeftIcon
- caretRightIcon
- caretUpEmptyThinIcon
- caretUpIcon
- caseSensitiveIcon
- checkIcon
- circleEmptyIcon
- circleIcon
- clearIcon
- closeIcon
- codeCheckIcon
- codeIcon
- collapseAllIcon
- collapseIcon
- consoleIcon
- copyIcon
- copyrightIcon
- cutIcon
- DEFAULT_STYLE_CLASS
- DEFAULT_UI_OPTIONS
- deleteIcon
- downloadIcon
- duplicateIcon
- editIcon
- ellipsesIcon
- errorIcon
- expandAllIcon
- expandIcon
- extensionIcon
- fastForwardIcon
- fileIcon
- fileUploadIcon
- filterDotIcon
- filterIcon
- filterListIcon
- folderFavoriteIcon
- folderIcon
- historyIcon
- homeIcon
- HTML_SELECT_CLASS
- html5Icon
- IFormRendererRegistry
- ILabIconManager
- imageIcon
- infoIcon
- inspectorIcon
- jsonIcon
- juliaIcon
- jupyterFaviconIcon
- jupyterIcon
- jupyterlabWordmarkIcon
- kernelIcon
- keyboardIcon
- launcherIcon
- launchIcon
- lineFormIcon
- linkIcon
- listIcon
- lockIcon
- markdownIcon
- mermaidIcon
- moveDownIcon
- moveUpIcon
- newFolderIcon
- notebookIcon
- notTrustedIcon
- numberingIcon
- offlineBoltIcon
- paletteIcon
- pasteIcon
- pdfIcon
- pythonIcon
- reactIcon
- redoIcon
- refreshIcon
- regexIcon
- rKernelIcon
- runIcon
- runningIcon
- saveIcon
- searchIcon
- settingsIcon
- shareIcon
- spreadsheetIcon
- stopIcon
- tabIcon
- TABLE_CLASS
- tableRowsIcon
- tagIcon
- terminalIcon
- textEditorIcon
- tocIcon
- treeViewIcon
- trustedIcon
- undoIcon
- userIcon
- usersIcon
- vegaIcon
- wordIcon
- yamlIcon
Functions
Classes
WindowedListModel
- dispose()
- estimateWidgetSize
- getEstimatedTotalSize()
- getOffsetForIndexAndAlignment()
- getRangeToRender()
- getSpan()
- height
- isDisposed
- itemsList
- onListChanged()
- overscanCount
- paddingTop
- resetAfterIndex()
- scrollDownThreshold
- scrollOffset
- scrollUpThreshold
- setWidgetSize()
- stateChanged
- widgetCount
- widgetRenderer
- windowingActive
Interfaces
Namespaces
Variables
variable addAboveIcon
const addAboveIcon: LabIcon;
variable addBelowIcon
const addBelowIcon: LabIcon;
variable addIcon
const addIcon: LabIcon;
variable badIcon
const badIcon: LabIcon;
variable bellIcon
const bellIcon: LabIcon;
variable blankIcon
const blankIcon: LabIcon;
variable bugDotIcon
const bugDotIcon: LabIcon;
variable bugIcon
const bugIcon: LabIcon;
variable buildIcon
const buildIcon: LabIcon;
variable caretDownEmptyIcon
const caretDownEmptyIcon: LabIcon;
variable caretDownEmptyThinIcon
const caretDownEmptyThinIcon: LabIcon;
variable caretDownIcon
const caretDownIcon: LabIcon;
variable caretLeftIcon
const caretLeftIcon: LabIcon;
variable caretRightIcon
const caretRightIcon: LabIcon;
variable caretUpEmptyThinIcon
const caretUpEmptyThinIcon: LabIcon;
variable caretUpIcon
const caretUpIcon: LabIcon;
variable caseSensitiveIcon
const caseSensitiveIcon: LabIcon;
variable checkIcon
const checkIcon: LabIcon;
variable circleEmptyIcon
const circleEmptyIcon: LabIcon;
variable circleIcon
const circleIcon: LabIcon;
variable clearIcon
const clearIcon: LabIcon;
variable closeIcon
const closeIcon: LabIcon;
variable codeCheckIcon
const codeCheckIcon: LabIcon;
variable codeIcon
const codeIcon: LabIcon;
variable collapseAllIcon
const collapseAllIcon: LabIcon;
variable collapseIcon
const collapseIcon: LabIcon;
variable consoleIcon
const consoleIcon: LabIcon;
variable copyIcon
const copyIcon: LabIcon;
variable copyrightIcon
const copyrightIcon: LabIcon;
variable cutIcon
const cutIcon: LabIcon;
variable DEFAULT_STYLE_CLASS
const DEFAULT_STYLE_CLASS: string;
variable DEFAULT_UI_OPTIONS
const DEFAULT_UI_OPTIONS: { submitButtonOptions: { norender: boolean } };
Default
ui:options
for the UiSchema.
variable deleteIcon
const deleteIcon: LabIcon;
variable downloadIcon
const downloadIcon: LabIcon;
variable duplicateIcon
const duplicateIcon: LabIcon;
variable editIcon
const editIcon: LabIcon;
variable ellipsesIcon
const ellipsesIcon: LabIcon;
variable errorIcon
const errorIcon: LabIcon;
variable expandAllIcon
const expandAllIcon: LabIcon;
variable expandIcon
const expandIcon: LabIcon;
variable extensionIcon
const extensionIcon: LabIcon;
variable fastForwardIcon
const fastForwardIcon: LabIcon;
variable fileIcon
const fileIcon: LabIcon;
variable fileUploadIcon
const fileUploadIcon: LabIcon;
variable filterDotIcon
const filterDotIcon: LabIcon;
variable filterIcon
const filterIcon: LabIcon;
variable filterListIcon
const filterListIcon: LabIcon;
variable folderFavoriteIcon
const folderFavoriteIcon: LabIcon;
variable folderIcon
const folderIcon: LabIcon;
variable historyIcon
const historyIcon: LabIcon;
variable homeIcon
const homeIcon: LabIcon;
variable HTML_SELECT_CLASS
const HTML_SELECT_CLASS: string;
variable html5Icon
const html5Icon: LabIcon;
variable IFormRendererRegistry
const IFormRendererRegistry: Token<IFormRendererRegistry>;
The token for the form component registry.
variable ILabIconManager
const ILabIconManager: Token<ILabIconManager>;
The ILabIconManager token.
variable imageIcon
const imageIcon: LabIcon;
variable infoIcon
const infoIcon: LabIcon;
variable inspectorIcon
const inspectorIcon: LabIcon;
variable jsonIcon
const jsonIcon: LabIcon;
variable juliaIcon
const juliaIcon: LabIcon;
variable jupyterFaviconIcon
const jupyterFaviconIcon: LabIcon;
variable jupyterIcon
const jupyterIcon: LabIcon;
variable jupyterlabWordmarkIcon
const jupyterlabWordmarkIcon: LabIcon;
variable kernelIcon
const kernelIcon: LabIcon;
variable keyboardIcon
const keyboardIcon: LabIcon;
variable launcherIcon
const launcherIcon: LabIcon;
variable launchIcon
const launchIcon: LabIcon;
variable lineFormIcon
const lineFormIcon: LabIcon;
variable linkIcon
const linkIcon: LabIcon;
variable listIcon
const listIcon: LabIcon;
variable lockIcon
const lockIcon: LabIcon;
variable markdownIcon
const markdownIcon: LabIcon;
variable mermaidIcon
const mermaidIcon: LabIcon;
variable moveDownIcon
const moveDownIcon: LabIcon;
variable moveUpIcon
const moveUpIcon: LabIcon;
variable newFolderIcon
const newFolderIcon: LabIcon;
variable notebookIcon
const notebookIcon: LabIcon;
variable notTrustedIcon
const notTrustedIcon: LabIcon;
variable numberingIcon
const numberingIcon: LabIcon;
variable offlineBoltIcon
const offlineBoltIcon: LabIcon;
variable paletteIcon
const paletteIcon: LabIcon;
variable pasteIcon
const pasteIcon: LabIcon;
variable pdfIcon
const pdfIcon: LabIcon;
variable pythonIcon
const pythonIcon: LabIcon;
variable reactIcon
const reactIcon: LabIcon;
variable redoIcon
const redoIcon: LabIcon;
variable refreshIcon
const refreshIcon: LabIcon;
variable regexIcon
const regexIcon: LabIcon;
variable rKernelIcon
const rKernelIcon: LabIcon;
variable runIcon
const runIcon: LabIcon;
variable runningIcon
const runningIcon: LabIcon;
variable saveIcon
const saveIcon: LabIcon;
variable searchIcon
const searchIcon: LabIcon;
variable settingsIcon
const settingsIcon: LabIcon;
variable shareIcon
const shareIcon: LabIcon;
variable spreadsheetIcon
const spreadsheetIcon: LabIcon;
variable stopIcon
const stopIcon: LabIcon;
variable tabIcon
const tabIcon: LabIcon;
variable TABLE_CLASS
const TABLE_CLASS: string;
variable tableRowsIcon
const tableRowsIcon: LabIcon;
variable tagIcon
const tagIcon: LabIcon;
variable terminalIcon
const terminalIcon: LabIcon;
variable textEditorIcon
const textEditorIcon: LabIcon;
variable tocIcon
const tocIcon: LabIcon;
variable treeViewIcon
const treeViewIcon: LabIcon;
variable trustedIcon
const trustedIcon: LabIcon;
variable undoIcon
const undoIcon: LabIcon;
variable userIcon
const userIcon: LabIcon;
variable usersIcon
const usersIcon: LabIcon;
variable vegaIcon
const vegaIcon: LabIcon;
variable wordIcon
const wordIcon: LabIcon;
variable yamlIcon
const yamlIcon: LabIcon;
Functions
function AddButton
AddButton: (props: FormComponent.IAddButtonProps) => JSX.Element;
Button to add an item.
Returns
- the button as a react element.
function addCommandToolbarButtonClass
addCommandToolbarButtonClass: (w: Widget) => Widget;
function addToolbarButtonClass
addToolbarButtonClass: <T extends Widget = Widget>(w: T) => T;
Adds the toolbar button class to the toolbar widget.
Parameter w
Toolbar button widget.
function Button
Button: (props: IButtonProps) => JSX.Element;
Button component
Parameter props
Component properties
Returns
Component
function classes
classes: ( ...classes: (string | false | { [className: string]: any })[]) => string;
Combines classNames.
Parameter classes
A list of classNames
Returns
A single string with the combined className
function classesDedupe
classesDedupe: ( ...classes: (string | false | { [className: string]: any })[]) => string;
Combines classNames. Removes all duplicates
Parameter classes
A list of classNames
Returns
A single string with the combined className
function CommandToolbarButtonComponent
CommandToolbarButtonComponent: ( props: CommandToolbarButtonComponent.IProps) => JSX.Element;
React component for a toolbar button that wraps a command.
This wraps the ToolbarButtonComponent and watches the command registry for changes to the command.
function DropButton
DropButton: (props: FormComponent.IDropButtonProps) => JSX.Element;
Button to drop an item.
Returns
- the button as a react element.
function FilenameSearcher
FilenameSearcher: (props: IFilterBoxProps) => ReactWidget;
A widget which hosts a input textbox to filter on file names.
function FilterBox
FilterBox: (props: IFilterBoxProps) => JSX.Element;
function FormComponent
FormComponent: (props: IFormComponentProps) => JSX.Element;
Generic rjsf form component for JupyterLab UI.
function fuzzySearch
fuzzySearch: (source: string, query: string) => IScore | null;
Perform a fuzzy search on a single item.
function getReactAttrs
getReactAttrs: ( elem: Element, { ignore }?: { ignore?: string[] }) => { [key: string]: string };
Translates the attributes of a DOM element into attributes that can be understood by React. Currently not comprehensive, we will add special cases as they become relevant.
Parameter elem
A DOM element
Parameter ignore
An optional list of attribute names to ignore
Returns
An object with key:value pairs that are the React-friendly translation of elem's attributes
function InputGroup
InputGroup: (props: IInputGroupProps) => JSX.Element;
InputGroup component
Parameter props
Component properties
Returns
Component
function MoveButton
MoveButton: (props: FormComponent.IMoveButtonProps) => JSX.Element;
Button to move an item.
Returns
- the button as a react element.
function Table
Table: <T>(props: Table.IOptions<T>) => JSX.Element;
Sortable table component for small datasets.
For large datasets use
DataGrid
from@lumino/datagrid
.
function ToolbarButtonComponent
ToolbarButtonComponent: (props: ToolbarButtonComponent.IProps) => JSX.Element;
React component for a toolbar button.
Parameter props
The props for ToolbarButtonComponent.
function updateFilterFunction
updateFilterFunction: ( value: string, useFuzzyFilter: boolean, caseSensitive?: boolean) => (item: string) => Partial<IScore> | null;
Classes
class Collapser
class Collapser<T extends Widget = Widget> extends Widget {}
A panel that supports a collapsible header made from the widget's title. Clicking on the title expands or contracts the widget.
constructor
constructor(options: Collapser.IOptions<T>);
property collapseChanged
readonly collapseChanged: ISignal<Collapser<Widget>, void>;
A signal for when the widget collapse state changes.
property collapsed
collapsed: boolean;
The collapsed state of the panel.
property widget
widget: Widget;
The widget inside the collapse panel.
method dispose
dispose: () => void;
Dispose the widget.
method handleEvent
handleEvent: (event: Event) => void;
Handle the DOM events for the Collapser widget.
Parameter event
The DOM event sent to the panel.
#### Notes This method implements the DOM
EventListener
interface and is called in response to events on the panel's DOM node. It should not be called directly by user code.
method onAfterAttach
protected onAfterAttach: (msg: Message) => void;
method onBeforeDetach
protected onBeforeDetach: (msg: Message) => void;
method toggle
toggle: () => void;
Toggle the collapse state of the panel.
class CommandToolbarButton
class CommandToolbarButton extends ReactWidget {}
Phosphor Widget version of CommandToolbarButtonComponent.
constructor
constructor(props: CommandToolbarButtonComponent.IProps);
Creates a command toolbar button
Parameter props
props for underlying
CommandToolbarButtonComponent
component
method render
render: () => JSX.Element;
method setCommandAttributes
protected setCommandAttributes: ( commands: CommandRegistry, id: string, args: ReadonlyJSONObject | undefined) => void;
class ContextMenuSvg
class ContextMenuSvg extends ContextMenu implements IDisposable {}
An object which implements a universal context menu. Tweaked to use inline svg icons
constructor
constructor(options: ContextMenu.IOptions);
Construct a new context menu.
Parameter options
The options for initializing the menu.
property isDisposed
readonly isDisposed: boolean;
Test whether the context menu is disposed.
property menu
readonly menu: MenuSvg;
property opened
readonly opened: ISignal<ContextMenu, void>;
A signal fired when the context menu is opened.
method dispose
dispose: () => void;
Dispose of the resources held by the context menu.
method open
open: (event: MouseEvent) => boolean;
Open the context menu in response to a
'contextmenu'
event.Parameter event
The
'contextmenu'
event of interest.Returns
true
if the menu was opened, orfalse
if no items matched the event and the menu was not opened.#### Notes This method will populate the context menu with items which match the propagation path of the event, then open the menu at the mouse position indicated by the event.
class DockPanelSvg
class DockPanelSvg extends DockPanel {}
a widget which provides a flexible docking area for widgets. Tweaked to use an inline svg as the close icon
constructor
constructor(options?: DockPanel.IOptions);
Construct a new dock panel.
Parameter options
The options for initializing the panel.
class FormRendererRegistry
class FormRendererRegistry implements IFormRendererRegistry {}
A registry for property renderers used in the FormEditor component.
property renderers
readonly renderers: { [id: string]: IFormRenderer };
Returns all registered renderers in dictionary form.
Returns
- A dictionary that maps an id to a renderer.
method addRenderer
addRenderer: (id: string, renderer: IFormRenderer) => void;
Adds a renderer for a given property of a given settings plugin.
The id must follow that structure
<ISettingRegistry.IPlugin.id>.<propertyName>
Parameter id
Unique ID for the given renderer.
Parameter renderer
A renderer interfacing IFormRenderer.
method getRenderer
getRenderer: (id: string) => IFormRenderer;
Returns the renderer for the given id
Parameter id
The unique id for the renderer.
Returns
- A renderer interfacing IFormRenderer.
class HTMLSelect
class HTMLSelect extends React.Component<IHTMLSelectProps> {}
method render
render: () => JSX.Element;
class IFrame
class IFrame extends Widget {}
A Lumino widget which wraps an IFrame.
constructor
constructor(options?: IFrame.IOptions);
Create a new IFrame widget.
property referrerPolicy
referrerPolicy: IFrame.ReferrerPolicy;
Referrer policy for the iframe.
#### Notes By default,
no-referrer
is chosen.For more information, see https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
property sandbox
sandbox: IFrame.SandboxExceptions[];
Exceptions to the sandboxing.
#### Notes By default, all sandboxing security policies are enabled. This setting allows the user to selectively disable these policies. This should be done with care, as it can introduce security risks, and possibly allow malicious sites to execute code in a JupyterLab session.
For more information, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
property url
url: string;
The url of the IFrame.
class LabIcon
class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer {}
constructor
constructor({ name, svgstr, render, unrender, _loading,}: LabIcon.IOptions & { _loading?: boolean });
********* members * *********
property name
readonly name: string;
property react
readonly react: React.ForwardRefExoticComponent<any>;
A React component that will create the icon.
Parameter className
a string that will be used as the class of the container element. Overrides any existing class
Parameter container
a preexisting DOM element that will be used as the container for the svg element
Parameter label
text that will be displayed adjacent to the icon
Parameter title
a tooltip for the icon
Parameter tag
if container is not explicitly provided, this tag will be used when creating the container
Parameter stylesheet
optional string naming a builtin icon stylesheet, for example 'menuItem' or
statusBar
. Can also be an object defining a custom icon stylesheet, or a list of builtin stylesheet names and/or custom stylesheet objects. If array, the given stylesheets will be merged.See @jupyterlab/ui-components/src/style/icon.ts for details
Parameter elementPosition
optional position for the inner svg element
Parameter elementSize
optional size for the inner svg element. Set to 'normal' to get a standard 16px x 16px icon
Parameter
...elementCSS - all additional args are treated as overrides for the CSS props applied to the inner svg element
Parameter ref
forwarded to the ref prop of the icon's svg element
property svgElement
readonly svgElement: HTMLElement;
property svgInnerHTML
readonly svgInnerHTML: string;
property svgReactAttrs
readonly svgReactAttrs: any;
property svgstr
svgstr: string;
method bindprops
bindprops: (props?: LabIcon.IProps) => LabIcon;
Get a view of this icon that is bound to the specified icon/style props
Parameter optional
icon/style props (same as args for .element and .react methods). These will be bound to the resulting view
Returns
a view of this LabIcon instance
method element
element: (props?: LabIcon.IProps) => HTMLElement;
Create an icon as a DOM element
Parameter className
a string that will be used as the class of the container element. Overrides any existing class
Parameter container
a preexisting DOM element that will be used as the container for the svg element
Parameter label
text that will be displayed adjacent to the icon
Parameter title
a tooltip for the icon
Parameter tag
if container is not explicitly provided, this tag will be used when creating the container
Parameter stylesheet
optional string naming a builtin icon stylesheet, for example 'menuItem' or
statusBar
. Can also be an object defining a custom icon stylesheet, or a list of builtin stylesheet names and/or custom stylesheet objects. If array, the given stylesheets will be merged.See @jupyterlab/ui-components/src/style/icon.ts for details
Parameter elementPosition
optional position for the inner svg element
Parameter elementSize
optional size for the inner svg element. Set to 'normal' to get a standard 16px x 16px icon
Parameter
...elementCSS - all additional args are treated as overrides for the CSS props applied to the inner svg element
Returns
A DOM element that contains an (inline) svg element that displays an icon
method remove
static remove: (container: HTMLElement) => HTMLElement;
Remove any rendered icon from the element that contains it
Parameter container
a DOM node into which an icon was previously rendered
Returns
the cleaned container
method render
render: (container: HTMLElement, options?: LabIcon.IRendererOptions) => void;
method resolve
static resolve: ({ icon }: { icon: LabIcon.IResolvable }) => LabIcon;
Resolve an icon name or a {name, svgstr} pair into an actual LabIcon.
Parameter options
icon: either a string with the name of an existing icon or an object with {name: string, svgstr: string} fields.
Returns
a LabIcon instance
method resolveElement
static resolveElement: ({ icon, iconClass, fallback, ...props}: Partial<LabIcon.IResolverProps> & LabIcon.IProps) => HTMLElement;
Resolve an icon name or a {name, svgstr} pair into a DOM element. If icon arg is undefined, the function will fall back to trying to render the icon as a CSS background image, via the iconClass arg. If both icon and iconClass are undefined, this function will return an empty div.
Parameter icon
optional, either a string with the name of an existing icon or an object with {name: string, svgstr: string} fields
Parameter iconClass
optional, if the icon arg is not set, the iconClass arg should be a CSS class associated with an existing CSS background-image
Parameter fallback
DEPRECATED, optional, a LabIcon instance that will be used if neither icon nor iconClass are defined
Parameter props
any additional args are passed though to the element method of the resolved icon on render
Returns
a DOM node with the resolved icon rendered into it
method resolveReact
static resolveReact: ({ icon, iconClass, fallback, ...props}: Partial<LabIcon.IResolverProps> & LabIcon.IReactProps) => JSX.Element;
Resolve an icon name or a {name, svgstr} pair into a React component. If icon arg is undefined, the function will fall back to trying to render the icon as a CSS background image, via the iconClass arg. If both icon and iconClass are undefined, the returned component will simply render an empty div.
Parameter icon
optional, either a string with the name of an existing icon or an object with {name: string, svgstr: string} fields
Parameter iconClass
optional, if the icon arg is not set, the iconClass arg should be a CSS class associated with an existing CSS background-image
Parameter fallback
DEPRECATED, optional, a LabIcon instance that will be used if neither icon nor iconClass are defined
Parameter props
any additional args are passed though to the React component of the resolved icon on render
Returns
a React component that will render the resolved icon
method resolveSvg
static resolveSvg: ({ name, svgstr }: LabIcon.IIcon) => HTMLElement | null;
Resolve a {name, svgstr} pair into an actual svg node.
method toggleDebug
static toggleDebug: (debug?: boolean) => void;
Toggle icon debug from off-to-on, or vice-versa.
Parameter debug
optional boolean to force debug on or off
method unrender
unrender: (container: HTMLElement, options?: LabIcon.IRendererOptions) => void;
class MenuSvg
class MenuSvg extends Menu {}
a widget which displays items as a canonical menu. Tweaked to use inline svg icons
constructor
constructor(options: Menu.IOptions);
construct a new menu. Overrides the default renderer
Parameter options
The options for initializing the tab bar.
method insertItem
insertItem: (index: number, options: Menu.IItemOptions) => Menu.IItem;
insert a menu item into the menu at the specified index. Replaces the default renderer for submenus
Parameter index
The index at which to insert the item.
Parameter options
The options for creating the menu item.
Returns
The menu item added to the menu.
#### Notes The index will be clamped to the bounds of the items.
class PanelWithToolbar
class PanelWithToolbar extends Panel implements Toolbar.IWidgetToolbar {}
A base class for panel widget with toolbar.
constructor
constructor(options?: PanelWithToolbar.IOptions);
property toolbar
readonly toolbar: Toolbar<Widget>;
Widget toolbar
class RankedMenu
class RankedMenu extends Menu implements IRankedMenu {}
An extensible menu for JupyterLab application menus.
constructor
constructor(options: IRankedMenu.IOptions);
Construct a new menu.
Parameter options
Options for the lumino menu.
property rank
readonly rank: number;
Menu rank.
method addGroup
addGroup: (items: IRankedMenu.IItemOptions[], rank?: number) => IDisposable;
Add a group of menu items specific to a particular plugin.
The rank can be set for all items in the group using the function argument or per item.
Parameter items
the list of menu items to add.
Parameter rank
the default rank in the menu in which to insert the group.
Returns
Disposable of the group
method addItem
addItem: (options: IRankedMenu.IItemOptions) => IDisposableMenuItem;
Add a menu item to the end of the menu.
Parameter options
The options for creating the menu item.
Returns
The menu item added to the menu.
method clearItems
clearItems: () => void;
Remove all menu items from the menu.
method dispose
dispose: () => void;
Dispose of the resources held by the menu.
method getRankAt
getRankAt: (index: number) => number;
Get the rank of the item at index.
Parameter index
Item index.
Returns
Rank of the item.
method insertItem
insertItem: ( index: number, options: IRankedMenu.IItemOptions) => IDisposableMenuItem;
Insert a menu item into the menu at the specified index.
Parameter index
The index at which to insert the item.
Parameter options
The options for creating the menu item.
Returns
The menu item added to the menu.
#### Notes The index will be clamped to the bounds of the items.
method removeItemAt
removeItemAt: (index: number) => void;
Remove the item at a given index from the menu.
Parameter index
The index of the item to remove.
#### Notes This is a no-op if the index is out of range.
class ReactiveToolbar
class ReactiveToolbar extends Toolbar<Widget> {}
A class which provides a toolbar widget.
constructor
constructor();
Construct a new toolbar widget.
property popupOpener
protected readonly popupOpener: ToolbarPopupOpener;
method dispose
dispose: () => void;
Dispose of the widget and its descendant widgets.
method insertAfter
insertAfter: (at: string, name: string, widget: Widget) => boolean;
Insert an item into the toolbar at the after a target item.
Parameter at
The target item to insert after.
Parameter name
The name of the item.
Parameter widget
The widget to add.
Returns
Whether the item was added to the toolbar. Returns false if an item of the same name is already in the toolbar or if the target is the toolbar pop-up opener.
#### Notes The index will be clamped to the bounds of the items. The item can be removed from the toolbar by setting its parent to
null
.
method insertItem
insertItem: (index: number, name: string, widget: Widget) => boolean;
Insert an item into the toolbar at the specified index.
Parameter index
The index at which to insert the item.
Parameter name
The name of the item.
Parameter widget
The widget to add.
Returns
Whether the item was added to the toolbar. Returns false if an item of the same name is already in the toolbar.
#### Notes The index will be clamped to the bounds of the items. The item can be removed from the toolbar by setting its parent to
null
.
method insertRelative
protected insertRelative: ( at: string, offset: number, name: string, widget: Widget) => boolean;
Insert an item relatively to an other item.
method onAfterShow
onAfterShow: (msg: Message) => void;
A message handler invoked on an
'after-show'
message.Invokes resizing to ensure correct display of items.
method onBeforeHide
onBeforeHide: (msg: Message) => void;
A message handler invoked on a
'before-hide'
message.It will hide the pop-up panel
method onResize
protected onResize: (msg: Widget.ResizeMessage) => void;
class ReactWidget
abstract class ReactWidget extends Widget {}
An abstract class for a Lumino widget which renders a React component.
constructor
constructor();
property renderPromise
renderPromise?: Promise<void>;
method create
static create: (element: ReactRenderElement) => ReactWidget;
Creates a new
ReactWidget
that renders a constant element.Parameter element
React element to render.
method onAfterAttach
protected onAfterAttach: (msg: Message) => void;
Called after the widget is attached to the DOM
method onBeforeDetach
protected onBeforeDetach: (msg: Message) => void;
Called before the widget is detached from the DOM.
method onUpdateRequest
protected onUpdateRequest: (msg: Message) => void;
Called to update the state of the widget.
The default implementation of this method triggers VDOM based rendering by calling the
renderDOM
method.
method render
protected abstract render: () => ReactRenderElement | null;
Render the content of this widget using the virtual DOM.
This method will be called anytime the widget needs to be rendered, which includes layout triggered rendering.
Subclasses should define this method and return the root React nodes here.
class SidePanel
class SidePanel extends Widget {}
A widget meant to be contained in sidebars.
#### Note By default the content widget is an accordion panel that supports widget with associated toolbar to be displayed in the widget title.
constructor
constructor(options?: SidePanel.IOptions);
property content
readonly content: Panel;
The content hosted by the widget.
property header
readonly header: Panel;
A panel for widgets that sit on top of the widget.
property toolbar
readonly toolbar: Toolbar<Widget>;
The toolbar hosted by the widget.
It sits between the header and the content
property widgets
readonly widgets: readonly Widget[];
A read-only array of the widgets in the content panel.
method addWidget
addWidget: (widget: Toolbar.IWidgetToolbar) => void;
Add a widget to the content panel bottom.
Parameter widget
Widget to add
method insertWidget
insertWidget: (index: number, widget: Toolbar.IWidgetToolbar) => void;
Insert a widget at the given position in the content panel.
Parameter index
Position
Parameter widget
Widget to insert
class Spinner
class Spinner extends Widget {}
The spinner class.
constructor
constructor();
Construct a spinner widget.
method onActivateRequest
protected onActivateRequest: (msg: Message) => void;
Handle
'activate-request'
messages.
class Switch
class Switch extends Widget {}
A Switch widget
constructor
constructor();
property caption
caption: string;
The caption (title) of the switch.
property label
label: string;
The visible label of the switch.
property value
value: boolean;
The value of the switch.
property valueChanged
readonly valueChanged: ISignal<this, IChangedArgs<boolean, boolean, 'value'>>;
A signal emitted when the value changes.
method handleEvent
handleEvent: (event: Event) => void;
method onAfterAttach
protected onAfterAttach: () => void;
method onBeforeDetach
protected onBeforeDetach: () => void;
class TabBarSvg
class TabBarSvg<T> extends TabBar<T> {}
a widget which displays titles as a single row or column of tabs. Tweaked to use an inline svg as the close icon
constructor
constructor(options?: TabBar.IOptions<T>);
Construct a new tab bar. Overrides the default renderer.
Parameter options
The options for initializing the tab bar.
property translator
static translator: any;
Translator object
class TabPanelSvg
class TabPanelSvg extends TabPanel {}
A widget which combines a
TabBar
and aStackedPanel
. Tweaked to use an inline svg as the close icon
constructor
constructor(options?: TabPanel.IOptions);
Construct a new tab panel.
Parameter options
The options for initializing the tab panel.
class Toolbar
class Toolbar<T extends Widget = Widget> extends Widget {}
A class which provides a toolbar widget.
constructor
constructor(options?: Toolbar.IOptions);
Construct a new toolbar widget.
method addItem
addItem: (name: string, widget: T) => boolean;
Add an item to the end of the toolbar.
Parameter name
The name of the widget to add to the toolbar.
Parameter widget
The widget to add to the toolbar.
Returns
Whether the item was added to toolbar. Returns false if an item of the same name is already in the toolbar.
#### Notes The item can be removed from the toolbar by setting its parent to
null
.
method handleClick
protected handleClick: (event: Event) => void;
Handle a DOM click event.
method handleEvent
handleEvent: (event: Event) => void;
Handle the DOM events for the widget.
Parameter event
The DOM event sent to the widget.
#### Notes This method implements the DOM
EventListener
interface and is called in response to events on the dock panel's node. It should not be called directly by user code.
method insertAfter
insertAfter: (at: string, name: string, widget: T) => boolean;
Insert an item into the toolbar at the after a target item.
Parameter at
The target item to insert after.
Parameter name
The name of the item.
Parameter widget
The widget to add.
Returns
Whether the item was added to the toolbar. Returns false if an item of the same name is already in the toolbar.
#### Notes The index will be clamped to the bounds of the items. The item can be removed from the toolbar by setting its parent to
null
.
method insertBefore
insertBefore: (at: string, name: string, widget: T) => boolean;
Insert an item into the toolbar at the before a target item.
Parameter at
The target item to insert before.
Parameter name
The name of the item.
Parameter widget
The widget to add.
Returns
Whether the item was added to the toolbar. Returns false if an item of the same name is already in the toolbar.
#### Notes The index will be clamped to the bounds of the items. The item can be removed from the toolbar by setting its parent to
null
.
method insertItem
insertItem: (index: number, name: string, widget: T) => boolean;
Insert an item into the toolbar at the specified index.
Parameter index
The index at which to insert the item.
Parameter name
The name of the item.
Parameter widget
The widget to add.
Returns
Whether the item was added to the toolbar. Returns false if an item of the same name is already in the toolbar.
#### Notes The index will be clamped to the bounds of the items. The item can be removed from the toolbar by setting its parent to
null
.
method insertRelative
protected insertRelative: ( at: string, offset: number, name: string, widget: T) => boolean;
Insert an item relatively to an other item.
method names
names: () => IterableIterator<string>;
Get an iterator over the ordered toolbar item names.
Returns
An iterator over the toolbar item names.
method onAfterAttach
protected onAfterAttach: (msg: Message) => void;
Handle
after-attach
messages for the widget.
method onBeforeDetach
protected onBeforeDetach: (msg: Message) => void;
Handle
before-detach
messages for the widget.
class ToolbarButton
class ToolbarButton extends ReactWidget {}
Lumino Widget version of static ToolbarButtonComponent.
constructor
constructor(props?: ToolbarButtonComponent.IProps);
Creates a toolbar button
Parameter props
props for underlying
ToolbarButton
component
property enabled
enabled: boolean;
Returns true if button is enabled, false otherwise
property onClick
onClick: () => void;
Returns the click handler for the button
property pressed
pressed: boolean;
Returns true if button is pressed, false otherwise
method render
render: () => JSX.Element;
class UseSignal
class UseSignal<SENDER, ARGS> extends React.Component< IUseSignalProps<SENDER, ARGS>, IUseSignalState<SENDER, ARGS>> {}
UseSignal provides a way to hook up a Lumino signal to a React element, so that the element is re-rendered every time the signal fires.
It is implemented through the "render props" technique, using the
children
prop as a function to render, so that it can be used either as a prop or as a child of this element https://reactjs.org/docs/render-props.htmlExample as child:
function LiveButton(isActiveSignal: ISignal<any, boolean>) {return (<UseSignal signal={isActiveSignal} initialArgs={true}>{(_, isActive) => <Button isActive={isActive}>}</UseSignal>)}Example as prop:
function LiveButton(isActiveSignal: ISignal<any, boolean>) {return (<UseSignalsignal={isActiveSignal}initialArgs={true}children={(_, isActive) => <Button isActive={isActive}>}/>)}
constructor
constructor(props: IUseSignalProps<SENDER, ARGS>);
method componentDidMount
componentDidMount: () => void;
method componentWillUnmount
componentWillUnmount: () => void;
method render
render: () => React.ReactNode;
class VDomModel
class VDomModel implements VDomRenderer.IModel {}
Concrete implementation of VDomRenderer model.
property isDisposed
readonly isDisposed: boolean;
Test whether the model is disposed.
property stateChanged
readonly stateChanged: Signal<this, void>;
A signal emitted when any model state changes.
method dispose
dispose: () => void;
Dispose the model.
class VDomRenderer
abstract class VDomRenderer< T extends VDomRenderer.IModel | null = null> extends ReactWidget {}
An abstract ReactWidget with a model.
constructor
constructor(model?: VDomRenderer.IModel);
Create a new VDomRenderer
property model
model: VDomRenderer.IModel;
Get the current model.
property modelChanged
readonly modelChanged: ISignal<this, void>;
A signal emitted when the model changes.
method dispose
dispose: () => void;
Dispose this widget.
class WindowedLayout
class WindowedLayout extends PanelLayout {}
Customized layout for windowed list container.
constructor
constructor();
Constructor
property parent
parent: WindowedList<WindowedList.IModel<any>, any>;
Specialized parent type definition
method attachWidget
protected attachWidget: (index: number, widget: Widget) => void;
Attach a widget to the parent's DOM node.
Parameter index
The current index of the widget in the layout.
Parameter widget
The widget to attach to the parent.
#### Notes This method is called automatically by the panel layout at the appropriate time. It should not be called directly by user code.
The default implementation adds the widgets's node to the parent's node at the proper location, and sends the appropriate attach messages to the widget if the parent is attached to the DOM.
Subclasses may reimplement this method to control how the widget's node is added to the parent's node.
method detachWidget
protected detachWidget: (index: number, widget: Widget) => void;
Detach a widget from the parent's DOM node.
Parameter index
The previous index of the widget in the layout.
Parameter widget
The widget to detach from the parent.
#### Notes This method is called automatically by the panel layout at the appropriate time. It should not be called directly by user code.
The default implementation removes the widget's node from the parent's node, and sends the appropriate detach messages to the widget if the parent is attached to the DOM.
Subclasses may reimplement this method to control how the widget's node is removed from the parent's node.
method moveWidget
protected moveWidget: ( fromIndex: number, toIndex: number, widget: Widget) => void;
Move a widget in the parent's DOM node.
Parameter fromIndex
The previous index of the widget in the layout.
Parameter toIndex
The current index of the widget in the layout.
Parameter widget
The widget to move in the parent.
#### Notes This method is called automatically by the panel layout at the appropriate time. It should not be called directly by user code.
The default implementation moves the widget's node to the proper location in the parent's node and sends the appropriate attach and detach messages to the widget if the parent is attached to the DOM.
Subclasses may reimplement this method to control how the widget's node is moved in the parent's node.
method onUpdateRequest
protected onUpdateRequest: (msg: Message) => void;
A message handler invoked on an
'update-request'
message.#### Notes This is a reimplementation of the base class method, and is a no-op.
class WindowedList
class WindowedList< T extends WindowedList.IModel = WindowedList.IModel, U = any> extends Widget {}
Windowed list widget
constructor
constructor(options: WindowedList.IOptions<T, U>);
Constructor
Parameter options
Constructor options
property DEFAULT_WIDGET_SIZE
static readonly DEFAULT_WIDGET_SIZE: number;
Default widget size
property isParentHidden
isParentHidden: boolean;
Whether the parent is hidden or not.
This should be set externally if a container is hidden to stop updating the widget size when hidden.
property jumped
protected jumped: Signal<this, number>;
A signal that emits the index when the virtual scrollbar jumps to an item.
property layout
readonly layout: WindowedLayout;
Widget layout
property outerNode
readonly outerNode: HTMLElement;
The outer container of the windowed list.
property renderer
protected renderer: WindowedList.IRenderer<U>;
The renderer for this windowed list. Set at instantiation.
property scrollbar
scrollbar: boolean;
Flag to enable virtual scrollbar.
property viewModel
readonly viewModel: WindowedList.IModel<any>;
Windowed list view model
property viewportNode
readonly viewportNode: HTMLElement;
Viewport
method dispose
dispose: () => void;
Dispose the windowed list.
method handleEvent
handleEvent: (event: Event) => void;
Callback on event.
Parameter event
Event
method onAfterAttach
protected onAfterAttach: (msg: Message) => void;
A message handler invoked on an
'after-attach'
message.
method onBeforeDetach
protected onBeforeDetach: (msg: Message) => void;
A message handler invoked on an
'before-detach'
message.
method onResize
protected onResize: (msg: Widget.ResizeMessage) => void;
A message handler invoked on an
'resize-request'
message.
method onScroll
protected onScroll: (event: Event) => void;
Callback on scroll event
Parameter event
Scroll event
method onStateChanged
protected onStateChanged: ( model: WindowedList.IModel, changes: IChangedArgs<number | boolean, number | boolean, string>) => void;
Callback on view model change
Parameter model
Windowed list model
Parameter changes
Change
method onUpdateRequest
protected onUpdateRequest: (msg: Message) => void;
A message handler invoked on an
'update-request'
message.#### Notes The default implementation of this handler is a no-op.
method scrollTo
scrollTo: (scrollOffset: number) => void;
Scroll to the specified offset
scrollTop
.Parameter scrollOffset
Offset to scroll
Deprecated
since v4 This is an internal helper. Prefer calling
scrollToItem
.
method scrollToItem
scrollToItem: ( index: number, align?: WindowedList.ScrollToAlign, margin?: number, alignPreference?: WindowedList.BaseScrollToAlignment) => Promise<void>;
Scroll to the specified item.
By default, the list will scroll as little as possible to ensure the item is fully visible (
auto
). You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:auto - Automatically align with the top or bottom minimising the amount scrolled, If
alignPreference
is given, follow such preferred alignment. If item is smaller than the viewport and fully visible, do not scroll at all. smart - If the item is significantly visible, don't scroll at all (regardless of whether it fits in the viewport). If the item is less than one viewport away, scroll so that it becomes fully visible (following theauto
heuristics). If the item is more than one viewport away, scroll so that it is centered within the viewport (center
if smaller than viewport,top-center
otherwise). center - Align the middle of the item with the middle of the viewport (it only works well for items smaller than the viewport). top-center - Align the top of the item with the middle of the viewport (works well for items larger than the viewport). end - Align the bottom of the item to the bottom of the list. start - Align the top of item to the top of the list.Parameter index
Item index to scroll to
Parameter align
Type of alignment
Parameter margin
In 'smart' mode the viewport proportion to add
Parameter alignPreference
Allows to override the alignment of item when the
auto
heuristic decides that the item needs to be scrolled into view.
class WindowedListModel
abstract class WindowedListModel implements WindowedList.IModel {}
Windowed list abstract model.
constructor
constructor(options?: WindowedList.IModelOptions);
Constructor
Parameter options
Constructor options
property estimateWidgetSize
abstract estimateWidgetSize: (index: number) => number;
Provide a best guess for the widget size at position index
#### Notes
This function should be very light to compute especially when returning the default size. The default value should be constant (i.e. two calls with
null
should return the same value). But it can change for a givenindex
.Parameter index
Widget position
Returns
Estimated widget size
property height
height: number;
List widget height
property isDisposed
readonly isDisposed: boolean;
Test whether the model is disposed.
property itemsList
itemsList: ISimpleObservableList<any>;
Items list to be rendered
property overscanCount
overscanCount: number;
Number of widgets to render in addition to those visible in the viewport.
property paddingTop
paddingTop: number;
Top padding of the the outer window node.
property scrollDownThreshold
readonly scrollDownThreshold: number;
The overlap threshold used to decide whether to scroll down to an item below the viewport (smart mode). If the item overlap with the viewport is greater or equal this threshold the item is considered sufficiently visible and will not be scrolled to. The value is the number of pixels in overlap if greater than one, or otherwise a fraction of item height. By default the item is scrolled to if not full visible in the viewport.
property scrollOffset
scrollOffset: number;
Viewport scroll offset.
property scrollUpThreshold
readonly scrollUpThreshold: number;
The underlap threshold used to decide whether to scroll up to an item above the viewport (smart mode). If the item part outside the viewport (underlap) is greater than this threshold then the item is considered not sufficiently visible and will be scrolled to. The value is the number of pixels in underlap if greater than one, or otherwise a fraction of the item height. By default the item is scrolled to if not full visible in the viewport.
property stateChanged
readonly stateChanged: ISignal< WindowedListModel, IChangedArgs<any, any, string>>;
A signal emitted when any model state changes.
property widgetCount
widgetCount: number;
Total number of widgets in the list
property widgetRenderer
abstract widgetRenderer: (index: number) => Widget;
Widget factory for the list items.
Caching the resulting widgets should be done by the callee.
Parameter index
List index
Returns
The widget at the given position
property windowingActive
windowingActive: boolean;
Whether windowing is active or not.
This is true by default.
method dispose
dispose: () => void;
Dispose the model.
method getEstimatedTotalSize
getEstimatedTotalSize: () => number;
Get the total list size.
Returns
Total estimated size
method getOffsetForIndexAndAlignment
getOffsetForIndexAndAlignment: ( index: number, align?: WindowedList.ScrollToAlign, margin?: number, precomputed?: { totalSize: number; itemMetadata: WindowedList.ItemMetadata; currentOffset: number; }, alignPreference?: WindowedList.BaseScrollToAlignment) => number;
Get the scroll offset to display an item in the viewport.
By default, the list will scroll as little as possible to ensure the item is fully visible (
auto
). You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:auto - Automatically align with the top or bottom minimising the amount scrolled, If
alignPreference
is given, follow such preferred alignment. If item is smaller than the viewport and fully visible, do not scroll at all. smart - If the item is significantly visible, don't scroll at all (regardless of whether it fits in the viewport). If the item is less than one viewport away, scroll so that it becomes fully visible (following theauto
heuristics). If the item is more than one viewport away, scroll so that it is centered within the viewport (center
if smaller than viewport,top-center
otherwise). center - Align the middle of the item with the middle of the viewport (it only works well for items smaller than the viewport). top-center - Align the top of the item with the middle of the viewport (works well for items larger than the viewport). end - Align the bottom of the item to the bottom of the list. start - Align the top of item to the top of the list.An item is considered significantly visible if: - it overlaps with the viewport by the amount specified by
scrollDownThreshold
when below the viewport - it exceeds the viewport by the amount less than specified byscrollUpThreshold
when above the viewport.Parameter index
Item index
Parameter align
Where to align the item in the viewport
Parameter margin
The proportion of viewport to add when aligning with the top/bottom of the list.
Parameter precomputed
Precomputed values to use when windowing is disabled.
Parameter alignPreference
Allows to override the alignment of item when the
auto
heuristic decides that the item needs to be scrolled into view.Returns
The needed scroll offset
method getRangeToRender
getRangeToRender: () => WindowedList.WindowIndex | null;
Compute the items range to display.
It returns ``null`` if the range does not need to be updated.
Returns
The current items range to display
method getSpan
getSpan: (startIndex: number, stopIndex: number) => [number, number];
Return the viewport top position and height for range spanning from ``startIndex`` to ``stopIndex``.
Parameter startIndex
First item in viewport index
Parameter stopIndex
Last item in viewport index
Returns
The viewport top position and its height
method onListChanged
protected onListChanged: ( list: IObservableList<Widget>, changes: IObservableList.IChangedArgs<Widget>) => void;
Callback on list changes
Parameter list
List items
Parameter changes
List change
method resetAfterIndex
resetAfterIndex: (index: number) => void;
WindowedListModel caches offsets and measurements for each index for performance purposes. This method clears that cached data for all items after (and including) the specified index.
The list will automatically re-render after the index is reset.
Parameter index
method setWidgetSize
setWidgetSize: (sizes: { index: number; size: number }[]) => boolean;
Update item sizes.
This should be called when the real item sizes has been measured.
Parameter sizes
New sizes per item index
Returns
Whether some sizes changed or not
Interfaces
interface IButtonProps
interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
Button component property
interface IDisposableMenuItem
interface IDisposableMenuItem extends IDisposable, Menu.IItem {}
Interface for disposable item menu
interface IElementRefProps
interface IElementRefProps<E extends HTMLElement> {}
property elementRef
elementRef?: (ref: E | null) => void;
Ref handler to access the instance of the internal HTML element.
interface IFilterBoxProps
interface IFilterBoxProps {}
The class name added to the filebrowser crumbs node.
property caseSensitive
caseSensitive?: boolean;
Whether to use case-sensitive search
property disabled
disabled?: boolean;
Whether the search box is disabled or not.
property forceRefresh
forceRefresh?: boolean;
Whether to force a refresh.
property initialQuery
initialQuery?: string;
An optional initial search value.
property inputRef
inputRef?: React.RefObject<HTMLInputElement>;
Pass a ref to the input element
property placeholder
placeholder?: string;
Optional placeholder for the search box.
property updateFilter
updateFilter: ( filterFn: (item: string) => Partial<IScore> | null, query?: string) => void;
A function to callback when filter is updated.
property useFuzzyFilter
useFuzzyFilter: boolean;
Whether to use the fuzzy filter.
interface IFormComponentProps
interface IFormComponentProps<T = ReadonlyJSONObject> extends FormProps<T>, FormComponent.ILabCustomizerProps {}
FormComponent properties
property formContext
formContext?: unknown;
property formData
formData: T;
property onChange
onChange: (e: IChangeEvent<T>) => any;
interface IFormRenderer
interface IFormRenderer {}
Form renderer interface.
property fieldRenderer
fieldRenderer?: Field;
A React component with properties FieldProps.
property widgetRenderer
widgetRenderer?: Widget;
A React component with properties WidgetProps.
interface IFormRendererRegistry
interface IFormRendererRegistry {}
A registry for rendering fields used in the FormEditor component.
property addRenderer
addRenderer: (id: string, renderer: IFormRenderer) => void;
Adds a renderer for a given property of a given settings plugin.
The id must follow that structure
<ISettingRegistry.IPlugin.id>.<propertyName>
Parameter id
Unique ID for the given renderer.
Parameter renderer
A renderer interfacing IFormRenderer.
property getRenderer
getRenderer: (id: string) => IFormRenderer;
Returns the component for the given id
Parameter id
The unique id for the component.
Returns
- A component interfacing IFormComponent.
property renderers
renderers: { [id: string]: IFormRenderer;};
Returns all registered renderers in dictionary form.
Returns
- A dictionary that maps an id to a renderer.
interface IHTMLSelectProps
interface IHTMLSelectProps extends IElementRefProps<HTMLSelectElement>, React.SelectHTMLAttributes<HTMLSelectElement> {}
property defaultStyle
defaultStyle?: boolean;
property icon
icon?: LabIcon;
property iconProps
iconProps?: LabIcon.IProps;
property options
options?: Array<string | number | IOptionProps>;
interface IInputGroupProps
interface IInputGroupProps extends React.InputHTMLAttributes<HTMLInputElement> {}
InputGroup component properties
interface ILabCustomizerOptions
interface ILabCustomizerOptions<P> extends FormComponent.ILabCustomizerProps {}
interface ILabIconManager
interface ILabIconManager {}
Placeholder for future icon manager class to assist with overriding/replacing particular sets of icons
interface IOptionProps
interface IOptionProps {}
property className
className?: string;
A space-delimited list of class names
property disabled
disabled?: boolean;
Whether this option is non-interactive.
property label
label?: string;
Label text for this option. If omitted,
value
is used as the label.
property value
value: string | number;
Value of this option.
interface IRankedMenu
interface IRankedMenu extends IDisposable {}
A common interface for extensible JupyterLab application menus.
Plugins are still free to define their own menus in any way they like. However, JupyterLab defines a few top-level application menus that may be extended by plugins as well, such as "Edit" and "View"
property items
readonly items: ReadonlyArray<Menu.IItem>;
A read-only array of the menu items in the menu.
property rank
readonly rank?: number;
Menu rank
method addGroup
addGroup: (items: Menu.IItemOptions[], rank?: number) => IDisposable;
Add a group of menu items specific to a particular plugin.
The rank can be set for all items in the group using the function argument or per item.
Parameter items
the list of menu items to add.
Parameter rank
the default rank in the menu in which to insert the group.
Returns
Disposable of the group
method addItem
addItem: (options: IRankedMenu.IItemOptions) => IDisposable;
Add a menu item to the end of the menu.
Parameter options
The options for creating the menu item.
Returns
The disposable menu item added to the menu.
interface IScore
interface IScore {}
A text match score with associated content item.
interface ISimpleObservableList
interface ISimpleObservableList<T = any> {}
Windowed list model interface
interface IUseSignalProps
interface IUseSignalProps<SENDER, ARGS> {}
Props for the UseSignal component
property children
children: (sender?: SENDER, args?: ARGS) => React.ReactNode;
Function mapping the last signal value or initial values to an element to render.
Note: returns
React.ReactNode
as per https://github.com/sw-yx/react-typescript-cheatsheet#higher-order-componentsrender-props
property initialArgs
initialArgs?: ARGS;
Initial value to use for the args, used before the signal emits a value. If not provided, initial args will be undefined.
property initialSender
initialSender?: SENDER;
Initial value to use for the sender, used before the signal emits a value. If not provided, initial sender will be undefined
property shouldUpdate
shouldUpdate?: (sender: SENDER, args: ARGS) => boolean;
Given the last signal value, should return whether to update the state or not.
The default unconditionally returns
true
, so you only have to override if you want to skip some updates.
property signal
signal: ISignal<SENDER, ARGS>;
Phosphor signal to connect to.
interface IUseSignalState
interface IUseSignalState<SENDER, ARGS> {}
State for the UseSignal component
property value
value: [SENDER?, ARGS?];
Namespaces
namespace Collapser
namespace Collapser {}
namespace CommandPaletteSvg
namespace CommandPaletteSvg {}
variable defaultRenderer
const defaultRenderer: Renderer;
class Renderer
class Renderer extends CommandPalette.Renderer {}
a modified implementation of the CommandPalette Renderer
method createIconClass
createIconClass: (data: CommandPalette.IItemRenderData) => string;
Create the class name for the command item icon.
Parameter data
The data to use for the class name.
Returns
The full class name for the item icon.
method renderHeader
renderHeader: (data: CommandPalette.IHeaderRenderData) => VirtualElement;
Render the virtual element for a command palette header.
Parameter data
The data to use for rendering the header.
Returns
A virtual element representing the header.
method renderItemIcon
renderItemIcon: (data: CommandPalette.IItemRenderData) => VirtualElement;
Render the icon for a command palette item.
Parameter data
The data to use for rendering the icon.
Returns
A virtual element representing the icon.
namespace CommandToolbarButtonComponent
namespace CommandToolbarButtonComponent {}
Namespace for CommandToolbarButtonComponent.
interface IProps
interface IProps {}
Interface for CommandToolbarButtonComponent props.
property args
args?: ReadonlyJSONObject;
Command arguments
property caption
caption?: string;
Overrides command caption
property commands
commands: CommandRegistry;
Application commands registry
property icon
icon?: LabIcon;
Overrides command icon
property id
id: string;
Command unique id
property label
label?: string | CommandRegistry.CommandFunc<string>;
Overrides command label
namespace DockPanelSvg
namespace DockPanelSvg {}
variable defaultRenderer
const defaultRenderer: Renderer;
class Renderer
class Renderer extends DockPanel.Renderer {}
A modified implementation of the DockPanel Renderer.
method createTabBar
createTabBar: () => TabBarSvg<Widget>;
Create a new tab bar (with inline svg icons enabled for use with a dock panel.
Returns
A new tab bar for a dock panel.
namespace FormComponent
namespace FormComponent {}
Form component namespace.
interface IAddButtonProps
interface IAddButtonProps extends IButtonProps {}
Properties of the button to add an item.
property onAddClick
onAddClick: ArrayFieldTemplateProps['onAddClick'];
Function to call to add an item.
interface IButtonProps
interface IButtonProps {}
property buttonStyle
buttonStyle?: 'icons' | 'text';
Button style.
property translator
translator?: ITranslator;
Translator for button text.
interface IDropButtonProps
interface IDropButtonProps extends IButtonProps {}
Properties of the button to drop an item.
property item
item: ArrayFieldTemplateProps['items'][number];
Item index to drop with this button.
interface ILabCustomizerProps
interface ILabCustomizerProps extends IButtonProps {}
Properties for React JSON schema form's container template (array and object).
property compact
compact?: boolean;
Whether the container is in compact mode or not. In compact mode the title and description are displayed more compactness.
property showModifiedFromDefault
showModifiedFromDefault?: boolean;
Whether to display if the current value is not the default one.
interface IMoveButtonProps
interface IMoveButtonProps extends IButtonProps {}
Properties of the button to move an item.
namespace HoverBox
namespace HoverBox {}
A namespace for
HoverBox
members.
function setGeometry
setGeometry: (options: IOptions) => void;
Set the visible dimensions of a hovering box anchored to an editor cursor.
Parameter options
The hover box geometry calculation options.
interface IAnchor
interface IAnchor extends Pick<DOMRect, 'left' | 'right' | 'top' | 'bottom'> {}
An interface describing anchor coordinates.
interface IOptions
interface IOptions {}
Options for setting the geometry of a hovering node and its anchor node.
property anchor
anchor: IAnchor;
The referent anchor rectangle to which the hover box is bound.
#### Notes In an editor context, this value will typically be the cursor's coordinate position, which can be retrieved via calling the
getCoordinateForPosition
method.
property host
host: HTMLElement;
The node that hosts the anchor.
#### Notes The visibility of the elements under hover box edges within this host node is the heuristic that determines whether the hover box ought to be visible.
property maxHeight
maxHeight: number;
The maximum height of a hover box.
#### Notes This value is only used if a CSS max-height attribute is not set for the hover box. It is a fallback value.
property minHeight
minHeight: number;
The minimum height of a hover box.
property node
node: HTMLElement;
The hover box node.
property offset
offset?: { horizontal?: number; vertical?: { above?: number; below?: number; };};
Optional pixel offset values added to where the hover box should render.
#### Notes This option is useful for passing in values that may pertain to CSS borders or padding in cases where the text inside the hover box may need to align with the text of the referent editor.
Because the hover box calculation may render a box either above or below the cursor, the
vertical
offset acceptsabove
andbelow
values for the different render modes.
property outOfViewDisplay
outOfViewDisplay?: { top?: OutOfViewDisplay; bottom?: OutOfViewDisplay; left?: OutOfViewDisplay; right?: OutOfViewDisplay;};
How to position the hover box if its edges extend beyond the view of the host element. Value 'sticky' positions the box at the (inner or outer) edge of the host element.
#### Notes The default value for each edge is
'hidden-inside'
for left and top, andhidden-outside
for right and bottom edges.
property privilege
privilege?: 'above' | 'below' | 'forceAbove' | 'forceBelow';
If space is available both above and below the anchor, denote which location is privileged. Use forceBelow and forceAbove to mandate where hover box should render relative to anchor.
#### Notes The default value is
'below'
.
property size
size?: { width: number; height: number;};
Exact size of the hover box. Pass it for faster rendering (allowing the positioning algorithm to to place it immediately at requested position).
property style
style?: CSSStyleDeclaration;
If the style of the node has already been computed, it can be passed into the hover box for geometry calculation.
namespace IFrame
namespace IFrame {}
A namespace for IFrame widget statics.
interface IOptions
interface IOptions {}
Options for creating a new IFrame widget.
property referrerPolicy
referrerPolicy?: ReferrerPolicy;
Referrer policy for the iframe.
property sandbox
sandbox?: SandboxExceptions[];
Exceptions for the iframe sandbox.
type ReferrerPolicy
type ReferrerPolicy = | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
Referrer policy for the iframe.
User documentation for the policies can be found here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
type SandboxExceptions
type SandboxExceptions = | 'allow-downloads' | 'allow-forms' | 'allow-modals' | 'allow-orientation-lock' | 'allow-pointer-lock' | 'allow-popups' | 'popups-to-escape-sandbox' | 'allow-presentation' | 'allow-same-origin' | 'allow-scripts' | 'allow-storage-access-by-user-activation' | 'allow-top-navigation' | 'allow-top-navigation-by-user-activation';
Exceptions to the iframe sandboxing policies. These are specified here: https://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#attr-iframe-sandbox
More user-friendly documentation can be found here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox
namespace IRankedMenu
namespace IRankedMenu {}
Namespace for JupyterLabMenu interfaces
variable DEFAULT_RANK
const DEFAULT_RANK: number;
Default menu item rank
interface IItemOptions
interface IItemOptions extends Menu.IItemOptions {}
An options object for creating a menu item.
property rank
rank?: number;
Menu item rank
interface IOptions
interface IOptions extends Menu.IOptions {}
An options object for creating a JupyterLab menu.
property includeSeparators
includeSeparators?: boolean;
Whether to include separators between the groups that are added to the menu.
Default: true
property rank
rank?: number;
Menu rank
namespace LabIcon
namespace LabIcon {}
A namespace for LabIcon statics.
interface IIcon
interface IIcon extends IRenderMime.LabIcon.IIcon {}
The simplest possible interface for defining a generic icon.
interface ILabIcon
interface ILabIcon extends IIcon, VirtualElement.IRenderer {}
The ILabIcon interface. Outside of this interface the actual implementation of LabIcon may vary
interface IOptions
interface IOptions extends IIcon, Partial<VirtualElement.IRenderer> {}
Interface defining the parameters to be passed to the LabIcon constructor
interface IProps
interface IProps extends LabIconStyle.IProps {}
The input props for creating a new LabIcon
property className
className?: string;
Extra classNames. Used in addition to the typestyle className to set the className of the icon's outermost container node
property container
container?: HTMLElement;
The icon's outermost node, which acts as a container for the actual svg node. If container is not supplied, it will be created
property label
label?: string;
Optional text label that will be added as a sibling to the icon's svg node
property slot
slot?: string | null;
Optional slot property to specify the position of the icon in the template
property tag
tag?: 'div' | 'span' | null;
HTML element tag used to create the icon's outermost container node, if no container is passed in
#### Notes If
null
is provided and no container is defined, the icon SVG will return directly ignoring all other attributes (label, title,...)
property title
title?: string;
Optional title that will be set on the icon's outermost container node
interface IRendererOptions
interface IRendererOptions {}
interface IResolverProps
interface IResolverProps {}
type IMaybeResolvable
type IMaybeResolvable = IResolvable | VirtualElement.IRenderer | undefined;
A type that maybe can be resolved to a LabIcon instance.
type IReact
type IReact = React.ForwardRefExoticComponent<IReactProps>;
The complete type of the React component stored in the .react field of a LabIcon.
type IReactProps
type IReactProps = IProps & React.RefAttributes<SVGElement>;
The properties that can be passed into the React component stored in the .react field of a LabIcon.
type IReactRef
type IReactRef = React.RefObject<SVGElement>;
The type of the svg node ref that can be passed into icon React components
type IResolvable
type IResolvable = IRenderMime.LabIcon.IResolvable;
A type that can be resolved to a LabIcon instance.
namespace MenuSvg
namespace MenuSvg {}
variable defaultRenderer
const defaultRenderer: Renderer;
function overrideDefaultRenderer
overrideDefaultRenderer: (menu: Menu) => void;
class Renderer
class Renderer extends Menu.Renderer {}
a modified implementation of the Menu Renderer
method createIconClass
createIconClass: (data: Menu.IRenderData) => string;
Create the class name for the menu item icon.
Parameter data
The data to use for the class name.
Returns
The full class name for the item icon.
method renderIcon
renderIcon: (data: Menu.IRenderData) => VirtualElement;
Render the icon element for a menu item.
Parameter data
The data to use for rendering the icon.
Returns
A virtual element representing the item icon.
method renderSubmenu
renderSubmenu: (data: Menu.IRenderData) => VirtualElement;
Render the submenu icon element for a menu item.
Parameter data
The data to use for rendering the submenu icon.
Returns
A virtual element representing the submenu icon.
namespace PanelWithToolbar
namespace PanelWithToolbar {}
Namespace for panel with toolbar
namespace SidePanel
namespace SidePanel {}
The namespace for the
SidePanel
class statics.
interface IOptions
interface IOptions extends AccordionPanel.IOptions {}
An options object for creating a side panel widget.
property content
content?: Panel;
The main child of the side panel
If nothing is provided it fallback to an AccordionToolbar panel.
property header
header?: Panel;
The header is at the top of the SidePanel, and that extensions can populate.
Defaults to an empty Panel if requested otherwise it won't be created.
property toolbar
toolbar?: Toolbar;
The toolbar to use for the widget. It sits between the header and the content
Defaults to an empty toolbar if requested otherwise it won't be created.
property translator
translator?: ITranslator;
The application language translator.
namespace Styling
namespace Styling {}
A namespace for node styling.
function styleNode
styleNode: (node: HTMLElement, className?: string) => void;
Style a node and its child elements with the default tag names.
Parameter node
The base node.
Parameter className
The optional CSS class to add to styled nodes.
function styleNodeByTag
styleNodeByTag: (node: HTMLElement, tagName: string, className?: string) => void;
Style a node and its elements that have a given tag name.
Parameter node
The base node.
Parameter tagName
The html tag name to style.
Parameter className
The optional CSS class to add to styled nodes.
function wrapSelect
wrapSelect: (node: HTMLSelectElement, multiple?: boolean) => HTMLElement;
Wrap a select node.
namespace TabBarSvg
namespace TabBarSvg {}
variable defaultRenderer
const defaultRenderer: Renderer;
class Renderer
class Renderer extends TabBar.Renderer {}
A modified implementation of the TabBar Renderer.
method renderCloseIcon
renderCloseIcon: (data: TabBar.IRenderData<any>) => VirtualElement;
Render the close icon element for a tab.
Parameter data
The data to use for rendering the tab.
Returns
A virtual element representing the tab close icon.
namespace Table
namespace Table {}
A namespace for Table.
interface IColumn
interface IColumn<T> {}
Column definition.
property id
id: string;
property isHidden
isHidden?: boolean;
property label
label: string;
method isAvailable
isAvailable: () => boolean;
method renderCell
renderCell: (data: T) => ReactNode;
method sort
sort: (a: T, b: T) => number | undefined;
interface IOptions
interface IOptions<T> extends Partial<ISortState> {}
The initialization options for the table.
property blankIndicator
blankIndicator: () => ReactNode;
property columns
columns: IColumn<T>[];
property onRowClick
onRowClick?: React.MouseEventHandler<HTMLTableRowElement>;
property rows
rows: IRow<T>[];
interface IRow
interface IRow<T> {}
Table row with data to display.
interface ISortState
interface ISortState {}
The state which will be restored from layout tracker.
property sortDirection
sortDirection: -1 | 1;
property sortKey
sortKey?: string | null;
namespace Toolbar
namespace Toolbar {}
The namespace for Toolbar class statics.
function createSpacerItem
createSpacerItem: () => Widget;
Create a toolbar spacer item.
#### Notes It is a flex spacer that separates the left toolbar items from the right toolbar items.
interface IOptions
interface IOptions {}
The options used to create a toolbar.
property layout
layout?: Layout;
Toolbar widget layout.
interface IWidgetToolbar
interface IWidgetToolbar extends Widget {}
Widget with associated toolbar
property toolbar
toolbar?: Toolbar;
Toolbar of actions on the widget
namespace ToolbarButtonComponent
namespace ToolbarButtonComponent {}
Namespace for ToolbarButtonComponent.
interface IProps
interface IProps {}
Interface for ToolbarButtonComponent props.
property actualOnClick
actualOnClick?: boolean;
Trigger the button on the actual onClick event rather than onMouseDown.
See note in ToolbarButtonComponent below as to why the default is to trigger on onMouseDown.
property className
className?: string;
property dataset
dataset?: DOMStringMap;
Data set of the button
property disabledTooltip
disabledTooltip?: string;
property enabled
enabled?: boolean;
property icon
icon?: LabIcon.IMaybeResolvable;
property iconClass
iconClass?: string;
property iconLabel
iconLabel?: string;
property label
label?: string;
property onClick
onClick?: () => void;
property pressed
pressed?: boolean;
property pressedIcon
pressedIcon?: LabIcon.IMaybeResolvable;
property pressedTooltip
pressedTooltip?: string;
property tooltip
tooltip?: string;
property translator
translator?: ITranslator;
The application language translator.
namespace VDomRenderer
namespace VDomRenderer {}
The namespace for VDomRenderer statics.
interface IModel
interface IModel extends IDisposable {}
An interface for a model to be used with vdom rendering.
property stateChanged
readonly stateChanged: ISignal<this, void>;
A signal emitted when any model state changes.
namespace WindowedList
namespace WindowedList {}
A namespace for windowed list
variable defaultRenderer
const defaultRenderer: Renderer<any>;
The default renderer for windowed lists.
class Renderer
class Renderer<T = any> implements IRenderer<T> {}
The default renderer class for windowed lists.
method createOuter
createOuter: () => HTMLElement;
Create the outer, root element of the windowed list.
method createScrollbar
createScrollbar: () => HTMLOListElement;
Create the virtual scrollbar element.
method createScrollbarItem
createScrollbarItem: (_: WindowedList, index: number) => HTMLLIElement;
Create an individual item rendered in the scrollbar.
method createViewport
createViewport: () => HTMLElement;
Create the viewport element into which virtualized children are added.
interface IModel
interface IModel<T = any> extends IDisposable {}
Windowed list model interface
property estimateWidgetSize
estimateWidgetSize: (index: number) => number;
Provide a best guess for the widget size at position index
#### Notes
This function should be very light to compute especially when returning the default size. The default value should be constant (i.e. two calls with
null
should return the same value). But it can change for a givenindex
.Parameter index
Widget position
Returns
Estimated widget size
property height
height: number;
List widget height
property itemsList
itemsList: ISimpleObservableList<T> | null;
Items list to be rendered
property overscanCount
overscanCount: number;
Number of widgets to render in addition to those visible in the viewport.
property paddingTop
paddingTop?: number;
Top padding of the the outer window node.
property scrollOffset
scrollOffset: number;
Viewport scroll offset.
property stateChanged
readonly stateChanged: ISignal< IModel, IChangedArgs< any, any, 'count' | 'index' | 'list' | 'overscanCount' | 'windowingActive' | string >>;
A signal emitted when any model state changes.
property widgetCount
widgetCount: number;
Total number of widgets in the list
property widgetRenderer
widgetRenderer: (index: number) => Widget;
Widget factory for the list items.
Caching the resulting widgets should be done by the callee.
Parameter index
List index
Returns
The widget at the given position
property windowingActive
windowingActive: boolean;
Whether windowing is active or not.
method getEstimatedTotalSize
getEstimatedTotalSize: () => number;
Get the total list size.
Returns
Total estimated size
method getOffsetForIndexAndAlignment
getOffsetForIndexAndAlignment: ( index: number, align?: ScrollToAlign, margin?: number, precomputed?: { totalSize: number; itemMetadata: WindowedList.ItemMetadata; currentOffset: number; }, alignPreference?: WindowedList.BaseScrollToAlignment) => number;
Get the scroll offset to display an item in the viewport.
By default, the list will scroll as little as possible to ensure the item is fully visible (
auto
). You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:auto - Automatically align with the top or bottom minimising the amount scrolled, If
alignPreference
is given, follow such preferred alignment. If item is smaller than the viewport and fully visible, do not scroll at all. smart - If the item is significantly visible, don't scroll at all (regardless of whether it fits in the viewport). If the item is less than one viewport away, scroll so that it becomes fully visible (following theauto
heuristics). If the item is more than one viewport away, scroll so that it is centered within the viewport (center
if smaller than viewport,top-center
otherwise). center - Align the middle of the item with the middle of the viewport (it only works well for items smaller than the viewport). top-center - Align the top of the item with the middle of the viewport (works well for items larger than the viewport). end - Align the bottom of the item to the bottom of the list. start - Align the top of item to the top of the list.Parameter index
Item index
Parameter align
Where to align the item in the viewport
Parameter margin
In 'smart' mode the viewport proportion to add
Parameter precomputed
Precomputed values to use when windowing is disabled.
Parameter alignPreference
Allows to override the alignment of item when the
auto
heuristic decides that the item needs to be scrolled into view.Returns
The needed scroll offset
method getRangeToRender
getRangeToRender: () => WindowIndex | null;
Compute the items range to display.
It returns ``null`` if the range does not need to be updated.
Returns
The current items range to display
method getSpan
getSpan: (start: number, stop: number) => [number, number];
Return the viewport top position and height for range spanning from ``startIndex`` to ``stopIndex``.
Parameter start
First item in viewport index
Parameter stop
Last item in viewport index
Returns
The viewport top position and its height
method resetAfterIndex
resetAfterIndex: (index: number) => void;
WindowedListModel caches offsets and measurements for each index for performance purposes. This method clears that cached data for all items after (and including) the specified index.
The list will automatically re-render after the index is reset.
Parameter index
method setWidgetSize
setWidgetSize: (sizes: { index: number; size: number }[]) => boolean;
Update item sizes.
This should be called when the real item sizes has been measured.
Parameter sizes
New sizes per item index
Returns
Whether some sizes changed or not
interface IModelOptions
interface IModelOptions {}
Windowed list model constructor options
property count
count?: number;
Total number of widgets in the list.
#### Notes If an observable list is provided this will be ignored.
property itemsList
itemsList?: IObservableList<any>;
Dynamic list of items
property overscanCount
overscanCount?: number;
Number of widgets to render in addition to those visible in the viewport.
property windowingActive
windowingActive?: boolean;
Whether windowing is active or not.
This is true by default.
interface IOptions
interface IOptions<T extends WindowedList.IModel = WindowedList.IModel, U = any> {}
Windowed list view constructor options
interface IRenderer
interface IRenderer<T = any> {}
A windowed list element renderer.
method createOuter
createOuter: () => HTMLElement;
Create the outer, root element of the windowed list.
method createScrollbar
createScrollbar: () => HTMLElement;
Create the virtual scrollbar element.
method createScrollbarItem
createScrollbarItem: ( list: WindowedList, index: number, item: T | undefined) => HTMLElement;
Create an individual item rendered in the scrollbar.
method createViewport
createViewport: () => HTMLElement;
Create the viewport element into which virtualized children are added.
type BaseScrollToAlignment
type BaseScrollToAlignment = 'center' | 'top-center' | 'start' | 'end';
Basic type of scroll alignment
type ItemMetadata
type ItemMetadata = { /** * Item vertical offset in the container */ offset: number; /** * Item height */ size: number; /** * Whether the size is an estimation or a measurement. */ measured?: boolean;