@mwater/visualization 5.0.0

package/lib/widgets/ImageWidget.js

@@ -0,0 +1,112 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const lodash_1 = __importDefault(require("lodash"));
+const expressions_1 = require("@mwater/expressions");
+const expressions_2 = require("@mwater/expressions");
+const Widget_1 = __importDefault(require("./Widget"));
+class ImageWidget extends Widget_1.default {
+    // Creates a React element that is a view of the widget
+    // options:
+    //  schema: schema to use
+    //  dataSource: data source to use
+    //  widgetDataSource: Gives data to the widget in a way that allows client-server separation and secure sharing. See definition in WidgetDataSource.
+    //  design: widget design
+    //  scope: scope of the widget (when the widget self-selects a particular scope)
+    //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
+    //  onScopeChange: called with scope of widget
+    //  onDesignChange: called with new design. null/undefined for readonly
+    //  width: width in pixels on screen
+    //  height: height in pixels on screen
+    //  singleRowTable: optional table name of table that will be filtered to have a single row present. Widget designer should optionally account for this
+    createViewElement(options) {
+        // Put here so ImageWidget can be created on server
+        const ImageWidgetComponent = require("./ImageWidgetComponent").default;
+        return R(ImageWidgetComponent, {
+            schema: options.schema,
+            dataSource: options.dataSource,
+            widgetDataSource: options.widgetDataSource,
+            filters: options.filters,
+            design: options.design,
+            onDesignChange: options.onDesignChange,
+            width: options.width,
+            height: options.height,
+            singleRowTable: options.singleRowTable
+        });
+    }
+    // Get the data that the widget needs. This will be called on the server, typically.
+    //   design: design of the chart
+    //   schema: schema to use
+    //   dataSource: data source to get data from
+    //   filters: array of { table: table id, jsonql: jsonql condition with {alias} for tableAlias }
+    //   callback: (error, data)
+    getData(design, schema, dataSource, filters, callback) {
+        if (!design.expr) {
+            return callback(null);
+        }
+        const exprCleaner = new expressions_1.ExprCleaner(schema);
+        const expr = exprCleaner.cleanExpr(design.expr);
+        if (!expr) {
+            return callback(null);
+        }
+        const { table } = design.expr;
+        const exprCompiler = new expressions_1.ExprCompiler(schema);
+        const imageExpr = exprCompiler.compileExpr({ expr, tableAlias: "main" });
+        // Get distinct to only show if single row match
+        const query = {
+            type: "query",
+            distinct: true,
+            selects: [{ type: "select", expr: imageExpr, alias: "value" }],
+            from: { type: "table", table, alias: "main" },
+            limit: 2
+        };
+        // Get relevant filters
+        filters = lodash_1.default.where(filters || [], { table });
+        let whereClauses = lodash_1.default.map(filters, (f) => (0, expressions_2.injectTableAlias)(f.jsonql, "main"));
+        whereClauses.push({ type: "op", op: "is not null", exprs: [imageExpr] });
+        whereClauses = lodash_1.default.compact(whereClauses);
+        // Wrap if multiple
+        if (whereClauses.length > 1) {
+            query.where = { type: "op", op: "and", exprs: whereClauses };
+        }
+        else {
+            query.where = whereClauses[0];
+        }
+        // Execute query
+        dataSource.performQuery(query, (error, rows) => {
+            if (error) {
+                callback(error);
+            }
+            else {
+                // If multiple, use null
+                if (rows.length !== 1) {
+                    return callback(null, null);
+                }
+                else {
+                    // Make sure is not string
+                    let { value } = rows[0];
+                    if (lodash_1.default.isString(rows[0].value)) {
+                        value = JSON.parse(rows[0].value);
+                    }
+                    callback(null, value);
+                }
+            }
+        });
+    }
+    // Determine if widget is auto-height, which means that a vertical height is not required.
+    isAutoHeight() {
+        return false;
+    }
+    // Get a list of table ids that can be filtered on
+    getFilterableTables(design, schema) {
+        if (design.expr?.table) {
+            return [design.expr.table];
+        }
+        return [];
+    }
+}
+exports.default = ImageWidget;

package/lib/widgets/ImageWidgetComponent.d.ts

@@ -0,0 +1,125 @@
+import React from "react";
+import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent";
+import DropdownWidgetComponent from "./DropdownWidgetComponent";
+import { DataSource, Schema } from "@mwater/expressions";
+import { WidgetDataSource } from "./WidgetDataSource";
+import { ImageWidgetDesign } from "./ImageWidget";
+export interface ImageWidgetComponentProps {
+    design: ImageWidgetDesign;
+    /** Called with new design. null/undefined for readonly */
+    onDesignChange?: (design: ImageWidgetDesign) => void;
+    filters?: any;
+    schema: Schema;
+    /** Data source to use for widget */
+    dataSource: DataSource;
+    widgetDataSource: WidgetDataSource;
+    width: number;
+    height: number;
+    singleRowTable?: string;
+}
+export default class ImageWidgetComponent extends AsyncLoadComponent<ImageWidgetComponentProps, {
+    data: any;
+    loading: boolean;
+}> {
+    editor: ImageWidgetDesignComponent | null;
+    isLoadNeeded(newProps: ImageWidgetComponentProps, oldProps: ImageWidgetComponentProps): boolean;
+    load(props: ImageWidgetComponentProps, prevProps: ImageWidgetComponentProps, callback: any): void;
+    handleStartEditing: () => void;
+    renderEditLink(): React.DetailedReactHTMLElement<{
+        className: string;
+        onClick: () => void;
+    }, HTMLElement>;
+    renderEditor(): React.CElement<any, ImageWidgetDesignComponent>;
+    renderExpression(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<{
+        injectHeight: boolean;
+    }, React.Component<{
+        injectHeight: boolean;
+    }, any, any>> | null;
+    renderContent(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement> | React.CElement<{
+        injectHeight: boolean;
+    }, React.Component<{
+        injectHeight: boolean;
+    }, any, any>> | React.CElement<RotatedImageComponentProps, RotatedImageComponent> | null;
+    render(): React.CElement<import("./DropdownWidgetComponent").DropdownWidgetComponentProps, DropdownWidgetComponent>;
+}
+interface ImageWidgetDesignComponentProps {
+    design: any;
+    /** Called with new design. null/undefined for readonly */
+    onDesignChange?: any;
+    schema: Schema;
+    dataSource: DataSource;
+}
+interface ImageWidgetDesignComponentState {
+    imageUrl: any;
+    url: any;
+    uid: any;
+    expr: any;
+    caption: any;
+    rotation: any;
+    captionPosition: any;
+    table: any;
+    editing: any;
+    currentTab: any;
+    data: any;
+    error: any;
+    files: any;
+    uploading: boolean;
+    openUrlInSameTab?: boolean;
+}
+declare class ImageWidgetDesignComponent extends React.Component<ImageWidgetDesignComponentProps, ImageWidgetDesignComponentState> {
+    constructor(props: any);
+    edit: () => void;
+    setCurrentTab(): void;
+    handleImageUrlChange: (e: any) => void;
+    handleUrlChange: (e: any) => void;
+    renderUploadEditor(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    handleFileUpload: (uid: any) => void;
+    handleExpressionChange: (expr: any) => void;
+    handleTableChange: (table: any) => void;
+    handleCaptionChange: (ev: any) => void;
+    handleRotationChange: (rotation: any) => void;
+    handleCaptionPositionChange: (captionPosition: any) => void;
+    handleOpenUrlInSameTabChange: (openUrlInSameTab?: boolean) => void;
+    handleSave: () => any;
+    handleCancel: () => void;
+    renderExpressionEditor(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    renderRotation(): React.DetailedReactHTMLElement<{
+        style: {
+            paddingTop: number;
+        };
+    }, HTMLElement>;
+    renderImageUrlEditor(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    renderUrlEditor(): React.DetailedReactHTMLElement<{
+        className: string;
+    }, HTMLElement>;
+    render(): React.CElement<{
+        header: string;
+        footer: React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }, React.Component<{
+        header: string;
+        footer: React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }, any, any>> | null;
+}
+interface RotatedImageComponentProps {
+    /** Url of the image */
+    imgUrl: string;
+    rotation?: number;
+    onClick?: any;
+    caption?: string;
+    url?: string;
+    openUrlInSameTab?: boolean;
+}
+declare class RotatedImageComponent extends React.Component<RotatedImageComponentProps> {
+    render(): React.CElement<{
+        injectWidth: boolean;
+        injectHeight: boolean;
+    }, React.Component<{
+        injectWidth: boolean;
+        injectHeight: boolean;
+    }, any, any>>;
+}
+export {};

package/lib/widgets/ImageWidgetComponent.js

@@ -0,0 +1,368 @@
+"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 react_1 = __importDefault(require("react"));
+const R = react_1.default.createElement;
+const lodash_1 = __importDefault(require("lodash"));
+const classnames_1 = __importDefault(require("classnames"));
+const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
+const AsyncLoadComponent_1 = __importDefault(require("@mwater/react-library/lib/AsyncLoadComponent"));
+const AutoSizeComponent_1 = __importDefault(require("@mwater/react-library/lib/AutoSizeComponent"));
+const DropdownWidgetComponent_1 = __importDefault(require("./DropdownWidgetComponent"));
+const ModalPopupComponent_1 = __importDefault(require("@mwater/react-library/lib/ModalPopupComponent"));
+const TabbedComponent_1 = __importDefault(require("@mwater/react-library/lib/TabbedComponent"));
+const expressions_ui_1 = require("@mwater/expressions-ui");
+const TableSelectComponent_1 = __importDefault(require("../TableSelectComponent"));
+const ImageUploaderComponent_1 = __importDefault(require("./ImageUploaderComponent"));
+const ImagelistCarouselComponent_1 = __importDefault(require("./ImagelistCarouselComponent"));
+class ImageWidgetComponent extends AsyncLoadComponent_1.default {
+    editor;
+    // Override to determine if a load is needed. Not called on mounting
+    isLoadNeeded(newProps, oldProps) {
+        return (newProps.design.expr != null &&
+            (!lodash_1.default.isEqual(newProps.design.expr, oldProps.design.expr) || !lodash_1.default.isEqual(newProps.filters, oldProps.filters)));
+    }
+    // Call callback with state changes
+    load(props, prevProps, callback) {
+        // Get data
+        return props.widgetDataSource.getData(props.design, props.filters, (error, data) => {
+            return callback({ error, data });
+        });
+    }
+    handleStartEditing = () => {
+        this.editor?.edit();
+    };
+    // Render a link to start editing
+    renderEditLink() {
+        return R("div", { className: "mwater-visualization-widget-placeholder", onClick: this.handleStartEditing }, R("i", { className: "icon fa fa-image" }));
+    }
+    renderEditor() {
+        return R(ImageWidgetDesignComponent, {
+            ref: (c) => {
+                this.editor = c;
+            },
+            key: "editor",
+            design: this.props.design,
+            onDesignChange: this.props.onDesignChange,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource
+        });
+    }
+    renderExpression() {
+        if (this.state.loading) {
+            return R("span", null, "Loading");
+        }
+        else if (this.state.data) {
+            // Make into array if not
+            if (!lodash_1.default.isArray(this.state.data)) {
+                return R(AutoSizeComponent_1.default, { injectHeight: true }, (size) => {
+                    return R(ImagelistCarouselComponent_1.default, {
+                        widgetDataSource: this.props.widgetDataSource,
+                        imagelist: [this.state.data],
+                        height: size.height
+                    });
+                });
+            }
+            else {
+                return R(AutoSizeComponent_1.default, { injectHeight: true }, (size) => {
+                    return R(ImagelistCarouselComponent_1.default, {
+                        widgetDataSource: this.props.widgetDataSource,
+                        imagelist: this.state.data,
+                        height: size.height
+                    });
+                });
+            }
+        }
+        return null;
+    }
+    renderContent() {
+        if (this.props.design.imageUrl || this.props.design.uid) {
+            // Determine approximate height
+            let imageHeight = undefined;
+            if (this.props.height <= 160) {
+                imageHeight = 160;
+            }
+            else if (this.props.height <= 320) {
+                imageHeight = 320;
+            }
+            else if (this.props.height <= 640) {
+                imageHeight = 640;
+            }
+            else if (this.props.height <= 1280) {
+                imageHeight = 1280;
+            }
+            const source = this.props.design.imageUrl || this.props.widgetDataSource.getImageUrl(this.props.design.uid, imageHeight);
+            return R(RotatedImageComponent, {
+                imgUrl: source,
+                url: this.props.design.url,
+                openUrlInSameTab: this.props.design.openUrlInSameTab,
+                rotation: this.props.design.rotation
+            });
+        }
+        else {
+            return this.renderExpression();
+        }
+    }
+    render() {
+        const dropdownItems = [];
+        if (this.props.onDesignChange != null) {
+            dropdownItems.push({ label: "Edit", icon: "pencil", onClick: this.handleStartEditing });
+        }
+        const captionPosition = this.props.design.captionPosition || "bottom";
+        return R(DropdownWidgetComponent_1.default, {
+            width: this.props.width,
+            height: this.props.height,
+            dropdownItems
+        }, this.renderEditor(), !this.props.design.imageUrl && !this.props.design.expr && !this.props.design.uid && this.props.onDesignChange
+            ? this.renderEditLink()
+            : R("div", {
+                className: "mwater-visualization-image-widget",
+                style: { position: "relative", width: this.props.width, height: this.props.height }
+            }, captionPosition === "top" ? R("div", { className: "caption" }, this.props.design.caption) : undefined, R("div", { className: "image" }, this.renderContent()), captionPosition === "bottom" ? R("div", { className: "caption" }, this.props.design.caption) : undefined));
+    }
+}
+exports.default = ImageWidgetComponent;
+class ImageWidgetDesignComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            // Widget data
+            data: null,
+            error: null,
+            editing: false,
+            imageUrl: null,
+            expr: null,
+            table: null,
+            uid: null,
+            files: null,
+            uploading: false,
+            caption: null,
+            currentTab: "url",
+            rotation: null,
+            captionPosition: null,
+            url: null
+        };
+    }
+    edit = () => {
+        this.setCurrentTab();
+        const state = {
+            editing: true,
+            imageUrl: this.props.design.imageUrl,
+            uid: this.props.design.uid,
+            expr: this.props.design.expr,
+            table: this.props.design.expr?.table,
+            caption: this.props.design.caption,
+            rotation: this.props.design.rotation,
+            captionPosition: this.props.design.captionPosition,
+            url: this.props.design.url,
+            openUrlInSameTab: this.props.design.openUrlInSameTab
+        };
+        return this.setState(state);
+    };
+    setCurrentTab() {
+        let tab = "upload";
+        if (this.props.design.url) {
+            tab = "url";
+        }
+        if (this.props.design.expr) {
+            tab = "expression";
+        }
+        return this.setState({ currentTab: tab });
+    }
+    handleImageUrlChange = (e) => {
+        return this.setState({ imageUrl: e.target.value, uid: null, expr: null });
+    };
+    handleUrlChange = (e) => {
+        return this.setState({ url: e.target.value });
+    };
+    renderUploadEditor() {
+        return R("div", null, R(ImageUploaderComponent_1.default, {
+            dataSource: this.props.dataSource,
+            onUpload: this.handleFileUpload,
+            uid: this.props.design.uid
+        }), this.renderRotation());
+    }
+    handleFileUpload = (uid) => {
+        return this.setState({ imageUrl: null, uid, expr: null });
+    };
+    handleExpressionChange = (expr) => {
+        return this.setState({ imageUrl: null, uid: null, expr, url: null });
+    };
+    handleTableChange = (table) => {
+        return this.setState({ table });
+    };
+    handleCaptionChange = (ev) => {
+        return this.setState({ caption: ev.target.value });
+    };
+    handleRotationChange = (rotation) => {
+        return this.setState({ rotation });
+    };
+    handleCaptionPositionChange = (captionPosition) => {
+        return this.setState({ captionPosition });
+    };
+    handleOpenUrlInSameTabChange = (openUrlInSameTab) => {
+        return this.setState({ openUrlInSameTab: !openUrlInSameTab });
+    };
+    handleSave = () => {
+        this.setState({ editing: false });
+        const updates = {
+            imageUrl: this.state.imageUrl,
+            url: this.state.url,
+            uid: this.state.uid,
+            expr: this.state.expr,
+            caption: this.state.caption,
+            rotation: this.state.rotation,
+            captionPosition: this.state.captionPosition,
+            openUrlInSameTab: this.state.openUrlInSameTab
+        };
+        return this.props.onDesignChange(lodash_1.default.extend({}, this.props.design, updates));
+    };
+    handleCancel = () => {
+        this.setCurrentTab();
+        return this.setState({
+            editing: false,
+            imageUrl: null,
+            url: null,
+            uid: null,
+            expr: null,
+            table: null,
+            files: null,
+            uploading: false,
+            captionPosition: null
+        });
+    };
+    renderExpressionEditor() {
+        return R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", "Data Source"), ": ", R(TableSelectComponent_1.default, { schema: this.props.schema, value: this.state.table, onChange: this.handleTableChange }), R("br"), this.state.table
+            ? R("div", { className: "mb-3" }, R("label", { className: "text-muted" }, "Field"), ": ", R(expressions_ui_1.ExprComponent, {
+                schema: this.props.schema,
+                dataSource: this.props.dataSource,
+                table: this.state.table,
+                types: ["image", "imagelist"],
+                value: this.state.expr,
+                aggrStatuses: ["individual", "literal"],
+                onChange: this.handleExpressionChange
+            }))
+            : undefined);
+    }
+    renderRotation() {
+        return R("div", { style: { paddingTop: 10 } }, "Rotation: ", R(ui.Radio, { value: this.state.rotation || null, radioValue: null, onChange: this.handleRotationChange, inline: true }, "0 degrees"), R(ui.Radio, { value: this.state.rotation || null, radioValue: 90, onChange: this.handleRotationChange, inline: true }, "90 degrees"), R(ui.Radio, { value: this.state.rotation || null, radioValue: 180, onChange: this.handleRotationChange, inline: true }, "180 degrees"), R(ui.Radio, { value: this.state.rotation || null, radioValue: 270, onChange: this.handleRotationChange, inline: true }, "270 degrees"));
+    }
+    renderImageUrlEditor() {
+        return R("div", { className: "mb-3" }, R("label", null, "URL of image"), R("input", {
+            type: "text",
+            className: "form-control",
+            value: this.state.imageUrl || "",
+            onChange: this.handleImageUrlChange
+        }), R("div", { className: "form-text text-muted" }, "e.g. http://somesite.com/image.jpg"), this.renderRotation());
+    }
+    renderUrlEditor() {
+        return R("div", { className: "mb-3" }, R("label", null, "URL to open"), R("input", {
+            type: "text",
+            className: "form-control",
+            value: this.state.url || "",
+            onChange: this.handleUrlChange
+        }), R("div", { className: "form-text text-muted" }, "e.g. http://somesite.com/"), R("div", { className: "form-text text-muted" }, "When clicked on image, this link will open"), R("div", null, R(ui.Checkbox, {
+            value: !this.state.openUrlInSameTab,
+            onChange: this.handleOpenUrlInSameTabChange
+        }, "Open link in new tab")));
+    }
+    render() {
+        if (!this.state.editing) {
+            return null;
+        }
+        const content = R("div", null, R("div", { className: "mb-3" }, R("label", null, "Caption"), R("input", {
+            type: "text",
+            className: "form-control",
+            value: this.state.caption || "",
+            onChange: this.handleCaptionChange,
+            placeholder: "Optional caption to display below image"
+        })), this.state.caption
+            ? R("div", { className: "mb-3" }, R("label", null, "Caption position"), R(ui.Select, {
+                options: [
+                    { value: "bottom", label: "Bottom" },
+                    { value: "top", label: "Top" }
+                ],
+                value: this.state.captionPosition,
+                onChange: this.handleCaptionPositionChange
+            }))
+            : undefined, R(TabbedComponent_1.default, {
+            tabs: [
+                { id: "upload", label: "Upload", elem: this.renderUploadEditor() },
+                { id: "expression", label: "From Data", elem: this.renderExpressionEditor() },
+                { id: "url", label: "From URL", elem: this.renderImageUrlEditor() }
+            ],
+            initialTabId: this.state.currentTab
+        }), 
+        // No target URL when using expressions
+        this.state.imageUrl || this.state.uid ? this.renderUrlEditor() : undefined);
+        const footer = R("div", null, R("button", { key: "save", type: "button", className: "btn btn-primary me-2", onClick: this.handleSave }, "Save"), R("button", { key: "cancel", type: "button", className: "btn btn-secondary", onClick: this.handleCancel }, "Cancel"));
+        return R(ModalPopupComponent_1.default, {
+            header: "Image",
+            footer
+        }, content);
+    }
+}
+// Image which is rotated by x degrees (0, 90, 180, 270)
+class RotatedImageComponent extends react_1.default.Component {
+    render() {
+        return R(AutoSizeComponent_1.default, { injectWidth: true, injectHeight: true }, (size) => {
+            const imageStyle = {};
+            const containerStyle = {};
+            // These css classes are defined in mwater-forms
+            const classes = (0, classnames_1.default)({
+                rotated: this.props.rotation,
+                "rotate-90": this.props.rotation && this.props.rotation === 90,
+                "rotate-180": this.props.rotation && this.props.rotation === 180,
+                "rotate-270": this.props.rotation && this.props.rotation === 270
+            });
+            imageStyle.width = "100%";
+            imageStyle.height = "100%";
+            imageStyle.objectFit = "contain";
+            // Set width if rotated left or right
+            if (this.props.rotation === 90 || this.props.rotation === 270) {
+                imageStyle.width = size.height;
+            }
+            const img = R("span", {
+                className: "rotated-image-container",
+                style: containerStyle
+            }, R("img", {
+                src: this.props.imgUrl,
+                style: imageStyle,
+                className: classes,
+                onClick: this.props.onClick,
+                alt: this.props.caption || ""
+            }));
+            if (!this.props.url) {
+                return img;
+            }
+            else {
+                return R("a", { href: this.props.url, target: (this.props.openUrlInSameTab ? undefined : "_blank") }, img);
+            }
+        });
+    }
+}

package/lib/widgets/ImagelistCarouselComponent.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+export interface ImagelistCarouselComponentProps {
+    /** Array of { id, cover: true/false } */
+    imagelist?: any;
+    widgetDataSource: any;
+    height?: number;
+}
+interface ImagelistCarouselComponentState {
+    activeImage: number;
+}
+export default class ImagelistCarouselComponent extends React.Component<ImagelistCarouselComponentProps, ImagelistCarouselComponentState> {
+    constructor(props: any);
+    handleLeft: () => void;
+    handleRight: () => void;
+    renderImage(img: any, i: any, imageManager: any): React.DetailedReactHTMLElement<{
+        className: string;
+        style: {
+            height: number | undefined;
+        };
+    }, HTMLElement>;
+    renderImages(imageManager: any): any;
+    render(): React.DetailedReactHTMLElement<{
+        className: string;
+        style: {
+            height: number | undefined;
+        };
+    }, HTMLElement> | null;
+}
+export {};