@mwater/visualization 5.5.0 → 5.6.1

package/lib/quickfilter/QuickfiltersComponent.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
-import { DataSource, LocalizedString, Schema } from "@mwater/expressions";
-import IdArrayQuickfilterComponent from "./IdArrayQuickfilterComponent";
+import { DataSource, Schema } from "@mwater/expressions";
 import { Quickfilter, QuickfilterLock } from "./Quickfilter";
 import { QuickfiltersDataSource } from "./QuickfiltersDataSource";
 import { JsonQLFilter } from "..";
@@ -26,104 +25,6 @@ export interface QuickfiltersComponentProps {
 }
 /** Displays quick filters and allows their value to be modified */
 export default class QuickfiltersComponent extends React.Component<QuickfiltersComponentProps> {
-    renderQuickfilter(item: any, index: any): React.CElement<EnumQuickfilterComponentProps, EnumQuickfilterComponent> | React.CElement<TextQuickfilterComponentProps, TextQuickfilterComponent> | React.CElement<DateQuickfilterComponentProps, DateQuickfilterComponent> | React.CElement<import("./IdArrayQuickfilterComponent").IdArrayQuickfilterComponentProps, IdArrayQuickfilterComponent> | null;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            borderTop: string | undefined;
-            borderBottom: string;
-            padding: number;
-        };
-    }, HTMLElement> | null;
+    renderQuickfilter(item: Quickfilter, index: number): React.JSX.Element | null;
+    render(): React.JSX.Element | null;
 }
-interface EnumQuickfilterComponentProps {
-    label?: string;
-    schema: Schema;
-    /** true to display multiple values */
-    multi?: boolean;
-    /** Current value of quickfilter (state of filter selected) */
-    value?: any;
-    /** Called when value changes */
-    onValueChange?: any;
-    options: {
-        /** id of option */
-        id: string;
-        /** localized name */
-        name: LocalizedString;
-    }[];
-}
-/** Quickfilter for an enum */
-declare class EnumQuickfilterComponent extends React.Component<EnumQuickfilterComponentProps> {
-    static contextType: React.Context<string>;
-    handleSingleChange: (val: any) => any;
-    handleMultiChange: (val: any) => any;
-    renderSingleSelect(options: any[]): React.FunctionComponentElement<{
-        placeholder: string;
-        value: any;
-        options: any[];
-        isClearable: boolean;
-        onChange: (value: any) => any;
-        isDisabled: boolean;
-        styles: {
-            menu: (style: import("react-select").CSSObjectWithLabel) => import("react-select").CSSObjectWithLabel;
-        };
-    }>;
-    renderMultiSelect(options: any[]): React.FunctionComponentElement<{
-        placeholder: string;
-        value: any[];
-        isClearable: boolean;
-        isMulti: boolean;
-        options: any[];
-        onChange: ((val: any) => any) | undefined;
-        isDisabled: boolean;
-        styles: {
-            menu: (style: import("react-select").CSSObjectWithLabel) => import("react-select").CSSObjectWithLabel;
-        };
-    }>;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            display: "inline-block";
-            paddingRight: number;
-        };
-    }, HTMLElement>;
-}
-interface TextQuickfilterComponentProps {
-    label: string;
-    schema: Schema;
-    /** See QuickfiltersDataSource */
-    quickfiltersDataSource: QuickfiltersDataSource;
-    expr: any;
-    index: number;
-    /** Current value of quickfilter (state of filter selected) */
-    value?: any;
-    /** Called when value changes */
-    onValueChange?: any;
-    /** true to display multiple values */
-    multi?: boolean;
-    /** Filters to add to restrict quick filter data to */
-    filters?: JsonQLFilter[];
-}
-declare class TextQuickfilterComponent extends React.Component<TextQuickfilterComponentProps> {
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            display: "inline-block";
-            paddingRight: number;
-        };
-    }, HTMLElement>;
-}
-interface DateQuickfilterComponentProps {
-    label?: string;
-    schema: Schema;
-    expr: any;
-    /** Current value of quickfilter (state of filter selected) */
-    value?: any;
-    onValueChange: any;
-}
-declare class DateQuickfilterComponent extends React.Component<DateQuickfilterComponentProps> {
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            display: "inline-block";
-            paddingRight: number;
-        };
-    }, HTMLElement>;
-}
-export {};

package/lib/quickfilter/QuickfiltersComponent.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const react_select_1 = __importDefault(require("react-select"));
 const expressions_1 = require("@mwater/expressions");
 const expressions_2 = require("@mwater/expressions");
@@ -25,9 +24,10 @@ class QuickfiltersComponent extends react_1.default.Component {
         let values = this.props.values || [];
         let itemValue = values[index];
         // Translate label
-        const label = this.props.translate?.(item.label) ?? item.label;
+        const label = this.props.translate?.(item.label ?? "") ?? item.label ?? "";
+        const exprCleaner = new expressions_2.ExprCleaner(this.props.schema);
         // Clean expression first
-        const expr = new expressions_2.ExprCleaner(this.props.schema).cleanExpr(item.expr);
+        const expr = exprCleaner.cleanExpr(item.expr);
         // Do not render if nothing
         if (!expr) {
             return null;
@@ -37,6 +37,22 @@ class QuickfiltersComponent extends react_1.default.Component {
         if (!type) {
             return null;
         }
+        // If this quickfilter is text or text[] and has subsequent merged quickfilters, gather their expressions
+        let exprsToPass = [expr];
+        if (["text", "text[]"].includes(type)) {
+            for (let i2 = index + 1; i2 < this.props.design.length; i2++) {
+                const nextItem = this.props.design[i2];
+                if (nextItem.merged) {
+                    const cleaned = exprCleaner.cleanExpr(nextItem.expr);
+                    if (cleaned) {
+                        exprsToPass.push(cleaned);
+                    }
+                }
+                else {
+                    break;
+                }
+            }
+        }
         // Determine if locked
         const lock = lodash_1.default.find(this.props.locks || [], (lock) => lodash_1.default.isEqual(lock.expr, expr));
         if (lock) {
@@ -73,67 +89,19 @@ class QuickfiltersComponent extends react_1.default.Component {
         const otherQuickfilterFilters = compiler.compile(otherDesign, otherValues, otherLocks);
         const filters = (this.props.filters || []).concat(otherQuickfilterFilters);
         if (["enum", "enumset"].includes(type)) {
-            return R(EnumQuickfilterComponent, {
-                key: JSON.stringify(item),
-                label,
-                schema: this.props.schema,
-                options: new expressions_1.ExprUtils(this.props.schema).getExprEnumValues(expr),
-                value: itemValue,
-                onValueChange,
-                multi: item.multi
-            });
+            return react_1.default.createElement(EnumQuickfilterComponent, { key: JSON.stringify(item), label: label, schema: this.props.schema, options: new expressions_1.ExprUtils(this.props.schema).getExprEnumValues(expr), value: itemValue, onValueChange: onValueChange, multi: item.multi });
         }
         if (type === "text") {
-            return R(TextQuickfilterComponent, {
-                key: JSON.stringify(item),
-                index,
-                label,
-                expr,
-                schema: this.props.schema,
-                quickfiltersDataSource: this.props.quickfiltersDataSource,
-                value: itemValue,
-                onValueChange,
-                filters,
-                multi: item.multi
-            });
+            return react_1.default.createElement(TextQuickfilterComponent, { key: JSON.stringify(item), index: index, label: label, expr: exprsToPass, schema: this.props.schema, quickfiltersDataSource: this.props.quickfiltersDataSource, value: itemValue, onValueChange: onValueChange, filters: filters, multi: item.multi });
         }
         if (["date", "datetime"].includes(type)) {
-            return R(DateQuickfilterComponent, {
-                key: JSON.stringify(item),
-                label,
-                expr,
-                schema: this.props.schema,
-                value: itemValue,
-                onValueChange
-            });
+            return react_1.default.createElement(DateQuickfilterComponent, { key: JSON.stringify(item), label: label, expr: expr, schema: this.props.schema, value: itemValue, onValueChange: onValueChange });
         }
         if (type === "id[]") {
-            return R(IdArrayQuickfilterComponent_1.default, {
-                key: JSON.stringify(item),
-                index,
-                label,
-                expr,
-                schema: this.props.schema,
-                dataSource: this.props.dataSource,
-                value: itemValue,
-                onValueChange,
-                filters,
-                multi: item.multi
-            });
+            return react_1.default.createElement(IdArrayQuickfilterComponent_1.default, { key: JSON.stringify(item), index: index, label: label, expr: expr, schema: this.props.schema, dataSource: this.props.dataSource, value: itemValue, onValueChange: onValueChange, filters: filters, multi: item.multi });
         }
         if (type === "text[]") {
-            return R(TextArrayQuickfilterComponent, {
-                key: JSON.stringify(item),
-                index,
-                label,
-                expr,
-                schema: this.props.schema,
-                quickfiltersDataSource: this.props.quickfiltersDataSource,
-                value: itemValue,
-                onValueChange,
-                filters,
-                multi: item.multi
-            });
+            return react_1.default.createElement(TextArrayQuickfilterComponent, { key: JSON.stringify(item), index: index, label: label, expr: exprsToPass, schema: this.props.schema, quickfiltersDataSource: this.props.quickfiltersDataSource, value: itemValue, onValueChange: onValueChange, filters: filters, multi: item.multi });
         }
         return null;
     }
@@ -141,15 +109,14 @@ class QuickfiltersComponent extends react_1.default.Component {
         if (!this.props.design || this.props.design.length === 0) {
             return null;
         }
-        return R("div", {
-            style: {
+        return (react_1.default.createElement("div", { style: {
                 borderTop: !this.props.hideTopBorder ? "solid 1px #E8E8E8" : undefined,
                 borderBottom: "solid 1px #E8E8E8",
                 padding: 5
-            }
-        }, lodash_1.default.map(this.props.design, (item, i) => this.renderQuickfilter(item, i)), this.props.onHide
-            ? R("button", { className: "btn btn-sm btn-link", onClick: this.props.onHide }, R("i", { className: "fa fa-angle-double-up" }))
-            : undefined);
+            } },
+            lodash_1.default.map(this.props.design, (item, i) => this.renderQuickfilter(item, i)),
+            this.props.onHide ? (react_1.default.createElement("button", { className: "btn btn-sm btn-link", onClick: this.props.onHide },
+                react_1.default.createElement("i", { className: "fa fa-angle-double-up" }))) : undefined));
     }
 }
 exports.default = QuickfiltersComponent;
@@ -173,37 +140,20 @@ class EnumQuickfilterComponent extends react_1.default.Component {
         }
     };
     renderSingleSelect(options) {
-        return R(react_select_1.default, {
-            placeholder: T `All`,
-            value: lodash_1.default.findWhere(options, { value: this.props.value }) || null,
-            options,
-            isClearable: true,
-            onChange: (value) => {
+        return react_1.default.createElement(react_select_1.default, { placeholder: T `All`, value: lodash_1.default.findWhere(options, { value: this.props.value }) || null, options: options, isClearable: true, onChange: (value) => {
                 if (this.props.onValueChange) {
                     return this.handleSingleChange(value?.value);
                 }
-            },
-            isDisabled: this.props.onValueChange == null,
-            styles: {
+            }, isDisabled: this.props.onValueChange == null, styles: {
                 // Keep menu above fixed data table headers
                 menu: (style) => lodash_1.default.extend({}, style, { zIndex: 2000 })
-            }
-        });
+            } });
     }
     renderMultiSelect(options) {
-        return R(react_select_1.default, {
-            placeholder: T `All`,
-            value: lodash_1.default.map(this.props.value, (v) => lodash_1.default.find(options, (o) => o.value === v)),
-            isClearable: true,
-            isMulti: true,
-            options,
-            onChange: this.props.onValueChange ? this.handleMultiChange : undefined,
-            isDisabled: this.props.onValueChange == null,
-            styles: {
+        return react_1.default.createElement(react_select_1.default, { placeholder: T `All`, value: lodash_1.default.map(this.props.value, (v) => lodash_1.default.find(options, (o) => o.value === v)), isClearable: true, isMulti: true, options: options, onChange: this.props.onValueChange ? this.handleMultiChange : undefined, isDisabled: this.props.onValueChange == null, styles: {
                 // Keep menu above fixed data table headers
                 menu: (style) => lodash_1.default.extend({}, style, { zIndex: 2000 })
-            }
-        });
+            } });
     }
     render() {
         const options = lodash_1.default.map(this.props.options, (opt) => ({
@@ -214,46 +164,39 @@ class EnumQuickfilterComponent extends react_1.default.Component {
         let width = lodash_1.default.max(options, (o) => o.label.length)?.label?.length;
         width = width ? width * 8 + 120 : 280;
         const minWidth = width > 280 || this.props.multi ? "280px" : `${width}px`;
-        return R("div", { style: { display: "inline-block", paddingRight: 10 } }, this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined, R("div", { style: { display: "inline-block", minWidth, verticalAlign: "middle" } }, this.props.multi ? this.renderMultiSelect(options) : this.renderSingleSelect(options)), !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined);
+        return (react_1.default.createElement("div", { style: { display: "inline-block", paddingRight: 10 } },
+            this.props.label ? react_1.default.createElement("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined,
+            react_1.default.createElement("div", { style: { display: "inline-block", minWidth, verticalAlign: "middle" } }, this.props.multi ? this.renderMultiSelect(options) : this.renderSingleSelect(options)),
+            !this.props.onValueChange ? react_1.default.createElement("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined));
     }
 }
 // Quickfilter for a text value
 class TextQuickfilterComponent extends react_1.default.Component {
     render() {
-        return R("div", { style: { display: "inline-block", paddingRight: 10 } }, this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined, R("div", { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } }, R(TextLiteralComponent_1.default, {
-            value: this.props.value,
-            onChange: this.props.onValueChange,
-            schema: this.props.schema,
-            expr: this.props.expr,
-            index: this.props.index,
-            multi: this.props.multi,
-            quickfiltersDataSource: this.props.quickfiltersDataSource,
-            filters: this.props.filters
-        })), !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined);
+        return (react_1.default.createElement("div", { style: { display: "inline-block", paddingRight: 10 } },
+            this.props.label ? react_1.default.createElement("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined,
+            react_1.default.createElement("div", { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } },
+                react_1.default.createElement(TextLiteralComponent_1.default, { value: this.props.value, onChange: this.props.onValueChange, schema: this.props.schema, expr: this.props.expr, index: this.props.index, multi: this.props.multi, quickfiltersDataSource: this.props.quickfiltersDataSource, filters: this.props.filters })),
+            !this.props.onValueChange ? react_1.default.createElement("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined));
     }
 }
 // Quickfilter for a date value
 class DateQuickfilterComponent extends react_1.default.Component {
     render() {
-        return R("div", { style: { display: "inline-block", paddingRight: 10 } }, this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined, R("div", { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } }, R(DateExprComponent_1.default, {
-            datetime: new expressions_1.ExprUtils(this.props.schema).getExprType(this.props.expr) === "datetime",
-            value: this.props.value,
-            onChange: this.props.onValueChange
-        })), !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined);
+        return (react_1.default.createElement("div", { style: { display: "inline-block", paddingRight: 10 } },
+            this.props.label ? react_1.default.createElement("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined,
+            react_1.default.createElement("div", { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } },
+                react_1.default.createElement(DateExprComponent_1.default, { datetime: new expressions_1.ExprUtils(this.props.schema).getExprType(this.props.expr) === "datetime", value: this.props.value, onChange: this.props.onValueChange })),
+            !this.props.onValueChange ? react_1.default.createElement("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined));
     }
 }
 /** Quickfilter for a text value */
 class TextArrayQuickfilterComponent extends react_1.default.Component {
     render() {
-        return R("div", { style: { display: "inline-block", paddingRight: 10 } }, this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined, R("div", { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } }, R(TextLiteralComponent_1.default, {
-            value: this.props.value,
-            onChange: this.props.onValueChange,
-            schema: this.props.schema,
-            expr: this.props.expr,
-            index: this.props.index,
-            multi: this.props.multi,
-            quickfiltersDataSource: this.props.quickfiltersDataSource,
-            filters: this.props.filters
-        })), !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined);
+        return (react_1.default.createElement("div", { style: { display: "inline-block", paddingRight: 10 } },
+            this.props.label ? react_1.default.createElement("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined,
+            react_1.default.createElement("div", { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } },
+                react_1.default.createElement(TextLiteralComponent_1.default, { value: this.props.value, onChange: this.props.onValueChange, schema: this.props.schema, expr: this.props.expr, index: this.props.index, multi: this.props.multi, quickfiltersDataSource: this.props.quickfiltersDataSource, filters: this.props.filters })),
+            !this.props.onValueChange ? react_1.default.createElement("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined));
     }
 }

package/lib/quickfilter/TextLiteralComponent.d.ts

@@ -1,14 +1,19 @@
 import React from "react";
-import { Schema } from "@mwater/expressions";
+import { Expr, Schema } from "@mwater/expressions";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { QuickfiltersDataSource } from "./QuickfiltersDataSource";
 export interface TextLiteralComponentProps {
-    value?: any;
-    onChange?: any;
+    value?: string | string[] | null;
+    onChange?: (value: string | string[] | null) => void;
     schema: Schema;
     /** See QuickfiltersDataSource */
     quickfiltersDataSource: QuickfiltersDataSource;
-    expr: any;
+    /**
+     * One or more expressions whose values should be combined into a single option list.
+     * Each subsequent expression represents another quickfilter that is merged with this one.
+     * The first expression is the main quickfilter, and the subsequent expressions are merged with it.
+     */
+    expr: Expr[];
     index: number;
     /** true to display multiple values */
     multi?: boolean;
@@ -19,47 +24,18 @@ export interface TextLiteralComponentProps {
  * The expression can be type `text` or `text[]`
  */
 export default class TextLiteralComponent extends React.Component<TextLiteralComponentProps> {
-    handleSingleChange: (val: any) => any;
-    handleMultipleChange: (val: any) => any;
-    getOptions: (input: any, cb: any) => void;
-    renderSingle(): React.FunctionComponentElement<{
-        key: string;
-        placeholder: string;
-        value: {
-            value: any;
-            label: any;
-        } | null;
-        loadOptions: (input: any, cb: any) => void;
-        onChange: ((val: any) => any) | undefined;
-        isClearable: boolean;
-        defaultOptions: boolean;
-        isDisabled: boolean;
-        noOptionsMessage: () => string;
-        styles: {
-            menu: (style: import("react-select").CSSObjectWithLabel) => import("react-select").CSSObjectWithLabel;
-        };
-    }>;
-    renderMultiple(): React.FunctionComponentElement<{
-        placeholder: string;
-        value: {
-            value: unknown;
-            label: unknown;
-        }[] | null;
-        key: string;
-        isMulti: boolean;
-        loadOptions: (input: any, cb: any) => void;
-        defaultOptions: boolean;
-        onChange: ((val: any) => any) | undefined;
-        isClearable: boolean;
-        isDisabled: boolean;
-        noOptionsMessage: () => string;
-        styles: {
-            menu: (style: import("react-select").CSSObjectWithLabel) => import("react-select").CSSObjectWithLabel;
-        };
-    }>;
-    render(): React.DetailedReactHTMLElement<{
-        style: {
-            width: string;
-        };
-    }, HTMLElement>;
+    handleSingleChange: (val: any) => void | undefined;
+    handleMultipleChange: (val: any) => void | undefined;
+    /**
+     * Load the options for the select. If multiple expressions are supplied, each
+     * is queried independently and the union of the results (unique values) is
+     * returned.
+     */
+    getOptions: (input: string, cb: (rows: {
+        value: string;
+        label: string;
+    }[]) => void) => void;
+    renderSingle(): React.JSX.Element;
+    renderMultiple(): React.JSX.Element;
+    render(): React.JSX.Element;
 }