@hpcc-js/form 3.4.4 → 3.4.6

package/src/Form.ts

@@ -1,337 +1,337 @@
-import { d3Event, HTMLWidget, select as d3Select, SVGWidget, Widget, WidgetArray } from "@hpcc-js/common";
-import { Button } from "./Button.ts";
-
-import "../src/Form.css";
-
-export class Form extends HTMLWidget {
-    tbody;
-    tfoot;
-    btntd;
-    _controls;
-    _maxCols;
-
-    constructor() {
-        super();
-
-        this._tag = "form";
-    }
-
-    data(): any;
-    data(_: any): this;
-    data(_?: any): any | this {
-        if (!arguments.length) {
-            const retVal = [];
-            this.inputsForEach(function (input) {
-                retVal.push(input.value());
-            });
-            return retVal;
-        } else {
-            this.inputsForEach(function (input, idx) {
-                if (_ && _.length > idx) {
-                    input.value(_[idx]).render();
-                }
-            });
-        }
-        return this;
-    }
-
-    inputsForEach(callback, scope?) {
-        let idx = 0;
-        this.inputs().forEach(function (inp) {
-            const inpArray = inp instanceof WidgetArray ? inp.content() : [inp];
-            inpArray.forEach(function (inp2) {
-                if (scope) {
-                    callback.call(scope, inp2, idx++);
-                } else {
-                    callback(inp2, idx++);
-                }
-            });
-        });
-    }
-
-    inputsMap(): { [name: string]: Widget } {
-        const retVal: { [name: string]: Widget } = {};
-        this.inputs().forEach(function (inp) {
-            retVal[inp.name()] = inp;
-        });
-        return retVal;
-    }
-
-    calcMaxColumns() {
-        let retVal = 0;
-        this.inputs().forEach(function (inputWidget) {
-            const inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
-            if (inputWidgetArray.length > retVal) {
-                retVal = inputWidgetArray.length;
-            }
-        });
-        return retVal;
-    }
-
-    values(): any;
-    values(_: any): this;
-    values(_?: any): any | this {
-        if (!arguments.length) {
-            const dataArr = {};
-            this.inputsForEach(function (inp) {
-                const type = inp.type ? inp.type() : "text";
-                const value = inp.value();
-                if (value || !this.omitBlank()) {
-                    switch (type) {
-                        case "checkbox":
-                            dataArr[inp.name()] = inp.value_exists() ? !!inp.value() : undefined;
-                            break;
-                        case "number":
-                            const v = inp.value();
-                            dataArr[inp.name()] = v === "" ? undefined : +v;
-                            break;
-                        case "text":
-                        default:
-                            dataArr[inp.name()] = inp.value_exists() ? inp.value() : undefined;
-                            break;
-                    }
-                }
-            }, this);
-            return dataArr;
-        } else {
-            this.inputsForEach(function (inp) {
-                if (_[inp.name()]) {
-                    inp.value(_[inp.name()]);
-                } else if (this.omitBlank()) {
-                    inp.value("");
-                }
-            }, this);
-        }
-        return this;
-    }
-
-    submit() {
-        let isValid = true;
-        if (this.validate()) {
-            isValid = this.checkValidation();
-        }
-        if (!this.allowEmptyRequest() && !this.inputs().some(function (w) {
-            if (w._class.indexOf("WidgetArray") !== -1) {
-                return w.content().some(function (wa) {
-                    return wa.hasValue();
-                });
-            }
-            return w.hasValue();
-        })) {
-            return;
-        }
-        this.click(isValid ? this.values() : null, null, isValid);
-    }
-
-    clear() {
-        this.inputsForEach(function (inp) {
-            switch (inp.classID()) {
-                case "form_Slider":
-                    if (inp.allowRange()) {
-                        inp.value([inp.low(), inp.low()]).render();
-                    } else {
-                        inp.value(inp.low()).render();
-                    }
-                    break;
-                case "form_CheckBox":
-                    inp.value(false).render();
-                    break;
-                case "form_Button":
-                    /* skip */
-                    break;
-                default:
-                    inp.value(undefined).render();
-                    break;
-            }
-        });
-    }
-
-    checkValidation() {
-        let ret = true;
-        const msgArr = [];
-        this.inputsForEach(function (inp) {
-            if (!inp.isValid()) {
-                msgArr.push("'" + inp.label() + "'" + " value is invalid.");
-            }
-        });
-        if (msgArr.length > 0) {
-            alert(msgArr.join("\n"));
-            ret = false;
-        }
-        return ret;
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        element.on("submit", function () {
-            d3Event().preventDefault();
-        });
-
-        this._placeholderElement.style("overflow", "auto");
-        const table = element
-            .append("table")
-            ;
-        this.tbody = table.append("tbody");
-        this.tfoot = table.append("tfoot");
-        this.btntd = this.tfoot.append("tr").append("td")
-            .attr("colspan", 2)
-            ;
-
-        const context = this;
-        this._controls = [
-            new Button()
-                .classed({ default: true })
-                .value("Submit")
-                .on("click", function () {
-                    context.submit();
-                }, true),
-            new Button()
-                .value("Clear")
-                .on("click", function () {
-                    context.clear();
-                }, true)
-        ];
-        const rightJust = context.btntd
-            .append("div")
-            .style("float", "right")
-            ;
-        this._controls.forEach(function (w) {
-            const leftJust = rightJust
-                .append("span")
-                .style("float", "left")
-                ;
-            w.target(leftJust.node()).render();
-        });
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-
-        this._maxCols = this.calcMaxColumns();
-
-        const context = this;
-        const rows = this.tbody.selectAll("tr").data(this.inputs());
-        rows.enter().append("tr")
-            .each(function (inputWidget, i) {
-                const element2 = d3Select(this);
-
-                const inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
-                inputWidgetArray.forEach(function (inputWidget2, idx) {
-                    element2.append("td")
-                        .attr("class", "prompt")
-                        ;
-                    const input = element2.append("td")
-                        .attr("class", "input")
-                        ;
-                    if (idx === inputWidgetArray.length - 1 && inputWidgetArray.length < context._maxCols) {
-                        input.attr("colspan", (context._maxCols - inputWidgetArray.length + 1) * 2);
-                    }
-                    inputWidget2.target(input.node()).render();
-                    if (inputWidget2 instanceof SVGWidget) {
-                        const bbox = inputWidget2.element().node().getBBox();
-                        input.style("height", bbox.height + "px");
-                        inputWidget2.resize().render();
-                    }
-
-                    if (inputWidget2._inputElement instanceof Array) {
-                        inputWidget2._inputElement.forEach(function (e) {
-                            e.on("keyup.form", function (w) {
-                                setTimeout(function () {
-
-                                    context._controls[0].disable(!context.allowEmptyRequest() && !context.inputs().some(function (w2) {
-                                        if (w2._class.indexOf("WidgetArray") !== -1) {
-                                            return w2.content().some(function (wa) {
-                                                return wa.hasValue();
-                                            });
-                                        }
-                                        return w2.hasValue();
-                                    }));
-                                }, 100);
-                            });
-                        });
-                    }
-                });
-            })
-            .merge(rows)
-            .each(function (inputWidget, i) {
-                const element2 = d3Select(this);
-                const inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
-                inputWidgetArray.forEach(function (inputWidget2, idx) {
-                    element2.select("td.prompt")
-                        .text(inputWidget2.label() + ":")
-                        ;
-                });
-            })
-            ;
-        rows.each(function (inputWidget, i) {
-            if (i === 0 && inputWidget.setFocus) {
-                inputWidget.setFocus();
-            }
-        });
-        rows.exit()
-            .each(function (inputWidget, i) {
-                const inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
-                inputWidgetArray.forEach(function (inputWidget2, idx) {
-                    inputWidget2.target(null);
-                });
-            })
-            .remove()
-            ;
-
-        this.tfoot
-            .style("display", this.showSubmit() ? "table-footer-group" : "none")
-            ;
-        this.btntd
-            .attr("colspan", this._maxCols * 2)
-            ;
-
-        // Disable Submit unless there is data
-        if (!this.allowEmptyRequest()) {
-            setTimeout(function () {
-                context._controls[0].disable(!context.allowEmptyRequest() && !context.inputs().some(function (w) {
-                    if (w._class.indexOf("WidgetArray") !== -1) {
-                        return w.content().some(function (wa) {
-                            return wa.hasValue();
-                        });
-                    }
-                    return w.hasValue();
-                }));
-            }, 100);
-        }
-
-    }
-
-    exit(domNode, element) {
-        this.inputsForEach(input => input.target(null));
-        super.exit(domNode, element);
-    }
-
-    click(row, col, sel) {
-    }
-}
-Form.prototype._class += " form_Form";
-
-export interface Form {
-    validate(): boolean;
-    validate(_: boolean): this;
-    validate_exists(): boolean;
-    inputs(): any[];
-    inputs(_: any[]): this;
-    inputs_exists(): boolean;
-    inputs_reset(): void;
-    showSubmit(): boolean;
-    showSubmit(_: boolean): this;
-    showSubmit_exists(): boolean;
-    omitBlank(): boolean;
-    omitBlank(_: boolean): this;
-    omitBlank_exists(): boolean;
-    allowEmptyRequest(): boolean;
-    allowEmptyRequest(_: boolean): this;
-    allowEmptyRequest_exists(): boolean;
-}
-
-Form.prototype.publish("validate", true, "boolean", "Enable/Disable input validation");
-Form.prototype.publish("inputs", [], "widgetArray", "Array of input widgets", null, { render: false });
-Form.prototype.publish("showSubmit", true, "boolean", "Show Submit/Cancel Controls");
-Form.prototype.publish("omitBlank", false, "boolean", "Drop Blank Fields From Submit");
-Form.prototype.publish("allowEmptyRequest", false, "boolean", "Allow Blank Form to be Submitted");
+import { d3Event, HTMLWidget, select as d3Select, SVGWidget, Widget, WidgetArray } from "@hpcc-js/common";
+import { Button } from "./Button.ts";
+
+import "../src/Form.css";
+
+export class Form extends HTMLWidget {
+    tbody;
+    tfoot;
+    btntd;
+    _controls;
+    _maxCols;
+
+    constructor() {
+        super();
+
+        this._tag = "form";
+    }
+
+    data(): any;
+    data(_: any): this;
+    data(_?: any): any | this {
+        if (!arguments.length) {
+            const retVal = [];
+            this.inputsForEach(function (input) {
+                retVal.push(input.value());
+            });
+            return retVal;
+        } else {
+            this.inputsForEach(function (input, idx) {
+                if (_ && _.length > idx) {
+                    input.value(_[idx]).render();
+                }
+            });
+        }
+        return this;
+    }
+
+    inputsForEach(callback, scope?) {
+        let idx = 0;
+        this.inputs().forEach(function (inp) {
+            const inpArray = inp instanceof WidgetArray ? inp.content() : [inp];
+            inpArray.forEach(function (inp2) {
+                if (scope) {
+                    callback.call(scope, inp2, idx++);
+                } else {
+                    callback(inp2, idx++);
+                }
+            });
+        });
+    }
+
+    inputsMap(): { [name: string]: Widget } {
+        const retVal: { [name: string]: Widget } = {};
+        this.inputs().forEach(function (inp) {
+            retVal[inp.name()] = inp;
+        });
+        return retVal;
+    }
+
+    calcMaxColumns() {
+        let retVal = 0;
+        this.inputs().forEach(function (inputWidget) {
+            const inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
+            if (inputWidgetArray.length > retVal) {
+                retVal = inputWidgetArray.length;
+            }
+        });
+        return retVal;
+    }
+
+    values(): any;
+    values(_: any): this;
+    values(_?: any): any | this {
+        if (!arguments.length) {
+            const dataArr = {};
+            this.inputsForEach(function (inp) {
+                const type = inp.type ? inp.type() : "text";
+                const value = inp.value();
+                if (value || !this.omitBlank()) {
+                    switch (type) {
+                        case "checkbox":
+                            dataArr[inp.name()] = inp.value_exists() ? !!inp.value() : undefined;
+                            break;
+                        case "number":
+                            const v = inp.value();
+                            dataArr[inp.name()] = v === "" ? undefined : +v;
+                            break;
+                        case "text":
+                        default:
+                            dataArr[inp.name()] = inp.value_exists() ? inp.value() : undefined;
+                            break;
+                    }
+                }
+            }, this);
+            return dataArr;
+        } else {
+            this.inputsForEach(function (inp) {
+                if (_[inp.name()]) {
+                    inp.value(_[inp.name()]);
+                } else if (this.omitBlank()) {
+                    inp.value("");
+                }
+            }, this);
+        }
+        return this;
+    }
+
+    submit() {
+        let isValid = true;
+        if (this.validate()) {
+            isValid = this.checkValidation();
+        }
+        if (!this.allowEmptyRequest() && !this.inputs().some(function (w) {
+            if (w._class.indexOf("WidgetArray") !== -1) {
+                return w.content().some(function (wa) {
+                    return wa.hasValue();
+                });
+            }
+            return w.hasValue();
+        })) {
+            return;
+        }
+        this.click(isValid ? this.values() : null, null, isValid);
+    }
+
+    clear() {
+        this.inputsForEach(function (inp) {
+            switch (inp.classID()) {
+                case "form_Slider":
+                    if (inp.allowRange()) {
+                        inp.value([inp.low(), inp.low()]).render();
+                    } else {
+                        inp.value(inp.low()).render();
+                    }
+                    break;
+                case "form_CheckBox":
+                    inp.value(false).render();
+                    break;
+                case "form_Button":
+                    /* skip */
+                    break;
+                default:
+                    inp.value(undefined).render();
+                    break;
+            }
+        });
+    }
+
+    checkValidation() {
+        let ret = true;
+        const msgArr = [];
+        this.inputsForEach(function (inp) {
+            if (!inp.isValid()) {
+                msgArr.push("'" + inp.label() + "'" + " value is invalid.");
+            }
+        });
+        if (msgArr.length > 0) {
+            alert(msgArr.join("\n"));
+            ret = false;
+        }
+        return ret;
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        element.on("submit", function () {
+            d3Event().preventDefault();
+        });
+
+        this._placeholderElement.style("overflow", "auto");
+        const table = element
+            .append("table")
+            ;
+        this.tbody = table.append("tbody");
+        this.tfoot = table.append("tfoot");
+        this.btntd = this.tfoot.append("tr").append("td")
+            .attr("colspan", 2)
+            ;
+
+        const context = this;
+        this._controls = [
+            new Button()
+                .classed({ default: true })
+                .value("Submit")
+                .on("click", function () {
+                    context.submit();
+                }, true),
+            new Button()
+                .value("Clear")
+                .on("click", function () {
+                    context.clear();
+                }, true)
+        ];
+        const rightJust = context.btntd
+            .append("div")
+            .style("float", "right")
+            ;
+        this._controls.forEach(function (w) {
+            const leftJust = rightJust
+                .append("span")
+                .style("float", "left")
+                ;
+            w.target(leftJust.node()).render();
+        });
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+
+        this._maxCols = this.calcMaxColumns();
+
+        const context = this;
+        const rows = this.tbody.selectAll("tr").data(this.inputs());
+        rows.enter().append("tr")
+            .each(function (inputWidget, i) {
+                const element2 = d3Select(this);
+
+                const inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
+                inputWidgetArray.forEach(function (inputWidget2, idx) {
+                    element2.append("td")
+                        .attr("class", "prompt")
+                        ;
+                    const input = element2.append("td")
+                        .attr("class", "input")
+                        ;
+                    if (idx === inputWidgetArray.length - 1 && inputWidgetArray.length < context._maxCols) {
+                        input.attr("colspan", (context._maxCols - inputWidgetArray.length + 1) * 2);
+                    }
+                    inputWidget2.target(input.node()).render();
+                    if (inputWidget2 instanceof SVGWidget) {
+                        const bbox = inputWidget2.element().node().getBBox();
+                        input.style("height", bbox.height + "px");
+                        inputWidget2.resize().render();
+                    }
+
+                    if (inputWidget2._inputElement instanceof Array) {
+                        inputWidget2._inputElement.forEach(function (e) {
+                            e.on("keyup.form", function (w) {
+                                setTimeout(function () {
+
+                                    context._controls[0].disable(!context.allowEmptyRequest() && !context.inputs().some(function (w2) {
+                                        if (w2._class.indexOf("WidgetArray") !== -1) {
+                                            return w2.content().some(function (wa) {
+                                                return wa.hasValue();
+                                            });
+                                        }
+                                        return w2.hasValue();
+                                    }));
+                                }, 100);
+                            });
+                        });
+                    }
+                });
+            })
+            .merge(rows)
+            .each(function (inputWidget, i) {
+                const element2 = d3Select(this);
+                const inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
+                inputWidgetArray.forEach(function (inputWidget2, idx) {
+                    element2.select("td.prompt")
+                        .text(inputWidget2.label() + ":")
+                        ;
+                });
+            })
+            ;
+        rows.each(function (inputWidget, i) {
+            if (i === 0 && inputWidget.setFocus) {
+                inputWidget.setFocus();
+            }
+        });
+        rows.exit()
+            .each(function (inputWidget, i) {
+                const inputWidgetArray = inputWidget instanceof WidgetArray ? inputWidget.content() : [inputWidget];
+                inputWidgetArray.forEach(function (inputWidget2, idx) {
+                    inputWidget2.target(null);
+                });
+            })
+            .remove()
+            ;
+
+        this.tfoot
+            .style("display", this.showSubmit() ? "table-footer-group" : "none")
+            ;
+        this.btntd
+            .attr("colspan", this._maxCols * 2)
+            ;
+
+        // Disable Submit unless there is data
+        if (!this.allowEmptyRequest()) {
+            setTimeout(function () {
+                context._controls[0].disable(!context.allowEmptyRequest() && !context.inputs().some(function (w) {
+                    if (w._class.indexOf("WidgetArray") !== -1) {
+                        return w.content().some(function (wa) {
+                            return wa.hasValue();
+                        });
+                    }
+                    return w.hasValue();
+                }));
+            }, 100);
+        }
+
+    }
+
+    exit(domNode, element) {
+        this.inputsForEach(input => input.target(null));
+        super.exit(domNode, element);
+    }
+
+    click(row, col, sel) {
+    }
+}
+Form.prototype._class += " form_Form";
+
+export interface Form {
+    validate(): boolean;
+    validate(_: boolean): this;
+    validate_exists(): boolean;
+    inputs(): any[];
+    inputs(_: any[]): this;
+    inputs_exists(): boolean;
+    inputs_reset(): void;
+    showSubmit(): boolean;
+    showSubmit(_: boolean): this;
+    showSubmit_exists(): boolean;
+    omitBlank(): boolean;
+    omitBlank(_: boolean): this;
+    omitBlank_exists(): boolean;
+    allowEmptyRequest(): boolean;
+    allowEmptyRequest(_: boolean): this;
+    allowEmptyRequest_exists(): boolean;
+}
+
+Form.prototype.publish("validate", true, "boolean", "Enable/Disable input validation");
+Form.prototype.publish("inputs", [], "widgetArray", "Array of input widgets", null, { render: false });
+Form.prototype.publish("showSubmit", true, "boolean", "Show Submit/Cancel Controls");
+Form.prototype.publish("omitBlank", false, "boolean", "Drop Blank Fields From Submit");
+Form.prototype.publish("allowEmptyRequest", false, "boolean", "Allow Blank Form to be Submitted");