jsl-ui 9.18.3 → 9.19.0

package/lib/components/time/TimeComponent.js

@@ -0,0 +1,113 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import "./TimeComponent.scss";
+import { EventHandler } from "../../interaction/eventhandler";
+import { helper } from "../../core/helper";
+import { date } from "../../core/date";
+var TimeComponent = /** @class */ (function () {
+    function TimeComponent(options) {
+        var _a;
+        this.options = __assign({
+            enabled: true,
+            id: helper.newDomGuid(),
+            inputMode: "HourMinute",
+            bindMode: "toModel",
+            placeholder: (options === null || options === void 0 ? void 0 : options.inputMode) === "HourMinuteSecond" ? "__:__:__" : "__:__"
+        }, options);
+        if (this.options.bindTo != null && this.options.bindMode !== "fromModel" && this.options.property != null && this.options.value == null) {
+            this.options.value = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
+                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
+                this.options.bindTo[this.options.property]);
+        }
+        this.options.onChange = EventHandler.Create(this.options.onChange);
+    }
+    TimeComponent.prototype.render = function () {
+        var _a, _b;
+        var val = this.options.value;
+        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
+            var current = this.getValue();
+            var newVal = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
+                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
+                this.options.bindTo[this.options.property]);
+            var newValStr = date.formatTime(newVal, this.options.inputMode);
+            if (newValStr !== current) {
+                val = newVal;
+                if (this.currentDom != null) {
+                    this.currentDom.value = newValStr;
+                }
+            }
+        }
+        return {
+            tag: "input", attr: {
+                id: this.options.id,
+                enabled: this.options.enabled,
+                value: date.formatTime(val, this.options.inputMode),
+                class: "time-comp " + ((_b = this.options.class) !== null && _b !== void 0 ? _b : ""),
+                style: this.options.style,
+                placeholder: this.options.placeholder,
+                change: this.raiseChangeEvent
+            }
+        };
+    };
+    TimeComponent.prototype.onCreate = function (node) {
+        this.currentDom = node.dom;
+    };
+    TimeComponent.prototype.onUpdate = function (node) {
+        this.currentDom = node.dom;
+    };
+    TimeComponent.prototype.getValue = function () {
+        if (this.currentDom == null) {
+            return "";
+        }
+        return this.currentDom.value;
+    };
+    TimeComponent.prototype.getValueAsDate = function (datePart) {
+        var x = datePart ? new Date(datePart.getTime()) : new Date();
+        try {
+            var parts = this.getValue().split(":");
+            x.setHours(parseInt(parts[0], 10));
+            if (parts.length > 1) {
+                x.setMinutes(parseInt(parts[1], 10));
+            }
+            else {
+                x.setMinutes(0);
+            }
+            if (this.options.inputMode === "HourMinuteSecond" && parts.length > 2) {
+                x.setSeconds(parseInt(parts[2], 10));
+            }
+            else {
+                x.setSeconds(0);
+            }
+        }
+        catch (e) {
+            console.log(e);
+            this.currentDom.value = "";
+            x.setHours(0);
+            x.setMinutes(0);
+            x.setSeconds(0);
+        }
+        return x;
+    };
+    TimeComponent.prototype.raiseChangeEvent = function (e, node) {
+        var _a;
+        if (this.options.enabled) {
+            var val = this.getValueAsDate(this.options.value);
+            if (this.options.bindTo && this.options.bindMode !== "fromModel" && this.options.property) {
+                this.options.bindTo[this.options.property] =
+                    ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(val) : val;
+            }
+            this.options.onChange.notify(val);
+        }
+    };
+    return TimeComponent;
+}());
+export { TimeComponent };

package/lib/components/time/TimeComponent.scss

@@ -0,0 +1,4 @@
+.time-comp {
+    width: 4em;
+    text-align: right;
+}

package/lib/components/tree-view/TreeViewComponent.d.ts

@@ -0,0 +1,23 @@
+import "./TreeViewStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+export interface ITreeViewComponentOptions {
+    data: ITreeViewChild;
+    renderItem?: (data: any) => IJSLVNode;
+    style?: string;
+    class?: string;
+}
+export interface ITreeViewChild {
+    id: string;
+    content: IJSLVNode | string;
+    children?: ITreeViewChild[];
+    collapsed?: boolean;
+}
+export declare class TreeViewComponent implements IJSLComponent {
+    private options;
+    private filteredData;
+    constructor(options: ITreeViewComponentOptions);
+    isEqual(node: IJSLComponent): boolean;
+    render(): IJSLVNode;
+    private renderNode;
+    private addChild;
+}

package/lib/components/tree-view/TreeViewComponent.js

@@ -0,0 +1,45 @@
+import "./TreeViewStyle.scss";
+var TreeViewComponent = /** @class */ (function () {
+    function TreeViewComponent(options) {
+        this.options = options;
+    }
+    TreeViewComponent.prototype.isEqual = function (node) {
+        return this.__proto__ === node.__proto__;
+    };
+    TreeViewComponent.prototype.render = function () {
+        var _a, _b;
+        return {
+            tag: "div", attr: { style: this.options.style, class: "treeview-comp hover " + ((_a = this.options.class) !== null && _a !== void 0 ? _a : "") }, children: [
+                { tag: "ul", attr: { class: "tv-ul" }, children: [this.renderNode((_b = this.filteredData) !== null && _b !== void 0 ? _b : this.options.data)] }
+            ]
+        };
+    };
+    TreeViewComponent.prototype.renderNode = function (el) {
+        var _this = this;
+        function getInput() {
+            var res = { tag: "input", attr: { class: "tv-input", type: "checkbox", id: el.id } };
+            if (el.collapsed) {
+                res.attr.checked = "checked";
+            }
+            return res;
+        }
+        return (el.children && el.children.length > 0) ?
+            { tag: "li", children: [
+                    getInput(),
+                    this.addChild({ tag: "label", attr: { for: el.id } }, this.options.renderItem != null ? this.options.renderItem(el) : el.content),
+                    { tag: "ul", attr: { class: "tv-ul" }, children: el.children.map(function (c) { return _this.renderNode(c); }) }
+                ] } :
+            this.addChild({ tag: "li" }, this.options.renderItem != null ? this.options.renderItem(el) : el.content);
+    };
+    TreeViewComponent.prototype.addChild = function (parent, content) {
+        if (typeof content === "string") {
+            parent.content = content;
+        }
+        else {
+            parent.children = [content];
+        }
+        return parent;
+    };
+    return TreeViewComponent;
+}());
+export { TreeViewComponent };

package/lib/components/tree-view/TreeViewStyle.scss

@@ -0,0 +1,96 @@
+
+$defaultColor: rgba(50,50,50, 0.5);
+// $hoverColor: #3B99FF;
+
+// @mixin transition-duration($duration: 1s){
+//   -webkit-transition-duration: $duration;
+//   -moz-transition-duration: $duration;
+//   -ms-transition-duration: $duration;
+//   -o-transition-duration: $duration;
+//   transition-duration: $duration;
+// }
+
+// @mixin transition-property($property){
+//   -webkit-transition-property: $property;
+//   -moz-transition-property: $property;
+//   -ms-transition-property: $property;
+//   -o-transition-property: $property;
+//   transition-property: $property;
+// }
+
+// @mixin user-select($select: none){
+//   -webkit-user-select: $select;
+//   -moz-user-select: $select;
+//   -ms-user-select: $select;
+//   -o-user-select: $select;
+//   user-select: $select;
+// }
+
+.treeview-comp {
+  // float: left;
+  // @include user-select;
+
+  // &:hover input ~ label:before,
+  // &.hover input ~ label:before{
+  //   opacity: 1.0;
+  //   @include transition-duration(0.5s);
+  // }
+  
+  .tv-ul {
+    // @include transition-duration;
+    list-style: none;
+    padding-left: 1em;
+    
+    // li {
+    //   span{
+    //     @include transition-property(color);
+    //     @include transition-duration;
+      
+    //     &:hover {
+    //       color: $hoverColor;
+    //       @include transition-duration(0.3s);
+    //     }
+    //   }
+    // }
+  }
+  
+  .tv-input{
+    display: none;
+    
+    &:checked ~ ul {
+      display: none;
+    }
+    
+    & ~ label {
+      cursor: pointer;
+      position: relative;
+    }
+    
+    & ~ label:before {
+      content: '';
+      width: 0;
+      height: 0;
+      position: absolute;
+      margin-left: -1em;
+      margin-top: 0.4em;
+      border-width: 4px;
+      border-style: solid;
+      border-top-color: transparent;
+      border-right-color: $defaultColor;
+      border-bottom-color: $defaultColor;
+      border-left-color: transparent;
+      // opacity: 0.0;
+      // @include transition-property(opacity);
+      // @include transition-duration;
+    }
+
+    &:checked ~ label:before {
+      margin-left: -0.8em;
+      border-width: 5px;
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: transparent;
+      border-left-color: $defaultColor;
+    }
+  }
+}

package/lib/components/virtual-render/VirtualRenderComponent.d.ts

@@ -0,0 +1,30 @@
+import "./VirtualRenderStyle.scss";
+import { IJSLComponent, IJSLVNode, JSLRender } from "jsl-render";
+export interface IVirtualArg {
+    index: number;
+    rowData: any;
+    container: IJSLVNode;
+}
+export interface IVirtualRenderOptions {
+    data: any[];
+    renderRow: (args: IVirtualArg) => string | IJSLVNode | IJSLComponent | void;
+    rowHeight?: number;
+    rowTag?: string;
+    bufferSizeInPx?: number;
+    viewportSizeInPX?: number;
+    class?: string;
+    style?: string;
+}
+export declare class VirtualRenderComponent implements IJSLComponent {
+    State: {
+        scrollPos: number;
+        renderer?: JSLRender;
+    };
+    private options;
+    constructor(options: IVirtualRenderOptions);
+    isEqual(node: IJSLComponent): boolean;
+    setData(data: any[]): void;
+    onInit(renderer: JSLRender): void;
+    render(): IJSLVNode;
+    private getChildren;
+}

package/lib/components/virtual-render/VirtualRenderComponent.js

@@ -0,0 +1,104 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import "./VirtualRenderStyle.scss";
+var VirtualRenderComponent = /** @class */ (function () {
+    function VirtualRenderComponent(options) {
+        this.State = { scrollPos: 0 };
+        var defaultOptions = {
+            data: null,
+            renderRow: null,
+            bufferSizeInPx: 200,
+            rowHeight: 20,
+            rowTag: "div",
+            viewportSizeInPX: window.innerHeight
+        };
+        this.options = __assign(__assign({}, defaultOptions), options);
+    }
+    VirtualRenderComponent.prototype.isEqual = function (node) {
+        return this.__proto__ === node.__proto__;
+    };
+    VirtualRenderComponent.prototype.setData = function (data) {
+        this.options.data = data;
+    };
+    VirtualRenderComponent.prototype.onInit = function (renderer) {
+        this.State.renderer = renderer;
+    };
+    VirtualRenderComponent.prototype.render = function () {
+        var _this = this;
+        var _a, _b;
+        var o = this.options;
+        var vrBody = {
+            tag: "div",
+            attr: { class: "v-r-child", style: "height:" + (o.data.length * o.rowHeight) + "px;position:relative" },
+            children: this.getChildren()
+        };
+        var vrContainer = {
+            tag: "div", attr: {
+                class: "v-r-comp " + ((_a = o.class) !== null && _a !== void 0 ? _a : ""),
+                style: "overflow-y:auto;" + ((_b = o.style) !== null && _b !== void 0 ? _b : ""),
+                scroll: function (e, node) {
+                    var newScrollPos = node.dom.scrollTop;
+                    if (Math.abs(_this.State.scrollPos - newScrollPos) < o.bufferSizeInPx) {
+                        return false;
+                    }
+                    _this.State.scrollPos = newScrollPos;
+                    vrBody.children = _this.getChildren();
+                    node.children[0].children = [{ tag: "dummy" }];
+                    _this.State.renderer.updateNode(node.children[0], vrBody);
+                    return false;
+                }
+            }, children: [vrBody]
+        };
+        return vrContainer;
+    };
+    // public scrollRowToTop(idx: number) {
+    // }
+    // public scrollRowToCenter(idx: number) {
+    // }
+    // public scrollRowToBottom(idx: number) {
+    // }
+    VirtualRenderComponent.prototype.getChildren = function () {
+        var o = this.options;
+        var children = [];
+        var viewport = {
+            top: Math.floor((this.State.scrollPos - o.bufferSizeInPx) / o.rowHeight),
+            bottom: Math.ceil((this.State.scrollPos + o.viewportSizeInPX + o.bufferSizeInPx) / o.rowHeight)
+        };
+        for (var idx = viewport.top; idx < viewport.bottom; idx++) {
+            if (idx < 0 || idx >= o.data.length) {
+                continue;
+            }
+            var node = {
+                tag: o.rowTag, attr: {
+                    style: {
+                        top: (idx * o.rowHeight) + "px",
+                        height: o.rowHeight + "px",
+                        position: "absolute",
+                        left: "0",
+                        right: "0"
+                    }
+                }, children: []
+            };
+            var result = o.renderRow({ index: idx, container: node, rowData: o.data[idx] });
+            if (typeof result === "string") {
+                node.content = result;
+            }
+            else if (result != null) {
+                node.children.push(result);
+            }
+            children.push(node);
+        }
+        return children;
+    };
+    return VirtualRenderComponent;
+}());
+export { VirtualRenderComponent };

package/lib/components/virtual-render/VirtualRenderStyle.scss

@@ -0,0 +1,9 @@
+.v-r-comp {
+
+    height:100%;
+
+    .v-r-child > * {
+        height: 100%;
+    }
+
+}

package/lib/core/culture.d.ts

@@ -0,0 +1,5 @@
+declare let culture: any;
+/**
+ * culture info for date and number formatting and parsing
+ */
+export default culture;