L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Libérez le pouvoir du composant DatePicker de KendoReact
Le KendoReact DatePicker est un composant d'interface utilisateur React flexible qui vous permet de personnaliser chaque aspect de celui-ci avec un moteur de rendu personnalisé. Dans cet article de blog, nous expliquons comment personnaliser le composant Calendrier du DatePicker afin de mettre en évidence le calendrier des jours fériés aux États-Unis.
Discutons des dates dans nos applications React. Plus précisément, discutons de la possibilité pour les utilisateurs de sélectionner des dates via un sélecteur de date. Bien qu'il existe quelques choix, nous nous concentrerons aujourd'hui sur ce qui est disponible dans KendoReact un ensemble de composants d'interface utilisateur conçus et construits à partir de zéro pour React. Dans la démo que nous utiliserons dans ce blog, nous explorerons ce qu'un composant React DatePicker peut faire en utilisant KendoReact DatePicker comme exemple.
Normalement, ce composant affiche une sorte d'élément d'entrée et Lorsqu'un utilisateur interagit avec ce dernier, un calendrier apparaît dans une fenêtre contextuelle afin de l'aider à sélectionner une date particulière. En passant, si vous devez inclure une sélection de temps, il existe le composant DateTimePicker et pour travailler avec une plage de dates, vous avez DateRangePicker . Au-delà de la simple sélection de dates, un DatePicker peut également être un excellent moyen de présenter les jours disponibles et non disponibles. Il peut également mettre en évidence certaines dates pour que vos utilisateurs sachent que quelque chose de spécial se passe peut-être ce jour-là. Je ne sais pas pour vous, mais je dois constamment regarder si un jour particulier est un jour férié américain ou pas, alors pourquoi ne pas créer un React DatePicker qui présente le calendrier des jours fériés américains de 2019? Puisque tout le monde aime emoji, pourquoi ne pas remplacer les dates rendues par des dates applicables?
# 1 – Comprendre la flexibilité du KendoReact DatePicker
Le KendoReact DatePicker est un composant de l'interface utilisateur de React extrêmement personnalisable. Cela permet au développeur React de contrôler totalement l'aspect et la convivialité du composant. Il est important de comprendre en quoi cela peut différer de la personnalisation traditionnelle des options de configuration. Ce qui est unique à propos de ce composant, c'est qu'il est composé de trois parties et chacune de ces parties peut être complètement écrasée et être passée à un moteur de rendu personnalisé, ce qui signifie qu'un développeur a le plein contrôle du composant tout en conservant les fonctionnalités sous-jacentes. .
Il s’agit des éléments suivants:
- DateInput – Zone de texte et entrée permettant de mettre en évidence la date choisie ou d’afficher un masque lorsqu'aucune entrée n'a été fournie.
- Popup – la partie du composant d'interface utilisateur permettant l'affichage d'un calendrier lorsque vous cliquez sur l'icône DateInput ou sur l'icône DatePicker.
- Calendar – Le calendrier actuel affiché dans la fenêtre contextuelle susmentionnée.
Cela signifie que chaque élément de DatePicker KendoReact peut être personnalisé tout en conservant les fonctionnalités sous-jacentes du composant!
Aujourd'hui, nous allons nous concentrer sur la partie Calendrier de DatePicker. learn peut également être utilisé pour utiliser et personnaliser les éléments DateInput et Popup du DatePicker.
# 2 – Création de notre calendrier personnalisé
Définition de nos données
Commençons par les données souhaitées. utiliser. Une simple recherche sur le Web nous donnera une liste de tous les fêtes fédérales (aux États-Unis) et des jours où elles tombent au cours de l'année civile 2019. Dans cet esprit, il est logique de créer un tableau de ces jours avec le nom du jour férié, le date réelle ainsi que notre emoji . bien sûr!
const usHolidays = [
{ name: "New Year's Day", date: new Date("2019-01-01"), emoji: "?" },
{ name: "Martin Luther King Day", date: new Date("2019-01-21"), emoji: "?" },
{ name: "President's Day", date: new Date("2019-02-18"), emoji: "?" },
{ name: "Memorial Day", date: new Date("2019-05-27"), emoji: "??" },
{ name: "Independence Day", date: new Date("2019-07-04"), emoji: "?" },
{ name: "Labor Day", date: new Date("2019-09-02"), emoji: "?️" },
{ name: "Columbus Day", date: new Date("2019-10-14"), emoji: "?" },
{ name: "Veterans Day", date: new Date("2019-11-11"), emoji: "?️" },
{ name: "Thanksgiving Day", date: new Date("2019-11-28"), emoji: "?" },
{ name: "Christmas Day", date: new Date("2019-12-25"), emoji: "??" }
];
Utilisation du calendrier KendoReact
Le package KendoReact Calendar fait partie du programme KendoReact DateInputs npm, que nous utiliserons pour ajouter le DatePicker à notre. app. Pour ceux d'entre vous qui s'inquiètent de la taille globale du paquet (puisque plusieurs composants sont parfois dans un seul paquet): ne vous inquiétez pas, c'est là que l'arbre se secoue!
Pour ces exemples, nous utilisons le thème KendoReact Default mais le thème de KendoReact Bootstrap et le thème de KendoReact Material peuvent également être utilisés. Dans ce scénario, nous incluons un lien vers le fichier CSS compilé dans la balise head de notre fichier index.html mais les articles de documentation relatifs à l'un des thèmes indiquent comment inclure ces éléments. Si vous préférez utiliser ce processus, cela fait partie de notre processus global de regroupement d'applications.
La page de documentation KendoReact Calendar fournit les instructions d'installation du composant Calendrier. En passant à travers cela, nous pouvons ensuite créer notre premier composant React que nous allons construire en plus de l'application de démonstration suivante.
import * as React from 'react';
importer {Calendar} de '@ progress / kendo-react-dateinputs';
La classe d'exportation CustomCalendar étend React.Component {
render () {
revenir (
Ce qui rendra ce qui suit sur la page:
Création de cellules personnalisées dans le calendrier KendoReact
Il peut être utile de comprendre que le code HTML du calendrier KendoReact est un élément de tableau rempli d'éléments td qui représentent chaque cellule.
Il existe différentes façons de personnaliser des cellules dans le calendrier KendoReact allant de l'ajout d'informations supplémentaires pour chaque cellule à la prise en charge complète de ce qui est rendu dans chaque cellule. Ce dernier est ce que nous allons faire aujourd'hui. Cela signifie que pour conserver la structure du calendrier, tout ce que nous renverrons devra être enveloppé dans un élément
.
Pour cela, nous devons créer un nouveau composant React, CustomCalendarCell et créer notre vie un peu plus facile commençons avec un code standard:
la classe d'exportation CustomCalendarCell étend React.Component {
handleClick = () => {
this.props.onClick (this.props.value);
}
render () {
// rend les week-ends un peu opaques car un calendrier de vacances se concentre principalement sur les jours supplémentaires que nous avons pendant l'année (les week-ends sont déjà éteints!)
let style = {
curseur: 'pointeur',
opacité: this.props.isWeekend? .6: 1
};
const className = classNames ({
'k-state-selected': this.props.isSelected,
'axé sur k-state': this.props.isFocused
});
revenir (
{this.props.children}
);
}
}
Nous pouvons sans risque ignorer les variables de style de style et de nom de classe car elles ne sont là que pour aider avec certaines options de style pour nos cellules. style rend les jours de week-end un peu plus estompés (puisque nous avons ces jours de congé de toute façon) et className applique certaines classes CSS spécifiques à KendoReact aux cellules.
Ce morceau de code peut avoir dépassé:
handleClick = () => {
this.props.onClick (this.props.value);
}
Nous travaillons ici avec l'événement onClick () qui sera transmis à partir du composant Calendrier lui-même. Cela garantit que la sélection de notre cellule mettra correctement en évidence ladite cellule dans notre calendrier et fixera la valeur du calendrier au jour sélectionné.
Tout le reste devrait être facile à suivre. Cela ne changera pas le rendu normal du calendrier (à l’exception des jours de week-end), donc c’est une excellente base de départ.
Commençons à faire de ce calendrier le nôtre!
Nous connaissons déjà le nom et le format de nos données. Voyons donc comment nous pouvons prendre cela et vérifier si la date actuelle de la cellule de calendrier est l’un des jours fériés que nous souhaitons mettre en évidence. Quelque chose comme cela fonctionnerait parfaitement:
let emoji;
// trouve nos vacances et attribue le bon emoji - une simple boucle for devrait suffire!
pour (soit i = 0; i <usHolidays.length; i ++) {
if (usHolidays [i] .date.getUTCFullYear () == this.props.value.getUTCFullYear () &&
usHolidays [i] .date.getUTCMonth () == this.props.value.getUTCMonth () &&
usHolidays [i] .date.getUTCDate () == this.props.value.getUTCDate ()) {
emoji = usHolidays [i] .emoji;
style.backgroundColor = "rgba (255, 50, 85, 0.3)";
this.title = usHolidays [i] .name;
Pause;
};
}
Ce qui se passe ici, c'est que nous créons une variable emoji qui sera indéfinie si nous ne sommes pas en vacances et si quelque chose nous est attribué si nous avons trouvé de l'or. tombé en vacances.
Lorsqu'il s'agira de comparer des dates, nous allons garder les choses simples et simplement comparer l'année, le mois et le jour actuels pour chaque date. Le jour actuel de notre cellule provient de this.props.value et se trouve déjà dans un objet de date. Nous pouvons donc simplement appeler getUTCFullYear () getUTCMonth et getUTCDate () pour comparer nos deux dates. Nous utilisons les variantes UTC ici pour éviter des problèmes de fuseaux horaires pour notre échantillon.
Une fois que nous avons un match, nous affectons l’emoji de vacances à notre variable emoji mettons à jour le style . variable pour avoir une couleur de fond (avec 0.3 comme opacité) et définir le titre du jour du jour égal au nom du jour férié. Un jour normal, cela serait écrit comme «Lundi 10 juin 2019» et apparaîtra à la fois lorsque vous survolerez un élément et que vous l'utiliserez à des fins d'accessibilité.
Nous avons un dernier élément qui nous devons nous pencher sur la question et c’est comment utiliser cette correspondance pour mettre à jour le contenu de la cellule elle-même. Ceci est fait dans la fonction de render () lorsque nous appelons return . À l'heure actuelle, nous supposons que nous ne disposons que d'un seul type de cellule, mais que se passe-t-il si nous souhaitons étendre cela à un type pour nos émoticônes? Eh bien, le moyen le plus simple serait probablement de définir une variable représentant notre JSX en dehors de la déclaration ce qui change en fonction du jour normal ou de l'un de nos jours fériés.
let renderSpan;
si (emoji) {
renderSpan = {emoji} ;
}
autre {
renderSpan = {this.props.children} ;
}
revenir (
{renderSpan}
)
Comme nous le voyons ci-dessus, renderSpan devient une variable importante pour garantir le rendu du contenu correct tout en conservant bon nombre des accessoires communs nécessaires dans l'élément
.
de CustomCalendarCell nous devons l'importer dans notre premier composant où nous avons défini le calendrier et le défini comme le moteur de rendu de cellule:
import * en tant que React from 'react';
importer {Calendar} de '@ progress / kendo-react-dateinputs';
import {CustomCalendarCell} à partir de './customCalendarCell.jsx';
La classe d'exportation CustomCalendar étend React.Component {
render () {
revenir (
Avec tout cela mis en place, nous pouvons maintenant naviguer vers n'importe quel mois avec des vacances et voir les fruits de notre travail! Voici, par exemple, janvier 2019:
Remarquez comment survolant la bouteille de champagne emoji nous donne le titre "Jour du nouvel an"!
Voici tout ce qui a été mis en place jusqu'à présent dans un projet sur StackBlitz .
# 3 – Ajout de notre calendrier personnalisé à notre DatePicker React
Le calendrier étant personnalisé, la partie la plus difficile est terminée. À ce stade, nous pouvons tirer parti des options de personnalisation de KendoReact DatePicker et simplement passer à notre CustomCalendar .
Mettons à jour notre main.jsx pour l'importer. Composant DatePicker et mise à jour de la fonction render () afin d'inclure l'élément DatePicker .
en tant que React from 'react';
importer * en tant que ReactDOM à partir de 'react-dom';
importer {DatePicker} depuis '@ progress / kendo-react-dateinputs';
importer {CustomCalendar} de './customCalendar.jsx';
La classe App étend React.Component {
render () {
revenir (
C’est aussi simple que cela: définissez le calendrier du pilier de DatePicker égal à notre nouveau CustomCalendar et nous avons déjà terminé!
Une note voici que l'utilisation de onBlur garantit la propagation correcte du changement de valeur. C’est donc là que le composant fonctionne correctement, même avec nos pièces personnalisées.
Comme auparavant, voici le projet complet sur StackBlitz.
] Bien que les titres qui apparaissent actuellement soient une fonctionnalité intéressante, cela ne correspond pas vraiment au reste de l’apparence de notre application. C’est là que quelque chose comme l’info-bulle de KendoReact vient à la rescousse! Nous pouvons utiliser ceci pour prendre les mêmes titres mais les faire apparaître dans une info-bulle qui correspond à notre thème général.
Comme le montrent les démonstrations d’aide de KendoReact, cela se fait normalement en enveloppant l’élément que nous voulons tooltipify avec le
import * as React from 'react';
importer * en tant que ReactDOM à partir de 'react-dom';
importer {DatePicker} depuis '@ progress / kendo-react-dateinputs';
importer {Tooltip} de '@ progress / kendo-react-tooltip';
importer {CustomCalendar} de './customCalendar.jsx';
La classe App étend React.Component {
info-bulle = null;
// nous devons gérer l'événement blur pour nous assurer que mouseout provoque la disparition des info-bulles
handleBlur = (e) => {
this.tooltip.handleMouseOut ({clientX: 0, clientY: 0})
}
render () {
revenir (
this.tooltip && this.tooltip.handleMouseOver (événement)}
onMouseOut = {event => this.tooltip && this.tooltip.handleMouseOut (event)}
>
this.tooltip = info-bulle} anchorElement = "target" position = "top" openDelay = {300} />
)
}
}
ReactDOM.render (
Sans entrer dans les détails, le code supplémentaire que nous avons autour de onMouseOver et onMouseOut est conçu pour vous aider dans les cas où une info-bulle risque de durer lorsqu’il interagit avec le Calendrier et couvre les scénarios où elle peut ne pas disparaître lors du choix de la date.
Avec une simple inclusion de l'info-bulle et de quelques lignes de code, nous obtenons maintenant la vue suivante lorsque vous mettez en surbrillance une date dans notre composant sélecteur de date personnalisé.
Vous pouvez trouver le projet complet en action ici
Ceci n'est qu'un début
Comme nous l'avons souligné au début de la article, il ne s'agit que d'une partie du composant DatePicker de KendoReact pouvant être personnalisé. Nous nous sommes également attachés à la famille de composants d'interface utilisateur KendoReact au lieu d'ajouter d'autres composants personnalisés ou des bibliothèques tierces, ce qui est certainement possible. Si vous avez trouvé les informations détaillées ci-dessus utiles ou si vous souhaitez personnaliser un DatePicker dans votre application, n'hésitez pas à commenter et à partager vos expériences dans la section des commentaires ci-dessous!
Source link