se cambio de ts a js para implementar compatibilidad con tabris 2 y 3

src/index.ts → src/index.js

@@ -1,19 +1,12 @@
-import { NavigationView, contentView } from "tabris";
-import type {
-    Page,
-    Action,
-    SearchAction,
-    CompositeAddChildEvent,
-    Widget,
-    Constructor,
-} from "tabris";
+import { NavigationView } from "tabris";
 import { factory } from "./utils/proxy";
+import { contentView } from "./support";
 
-let navigation: NavigationView;
+let navigation;
 
 contentView.on(
     "addChild",
-    ({ child }: CompositeAddChildEvent<typeof contentView>) => {
+    ({ child }) => {
         if (child instanceof NavigationView && !navigation) {
             navigation = child;
         }
@@ -23,18 +16,14 @@ contentView.on(
 export * from "./modal";
 export * from "./navigation";
 export * from "./preference";
-export function addView(...widgets: (Page | Action | SearchAction)[]) {
+export function addView(...widgets) {
     return navigation.append(...widgets);
 }
 
 /**
  * @Version 0.4
  */
-abstract class VoirRender implements Render {
-    abstract renderAction(): (Action | SearchAction)[];
-
-    abstract render(): Widget;
-
+class VoirRender {
     constructor() {
         const elms = [];
 
@@ -47,15 +36,17 @@ abstract class VoirRender implements Render {
     }
 }
 
+/*
 export interface Render {
-    renderAction(): (Action | SearchAction)[];
+    renderAction(): (typeof Action | SearchAction)[];
     render(): Widget;
-}
+}*/
 
-//@ts-ignore
 export const Voir = Object.freeze({
     Render: VoirRender,
-    factory(Class: Constructor<Render>) {
+    factory(Class) {
         return factory(Class);
     }
 }) 
+
+export * from "./support"

src/modal/animation.ts → src/modal/animation.js

@@ -1,9 +1,7 @@
-import type { Widget } from "tabris";
-
 export function animateShow(
-    element: Widget<any>,
-    delay: number,
-    duration: number
+    element,
+    delay,
+    duration
 ) {
     return element.animate(
         {
@@ -18,9 +16,9 @@ export function animateShow(
 }
 
 export function animateHidden(
-    element: Widget<any>,
-    delay: number,
-    duration: number
+    element,
+    delay,
+    duration
 ) {
     return element.animate(
         {
@@ -35,9 +33,9 @@ export function animateHidden(
 }
 
 export function animate(
-    element: Widget<any>,
-    delay: number,
-    duration: number
+    element,
+    delay,
+    duration
 ) {
     return Promise.resolve(animateShow(element, delay, 300)).then(()=> {
         return Promise.resolve(animateHidden(element, duration, duration));

src/modal/modal.ts → src/modal/modal.js

@@ -1,50 +1,42 @@
 import {
     Button,
-    Color,
     Composite,
-    EventObject,
-    LayoutData,
-    Listeners,
     ScrollView,
     TextView,
-    contentView,
-    Widget,
-    AnyWidget,
-    Properties,
+    EventObject
 } from "tabris";
+import { Listeners, layoutData, isVersion2, contentView } from "../support";
 import { animateHidden, animateShow } from "./animation";
 
-class EventModal extends EventObject<any> {}
+class EventModal extends EventObject {}
 
 export default class Modal {
-    [k: string]: any;
-
-    remove: () => any;
+    /*remove: () => {};
     show: () => any;
-    setButtonAccept: (text: string) => Listeners<{ target: Button }>;
-    setButtonCancel: (text: string) => Listeners<{ target: Button }>;
-    addView: (...view: Widget<any>[]) => any;
+    setButtonAccept: (text: string) => typeof Listeners<{ target: Button }>;
+    setButtonCancel: (text: string) => typeof Listeners<{ target: Button }>;
+    addView: (...view: Widget[]) => any;
     removeView: () => any;
-    removeButtons: () => any;
-
-    constructor(attrs: any = {}) {
-        const buttons: Button[] = [];
+    removeButtons: () => any;*/
+    
+    constructor(attrs = {}) {
+        const buttons = [];
         //- iteracion
-        let buttonListenerAccept: Listeners<{ target: Button }>;
-        let buttonListenerCancel: Listeners<{ target: Button }>;
+        let buttonListenerAccept;
+        let buttonListenerCancel;
 
         let isAddButtons = false;
         let isDetach = false;
         let isShow = false;
 
         // ui size
         const { width: contentWidth } = contentView.bounds;
-        const { screenWidth: deviceWidth } = device;
+        const { screenWidth: deviceWidth } = tabris.device;
         const maxSize = 560;
 
-        const properties_modal_container: Properties<Composite> = {
+        const properties_modal_container = {
             elevation: 24,
-            centerY: true,
+            centerY: layoutData.centerY,
             padding: 10,
             cornerRadius: 5,
             opacity: 0,
@@ -64,14 +56,11 @@ export default class Modal {
         }
 
         const modalWrap = new Composite({
-            left: 0,
-            right: 0,
-            top: 0,
-            bottom: 0,
+            ...layoutData.stretch,
             opacity: 1,
             highlightOnTouch: false,
-            background: new Color(0, 0, 0, 50),
-        }).onTap((e: any) => e.preventDefault());
+            background: 'rgba(0, 0, 0, 0.50)',
+        }).onTap((e) => e.preventDefault());
 
         const modal_container = new Composite(
             properties_modal_container
@@ -92,20 +81,20 @@ export default class Modal {
 
         const modal_content = new Composite({
             top: "#modal-title",
-            bottom: LayoutData.prev,
-            right: 0,
-            left: 0,
+            bottom: 'prev()',
+            ...layoutData.stretchX
         });
 
         const modal_content_scrollable = new ScrollView({
-            layoutData: "stretchX",
+            layoutData: layoutData.stretchX,
+            id: 'modal_content_scrollable'
         }).appendTo(modal_content);
 
-        modal_container.onBoundsChanged(({ value }) => {
+        modal_container.on('boundsChanged', ({ value }) => {
             const { height: contentViewHeight } = contentView.bounds;
-
+            console.log(modal_container.layoutData)
             if (contentViewHeight < value.height) {
-                modal_container.layoutData = {
+                modal_container.set({
                     ...properties_modal_container,
                     height:
                         value.height > contentViewHeight
@@ -116,17 +105,18 @@ export default class Modal {
                             : maxSize > value.height
                             ? value.height
                             : maxSize,
-                };
-                modal_content.layoutData = {
-                    ...(modal_content.layoutData as any),
-                };
-                modal_content_scrollable.layoutData = "stretch";
+                });
+                console.log(modal_container.layoutData)
+                modal_content.set({
+                    ...(modal_content.layoutData),
+                });
+                modal_content_scrollable.set(layoutData.stretch);
             }
         });
 
         Object.defineProperty(this, "setButtonAccept", {
             configurable: false,
-            value: (text: string) => {
+            value: (text) => {
                 if (!buttonListenerAccept) {
                     buttonListenerAccept = createButton("accept", text);
                 }
@@ -136,7 +126,7 @@ export default class Modal {
 
         Object.defineProperty(this, "setButtonCancel", {
             configurable: false,
-            value: (text: string) => {
+            value: (text) => {
                 if (!buttonListenerCancel) {
                     buttonListenerCancel = createButton("cancel", text);
                 }
@@ -146,7 +136,7 @@ export default class Modal {
 
         Object.defineProperty(this, "addView", {
             configurable: false,
-            value: (...views: Widget<any>[]) =>
+            value: (...views) =>
                 modal_content_scrollable.append(views),
         });
 
@@ -157,7 +147,7 @@ export default class Modal {
                     isAddButtons = true;
                     modal_container.append(
                         new Composite({
-                            layoutData: "stretchX",
+                            layoutData: layoutData.stretchX,
                             id: "buttons-modal",
                             bottom: 0,
                         }).append(buttons)
@@ -204,16 +194,16 @@ export default class Modal {
             },
         });
 
-        function createButton(type: string, text: string) {
+        function createButton(type, text) {
             const btn = new Button({
                 text,
-                top: buttons.length === 0 ? "prev() 20" : "auto",
-                right: buttons.length === 0 ? 0 : "prev()",
+                top: "#modal_content_scrollable",
+                right: "prev()",
                 bottom: 0,
                 style: "text",
             });
-            const event = new Listeners<{ target: Button }>(btn, type);
-            btn.onTap(() => event.trigger(new EventModal()));
+            const event = new Listeners(btn, type);
+            btn.on('tap', () => event.trigger(new EventModal()));
             buttons.push(btn);
             return event;
         }

src/modal/toast.ts → src/modal/toast.js

@@ -1,49 +1,62 @@
 import {
     sizeMeasurement,
     TextView,
-    Composite,
-    contentView,
-    Properties,
+    Composite
 } from "tabris";
+import { contentView, isVersion2 } from "../support";
 import AnimationTime from "./animation-time";
 import { animate } from "./animation";
 
-let stackToast: ({element: Composite, promise: ()=> Promise<any>})[] = [];
+let stackToast = [];
 
 export default class Toast extends AnimationTime {
-    show: () => any;
+    show;
 
-    readonly _message = TextView({
+    _message = new TextView({
         textColor: "white",
         left: 0,
         right: 0,
     });
 
-    readonly _modal = Composite({
+    _modal = new Composite({
         background: "black",
         padding: 10,
         cornerRadius: 10,
         bottom: 30,
         opacity: 0
     }).append(this._message);
 
-    constructor(message: string, duration: number) {
+    constructor(message, duration) {
         super();
 
         const font = "12px";
+        const left = 20;
+        const right = 20;
 
-        const size = sizeMeasurement.measureTextsSync([
+        const size = sizeMeasurement?.measureTextsSync([
             { text: message, font },
-        ]);
-
-        const isMax: boolean = size[0].width > contentView.bounds.width - 20;
-        const props: Properties<Composite> = {};
+        ]) ?? [{ width: -1, height: -1}];
+
+        if (isVersion2) {
+            this._modal.once('boundsChanged', ({target, value: { width }}) => {
+                if (width > contentView.bounds.width) {
+                    target.set({
+                        left, 
+                        right, 
+                        centerX: undefined
+                    })
+                }
+            })
+        }
+
+        const isMax = size[0].width > contentView.bounds.width - 20;
+        const props = {};
 
         if (isMax) {
-            this._modal.left = 20;
-            this._modal.right = 20;
+            this._modal.left = left;
+            this._modal.right = right;
         } else {
-            this._modal.centerX = true;
+            this._modal.centerX = isVersion2 ? 0 : true;
         }
 
         this._message.text = message;
@@ -74,21 +87,21 @@ export default class Toast extends AnimationTime {
 
         const flush = () => {
             if (stackToast.length === 0) return;
-            const { promise, element } = stackToast.at(0);
+            const { promise, element } = stackToast[0];
             promise().then(() => {
                 stackToast.shift();
                 element.dispose();
                 flush();
             }).catch(console.log);
         }
 
-        function appendToast(modal: Composite) {
+        function appendToast(modal) {
             contentView.append(modal);
             return animate(modal, 0, duration);
         }
     }
 
-    static makeText(msg: string, duration: number = Toast.SHORT) {
+    static makeText(msg, duration = Toast.SHORT) {
         return new Toast(msg, duration);
     }
 }