Introdução

react-fenestra

Componente Responsivo em React para Interface de Usuário com Desktop, Ícones, Janelas e Barra de Tarefas.

Live Preview

Clique para acessar o preview

Instalação

Via NPM:

npm install react-fenestra

Utilização

//Importações padrão do React
import React from 'react';
import ReactDOM from 'react-dom/client';

// Importação dos componentes do React-Fenestra
import { Desktop, Icon } from 'react-fenestra';

//Aplicação da folha de estilo do Bootstrap e do Fenestra (necessário).
import "bootstrap/dist/css/bootstrap.css";
import "react-fenestra/css/fenestra.css";

//Importação de bibliotecas do FontAwesome (opcional).
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faWindowRestore } from '@fortawesome/free-solid-svg-icons';

//Renderização do nó raiz da aplicação
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>    
    <Desktop
      icons={[
        ({ fenestra }) =>
          <Icon title="Abrir Janela"
            icon={<FontAwesomeIcon icon={faWindowRestore} size="3x" />}
            onClick={() => fenestra.open({
              title: "Nova Janela",
              content: ({ fenestra }) =>
                <h1>Olá Mundo!</h1>
            })}
          />
      ]}
    />
  </React.StrictMode>
);

Resultado

API

<Desktop />

Renderiza um novo desktop com capacidade para gerenciar janelas. Possui uma única Propriedade icons para que seja repassada uma lista de itens clicáveis da Área de Trabalho

|Propriedade | Tipo |Valor Padrão|Detalhes| |-----|-------|------------|--------| |icons| Array |(vazio)| Lista de definições de componentes que serão renderizados no desktop. Em cada um dos ícones será injetada a propriedade fenestra que possuirá toda a API necessária para gerenciar a interface. Recomenda-se que seja acionado o método fenestra.open(window, callback) em um evento onClick do componente.|

Observe que o parâmetro icons recebe uma lista de Definições de componentes que receberão a propriedade fenestra com toda a interface de gerenciamento das janelas.

Exemplo de Definições

import React from 'react';
class MeuIcone extends React.Component {
    render(){
        return <button onClick={() => this.props.fenestra.open({title: "Nova Janela"})}>Abrir Janela</button>
    }
}
export default MeuIcone;

ou ainda:

const MeuIcone = ({fenestra}) => 
<button onClick={() => fenestra.open({title: "Nova Janela"})}>Abrir Janela</button>;

export default MeuIcone;

<Icon />

Componente utilitário para exibição dos ícones do Desktop

|Propriedade | Tipo |Valor Padrão|Detalhes| |-----|-------|------------|--------| |icon| Componente |(vazio)| Conteúdo a ser renderizado no local do ícone. |title| Componente | (vazio) | Conteúdo a ser renderizado no local do título. |onClick | Função | () => undefined | Função chamada ao se clicar sobre o ícone.

A propriedade fenestra

Todos os componentes renderizados no conteúdo das janelas recebem a propriedade fenestra, a qual possui os seguintes métodos e atributos:

|Atributo|Tipo|Valor Padrão|Detalhes |--------|----|------------|-----| |window | Objeto | (Segue abaixo) | Detalhes da janela em que foi aberto o componente. |window.title | string | (vazio) | Título da janela |window.index | inteiro | (incremental) | Indice único da janela. |window.content | Definição React | null | Definição do Conteúdo da janela. Tal definição receberá a propriedade fenestra ao ser instanciada. |window.maximized| bool | false | Indica se a janela está maximizada. |window.minimized | bool | false | Indica se a janela está minimizada. |window.active | bool | true | Indica se a janela está ativa (foreground). |window.top | inteiro | 0 | Indica a distância da janela à borda superior do desktop. |window.left | inteiro | 0 | Indica a distância da janela à borda esquerda do desktop. |window.width | inteiro | 600 | Indica a Largura atual da janela. |window.height | inteiro | 400 | Indica a Altura atual da janela. |window.moving | bool | false | Indica se a janela está em movimento. |window.resizing | bool | false | Indica se a janela está sendo redimensionada. |window.resizeable | bool | true | Indica se a janela é redimensionável. |window.moveable | bool | true | Indica se a janela é movível. |windows|window[]|[] |Lista de todas as janelas do desktop. |open| Função | (window, callback = (window) => undefined) => undefined| Abre uma nova janela no desktop com os parâmetros definidos por window. Após esta ação, o callback é chamado. |close| Função | (w = window, callback = () => undefined) => undefined|Fecha a janela atual ou a identificada. Após esta ação, o callback é chamado. |minimize| Função | (w = window) => undefined| Minimiza a janela. |toggleMaximized| Função | (w = window) => undefined| Maximiza/Restaura a Janela. |activate| Função | (w = window) => undefined| Ativa a janela. |setTitle| Função | (title, w = window) => undefined| Altera o Título da Janela. |setContent| Função | (content, w = window) => undefined| Altera o conteúdo da janela. |setPosition| Função | (top, left, w = window) => undefined|Altera a posição da janela. |setSize| Função | (width, height, w = window) => undefined| Altera o tamanho da janela. |startMove| Função | (posX, posY, w = window) => undefined| Inicia a movimentação da janela a partir da posição atual. |startResize| Função | (posX, posY, dir, w = window) => undefined| Inicia o redimensionamento da janela a partir da posição atual.

Notas da Versão

1.1.0

• Aprimoramento do redimensionamento das janelas

1.0.9

• Melhorias na responsividade da interface

Licença

MIT

Autor

Luiz Alfredo Galiza [email protected]

Engenheiro da Computação formado pela Universidade Federal do Pará, trabalha há mais de 20 anos na área de programação. É oficial do Corpo de Bombeiros Militar e atualmente coordena a equipe de desenvolvimento de sistemas da Secretaria de Segurança Pública do Pará.