Skip to content

Commit

Permalink
se optimizó el código y se mejoro la funcionalidad en como se maneja …
Browse files Browse the repository at this point in the history
…ciertos componentes. ahora el Toast se añade a una cola de espera para enseñar el siguiente mensaje.
  • Loading branch information
everskyblue committed Aug 14, 2024
1 parent 27f50b1 commit 2ac903d
Show file tree
Hide file tree
Showing 13 changed files with 320 additions and 304 deletions.
21 changes: 14 additions & 7 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { NavigationView, contentView, asFactory} from "tabris";
import { NavigationView, contentView } from "tabris";
import type {
Page,
Action,
SearchAction,
CompositeAddChildEvent,
Widget,
Constructor,
} from "tabris";
import { createProxies } from "./utils/proxy";
import { factory } from "./utils/proxy";

let navigation: NavigationView;

Expand All @@ -18,7 +20,6 @@ contentView.on(
}
);

export default addView;
export * from "./modal";
export * from "./navigation";
export * from "./preference";
Expand All @@ -31,6 +32,7 @@ export function addView(...widgets: (Page | Action | SearchAction)[]) {
*/
abstract class VoirRender {
abstract renderAction(): Action[];

abstract render(): Page;

constructor() {
Expand All @@ -45,10 +47,15 @@ abstract class VoirRender {
}
}

export interface Render {
renderAction(): (Action | SearchAction)[];
render(): Widget;
}

//@ts-ignore
export const Voir = Object.freeze({
Render: VoirRender,
factory(Class: VoirRender) {
//@ts-ignore
return createProxies(Class) as VoirRender;
factory(Class: Constructor<Render>) {
return factory(Class);
}
})
})
7 changes: 4 additions & 3 deletions src/modal/animation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,12 @@ export function animateHidden(
);
}

export async function animate(
export function animate(
element: Widget<any>,
delay: number,
duration: number
) {
await animateShow(element, delay, 300);
await animateHidden(element, duration, duration);
return Promise.resolve(animateShow(element, delay, 300)).then(()=> {
return Promise.resolve(animateHidden(element, duration, duration));
})
}
83 changes: 58 additions & 25 deletions src/modal/toast.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,51 +8,84 @@ import {
import AnimationTime from "./animation-time";
import { animate } from "./animation";

let stackToast: ({element: Composite, promise: ()=> Promise<any>})[] = [];

export default class Toast extends AnimationTime {
show: (time: number) => any;

readonly _message = TextView({
textColor: "white",
left: 0,
right: 0,
});

readonly _modal = Composite({
background: "black",
padding: 10,
cornerRadius: 10,
bottom: 30,
opacity: 0
}).append(this._message);

constructor(message: string, duration: number) {
super();

const font = "12px";

const size = sizeMeasurement.measureTextsSync([
{ text: message, font: "12px" },
{ text: message, font },
]);

const isMax: boolean = size[0].width > contentView.bounds.width - 20;
const props: Properties<Composite> = {};

if (isMax) {
props.left = 20;
props.right = 20;
this._modal.left = 20;
this._modal.right = 20;
} else {
props.centerX = true;
this._modal.centerX = true;
}

const textview = TextView({
text: message,
font: "12px",
textColor: "white",
left: 0,
right: 0,
});

const modal = Composite({
background: "black",
padding: 10,
cornerRadius: 10,
bottom: 30,
opacity: 0,
...props,
}).append(textview);

this._message.text = message;
this._message.font = font;

Object.defineProperty(this, "show", {
configurable: false,
value: async () => {
contentView.append(modal);
await animate(modal, 0, duration);
modal.dispose();
value: () => {
if (stackToast.length === 1) {
flush();
}
if (stackToast.length > 0) {
stackToast.push({
element: this._modal,
promise: () => new Promise((resolve)=> {
resolve(appendToast(this._modal))
})
})
} else {
const ani = appendToast(this._modal);
stackToast.push({
promise: ()=> ani,
element: this._modal
});
}
},
});

const flush = () => {
if (stackToast.length === 0) return;
const { promise, element } = stackToast.at(0);
promise().then(() => {
stackToast.shift();
element.dispose();
flush();
}).catch(console.log);
}

function appendToast(modal: Composite) {
contentView.append(modal);
return animate(modal, 0, duration);
}
}

static makeText(msg: string, duration: number = Toast.SHORT) {
Expand Down
Loading

0 comments on commit 2ac903d

Please sign in to comment.