@atom-learning/components 2.66.7 → 2.66.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -6
- package/dist/components/link/Link.d.ts +1 -1
- package/dist/components/link/Link.js.map +1 -1
- package/dist/components/pagination/Pagination.js +1 -1
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/pagination/PaginationNextButton.js +1 -1
- package/dist/components/pagination/PaginationNextButton.js.map +1 -1
- package/dist/components/pagination/PaginationPages.js +1 -1
- package/dist/components/pagination/PaginationPages.js.map +1 -1
- package/dist/components/pagination/PaginationPreviousButton.js +1 -1
- package/dist/components/pagination/PaginationPreviousButton.js.map +1 -1
- package/dist/components/pagination/pagination-context/PaginationContext.js +1 -1
- package/dist/components/pagination/pagination-context/PaginationContext.js.map +1 -1
- package/dist/components/pagination/pagination.helper.d.ts +4 -1
- package/dist/components/pagination/pagination.helper.js +1 -1
- package/dist/components/pagination/pagination.helper.js.map +1 -1
- package/dist/components/pagination/types.d.ts +4 -2
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
## [2.66.
|
|
1
|
+
## [2.66.8](https://github.com/Atom-Learning/components/compare/v2.66.7...v2.66.8) (2023-08-31)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
6
|
+
* initial work on improving pagination logic ([db84f1a](https://github.com/Atom-Learning/components/commit/db84f1a22d299808a805141b17aafb863a2fedd0))
|
|
7
|
+
* more improvements, fix for rendering glitch ([5ece055](https://github.com/Atom-Learning/components/commit/5ece055b57b23132a56dac59a909ef1796a6e463))
|
|
8
|
+
* revert no arrows change ([a7922cf](https://github.com/Atom-Learning/components/commit/a7922cf4e6d080040267c9c2abca60eeaca0a39d))
|
|
9
|
+
* tests ([7dcb4c0](https://github.com/Atom-Learning/components/commit/7dcb4c0524d542aa5e6aec80ef32e0b55bffcf45))
|
|
10
|
+
* types, paginationItems with more visible items ([57b3dc9](https://github.com/Atom-Learning/components/commit/57b3dc954c031f074f2f885af86d3f6f619fa4fc))
|
|
11
11
|
|
|
12
12
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
13
13
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import type { CSS, VariantProps } from '@stitches/react';
|
|
1
2
|
import * as React from 'react';
|
|
2
3
|
import { PolymorphicComponentPropWithRef } from '../../types';
|
|
3
|
-
import type { CSS, VariantProps } from '@stitches/react';
|
|
4
4
|
export declare const StyledLink: import("@stitches/react/types/styled-component").StyledComponent<"a", {
|
|
5
5
|
size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
|
|
6
6
|
noCapsize?: boolean | "true" | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { PolymorphicComponentPropWithRef } from '~/types'\nimport { isExternalLink } from '~/utilities/uri'\n\nimport { StyledHeading } from '../heading/Heading'\nimport { StyledLi } from '../list/List'\nimport { StyledMarkdownEmphasis } from '../markdown-content/components'\nimport { StyledText, textVariants } from '../text/Text'\
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import type { CSS, VariantProps } from '@stitches/react'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { PolymorphicComponentPropWithRef } from '~/types'\nimport { isExternalLink } from '~/utilities/uri'\n\nimport { StyledHeading } from '../heading/Heading'\nimport { StyledLi } from '../list/List'\nimport { StyledMarkdownEmphasis } from '../markdown-content/components'\nimport { StyledText, textVariants } from '../text/Text'\n\nexport const StyledLink = styled('a', {\n bg: 'unset',\n border: 'unset',\n p: 'unset',\n color: '$primary',\n cursor: 'pointer',\n fontFamily: '$body',\n textDecoration: 'none',\n '&:focus, &:hover': {\n color: '$primaryMid',\n textDecoration: 'underline'\n },\n '&:active': {\n color: '$primaryDark'\n },\n [`${StyledText} > &, ${StyledHeading} > &, ${StyledLi} > &, ${StyledMarkdownEmphasis} > &`]:\n {\n fontSize: '100%',\n lineHeight: 1,\n '&::before, &::after': {\n content: 'none'\n }\n },\n variants: textVariants,\n defaultVariants: {\n size: 'md'\n }\n})\n\ntype LinkProps<\n H extends string | undefined,\n C extends React.ElementType\n> = PolymorphicComponentPropWithRef<\n C,\n VariantProps<typeof StyledLink> & {\n css?: CSS\n href?: H\n }\n>\n\nexport const Link: <\n H extends string | undefined = undefined,\n C extends React.ElementType = H extends string ? typeof StyledLink : 'button'\n>(\n props: LinkProps<H, C>\n) => React.ReactElement | null = React.forwardRef(\n <\n H extends string | undefined = undefined,\n C extends React.ElementType = H extends string\n ? typeof StyledLink\n : 'button'\n >(\n { as, href, ...rest }: LinkProps<H, C>,\n ref?: LinkProps<H, C>['ref']\n ) => {\n const externalLinkProps = isExternalLink(href)\n ? { target: '_blank', rel: 'noopener noreferrer' }\n : {}\n\n return (\n <StyledLink\n as={as || (!href ? 'button' : undefined)}\n noCapsize={!href ? true : undefined}\n href={href}\n {...rest}\n {...externalLinkProps}\n ref={ref}\n />\n )\n }\n)\n"],"names":["StyledLink","styled","StyledText","StyledHeading","StyledLi","StyledMarkdownEmphasis","textVariants","Link","React","as","href","rest","ref","externalLinkProps","isExternalLink"],"mappings":"kmBAYO,MAAMA,EAAaC,EAAO,IAAK,CACpC,GAAI,QACJ,OAAQ,QACR,EAAG,QACH,MAAO,WACP,OAAQ,UACR,WAAY,QACZ,eAAgB,OAChB,mBAAoB,CAClB,MAAO,cACP,eAAgB,WAClB,EACA,WAAY,CACV,MAAO,cACT,EACA,CAAC,GAAGC,UAAmBC,UAAsBC,UAAiBC,SAC5D,CACE,SAAU,OACV,WAAY,EACZ,sBAAuB,CACrB,QAAS,MACX,CACF,EACF,SAAUC,EACV,gBAAiB,CACf,KAAM,IACR,CACF,CAAC,EAaYC,EAKoBC,EAAM,WACrC,CAME,CAAE,GAAAC,EAAI,KAAAC,KAASC,CAAK,EACpBC,IACG,CACH,MAAMC,EAAoBC,EAAeJ,CAAI,EACzC,CAAE,OAAQ,SAAU,IAAK,qBAAsB,EAC/C,CAEJ,EAAA,OACEF,EAAA,cAACR,GACC,GAAIS,IAAQC,EAAkB,OAAX,UACnB,UAAYA,EAAc,OAAP,GACnB,KAAMA,EACL,GAAGC,EACH,GAAGE,EACJ,IAAKD,CAAAA,CACP,CAEJ,CACF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as e from"react";import{ColorScheme as r}from"../../experiments/color-scheme/ColorScheme.js";import{Flex as i}from"../flex/Flex.js";import{PaginationProvider as m}from"./pagination-context/PaginationContext.js";import{PaginationNextButton as l}from"./PaginationNextButton.js";import{PaginationPages as c}from"./PaginationPages.js";import{PaginationPreviousButton as s}from"./PaginationPreviousButton.js";const o=({colorScheme:n,css:a,...t})=>t!=null&&t.pagesCount?e.createElement(r,{base:"grey1",accent:"blue1",...n,asChild:!0},e.createElement(i,{css:a},e.createElement(m,{...t},e.createElement(s,null),e.createElement(c,null),e.createElement(l,null)))):null;o.displayName="Pagination";export{o as Pagination};
|
|
2
2
|
//# sourceMappingURL=Pagination.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme'\nimport { Flex } from '
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme'\nimport { Flex } from '../flex'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { PaginationNextButton } from './PaginationNextButton'\nimport { PaginationPages } from './PaginationPages'\nimport { PaginationPreviousButton } from './PaginationPreviousButton'\nimport type { IPaginationProps } from './types'\n\nexport const Pagination: React.FC<IPaginationProps> = ({\n colorScheme,\n css,\n ...paginationProps\n}) => {\n // Return null if pages is 0 or undefined\n if (!paginationProps?.pagesCount) {\n return null\n }\n\n return (\n <ColorScheme base=\"grey1\" accent=\"blue1\" {...colorScheme} asChild>\n <Flex css={css}>\n <PaginationProvider {...paginationProps}>\n <PaginationPreviousButton />\n <PaginationPages />\n <PaginationNextButton />\n </PaginationProvider>\n </Flex>\n </ColorScheme>\n )\n}\n\nPagination.displayName = 'Pagination'\n"],"names":["Pagination","colorScheme","css","paginationProps","React","ColorScheme","Flex","PaginationProvider","PaginationPreviousButton","PaginationPages","PaginationNextButton"],"mappings":"2ZAUa,MAAAA,EAAyC,CAAC,CACrD,YAAAC,EACA,IAAAC,KACGC,CACL,IAEOA,GAAA,MAAAA,EAAiB,WAKpBC,EAAA,cAACC,EAAA,CAAY,KAAK,QAAQ,OAAO,QAAS,GAAGJ,EAAa,QAAO,EAC/DG,EAAAA,EAAA,cAACE,EAAA,CAAK,IAAKJ,CAAAA,EACTE,EAAA,cAACG,EAAA,CAAoB,GAAGJ,CAAAA,EACtBC,EAAA,cAACI,EAAA,IAAyB,EAC1BJ,EAAA,cAACK,EAAA,IAAgB,EACjBL,EAAA,cAACM,EAAA,IAAqB,CACxB,CACF,CACF,EAZO,KAgBXV,EAAW,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ChevronRight as
|
|
1
|
+
import{ChevronRight as m}from"@atom-learning/icons";import*as o from"react";import{styled as c}from"../../stitches.js";import{ActionIcon as p}from"../action-icon/ActionIcon.js";import{Icon as d}from"../icon/Icon.js";import{usePagination as g}from"./usePagination.js";const u=c(p,{ml:"$1","&:disabled":{opacity:"0.3"}}),b=i=>{const{goToNextPage:n,currentPage:a,pagesCount:e,labels:t,disabledPages:r,paginationItems:l}=g(),s=a===e||r.includes(e)&&l.includes(e-1);return o.createElement(u,{hasTooltip:!1,size:"md",theme:"neutral",onClick:n,disabled:s,...i,label:(t==null?void 0:t.nextPageButtonLabel)||"Next page"},o.createElement(d,{is:m}))};export{b as PaginationNextButton};
|
|
2
2
|
//# sourceMappingURL=PaginationNextButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationNextButton.js","sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport {
|
|
1
|
+
{"version":3,"file":"PaginationNextButton.js","sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n ml: '$1',\n '&:disabled': {\n opacity: '0.3'\n }\n})\n\nexport const PaginationNextButton = (\n props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n const {\n goToNextPage,\n currentPage,\n pagesCount,\n labels,\n disabledPages,\n paginationItems\n } = usePagination()\n\n // Check if we are on the last page or if the last page is disabled and the if the second to last page number is rendered\n const isDisabled =\n currentPage === pagesCount ||\n (disabledPages.includes(pagesCount) &&\n paginationItems.includes(pagesCount - 1))\n\n return (\n <StyledActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n onClick={goToNextPage}\n disabled={isDisabled}\n {...props}\n label={labels?.nextPageButtonLabel || 'Next page'}\n >\n <Icon is={ChevronRight} />\n </StyledActionIcon>\n )\n}\n"],"names":["StyledActionIcon","styled","ActionIcon","PaginationNextButton","props","goToNextPage","currentPage","pagesCount","labels","disabledPages","paginationItems","usePagination","isDisabled","React","Icon","ChevronRight"],"mappings":"2QASA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,GAAI,KACJ,aAAc,CACZ,QAAS,KACX,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CACJ,aAAAC,EACA,YAAAC,EACA,WAAAC,EACA,OAAAC,EACA,cAAAC,EACA,gBAAAC,CACF,EAAIC,IAGEC,EACJN,IAAgBC,GACfE,EAAc,SAASF,CAAU,GAChCG,EAAgB,SAASH,EAAa,CAAC,EAE3C,OACEM,EAAA,cAACb,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SAAUO,EACT,GAAGR,EACJ,OAAOI,GAAA,YAAAA,EAAQ,sBAAuB,aAEtCK,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAc,CAAA,CAC1B,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as e from"react";import{Flex as l}from"../flex/Flex.js";import{TRUNCATED_THRESHOLD as p}from"./pagination.constants.js";import{PaginationItem as t}from"./PaginationItem.js";import{PaginationPopover as i}from"./PaginationPopover.js";import{usePagination as g}from"./usePagination.js";const u=()=>{const{pagesCount:n,paginationItems:a,paginationAlignment:r}=g(),m=n>p;return e.createElement(l,{gap:1},m&&r==="start"&&e.createElement(e.Fragment,null,e.createElement(t,{pageNumber:1}),e.createElement(i,null)),a==null?void 0:a.map(o=>e.createElement(t,{key:o,pageNumber:o})),m&&r==="end"&&e.createElement(e.Fragment,null,e.createElement(i,null),e.createElement(t,{pageNumber:n})))};export{u as PaginationPages};
|
|
2
2
|
//# sourceMappingURL=PaginationPages.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationPages.js","sources":["../../../src/components/pagination/PaginationPages.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {
|
|
1
|
+
{"version":3,"file":"PaginationPages.js","sources":["../../../src/components/pagination/PaginationPages.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '../flex'\nimport { TRUNCATED_THRESHOLD } from './pagination.constants'\nimport { PaginationItem } from './PaginationItem'\nimport { PaginationPopover } from './PaginationPopover'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPages = () => {\n const { pagesCount, paginationItems, paginationAlignment } = usePagination()\n\n const isTruncated = pagesCount > TRUNCATED_THRESHOLD\n\n return (\n <Flex gap={1}>\n {isTruncated && paginationAlignment === 'start' && (\n <>\n <PaginationItem pageNumber={1} />\n <PaginationPopover />\n </>\n )}\n {paginationItems?.map((pageNumber) => (\n <PaginationItem key={pageNumber} pageNumber={pageNumber} />\n ))}\n {isTruncated && paginationAlignment === 'end' && (\n <>\n <PaginationPopover />\n <PaginationItem pageNumber={pagesCount} />\n </>\n )}\n </Flex>\n )\n}\n"],"names":["PaginationPages","pagesCount","paginationItems","paginationAlignment","usePagination","isTruncated","TRUNCATED_THRESHOLD","React","Flex","PaginationItem","PaginationPopover","pageNumber"],"mappings":"kSAQa,MAAAA,EAAkB,IAAM,CACnC,KAAM,CAAE,WAAAC,EAAY,gBAAAC,EAAiB,oBAAAC,CAAoB,EAAIC,EAAc,EAErEC,EAAcJ,EAAaK,EAEjC,OACEC,EAAA,cAACC,EAAA,CAAK,IAAK,CACRH,EAAAA,GAAeF,IAAwB,SACtCI,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACE,EAAA,CAAe,WAAY,CAAG,CAAA,EAC/BF,EAAA,cAACG,EAAA,IAAkB,CACrB,EAEDR,GAAA,KAAA,OAAAA,EAAiB,IAAKS,GACrBJ,EAAA,cAACE,EAAA,CAAe,IAAKE,EAAY,WAAYA,EAAY,CAE1DN,EAAAA,GAAeF,IAAwB,OACtCI,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACG,EAAA,IAAkB,EACnBH,EAAA,cAACE,EAAA,CAAe,WAAYR,CAAAA,CAAY,CAC1C,CAEJ,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ChevronLeft as
|
|
1
|
+
import{ChevronLeft as l}from"@atom-learning/icons";import*as o from"react";import{styled as m}from"../../stitches.js";import{ActionIcon as u}from"../action-icon/ActionIcon.js";import{Icon as c}from"../icon/Icon.js";import{usePagination as p}from"./usePagination.js";const d=m(u,{mr:"$1","&:disabled":{opacity:"0.3"}}),g=t=>{const{goToPreviousPage:i,currentPage:r,labels:e,disabledPages:n,paginationItems:a}=p(),s=r===1||n.includes(1)&&a.includes(1);return o.createElement(d,{hasTooltip:!1,size:"md",theme:"neutral",onClick:i,disabled:s,...t,label:(e==null?void 0:e.previousPageButtonLabel)||"Previous page"},o.createElement(c,{is:l}))};export{g as PaginationPreviousButton};
|
|
2
2
|
//# sourceMappingURL=PaginationPreviousButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationPreviousButton.js","sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport {
|
|
1
|
+
{"version":3,"file":"PaginationPreviousButton.js","sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n mr: '$1',\n '&:disabled': {\n opacity: '0.3'\n }\n})\n\nexport const PaginationPreviousButton = (\n props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n const {\n goToPreviousPage,\n currentPage,\n labels,\n disabledPages,\n paginationItems\n } = usePagination()\n\n // Check if we are on the first page or if the first page is disabled and the page number is rendered\n const isDisabled =\n currentPage === 1 ||\n (disabledPages.includes(1) && paginationItems.includes(1))\n\n return (\n <StyledActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n onClick={goToPreviousPage}\n disabled={isDisabled}\n {...props}\n label={labels?.previousPageButtonLabel || 'Previous page'}\n >\n <Icon is={ChevronLeft} />\n </StyledActionIcon>\n )\n}\n"],"names":["StyledActionIcon","styled","ActionIcon","PaginationPreviousButton","props","goToPreviousPage","currentPage","labels","disabledPages","paginationItems","usePagination","isDisabled","React","Icon","ChevronLeft"],"mappings":"0QASA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,GAAI,KACJ,aAAc,CACZ,QAAS,KACX,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CACJ,iBAAAC,EACA,YAAAC,EACA,OAAAC,EACA,cAAAC,EACA,gBAAAC,CACF,EAAIC,IAGEC,EACJL,IAAgB,GACfE,EAAc,SAAS,CAAC,GAAKC,EAAgB,SAAS,CAAC,EAE1D,OACEG,EAAA,cAACZ,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SAAUM,EACT,GAAGP,EACJ,OAAOG,GAAA,YAAAA,EAAQ,0BAA2B,iBAE1CK,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAa,CAAA,CACzB,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as t from"react";import{VisibleElementsAmount as A}from"../pagination.constants.js";import{findPreviousAvailablePage as I,findNextAvailablePage as E,getPaginationItemsToRender as S,getPaginationAlignment as k}from"../pagination.helper.js";const v=t.createContext({goToPage:()=>null,goToPreviousPage:()=>null,goToNextPage:()=>null,currentPage:1,pagesCount:0,onItemHover:()=>null,paginationItems:[],labels:{},indicatedPages:[],disabledPages:[],paginationAlignment:"end"}),H=({onSelectedPageChange:g,selectedPage:p,visibleElementsCount:s=A.LESS,pagesCount:a,indicatedPages:r=[],disabledPages:n=[],onItemHover:P=()=>null,labels:u={},children:C})=>{const[T,f]=t.useState(1),e=p||T,o=t.useCallback(i=>{f(i),g==null||g(i)},[g]),d=t.useCallback(()=>{if(e===1)return;const i=e-1,l=I(i,n);l<1||o(l)},[e,n,o]),m=t.useCallback(()=>{if(e===a)return;const i=e+1,l=E(i,n);l>a||o(l)},[e,n,o,a]),c=S(e,a,s),b=k(e,a,s),x=t.useMemo(()=>({goToNextPage:m,goToPreviousPage:d,goToPage:o,currentPage:e,paginationItems:c,indicatedPages:r,disabledPages:n,pagesCount:a,onItemHover:P,labels:u,paginationAlignment:b}),[m,d,o,e,r,c,n,a,P,u,b]);return t.createElement(v.Provider,{value:x},C)};export{v as PaginationContext,H as PaginationProvider};
|
|
2
2
|
//# sourceMappingURL=PaginationContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationContext.js","sources":["../../../../src/components/pagination/pagination-context/PaginationContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from '../pagination.constants'\nimport {\n findNextAvailablePage,\n findPreviousAvailablePage\n} from '../pagination.helper'\nimport type { IPaginationContext, TPaginationProviderProps } from '../types'\n\nexport const PaginationContext = React.createContext<IPaginationContext>({\n goToPage: () => null,\n goToPreviousPage: () => null,\n goToNextPage: () => null,\n currentPage: 1,\n
|
|
1
|
+
{"version":3,"file":"PaginationContext.js","sources":["../../../../src/components/pagination/pagination-context/PaginationContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from '../pagination.constants'\nimport {\n findNextAvailablePage,\n findPreviousAvailablePage,\n getPaginationAlignment,\n getPaginationItemsToRender\n} from '../pagination.helper'\nimport type { IPaginationContext, TPaginationProviderProps } from '../types'\n\nexport const PaginationContext = React.createContext<IPaginationContext>({\n goToPage: () => null,\n goToPreviousPage: () => null,\n goToNextPage: () => null,\n currentPage: 1,\n pagesCount: 0,\n onItemHover: () => null,\n paginationItems: [],\n labels: {},\n indicatedPages: [],\n disabledPages: [],\n paginationAlignment: 'end'\n})\n\nexport const PaginationProvider: React.FC<TPaginationProviderProps> = ({\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount = VisibleElementsAmount.LESS,\n pagesCount,\n indicatedPages = [],\n disabledPages = [],\n onItemHover = () => null,\n labels = {},\n children\n}) => {\n const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n\n const currentPage = selectedPage || internalCurrentPage\n\n const goToPage = React.useCallback(\n (pageNumber: number) => {\n setInternalCurrentPage(pageNumber)\n onSelectedPageChange?.(pageNumber)\n },\n [onSelectedPageChange]\n )\n\n const goToPreviousPage = React.useCallback(() => {\n if (currentPage === 1) {\n return\n }\n const previousPage = currentPage - 1\n const previousAvailablePage = findPreviousAvailablePage(\n previousPage,\n disabledPages\n )\n\n if (previousAvailablePage < 1) return\n goToPage(previousAvailablePage)\n }, [currentPage, disabledPages, goToPage])\n\n const goToNextPage = React.useCallback(() => {\n if (currentPage === pagesCount) {\n return\n }\n const nextPage = currentPage + 1\n const nextAvailablePage = findNextAvailablePage(nextPage, disabledPages)\n\n if (nextAvailablePage > pagesCount) return\n goToPage(nextAvailablePage)\n }, [currentPage, disabledPages, goToPage, pagesCount])\n\n const paginationItems = getPaginationItemsToRender(\n currentPage,\n pagesCount,\n visibleElementsCount\n )\n const paginationAlignment = getPaginationAlignment(\n currentPage,\n pagesCount,\n visibleElementsCount\n )\n\n const value = React.useMemo(() => {\n return {\n goToNextPage,\n goToPreviousPage,\n goToPage,\n currentPage,\n paginationItems,\n indicatedPages,\n disabledPages,\n pagesCount,\n onItemHover,\n labels,\n paginationAlignment\n }\n }, [\n goToNextPage,\n goToPreviousPage,\n goToPage,\n currentPage,\n indicatedPages,\n paginationItems,\n disabledPages,\n pagesCount,\n onItemHover,\n labels,\n paginationAlignment\n ])\n\n return (\n <PaginationContext.Provider value={value}>\n {children}\n </PaginationContext.Provider>\n )\n}\n"],"names":["PaginationContext","React","PaginationProvider","onSelectedPageChange","selectedPage","visibleElementsCount","VisibleElementsAmount","pagesCount","indicatedPages","disabledPages","onItemHover","labels","children","internalCurrentPage","setInternalCurrentPage","currentPage","goToPage","pageNumber","goToPreviousPage","previousPage","previousAvailablePage","findPreviousAvailablePage","goToNextPage","nextPage","nextAvailablePage","findNextAvailablePage","paginationItems","getPaginationItemsToRender","paginationAlignment","getPaginationAlignment","value"],"mappings":"sPAWa,MAAAA,EAAoBC,EAAM,cAAkC,CACvE,SAAU,IAAM,KAChB,iBAAkB,IAAM,KACxB,aAAc,IAAM,KACpB,YAAa,EACb,WAAY,EACZ,YAAa,IAAM,KACnB,gBAAiB,CACjB,EAAA,OAAQ,CAAA,EACR,eAAgB,GAChB,cAAe,CACf,EAAA,oBAAqB,KACvB,CAAC,EAEYC,EAAyD,CAAC,CACrE,qBAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuBC,EAAsB,KAC7C,WAAAC,EACA,eAAAC,EAAiB,CACjB,EAAA,cAAAC,EAAgB,GAChB,YAAAC,EAAc,IAAM,KACpB,OAAAC,EAAS,CAAA,EACT,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAqBC,CAAsB,EAAIb,EAAM,SAAS,CAAC,EAEhEc,EAAcX,GAAgBS,EAE9BG,EAAWf,EAAM,YACpBgB,GAAuB,CACtBH,EAAuBG,CAAU,EACjCd,GAAA,MAAAA,EAAuBc,CACzB,CAAA,EACA,CAACd,CAAoB,CACvB,EAEMe,EAAmBjB,EAAM,YAAY,IAAM,CAC/C,GAAIc,IAAgB,EAClB,OAEF,MAAMI,EAAeJ,EAAc,EAC7BK,EAAwBC,EAC5BF,EACAV,CACF,EAEIW,EAAwB,GAC5BJ,EAASI,CAAqB,CAChC,EAAG,CAACL,EAAaN,EAAeO,CAAQ,CAAC,EAEnCM,EAAerB,EAAM,YAAY,IAAM,CAC3C,GAAIc,IAAgBR,EAClB,OAEF,MAAMgB,EAAWR,EAAc,EACzBS,EAAoBC,EAAsBF,EAAUd,CAAa,EAEnEe,EAAoBjB,GACxBS,EAASQ,CAAiB,CAC5B,EAAG,CAACT,EAAaN,EAAeO,EAAUT,CAAU,CAAC,EAE/CmB,EAAkBC,EACtBZ,EACAR,EACAF,CACF,EACMuB,EAAsBC,EAC1Bd,EACAR,EACAF,CACF,EAEMyB,EAAQ7B,EAAM,QAAQ,KACnB,CACL,aAAAqB,EACA,iBAAAJ,EACA,SAAAF,EACA,YAAAD,EACA,gBAAAW,EACA,eAAAlB,EACA,cAAAC,EACA,WAAAF,EACA,YAAAG,EACA,OAAAC,EACA,oBAAAiB,CACF,GACC,CACDN,EACAJ,EACAF,EACAD,EACAP,EACAkB,EACAjB,EACAF,EACAG,EACAC,EACAiB,CACF,CAAC,EAED,OACE3B,EAAA,cAACD,EAAkB,SAAlB,CAA2B,MAAO8B,CAChClB,EAAAA,CACH,CAEJ"}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import { VisibleElementsAmount } from './pagination.constants';
|
|
2
|
+
import { IPaginationAlignment } from './types';
|
|
3
|
+
export declare const getPaginationAlignment: (currentPage: number, pagesCount: number, visibleElementsCount: VisibleElementsAmount) => IPaginationAlignment;
|
|
4
|
+
export declare const getPaginationItemsToRender: (currentPage: number, pagesCount: number, visibleElementsCount?: VisibleElementsAmount) => number[];
|
|
2
5
|
export declare const findNextAvailablePage: (startPage: number, disabledPages: number[]) => number;
|
|
3
6
|
export declare const findPreviousAvailablePage: (startPage: number, disabledPages: number[]) => number;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const
|
|
1
|
+
import{TRUNCATED_THRESHOLD as a,VisibleElementsAmount as r}from"./pagination.constants.js";const o=e=>e===r.MORE?4:2,c=(e,i,t)=>e>i-o(t)?"start":"end",u=(e,i,t=r.LESS)=>{const n=o(t),l=Array.from({length:i},(m,s)=>s+1);return i<=a?l:(t===r.MORE?[1,2,3].includes(e):[1,2].includes(e))?l.slice(0,n):e>i-n?l.slice(-n):l.slice(t===r.MORE?e-3:e-2,t===r.MORE?e+1:e)},d=(e,i)=>{let t=e;for(;i.includes(t);)t++;return t},g=(e,i)=>{let t=e;for(;i.includes(t);)t--;return t};export{d as findNextAvailablePage,g as findPreviousAvailablePage,c as getPaginationAlignment,u as getPaginationItemsToRender};
|
|
2
2
|
//# sourceMappingURL=pagination.helper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.helper.js","sources":["../../../src/components/pagination/pagination.helper.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"pagination.helper.js","sources":["../../../src/components/pagination/pagination.helper.ts"],"sourcesContent":["import {\n TRUNCATED_THRESHOLD,\n VisibleElementsAmount\n} from './pagination.constants'\nimport { IPaginationAlignment } from './types'\n\n/**\n * Return the maximum number of pagination items required, dependent\n * on the total visible elements.\n *\n * Excludes the 1st and last page as they are rendered separately.\n *\n * So if `visibleElementsCount` is `MORE` (`8`), when we exclude the following 4 buttons,\n * previous, next, popup, and _either_ 1st/last page items, we'll get `4` remaining to render.\n */\nconst getPaginationItemsLimit = (visibleElementsCount: VisibleElementsAmount) =>\n visibleElementsCount === VisibleElementsAmount.MORE ? 4 : 2\n\nexport const getPaginationAlignment = (\n currentPage: number,\n pagesCount: number,\n visibleElementsCount: VisibleElementsAmount\n): IPaginationAlignment =>\n currentPage > pagesCount - getPaginationItemsLimit(visibleElementsCount)\n ? 'start'\n : 'end'\n\nexport const getPaginationItemsToRender = (\n currentPage: number,\n pagesCount: number,\n visibleElementsCount = VisibleElementsAmount.LESS\n): number[] => {\n const paginationItemsLimit = getPaginationItemsLimit(visibleElementsCount)\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n /**\n * If there are fewer pages than our threshold for truncating,\n * render the entire page list\n *\n * +---+ +---+ +---+ +---+\n * | 1 | | 2 | | 3 | | 4 |\n * +---+ +---+ +---+ +---+\n */\n if (pagesCount <= TRUNCATED_THRESHOLD) {\n return paginationItems\n }\n\n /**\n * If we're truncating and current page is at the start of the page list,\n * render the initial truncated page list, e.g.\n *\n * currentPage: 1/2\n * visibleElementsCount: 6 // VisibleElementsAmount.LESS\n * returns [1, 2]\n * +---+ +---+ +---+ +---+\n * | 1 | | 2 | | … | | 6 |\n * +---+ +---+ +---+ +---+\n *\n * currentPage: 1/2/3\n * visibleElementsCount: 8 // VisibleElementsAmount.MORE\n * returns [1, 2, 3, 4]\n * +---+ +---+ +---+ +---+ +---+ +----+\n * | 1 | | 2 | | 3 | | 4 | | … | | 10 |\n * +---+ +---+ +---+ +---+ +---+ +----+\n */\n if (\n visibleElementsCount === VisibleElementsAmount.MORE\n ? [1, 2, 3].includes(currentPage)\n : [1, 2].includes(currentPage)\n ) {\n return paginationItems.slice(0, paginationItemsLimit)\n }\n\n /**\n * If we're truncating and the current page is towards the end of the\n * page list (depending on visibleElementsCount),\n * render a truncated page list from the end, e.g.\n *\n * currentPage: 7\n * visibleElementsCount: 6 // VisibleElementsAmount.LESS\n * returns [7, 8]\n * +---+ +---+ +---+ +---+\n * | 1 | | … | | 7 | | 8 |\n * +---+ +---+ +---+ +---+\n *\n * currentPage: 7\n * visibleElementsCount: 8 // VisibleElementsAmount.MORE\n * returns [7, 8, 9, 10]\n * +---+ +---+ +---+ +---+ +---+ +---+\n * | 1 | | … | | 7 | | 8 | | 9 | | 10 |\n * +---+ +---+ +---+ +---+ +---+ +---+\n */\n if (currentPage > pagesCount - paginationItemsLimit) {\n return paginationItems.slice(-paginationItemsLimit)\n }\n\n /**\n * If we're truncating and the current page doesn't meet either previous condition\n * (we're in the middle)\n * render a truncated page list from a specific index relative to `currentPage`, e.g.\n *\n * currentPage: 4\n * visibleElementsCount: 6 // VisibleElementsAmount.LESS\n * returns [3, 4]\n * +---+ +---+ +---+ +---+\n * | 3 | | 4 | | … | | 6 |\n * +---+ +---+ +---+ +---+\n *\n * currentPage: 6\n * visibleElementsCount: 8 // VisibleElementsAmount.MORE\n * returns [4, 5, 6, 7]\n * +---+ +---+ +---+ +---+ +---+ +---+\n * | 4 | | 5 | | 6 | | 7 | | … | | 10 |\n * +---+ +---+ +---+ +---+ +---+ +---+\n */\n return paginationItems.slice(\n visibleElementsCount === VisibleElementsAmount.MORE\n ? currentPage - 3\n : currentPage - 2,\n visibleElementsCount === VisibleElementsAmount.MORE\n ? currentPage + 1\n : currentPage\n )\n}\n\nexport const findNextAvailablePage = (\n startPage: number,\n disabledPages: number[]\n): number => {\n let nextPage = startPage\n while (disabledPages.includes(nextPage)) {\n nextPage++\n }\n return nextPage\n}\n\nexport const findPreviousAvailablePage = (\n startPage: number,\n disabledPages: number[]\n): number => {\n let previousPage = startPage\n while (disabledPages.includes(previousPage)) {\n previousPage--\n }\n return previousPage\n}\n"],"names":["getPaginationItemsLimit","visibleElementsCount","VisibleElementsAmount","getPaginationAlignment","currentPage","pagesCount","getPaginationItemsToRender","paginationItemsLimit","paginationItems","_","index","TRUNCATED_THRESHOLD","findNextAvailablePage","startPage","disabledPages","nextPage","findPreviousAvailablePage","previousPage"],"mappings":"2FAeA,MAAMA,EAA2BC,GAC/BA,IAAyBC,EAAsB,KAAO,EAAI,EAE/CC,EAAyB,CACpCC,EACAC,EACAJ,IAEAG,EAAcC,EAAaL,EAAwBC,CAAoB,EACnE,QACA,MAEOK,EAA6B,CACxCF,EACAC,EACAJ,EAAuBC,EAAsB,OAChC,CACb,MAAMK,EAAuBP,EAAwBC,CAAoB,EACnEO,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAUA,OAAIL,GAAcM,EACTH,GAsBPP,IAAyBC,EAAsB,KAC3C,CAAC,EAAG,EAAG,CAAC,EAAE,SAASE,CAAW,EAC9B,CAAC,EAAG,CAAC,EAAE,SAASA,CAAW,GAExBI,EAAgB,MAAM,EAAGD,CAAoB,EAsBlDH,EAAcC,EAAaE,EACtBC,EAAgB,MAAM,CAACD,CAAoB,EAsB7CC,EAAgB,MACrBP,IAAyBC,EAAsB,KAC3CE,EAAc,EACdA,EAAc,EAClBH,IAAyBC,EAAsB,KAC3CE,EAAc,EACdA,CACN,CACF,EAEaQ,EAAwB,CACnCC,EACAC,IACW,CACX,IAAIC,EAAWF,EACf,KAAOC,EAAc,SAASC,CAAQ,GACpCA,IAEF,OAAOA,CACT,EAEaC,EAA4B,CACvCH,EACAC,IACW,CACX,IAAIG,EAAeJ,EACnB,KAAOC,EAAc,SAASG,CAAY,GACxCA,IAEF,OAAOA,CACT"}
|
|
@@ -7,12 +7,14 @@ interface ILabels {
|
|
|
7
7
|
}
|
|
8
8
|
interface IBasePagination {
|
|
9
9
|
pagesCount: number;
|
|
10
|
-
visibleElementsCount: TVisibleElementsCount;
|
|
11
10
|
indicatedPages: number[];
|
|
12
11
|
disabledPages: number[];
|
|
12
|
+
paginationItems: number[];
|
|
13
|
+
paginationAlignment: IPaginationAlignment;
|
|
13
14
|
labels: ILabels;
|
|
14
15
|
onItemHover: (pageNumber: number) => void;
|
|
15
16
|
}
|
|
17
|
+
export declare type IPaginationAlignment = 'start' | 'end';
|
|
16
18
|
export declare type TVisibleElementsCount = 6 | 8;
|
|
17
19
|
export interface IPaginationItemProps {
|
|
18
20
|
pageNumber: number;
|
|
@@ -20,7 +22,6 @@ export interface IPaginationItemProps {
|
|
|
20
22
|
}
|
|
21
23
|
export interface IPaginationContext extends IBasePagination {
|
|
22
24
|
currentPage: number;
|
|
23
|
-
isMaxVisibleElementCount: boolean;
|
|
24
25
|
goToPage: (pagenumber: number) => void;
|
|
25
26
|
goToPreviousPage: () => void;
|
|
26
27
|
goToNextPage: () => void;
|
|
@@ -28,6 +29,7 @@ export interface IPaginationContext extends IBasePagination {
|
|
|
28
29
|
export declare type TPaginationProviderProps = Pick<IBasePagination, 'pagesCount'> & Partial<IBasePagination> & {
|
|
29
30
|
selectedPage?: number;
|
|
30
31
|
onSelectedPageChange?: (pageNumber: number) => void;
|
|
32
|
+
visibleElementsCount?: TVisibleElementsCount;
|
|
31
33
|
};
|
|
32
34
|
export interface IPaginationProps extends TPaginationProviderProps {
|
|
33
35
|
colorScheme?: TcolorScheme;
|