@mwater/visualization 5.4.0 → 5.4.2

package/lib/widgets/MapWidget.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const lodash_1 = __importDefault(require("lodash"));
 const Widget_1 = __importDefault(require("./Widget"));
 const DropdownWidgetComponent_1 = __importDefault(require("./DropdownWidgetComponent"));
@@ -49,26 +48,16 @@ class MapWidget extends Widget_1.default {
     //  height: height in pixels on screen
     //  onRowClick: Called with (tableId, rowId) when item is clicked
     createViewElement(options) {
-        return react_1.default.createElement(MapWidgetComponent, {
-            schema: options.schema,
-            dataSource: options.dataSource,
-            widgetDataSource: options.widgetDataSource,
-            design: options.design,
-            onDesignChange: options.onDesignChange,
-            scope: options.scope,
-            filters: options.filters,
-            onScopeChange: options.onScopeChange,
-            width: options.width,
-            height: options.height,
-            onRowClick: options.onRowClick,
-            refreshKey: options.refreshKey
-        });
+        return react_1.default.createElement(MapWidgetComponent, { schema: options.schema, dataSource: options.dataSource, widgetDataSource: options.widgetDataSource, design: options.design, onDesignChange: options.onDesignChange, scope: options.scope, filters: options.filters, onScopeChange: options.onScopeChange, width: options.width, height: options.height, onRowClick: options.onRowClick, refreshKey: options.refreshKey, locale: options.locale, translate: options.translate });
     }
     // Get a list of table ids that can be filtered on
     getFilterableTables(design, schema) {
         // Get filterable tables
         return MapUtils.getFilterableTables(design, schema);
     }
+    getTranslatableStrings(design, schema) {
+        return MapUtils.getTranslatableStrings(design, schema);
+    }
 }
 exports.default = MapWidget;
 class MapWidgetComponent extends react_1.default.Component {
@@ -102,53 +91,31 @@ class MapWidgetComponent extends react_1.default.Component {
         // Require here to prevent server require problems
         const MapDesignerComponent = require("../maps/MapDesignerComponent").default;
         // Create editor
-        const editor = react_1.default.createElement(MapDesignerComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            design: this.state.editDesign,
-            onDesignChange: this.handleEditDesignChange,
-            filters: this.props.filters
-        });
+        const editor = react_1.default.createElement(MapDesignerComponent, { schema: this.props.schema, dataSource: this.props.dataSource, design: this.state.editDesign, onDesignChange: this.handleEditDesignChange, filters: this.props.filters });
         // Create map (maxing out at half of width of screen)
-        const width = Math.min(document.body.clientWidth / 2, this.props.width);
-        const height = (this.props.height * width) / this.props.width;
+        const width = Math.min(document.body.clientWidth / 2, this.props.width || 0);
+        const height = ((this.props.height || 0) * width) / (this.props.width || 1);
         const chart = this.renderContent(this.state.editDesign, this.handleEditDesignChange, width, height);
-        const content = R("div", { style: { height: "100%", width: "100%" } }, R("div", {
-            style: {
-                position: "absolute",
-                left: 0,
-                top: 0,
-                border: "solid 2px #EEE",
-                borderRadius: 8,
-                padding: 10,
-                width: width + 20,
-                height: height + 20
-            }
-        }, chart), R("div", { style: { width: "100%", height: "100%", paddingLeft: width + 40 } }, R("div", {
-            style: { width: "100%", height: "100%", overflowY: "auto", paddingLeft: 20, borderLeft: "solid 3px #AAA" }
-        }, editor)));
-        return react_1.default.createElement(ModalWindowComponent_1.default, {
-            isOpen: true,
-            onRequestClose: this.handleEndEditing
-        }, content);
+        const content = react_1.default.createElement("div", { style: { height: "100%", width: "100%" } },
+            react_1.default.createElement("div", { style: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    border: "solid 2px #EEE",
+                    borderRadius: 8,
+                    padding: 10,
+                    width: width + 20,
+                    height: height + 20
+                } }, chart),
+            react_1.default.createElement("div", { style: { width: "100%", height: "100%", paddingLeft: width + 40 } },
+                react_1.default.createElement("div", { style: { width: "100%", height: "100%", overflowY: "auto", paddingLeft: 20, borderLeft: "solid 3px #AAA" } }, editor)));
+        return react_1.default.createElement(ModalWindowComponent_1.default, { isOpen: true, onRequestClose: this.handleEndEditing }, content);
     }
     renderContent(design, onDesignChange, width, height) {
         // Require here to prevent server require problems
         const { MapViewComponent } = require("../maps/MapViewComponent");
-        return R("div", { style: { width, height, padding: 10 } }, react_1.default.createElement(MapViewComponent, {
-            schema: this.props.schema,
-            design,
-            dataSource: this.props.dataSource,
-            mapDataSource: this.props.widgetDataSource.getMapDataSource(design),
-            onDesignChange,
-            scope: this.props.scope,
-            onScopeChange: this.props.onScopeChange,
-            extraFilters: this.props.filters,
-            width: width - 20,
-            height: height - 20,
-            scrollWheelZoom: false, // Prevent accidental zooming
-            onRowClick: this.props.onRowClick
-        }));
+        return react_1.default.createElement("div", { style: { width, height, padding: 10 } },
+            react_1.default.createElement(MapViewComponent, { schema: this.props.schema, design: design, dataSource: this.props.dataSource, mapDataSource: this.props.widgetDataSource.getMapDataSource(design), onDesignChange: onDesignChange, scope: this.props.scope, onScopeChange: this.props.onScopeChange, extraFilters: this.props.filters, width: width - 20, height: height - 20, scrollWheelZoom: false, onRowClick: this.props.onRowClick, locale: this.props.locale, translate: this.props.translate }));
     }
     render() {
         const dropdownItems = [];
@@ -157,12 +124,8 @@ class MapWidgetComponent extends react_1.default.Component {
         }
         const handleDesignChange = (d) => this.setState({ transientDesign: d });
         // Wrap in a simple widget
-        return R("div", null, this.props.onDesignChange != null ? this.renderEditor() : undefined, 
-        // Use transient design (as it may be affected by toggling layers)
-        react_1.default.createElement(DropdownWidgetComponent_1.default, {
-            width: this.props.width,
-            height: this.props.height,
-            dropdownItems
-        }, this.renderContent(this.state.transientDesign, handleDesignChange, this.props.width, this.props.height)));
+        return react_1.default.createElement("div", null,
+            this.props.onDesignChange != null ? this.renderEditor() : undefined,
+            react_1.default.createElement(DropdownWidgetComponent_1.default, { width: this.props.width, height: this.props.height, dropdownItems: dropdownItems }, this.renderContent(this.state.transientDesign, handleDesignChange, this.props.width, this.props.height)));
     }
 }

package/lib/widgets/MarkdownWidget.d.ts

@@ -1,6 +1,9 @@
 import React from "react";
 import Widget, { CreateViewElementOptions } from "./Widget";
 import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent";
+/** Widget for displaying markdown. Deprecated. Use TextWidget instead.
+ * @deprecated
+*/
 export default class MarkdownWidget extends Widget {
     createViewElement(options: CreateViewElementOptions): React.CElement<any, MarkdownWidgetComponent>;
     isAutoHeight(): boolean;

package/lib/widgets/MarkdownWidget.js

@@ -10,6 +10,9 @@ const Widget_1 = __importDefault(require("./Widget"));
 const DropdownWidgetComponent_1 = __importDefault(require("./DropdownWidgetComponent"));
 const markdown_it_1 = __importDefault(require("markdown-it"));
 const ModalWindowComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalWindowComponent"));
+/** Widget for displaying markdown. Deprecated. Use TextWidget instead.
+ * @deprecated
+*/
 class MarkdownWidget extends Widget_1.default {
     // Creates a React element that is a view of the widget
     // options:

package/lib/widgets/TOCWidget.d.ts

@@ -1,32 +1,20 @@
-import PropTypes from "prop-types";
 import React from "react";
 import Widget, { CreateViewElementOptions } from "./Widget";
-import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent";
+import { Schema } from "@mwater/expressions";
+export interface TOCWidgetDesign {
+    /** Header text. Defaults to blank */
+    header?: string;
+    /** Border weight. Defaults to 0=None. 1=light, 2=medium, 3=heavy */
+    borderWeight?: number;
+    /** True/false for prepending numbering to entries (e.g. 3.4.1) */
+    numbering?: boolean;
+}
+/**
+ * Table of contents widget that displays the h1, h2, etc entries from all text fields in one widget
+ */
 export default class TOCWidget extends Widget {
-    createViewElement(options: CreateViewElementOptions): React.CElement<any, TOCWidgetComponent>;
+    /** Creates a React element that is a view of the widget */
+    createViewElement(options: CreateViewElementOptions): React.JSX.Element;
     isAutoHeight(): boolean;
+    getTranslatableStrings(design: TOCWidgetDesign, schema: Schema): string[];
 }
-declare class TOCWidgetComponent extends React.Component {
-    static propTypes: {
-        design: PropTypes.Validator<object>;
-        onDesignChange: PropTypes.Requireable<(...args: any[]) => any>;
-        width: PropTypes.Requireable<number>;
-        height: PropTypes.Requireable<number>;
-        tocEntries: PropTypes.Requireable<(PropTypes.InferProps<{
-            id: PropTypes.Requireable<any>;
-            widgetId: PropTypes.Validator<string>;
-            level: PropTypes.Validator<number>;
-            text: PropTypes.Validator<string>;
-        }> | null | undefined)[]>;
-        onScrollToTOCEntry: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    constructor(props: any);
-    handleStartEditing: () => void;
-    handleEndEditing: () => void;
-    renderEditor(): React.CElement<import("@mwater/react-library/lib/ModalPopupComponent").ModalPopupComponentProps, ModalPopupComponent> | null;
-    renderContent(): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-    render(): React.DetailedReactHTMLElement<{
-        onDoubleClick: () => void;
-    }, HTMLElement>;
-}
-export {};

package/lib/widgets/TOCWidget.js

@@ -26,146 +26,88 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const prop_types_1 = __importDefault(require("prop-types"));
-const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
+const react_1 = __importStar(require("react"));
 const lodash_1 = __importDefault(require("lodash"));
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
-const update_1 = __importDefault(require("@mwater/react-library/lib/update"));
 const Widget_1 = __importDefault(require("./Widget"));
 const DropdownWidgetComponent_1 = __importDefault(require("./DropdownWidgetComponent"));
 const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
-// Table of contents widget that displays the h1, h2, etc entries from all text fields in one widget
-// design is:
-//   header: text of header. Defaults to "Contents"
-//   borderWeight: border weight. Defaults to 0=None. 1=light, 2=medium, 3=heavy
-//   numbering: true/false for prepending numbering to entries (e.g. 3.4.1)
+const immer_1 = __importDefault(require("immer"));
+/**
+ * Table of contents widget that displays the h1, h2, etc entries from all text fields in one widget
+ */
 class TOCWidget extends Widget_1.default {
-    // Creates a React element that is a view of the widget
-    // options:
-    //  schema: schema to use
-    //  dataSource: data source to use
-    //  widgetDataSource: Gives data to the widget in a way that allows client-server separation and secure sharing. See definition in WidgetDataSource.
-    //  design: widget design
-    //  scope: scope of the widget (when the widget self-selects a particular scope)
-    //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
-    //  onScopeChange: called with scope of widget
-    //  onDesignChange: called with new design. null/undefined for readonly
-    //  width: width in pixels on screen
-    //  height: height in pixels on screen
-    //  tocEntries: entries in the table of contents
-    //  onScrollToTOCEntry: called with (widgetId, tocEntryId) to scroll to TOC entry
+    /** Creates a React element that is a view of the widget */
     createViewElement(options) {
-        return R(TOCWidgetComponent, {
-            design: options.design,
-            onDesignChange: options.onDesignChange,
-            width: options.width,
-            height: options.height,
-            tocEntries: options.tocEntries,
-            onScrollToTOCEntry: options.onScrollToTOCEntry
-        });
+        return react_1.default.createElement(TOCWidgetComponent, { design: options.design, onDesignChange: options.onDesignChange ?? undefined, width: options.width, height: options.height, tocEntries: options.tocEntries, onScrollToTOCEntry: options.onScrollToTOCEntry, translate: options.translate });
     }
     // Determine if widget is auto-height, which means that a vertical height is not required.
     isAutoHeight() {
         return true;
     }
+    getTranslatableStrings(design, schema) {
+        const strings = [];
+        if (design.header) {
+            strings.push(design.header);
+        }
+        return strings;
+    }
 }
 exports.default = TOCWidget;
-class TOCWidgetComponent extends react_1.default.Component {
-    static propTypes = {
-        design: prop_types_1.default.object.isRequired, // See Map Design.md
-        onDesignChange: prop_types_1.default.func, // Called with new design. null/undefined for readonly
-        width: prop_types_1.default.number,
-        height: prop_types_1.default.number,
-        tocEntries: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-            id: prop_types_1.default.any,
-            widgetId: prop_types_1.default.string.isRequired,
-            level: prop_types_1.default.number.isRequired,
-            text: prop_types_1.default.string.isRequired
-        })),
-        onScrollToTOCEntry: prop_types_1.default.func
-    };
-    constructor(props) {
-        super(props);
-        this.state = {
-            editing: false // true if editing
-        };
-    }
-    handleStartEditing = () => {
-        return this.setState({ editing: true });
+function TOCWidgetComponent(props) {
+    const { design, onDesignChange, width, height, tocEntries, onScrollToTOCEntry, translate } = props;
+    const [editing, setEditing] = (0, react_1.useState)(false);
+    const handleStartEditing = () => {
+        setEditing(true);
     };
-    handleEndEditing = () => {
-        return this.setState({ editing: false });
+    const handleEndEditing = () => {
+        setEditing(false);
     };
-    renderEditor() {
-        if (!this.state.editing) {
+    const renderEditor = () => {
+        if (!editing) {
             return null;
         }
         // Create editor
-        const editor = R(TOCWidgetDesignerComponent, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange
-        });
-        return R(ModalPopupComponent_1.default, {
-            showCloseX: true,
-            header: T `Table of Contents Options`,
-            onClose: this.handleEndEditing
-        }, editor);
-    }
-    renderContent() {
-        return R(TOCWidgetViewComponent, {
-            design: this.props.design,
-            onDesignChange: this.props.onDesignChange,
-            width: this.props.width,
-            height: this.props.height,
-            tocEntries: this.props.tocEntries,
-            onScrollToTOCEntry: this.props.onScrollToTOCEntry
-        });
-    }
-    render() {
-        const dropdownItems = [];
-        if (this.props.onDesignChange != null) {
-            dropdownItems.push({ label: T `Edit`, icon: "pencil", onClick: this.handleStartEditing });
-        }
-        // Wrap in a simple widget
-        return R("div", { onDoubleClick: this.handleStartEditing }, this.props.onDesignChange != null ? this.renderEditor() : undefined, R(DropdownWidgetComponent_1.default, {
-            width: this.props.width,
-            height: this.props.height,
-            dropdownItems
-        }, this.renderContent()));
+        const editor = react_1.default.createElement(TOCWidgetDesignerComponent, { design: design, onDesignChange: onDesignChange });
+        return react_1.default.createElement(ModalPopupComponent_1.default, { showCloseX: true, header: T `Table of Contents Options`, onClose: handleEndEditing }, editor);
+    };
+    const renderContent = () => {
+        return react_1.default.createElement(TOCWidgetViewComponent, { design: design, onDesignChange: onDesignChange, width: width, height: height, tocEntries: tocEntries, onScrollToTOCEntry: onScrollToTOCEntry, translate: translate });
+    };
+    const dropdownItems = [];
+    if (onDesignChange != null) {
+        dropdownItems.push({ label: T `Edit`, icon: "pencil", onClick: handleStartEditing });
     }
+    // Wrap in a simple widget
+    return react_1.default.createElement("div", { onDoubleClick: handleStartEditing },
+        onDesignChange != null ? renderEditor() : undefined,
+        react_1.default.createElement(DropdownWidgetComponent_1.default, { width: width, height: height, dropdownItems: dropdownItems }, renderContent()));
 }
 // Displays the contents of the widget
-class TOCWidgetViewComponent extends react_1.default.Component {
-    static propTypes = {
-        design: prop_types_1.default.object.isRequired, // Design of chart
-        onDesignChange: prop_types_1.default.func, // Called with new design. null/undefined for readonly
-        width: prop_types_1.default.number,
-        height: prop_types_1.default.number,
-        tocEntries: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-            id: prop_types_1.default.any,
-            widgetId: prop_types_1.default.string.isRequired,
-            level: prop_types_1.default.number.isRequired,
-            text: prop_types_1.default.string.isRequired
-        })),
-        onScrollToTOCEntry: prop_types_1.default.func
+function TOCWidgetViewComponent(props) {
+    const { design, onDesignChange, width, height, tocEntries, onScrollToTOCEntry, translate } = props;
+    const handleEntryClick = (tocEntry) => {
+        return onScrollToTOCEntry?.(tocEntry.widgetId, tocEntry.id);
     };
-    handleEntryClick = (tocEntry) => {
-        return this.props.onScrollToTOCEntry?.(tocEntry.widgetId, tocEntry.id);
-    };
-    renderTOCEntry(tocEntry, index) {
+    const renderTOCEntry = (tocEntry, index) => {
         // Find indentation number (e.g "1.3.2") by counting # backwards that are same level with no level lower
         let level;
         let indentation = "";
-        if (this.props.design.numbering) {
-            let asc, end;
-            for (level = 1, end = tocEntry.level, asc = 1 <= end; asc ? level <= end : level >= end; asc ? level++ : level--) {
+        if (design.numbering) {
+            // For each level up to the current entry's level
+            for (let level = 1; level <= tocEntry.level; level++) {
                 let value = 0;
-                for (let i2 = 0, end1 = index, asc1 = 0 <= end1; asc1 ? i2 <= end1 : i2 >= end1; asc1 ? i2++ : i2--) {
-                    if (this.props.tocEntries[i2].level === level) {
-                        value += 1;
+                // Count entries at this level up to current index
+                for (let i = 0; i <= index; i++) {
+                    const entry = tocEntries?.[i];
+                    if (!entry) {
+                        continue;
+                    }
+                    if (entry.level === level) {
+                        value++;
                     }
-                    else if (this.props.tocEntries[i2].level < level) {
+                    else if (entry.level < level) {
+                        // Reset counter when we hit a higher level
                         value = 0;
                     }
                 }
@@ -173,82 +115,64 @@ class TOCWidgetViewComponent extends react_1.default.Component {
             }
             indentation += " ";
         }
-        return R("div", { key: index, style: { paddingLeft: tocEntry.level * 8 - 8 } }, R("a", { className: "link-plain", onClick: this.handleEntryClick.bind(null, tocEntry) }, indentation, R("span", null, tocEntry.text)));
-    }
-    render() {
-        // Get border
-        const border = (() => {
-            switch (this.props.design.borderWeight) {
-                case 0:
-                    return "none";
-                case 1:
-                    return "solid 1px #f4f4f4";
-                case 2:
-                    return "solid 1px #ccc";
-                case 3:
-                    return "solid 1px #888";
-            }
-        })();
-        return R("div", {
-            style: {
-                width: this.props.width,
-                height: this.props.height,
-                border,
-                padding: 5,
-                margin: 1
-            }
-        }, 
-        // Render header
-        R("div", { style: { fontWeight: "bold" } }, this.props.design.header), lodash_1.default.map(this.props.tocEntries, (tocEntry, i) => {
-            return this.renderTOCEntry(tocEntry, i);
-        }), 
-        // Add placeholder if none and editable
-        this.props.onDesignChange && (this.props.tocEntries || []).length === 0
-            ? R("div", { className: "text-muted" }, T `Table of Contents will appear here as text blocks with headings are added to the dashboard`)
+        return react_1.default.createElement("div", { key: index, style: { paddingLeft: tocEntry.level * 8 - 8 } },
+            react_1.default.createElement("a", { className: "link-plain", onClick: () => handleEntryClick(tocEntry) },
+                indentation,
+                react_1.default.createElement("span", null, translate(tocEntry.text))));
+    };
+    // Get border
+    const border = (() => {
+        switch (design.borderWeight) {
+            case 0:
+                return "none";
+            case 1:
+                return "solid 1px #f4f4f4";
+            case 2:
+                return "solid 1px #ccc";
+            case 3:
+                return "solid 1px #888";
+        }
+    })();
+    return react_1.default.createElement("div", { style: {
+            width,
+            height,
+            border,
+            padding: 5,
+            margin: 1
+        } },
+        react_1.default.createElement("div", { style: { fontWeight: "bold" } }, design.header ? props.translate(design.header) : ""),
+        lodash_1.default.map(tocEntries || [], (tocEntry, i) => {
+            return renderTOCEntry(tocEntry, i);
+        }),
+        onDesignChange && (tocEntries || []).length === 0
+            ? react_1.default.createElement("div", { className: "text-muted" }, T `Table of Contents will appear here as text blocks with headings are added to the dashboard`)
             : undefined);
-    }
 }
 // Designer for TOC widget options
-class TOCWidgetDesignerComponent extends react_1.default.Component {
-    constructor(...args) {
-        super(...args);
-        this.update = this.update.bind(this);
-    }
-    static propTypes = {
-        design: prop_types_1.default.object.isRequired,
-        onDesignChange: prop_types_1.default.func.isRequired
-    };
+function TOCWidgetDesignerComponent(props) {
+    const { design, onDesignChange } = props;
     // Updates design with the specified changes
-    update() {
-        return (0, update_1.default)(this.props.design, this.props.onDesignChange, arguments);
-    }
-    handleMarkdownChange = (ev) => {
-        const design = lodash_1.default.extend({}, this.props.design, { markdown: ev.target.value });
-        return this.props.onDesignChange(design);
+    const handleUpdate = (field) => (value) => {
+        onDesignChange((0, immer_1.default)(design, draft => {
+            draft[field] = value;
+        }));
     };
-    render() {
-        return R("div", null, R(ui.FormGroup, { label: T `Header` }, R(ui.TextInput, { value: this.props.design.header || "", onChange: this.update("header"), placeholder: T `None` })), R(ui.FormGroup, { label: T `Border` }, R(BorderComponent, { value: this.props.design.borderWeight || 0, onChange: this.update("borderWeight") })), R(ui.FormGroup, { label: T `Numbering` }, R(ui.Radio, {
-            inline: true,
-            value: this.props.design.numbering || false,
-            radioValue: true,
-            onChange: this.update("numbering")
-        }, T `On`), R(ui.Radio, {
-            inline: true,
-            value: this.props.design.numbering || false,
-            radioValue: false,
-            onChange: this.update("numbering")
-        }, T `Off`)));
-    }
+    return react_1.default.createElement("div", null,
+        react_1.default.createElement(ui.FormGroup, { label: T `Header` },
+            react_1.default.createElement(ui.TextInput, { value: design.header || "", onChange: handleUpdate("header"), placeholder: T `None` })),
+        react_1.default.createElement(ui.FormGroup, { label: T `Border` },
+            react_1.default.createElement(BorderComponent, { value: design.borderWeight || 0, onChange: handleUpdate("borderWeight") })),
+        react_1.default.createElement(ui.FormGroup, { label: T `Numbering` },
+            react_1.default.createElement(ui.Radio, { inline: true, value: design.numbering || false, radioValue: true, onChange: handleUpdate("numbering") }, T `On`),
+            react_1.default.createElement(ui.Radio, { inline: true, value: design.numbering || false, radioValue: false, onChange: handleUpdate("numbering") }, T `Off`)));
 }
 // Allows setting border heaviness
-class BorderComponent extends react_1.default.Component {
-    static propTypes = {
-        value: prop_types_1.default.number,
-        defaultValue: prop_types_1.default.number,
-        onChange: prop_types_1.default.func.isRequired
-    };
-    render() {
-        const value = this.props.value != null ? this.props.value : this.props.defaultValue;
-        return R("div", null, R(ui.Radio, { inline: true, value, radioValue: 0, onChange: this.props.onChange }, T `None`), R(ui.Radio, { inline: true, value, radioValue: 1, onChange: this.props.onChange }, T `Light`), R(ui.Radio, { inline: true, value, radioValue: 2, onChange: this.props.onChange }, T `Medium`), R(ui.Radio, { inline: true, value, radioValue: 3, onChange: this.props.onChange }, T `Heavy`));
-    }
+function BorderComponent(props) {
+    const { value, defaultValue, onChange } = props;
+    const currentValue = value != null ? value : defaultValue;
+    return react_1.default.createElement("div", null,
+        react_1.default.createElement(ui.Radio, { inline: true, value: currentValue, radioValue: 0, onChange: onChange }, T `None`),
+        react_1.default.createElement(ui.Radio, { inline: true, value: currentValue, radioValue: 1, onChange: onChange }, T `Light`),
+        react_1.default.createElement(ui.Radio, { inline: true, value: currentValue, radioValue: 2, onChange: onChange }, T `Medium`),
+        react_1.default.createElement(ui.Radio, { inline: true, value: currentValue, radioValue: 3, onChange: onChange }, T `Heavy`));
 }

package/lib/widgets/Widget.d.ts

@@ -9,18 +9,16 @@ export interface CreateViewElementOptions {
     dataSource: DataSource;
     /** Gives data to the widget in a way that allows client-server separation and secure sharing. See definition in WidgetDataSource. **/
     widgetDataSource: WidgetDataSource;
-    /** widget design **/
-    design: object;
+    /** widget design */
+    design: any;
     /** scope of the widget (when the widget self-selects a particular scope) **/
     scope?: WidgetScope | null;
     /** array of filters to apply.**/
     filters: JsonQLFilter[];
     /** called with scope of widget **/
-    onScopeChange: (scope: WidgetScope | null) => void;
+    onScopeChange?: (scope: WidgetScope | null) => void;
     /** called with new design. null/undefined for readonly **/
-    onDesignChange?: {
-        (design: object): void;
-    } | null;
+    onDesignChange?: ((design: any) => void) | null;
     /** width in pixels on screen **/
     width?: number;
     /** height in pixels on screen **/
@@ -34,13 +32,24 @@ export interface CreateViewElementOptions {
         [key: string]: string;
     };
     /** Entries in the table of content */
-    tocEntries?: string[];
+    tocEntries?: TOCEntry[];
     /** the widget callback ref */
     widgetRef?: (widget: any) => void;
     /** called with (widgetId, tocEntryId) to scroll to TOC entry */
     onScrollToTOCEntry?: (widgetId: string, tocEntryId: string) => void;
     /** A key that changes when the widget should be refreshed */
     refreshKey?: any;
+    /** Locale to use for display */
+    locale: string;
+    /** Translate function to use for display. Returns same string when editing. */
+    translate: (input: string) => string;
+}
+/** An entry in the table of contents */
+export interface TOCEntry {
+    id: any;
+    widgetId: string;
+    level: number;
+    text: string;
 }
 export default class Widget {
     /** Creates a React element that is a view of the widget */
@@ -60,4 +69,6 @@ export default class Widget {
         text: string;
         level: number;
     }[];
+    /** Gets any strings that should be translated */
+    getTranslatableStrings(design: any, schema: Schema): string[];
 }

package/lib/widgets/Widget.js

@@ -29,5 +29,9 @@ class Widget {
     getTOCEntries(design, namedStrings) {
         return [];
     }
+    /** Gets any strings that should be translated */
+    getTranslatableStrings(design, schema) {
+        return [];
+    }
 }
 exports.default = Widget;

package/lib/widgets/WidgetScopesViewComponent.js

@@ -30,7 +30,7 @@ class WidgetScopesViewComponent extends react_1.default.Component {
         if (lodash_1.default.compact(lodash_1.default.values(scopes)).length === 0) {
             return null;
         }
-        return R("div", { className: "alert alert-info" }, R("span", { className: "fas fa-filter" }), T ` Filters: `, lodash_1.default.map(lodash_1.default.keys(scopes), (id) => this.renderScope(id, scopes[id])));
+        return R("div", { className: "alert alert-info" }, R("span", { className: "fas fa-filter" }), " ", T `Filters: `, lodash_1.default.map(lodash_1.default.keys(scopes), (id) => this.renderScope(id, scopes[id])));
     }
 }
 exports.default = WidgetScopesViewComponent;