@mwater/visualization 5.4.3 → 5.4.5

package/lib/quickfilter/Quickfilter.d.ts

@@ -3,7 +3,7 @@ import { Expr } from "@mwater/expressions";
   design is an array of quick filters (user-selectable filters).
   */
 export interface Quickfilter {
-    /** Optional id for the quickfilter. If not present, a random id will be generated the first time the quickfilter is modified. */
+    /** Optional id for the quickfilter. If not present, a random id will be generated the first time the quickfilter is edited. */
     id?: string;
     /** filter expression (left hand side only. Usually enum, enumset, text, date, datetime, id[], text[]) */
     expr: Expr;

package/lib/quickfilter/QuickfiltersDesignComponent.d.ts

@@ -11,11 +11,4 @@ export interface QuickfiltersDesignComponentProps {
     /** List of possible table ids to use */
     tables: string[];
 }
-export default class QuickfiltersDesignComponent extends React.Component<QuickfiltersDesignComponentProps> {
-    handleDesignChange: (design: Quickfilter[]) => void;
-    isMergeable(design: Quickfilter[], index: number): boolean;
-    renderQuickfilter: (item: Quickfilter, index: number) => React.JSX.Element;
-    handleAdd: () => void;
-    handleRemove: (index: number) => void;
-    render(): React.JSX.Element;
-}
+export default function QuickfiltersDesignComponent(props: QuickfiltersDesignComponentProps): React.JSX.Element;

package/lib/quickfilter/QuickfiltersDesignComponent.js

@@ -26,8 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = QuickfiltersDesignComponent;
 const lodash_1 = __importDefault(require("lodash"));
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const uuid_1 = __importDefault(require("uuid"));
 const immer_1 = require("immer");
 const expressions_ui_1 = require("@mwater/expressions-ui");
@@ -35,31 +36,37 @@ const expressions_1 = require("@mwater/expressions");
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const ListEditorComponent_1 = require("@mwater/react-library/lib/ListEditorComponent");
 // Displays quick filters and allows their value to be modified
-class QuickfiltersDesignComponent extends react_1.default.Component {
-    handleDesignChange = (design) => {
-        // Use immer produce to create immutable update
-        const newDesign = (0, immer_1.produce)(design, draft => {
-            // Add UUID if missing
-            for (let i = 0; i < draft.length; i++) {
-                if (!draft[i].id) {
-                    draft[i].id = uuid_1.default.v4();
+function QuickfiltersDesignComponent(props) {
+    // Add ids if not present
+    (0, react_1.useEffect)(() => {
+        if (props.design.some(qf => !qf.id)) {
+            const design = (0, immer_1.produce)(props.design, draft => {
+                for (let i = 0; i < draft.length; i++) {
+                    if (!draft[i].id) {
+                        draft[i].id = uuid_1.default.v4();
+                    }
                 }
-            }
+            });
+            props.onDesignChange(design);
+        }
+    }, [props.design]);
+    const handleDesignChange = (design) => {
+        const newDesign = (0, immer_1.produce)(design, draft => {
             // Update merged flag, clearing if not mergeable
             for (let i = 0; i < draft.length; i++) {
-                if (draft[i].merged && !this.isMergeable(draft, i)) {
+                if (draft[i].merged && !isMergeable(draft, i)) {
                     draft[i].merged = false;
                 }
             }
         });
-        this.props.onDesignChange(newDesign);
+        props.onDesignChange(newDesign);
     };
     // Determine if quickfilter at index is mergeable with previous (same type, id table and enum values)
-    isMergeable(design, index) {
+    const isMergeable = (design, index) => {
         if (index === 0) {
             return false;
         }
-        const exprUtils = new expressions_1.ExprUtils(this.props.schema);
+        const exprUtils = new expressions_1.ExprUtils(props.schema);
         const type = exprUtils.getExprType(design[index].expr);
         const prevType = exprUtils.getExprType(design[index - 1].expr);
         const idTable = exprUtils.getExprIdTable(design[index].expr);
@@ -81,33 +88,32 @@ class QuickfiltersDesignComponent extends react_1.default.Component {
             return false;
         }
         return true;
-    }
-    renderQuickfilter = (item, index) => {
-        return react_1.default.createElement(QuickfilterDesignComponent, { key: index, design: item, schema: this.props.schema, dataSource: this.props.dataSource, tables: this.props.tables, mergeable: this.isMergeable(this.props.design, index), onChange: (newItem) => {
-                const design = this.props.design.slice();
+    };
+    const renderQuickfilter = (item, index) => {
+        return react_1.default.createElement(QuickfilterDesignComponent, { key: index, design: item, schema: props.schema, dataSource: props.dataSource, tables: props.tables, mergeable: isMergeable(props.design, index), onChange: (newItem) => {
+                const design = props.design.slice();
                 design[index] = newItem;
-                return this.handleDesignChange(design);
-            }, onRemove: this.handleRemove.bind(null, index) });
+                handleDesignChange(design);
+            }, onRemove: () => handleRemove(index) });
     };
-    handleAdd = () => {
+    const handleAdd = () => {
         // Add blank to end
-        const design = this.props.design.concat([{ expr: null }]);
-        this.props.onDesignChange(design);
+        const design = (0, immer_1.produce)(props.design, draft => {
+            draft.push({ expr: null, id: uuid_1.default.v4() });
+        });
+        props.onDesignChange(design);
     };
-    handleRemove = (index) => {
-        const design = this.props.design.slice();
+    const handleRemove = (index) => {
+        const design = props.design.slice();
         design.splice(index, 1);
-        this.props.onDesignChange(design);
+        props.onDesignChange(design);
     };
-    render() {
-        return (react_1.default.createElement("div", null,
-            react_1.default.createElement(ListEditorComponent_1.ListEditorComponent, { items: this.props.design, onItemsChange: this.handleDesignChange, renderItem: this.renderQuickfilter, getReorderableKey: (item, index) => item.id || index }),
-            this.props.tables.length > 0 ? (react_1.default.createElement("button", { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd },
-                react_1.default.createElement("span", { className: "fas fa-plus me-1" }),
-                T `Add Quick Filter`)) : undefined));
-    }
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(ListEditorComponent_1.ListEditorComponent, { items: props.design, onItemsChange: handleDesignChange, renderItem: renderQuickfilter, getReorderableKey: (item, index) => item.id ?? index }),
+        props.tables.length > 0 ? (react_1.default.createElement("button", { type: "button", className: "btn btn-sm btn-link", onClick: handleAdd },
+            react_1.default.createElement("span", { className: "fas fa-plus me-1" }),
+            T `Add Quick Filter`)) : undefined));
 }
-exports.default = QuickfiltersDesignComponent;
 /** Single quickfilter design component */
 class QuickfilterDesignComponent extends react_1.default.Component {
     constructor(props) {
@@ -119,10 +125,9 @@ class QuickfilterDesignComponent extends react_1.default.Component {
     }
     handleTableChange = (table) => {
         this.setState({ table });
-        const design = {
-            expr: null
-        };
-        return this.props.onChange(design);
+        this.props.onChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.expr = null;
+        }));
     };
     handleExprChange = (expr) => {
         this.props.onChange((0, immer_1.produce)(this.props.design, draft => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.4.3",
+  "version": "5.4.5",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {

package/src/quickfilter/Quickfilter.ts

@@ -4,7 +4,7 @@ import { Expr } from "@mwater/expressions"
   design is an array of quick filters (user-selectable filters).
   */
 export interface Quickfilter {
-  /** Optional id for the quickfilter. If not present, a random id will be generated the first time the quickfilter is modified. */
+  /** Optional id for the quickfilter. If not present, a random id will be generated the first time the quickfilter is edited. */
   id?: string
 
   // `table`: (deprecated) table of filter

package/src/quickfilter/QuickfiltersDesignComponent.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash"
-import React from "react"
+import React, { useEffect, useState } from "react"
 import uuid from "uuid"
 import { produce } from "immer"
 import { ExprComponent } from "@mwater/expressions-ui"
@@ -20,35 +20,41 @@ export interface QuickfiltersDesignComponentProps {
 }
 
 // Displays quick filters and allows their value to be modified
-export default class QuickfiltersDesignComponent extends React.Component<QuickfiltersDesignComponentProps> {
-  handleDesignChange = (design: Quickfilter[]) => {
-    // Use immer produce to create immutable update
-    const newDesign = produce(design, draft => {
-      // Add UUID if missing
-      for (let i = 0; i < draft.length; i++) {
-        if (!draft[i].id) {
-          draft[i].id = uuid.v4()
+export default function QuickfiltersDesignComponent(props: QuickfiltersDesignComponentProps) {
+  // Add ids if not present
+  useEffect(() => {
+    if (props.design.some(qf => !qf.id)) {
+      const design = produce(props.design, draft => {
+        for (let i = 0; i < draft.length; i++) {
+          if (!draft[i].id) {
+            draft[i].id = uuid.v4()
+          }
         }
-      }
+      })
+      props.onDesignChange(design)
+    }
+  }, [props.design])
 
+  const handleDesignChange = (design: Quickfilter[]) => {
+    const newDesign = produce(design, draft => {
       // Update merged flag, clearing if not mergeable
       for (let i = 0; i < draft.length; i++) {
-        if (draft[i].merged && !this.isMergeable(draft, i)) {
+        if (draft[i].merged && !isMergeable(draft, i)) {
           draft[i].merged = false
         }
       }
     })
 
-    this.props.onDesignChange(newDesign)
+    props.onDesignChange(newDesign)
   }
 
   // Determine if quickfilter at index is mergeable with previous (same type, id table and enum values)
-  isMergeable(design: Quickfilter[], index: number) {
+  const isMergeable = (design: Quickfilter[], index: number) => {
     if (index === 0) {
       return false
     }
 
-    const exprUtils = new ExprUtils(this.props.schema)
+    const exprUtils = new ExprUtils(props.schema)
 
     const type = exprUtils.getExprType(design[index].expr)
     const prevType = exprUtils.getExprType(design[index - 1].expr)
@@ -81,53 +87,53 @@ export default class QuickfiltersDesignComponent extends React.Component<Quickfi
     return true
   }
 
-  renderQuickfilter = (item: Quickfilter, index: number) => {
+  const renderQuickfilter = (item: Quickfilter, index: number) => {
     return <QuickfilterDesignComponent
       key={index}
       design={item}
-      schema={this.props.schema}
-      dataSource={this.props.dataSource}
-      tables={this.props.tables}
-      mergeable={this.isMergeable(this.props.design, index)}
+      schema={props.schema}
+      dataSource={props.dataSource}
+      tables={props.tables}
+      mergeable={isMergeable(props.design, index)}
       onChange={(newItem: Quickfilter) => {
-        const design = this.props.design.slice()
+        const design = props.design.slice()
         design[index] = newItem
-        return this.handleDesignChange(design)
+        handleDesignChange(design)
       }}
-      onRemove={this.handleRemove.bind(null, index)}
+      onRemove={() => handleRemove(index)}
     />
   }
 
-  handleAdd = () => {
+  const handleAdd = () => {
     // Add blank to end
-    const design = this.props.design.concat([{ expr: null }])
-    this.props.onDesignChange(design)
+    const design = produce(props.design, draft => {
+      draft.push({ expr: null, id: uuid.v4() })
+    })
+    props.onDesignChange(design)
   }
 
-  handleRemove = (index: number) => {
-    const design = this.props.design.slice()
+  const handleRemove = (index: number) => {
+    const design = props.design.slice()
     design.splice(index, 1)
-    this.props.onDesignChange(design)
+    props.onDesignChange(design)
   }
 
-  render() {
-    return (
-      <div>
-        <ListEditorComponent
-          items={this.props.design}
-          onItemsChange={this.handleDesignChange}
-          renderItem={this.renderQuickfilter}
-          getReorderableKey={(item, index) => item.id || index}
-        />
-        {this.props.tables.length > 0 ? (
-          <button type="button" className="btn btn-sm btn-link" onClick={this.handleAdd}>
-            <span className="fas fa-plus me-1" />
-            {T`Add Quick Filter`}
-          </button>
-        ) : undefined}
-      </div>
-    )
-  }
+  return (
+    <div>
+      <ListEditorComponent
+        items={props.design}
+        onItemsChange={handleDesignChange}
+        renderItem={renderQuickfilter}
+        getReorderableKey={(item, index) => item.id ?? index}
+      />
+      {props.tables.length > 0 ? (
+        <button type="button" className="btn btn-sm btn-link" onClick={handleAdd}>
+          <span className="fas fa-plus me-1" />
+          {T`Add Quick Filter`}
+        </button>
+      ) : undefined}
+    </div>
+  )
 }
 
 interface QuickfilterDesignComponentProps {
@@ -162,10 +168,9 @@ class QuickfilterDesignComponent extends React.Component<
 
   handleTableChange = (table: string) => {
     this.setState({ table })
-    const design = {
-      expr: null
-    }
-    return this.props.onChange(design)
+    this.props.onChange(produce(this.props.design, draft => {
+      draft.expr = null
+    }))
   }
 
   handleExprChange = (expr: Expr) => {