Création d'un widget de liste de présélection

Le fichier create-wishlist-widget.tsx contient l'exemple de code source qui crée le widget de liste de présélection. Ce document décrit en détail la logique d'implémentation.

About this task

Procedure

Importez les composants d'interface utilisateur mise en forme à partir des packages @hcl-commerce-store-sdk/react-component et ajoutez une icône à partir de l'interface utilisateur matérielle.

//stadard libraries
import React from "react";
//UI
import {
 StyledGrid,
 StyledTextField,
 StyledBox,
 StyledPaper,
 StyledIconLabel,
 StyledButton,
} from "@hcl-commerce-store-sdk/react-component";
import Add from "@material-ui/icons/Add";

Créez une interface appelée CreateWishListWidgetProps avec les propriétés requises pour le composant fonctionnel CreateWishListWidget. Créez le composant de fonction React CreateWishListWidget et concevez le widget de création de liste de présélection à l'aide de l'interface utilisateur mise en forme importée et les composants de l'icône Ajouter à l'aide du code suivant :

interface CreateWishListWidgetProps {
translation: any;
WishListName: String;
handelWishListName: Function;
validateWishListName: Function;
canCreatewishlist: Function;
createWishList: Function;
EMPTY_STRING: string;
}

Propriétés	Descriptions
traduction	L'objet de traduction contient les chaînes i18n.
wishListName	Variable d'état d'ancrage React pour stocker le nom de la liste de présélection.
handleWishListName	Fonction de définition de l'état d'ancrage React pour définir le nom de la liste de présélection.
validateWishListName	Fonction permettant de valider le nom de la liste de présélection saisi.
canCreateWishList	Fonction permettant d'activer/désactiver le bouton Créer une liste.
createWishList	Fonction permettant de créer la liste de présélection qui appellera l'API REST.
EMPTY_STRING	Constante de chaîne vide “”.