import React from "react"; interface PageMapperProps { href?: string; dataQA?: string; dataCollect?: string; dataCollectInfo?: string; dataTestId?: string; } interface PageControlMapper { /** * Propriedades para o controle da página anterior. */ prevControl?: { /** * URL para a página anterior. */ href?: string; /** * Evento disparado ao clicar no controle da página anterior. */ onClickEvent?(event: { prevPage: number; }): void; /** * Identificador de qualidade para a página anterior. */ dataQA?: string; /** * Coleta de dados para a página anterior. */ dataCollect?: string; /** * Coleta de informações para a página anterior. */ dataCollectInfo?: string; /** * Identificador de teste para a página anterior. */ dataTestId?: string; }; /** * Propriedades para o controle da próxima página. */ nextControl?: { /** * URL para a próxima página. */ href?: string; /** * Evento disparado ao clicar no controle da próxima página. */ onClickEvent?(event: { nextPage: number; }): void; /** * Identificador de qualidade para a próxima página. */ dataQA?: string; /** * Coleta de dados para a próxima página. */ dataCollect?: string; /** * Coleta de informações para a próxima página. */ dataCollectInfo?: string; /** * Identificador de teste para a próxima página. */ dataTestId?: string; }; } export interface PaginationProps extends PageControlMapper { /** * Essa propriedade define o total de páginas. */ total: number; /** * Essa propriedade define a página atual sendo exibida. */ current?: number; /** * Define um array de páginas, no seguinte formato: * * { * href?: string; * dataQA?: string; * dataCollect?: string; * dataCollectInfo?: string; * dataTestId?: string; * } */ pagesMapper?: PageMapperProps[]; /** * Propriedade de evento após o usuário clicar em uma página */ onPageClick?(event: { currentPage: number; }): void; } /** *
* * Obs: Esse componente precisa estar dentro de um ThemeProvider, para o carregamento de seu estilo. Nos sites em React de Drogasil e Drogaraia o ThemeProvider já encontra-se configurado como um componente de alto nível, portanto não há a necessidade de incluí-lo novamente. * *
* * Para utilizar esse componente, deve-se importar: * * ``` * import Pagination from "@raiadrogasil/pulso-react-components/Pagination"; * ``` * * ou * *
* * Obs: O método com chaves importa o código de todos os componentes, mesmo os que não estão listados entre as chave. Portanto, por questão de performance, é desaconselhado seu uso. * *
* * ``` * import { Pagination } from "@raiadrogasil/pulso-react-components/"; * ``` * * É possível renderizar os botões do componente como link com href, para indexação em mecanismos de busca (seguindo boas práticas de SEO) ou como button nos casos em que as páginas não possuem um href para serem acessadas e/ou não serão indexadas nos mecanismos de busca. Para carregar o componente com link é necessário adicionar uma lista com o link de cada página e o link das páginas anterior e próxima, utilizando as propriedades pageMapper, prevControl, nextControl (tipagem especificada abaixo). */ declare const Pagination: React.FC; export default Pagination;