@mwater/visualization 5.4.0 → 5.4.2

package/lib/datagrids/DatagridComponent.js

@@ -1,11 +1,33 @@
 "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 lodash_1 = __importDefault(require("lodash"));
-const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
+const react_1 = __importStar(require("react"));
 const AutoSizeComponent_1 = __importDefault(require("@mwater/react-library/lib/AutoSizeComponent"));
 const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
 const expressions_1 = require("@mwater/expressions");
@@ -14,120 +36,186 @@ const expressions_3 = require("@mwater/expressions");
 const DatagridViewComponent_1 = __importDefault(require("./DatagridViewComponent"));
 const DatagridDesignerComponent_1 = __importDefault(require("./DatagridDesignerComponent"));
 const DatagridUtils_1 = __importDefault(require("./DatagridUtils"));
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
 const QuickfiltersComponent_1 = __importDefault(require("../quickfilter/QuickfiltersComponent"));
 const QuickfilterCompiler_1 = __importDefault(require("../quickfilter/QuickfilterCompiler"));
 const FindReplaceModalComponent_1 = __importDefault(require("./FindReplaceModalComponent"));
 const d3_format_1 = require("d3-format");
 const expressions_ui_1 = require("@mwater/expressions-ui");
-// Datagrid with decorations
-// See README.md for description of datagrid format
-// Design should be cleaned already before being passed in (see DatagridUtils)
-class DatagridComponent extends react_1.default.Component {
-    datagridView;
-    quickfilters;
-    findReplaceModal;
-    constructor(props) {
-        super(props);
-        this.state = {
-            editingDesign: false, // is design being edited
-            cellEditingEnabled: false, // True if cells can be edited directly
-            quickfiltersHeight: null, // Height of quickfilters
-            quickfiltersValues: null,
-            refreshKey: 1
-        };
-    }
-    reload() {
-        this.datagridView?.reload();
-    }
-    componentDidMount() {
-        this.loadRowCount();
-        this.updateHeight();
-    }
-    componentDidUpdate(prevProps, prevState) {
-        if (!lodash_1.default.isEqual(prevProps.design, this.props.design) || !lodash_1.default.isEqual(prevState.quickfiltersValues, this.state.quickfiltersValues) || prevState.refreshKey !== this.state.refreshKey) {
-            this.loadRowCount();
-        }
-        this.updateHeight();
-    }
-    loadRowCount() {
-        if (!this.props.design.showNumRows) {
+const IdSelection_1 = __importDefault(require("../IdSelection"));
+const useStableCallback_1 = require("@mwater/react-library/lib/useStableCallback");
+const DatagridQueryBuilder_1 = __importDefault(require("./DatagridQueryBuilder"));
+const immer_1 = __importDefault(require("immer"));
+/**
+ * Datagrid with decorations
+ * Design should be cleaned already before being passed in (see DatagridUtils)
+ */
+exports.default = (0, react_1.forwardRef)(function DatagridComponent(props, ref) {
+    const { schema, dataSource, datagridDataSource, design, onDesignChange, titleElem, extraTitleButtonsElem, canEditExpr, updateExprValues, onRowClick, onRowDoubleClick, quickfilterLocks, filters = [] } = props;
+    // State management
+    /** is design being edited */
+    const [editingDesign, setEditingDesign] = (0, react_1.useState)(false);
+    /** True if cells can be edited directly */
+    const [dataEditingEnabled, setDataEditingEnabled] = (0, react_1.useState)(false);
+    /** Height of quickfilters */
+    const [quickfiltersHeight, setQuickfiltersHeight] = (0, react_1.useState)(null);
+    /** Values of quickfilters */
+    const [quickfiltersValues, setQuickfiltersValues] = (0, react_1.useState)(null);
+    /** Refresh key */
+    const [refreshKey, setRefreshKey] = (0, react_1.useState)(1);
+    /** Number of rows */
+    const [numRows, setNumRows] = (0, react_1.useState)();
+    /** Selected rows */
+    const [selectedRows, setSelectedRows] = (0, react_1.useState)(new IdSelection_1.default());
+    /** True if delete confirmation modal is open */
+    const [showDeleteConfirmation, setShowDeleteConfirmation] = (0, react_1.useState)(false);
+    /** IDs of rows to be deleted */
+    const [rowIdsToDelete, setRowIdsToDelete] = (0, react_1.useState)();
+    /** True when loading IDs of rows to delete */
+    const [loadingRowIdsToDelete, setLoadingRowIdsToDelete] = (0, react_1.useState)(false);
+    // Refs
+    const datagridViewRef = react_1.default.useRef(null);
+    const quickfiltersRef = react_1.default.useRef(null);
+    const findReplaceModalRef = react_1.default.useRef(null);
+    const reload = () => {
+        datagridViewRef.current?.reload();
+    };
+    const loadRowCount = (0, useStableCallback_1.useStableCallback)(() => {
+        if (!design.showNumRows) {
             return;
         }
-        let filters = this.props.filters || [];
+        let activeFilters = filters || [];
         // Compile quickfilters
-        filters = filters.concat(this.getQuickfilterFilters());
-        this.props.datagridDataSource.countRows(this.props.design, filters, (error, numRows) => {
+        activeFilters = activeFilters.concat(getQuickfilterFilters());
+        datagridDataSource.countRows(design, activeFilters, (error, count) => {
             if (error) {
                 console.error(error);
                 alert(T `Error loading data`);
                 return;
             }
-            console.log(numRows);
-            this.setState({ numRows });
+            setNumRows(count);
         });
-    }
-    handleRefreshData = () => {
-        this.props.dataSource.clearCache?.();
-        this.setState({ refreshKey: this.state.refreshKey + 1 });
-    };
-    updateHeight() {
+    });
+    (0, react_1.useEffect)(() => {
+        loadRowCount();
+    }, [JSON.stringify(design), JSON.stringify(quickfiltersValues), refreshKey]);
+    (0, react_1.useEffect)(() => {
         // Calculate quickfilters height
-        if (this.quickfilters) {
-            if (this.state.quickfiltersHeight !== this.quickfilters.offsetHeight) {
-                return this.setState({ quickfiltersHeight: this.quickfilters.offsetHeight });
+        if (quickfiltersRef.current) {
+            if (quickfiltersHeight !== quickfiltersRef.current.offsetHeight) {
+                setQuickfiltersHeight(quickfiltersRef.current.offsetHeight);
             }
         }
         else {
-            return this.setState({ quickfiltersHeight: 0 });
+            setQuickfiltersHeight(0);
         }
-    }
+    }, [quickfiltersRef.current, JSON.stringify(design.quickfilters)]);
+    const handleRefreshData = () => {
+        dataSource.clearCache?.();
+        setRefreshKey(refreshKey + 1);
+    };
+    const handleDeleteRows = async (signal) => {
+        try {
+            if (!rowIdsToDelete) {
+                return;
+            }
+            await props.onRowsDelete(design.table, rowIdsToDelete, signal);
+            setShowDeleteConfirmation(false);
+            // If not aborted, clear selected rows
+            if (!signal.aborted) {
+                setSelectedRows(new IdSelection_1.default());
+                handleRefreshData();
+            }
+            setRowIdsToDelete(undefined);
+        }
+        catch (error) {
+            if (error.name !== "AbortError") {
+                alert(`Error deleting rows: ${error}`);
+            }
+        }
+    };
+    const handleShowDeleteConfirmation = async () => {
+        setShowDeleteConfirmation(true);
+        setLoadingRowIdsToDelete(true);
+        setRowIdsToDelete(undefined);
+        try {
+            // Get row ids
+            let rowIds = Object.keys(selectedRows.ids);
+            // If inverted, get all ids and remove selected ids
+            if (selectedRows.inverted) {
+                // Create modified design to just get ids 
+                const idsDesign = (0, immer_1.default)(design, (draft) => {
+                    draft.columns = [];
+                    draft.subtables = [];
+                });
+                // Create query builder
+                const queryBuilder = new DatagridQueryBuilder_1.default(schema);
+                const query = queryBuilder.createQuery(idsDesign, {
+                    extraFilters: filters
+                });
+                // Perform query
+                const rows = await dataSource.performQuery(query);
+                rowIds = rows.map((row) => row.id);
+                // Remove rows from rowIds
+                rowIds = rowIds.filter(id => !selectedRows.ids[id]);
+            }
+            setRowIdsToDelete(rowIds);
+        }
+        catch (error) {
+            alert(`Error loading rows to delete: ${error}`);
+            setShowDeleteConfirmation(false);
+        }
+        finally {
+            setLoadingRowIdsToDelete(false);
+        }
+    };
     // Get the values of the quick filters
-    getQuickfilterValues = () => {
-        return this.state.quickfiltersValues || [];
+    const getQuickfilterValues = () => {
+        return quickfiltersValues || [];
     };
-    // Get filters that are applied by the quickfilters
-    getQuickfilterFilters = () => {
-        return new QuickfilterCompiler_1.default(this.props.schema).compile(this.props.design.quickfilters, this.state.quickfiltersValues, this.props.quickfilterLocks);
+    /** Get filters that are applied by the quickfilters */
+    const getQuickfilterFilters = () => {
+        return new QuickfilterCompiler_1.default(schema).compile(design.quickfilters, quickfiltersValues, quickfilterLocks);
     };
-    handleCellEditingToggle = () => {
-        if (this.state.cellEditingEnabled) {
-            return this.setState({ cellEditingEnabled: false });
+    const handleDataEditingToggle = () => {
+        if (dataEditingEnabled) {
+            setDataEditingEnabled(false);
         }
         else {
-            if (confirm(T `Turn on cell editing? This will allow you to edit the live data and is an advanced feature.`)) {
-                return this.setState({ cellEditingEnabled: true });
+            if (confirm(T `Turn on data editing? This will allow you to edit the live data and is an advanced feature.`)) {
+                setDataEditingEnabled(true);
             }
         }
     };
-    handleEdit = () => {
-        return this.setState({ editingDesign: true });
+    const handleEdit = () => {
+        setEditingDesign(true);
     };
-    // Get datagrid filter compiled for quickfilter filtering
-    getCompiledFilters() {
+    /** Get datagrid filter compiled for quickfilter filtering */
+    const getCompiledFilters = () => {
         let jsonql;
-        const exprCompiler = new expressions_2.ExprCompiler(this.props.schema);
-        const exprUtils = new expressions_1.ExprUtils(this.props.schema);
-        const exprCleaner = new expressions_3.ExprCleaner(this.props.schema);
+        const exprCompiler = new expressions_2.ExprCompiler(schema);
+        const exprUtils = new expressions_1.ExprUtils(schema);
+        const exprCleaner = new expressions_3.ExprCleaner(schema);
         const compiledFilters = [];
-        if (this.props.design.filter) {
+        if (design.filter) {
             // First clean the filter
-            const cleanExpr = exprCleaner.cleanExpr(this.props.design.filter, { table: this.props.design.table });
+            const cleanExpr = exprCleaner.cleanExpr(design.filter, { table: design.table });
             jsonql = exprCompiler.compileExpr({ expr: cleanExpr, tableAlias: "{alias}" });
             if (jsonql) {
                 compiledFilters.push({
-                    table: this.props.design.table,
+                    table: design.table,
                     jsonql
                 });
             }
         }
         // Add global filters
-        for (let filter of this.props.design.globalFilters || []) {
+        for (let filter of design.globalFilters || []) {
             // Check if exists and is correct type
-            const column = this.props.schema.getColumn(this.props.design.table, filter.columnId);
+            const column = schema.getColumn(design.table, filter.columnId);
             if (!column) {
                 continue;
             }
-            const columnExpr = { type: "field", table: this.props.design.table, column: column.id };
+            const columnExpr = { type: "field", table: design.table, column: column.id };
             if (exprUtils.getExprType(columnExpr) !== filter.columnType) {
                 continue;
             }
@@ -135,180 +223,174 @@ class DatagridComponent extends react_1.default.Component {
             let expr = {
                 type: "op",
                 op: filter.op,
-                table: this.props.design.table,
+                table: design.table,
                 exprs: [columnExpr].concat(filter.exprs)
             };
             // Clean expr
-            expr = exprCleaner.cleanExpr(expr, { table: this.props.design.table });
+            expr = exprCleaner.cleanExpr(expr, { table: design.table });
             jsonql = exprCompiler.compileExpr({ expr, tableAlias: "{alias}" });
             if (jsonql) {
                 compiledFilters.push({
-                    table: this.props.design.table,
+                    table: design.table,
                     jsonql
                 });
             }
         }
         return compiledFilters;
-    }
-    // Toggle to allow cell editing
-    renderCellEdit() {
-        if (!this.props.canEditExpr) {
+    };
+    const renderDeleteRows = () => {
+        if (!props.onRowsDelete || selectedRows.isNone()) {
             return null;
         }
-        const label = [
-            R("i", { className: this.state.cellEditingEnabled ? "fa fa-fw fa-check-square" : "fa fa-fw fa-square-o" }),
+        return react_1.default.createElement("button", { className: "btn btn-link btn-sm", onClick: handleShowDeleteConfirmation },
+            react_1.default.createElement("i", { className: "fas fa-times" }),
             " ",
-            T `Cell Editing`
-        ];
-        return R("a", {
-            key: "cell-edit",
-            className: "btn btn-link btn-sm",
-            onClick: this.handleCellEditingToggle
-        }, label);
-    }
-    renderEditButton() {
-        if (!this.props.onDesignChange) {
+            T `Delete Selected Rows`);
+    };
+    /** Toggle to allow cell editing */
+    const renderCellEdit = () => {
+        if (!canEditExpr) {
             return null;
         }
-        return R("button", {
-            type: "button",
-            className: "btn btn-primary",
-            onClick: this.handleEdit
-        }, R("span", { className: "fas fa-cog" }), " ", T `Settings`);
-    }
-    renderFindReplace() {
-        if (!this.state.cellEditingEnabled) {
+        const label = react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("i", { className: dataEditingEnabled ? "fa fa-fw fa-check-square" : "fa fa-fw fa-square-o" }),
+            " ",
+            T `Data Editing`);
+        return (react_1.default.createElement("a", { key: "cell-edit", className: "btn btn-link btn-sm", onClick: handleDataEditingToggle }, label));
+    };
+    const renderEditButton = () => {
+        if (!onDesignChange) {
             return null;
         }
-        return R("a", {
-            key: "findreplace",
-            className: "btn btn-link btn-sm",
-            onClick: () => this.findReplaceModal.show()
-        }, T `Find/Replace`);
-    }
-    renderTitleBar() {
-        return R("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: 40, padding: 4 } }, R("div", { style: { float: "right" } }, this.props.design.showNumRows && this.state.numRows ? R("small", { className: 'text-muted text-sm' }, `${(0, d3_format_1.format)(',')(this.state.numRows)} rows`) : undefined, this.renderFindReplace(), this.renderCellEdit(), this.renderEditButton(), R("a", { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData }, R("span", { className: "fas fa-sync" }), R("span", { className: "hide-600px" }, T `Refresh`)), this.props.extraTitleButtonsElem), this.props.titleElem);
-    }
-    renderQuickfilter() {
-        return R("div", {
-            style: { position: "absolute", top: 40, left: 0, right: 0 },
-            ref: (c) => {
-                this.quickfilters = c;
-            }
-        }, R(QuickfiltersComponent_1.default, {
-            design: this.props.design.quickfilters,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            quickfiltersDataSource: this.props.datagridDataSource.getQuickfiltersDataSource(),
-            values: this.state.quickfiltersValues || [],
-            onValuesChange: (values) => this.setState({ quickfiltersValues: values }),
-            locks: this.props.quickfilterLocks,
-            filters: this.getCompiledFilters()
-        }));
-    }
+        return (react_1.default.createElement("button", { type: "button", className: "btn btn-primary", onClick: handleEdit },
+            react_1.default.createElement("span", { className: "fas fa-cog" }),
+            " ",
+            T `Settings`));
+    };
+    const renderFindReplace = () => {
+        if (!dataEditingEnabled) {
+            return null;
+        }
+        return (react_1.default.createElement("a", { key: "findreplace", className: "btn btn-link btn-sm", onClick: () => findReplaceModalRef.current.show() }, T `Find/Replace`));
+    };
+    const renderTitleBar = () => {
+        return (react_1.default.createElement("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: 40, padding: 4 } },
+            react_1.default.createElement("div", { style: { float: "right" } },
+                design.showNumRows && numRows ? react_1.default.createElement("small", { className: 'text-muted text-sm' }, `${(0, d3_format_1.format)(',')(numRows)} rows`) : undefined,
+                renderDeleteRows(),
+                renderFindReplace(),
+                renderCellEdit(),
+                renderEditButton(),
+                react_1.default.createElement("a", { key: "refresh", className: "btn btn-link btn-sm", onClick: handleRefreshData },
+                    react_1.default.createElement("span", { className: "fas fa-sync" }),
+                    " ",
+                    react_1.default.createElement("span", { className: "hide-600px" }, T `Refresh`)),
+                extraTitleButtonsElem),
+            titleElem));
+    };
+    const renderQuickfilter = () => {
+        return (react_1.default.createElement("div", { style: { position: "absolute", top: 40, left: 0, right: 0 }, ref: quickfiltersRef },
+            react_1.default.createElement(QuickfiltersComponent_1.default, { design: design.quickfilters, schema: schema, dataSource: dataSource, quickfiltersDataSource: datagridDataSource.getQuickfiltersDataSource(), values: quickfiltersValues || [], onValuesChange: (values) => setQuickfiltersValues(values), locks: quickfilterLocks, filters: getCompiledFilters() })));
+    };
     // Renders the editor modal
-    renderEditor() {
-        if (!this.state.editingDesign) {
-            return;
+    const renderEditor = () => {
+        if (!editingDesign) {
+            return null;
         }
-        return R(DatagridEditorComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            design: this.props.design,
-            onDesignChange: (design) => {
+        return (react_1.default.createElement(DatagridEditorComponent, { schema: schema, dataSource: dataSource, design: design, onDesignChange: (newDesign) => {
                 // If quickfilters have changed, reset values
-                if (!lodash_1.default.isEqual(this.props.design.quickfilters, design.quickfilters)) {
-                    this.setState({ quickfiltersValues: null });
+                if (!lodash_1.default.isEqual(design.quickfilters, newDesign.quickfilters)) {
+                    setQuickfiltersValues(null);
                 }
-                this.props.onDesignChange(design);
-                return this.setState({ editingDesign: false });
-            },
-            onCancel: () => this.setState({ editingDesign: false })
-        });
-    }
-    renderFindReplaceModal(filters) {
-        return R(FindReplaceModalComponent_1.default, {
-            ref: (c) => {
-                this.findReplaceModal = c;
-            },
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            datagridDataSource: this.props.datagridDataSource,
-            design: this.props.design,
-            filters,
-            updateExprValues: this.props.updateExprValues,
-            onUpdate: () => {
+                onDesignChange(newDesign);
+                setEditingDesign(false);
+            }, onCancel: () => setEditingDesign(false) }));
+    };
+    const renderFindReplaceModal = (filters) => {
+        return (react_1.default.createElement(FindReplaceModalComponent_1.default, { ref: findReplaceModalRef, schema: schema, dataSource: dataSource, design: design, filters: filters, updateExprValues: updateExprValues, onUpdate: () => {
                 // Reload
-                return this.datagridView?.reload();
-            }
-        });
-    }
-    render() {
-        let filters = this.props.filters || [];
-        // Compile quickfilters
-        filters = filters.concat(this.getQuickfilterFilters());
-        return R(expressions_ui_1.LocaleContext.Provider, { value: this.props.design.locale || "en" }, R("div", {
-            style: {
+                datagridViewRef.current?.reload();
+            } }));
+    };
+    let activeFilters = filters || [];
+    // Compile quickfilters
+    activeFilters = activeFilters.concat(getQuickfilterFilters());
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        getQuickfilterValues,
+        getQuickfilterFilters,
+        reload
+    }));
+    return (react_1.default.createElement(expressions_ui_1.LocaleContext.Provider, { value: design.locale || "en" },
+        react_1.default.createElement("div", { style: {
                 width: "100%",
                 height: "100%",
                 position: "relative",
-                paddingTop: 40 + (this.state.quickfiltersHeight || 0)
-            }
-        }, this.renderTitleBar(), this.renderQuickfilter(), this.renderEditor(), this.renderFindReplaceModal(filters), R(AutoSizeComponent_1.default, { injectWidth: true, injectHeight: true }, (size) => {
-            // Clean before displaying
-            const design = new DatagridUtils_1.default(this.props.schema).cleanDesign(this.props.design);
-            if (!new DatagridUtils_1.default(this.props.schema).validateDesign(design)) {
-                return R(DatagridViewComponent_1.default, {
-                    ref: (view) => {
-                        this.datagridView = view;
-                    },
-                    width: size.width - 1, // minus 1 px to test if it solves the jitter with scroll
-                    height: size.height - 1,
-                    pageSize: 100,
-                    schema: this.props.schema,
-                    dataSource: this.props.dataSource,
-                    datagridDataSource: this.props.datagridDataSource,
-                    design,
-                    filters,
-                    onDesignChange: this.props.onDesignChange,
-                    onRowClick: this.props.onRowClick,
-                    onRowDoubleClick: this.props.onRowDoubleClick,
-                    canEditExpr: this.state.cellEditingEnabled ? this.props.canEditExpr : undefined,
-                    updateExprValues: this.state.cellEditingEnabled ? this.props.updateExprValues : undefined,
-                    refreshKey: this.state.refreshKey
-                });
-            }
-            else if (this.props.onDesignChange) {
-                return R("div", { style: { textAlign: "center", marginTop: size.height / 2 } }, R("a", { className: "btn btn-link", onClick: this.handleEdit }, T `Click Here to Configure`));
-            }
-            else {
-                return null;
-            }
-        })));
-    }
-}
-exports.default = DatagridComponent;
+                paddingTop: 40 + (quickfiltersHeight || 0)
+            } },
+            renderTitleBar(),
+            renderQuickfilter(),
+            renderEditor(),
+            renderFindReplaceModal(activeFilters),
+            showDeleteConfirmation && (react_1.default.createElement(DeleteConfirmationModal, { onConfirm: handleDeleteRows, onCancel: () => {
+                    setShowDeleteConfirmation(false);
+                    setRowIdsToDelete(undefined);
+                }, numRows: rowIdsToDelete?.length, loadingNumRows: loadingRowIdsToDelete })),
+            react_1.default.createElement(AutoSizeComponent_1.default, { injectWidth: true, injectHeight: true }, (size) => {
+                // Clean before displaying
+                const cleanedDesign = new DatagridUtils_1.default(schema).cleanDesign(design);
+                if (!new DatagridUtils_1.default(schema).validateDesign(cleanedDesign)) {
+                    return (react_1.default.createElement(DatagridViewComponent_1.default, { ref: datagridViewRef, width: size.width - 1, height: size.height - 1, pageSize: 100, schema: schema, dataSource: dataSource, datagridDataSource: datagridDataSource, design: cleanedDesign, filters: activeFilters, onDesignChange: onDesignChange, onRowClick: onRowClick, onRowDoubleClick: onRowDoubleClick, selectedRows: dataEditingEnabled && props.onRowsDelete != null ? selectedRows : undefined, onSelectedRowsChange: dataEditingEnabled && props.onRowsDelete != null ? setSelectedRows : undefined, canEditExpr: dataEditingEnabled ? canEditExpr : undefined, updateExprValues: dataEditingEnabled ? updateExprValues : undefined, refreshKey: refreshKey }));
+                }
+                else if (onDesignChange) {
+                    return (react_1.default.createElement("div", { style: { textAlign: "center", marginTop: size.height / 2 } },
+                        react_1.default.createElement("a", { className: "btn btn-link", onClick: handleEdit }, T `Click Here to Configure`)));
+                }
+                else {
+                    return null;
+                }
+            }))));
+});
 /** Popup editor */
-class DatagridEditorComponent extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            design: props.design
-        };
-    }
-    render() {
-        return R(ActionCancelModalComponent_1.default, {
-            onAction: () => {
-                this.props.onDesignChange(this.state.design);
-                return this.setState({ design: this.props.design });
-            },
-            onCancel: this.props.onCancel,
-            size: "large"
-        }, R(DatagridDesignerComponent_1.default, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            design: this.state.design,
-            onDesignChange: (design) => this.setState({ design })
-        }));
-    }
+function DatagridEditorComponent(props) {
+    const { schema, dataSource, design, onDesignChange, onCancel } = props;
+    const [localDesign, setLocalDesign] = (0, react_1.useState)(design);
+    return (react_1.default.createElement(ActionCancelModalComponent_1.default, { onAction: () => {
+            onDesignChange(localDesign);
+            setLocalDesign(design);
+        }, onCancel: onCancel, size: "large" },
+        react_1.default.createElement(DatagridDesignerComponent_1.default, { schema: schema, dataSource: dataSource, design: localDesign, onDesignChange: (design) => setLocalDesign(design) })));
+}
+/** Modal that confirms deletion of rows */
+function DeleteConfirmationModal(props) {
+    const { onConfirm, onCancel, numRows, loadingNumRows } = props;
+    const [confirmed, setConfirmed] = (0, react_1.useState)(false);
+    const [deleting, setDeleting] = (0, react_1.useState)(false);
+    const abortControllerRef = (0, react_1.useRef)();
+    // If more than 1000 rows, show an error
+    const tooManyRows = numRows && numRows > 1000;
+    const handleConfirm = async () => {
+        setDeleting(true);
+        abortControllerRef.current = new AbortController();
+        try {
+            await onConfirm(abortControllerRef.current.signal);
+        }
+        finally {
+            setDeleting(false);
+        }
+    };
+    const handleCancel = () => {
+        if (deleting) {
+            abortControllerRef.current?.abort();
+        }
+        onCancel();
+    };
+    return (react_1.default.createElement(ActionCancelModalComponent_1.default, { title: T `Confirm Delete`, onAction: handleConfirm, onCancel: handleCancel, actionLabel: T `Delete`, size: "normal", actionBusy: deleting, actionDisabled: !confirmed || loadingNumRows },
+        react_1.default.createElement("div", null,
+            loadingNumRows ? (react_1.default.createElement("div", { className: "text-muted" },
+                react_1.default.createElement("i", { className: "fa fa-spinner fa-spin" }),
+                " ",
+                T `Loading rows to delete...`)) : (react_1.default.createElement("div", null, T `This will permanently delete ${(0, d3_format_1.format)(",")(numRows || 0)} row(s).`)),
+            tooManyRows && (react_1.default.createElement("div", { className: "alert alert-danger" }, T `Cannot delete more than 1000 rows at a time.`)),
+            !tooManyRows && numRows && numRows > 0 && (react_1.default.createElement("div", { className: "mt-3" },
+                react_1.default.createElement(bootstrap_1.Checkbox, { value: confirmed, onChange: setConfirmed }, T `I understand that this action cannot be undone`))))));
 }