Introdução
react-fenestra
Componente Responsivo em React para Interface de Usuário com Desktop, Ícones, Janelas e Barra de Tarefas.
Live 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
alfredogaliza@gmail.com
Luiz Alfredo GalizaEngenheiro 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á.