@mwater/visualization 5.4.1 → 5.4.2

package/lib/datagrids/CellEditor.js

@@ -0,0 +1,223 @@
+"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 });
+exports.CellEditor = void 0;
+exports.canEditType = canEditType;
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importStar(require("react"));
+const expressions_1 = require("@mwater/expressions");
+const react_select_1 = __importDefault(require("react-select"));
+const react_datepicker_1 = __importDefault(require("react-datepicker"));
+require("react-datepicker/dist/react-datepicker.css");
+const moment_1 = __importDefault(require("moment"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
+/** Determine if type can be edited */
+function canEditType(type) {
+    return ["text", "number", "enum", "enumset", "boolean", "date", "datetime", "id", "id[]"].includes(type);
+}
+/** Cell editor for a cell of the grid */
+const CellEditor = (props) => {
+    const editorOptions = props.editorOptions;
+    const [value, setValue] = (0, react_1.useState)(props.initialValue);
+    const [valid, setValid] = (0, react_1.useState)(true);
+    // Hook save function
+    editorOptions.setSaveEdit(() => {
+        if (!valid) {
+            return Promise.resolve(false);
+        }
+        if (value == props.initialValue) {
+            return Promise.resolve(true);
+        }
+        return props.updateCellValue(value);
+    });
+    if (editorOptions.saving) {
+        return (react_1.default.createElement("div", { style: { backgroundColor: "#EEE", width: editorOptions.width, height: editorOptions.height, padding: 10 } },
+            react_1.default.createElement("i", { className: "fa fa-spinner fa-spin" })));
+    }
+    if (props.type == "text") {
+        return (react_1.default.createElement("input", { type: "text", value: value || "", className: "form-control", onChange: (ev) => {
+                setValue(ev.target.value || null);
+            }, onKeyDown: (ev) => {
+                if (ev.keyCode == 13) {
+                    editorOptions.onEndEdit();
+                }
+            }, style: { height: editorOptions.height }, ref: (node) => {
+                if (node) {
+                    setTimeout(() => {
+                        if (node) {
+                            node.focus();
+                        }
+                    }, 0);
+                }
+            } }));
+    }
+    if (props.type == "number") {
+        return (react_1.default.createElement(NumberInput, { value: value, onChange: setValue, onValid: setValid, height: editorOptions.height, onEnter: editorOptions.onEndEdit }));
+    }
+    if (props.type == "enum") {
+        return react_1.default.createElement(EnumEditor, { value: value, onChange: setValue, enumValues: props.enumValues, locale: props.locale });
+    }
+    if (props.type == "enumset") {
+        return react_1.default.createElement(EnumsetEditor, { value: value, onChange: setValue, enumValues: props.enumValues, locale: props.locale });
+    }
+    if (props.type == "boolean") {
+        return react_1.default.createElement(BooleanEditor, { value: value, onChange: setValue });
+    }
+    if (props.type == "date") {
+        return react_1.default.createElement(DateEditor, { value: value, onChange: setValue, locale: props.locale });
+    }
+    if (props.type == "datetime") {
+        return react_1.default.createElement(DatetimeEditor, { value: value, onChange: setValue, locale: props.locale });
+    }
+    if (props.type == "id") {
+        return (react_1.default.createElement(expressions_ui_1.IdLiteralComponent, { schema: props.schema, dataSource: props.dataSource, idTable: props.idTable, value: value, onChange: setValue }));
+    }
+    if (props.type == "id[]") {
+        return (react_1.default.createElement(expressions_ui_1.IdLiteralComponent, { schema: props.schema, dataSource: props.dataSource, idTable: props.idTable, value: value, onChange: setValue, multi: true }));
+    }
+    // if (props.type == "geometry") {
+    //   const str = value.type == "Point" ? `${value.coordinates[1].toFixed(6)} ${value.coordinates[0].toFixed(6)}` : value.type
+    //   return <div className="custom-table-grid-cell-text">
+    //     { str }
+    //   </div>
+    // }
+    // TODO
+    // text[]
+    // image
+    // imagelist
+    // json
+    return react_1.default.createElement("div", null);
+};
+exports.CellEditor = CellEditor;
+/** Number input that calls onChange when number is valid and updates valid status */
+const NumberInput = (props) => {
+    const [str, setStr] = (0, react_1.useState)(props.value != null ? props.value + "" : "");
+    const handleChange = (ev) => {
+        const text = ev.target.value;
+        setStr(text);
+        if (!text) {
+            props.onChange(null);
+            props.onValid(true);
+        }
+        else {
+            const num = parseFloat(text);
+            if (!isNaN(num)) {
+                props.onChange(num);
+                props.onValid(true);
+            }
+            else {
+                props.onValid(false);
+            }
+        }
+    };
+    return (react_1.default.createElement("input", { type: "number", value: str, className: "form-control", onChange: handleChange, style: { height: props.height }, onKeyDown: (ev) => {
+            if (ev.keyCode == 13) {
+                props.onEnter();
+            }
+        }, ref: (node) => {
+            if (node) {
+                setTimeout(() => {
+                    if (node) {
+                        node.focus();
+                    }
+                }, 0);
+            }
+        } }));
+};
+/** Editor for an enum value */
+const EnumEditor = (props) => {
+    const options = props.enumValues.map((v) => ({ label: expressions_1.ExprUtils.localizeString(v.name, props.locale), value: v.id }));
+    return (react_1.default.createElement(react_select_1.default, { options: options, isClearable: true, onChange: (opt) => props.onChange(opt ? opt.value : null), value: options.find((opt) => opt.value == props.value) || null, styles: {
+            // Keep menu above modal
+            menu: (style) => ({ ...style, zIndex: 2000 })
+        }, ref: (node) => {
+            if (node) {
+                setTimeout(() => {
+                    if (node) {
+                        node.focus();
+                    }
+                }, 0);
+            }
+        } }));
+};
+/** Editor for an enumset value */
+const EnumsetEditor = (props) => {
+    const options = props.enumValues.map((v) => ({ label: expressions_1.ExprUtils.localizeString(v.name, props.locale), value: v.id }));
+    const value = lodash_1.default.map(props.value || [], (v) => lodash_1.default.find(options, (o) => o.value == v)) || [];
+    return (react_1.default.createElement(react_select_1.default, { options: options, isClearable: true, isMulti: true, onChange: (opt) => {
+            props.onChange(opt && opt.length > 0 ? lodash_1.default.pluck(opt, "value") : null);
+        }, value: value, styles: {
+            // Keep menu above modal
+            menu: (style) => ({ ...style, zIndex: 2000 })
+        }, ref: (node) => {
+            if (node) {
+                setTimeout(() => {
+                    if (node) {
+                        node.focus();
+                    }
+                }, 0);
+            }
+        } }));
+};
+/** Editor for a boolean value */
+const BooleanEditor = (props) => {
+    const options = [
+        { label: T `True`, value: true },
+        { label: T `False`, value: false }
+    ];
+    return (react_1.default.createElement(react_select_1.default, { options: options, isClearable: true, onChange: (opt) => props.onChange(opt ? opt.value : null), value: options.find((opt) => opt.value == props.value) || null, styles: {
+            // Keep menu above modal
+            menu: (style) => ({ ...style, zIndex: 2000 })
+        }, ref: (node) => {
+            if (node) {
+                setTimeout(() => {
+                    if (node) {
+                        node.focus();
+                    }
+                }, 0);
+            }
+        } }));
+};
+/** Editor for a date */
+const DateEditor = (props) => {
+    const momentDate = props.value ? (0, moment_1.default)(props.value, "YYYY-MM-DD") : null;
+    const handleChange = (0, react_1.useCallback)((value) => {
+        props.onChange(value ? value.format("YYYY-MM-DD") : null);
+    }, [props.onChange]);
+    return (react_1.default.createElement("div", { style: { padding: 2 } },
+        react_1.default.createElement(react_datepicker_1.default, { isClearable: true, selected: momentDate, onChange: handleChange, dateFormat: "YYYY-MM-DD", className: "form-control", locale: props.locale })));
+};
+/** Editor for a date */
+const DatetimeEditor = (props) => {
+    const momentDate = props.value ? (0, moment_1.default)(props.value, moment_1.default.ISO_8601) : null;
+    const handleChange = (0, react_1.useCallback)((value) => {
+        props.onChange(value ? value.toISOString() : null);
+    }, [props.onChange]);
+    return (react_1.default.createElement("div", { style: { padding: 2 } },
+        react_1.default.createElement(react_datepicker_1.default, { fixedHeight: true, isClearable: true, selected: momentDate, onChange: handleChange, dateFormat: "YYYY-MM-DD HH:mm", className: "form-control", showTimeSelect: true, timeFormat: "HH:mm", locale: props.locale })));
+};

package/lib/datagrids/DatagridComponent.d.ts

@@ -1,17 +1,21 @@
 import React, { ReactNode } from "react";
-import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent";
 import { DataSource, Expr, Schema } from "@mwater/expressions";
-import DatagridViewComponent, { RowUpdate } from "./DatagridViewComponent";
-import FindReplaceModalComponent from "./FindReplaceModalComponent";
+import { RowUpdate } from "./DatagridViewComponent";
 import DatagridDataSource from "./DatagridDataSource";
 import { DatagridDesign, JsonQLFilter } from "..";
+export interface DatagridComponentRef {
+    getQuickfilterValues: () => any[];
+    getQuickfilterFilters: () => JsonQLFilter[];
+    reload: () => void;
+}
 export interface DatagridComponentProps {
-    /** schema to use */
+    /** Schema to use */
     schema: Schema;
-    /** dataSource to use */
+    /** Data source to use */
     dataSource: DataSource;
-    /** datagrid dataSource to use */
+    /** Datagrid data source to use */
     datagridDataSource: DatagridDataSource;
+    /** Design of datagrid to use */
     design: DatagridDesign;
     /** Called when design changes */
     onDesignChange?: (design: DatagridDesign) => void;
@@ -27,88 +31,15 @@ export interface DatagridComponentProps {
     onRowClick?: (tableId: string, rowId: any) => void;
     /** Called when row is double-clicked with (tableId, rowId) */
     onRowDoubleClick?: (tableId: string, rowId: any) => void;
+    /** Called when a set of rows is deleted with (tableId, rowIds). Can be cancelled via the abort signal */
+    onRowsDelete?: (tableId: string, rowIds: any[], signal: AbortSignal) => Promise<void>;
     /** Locked quickfilter values. See README in quickfilters */
     quickfilterLocks?: any[];
     filters?: JsonQLFilter[];
 }
-interface DatagridComponentState {
-    /** is design being edited */
-    editingDesign: boolean;
-    /** True if cells can be edited directly */
-    cellEditingEnabled: boolean;
-    /** Height of quickfilters */
-    quickfiltersHeight: number | null;
-    quickfiltersValues: null | any[];
-    refreshKey: number;
-    /** Number of rows */
-    numRows?: number;
-}
-export default class DatagridComponent extends React.Component<DatagridComponentProps, DatagridComponentState> {
-    datagridView?: DatagridViewComponent | null;
-    quickfilters?: HTMLElement | null;
-    findReplaceModal: FindReplaceModalComponent | null;
-    constructor(props: DatagridComponentProps);
-    reload(): void;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: DatagridComponentProps, prevState: DatagridComponentState): void;
-    loadRowCount(): void;
-    handleRefreshData: () => void;
-    updateHeight(): void;
-    getQuickfilterValues: () => any[];
-    getQuickfilterFilters: () => JsonQLFilter[];
-    handleCellEditingToggle: () => void;
-    handleEdit: () => void;
-    getCompiledFilters(): JsonQLFilter[];
-    renderCellEdit(): React.DetailedReactHTMLElement<{
-        key: string;
-        className: string;
-        onClick: () => void;
-    }, HTMLElement> | null;
-    renderEditButton(): React.DetailedReactHTMLElement<{
-        type: string;
-        className: string;
-        onClick: () => void;
-    }, HTMLElement> | null;
-    renderFindReplace(): React.DetailedReactHTMLElement<{
-        key: string;
-        className: string;
-        onClick: () => void;
-    }, HTMLElement> | null;
-    renderTitleBar(): React.DetailedReactHTMLElement<{
-        style: {
-            position: "absolute";
-            top: number;
-            left: number;
-            right: number;
-            height: number;
-            padding: number;
-        };
-    }, HTMLElement>;
-    renderQuickfilter(): React.DetailedReactHTMLElement<{
-        style: {
-            position: "absolute";
-            top: number;
-            left: number;
-            right: number;
-        };
-        ref: (c: HTMLElement | null) => void;
-    }, HTMLElement>;
-    renderEditor(): React.CElement<DatagridEditorComponentProps, DatagridEditorComponent> | undefined;
-    renderFindReplaceModal(filters: any): React.CElement<any, FindReplaceModalComponent>;
-    render(): React.FunctionComponentElement<React.ProviderProps<string>>;
-}
-interface DatagridEditorComponentProps {
-    schema: Schema;
-    dataSource: DataSource;
-    design: DatagridDesign;
-    onDesignChange: (design: DatagridDesign) => void;
-    onCancel: () => void;
-}
-/** Popup editor */
-declare class DatagridEditorComponent extends React.Component<DatagridEditorComponentProps, {
-    design: DatagridDesign;
-}> {
-    constructor(props: DatagridEditorComponentProps);
-    render(): React.CElement<import("@mwater/react-library/lib/ActionCancelModalComponent").ActionCancelModalComponentProps, ActionCancelModalComponent>;
-}
-export {};
+/**
+ * Datagrid with decorations
+ * Design should be cleaned already before being passed in (see DatagridUtils)
+ */
+declare const _default: React.ForwardRefExoticComponent<DatagridComponentProps & React.RefAttributes<DatagridComponentRef>>;
+export default _default;