Creación de un widget de lista de deseos

El archivo create-wishlist-widget.tsx contiene el código fuente de ejemplo que crea el widget de lista de deseos. Este documento describe detalladamente la lógica de implementación.

About this task

Procedure

Importe los componentes de la interfaz de usuario con estilo de los paquetes @hcl-commerce-store-sdk/react-component y añada un icono desde la interfaz de usuario Material.

//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";

Cree una interfaz llamada CreateWishListWidgetProps con las propiedades necesarias para el componente funcional CreateWishListWidget. Cree el componente de función react CreateWishListWidget y diseñe el widget de creación de lista de deseos utilizando la interfaz de usuario con estilo importada, así como los componentes de icono Añadir utilizando el siguiente código:

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

Propiedades	Descripciones
traducción	El objeto de traducción contiene las cadenas i18n.
wishListName	Variable de estado de gancho react para almacenar el nombre de la lista de deseos.
handleWishListName	Función de set de estado de gancho react para establecer el nombre de la lista de deseos.
validateWishListName	Función para validar el nombre de lista de deseos especificado.
canCreateWishList	Función para habilitar/inhabilitar el botón Crear lista.
createWishlist	Función para crear la lista de deseos que llamará a la API REST búsqueda.
EMPTY_STRING	Constante de cadena vacía “”.