@mwater/visualization 5.4.1 → 5.4.3

package/lib/dashboards/SettingsModalComponent.js

@@ -37,6 +37,10 @@ const QuickfiltersDesignComponent_1 = __importDefault(require("../quickfilter/Qu
 const FiltersDesignerComponent_1 = __importDefault(require("../FiltersDesignerComponent"));
 const MWaterContextComponent_1 = require("../MWaterContextComponent");
 const immer_1 = __importDefault(require("immer"));
+const TabbedComponent_1 = __importDefault(require("@mwater/react-library/lib/TabbedComponent"));
+const file_saver_1 = __importDefault(require("file-saver"));
+const localizeUtils = __importStar(require("ez-localize/lib/utils"));
+const autotranslate_1 = require("../autotranslate");
 /** Popup with settings for dashboard */
 class SettingsModalComponent extends react_1.default.Component {
     constructor(props) {
@@ -71,33 +75,41 @@ exports.default = SettingsModalComponent;
 /** Settings component for dashboard that is used in the settings modal */
 function SettingsComponent(props) {
     const { design, onDesignChange, schema, dataSource } = props;
-    // Get filterable tables
-    const filterableTables = DashboardUtils.getFilterableTables(design, schema);
-    const localeOptions = (0, react_1.useMemo)(() => {
-        return lodash_1.default.map(languages_1.languages, (language) => {
-            return {
-                value: language.code,
-                label: language.en + " (" + language.name + ")"
-            };
-        });
-    }, [languages_1.languages]);
+    const tabs = [
+        {
+            id: "filters",
+            label: T `Filters`,
+            elem: (react_1.default.createElement(FiltersTab, { design: design, onDesignChange: onDesignChange, schema: schema, dataSource: dataSource }))
+        },
+        {
+            id: "language",
+            label: T `Translation`,
+            elem: (react_1.default.createElement(LanguageTab, { design: design, onDesignChange: onDesignChange, schema: schema }))
+        }
+    ];
     return (react_1.default.createElement("div", { style: { paddingBottom: 200 } },
+        react_1.default.createElement(TabbedComponent_1.default, { tabs: tabs, initialTabId: "filters" })));
+}
+function FiltersTab({ design, onDesignChange, schema, dataSource }) {
+    // Get filterable tables
+    const filterableTables = (0, react_1.useMemo)(() => DashboardUtils.getFilterableTables(design, schema), [design, schema]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("h4", null, T `Quick Filters`),
-        react_1.default.createElement("div", { className: "text-muted" }, T `Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets.`),
+        react_1.default.createElement("div", { className: "mb-2" }, T `Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets.`),
         filterableTables.length > 0 ? (react_1.default.createElement(QuickfiltersDesignComponent_1.default, { design: design.quickfilters || [], onDesignChange: (quickfilters) => {
                 onDesignChange((0, immer_1.default)(design, draft => {
                     draft.quickfilters = quickfilters;
                 }));
             }, schema: schema, dataSource: dataSource, tables: filterableTables })) : (T `Nothing to quickfilter. Add widgets to the dashboard`),
-        react_1.default.createElement("h4", { style: { paddingTop: 10 } }, T `Filters`),
-        react_1.default.createElement("div", { className: "text-muted" }, T `Filters are built in to the dashboard and cannot be changed by viewers of the dashboard.`),
+        react_1.default.createElement("h4", { style: { paddingTop: 15 } }, T `Filters`),
+        react_1.default.createElement("div", { className: "mb-2" }, T `Filters are built in to the dashboard and cannot be changed by viewers of the dashboard.`),
         filterableTables.length > 0 ? (react_1.default.createElement(FiltersDesignerComponent_1.default, { schema: schema, dataSource: dataSource, filters: design.filters, onFiltersChange: (filters) => {
                 onDesignChange((0, immer_1.default)(design, draft => {
                     draft.filters = filters;
                 }));
             }, filterableTables: filterableTables })) : (T `Nothing to filter. Add widgets to the dashboard`),
         react_1.default.createElement(MWaterContextComponent_1.GlobalFiltersElementFactoryContext.Consumer, null, globalFiltersElementFactory => globalFiltersElementFactory ? (react_1.default.createElement("div", null,
-            react_1.default.createElement("h4", { style: { paddingTop: 10 } }, T `Global Filters`),
+            react_1.default.createElement("h4", { style: { paddingTop: 15 } }, T `Global Filters`),
             globalFiltersElementFactory({
                 schema,
                 dataSource,
@@ -109,14 +121,239 @@ function SettingsComponent(props) {
                     }));
                 }
             }))) : undefined),
-        react_1.default.createElement("h4", { style: { paddingTop: 10 } }, T `Language`),
-        react_1.default.createElement("div", { className: "text-muted" }, T `Controls the preferred language of widgets and uses specified language when available`),
-        react_1.default.createElement(react_select_1.default, { value: lodash_1.default.findWhere(localeOptions, { value: design.locale || "en" }) || null, options: localeOptions, onChange: (locale) => onDesignChange((0, immer_1.default)(design, draft => {
-                draft.locale = locale.value;
-            })) }),
         design.implicitFiltersEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("h4", { style: { paddingTop: 10 } }, T `Advanced`),
             react_1.default.createElement(ui.Checkbox, { value: design.implicitFiltersEnabled != null ? design.implicitFiltersEnabled : true, onChange: (value) => onDesignChange((0, immer_1.default)(design, draft => {
                     draft.implicitFiltersEnabled = value;
                 })) }, T `Enable Implicit Filtering (leave unchecked for new dashboards)`)))));
 }
+function LanguageTab({ design, onDesignChange, schema }) {
+    const fileInputRef = (0, react_1.useRef)(null);
+    const locale = design.locale || "en";
+    const localeOptions = (0, react_1.useMemo)(() => {
+        return lodash_1.default.sortBy(lodash_1.default.map(languages_1.languages, (language) => ({
+            value: language.code,
+            label: `${language.en} (${language.name})`
+        })), 'label');
+    }, [languages_1.languages]);
+    // Get available languages that aren't already selected
+    const availableLocaleOptions = (0, react_1.useMemo)(() => {
+        const selectedLocales = new Set([design.locale, ...(design.otherLocales || [])]);
+        return localeOptions.filter(opt => !selectedLocales.has(opt.value));
+    }, [localeOptions, design.locale, design.otherLocales]);
+    const translatableStrings = (0, react_1.useMemo)(() => DashboardUtils.getTranslatableStringsFromDashboard(design, schema), [design, schema]);
+    // Calculate percentage of strings translated for each locale
+    const translationPercentages = (0, react_1.useMemo)(() => {
+        const percentages = {};
+        const totalStrings = translatableStrings.length;
+        for (const locale of design.otherLocales || []) {
+            const translatedCount = translatableStrings.filter(str => design.translations?.[locale]?.[str] != null).length;
+            // Round down to nearest percent
+            percentages[locale] = Math.floor((translatedCount / totalStrings) * 100);
+        }
+        return percentages;
+    }, [design.translations, design.otherLocales, translatableStrings]);
+    const handleAddLocale = (locale) => {
+        onDesignChange((0, immer_1.default)(design, draft => {
+            draft.otherLocales = [...(draft.otherLocales || []), locale.value];
+            // Initialize empty translations object if needed
+            if (!draft.translations) {
+                draft.translations = {};
+            }
+            if (!draft.translations[locale.value]) {
+                draft.translations[locale.value] = {};
+            }
+        }));
+    };
+    const handleRemoveLocale = (localeToRemove) => {
+        onDesignChange((0, immer_1.default)(design, draft => {
+            draft.otherLocales = (draft.otherLocales || []).filter(locale => locale !== localeToRemove);
+            // Remove translations for this locale
+            if (draft.translations) {
+                delete draft.translations[localeToRemove];
+            }
+        }));
+    };
+    // Convert dashboard translations to LocalizedString format
+    const getLocalizedStrings = () => {
+        // For each string, create a localized string
+        const localizedStrings = [];
+        for (const str of translatableStrings) {
+            const localizedString = { _base: locale };
+            localizedString[locale] = str;
+            // Only add translations for other locales if they exist
+            for (const otherLocale of design.otherLocales || []) {
+                if (design.translations?.[otherLocale]?.[str]) {
+                    localizedString[otherLocale] = design.translations?.[otherLocale]?.[str];
+                }
+            }
+            localizedStrings.push(localizedString);
+        }
+        return localizedStrings;
+    };
+    // Convert LocalizedString format back to dashboard translations
+    const updateFromLocalizedStrings = (localizedStrings) => {
+        const newTranslations = {};
+        // Get all locales except base
+        const locales = design.otherLocales || [];
+        // Initialize translations object
+        for (const locale of locales) {
+            newTranslations[locale] = {};
+        }
+        // Add all translations
+        for (const str of localizedStrings) {
+            for (const locale of locales) {
+                if (str[locale]) {
+                    newTranslations[locale][str[str._base]] = str[locale];
+                }
+            }
+        }
+        return newTranslations;
+    };
+    const handleDownload = () => {
+        // Get strings in LocalizedString format
+        const strings = getLocalizedStrings();
+        // Create xlsx base64 using all locales (primary + other)
+        const locales = [{ code: locale, name: locale }]
+            .concat((design.otherLocales || []).map(code => ({ code, name: code })));
+        const base64 = localizeUtils.exportXlsx(locales, strings);
+        // Download
+        file_saver_1.default.saveAs(b64toBlob(base64, "application/octet-stream"), "Dashboard Translations.xlsx");
+    };
+    const handleUpload = () => {
+        fileInputRef.current?.click();
+    };
+    const handleUploadChange = (evt) => {
+        const reader = new FileReader();
+        reader.onload = (file) => {
+            if (!file.target?.result) {
+                return;
+            }
+            const base64 = file.target.result.split(",")[1];
+            try {
+                // Create locales array for import
+                const locales = [{ code: locale, name: locale }]
+                    .concat((design.otherLocales || []).map(code => ({ code, name: code })));
+                // Import updates
+                const updates = localizeUtils.importXlsx(locales, base64);
+                // If nothing localized
+                if (updates.length === 0) {
+                    alert(T `No translation data found in file`);
+                    return;
+                }
+                // Convert back to dashboard format and update
+                const newTranslations = updateFromLocalizedStrings(updates);
+                onDesignChange((0, immer_1.default)(design, draft => {
+                    draft.translations = newTranslations;
+                }));
+                alert(T `${updates.length} translations applied`);
+            }
+            catch (error) {
+                console.error("Invalid xlsx file:", error);
+                alert(T `Invalid xlsx file`);
+            }
+        };
+        if (evt.target.files?.[0]) {
+            reader.readAsDataURL(evt.target.files[0]);
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("h4", null, T `Base Language`),
+        react_1.default.createElement("div", { className: "mb-2" }, T `This is the language that the dashboard is written in.`),
+        react_1.default.createElement(react_select_1.default, { value: lodash_1.default.findWhere(localeOptions, { value: design.locale || "en" }) || null, options: localeOptions, onChange: (locale) => onDesignChange((0, immer_1.default)(design, draft => {
+                draft.locale = locale.value;
+            })) }),
+        react_1.default.createElement("h4", { className: "mt-4" }, T `Additional Languages`),
+        react_1.default.createElement("div", { className: "mb-2" }, T `Add languages that this dashboard will be translated into`),
+        react_1.default.createElement("table", null,
+            react_1.default.createElement("tbody", null, (design.otherLocales || []).map(locale => {
+                const localeOption = lodash_1.default.findWhere(localeOptions, { value: locale });
+                if (!localeOption) {
+                    return null;
+                }
+                return (react_1.default.createElement("tr", { key: locale },
+                    react_1.default.createElement("td", { style: { paddingRight: 10 } }, localeOption.label),
+                    react_1.default.createElement("td", { className: translationPercentages[locale] === 100 ? "text-success" : "text-warning", style: { textAlign: "right" } }, T `${translationPercentages[locale]}% translated`),
+                    react_1.default.createElement("td", null, translationPercentages[locale] < 100 && (react_1.default.createElement(AutoTranslateLink, { locale: locale, baseLocale: design.locale || "en", strings: translatableStrings, existingTranslations: design.translations?.[locale] || {}, onTranslationsChange: (newTranslations) => {
+                            onDesignChange((0, immer_1.default)(design, draft => {
+                                if (!draft.translations) {
+                                    draft.translations = {};
+                                }
+                                draft.translations[locale] = newTranslations;
+                            }));
+                        } }))),
+                    react_1.default.createElement("td", null,
+                        react_1.default.createElement("button", { type: "button", className: "btn btn-sm btn-link", onClick: () => handleRemoveLocale(locale) },
+                            react_1.default.createElement("i", { className: "fa fa-times" })))));
+            }))),
+        availableLocaleOptions.length > 0 && (react_1.default.createElement("div", { className: "mt-3" },
+            react_1.default.createElement(react_select_1.default, { value: null, options: availableLocaleOptions, onChange: handleAddLocale, placeholder: T `Add language...` }))),
+        (design.otherLocales || []).length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("h4", { className: "mt-4" }, T `Manage Translations`),
+            react_1.default.createElement("p", null, T `Download and re-upload an Excel spreadsheet of text to translate:`),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("button", { type: "button", className: "btn btn-secondary", onClick: handleDownload },
+                    react_1.default.createElement("i", { className: "fas fa-download me-2" }),
+                    T `Download XLSX`)),
+            react_1.default.createElement("div", { className: "text-muted mt-2" }, T `This creates a spreadsheet that can be sent to a translator. Please do not change the first column or first row of the spreadsheet.`),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement("p", null, T `Once translation is complete, upload the file back using the button below:`),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("button", { type: "button", className: "btn btn-secondary", onClick: handleUpload },
+                    react_1.default.createElement("i", { className: "fas fa-upload me-2" }),
+                    T `Upload Translated XLSX`)),
+            react_1.default.createElement("input", { type: "file", ref: fileInputRef, style: { display: "none" }, onChange: handleUploadChange, accept: ".xlsx" })))));
+}
+/** Helper function for base64 to blob conversion */
+function b64toBlob(b64Data, contentType = "", sliceSize = 512) {
+    const byteCharacters = atob(b64Data);
+    const byteArrays = [];
+    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+        const slice = byteCharacters.slice(offset, offset + sliceSize);
+        const byteNumbers = new Array(slice.length);
+        for (let i = 0; i < slice.length; i++) {
+            byteNumbers[i] = slice.charCodeAt(i);
+        }
+        const byteArray = new Uint8Array(byteNumbers);
+        byteArrays.push(byteArray);
+    }
+    return new Blob(byteArrays, { type: contentType });
+}
+function AutoTranslateLink(props) {
+    const { locale, baseLocale, strings, existingTranslations, onTranslationsChange } = props;
+    const [isTranslating, setIsTranslating] = (0, react_1.useState)(false);
+    const untranslatedStrings = (0, react_1.useMemo)(() => {
+        return strings.filter(str => !existingTranslations[str]);
+    }, [strings, existingTranslations]);
+    const handleClick = async () => {
+        if (isTranslating) {
+            return;
+        }
+        setIsTranslating(true);
+        try {
+            const translatedStrings = await (0, autotranslate_1.translateStrings)(untranslatedStrings, baseLocale, locale);
+            const newTranslations = { ...existingTranslations };
+            for (let i = 0; i < untranslatedStrings.length; i++) {
+                newTranslations[untranslatedStrings[i]] = translatedStrings[i];
+            }
+            onTranslationsChange(newTranslations);
+        }
+        catch (error) {
+            console.error("Error translating strings:", error);
+            alert(T `Error translating strings`);
+        }
+        finally {
+            setIsTranslating(false);
+        }
+    };
+    if (untranslatedStrings.length === 0) {
+        return null;
+    }
+    if (!(0, autotranslate_1.canAutoTranslate)(locale)) {
+        return null;
+    }
+    return (react_1.default.createElement("button", { type: "button", className: "btn btn-sm btn-link", onClick: handleClick, disabled: isTranslating, style: { marginLeft: 5, padding: "0 5px" } }, isTranslating ? (react_1.default.createElement("span", null,
+        react_1.default.createElement("i", { className: "fa fa-spinner fa-spin" }),
+        " ",
+        T `Translating...`)) : (T `Autotranslate`)));
+}

package/lib/dashboards/WidgetComponent.d.ts

@@ -2,13 +2,12 @@ import { Schema, DataSource } from "@mwater/expressions";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { WidgetScope } from "../WidgetScope";
 import { WidgetDataSource } from "../widgets/WidgetDataSource";
+import { TOCEntry } from "../widgets/Widget";
 /**
  * Component which renders a widget and ensures that props do not change
  * unnecessarily.
  */
 export declare function WidgetComponent(props: {
-    /** Widget id */
-    id: string;
     /** Widget type */
     type: string;
     /** Widget design */
@@ -42,11 +41,15 @@ export declare function WidgetComponent(props: {
         [key: string]: string;
     };
     /** Entries in the table of content */
-    tocEntries?: string[];
+    tocEntries?: TOCEntry[];
     /** the widget callback ref */
     widgetRef: (widget: any) => void;
     /** called with (widgetId, tocEntryId) to scroll to TOC entry */
     onScrollToTOCEntry?: (widgetId: string, tocEntryId: string) => void;
     /** Change to force a refresh */
     refreshKey?: any;
+    /** Locale to use for display */
+    locale: string;
+    /** Translate function to use for display. Returns same string when editing. */
+    translate: (input: string) => string;
 }): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/lib/dashboards/WidgetComponent.js

@@ -37,7 +37,9 @@ function WidgetComponent(props) {
         tocEntries: props.tocEntries,
         onScrollToTOCEntry: props.onScrollToTOCEntry,
         widgetRef,
-        refreshKey: props.refreshKey
+        refreshKey: props.refreshKey,
+        locale: props.locale,
+        translate: props.translate
     });
 }
 /** Always returns the same function to prevent unnecessary re-rendering. Forwards to the real function */

package/lib/datagrids/CellEditor.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { EnumValue, LiteralType, Schema, DataSource } from "@mwater/expressions";
+import { RenderCellEditorProps } from "@mwater/react-library/lib/GridComponent";
+import "react-datepicker/dist/react-datepicker.css";
+/** Determine if type can be edited */
+export declare function canEditType(type: LiteralType): boolean;
+/** Cell editor for a cell of the grid */
+export declare const CellEditor: (props: {
+    type: LiteralType;
+    enumValues?: EnumValue[];
+    idTable?: string;
+    initialValue: any;
+    editorOptions: RenderCellEditorProps;
+    /** Update the cell value. Returns true if successful, false if cancelled */
+    updateCellValue: (value: any) => Promise<boolean>;
+    locale?: string;
+    schema: Schema;
+    dataSource: DataSource;
+}) => React.JSX.Element;

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 })));
+};