Utilisation d'une interface de fenêtre de type bureau dans votre application React

Jetons un coup d'œil au composant KendoReact Window, qui vous permet de redimensionner, minimiser, maximiser et même faire glisser des éléments fenêtrés sur le Web de la même manière que les fonctionnalités de bureau.

Une très bonne chose à propos des applications de bureau est que vous pouvez facilement redimensionnez, minimisez, maximisez et même faites-les glisser. Vous êtes-vous déjà demandé comment quelque chose comme cela pourrait être mis en œuvre sur le Web ? C'est en fait assez simple avec KendoReactcar il propose un composant React Window qui fournit les fonctionnalités susmentionnées.

Dans cet article, vous apprendrez comment installer KendoReact, ajoutez une liste de rapports, puis implémentez le composant React Window pour afficher les détails complets du rapport dans plusieurs fenêtres et archiver ou désarchiver les rapports. Voir le gif ci-dessous.

Si vous souhaitez vérifier rapidement l'intégralité du code et jouer avec la démo, vous pouvez faire défiler jusqu'au bas de cet article, où vous pouvez trouver un exemple interactif StackBlitz.

Configuration du projet

Avant de commencer, nous devons configurer un projet React. Pour échafauder rapidement un nouveau projet, vous pouvez utiliser Create React App ou Vite. Pour cette démo, nous allons utiliser Create React App. Vous pouvez créer un projet React en exécutant l'une des commandes ci-dessous dans votre terminal.

npx create-react-app my-kendo-react-window
cd my-kendo-react-window
début npm

Voici les packages Kendo que nous devons également installer.

• @progress/kendo-react-dialogs
• @progress/kendo-theme-default
• @progress/kendo-licensing

Vous pouvez copiez le texte ci-dessous et collez-le dans votre terminal. Si vous utilisez yarnremplacez simplement npm install par yarn add.

npm install @progress/kendo-react-dialogs @progress/kendo -theme-default @progress/kendo-licensing

Le composant React Window fait partie du package KendoReact Dialogs. Nous devons également installer l'un des Thèmes Kendo UI. Dans cet exemple, nous utiliserons le Thème par défaut qui a été développé par les experts UX de Progress Telerik.

Remarque sur le package kendo-licensing : KendoReact est une bibliothèque d'interface utilisateur développée par des professionnels et distribuée sous licence commerciale . Son utilisation nécessite soit une clé de licence commerciale, soit une clé de licence d'essai active, facilement acquise en suivant ces étapes.

Après avoir installé les packages, nous devons importer les styles de thème dans App.js  :

import '@progress/kendo-theme-default/dist/all.css' ;

C'est tout pour la configuration initiale.

Création d'une liste de rapports

Nous allons commencer par créer un fichier avec les données des rapports.

src/components/Reports/reportsData.js

export const reportsData = [
  {
    identifiant: 1,
    auteur: "Marie",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar congue sapien, quis pellentesque orci porta ac. Curabitur bibendum pulvinar mauris vitae elementum. Vivamus a non lurpislamvel nunc corporem."[19659020],
    créé: "15/05/2021",
    archivé : faux,
  },
  {
    identifiant: 2,
    auteur: "Anna",
    text: "Vestibulum risus sem, posuere nec dolor vitae, posuere auctor justo. In tincidunt dolor ullamcorper, pharetra arcu id, gravida nibh. Quisque pulvinar finibus velit in blandit. Vestibulum edeget met leo velitus leo.",
    créé: "15/05/2021",
    archivé : faux,
  },
  {
    identifiant: 3,
    auteur : "Matthieu",
    text: "Entier turpis arcu, faucibus sit amet aliquam nec, sollicitudin sed ante. Cras accumsan massa id ex mattis, non fringilla tellus ultricies. Aenean odio arcu, faucibus eu massa eget, interdum fringilla ultricies. tellus molestie, bibendum nunc nec, sodales risus. Sed nec purus quis quam lobortis condimentum. "
    créé: "15/05/2021",
    archivé : faux,
  },
  {
    identifiant: 4,
    auteur : "William",
    text: "Curabitur eu nibh erat. Duis rhoncus arcu ex, et vulputate ligula maximus ac. Morbi scelerisque nisi non dolor auctor, eu feugiat velit gravida. Phasellus faucibus purus libero, ac pellentesque Duelit a finibus et. erat cursus, varius ex feugiat, interdum nunc.",
    créé: "15/05/2021",
    archivé : faux,
  },
] ;

Nous utiliserons ces données pour afficher une liste de rapports cliquables. Chaque élément a un identifiant unique qui sera utilisé comme clé dans la boucle.

Si vous n'êtes pas sûr de l'objectif de la clé prop dans les boucles de React, vous pouvez consulter l'un de mes articles précédents, " Un guide pour débutants sur les boucles dans React JSX", où j'explique pourquoi l'accessoire key est nécessaire et comment écrire des boucles dans React.[19659017]Nous avons également le nom de l'auteur, la date de création et la propriété archivée, qui indiquent l'état actuel d'un rapport. Ensuite, créons un composant Reports qui gérera le bouclage des données de rapports que nous venons de définir.

src/components/Reports/Reports.js

import styles from "./Reports.module.css";
import { reportsData } from "./reportsData"; 
import ReportItem from "./ReportItem";
import { useState } from "react" ;

const Rapports = () => {
  const [rapports, setReports] = useState(reportsData);

  return (
    <div >
      <h1>Rapports</h1>
      <div[19659127]className={styles.reportsList}>
        {rapports.carte(rapport => {
          retour (
            <ReportItem
              key={report.id}
              rapport={rapport}
            />
          );
        })}
      </div>
    </div>
  );
};[19659104]export default Rapports;

Nous utilisons des modules CSS pour ajouter des styles aux rapports. Nous avons également le composant ReportItemqui est utilisé pour chaque rapport dans le reportsData. Vous trouverez ci-dessous le code pour les deux.

src/components/Reports/Reports.module.css

.reportsList {
  max-width:  30rem;
  margin: 0 auto;
}


.reportItem + .reportItem {
  border-top: 1px solid #ddd;
}


.reportItem {[19659164]text-align: left;
  background: transparent;
  border: none;[19659164]curseur: pointeur;
  padding: 0.75rem;
  width: 370px ;
}


.reportItem:hover {
  background-color: #eee;
}[19659171].archivedReport {
  background-color: #f3f4f6;
}

src/components/Reports/ReportItem.js

import { useState } from "react";
import styles from "./Reports.module.css";

const ReportItem = props => {[19659111]const { rapport } = props;
  const { auteur, texte créé, archivé } = rapport
  retour (
    <>
      <bouton
        onClick={() => {}}
        className={`${styles.reportItem} ${
          archivé ? styles.archivéRapport : ""
        }`}
      >
        <div>
          {auteur} - {créé}
        </div>
        <span>{text.tranche(0, 55 ).padEnd(58, "...")}</span[19659020]>
      </bouton>
    </>
  );
};

export default ReportItem;

Dans le composant ReportItemnous avons un bouton qui contient des informations sur l'auteur, la date de création du rapport et un extrait de la description, complété par des points de suspension. Pour le moment, le bouton ne fait rien, car nous avons passé une fonction noop*. Maintenant, ajoutons enfin le composant React Window.

* Noop signifie une fonction "sans opération" qui ne fait fondamentalement rien.

Ajout du composant React Window

La fonctionnalité que nous voulons implémenter maintenant est assez Facile. Lorsque nous cliquons sur l'un des rapports, nous souhaitons ouvrir une nouvelle fenêtre de dialogue qui contiendra le texte intégral du rapport ainsi qu'un bouton pour archiver ou désarchiver le rapport. Commençons par créer un nouveau composant ReportWindow.

src/components/Reports/ReportWindow.js

import { Window, WindowActionsBar } from "@progress/kendo-react-dialogs";

const ReportWindow = accessoires => { 
  const { report, setShowWindow, onChangeArchiveStatus } = props;[196511190]const ]{ id, auteur, texte, archivé } = rapport;

  retour  (
    <Fenêtre
      titre={auteur}
      onClose={() => setShowWindow(false)}
      hauteur initiale={350}
    >
      <div>{text}</div>

      <WindowActionsBar layout="end">
        <bouton
          type="bouton"
          className="k-button k-primary"
          onClick={() => {
            onChangeArchiveStatus(id);[19659353]setShowWindow(false);
          }}
        >
          {`${archivé ? "Désarchiver" : "Archive"} rapport`}
        </bouton>
      </WindowActionsBar>
    </Fenêtre>
  )[19659020];
};

export default ReportWindow;

Nous avons importé les composants Window et WindowActionsBar du package @progress/kendo-react-dialogs. Le premier est la fenêtre de dialogue qui fournit des fonctionnalités pour minimiser, maximiser, redimensionner et faire glisser hors de la boîte. Ce dernier composant est utilisé pour ajouter des boutons actionnables. Dans ce cas, nous souhaitons ajouter un bouton qui archivera ou désarchivera un rapport.

Le composant ReportWindow recevra trois accessoires :

• report – L'objet de rapport du tableau reportsData. Il est utilisé pour afficher les données du rapport.
• setShowWindow – La fonction utilisée pour définir l'état d'ouverture du composant Window. Il attend une valeur booléenne.
• onChangeArchiveStatus – La fonction utilisée pour mettre à jour la propriété archivé du rapport. Il excepte un rapport id.

Nous renvoyons le composant Window qui contient le texte du rapport et le composant WindowActionsBar avec le bouton actionnable. Le bouton affichera un message « Archiver le rapport » ou « Unarchiver le rapport » en fonction de l'état actuel archivé du rapport.

Vous pouvez trouver la liste complète des accessoires acceptés dans la Fenêtre de réaction. ici et par le composant WindowActionsBar ici.

Maintenant, mettons à jour ReportItem et Reportscar nous devons ajouter la fonction onChangeArchiveStatus et un nouvel état pour gérer la visibilité du composant ReportWindow.

src/components/Reports/ReportItem.js

import { useState } from "react";
import ReportWindow from "./ReportWindow" ;
import styles de "./Reports.module.css";

const ReportItem[19659106]= accessoires => {
  const { report, onChangeArchiveStatus } = accessoires;
  const { auteur, texte, créé, archivé } = rapport ;
  const [showWindow, setShowWindow] = useState(false)[19659020];
  retour (
    <>
      <bouton
        onClick={() => setShowWindow(true)}
        className={`${styles.reportItem} ${
          archivé ? styles.archivéRapport : ""
        }`}
      >
        <div>
          {auteur} - {créé}
        </div>
        <span>{text.tranche(0, 55 ).padEnd(58, "...")}</span[19659020]>
      </bouton>
      {showWindow ? (
        <ReportWindow
          setShowWindow={setShowWindow}
          rapport={rapport}
          onChangeArchiveStatus={onChangeArchiveStatus}
        />
      ) : null}
    </>
  );
};

export[19659026]default ReportItem;

Comme vous pouvez le voir, nous avons importé le composant ReportWindowqui est rendu chaque fois que l'état showWindow est défini sur true. Vous pourriez maintenant penser, pourquoi avons-nous showWindow à l'intérieur du composant ReportItem et non Reports. En l'état, nous aurons un nouvel état pour chaque élément de rapport, et c'est exactement ce que nous voulons, car nous devons pouvoir ouvrir plusieurs fenêtres en même temps. C'est pourquoi chaque élément de rapport a son propre état pour le composant React Window.

Maintenant, mettons à jour le composant Reportscar c'est là que la fonction onChangeArchiveStatus vient de.

src/components/Reports/Reports.js

import styles from "./Reports.module.css";
 import { reportsData } from "./reportsData";
import ReportItem from "./ReportItem"[19659020];
import { useState } from "react";

const Rapports = ([19659020]) => {
  const [reports, setReports] = useState(reportsData);

  const onChangeArchiveStatus[19659106]= id => {
    const updatedReports = reports.map(report => {
      if (report.id === id) {
        return[19659027]{
          ...rapport,
          archivé: !rapport.archivé,
        };
      }
      retour rapport;[19659551]});
    setReports(updatedReports);
  };

  return (
     <div>
      <h1>Rapports</h1>
      <div className ={styles.rapportsListe}>
        {rapports.carte(rapport => {
          retour (
            <ReportItem
              key={report.id}
              rapport={rapport}
              onChangeArchiveStatus={onChangeArchiveStatus}
            />
          );
        })}
      </div>
    </div>
  );
};[19659104]export default Rapports;

La fonction onChangeArchiveStatus parcourt les rapports et inverse l'état archivé pour le rapport qui correspond à l'ID qui a été passé en argument. C'est tout ce que nous avons dû changer.

Chaque fois que vous cliquez sur un rapport, une React Window s'ouvre. De plus, vous pouvez cliquer sur le bouton Archive report pour modifier son statut archivé. Cela fermera immédiatement la Fenêtre de réactionet vous verrez que l'arrière-plan du rapport changera pour indiquer l'état archivé. Si vous souhaitez le modifier, ouvrez à nouveau le rapport et cliquez sur le bouton "Désarchiver le rapport".

Une très bonne chose à propos de la mise en œuvre de React Window ici est le fait que nous pouvons facilement ouvrir plusieurs rapports, redimensionnez-les et faites-les glisser, et affichez-en quelques-uns à la fois. Ci-dessous, vous pouvez essayer l'exemple interactif dans StackBlitz.

Vous pouvez également trouver le code complet dans ce référentiel GitHub.

Wrap-up

Nous avons créé avec succès un projet React, installé KendoReact, et mis en œuvre une fonctionnalité de type bureau qui nous permet d'avoir des modaux qui peuvent être minimisés, maximisés, redimensionnés et glissés.

KendoReact offre de nombreux composants utiles, et nous venons de couvrir les bases de l'utilisation du composant React Window. Par conséquent, assurez-vous de consulter sa documentation pour voir ce qui est possible d'autre.