@lexriver/dome 1.3.0 → 1.4.0

package/README.md

@@ -1607,6 +1607,7 @@ export class AnimatedListTest extends DomeComponent<Attrs>{
         getHtmlElement: (x:number) => { // render element
             return <div>the number is {x}</div>
         },
+        emptyList:<div>Loading</div>
     })
 
     render(){

package/out/AnimatedArray.d.ts

@@ -1,27 +1,29 @@
-import { Animation } from './Animation';
-interface KeyToElementPair {
-    key: string;
-    element: HTMLElement;
-}
-export declare class AnimatedArray<T> {
-    protected params: {
-        parentElement?: HTMLElement;
-        array?: T[];
-        getKey: (o: T) => string;
-        getHtmlElement: (o: T) => HTMLElement;
-        animationShow?: Animation;
-        animationHide?: Animation;
-    };
-    arrayOfKeyToElement: KeyToElementPair[];
-    constructor(params: {
-        parentElement?: HTMLElement;
-        array?: T[];
-        getKey: (o: T) => string;
-        getHtmlElement: (o: T) => HTMLElement;
-        animationShow?: Animation;
-        animationHide?: Animation;
-    });
-    get size(): number;
-    update(array: T[], parentElement?: HTMLElement | Element): void;
-}
-export {};
+import { Animation } from './Animation';
+interface KeyToElementPair {
+    key: string;
+    element: HTMLElement;
+}
+export declare class AnimatedArray<T> {
+    protected params: {
+        parentElement?: HTMLElement;
+        array?: T[];
+        getKey: (o: T) => string;
+        getHtmlElement: (o: T) => HTMLElement;
+        animationShow?: Animation;
+        animationHide?: Animation;
+        emptyList?: HTMLElement;
+    };
+    arrayOfKeyToElement: KeyToElementPair[];
+    constructor(params: {
+        parentElement?: HTMLElement;
+        array?: T[];
+        getKey: (o: T) => string;
+        getHtmlElement: (o: T) => HTMLElement;
+        animationShow?: Animation;
+        animationHide?: Animation;
+        emptyList?: HTMLElement;
+    });
+    get size(): number;
+    update(array: T[], parentElement?: HTMLElement | Element): void;
+}
+export {};

package/out/AnimatedArray.js

@@ -1,44 +1,51 @@
-import { DomeManipulator } from "./DomeManipulator";
-import { LongestCommonSubsequence } from "./LongestCommonSubsequence";
-export class AnimatedArray {
-    constructor(params) {
-        this.params = params;
-        this.arrayOfKeyToElement = [];
-        if (params.array && params.parentElement) {
-            this.update(params.array);
-        }
-    }
-    get size() {
-        return this.arrayOfKeyToElement.length;
-    }
-    update(array, parentElement) {
-        parentElement = parentElement || this.params.parentElement;
-        if (!parentElement) {
-            console.warn('AnimatedArray unable to update, no parentElement');
-            return;
-        }
-        //let arrayOfKeyToElement:KeyToElementPair[] = []
-        let newArrayOfKeys = array.map((item) => this.params.getKey(item));
-        let oldArrayOfKeys = this.arrayOfKeyToElement.map(x => x.key);
-        LongestCommonSubsequence.getPatchOrdered({
-            oldArray: oldArrayOfKeys,
-            newArray: newArrayOfKeys,
-            onAdd: (index, key) => {
-                if (!parentElement)
-                    throw new Error('no parent element'); //TODO: remove this
-                let itemIndex = newArrayOfKeys.indexOf(key);
-                if (itemIndex == -1)
-                    throw new Error('no itemIndex'); //TODO: remove this
-                let item = array[itemIndex];
-                let element = this.params.getHtmlElement(item);
-                this.arrayOfKeyToElement.splice(index, 0, { key, element });
-                DomeManipulator.insertByIndexAsync(element, index, parentElement, this.params.animationShow);
-                //this.insertNewElementWithAnimation(element, index, parentElement)
-            },
-            onRemove: (index, key) => {
-                DomeManipulator.removeElementAsync(this.arrayOfKeyToElement[index].element, this.params.animationHide);
-                this.arrayOfKeyToElement.splice(index, 1);
-            }
-        });
-    }
-}
+import { DomeManipulator } from "./DomeManipulator";
+import { LongestCommonSubsequence } from "./LongestCommonSubsequence";
+export class AnimatedArray {
+    constructor(params) {
+        this.params = params;
+        this.arrayOfKeyToElement = [];
+        if (params.array && params.parentElement) {
+            this.update(params.array);
+        }
+    }
+    get size() {
+        return this.arrayOfKeyToElement.length;
+    }
+    update(array, parentElement) {
+        parentElement = parentElement || this.params.parentElement;
+        if (!parentElement) {
+            console.warn('AnimatedArray unable to update, no parentElement');
+            return;
+        }
+        if (array.length == 0 && this.params.emptyList) {
+            DomeManipulator.replaceAllChildrenAsync(parentElement, this.params.emptyList);
+            return;
+        }
+        if (array.length > 0 && this.params.emptyList) {
+            DomeManipulator.removeElementAsync(this.params.emptyList, this.params.animationHide);
+        }
+        //let arrayOfKeyToElement:KeyToElementPair[] = []
+        let newArrayOfKeys = array.map((item) => this.params.getKey(item));
+        let oldArrayOfKeys = this.arrayOfKeyToElement.map(x => x.key);
+        LongestCommonSubsequence.getPatchOrdered({
+            oldArray: oldArrayOfKeys,
+            newArray: newArrayOfKeys,
+            onAdd: (index, key) => {
+                if (!parentElement)
+                    throw new Error('no parent element'); //TODO: remove this
+                let itemIndex = newArrayOfKeys.indexOf(key);
+                if (itemIndex == -1)
+                    throw new Error('no itemIndex'); //TODO: remove this
+                let item = array[itemIndex];
+                let element = this.params.getHtmlElement(item);
+                this.arrayOfKeyToElement.splice(index, 0, { key, element });
+                DomeManipulator.insertByIndexAsync(element, index, parentElement, this.params.animationShow);
+                //this.insertNewElementWithAnimation(element, index, parentElement)
+            },
+            onRemove: (index, key) => {
+                DomeManipulator.removeElementAsync(this.arrayOfKeyToElement[index].element, this.params.animationHide);
+                this.arrayOfKeyToElement.splice(index, 1);
+            }
+        });
+    }
+}

package/out/AnimatedTable.d.ts

@@ -1,38 +1,38 @@
-import { DomeComponent, AnimatedArray } from ".";
-import { Animation } from './Animation';
-import { ObservableValue } from '@lexriver/observable';
-interface Attrs<T> {
-    isLoadingO?: ObservableValue<boolean>;
-    itemsO: ObservableValue<T[]>;
-    animationShowRow: Animation;
-    animationHideRow: Animation;
-    animationHideTable?: Animation;
-    animationShowTable?: Animation;
-    animationHideEmptyList?: Animation;
-    animationShowEmptyList?: Animation;
-    animationShowLoading?: Animation;
-    animationHideLoading?: Animation;
-    getKey: (item: T) => string;
-    rootElement?: HTMLElement;
-    tableElement?: HTMLElement;
-    tableBody?: HTMLElement;
-    renderTableHead?: (items: T[]) => HTMLElement;
-    renderTableRow: (item: T) => HTMLElement;
-    renderTableFooter?: (items: T[]) => HTMLElement;
-    renderEmptyList: () => HTMLElement;
-    renderLoading?: () => HTMLElement;
-}
-export declare class AnimatedTable<T> extends DomeComponent<Attrs<T>> {
-    refRoot: HTMLElement;
-    refTable: HTMLElement;
-    refTableHead: Element;
-    refTableBody: HTMLElement;
-    refTableFooter: Element;
-    refEmptyList: Element;
-    refLoading: Element;
-    animatedArray: AnimatedArray<T>;
-    render(): HTMLElement;
-    afterRender(): void;
-    updateAsync(): Promise<void>;
-}
-export {};
+import { DomeComponent, AnimatedArray } from ".";
+import { Animation } from './Animation';
+import { ObservableValue } from '@lexriver/observable';
+interface Attrs<T> {
+    isLoadingO?: ObservableValue<boolean>;
+    itemsO: ObservableValue<T[]>;
+    animationShowRow: Animation;
+    animationHideRow: Animation;
+    animationHideTable?: Animation;
+    animationShowTable?: Animation;
+    animationHideEmptyList?: Animation;
+    animationShowEmptyList?: Animation;
+    animationShowLoading?: Animation;
+    animationHideLoading?: Animation;
+    getKey: (item: T) => string;
+    rootElement?: HTMLElement;
+    tableElement?: HTMLElement;
+    tableBody?: HTMLElement;
+    renderTableHead?: (items: T[]) => HTMLElement;
+    renderTableRow: (item: T) => HTMLElement;
+    renderTableFooter?: (items: T[]) => HTMLElement;
+    renderEmptyList: () => HTMLElement;
+    renderLoading?: () => HTMLElement;
+}
+export declare class AnimatedTable<T> extends DomeComponent<Attrs<T>> {
+    refRoot: HTMLElement;
+    refTable: HTMLElement;
+    refTableHead: Element;
+    refTableBody: HTMLElement;
+    refTableFooter: Element;
+    refEmptyList: Element;
+    refLoading: Element;
+    animatedArray: AnimatedArray<T>;
+    render(): HTMLElement;
+    afterRender(): void;
+    updateAsync(): Promise<void>;
+}
+export {};

package/out/AnimatedTable.js

@@ -1,91 +1,91 @@
-import { DomeComponent, AnimatedArray } from ".";
-import { DomeManipulator } from "./DomeManipulator";
-export class AnimatedTable extends DomeComponent {
-    constructor() {
-        super(...arguments);
-        // rootElement
-        //   table
-        //     thead
-        //     tbody
-        //     tfooter
-        //   emptyList
-        this.refRoot = this.attrs.rootElement || document.createElement('div');
-        this.refTable = this.attrs.tableElement || document.createElement('table');
-        this.refTableHead = this.attrs.renderTableHead ? this.attrs.renderTableHead(this.attrs.itemsO.get()) : document.createElement('thead');
-        this.refTableBody = this.attrs.tableBody || document.createElement('tbody');
-        this.refTableFooter = this.attrs.renderTableFooter ? this.attrs.renderTableFooter(this.attrs.itemsO.get()) : document.createElement('tfoot');
-        this.refEmptyList = this.attrs.renderEmptyList ? this.attrs.renderEmptyList() : document.createElement('div');
-        this.refLoading = this.attrs.renderLoading ? this.attrs.renderLoading() : document.createElement('div');
-        this.animatedArray = new AnimatedArray({
-            animationHide: this.attrs.animationHideRow,
-            animationShow: this.attrs.animationShowRow,
-            array: [],
-            getKey: this.attrs.getKey,
-            getHtmlElement: this.attrs.renderTableRow
-        });
-    }
-    render() {
-        // refRoot
-        //     refTable
-        //         refTableHead
-        //         refTableBody
-        //         refTableFooter
-        //     refEmptyListEl
-        //     refLoading
-        this.refRoot.appendChild(this.refTable);
-        this.refRoot.appendChild(this.refEmptyList);
-        this.refRoot.appendChild(this.refLoading);
-        if (this.refTableHead)
-            this.refTable.appendChild(this.refTableHead);
-        if (this.refTableBody)
-            this.refTable.appendChild(this.refTableBody);
-        if (this.refTableFooter)
-            this.refTable.appendChild(this.refTableFooter);
-        console.log('AnimatedTable render()', 'refRoot=', this.refRoot);
-        return this.refRoot;
-    }
-    afterRender() {
-        this.updateAsync();
-        //this.animatedArray.update(this.attrs.items, this.el)
-    }
-    async updateAsync() {
-        try {
-            if (this.attrs.renderLoading) {
-                this.refLoading = await DomeManipulator.replaceAsync(this.refLoading, this.attrs.renderLoading());
-            }
-            if (this.attrs.isLoadingO && this.attrs.isLoadingO.get()) {
-                // show loading
-                await DomeManipulator.unhideElementAsync(this.refLoading, this.attrs.animationShowLoading);
-            }
-            else {
-                // hide loading
-                await DomeManipulator.hideElementAsync(this.refLoading, this.attrs.animationHideLoading);
-            }
-            const items = this.attrs.itemsO.get();
-            const currentCount = items.length;
-            if (currentCount == 0) {
-                // render empty list
-                await DomeManipulator.hideElementAsync(this.refTable, this.attrs.animationHideTable);
-                if (this.attrs.renderEmptyList) {
-                    this.refEmptyList = await DomeManipulator.replaceAsync(this.refEmptyList, this.attrs.renderEmptyList());
-                }
-                await DomeManipulator.unhideElementAsync(this.refEmptyList, this.attrs.animationShowEmptyList);
-            }
-            else {
-                // render list with items
-                await DomeManipulator.hideElementAsync(this.refEmptyList, this.attrs.animationHideEmptyList);
-                if (this.attrs.renderTableHead) {
-                    this.refTableHead = await DomeManipulator.replaceAsync(this.refTableHead, this.attrs.renderTableHead(items));
-                }
-                if (this.attrs.renderTableFooter) {
-                    this.refTableFooter = await DomeManipulator.replaceAsync(this.refTableFooter, this.attrs.renderTableFooter(items));
-                }
-                await DomeManipulator.unhideElementAsync(this.refTable, this.attrs.animationShowTable);
-                this.animatedArray.update(items, this.refTableBody);
-            }
-        }
-        catch (x) {
-            console.error('AnimatedTable update failed', x);
-        }
-    }
-}
+import { DomeComponent, AnimatedArray } from ".";
+import { DomeManipulator } from "./DomeManipulator";
+export class AnimatedTable extends DomeComponent {
+    constructor() {
+        super(...arguments);
+        // rootElement
+        //   table
+        //     thead
+        //     tbody
+        //     tfooter
+        //   emptyList
+        this.refRoot = this.attrs.rootElement || document.createElement('div');
+        this.refTable = this.attrs.tableElement || document.createElement('table');
+        this.refTableHead = this.attrs.renderTableHead ? this.attrs.renderTableHead(this.attrs.itemsO.get()) : document.createElement('thead');
+        this.refTableBody = this.attrs.tableBody || document.createElement('tbody');
+        this.refTableFooter = this.attrs.renderTableFooter ? this.attrs.renderTableFooter(this.attrs.itemsO.get()) : document.createElement('tfoot');
+        this.refEmptyList = this.attrs.renderEmptyList ? this.attrs.renderEmptyList() : document.createElement('div');
+        this.refLoading = this.attrs.renderLoading ? this.attrs.renderLoading() : document.createElement('div');
+        this.animatedArray = new AnimatedArray({
+            animationHide: this.attrs.animationHideRow,
+            animationShow: this.attrs.animationShowRow,
+            array: [],
+            getKey: this.attrs.getKey,
+            getHtmlElement: this.attrs.renderTableRow
+        });
+    }
+    render() {
+        // refRoot
+        //     refTable
+        //         refTableHead
+        //         refTableBody
+        //         refTableFooter
+        //     refEmptyListEl
+        //     refLoading
+        this.refRoot.appendChild(this.refTable);
+        this.refRoot.appendChild(this.refEmptyList);
+        this.refRoot.appendChild(this.refLoading);
+        if (this.refTableHead)
+            this.refTable.appendChild(this.refTableHead);
+        if (this.refTableBody)
+            this.refTable.appendChild(this.refTableBody);
+        if (this.refTableFooter)
+            this.refTable.appendChild(this.refTableFooter);
+        console.log('AnimatedTable render()', 'refRoot=', this.refRoot);
+        return this.refRoot;
+    }
+    afterRender() {
+        this.updateAsync();
+        //this.animatedArray.update(this.attrs.items, this.el)
+    }
+    async updateAsync() {
+        try {
+            if (this.attrs.renderLoading) {
+                this.refLoading = await DomeManipulator.replaceAsync(this.refLoading, this.attrs.renderLoading());
+            }
+            if (this.attrs.isLoadingO && this.attrs.isLoadingO.get()) {
+                // show loading
+                await DomeManipulator.unhideElementAsync(this.refLoading, this.attrs.animationShowLoading);
+            }
+            else {
+                // hide loading
+                await DomeManipulator.hideElementAsync(this.refLoading, this.attrs.animationHideLoading);
+            }
+            const items = this.attrs.itemsO.get();
+            const currentCount = items.length;
+            if (currentCount == 0) {
+                // render empty list
+                await DomeManipulator.hideElementAsync(this.refTable, this.attrs.animationHideTable);
+                if (this.attrs.renderEmptyList) {
+                    this.refEmptyList = await DomeManipulator.replaceAsync(this.refEmptyList, this.attrs.renderEmptyList());
+                }
+                await DomeManipulator.unhideElementAsync(this.refEmptyList, this.attrs.animationShowEmptyList);
+            }
+            else {
+                // render list with items
+                await DomeManipulator.hideElementAsync(this.refEmptyList, this.attrs.animationHideEmptyList);
+                if (this.attrs.renderTableHead) {
+                    this.refTableHead = await DomeManipulator.replaceAsync(this.refTableHead, this.attrs.renderTableHead(items));
+                }
+                if (this.attrs.renderTableFooter) {
+                    this.refTableFooter = await DomeManipulator.replaceAsync(this.refTableFooter, this.attrs.renderTableFooter(items));
+                }
+                await DomeManipulator.unhideElementAsync(this.refTable, this.attrs.animationShowTable);
+                this.animatedArray.update(items, this.refTableBody);
+            }
+        }
+        catch (x) {
+            console.error('AnimatedTable update failed', x);
+        }
+    }
+}

package/out/AnimatedText.d.ts

@@ -1,13 +1,13 @@
-import { ObservableValue } from "@lexriver/observable";
-import { DomeComponent } from ".";
-import { CssClass } from "./DomeManipulator";
-interface Attrs {
-    textO: ObservableValue<string>;
-    tag?: string;
-    class?: CssClass;
-}
-export declare class AnimatedText extends DomeComponent<Attrs> {
-    render(): HTMLElement;
-    updateAsync(): Promise<void>;
-}
-export {};
+import { ObservableValue } from "@lexriver/observable";
+import { DomeComponent } from ".";
+import { CssClass } from "./DomeManipulator";
+interface Attrs {
+    textO: ObservableValue<string>;
+    tag?: string;
+    class?: CssClass;
+}
+export declare class AnimatedText extends DomeComponent<Attrs> {
+    render(): HTMLElement;
+    updateAsync(): Promise<void>;
+}
+export {};

package/out/AnimatedText.js

@@ -1,24 +1,24 @@
-import { DomeComponent } from ".";
-import { DomeManipulator } from "./DomeManipulator";
-export class AnimatedText extends DomeComponent {
-    render() {
-        //const result = this.attrs.tag ? document.createElement(this.attrs.tag) : document.createElement('span')
-        const result = document.createElement(this.attrs.tag || 'span');
-        //console.log('AnimatedText', 'this.attrs.class=',this.attrs.class)
-        if (this.attrs.class) {
-            DomeManipulator.setCssClasses(result, this.attrs.class);
-        }
-        result.append(this.attrs.textO.get());
-        return result;
-    }
-    async updateAsync() {
-        if (!this.rootElement)
-            return;
-        try {
-            this.rootElement = await DomeManipulator.replaceAsync(this.rootElement, this.render(), this.attrs.onHideAnimation, this.attrs.onShowAnimation);
-        }
-        catch (x) {
-            console.error('AnimatedText update failed', x);
-        }
-    }
-}
+import { DomeComponent } from ".";
+import { DomeManipulator } from "./DomeManipulator";
+export class AnimatedText extends DomeComponent {
+    render() {
+        //const result = this.attrs.tag ? document.createElement(this.attrs.tag) : document.createElement('span')
+        const result = document.createElement(this.attrs.tag || 'span');
+        //console.log('AnimatedText', 'this.attrs.class=',this.attrs.class)
+        if (this.attrs.class) {
+            DomeManipulator.setCssClasses(result, this.attrs.class);
+        }
+        result.append(this.attrs.textO.get());
+        return result;
+    }
+    async updateAsync() {
+        if (!this.rootElement)
+            return;
+        try {
+            this.rootElement = await DomeManipulator.replaceAsync(this.rootElement, this.render(), this.attrs.onHideAnimation, this.attrs.onShowAnimation);
+        }
+        catch (x) {
+            console.error('AnimatedText update failed', x);
+        }
+    }
+}

package/out/Animation.d.ts

@@ -1,4 +1,4 @@
-export interface Animation {
-    cssClassName: string;
-    timeMs: number;
-}
+export interface Animation {
+    cssClassName: string;
+    timeMs: number;
+}

package/out/Dome.d.ts

@@ -1,9 +1,9 @@
-export declare function h(tagName: any, attrs: any, ...childrenArgs: any[]): any;
-export declare const React: {
-    createElement: typeof h;
-    Fragment: {
-        new (): DocumentFragment;
-        prototype: DocumentFragment;
-    } | (() => void);
-};
-export default React;
+export declare function h(tagName: any, attrs: any, ...childrenArgs: any[]): any;
+export declare const React: {
+    createElement: typeof h;
+    Fragment: {
+        new (): DocumentFragment;
+        prototype: DocumentFragment;
+    } | (() => void);
+};
+export default React;