@mwater/visualization 5.1.0 → 5.3.0

package/lib/widgets/charts/pivot/PivotChartViewComponent.js

@@ -26,10 +26,8 @@ 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 lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
 const TextComponent_1 = __importDefault(require("../../text/TextComponent"));
 const PivotChartUtils = __importStar(require("./PivotChartUtils"));
@@ -37,9 +35,10 @@ const PivotChartLayoutComponent_1 = __importDefault(require("./PivotChartLayoutC
 const PivotChartLayoutBuilder_1 = __importDefault(require("./PivotChartLayoutBuilder"));
 const SegmentDesignerComponent_1 = __importDefault(require("./SegmentDesignerComponent"));
 const IntersectionDesignerComponent_1 = __importDefault(require("./IntersectionDesignerComponent"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 // Displays a pivot chart
 class PivotChartViewComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -128,78 +127,39 @@ class PivotChartViewComponent extends react_1.default.Component {
         return this.props.onDesignChange(design);
     };
     renderHeader() {
-        return R("div", { style: { paddingLeft: 10, paddingRight: 10 } }, R(TextComponent_1.default, {
-            design: this.props.design.header,
-            onDesignChange: this.props.onDesignChange ? this.handleHeaderChange : undefined,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            exprValues: this.props.data.header || {},
-            width: this.props.width
-        }));
+        return (react_1.default.createElement("div", { style: { paddingLeft: 10, paddingRight: 10 } },
+            react_1.default.createElement(TextComponent_1.default, { design: this.props.design.header, onDesignChange: this.props.onDesignChange ? this.handleHeaderChange : undefined, schema: this.props.schema, dataSource: this.props.dataSource, exprValues: this.props.data.header || {}, width: this.props.width })));
     }
     renderFooter() {
-        return R("div", { style: { paddingLeft: 10, paddingRight: 10 } }, R(TextComponent_1.default, {
-            design: this.props.design.footer,
-            onDesignChange: this.props.onDesignChange ? this.handleFooterChange : undefined,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            exprValues: this.props.data.footer || {},
-            width: this.props.width
-        }));
+        return (react_1.default.createElement("div", { style: { paddingLeft: 10, paddingRight: 10 } },
+            react_1.default.createElement(TextComponent_1.default, { design: this.props.design.footer, onDesignChange: this.props.onDesignChange ? this.handleFooterChange : undefined, schema: this.props.schema, dataSource: this.props.dataSource, exprValues: this.props.data.footer || {}, width: this.props.width })));
     }
     renderEditSegmentModal() {
         if (!this.state.editSegment) {
-            return;
+            return null;
         }
         const segmentType = PivotChartUtils.findSegment(this.props.design.rows, this.state.editSegment.id)
             ? "row"
             : "column";
-        return R(ActionCancelModalComponent_1.default, {
-            title: `Edit ${segmentType}`,
-            onAction: this.handleSaveEditSegment,
-            onCancel: this.handleCancelEditSegment,
-            size: "large"
-        }, R(SegmentDesignerComponent_1.default, {
-            segment: this.state.editSegment,
-            table: this.props.design.table,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            segmentType,
-            onChange: (segment) => this.setState({ editSegment: segment }),
-            filters: this.props.filters
-        }));
+        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { title: `Edit ${segmentType}`, onAction: this.handleSaveEditSegment, onCancel: this.handleCancelEditSegment, size: "large" },
+            react_1.default.createElement(SegmentDesignerComponent_1.default, { segment: this.state.editSegment, table: this.props.design.table, schema: this.props.schema, dataSource: this.props.dataSource, segmentType: segmentType, onChange: (segment) => this.setState({ editSegment: segment }), filters: this.props.filters })));
     }
     renderEditIntersectionModal() {
         if (!this.state.editIntersectionId) {
-            return;
+            return null;
         }
-        return R(ActionCancelModalComponent_1.default, {
-            title: "Edit Value",
-            onAction: this.handleSaveEditIntersection,
-            onCancel: this.handleCancelEditIntersection,
-            size: "large"
-        }, R(IntersectionDesignerComponent_1.default, {
-            intersection: this.state.editIntersection,
-            table: this.props.design.table,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            onChange: (intersection) => this.setState({ editIntersection: intersection }),
-            filters: this.props.filters
-        }));
+        return (react_1.default.createElement(ActionCancelModalComponent_1.default, { title: "Edit Value", onAction: this.handleSaveEditIntersection, onCancel: this.handleCancelEditIntersection, size: "large" },
+            react_1.default.createElement(IntersectionDesignerComponent_1.default, { design: this.props.design, intersectionId: this.state.editIntersectionId, intersection: this.state.editIntersection, table: this.props.design.table, schema: this.props.schema, dataSource: this.props.dataSource, onChange: (intersection) => this.setState({ editIntersection: intersection }), filters: this.props.filters })));
     }
     render() {
-        const layout = new PivotChartLayoutBuilder_1.default({ schema: this.props.schema }).buildLayout(this.props.design, this.props.data, this.context.locale);
-        return R("div", { style: { width: this.props.width, height: this.props.height } }, this.renderHeader(), this.renderEditSegmentModal(), this.renderEditIntersectionModal(), R("div", { key: "layout", style: { margin: 5, marginTop: 12, overflowX: "auto", padding: 7 } }, // Allow table to scroll since tables have hard minimum widths, Leave room for gear menu
-        R(PivotChartLayoutComponent_1.default, {
-            layout,
-            editable: this.props.onDesignChange != null,
-            onEditSection: this.props.onDesignChange != null ? this.handleEditSection : undefined,
-            onRemoveSegment: this.props.onDesignChange != null ? this.handleRemoveSegment : undefined,
-            onInsertBeforeSegment: this.props.onDesignChange != null ? this.handleInsertBeforeSegment : undefined,
-            onInsertAfterSegment: this.props.onDesignChange != null ? this.handleInsertAfterSegment : undefined,
-            onAddChildSegment: this.props.onDesignChange != null ? this.handleAddChildSegment : undefined,
-            onSummarizeSegment: this.props.onDesignChange != null ? this.handleSummarizeSegment : undefined
-        })), this.renderFooter());
+        const layout = new PivotChartLayoutBuilder_1.default({ schema: this.props.schema }).buildLayout(this.props.design, this.props.data, this.context);
+        return (react_1.default.createElement("div", { style: { width: this.props.width, height: this.props.height } },
+            this.renderHeader(),
+            this.renderEditSegmentModal(),
+            this.renderEditIntersectionModal(),
+            react_1.default.createElement("div", { key: "layout", style: { margin: 5, marginTop: 12, overflowX: "auto", padding: 7 } },
+                react_1.default.createElement(PivotChartLayoutComponent_1.default, { layout: layout, editable: this.props.onDesignChange != null, onEditSection: this.props.onDesignChange != null ? this.handleEditSection : undefined, onRemoveSegment: this.props.onDesignChange != null ? this.handleRemoveSegment : undefined, onInsertBeforeSegment: this.props.onDesignChange != null ? this.handleInsertBeforeSegment : undefined, onInsertAfterSegment: this.props.onDesignChange != null ? this.handleInsertAfterSegment : undefined, onAddChildSegment: this.props.onDesignChange != null ? this.handleAddChildSegment : undefined, onSummarizeSegment: this.props.onDesignChange != null ? this.handleSummarizeSegment : undefined })),
+            this.renderFooter()));
     }
 }
 exports.default = PivotChartViewComponent;

package/lib/widgets/charts/pivot/SegmentDesignerComponent.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import * as ui from "@mwater/react-library/lib/bootstrap";
 import { DataSource, Schema } from "@mwater/expressions";
 import { PivotChartSegment } from "./PivotChartDesign";
 export interface SegmentDesignerComponentProps {
@@ -27,70 +28,66 @@ export default class SegmentDesignerComponent extends React.Component<SegmentDes
     handleOrderExprChange: (orderExpr: any) => any;
     handleOrderDirChange: (orderDir: any) => any;
     renderMode(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     renderLabel(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-        help: string | undefined;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-        help: string | undefined;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     renderValueAxis(): React.JSX.Element;
     renderFilter(): React.CElement<{
-        labelMuted: boolean;
-        label: (string | React.CElement<{
-            id: string;
-        }, React.Component<{
-            id: string;
-        }, any, any>>)[];
-        hint: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: (string | React.CElement<{
-            id: string;
-        }, React.Component<{
-            id: string;
-        }, any, any>>)[];
-        hint: string;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     renderStyling(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     renderBorders(): React.CElement<{
-        labelMuted: boolean;
-        label: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: string;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     renderOrderExpr(): React.CElement<{
-        labelMuted: boolean;
-        label: (string | React.CElement<{
-            id: string;
-        }, React.Component<{
-            id: string;
-        }, any, any>>)[];
-        hint: string;
-    }, React.Component<{
-        labelMuted: boolean;
-        label: (string | React.CElement<{
-            id: string;
-        }, React.Component<{
-            id: string;
-        }, any, any>>)[];
-        hint: string;
-    }, any, any>>;
+        label: React.ReactNode;
+        labelMuted?: boolean | undefined;
+        hint?: React.ReactNode;
+        help?: React.ReactNode;
+        required?: boolean | undefined;
+        hasSuccess?: boolean | undefined;
+        hasWarnings?: boolean | undefined;
+        hasErrors?: boolean | undefined;
+    }, ui.FormGroup>;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
 }
 export {};

package/lib/widgets/charts/table/TableChart.js

@@ -149,10 +149,14 @@ class TableChart extends Chart_1.default {
                 // Convert to 4326 (lat/long). Force ::geometry for null
                 compiledExpr = {
                     type: "op",
-                    op: "ST_AsGeoJSON",
-                    exprs: [
-                        { type: "op", op: "ST_Transform", exprs: [{ type: "op", op: "::geometry", exprs: [compiledExpr] }, 4326] }
-                    ]
+                    op: "::jsonb",
+                    exprs: [{
+                            type: "op",
+                            op: "ST_AsGeoJSON",
+                            exprs: [
+                                { type: "op", op: "ST_Transform", exprs: [{ type: "op", op: "::geometry", exprs: [compiledExpr] }, 4326] }
+                            ]
+                        }]
                 };
             }
             query.selects.push({

package/lib/widgets/charts/table/TableChartDesignerComponent.js

@@ -26,7 +26,6 @@ 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 lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
@@ -42,6 +41,7 @@ const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const valueFormatter_1 = require("../../../valueFormatter");
 const valueFormatter_2 = require("../../../valueFormatter");
 const AxisComponent_1 = __importDefault(require("../../../axes/AxisComponent"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 class TableChartDesignerComponent extends react_1.default.Component {
     // Updates design with the specified changes
     updateDesign(changes) {
@@ -173,7 +173,7 @@ class TableChartDesignerComponent extends react_1.default.Component {
 }
 exports.default = TableChartDesignerComponent;
 class TableChartColumnDesignerComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     // Updates column with the specified changes
     updateColumn(changes) {
         const column = lodash_1.default.extend({}, this.props.design.columns[this.props.index], changes);
@@ -235,7 +235,7 @@ class TableChartColumnDesignerComponent extends react_1.default.Component {
     renderHeader() {
         const column = this.props.design.columns[this.props.index];
         const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });
-        const placeholder = column.textAxis ? axisBuilder.summarizeAxis(column.textAxis ?? null, this.context.locale) : "";
+        const placeholder = column.textAxis ? axisBuilder.summarizeAxis(column.textAxis ?? null, this.context) : "";
         return R("div", null, R("label", { className: "text-muted" }, "Header"), ": ", R("input", {
             type: "text",
             className: "form-control form-control-sm",

package/lib/widgets/charts/table/TableChartViewComponent.js

@@ -3,7 +3,6 @@ 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 lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
@@ -12,6 +11,7 @@ const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const expressions_1 = require("@mwater/expressions");
 const valueFormatter_1 = require("../../../valueFormatter");
 const color_1 = __importDefault(require("color"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 class TableChartViewComponent extends react_1.default.Component {
     shouldComponentUpdate(prevProps) {
         return !lodash_1.default.isEqual(prevProps, this.props);
@@ -33,7 +33,7 @@ class TableChartViewComponent extends react_1.default.Component {
 }
 exports.default = TableChartViewComponent;
 class TableContentsComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
+    static contextType = contexts_1.LocaleContext;
     constructor(props) {
         super(props);
         this.state = {
@@ -89,7 +89,7 @@ class TableContentsComponent extends react_1.default.Component {
         const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });
         const column = this.props.columns[index];
         //(this.state.sort?.direction === 'asc' ? "":"")
-        const text = column.headerText ?? (column.textAxis ? axisBuilder.summarizeAxis(column.textAxis, this.context.locale) : "");
+        const text = column.headerText ?? (column.textAxis ? axisBuilder.summarizeAxis(column.textAxis, this.context) : "");
         return R("th", {
             key: index,
             style: { cursor: "pointer" },
@@ -124,7 +124,7 @@ class TableContentsComponent extends react_1.default.Component {
     }
     renderImage(id) {
         const url = this.props.dataSource.getImageUrl(id);
-        return R("a", { href: url, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, "Image");
+        return R("a", { href: url, onClick: (e) => { e.stopPropagation(); }, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, "Image");
     }
     renderCell(rowIndex, columnIndex) {
         const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });
@@ -133,7 +133,7 @@ class TableContentsComponent extends react_1.default.Component {
         const column = this.props.columns[columnIndex];
         // Set background color
         let backgroundColor = "transparent";
-        let textColor = "#212529";
+        let textColor = "inherit";
         const exprUtils = new expressions_1.ExprUtils(this.props.schema);
         if (!column.textAxis) {
             node = null;
@@ -142,6 +142,9 @@ class TableContentsComponent extends react_1.default.Component {
             const exprType = exprUtils.getExprType(column.textAxis.expr);
             // Get value
             let value = row[`c${columnIndex}`];
+            if (column.backgroundColorAxis) {
+                backgroundColor = axisBuilder.getValueColor(column.backgroundColorAxis, row[`bc${columnIndex}`]) ?? "#fff";
+            }
             if (value == null) {
                 node = null;
             }
@@ -156,13 +159,12 @@ class TableContentsComponent extends react_1.default.Component {
                         value = null;
                     }
                 }
-                if (column.backgroundColorAxis && row[`bc${columnIndex}`] != null) {
-                    backgroundColor = axisBuilder.getValueColor(column.backgroundColorAxis, row[`bc${columnIndex}`]) ?? "#fff";
-                }
                 // Convert to node based on type
                 switch (exprType) {
                     case "text":
-                        node = R(react_linkify_1.default, { properties: { target: "_blank" } }, value);
+                        if (lodash_1.default.isString(value)) {
+                            node = R(react_linkify_1.default, { properties: { target: "_blank" } }, value);
+                        }
                         break;
                     case "number":
                     case "geometry":
@@ -170,21 +172,33 @@ class TableContentsComponent extends react_1.default.Component {
                         break;
                     case "boolean":
                     case "enum":
+                        node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context);
+                        break;
                     case "enumset":
                     case "text[]":
-                        node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale);
+                        if (lodash_1.default.isArray(value)) {
+                            node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context);
+                        }
                         break;
                     case "date":
-                        node = (0, valueFormatter_1.formatValue)(exprType, value, column.format);
+                        if (lodash_1.default.isString(value)) {
+                            node = (0, valueFormatter_1.formatValue)(exprType, value, column.format);
+                        }
                         break;
                     case "datetime":
-                        node = (0, valueFormatter_1.formatValue)(exprType, value, column.format);
+                        if (lodash_1.default.isString(value)) {
+                            node = (0, valueFormatter_1.formatValue)(exprType, value, column.format);
+                        }
                         break;
                     case "image":
-                        node = this.renderImage(value.id);
+                        if (lodash_1.default.isObject(value) && value.id != null) {
+                            node = this.renderImage(value.id);
+                        }
                         break;
                     case "imagelist":
-                        node = lodash_1.default.map(value, (v) => this.renderImage(v.id));
+                        if (lodash_1.default.isArray(value)) {
+                            node = lodash_1.default.map(value, (v) => this.renderImage(v.id));
+                        }
                         break;
                     default:
                         node = "" + value;
@@ -195,7 +209,7 @@ class TableContentsComponent extends react_1.default.Component {
             const c = (0, color_1.default)(backgroundColor);
             // Get lightness (taking into account alpha)
             const lightness = 1 - (1 - c.luminosity()) * c.alpha();
-            textColor = lightness < 0.3 ? "rgb(204,204,204)" : "#212529";
+            textColor = lightness < 0.3 ? "rgb(204,204,204)" : "inherit";
         }
         return R("td", { key: columnIndex, style: { backgroundColor, color: textColor } }, node);
     }
@@ -206,6 +220,6 @@ class TableContentsComponent extends react_1.default.Component {
         return R("tbody", { key: "body" }, lodash_1.default.map(this.state.data, (row, i) => this.renderRow(i)));
     }
     render() {
-        return R("table", { className: "mwater-visualization-table", style: { fontSize: "10pt", marginBottom: 0 } }, this.renderHeader(), this.renderBody(), this.renderFooter());
+        return R("table", { className: "mwater-visualization-table", style: { marginBottom: 0 } }, this.renderHeader(), this.renderBody(), this.renderFooter());
     }
 }

package/lib/widgets/text/ExprInsertModalComponent.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent";
 import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter";
 export interface ExprInsertModalComponentProps {
     /** Schema to use */
@@ -18,18 +19,6 @@ export default class ExprInsertModalComponent extends React.Component<ExprInsert
     constructor(props: ExprInsertModalComponentProps);
     open(): void;
     handleInsert: () => void;
-    render(): React.CElement<{
-        actionLabel: string;
-        onAction: () => void;
-        onCancel: () => void;
-        title: string;
-        size: string;
-    }, React.Component<{
-        actionLabel: string;
-        onAction: () => void;
-        onCancel: () => void;
-        title: string;
-        size: string;
-    }, any, any>> | null;
+    render(): React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent> | null;
 }
 export {};

package/lib/widgets/text/ExprUpdateModalComponent.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent";
 import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter";
 export interface ExprUpdateModalComponentProps {
     /** Schema to use */
@@ -16,18 +17,6 @@ interface ExprUpdateModalComponentState {
 export default class ExprUpdateModalComponent extends React.Component<ExprUpdateModalComponentProps, ExprUpdateModalComponentState> {
     constructor(props: any);
     open(item: any, onUpdate: any): void;
-    render(): React.CElement<{
-        actionLabel: string;
-        onAction: () => void;
-        onCancel: () => void;
-        title: string;
-        size: string;
-    }, React.Component<{
-        actionLabel: string;
-        onAction: () => void;
-        onCancel: () => void;
-        title: string;
-        size: string;
-    }, any, any>> | null;
+    render(): React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent> | null;
 }
 export {};

package/lib/widgets/text/TextComponent.d.ts

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types";
 import React from "react";
 import RichTextComponent from "../../richtext/RichTextComponent";
 import ExprInsertModalComponent from "./ExprInsertModalComponent";
@@ -25,9 +24,7 @@ export interface TextComponentProps {
     };
 }
 export default class TextComponent extends React.Component<TextComponentProps> {
-    static contextTypes: {
-        locale: PropTypes.Requireable<string>;
-    };
+    static contextType: React.Context<string>;
     exprInsertModal: ExprInsertModalComponent | null;
     exprUpdateModal: ExprUpdateModalComponent | null;
     editor: RichTextComponent | null;
@@ -36,13 +33,9 @@ export default class TextComponent extends React.Component<TextComponentProps> {
     handleInsertExpr: (item: any) => void;
     replaceItem(item: any): void;
     handleItemClick: (item: any) => void;
-    handleAddExpr: (ev: any) => void;
-    renderExtraPaletteButtons(): React.DetailedReactHTMLElement<{
-        key: string;
-        className: string;
-        onMouseDown: (ev: any) => void;
-    }, HTMLElement>;
-    renderModals(): (React.CElement<import("./ExprInsertModalComponent").ExprInsertModalComponentProps, ExprInsertModalComponent> | React.CElement<any, ExprUpdateModalComponent>)[];
+    handleAddExpr: (ev: React.MouseEvent<HTMLDivElement>) => void;
+    renderExtraPaletteButtons(): React.JSX.Element;
+    renderModals(): React.JSX.Element[];
     refRichTextComponent: (c: RichTextComponent | null) => void;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    render(): React.JSX.Element;
 }

package/lib/widgets/text/TextComponent.js

@@ -3,27 +3,26 @@ 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 lodash_1 = __importDefault(require("lodash"));
 const RichTextComponent_1 = __importDefault(require("../../richtext/RichTextComponent"));
 const ExprInsertModalComponent_1 = __importDefault(require("./ExprInsertModalComponent"));
 const ExprUpdateModalComponent_1 = __importDefault(require("./ExprUpdateModalComponent"));
 const ExprItemsHtmlConverter_1 = __importDefault(require("../../richtext/ExprItemsHtmlConverter"));
+const contexts_1 = require("@mwater/expressions-ui/lib/contexts");
 // Text component which is provided with the data it needs, rather than loading it.
 // Used by TextWidgetComponent and also by other components that embed text fields
 class TextComponent extends react_1.default.Component {
-    static contextTypes = { locale: prop_types_1.default.string };
-    exprInsertModal;
-    exprUpdateModal;
-    editor;
+    static contextType = contexts_1.LocaleContext;
+    exprInsertModal = null;
+    exprUpdateModal = null;
+    editor = null;
     createItemsHtmlConverter() {
         return new ExprItemsHtmlConverter_1.default(this.props.schema, this.props.onDesignChange != null, this.props.exprValues, 
         // Display summaries if in design more and singleRowTable is set
         this.props.onDesignChange != null && this.props.singleRowTable != null, 
         // Only replace named strings if not editing
-        this.props.onDesignChange == null ? this.props.namedStrings : undefined, this.context.locale);
+        this.props.onDesignChange == null ? this.props.namedStrings : undefined, this.context);
     }
     handleItemsChange = (items) => {
         const design = { ...this.props.design, items };
@@ -59,29 +58,18 @@ class TextComponent extends react_1.default.Component {
         return this.exprInsertModal.open();
     };
     renderExtraPaletteButtons() {
-        return R("div", { key: "expr", className: "mwater-visualization-text-palette-item", onMouseDown: this.handleAddExpr }, R("i", { className: "fa fa-plus" }), " Field");
+        return (react_1.default.createElement("div", { key: "expr", className: "mwater-visualization-text-palette-item", onMouseDown: this.handleAddExpr },
+            react_1.default.createElement("i", { className: "fa fa-plus" }),
+            " Expression"));
     }
     renderModals() {
         return [
-            R(ExprInsertModalComponent_1.default, {
-                key: "exprInsertModal",
-                ref: (c) => {
+            react_1.default.createElement(ExprInsertModalComponent_1.default, { key: "exprInsertModal", ref: (c) => {
                     this.exprInsertModal = c;
-                },
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                onInsert: this.handleInsertExpr,
-                singleRowTable: this.props.singleRowTable
-            }),
-            R(ExprUpdateModalComponent_1.default, {
-                key: "exprUpdateModal",
-                ref: (c) => {
+                }, schema: this.props.schema, dataSource: this.props.dataSource, onInsert: this.handleInsertExpr, singleRowTable: this.props.singleRowTable }),
+            react_1.default.createElement(ExprUpdateModalComponent_1.default, { key: "exprUpdateModal", ref: (c) => {
                     this.exprUpdateModal = c;
-                },
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                singleRowTable: this.props.singleRowTable
-            })
+                }, schema: this.props.schema, dataSource: this.props.dataSource, singleRowTable: this.props.singleRowTable })
         ];
     }
     refRichTextComponent = (c) => {
@@ -89,21 +77,13 @@ class TextComponent extends react_1.default.Component {
     };
     render() {
         const style = {
-            position: "relative"
+            position: "relative",
+            width: this.props.width,
+            height: this.props.height
         };
-        style.width = this.props.width;
-        style.height = this.props.height;
-        return R("div", null, this.renderModals(), R(RichTextComponent_1.default, {
-            ref: this.refRichTextComponent,
-            className: `mwater-visualization-text-widget-style-${this.props.design.style || "default"}`,
-            style,
-            items: this.props.design.items,
-            onItemsChange: this.props.onDesignChange ? this.handleItemsChange : undefined,
-            onItemClick: this.handleItemClick,
-            itemsHtmlConverter: this.createItemsHtmlConverter(),
-            includeHeadings: this.props.design.style === "default" || !this.props.design.style,
-            extraPaletteButtons: this.renderExtraPaletteButtons()
-        }));
+        return (react_1.default.createElement("div", null,
+            this.renderModals(),
+            react_1.default.createElement(RichTextComponent_1.default, { ref: this.refRichTextComponent, className: `mwater-visualization-text-widget-style-${this.props.design.style || "default"}`, style: style, items: this.props.design.items, onItemsChange: this.props.onDesignChange ? this.handleItemsChange : undefined, onItemClick: this.handleItemClick, itemsHtmlConverter: this.createItemsHtmlConverter(), includeHeadings: this.props.design.style === "default" || !this.props.design.style, extraPaletteButtons: this.renderExtraPaletteButtons() })));
     }
 }
 exports.default = TextComponent;

package/lib/widgets/text/TextWidget.d.ts

@@ -20,10 +20,11 @@ export default class TextWidget extends Widget {
             [key: string]: string;
         } | undefined;
         ref: ((widget: any) => void) | undefined;
+        refreshKey: any;
     }, any>;
     getData(design: any, schema: Schema, dataSource: DataSource, filters: JsonQLFilter[], callback: any): void;
     isAutoHeight(): boolean;
     getExprItems(items: HtmlItem[]): HtmlItemExpr[];
-    getFilterableTables(design: TextWidgetDesign, schema: Schema): string[];
+    getFilterableTables(design: TextWidgetDesign | undefined, schema: Schema): string[];
     getTOCEntries(design: any, namedStrings: any): any;
 }