@voila-dashboards/jupyterlab-gridstack
Version:
A gridstack-based template for [](https://github.com/voila-dashboards/voila).
75 lines (74 loc) • 3.28 kB
JavaScript
import { ReactWidget } from '@jupyterlab/apputils';
import * as React from 'react';
/**
* A ReactWidget to edit the dashboard notebook metadata.
*/
export class DashboardMetadataEditor extends ReactWidget {
/**
* Construct a `DashboardMetadataEditor`.
*
* @param info - The `DashboardView` info.
*/
constructor(info) {
super();
this._info = info;
}
/**
* Getter to obtain the new dashboard metadata info.
*/
get info() {
return this._info;
}
render() {
/**
* Handler for name input changes
*/
const handleName = (event) => {
this._info.name = event.target.value;
this.update();
};
/**
* Handler for margin input changes
*/
const handleMargin = (event) => {
this._info.cellMargin = parseInt(event.target.value, 10);
this.update();
};
/**
* Handler for height input changes
*/
const handleHeight = (event) => {
const height = parseInt(event.target.value, 10);
this._info.defaultCellHeight = height < 40 ? 40 : height;
this.update();
};
/**
* Handler for columns input changes
*/
const handleColumns = (event) => {
let col = parseInt(event.target.value, 10);
col = col > 12 ? 12 : col;
col = col < 1 ? 1 : col;
this._info.maxColumns = col;
this.update();
};
return (React.createElement("form", { className: "jp-Input-Dialog jp-Dialog-body" },
React.createElement("div", { className: "row" },
React.createElement("label", { className: "col-25" }, "Name:"),
React.createElement("input", { type: "text", name: "name", className: "jp-mod-styled col-75", value: this._info.name, onChange: handleName })),
React.createElement("div", { className: "row" },
React.createElement("label", { className: "col-25" }, "Type:"),
React.createElement("input", { type: "text", name: "name", className: "jp-mod-styled col-75", value: this._info.type, disabled: true })),
React.createElement("div", { className: "row" },
React.createElement("label", { className: "col-25" }, "Cell Margin:"),
React.createElement("input", { type: "number", name: "margin", className: "jp-mod-styled col-75", value: this._info.cellMargin, onChange: handleMargin })),
React.createElement("div", { className: "row" },
React.createElement("label", { className: "col-25" }, "Cell Height:"),
' ',
React.createElement("input", { type: "number", name: "height", className: "jp-mod-styled col-75", value: this._info.defaultCellHeight, onChange: handleHeight })),
React.createElement("div", { className: "row" },
React.createElement("label", { className: "col-25" }, "Number of columns:"),
' ',
React.createElement("input", { type: "number", name: "columns", className: "jp-mod-styled col-75", value: this._info.maxColumns, onChange: handleColumns, disabled: true }))));
}
}