@mwater/visualization 5.0.0

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

@@ -0,0 +1,291 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 uuid_1 = __importDefault(require("uuid"));
+const expressions_1 = require("@mwater/expressions");
+const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const expressions_ui_2 = require("@mwater/expressions-ui");
+const OrderingsComponent_1 = __importDefault(require("./OrderingsComponent"));
+const TableSelectComponent_1 = __importDefault(require("../../../TableSelectComponent"));
+const ReorderableListComponent_1 = __importDefault(require("@mwater/react-library/lib/reorderable/ReorderableListComponent"));
+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"));
+class TableChartDesignerComponent extends react_1.default.Component {
+    // Updates design with the specified changes
+    updateDesign(changes) {
+        const design = lodash_1.default.extend({}, this.props.design, changes);
+        this.props.onDesignChange(design);
+    }
+    handleTitleTextChange = (ev) => {
+        this.updateDesign({ titleText: ev.target.value });
+    };
+    handleTableChange = (table) => {
+        this.updateDesign({ table });
+    };
+    handleFilterChange = (filter) => {
+        this.updateDesign({ filter });
+    };
+    handleOrderingsChange = (orderings) => {
+        this.updateDesign({ orderings });
+    };
+    handleLimitChange = (limit) => {
+        this.updateDesign({ limit });
+    };
+    handleColumnChange = (index, column) => {
+        const columns = this.props.design.columns.slice();
+        columns[index] = column;
+        this.updateDesign({ columns });
+    };
+    handleRemoveColumn = (index) => {
+        const columns = this.props.design.columns.slice();
+        columns.splice(index, 1);
+        this.updateDesign({ columns });
+    };
+    handleAddColumn = () => {
+        const columns = this.props.design.columns.slice();
+        columns.push({ id: (0, uuid_1.default)() });
+        this.updateDesign({ columns });
+    };
+    renderTable() {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, {
+            schema: this.props.schema,
+            value: this.props.design.table,
+            onChange: this.handleTableChange,
+            filter: this.props.design.filter,
+            onFilterChange: this.handleFilterChange
+        }));
+    }
+    renderTitle() {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Title"), R("input", {
+            type: "text",
+            className: "form-control form-control-sm",
+            value: this.props.design.titleText,
+            onChange: this.handleTitleTextChange,
+            placeholder: "Untitled"
+        }));
+    }
+    renderColumn = (column, index, connectDragSource, connectDragPreview, connectDropTarget) => {
+        const style = {
+            borderTop: "solid 1px #EEE",
+            paddingTop: 10,
+            paddingBottom: 10
+        };
+        return connectDragPreview(connectDropTarget(R("div", { key: index, style }, react_1.default.createElement(TableChartColumnDesignerComponent, {
+            design: this.props.design,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            index,
+            onChange: this.handleColumnChange.bind(null, index),
+            onRemove: this.handleRemoveColumn.bind(null, index),
+            connectDragSource
+        }))));
+    };
+    handleReorder = (map) => {
+        return this.updateDesign({ columns: map });
+    };
+    renderColumns() {
+        if (!this.props.design.table) {
+            return;
+        }
+        return R("div", null, R(ReorderableListComponent_1.default, {
+            items: this.props.design.columns,
+            onReorder: this.handleReorder,
+            renderItem: this.renderColumn,
+            getItemId: (item) => item.id
+        }), R("button", { className: "btn btn-secondary btn-sm", type: "button", onClick: this.handleAddColumn }, R("span", { className: "fas fa-plus" }), " Add Column"));
+    }
+    // return R 'div', className: "form-group",
+    //   _.map(@props.design.columns, (column, i) => @renderColumn(i))
+    //
+    renderOrderings() {
+        // If no table, hide
+        if (!this.props.design.table) {
+            return null;
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-sort-amount-down" }), " ", "Ordering"), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(OrderingsComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            orderings: this.props.design.orderings,
+            onOrderingsChange: this.handleOrderingsChange,
+            table: this.props.design.table
+        })));
+    }
+    renderFilter() {
+        // If no table, hide
+        if (!this.props.design.table) {
+            return null;
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", "Filters"), R("div", { style: { marginLeft: 8 } }, react_1.default.createElement(expressions_ui_2.FilterExprComponent, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            onChange: this.handleFilterChange,
+            table: this.props.design.table,
+            value: this.props.design.filter
+        })));
+    }
+    renderLimit() {
+        // If no table, hide
+        if (!this.props.design.table) {
+            return null;
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Maximum Number of Rows (up to 1000)"), R("div", { style: { marginLeft: 8 } }, R(ui.NumberInput, {
+            value: this.props.design.limit,
+            onChange: this.handleLimitChange,
+            decimal: false,
+            placeholder: "1000"
+        })));
+    }
+    render() {
+        return R("div", null, this.renderTable(), this.renderColumns(), this.props.design.table ? R("hr") : undefined, this.renderOrderings(), this.renderFilter(), this.renderLimit(), R("hr"), this.renderTitle());
+    }
+}
+exports.default = TableChartDesignerComponent;
+class TableChartColumnDesignerComponent extends react_1.default.Component {
+    static contextTypes = { locale: prop_types_1.default.string };
+    // Updates column with the specified changes
+    updateColumn(changes) {
+        const column = lodash_1.default.extend({}, this.props.design.columns[this.props.index], changes);
+        return this.props.onChange(column);
+    }
+    updateTextAxis(changes) {
+        const textAxis = lodash_1.default.extend({}, this.props.design.columns[this.props.index].textAxis, changes);
+        return this.updateColumn({ textAxis });
+    }
+    handleExprChange = (expr) => {
+        return this.updateTextAxis({ expr });
+    };
+    handleHeaderTextChange = (ev) => {
+        return this.updateColumn({ headerText: ev.target.value });
+    };
+    handleAggrChange = (aggr) => {
+        return this.updateTextAxis({ aggr });
+    };
+    handleFormatChange = (ev) => {
+        return this.updateColumn({ format: ev.target.value });
+    };
+    renderRemove() {
+        if (this.props.design.columns.length > 1) {
+            return R("button", { className: "btn btn-sm btn-link float-end", type: "button", onClick: this.props.onRemove }, R("span", { className: "fas fa-times" }));
+        }
+        return null;
+    }
+    renderExpr() {
+        const column = this.props.design.columns[this.props.index];
+        const title = "Value";
+        return R("div", null, R("label", { className: "text-muted" }, title), ": ", react_1.default.createElement(expressions_ui_1.ExprComponent, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: this.props.design.table,
+            value: column.textAxis ? column.textAxis.expr : null,
+            onChange: this.handleExprChange,
+            aggrStatuses: ["literal", "individual", "aggregate"]
+        }));
+    }
+    renderFormat() {
+        const column = this.props.design.columns[this.props.index];
+        // Get type
+        const exprUtils = new expressions_1.ExprUtils(this.props.schema);
+        const exprType = exprUtils.getExprType(column.textAxis?.expr ?? null);
+        if (!exprType) {
+            return null;
+        }
+        const formats = (0, valueFormatter_1.getFormatOptions)(exprType);
+        if (!formats) {
+            return null;
+        }
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Format"), ": ", R("select", {
+            value: column.format != null ? column.format : (0, valueFormatter_2.getDefaultFormat)(exprType),
+            className: "form-select",
+            style: { width: "auto", display: "inline-block" },
+            onChange: this.handleFormatChange
+        }, lodash_1.default.map(formats, (format) => R("option", { key: format.value, value: format.value }, format.label))));
+    }
+    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) : "";
+        return R("div", null, R("label", { className: "text-muted" }, "Header"), ": ", R("input", {
+            type: "text",
+            className: "form-control form-control-sm",
+            style: { display: "inline-block", width: "15em" },
+            value: column.headerText,
+            onChange: this.handleHeaderTextChange,
+            placeholder
+        }));
+    }
+    renderSummarize() {
+        const column = this.props.design.columns[this.props.index];
+        const exprUtils = new expressions_1.ExprUtils(this.props.schema);
+        const exprType = exprUtils.getExprType(column.textAxis?.expr ?? null);
+        if (!exprType || exprType !== 'number') {
+            return null;
+        }
+        return R('div', null, R(ui.Checkbox, { value: column.summarize, inline: true, onChange: (summarize) => this.updateColumn({ summarize, summaryType: column.summaryType ?? 'sum' }) }, "Summarize"), column.summarize ?
+            R('div', null, R("label", { className: "text-muted" }, "Summary Type"), ": ", R(ui.Select, {
+                inline: true,
+                value: column.summaryType,
+                onChange: (summaryType) => this.updateColumn({ summaryType }),
+                options: [{ value: 'avg', label: 'Average' }, { value: 'sum', label: 'Sum' }, { value: 'min', label: 'Minimum' }, { value: 'max', label: 'Maximum' }]
+            })) : undefined);
+    }
+    renderBackgroundColorAxis() {
+        const column = this.props.design.columns[this.props.index];
+        if (!column.textAxis)
+            return null;
+        return R(ui.CollapsibleSection, {
+            label: "Background color by data",
+            labelMuted: true
+        }, R(AxisComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            table: this.props.design.table,
+            types: ["enum", "text", "boolean", "date"],
+            value: column.backgroundColorAxis,
+            onChange: (backgroundColorAxis) => this.updateColumn({ backgroundColorAxis }),
+            showColorMap: true,
+            aggrNeed: "optional"
+        }));
+    }
+    render() {
+        const iconStyle = {
+            cursor: "move",
+            marginRight: 8,
+            opacity: 0.5,
+            fontSize: 12,
+            height: 20
+        };
+        return R("div", null, this.props.connectDragSource(R("i", { className: "fa fa-bars", style: iconStyle })), this.renderRemove(), R("label", null, `Column ${this.props.index + 1}`), R("div", { style: { marginLeft: 5 } }, this.renderExpr(), this.renderFormat(), this.renderHeader(), this.renderSummarize(), this.renderBackgroundColorAxis()));
+    }
+}

package/lib/widgets/charts/table/TableChartViewComponent.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+export interface TableChartViewComponentProps {
+    /** Design of chart */
+    design: any;
+    /** Data that the table has requested */
+    data: any;
+    /** Schema to use */
+    schema: Schema;
+    dataSource: DataSource;
+    width?: number;
+    height?: number;
+    /** scope of the widget (when the widget self-selects a particular scope) */
+    scope?: any;
+    /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
+    onScopeChange?: any;
+    onRowClick?: any;
+}
+export default class TableChartViewComponent extends React.Component<TableChartViewComponentProps> {
+    shouldComponentUpdate(prevProps: TableChartViewComponentProps): boolean;
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            width: number | undefined;
+            height: number | undefined;
+        };
+        className: string;
+    }, HTMLElement>;
+}

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

@@ -0,0 +1,206 @@
+"use strict";
+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 moment_1 = __importDefault(require("moment"));
+const react_linkify_1 = __importDefault(require("react-linkify"));
+const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
+const expressions_1 = require("@mwater/expressions");
+const valueFormatter_1 = require("../../../valueFormatter");
+const color_1 = __importDefault(require("color"));
+class TableChartViewComponent extends react_1.default.Component {
+    shouldComponentUpdate(prevProps) {
+        return !lodash_1.default.isEqual(prevProps, this.props);
+    }
+    render() {
+        const style = {
+            width: this.props.width,
+            height: this.props.height
+        };
+        return R("div", { style, className: "overflow-auto-except-print" }, R("div", { style: { fontWeight: "bold", textAlign: "center" } }, this.props.design.titleText), R(TableContentsComponent, {
+            columns: this.props.design.columns,
+            table: this.props.design.table,
+            data: this.props.data,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            onRowClick: this.props.onRowClick
+        }));
+    }
+}
+exports.default = TableChartViewComponent;
+class TableContentsComponent extends react_1.default.Component {
+    static contextTypes = { locale: prop_types_1.default.string };
+    constructor(props) {
+        super(props);
+        this.state = {
+            sort: null,
+            data: props.data.main
+        };
+    }
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        this.setState({ data: this.sortData() });
+    }
+    sortData = () => {
+        if (!this.state.sort)
+            return this.props.data.main;
+        return lodash_1.default.sortByOrder(this.props.data.main, [`c${this.state.sort.column}`], [this.state.sort.direction]);
+    };
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        if (nextProps.columns !== this.props.columns && !lodash_1.default.isEqual(nextProps.columns, this.props.columns)) {
+            return true;
+        }
+        if (nextProps.data !== this.props.data && !lodash_1.default.isEqual(nextProps.data, this.props.data)) {
+            return true;
+        }
+        if (nextProps.schema !== this.props.schema) {
+            return true;
+        }
+        if (nextProps.schema !== this.props.schema) {
+            return true;
+        }
+        if (nextState.sort !== this.state.sort) {
+            return true;
+        }
+        if (nextState.data !== this.state.data && !lodash_1.default.isEqual(nextState.data, this.state.data)) {
+            return true;
+        }
+        return false;
+    }
+    handleRowClick = (rowIndex) => {
+        const row = this.state.data[rowIndex];
+        if (row && row.id && this.props.onRowClick) {
+            return this.props.onRowClick(this.props.table, row.id);
+        }
+    };
+    handleSort = (colIndex) => {
+        const currentSort = this.state.sort?.column === colIndex ? this.state.sort?.direction : null;
+        this.setState({
+            sort: {
+                column: colIndex,
+                direction: currentSort === "asc" ? "desc" : "asc"
+            }
+        });
+    };
+    renderHeaderCell(index) {
+        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) : "");
+        return R("th", {
+            key: index,
+            style: { cursor: "pointer" },
+            onClick: () => this.handleSort(index)
+        }, text, this.state.sort?.column === index
+            ? R("span", {
+                style: { marginLeft: 10 },
+                className: `fa ${this.state.sort?.direction === "asc" ? "fa-sort-asc" : "fa-sort-desc"}`
+            })
+            : undefined);
+    }
+    renderHeader() {
+        return R("thead", { key: "head" }, R("tr", { key: "head" }, lodash_1.default.map(this.props.columns, (column, i) => this.renderHeaderCell(i))));
+    }
+    renderFooterCell(index) {
+        const exprUtils = new expressions_1.ExprUtils(this.props.schema);
+        const column = this.props.columns[index];
+        if (!column.textAxis)
+            return null;
+        const exprType = exprUtils.getExprType(column.textAxis?.expr);
+        let node = null;
+        if (exprType && exprType == "number") {
+            node = `${lodash_1.default.capitalize(column.summaryType)}: ${(0, valueFormatter_1.formatValue)(exprType, this.props.data.summary[`c${index}`], column.format)}`;
+        }
+        return node;
+    }
+    renderFooter() {
+        if (!this.props.data.summary) {
+            return null;
+        }
+        return R("tfoot", { key: "foot" }, R("tr", { key: "foot" }, lodash_1.default.map(this.props.columns, (column, i) => R("th", { key: i }, this.renderFooterCell(i)))));
+    }
+    renderImage(id) {
+        const url = this.props.dataSource.getImageUrl(id);
+        return R("a", { href: url, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, "Image");
+    }
+    renderCell(rowIndex, columnIndex) {
+        const axisBuilder = new AxisBuilder_1.default({ schema: this.props.schema });
+        let node;
+        const row = this.state.data[rowIndex];
+        const column = this.props.columns[columnIndex];
+        // Set background color
+        let backgroundColor = "transparent";
+        let textColor = "#212529";
+        const exprUtils = new expressions_1.ExprUtils(this.props.schema);
+        if (!column.textAxis) {
+            node = null;
+        }
+        else {
+            const exprType = exprUtils.getExprType(column.textAxis.expr);
+            // Get value
+            let value = row[`c${columnIndex}`];
+            if (value == null) {
+                node = null;
+            }
+            else {
+                // Parse if should be JSON
+                if (["image", "imagelist", "geometry", "text[]"].includes(exprType || "") && lodash_1.default.isString(value)) {
+                    value = JSON.parse(value);
+                }
+                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);
+                        break;
+                    case "number":
+                    case "geometry":
+                        node = (0, valueFormatter_1.formatValue)(exprType, value, column.format);
+                        break;
+                    case "boolean":
+                    case "enum":
+                    case "enumset":
+                    case "text[]":
+                        node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale);
+                        break;
+                    case "date":
+                        node = (0, moment_1.default)(value, "YYYY-MM-DD").format("ll");
+                        break;
+                    case "datetime":
+                        node = (0, moment_1.default)(value, moment_1.default.ISO_8601).format("lll");
+                        break;
+                    case "image":
+                        node = this.renderImage(value.id);
+                        break;
+                    case "imagelist":
+                        node = lodash_1.default.map(value, (v) => this.renderImage(v.id));
+                        break;
+                    default:
+                        node = "" + value;
+                }
+            }
+        }
+        if (backgroundColor) {
+            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";
+        }
+        return R("td", { key: columnIndex, style: { backgroundColor, color: textColor } }, node);
+    }
+    renderRow(index) {
+        return R("tr", { key: index, onClick: this.handleRowClick.bind(null, index) }, lodash_1.default.map(this.props.columns, (column, i) => this.renderCell(index, i)));
+    }
+    renderBody() {
+        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());
+    }
+}

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter";
+export interface ExprInsertModalComponentProps {
+    /** Schema to use */
+    schema: Schema;
+    /** Data source to use to get values */
+    dataSource: DataSource;
+    /** Called with expr item to insert */
+    onInsert: (exprItem: HtmlItemExpr) => void;
+    singleRowTable?: string;
+}
+interface ExprInsertModalComponentState {
+    exprItem: HtmlItemExpr | null;
+    open: boolean;
+}
+export default class ExprInsertModalComponent extends React.Component<ExprInsertModalComponentProps, ExprInsertModalComponentState> {
+    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;
+}
+export {};

package/lib/widgets/text/ExprInsertModalComponent.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const uuid_1 = __importDefault(require("uuid"));
+const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
+const ExprItemEditorComponent_1 = __importDefault(require("./ExprItemEditorComponent"));
+// Modal that displays an expression builder
+class ExprInsertModalComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            open: false,
+            exprItem: null
+        };
+    }
+    open() {
+        this.setState({ open: true, exprItem: { type: "expr", id: (0, uuid_1.default)(), expr: null } });
+    }
+    handleInsert = () => {
+        if (!this.state.exprItem) {
+            return;
+        }
+        // Close first to avoid strange effects when mixed with pojoviews
+        this.setState({ open: false }, () => {
+            this.props.onInsert(this.state.exprItem);
+        });
+    };
+    render() {
+        if (!this.state.open) {
+            return null;
+        }
+        return R(ActionCancelModalComponent_1.default, {
+            actionLabel: "Insert",
+            onAction: this.handleInsert,
+            onCancel: () => this.setState({ open: false }),
+            title: "Insert Field",
+            size: "x-large"
+        }, R(ExprItemEditorComponent_1.default, {
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            exprItem: this.state.exprItem,
+            onChange: (exprItem) => this.setState({ exprItem }),
+            singleRowTable: this.props.singleRowTable
+        }));
+    }
+}
+exports.default = ExprInsertModalComponent;

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

@@ -0,0 +1,34 @@
+import React from "react";
+import { DataSource, Schema } from "@mwater/expressions";
+import { HtmlItemExpr } from "../../richtext/ExprItemsHtmlConverter";
+export interface ExprItemEditorComponentProps {
+    /** Schema to use */
+    schema: Schema;
+    /** Data source to use to get values */
+    dataSource: DataSource;
+    /** Expression item to edit */
+    exprItem: HtmlItemExpr;
+    /** Called with expr item */
+    onChange: (exprItem: HtmlItemExpr) => void;
+    singleRowTable?: string;
+}
+interface ExprItemEditorComponentState {
+    table: string;
+}
+export default class ExprItemEditorComponent extends React.Component<ExprItemEditorComponentProps, ExprItemEditorComponentState> {
+    constructor(props: any);
+    handleTableChange: (table: any) => void;
+    handleExprChange: (expr: any) => void;
+    handleIncludeLabelChange: (value: any) => void;
+    handleLabelTextChange: (ev: any) => void;
+    handleFormatChange: (ev: any) => void;
+    renderFormat(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement> | null;
+    render(): React.DetailedReactHTMLElement<{
+        style: {
+            paddingBottom: number;
+        };
+    }, HTMLElement>;
+}
+export {};