@jupyterlab/apputils#ToolbarButton TypeScript Examples

class Play extends ToolbarButton {
  private onClick: any = null;
  private _disabled: boolean = true;

  constructor(onClick: any) {
    super();
    this.id = 'jupyterlab-ros/bag:play';
    this.title.label = "Play";
    this.title.icon = runIcon;

    this.onClick = onClick;
  }

  disable(disable: boolean): void {
    this._disabled = disable;
    this.update();
  }

  render(): JSX.Element {
    return (
      <>
      { this._disabled ?
        <a href="#" onClick={this.onClick} className="btn-disabled">
          <runIcon.react tag="span" right="7px" top="5px" />
        </a>
        :
        <a href="#" onClick={this.onClick}>
          <runIcon.react tag="span" right="7px" top="5px" />
        </a>
      }
      </>
    );
  }
}

class Stop extends ToolbarButton {
  private onClick: any = null;
  private _disabled: boolean = true;

  constructor(onClick: any) {
    super();
    this.id = 'jupyterlab-ros/bag:stop';
    this.title.label = "Stop";
    this.title.icon = stopIcon;

    this.onClick = onClick;
  }

  disable(disable: boolean): void {
    this._disabled = disable;
    this.update();
  }

  render(): JSX.Element {
    return (
      <>
      { this._disabled ?
        <a href="#" onClick={this.onClick} className="btn-disabled">
          <stopIcon.react tag="span" right="7px" top="5px" />
        </a>
        :
        <a href="#" onClick={this.onClick}>
          <stopIcon.react tag="span" right="7px" top="5px" />
        </a>
      }
      </>
    );
  }
}

class Running extends ToolbarButton {
  private _disabled: boolean = true;

  constructor() {
    super();
    this.id = 'jupyterlab-ros/bag:running';
    this.title.label = "Running";
    this.title.icon = "running";
  }

  disable(disable: boolean): void {
    this._disabled = disable;
    this.update();
  }

  render(): JSX.Element {
    return (
      <>
      { this._disabled ? <div/> :
        <div className="loader"><div className="lds-running"><div></div><div></div><div></div><div></div></div></div>
      }
      </>
    );
  }
}

constructor(options: EditableCSVDocumentWidget.IOptions) {
    let { content, reveal } = options;
    const { context, commandRegistry, ...other } = options;
    content = content || new DSVEditor({ context });
    reveal = Promise.all([reveal, content.revealed]);
    super({ context, content, reveal, ...other });

    // add commands to the toolbar
    const commands = commandRegistry;
    const {
      save,
      undo,
      redo,
      cutToolbar,
      copyToolbar,
      pasteToolbar
    } = CommandIDs;

    this.toolbar.addItem(
      'save',
      new CommandToolbarButton({ commands, id: save })
    );
    this.toolbar.addItem(
      'undo',
      new CommandToolbarButton({ commands, id: undo })
    );
    this.toolbar.addItem(
      'redo',
      new CommandToolbarButton({ commands, id: redo })
    );
    this.toolbar.addItem(
      'cut',
      new CommandToolbarButton({ commands, id: cutToolbar })
    );
    this.toolbar.addItem(
      'copy',
      new CommandToolbarButton({ commands, id: copyToolbar })
    );
    this.toolbar.addItem(
      'paste',
      new CommandToolbarButton({ commands, id: pasteToolbar })
    );

    /* possible feature
    const filterData = new FilterButton({ selected: content.delimiter });
    this.toolbar.addItem('filter-data', filterData);
    */

    this.toolbar.addItem('spacer', Toolbar.createSpacerItem());
    this.toolbar.addItem(
      'format-data',
      new ToolbarButton({
        label: 'Format Data',
        iconClass: 'jp-ToggleSwitch',
        tooltip: 'Click to format the data based on the column type',
        onClick: (): void => this.toggleDataDetection()
      })
    );
  }

extension: JupyterFrontEndPlugin<IFileBrowserFactory> = {
  id: EXTENSION_ID,
  provides: IFileBrowserFactory,
  requires: [IDocumentManager, ITranslator, ISettingRegistry],
  optional: [IStateDB],
  activate: async (
    app: JupyterFrontEnd,
    docManager: IDocumentManager,
    translator: ITranslator,
    settings: ISettingRegistry,
    state: IStateDB | null
  ): Promise<IFileBrowserFactory> => {
    const setting = await settings.load(SETTINGS_ID);

    const tracker = new WidgetTracker<FileTreeBrowser>({ namespace });
    const createFileBrowser = (
      id: string,
      options: IFileBrowserFactory.IOptions = {}
    ) => {
      const model = new FilterFileTreeBrowserModel({
        translator: translator,
        auto: options.auto ?? true,
        manager: docManager,
        driveName: options.driveName || '',
        refreshInterval: options.refreshInterval,
        state:
          options.state === null
            ? undefined
            : options.state || state || undefined
      });
      const widget = new FileTreeBrowser({
        id,
        model,
        restore: true,
        translator,
        app
      });

      widget.listing.singleClickToUnfold = setting.get('singleClickToUnfold')
        .composite as boolean;

      setting.changed.connect(() => {
        widget.listing.singleClickToUnfold = setting.get('singleClickToUnfold')
          .composite as boolean;
      });

      // Track the newly created file browser.
      void tracker.add(widget);

      return widget;
    };

    // Manually restore and load the default file browser.
    const defaultBrowser = createFileBrowser(EXTENSION_ID, {
      auto: false,
      restore: false
    });

    // TODO Remove this! Why is this needed?
    // The @jupyterlab/filebrowser-extension:launcher-toolbar-button extension should take care of this
    const { commands } = app;
    const trans = translator.load('jupyterlab');

    // Add a launcher toolbar item.
    const launcher = new ToolbarButton({
      icon: addIcon,
      onClick: () => {
        if (commands.hasCommand('launcher:create')) {
          return commands.execute('launcher:create');
        }
      },
      tooltip: trans.__('New Launcher'),
      actualOnClick: true
    });
    defaultBrowser.toolbar.insertItem(0, 'launch', launcher);

    return { createFileBrowser, defaultBrowser, tracker };
  }
}

createNew(
    panel: NotebookPanel,
    context: DocumentRegistry.IContext<INotebookModel>
  ): IDisposable {
    /**
     * Handler for the click event.
     */
    const onClickHandler = () => {
      // Check if we have already created stickyland
      const curPath = context.path;

      // Create it if we don't have it yet
      if (!this.stickyLandMap?.has(curPath)) {
        this.stickyLandMap?.set(curPath, new StickyLand(panel));
      }

      const curStickyLand = this.stickyLandMap?.get(curPath);

      // Check if we should show or hide this container
      if (curStickyLand?.isHidden()) {
        curStickyLand?.show();
      } else {
        curStickyLand?.hide();
      }

      // Alternative way to insert StickyLand to the notebook widget (boxLayout)
      // const stickyLand = new StickyLand();
      // const panelLayout = panel.layout as BoxLayout;
      // panelLayout.addWidget(stickyLand);
    };

    const button = new ToolbarButton({
      className: 'sticky-button',
      iconClass: 'far fa-sticky-note',
      onClick: onClickHandler,
      tooltip: 'Show/Hide StickyLand'
    });

    // const numItems = toArray(panel.toolbar.children()).length;
    const insertIndex = 10;
    panel.toolbar.insertItem(insertIndex, 'stickyLand', button);

    return new DisposableDelegate(() => {
      button.dispose();
    });
  }