Componentes

Los componentes son la base fundamental de TypesCraft. Te permiten crear interfaces de usuario reutilizables y modulares. Cada componente puede contener su propia lógica y estado, lo que lo hace perfecto para construir aplicaciones complejas.

¿Qué es un Componente?

Un componente es una clase que extiende de Component y que implementa tres métodos principales:

build(context: Context) - Este método es obligatorio y debe retornar un árbol de widgets que define la interfaz del componente.
init() - Se ejecuta una sola vez cuando el componente es inicializado.
dispose() - Se ejecuta cuando el componente es desmontado, permitiendo limpiar recursos.

Creando un Componente

Para crear un componente, necesitas extender la clase Component y definir al menos el método build:

 
import { Component, Context } from "@seigenta/TypesCraft/widget";

class MiComponente extends Component {
    build(context: Context) {
        return new Container({
            child: new Text({text: "¡Hola Mundo!"}),
            style: new ContainerStyle({
                background: Color.blue(),
                padding: EdgeSize.all(Size.px(10))
            })
        });
    }
}

Método init()

El método init() es perfecto para inicializar el estado del componente o configurar listeners:

 
class MiComponente extends Component {
    private contador: number = 0;

    init() {
        // Inicializar el estado
        this.contador = 0;
        
        // Configurar un intervalo
        setInterval(() => {
            this.contador++;
            this.setState();
        }, 1000);
    }

    build(context: Context) {
        return new Text({text: `Contador: ${this.contador}`});
    }
}

Método dispose()

El método dispose() te permite limpiar recursos cuando el componente es desmontado:

 
class MiComponente extends Component {
    private intervalo: NodeJS.Timeout;

    init() {
        this.intervalo = setInterval(() => {
            // Lógica del intervalo
        }, 1000);
    }

    dispose() {
        // Limpiar el intervalo cuando el componente se desmonta
        clearInterval(this.intervalo);
    }

    build(context: Context) {
        return new Text({text: "Componente con intervalo"});
    }
}

Estado del Componente

Los componentes pueden mantener su propio estado interno. Para actualizar el estado y hacer que el componente se vuelva a renderizar, usa el método setState():

 
class MiComponente extends Component {
    private texto: string = "Hola";

    cambiarTexto() {
        this.texto = "Adiós";
        this.setState(); // Esto hará que el componente se vuelva a renderizar
    }

    build(context: Context) {
        return new Text({text: this.texto});
    }
}

Exportar e Importar Componentes

Puedes definir tus componentes en archivos separados (por ejemplo, MiComponente.ts) y exportarlos. Luego, puedes importarlos y utilizarlos dentro de otros componentes o en la configuración principal de tu aplicación. Esto promueve la reutilización y mantiene tu código organizado.

 
// archivo: src/components/MiBoton.ts
import { Component, Context, Text, Button, ButtonStyle, Color } from "@seigenta/TypesCraft/widget";

export class MiBoton extends Component {
    build(context: Context) {
        return new Button({
            child: new Text({ text: "Click Me!" }),
            style: new ButtonStyle({ background: Color.green() }),
            onClick: () => console.log("Botón clickeado!")
        });
    }
}

// archivo: src/main.ts
// Solo importamos lo necesario para este ejemplo específico
import { Component, Context } from "@seigenta/TypesCraft/widget";
import Container from "@seigenta/TypesCraft/widgets/containers/container";
import { MiBoton } from "./components/MiBoton";


class App extends Component {
    build(context: Context) {
        return new Container({
            child: new MiBoton() // Usando el componente importado
        });
    }
}

class Main extends MaterialApp {
    build(context: Context) {
        return new App();
    }
}

const app = new Main();
app.run();