@atom-learning/components 2.57.0 → 2.58.0
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 +2 -10
- package/dist/components/pagination/Pagination.d.ts +2 -2
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/pagination/PaginationItem.js +1 -1
- package/dist/components/pagination/PaginationItem.js.map +1 -1
- package/dist/components/pagination/pagination-context/PaginationContext.d.ts +2 -2
- 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/types.d.ts +18 -24
- package/dist/components/pagination/usePagination.d.ts +2 -2
- package/dist/components/pagination/usePagination.js.map +1 -1
- 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,17 +1,9 @@
|
|
|
1
|
-
# [2.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
### Bug Fixes
|
|
5
|
-
|
|
6
|
-
* added missing columns field to the datatable type ([396903e](https://github.com/Atom-Learning/components/commit/396903e3f28e16b31363bc6afb1f322619ba607f))
|
|
1
|
+
# [2.58.0](https://github.com/Atom-Learning/components/compare/v2.57.0...v2.58.0) (2023-06-07)
|
|
7
2
|
|
|
8
3
|
|
|
9
4
|
### Features
|
|
10
5
|
|
|
11
|
-
*
|
|
12
|
-
* added custom sorting label and test ([a7d91c5](https://github.com/Atom-Learning/components/commit/a7d91c5701ca4390c95a2b547b97f65e38bd28db))
|
|
13
|
-
* added metadata component to show row count and sorting ([027e503](https://github.com/Atom-Learning/components/commit/027e5038d661159e614959f8c3193c33d8f4e593))
|
|
14
|
-
* added object to configure all the copy and separator ([63606a2](https://github.com/Atom-Learning/components/commit/63606a20f34fa37d6fcb0a3b4659de88776797b1))
|
|
6
|
+
* make Dot positioning CSS a bit cleaner ([7f21e20](https://github.com/Atom-Learning/components/commit/7f21e20ad4bce3aef9350d06a9161c750154c5cc))
|
|
15
7
|
|
|
16
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
17
9
|
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type {
|
|
3
|
-
export declare const Pagination: React.FC<
|
|
2
|
+
import type { IPaginationProps } from './types';
|
|
3
|
+
export declare const Pagination: React.FC<IPaginationProps>;
|
|
@@ -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 '..'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { PaginationNextButton } from './PaginationNextButton'\nimport { PaginationPages } from './PaginationPages'\nimport { PaginationPreviousButton } from './PaginationPreviousButton'\nimport type {
|
|
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 '..'\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":"g5GAUa,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*as
|
|
1
|
+
import*as i from"react";import{styled as c}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as $}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import"../accordion/Accordion.js";import"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import{Box as n}from"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../stack/Stack.js";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../sidedrawer/Sidedrawer.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../video/Video.js";import"../banner/banner-regular/BannerRegular.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import{usePagination as u}from"./usePagination.js";const m=c(n,{position:"absolute",bottom:"-$1",left:"0",transform:"translateX(50%)",borderRadius:"$round",size:"4px",bg:"$accent9"}),g=c("button",{alignItems:"center",border:"unset",borderRadius:"$0",cursor:"pointer",fontFamily:"$body",justifyContent:"center",whiteSpace:"nowrap",width:"max-content",display:"flex",flexDirection:"column",p:"0",fontWeight:400,color:"$grey800",bg:"$base1","&:not(:disabled)":{"&:hover":{color:"$accent10",bg:"$base2"},"&:active":{bg:"$base3",color:"$grey1000"},"&:focus-visible":{...$()}},"&:disabled":{opacity:"0.3",cursor:"not-allowed"},variants:{size:{md:{width:"$4",height:"$4"}},selected:{true:{border:"1px solid $accent9",color:"$accent9",fontWeight:600,"&:not(:disabled)":{"&:hover":{borderColor:"$accent10",color:"$accent10"},"&:active":{borderColor:"$accent11",fontColor:"$accent11"}}}},indicated:{true:{fontWeight:600,color:"$accent9","&:not(:disabled)":{"&:hover":{color:"$accent10",[`& ${m}`]:{bg:"$accent10"}},"&:active":{color:"$accent11",[`& ${m}`]:{bg:"$accent11"}}}}}}}),f=({pageNumber:t,css:a})=>{const{currentPage:s,goToPage:l,indicatedPages:d,disabledPages:b,onItemHover:e}=u(),p=d.includes(t),o=b.includes(t),r=s===t;return i.createElement(g,{selected:r,size:"md",onClick:()=>l(t),css:a,indicated:p,disabled:o,"aria-current":r&&"page","aria-disabled":o,onMouseOver:()=>{r||o||e==null||e(t)}},p?i.createElement(n,{css:{position:"relative"}},t,i.createElement(m,null)):t)};export{f as PaginationItem};
|
|
2
2
|
//# sourceMappingURL=PaginationItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationItem.js","sources":["../../../src/components/pagination/PaginationItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { styled } from '../../stitches'\nimport { Box } from '..'\nimport type { IPaginationItemProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst Dot = styled(Box, {\n borderRadius: '$round',\n size: '4px',\n bg: '$accent9'\n})\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n border: 'unset',\n borderRadius: '$0',\n cursor: 'pointer',\n fontFamily: '$body',\n justifyContent: 'center',\n whiteSpace: 'nowrap',\n width: 'max-content',\n display: 'flex',\n flexDirection: 'column',\n p: '0',\n fontWeight: 400,\n color: '$grey800',\n bg: '$base1',\n '&:not(:disabled)': {\n '&:hover': {\n color: '$accent10',\n bg: '$base2'\n },\n '&:active': {\n bg: '$base3',\n color: '$grey1000'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock()\n }\n },\n '&:disabled': {\n opacity: '0.3',\n cursor: 'not-allowed'\n },\n variants: {\n size: {\n md: {\n width: '$4',\n height: '$4'\n }\n },\n selected: {\n true: {\n border: '1px solid $accent9',\n color: '$accent9',\n fontWeight: 600,\n '&:not(:disabled)': {\n '&:hover': {\n borderColor: '$accent10',\n color: '$accent10'\n },\n '&:active': {\n borderColor: '$accent11',\n fontColor: '$accent11'\n }\n }\n }\n },\n indicated: {\n true: {\n fontWeight: 600,\n color: '$accent9',\n '&:not(:disabled)': {\n '&:hover': {\n color: '$accent10',\n [`& ${Dot}`]: {\n bg: '$accent10'\n }\n },\n '&:active': {\n color: '$accent11',\n [`& ${Dot}`]: {\n bg: '$accent11'\n }\n }\n }\n }\n }\n }\n})\n\nexport const PaginationItem: React.FC<IPaginationItemProps> = ({\n pageNumber,\n css\n}) => {\n const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n usePagination()\n\n const isIndicated = indicatedPages.includes(pageNumber)\n const isDisabled = disabledPages.includes(pageNumber)\n\n const isSelected = currentPage === pageNumber\n\n const handleOnHover = () => {\n if (isSelected) return\n onItemHover?.(pageNumber)\n }\n\n return (\n <StyledButton\n selected={isSelected}\n size=\"md\"\n onClick={() => goToPage(pageNumber)}\n css={css}\n indicated={isIndicated}\n disabled={isDisabled}\n aria-current={isSelected && 'page'}\n aria-disabled={isDisabled}\n onMouseOver={handleOnHover}\n >\n {
|
|
1
|
+
{"version":3,"file":"PaginationItem.js","sources":["../../../src/components/pagination/PaginationItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { styled } from '../../stitches'\nimport { Box } from '..'\nimport type { IPaginationItemProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst Dot = styled(Box, {\n position: 'absolute',\n bottom: '-$1',\n left: '0',\n transform: 'translateX(50%)',\n borderRadius: '$round',\n size: '4px',\n bg: '$accent9'\n})\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n border: 'unset',\n borderRadius: '$0',\n cursor: 'pointer',\n fontFamily: '$body',\n justifyContent: 'center',\n whiteSpace: 'nowrap',\n width: 'max-content',\n display: 'flex',\n flexDirection: 'column',\n p: '0',\n fontWeight: 400,\n color: '$grey800',\n bg: '$base1',\n '&:not(:disabled)': {\n '&:hover': {\n color: '$accent10',\n bg: '$base2'\n },\n '&:active': {\n bg: '$base3',\n color: '$grey1000'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock()\n }\n },\n '&:disabled': {\n opacity: '0.3',\n cursor: 'not-allowed'\n },\n variants: {\n size: {\n md: {\n width: '$4',\n height: '$4'\n }\n },\n selected: {\n true: {\n border: '1px solid $accent9',\n color: '$accent9',\n fontWeight: 600,\n '&:not(:disabled)': {\n '&:hover': {\n borderColor: '$accent10',\n color: '$accent10'\n },\n '&:active': {\n borderColor: '$accent11',\n fontColor: '$accent11'\n }\n }\n }\n },\n indicated: {\n true: {\n fontWeight: 600,\n color: '$accent9',\n '&:not(:disabled)': {\n '&:hover': {\n color: '$accent10',\n [`& ${Dot}`]: {\n bg: '$accent10'\n }\n },\n '&:active': {\n color: '$accent11',\n [`& ${Dot}`]: {\n bg: '$accent11'\n }\n }\n }\n }\n }\n }\n})\n\nexport const PaginationItem: React.FC<IPaginationItemProps> = ({\n pageNumber,\n css\n}) => {\n const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n usePagination()\n\n const isIndicated = indicatedPages.includes(pageNumber)\n const isDisabled = disabledPages.includes(pageNumber)\n\n const isSelected = currentPage === pageNumber\n\n const handleOnHover = () => {\n if (isSelected || isDisabled) return\n onItemHover?.(pageNumber)\n }\n\n return (\n <StyledButton\n selected={isSelected}\n size=\"md\"\n onClick={() => goToPage(pageNumber)}\n css={css}\n indicated={isIndicated}\n disabled={isDisabled}\n aria-current={isSelected && 'page'}\n aria-disabled={isDisabled}\n onMouseOver={handleOnHover}\n >\n {isIndicated ? (\n <Box css={{ position: 'relative' }}>\n {pageNumber}\n <Dot />\n </Box>\n ) : (\n pageNumber\n )}\n </StyledButton>\n )\n}\n"],"names":["Dot","styled","Box","StyledButton","focusVisibleStyleBlock","PaginationItem","pageNumber","css","currentPage","goToPage","indicatedPages","disabledPages","onItemHover","usePagination","isIndicated","isDisabled","isSelected","React"],"mappings":"67GASA,MAAMA,EAAMC,EAAOC,EAAK,CACtB,SAAU,WACV,OAAQ,MACR,KAAM,IACN,UAAW,kBACX,aAAc,SACd,KAAM,MACN,GAAI,UACN,CAAC,EAEKC,EAAeF,EAAO,SAAU,CACpC,WAAY,SACZ,OAAQ,QACR,aAAc,KACd,OAAQ,UACR,WAAY,QACZ,eAAgB,SAChB,WAAY,SACZ,MAAO,cACP,QAAS,OACT,cAAe,SACf,EAAG,IACH,WAAY,IACZ,MAAO,WACP,GAAI,SACJ,mBAAoB,CAClB,UAAW,CACT,MAAO,YACP,GAAI,QACN,EACA,WAAY,CACV,GAAI,SACJ,MAAO,WACT,EACA,kBAAmB,CACjB,GAAGG,EAAuB,CAC5B,CACF,EACA,aAAc,CACZ,QAAS,MACT,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,OAAQ,IACV,CACF,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,qBACR,MAAO,WACP,WAAY,IACZ,mBAAoB,CAClB,UAAW,CACT,YAAa,YACb,MAAO,WACT,EACA,WAAY,CACV,YAAa,YACb,UAAW,WACb,CACF,CACF,CACF,EACA,UAAW,CACT,KAAM,CACJ,WAAY,IACZ,MAAO,WACP,mBAAoB,CAClB,UAAW,CACT,MAAO,YACP,CAAC,KAAKJ,KAAQ,CACZ,GAAI,WACN,CACF,EACA,WAAY,CACV,MAAO,YACP,CAAC,KAAKA,KAAQ,CACZ,GAAI,WACN,CACF,CACF,CACF,CACF,CACF,CACF,CAAC,EAEYK,EAAiD,CAAC,CAC7D,WAAAC,EACA,IAAAC,CACF,IAAM,CACJ,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,eAAAC,EAAgB,cAAAC,EAAe,YAAAC,CAAY,EACxEC,EAAc,EAEVC,EAAcJ,EAAe,SAASJ,CAAU,EAChDS,EAAaJ,EAAc,SAASL,CAAU,EAE9CU,EAAaR,IAAgBF,EAOnC,OACEW,EAAA,cAACd,EAAA,CACC,SAAUa,EACV,KAAK,KACL,QAAS,IAAMP,EAASH,CAAU,EAClC,IAAKC,EACL,UAAWO,EACX,SAAUC,EACV,eAAcC,GAAc,OAC5B,gBAAeD,EACf,YAfkB,IAAM,CACtBC,GAAcD,GAClBH,GAAA,MAAAA,EAAcN,CAAAA,CAChB,GAcKQ,EACCG,EAAA,cAACf,EAAA,CAAI,IAAK,CAAE,SAAU,UAAW,CAC9BI,EAAAA,EACDW,EAAA,cAACjB,EAAA,IAAI,CACP,EAEAM,CAEJ,CAEJ"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type {
|
|
3
|
-
export declare const PaginationContext: React.Context<
|
|
2
|
+
import type { IPaginationContext, TPaginationProviderProps } from '../types';
|
|
3
|
+
export declare const PaginationContext: React.Context<IPaginationContext>;
|
|
4
4
|
export declare const PaginationProvider: React.FC<TPaginationProviderProps>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as a from"react";import{VisibleElementsAmount as
|
|
1
|
+
import*as a from"react";import{VisibleElementsAmount as u}from"../pagination.constants.js";import{findPreviousAvailablePage as T,findNextAvailablePage as S}from"../pagination.helper.js";const C=a.createContext({goToPage:()=>null,goToPreviousPage:()=>null,goToNextPage:()=>null,currentPage:1,visibleElementsCount:u.LESS,pagesCount:0,onItemHover:()=>null,labels:{},isMaxVisibleElementCount:!1,indicatedPages:[],disabledPages:[]}),A=({onSelectedPageChange:s,selectedPage:v,visibleElementsCount:g=u.LESS,pagesCount:l,indicatedPages:r=[],disabledPages:t=[],onItemHover:P=()=>null,labels:d={},children:E})=>{const[x,f]=a.useState(1),m=g===u.MORE,e=v||x,n=a.useCallback(o=>{f(o),s==null||s(o)},[s]),b=a.useCallback(()=>{if(e===1)return;const o=e-1,i=T(o,t);i<1||n(i)},[e,t,n]),c=a.useCallback(()=>{if(e===l)return;const o=e+1,i=S(o,t);i>l||n(i)},[e,t,n,l]),p=a.useMemo(()=>({goToNextPage:c,goToPreviousPage:b,goToPage:n,currentPage:e,visibleElementsCount:g,indicatedPages:r,disabledPages:t,pagesCount:l,onItemHover:P,labels:d,isMaxVisibleElementCount:m}),[c,b,n,e,g,r,t,l,P,d,m]);return a.createElement(C.Provider,{value:p},E)};export{C as PaginationContext,A 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 {
|
|
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 visibleElementsCount: VisibleElementsAmount.LESS,\n pagesCount: 0,\n onItemHover: () => null,\n labels: {},\n isMaxVisibleElementCount: false,\n indicatedPages: [],\n disabledPages: []\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 const isMaxVisibleElementCount =\n visibleElementsCount === VisibleElementsAmount.MORE\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 value = React.useMemo(() => {\n return {\n goToNextPage,\n goToPreviousPage,\n goToPage,\n currentPage,\n visibleElementsCount,\n indicatedPages,\n disabledPages,\n pagesCount,\n onItemHover,\n labels,\n isMaxVisibleElementCount\n }\n }, [\n goToNextPage,\n goToPreviousPage,\n goToPage,\n currentPage,\n visibleElementsCount,\n indicatedPages,\n disabledPages,\n pagesCount,\n onItemHover,\n labels,\n isMaxVisibleElementCount\n ])\n\n return (\n <PaginationContext.Provider value={value}>\n {children}\n </PaginationContext.Provider>\n )\n}\n"],"names":["PaginationContext","React","VisibleElementsAmount","PaginationProvider","onSelectedPageChange","selectedPage","visibleElementsCount","pagesCount","indicatedPages","disabledPages","onItemHover","labels","children","internalCurrentPage","setInternalCurrentPage","isMaxVisibleElementCount","currentPage","goToPage","pageNumber","goToPreviousPage","previousPage","previousAvailablePage","findPreviousAvailablePage","goToNextPage","nextPage","nextAvailablePage","findNextAvailablePage","value"],"mappings":"gMASaA,EAAoBC,EAAM,cAAkC,CACvE,SAAU,IAAM,KAChB,iBAAkB,IAAM,KACxB,aAAc,IAAM,KACpB,YAAa,EACb,qBAAsBC,EAAsB,KAC5C,WAAY,EACZ,YAAa,IAAM,KACnB,OAAQ,CAAA,EACR,yBAA0B,GAC1B,eAAgB,GAChB,cAAe,CACjB,CAAA,CAAC,EAEYC,EAAyD,CAAC,CACrE,qBAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuBJ,EAAsB,KAC7C,WAAAK,EACA,eAAAC,EAAiB,CACjB,EAAA,cAAAC,EAAgB,CAAA,EAChB,YAAAC,EAAc,IAAM,KACpB,OAAAC,EAAS,GACT,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAqBC,CAAsB,EAAIb,EAAM,SAAS,CAAC,EAChEc,EACJT,IAAyBJ,EAAsB,KAE3Cc,EAAcX,GAAgBQ,EAE9BI,EAAWhB,EAAM,YACpBiB,GAAuB,CACtBJ,EAAuBI,CAAU,EACjCd,GAAA,MAAAA,EAAuBc,CACzB,CAAA,EACA,CAACd,CAAoB,CACvB,EAEMe,EAAmBlB,EAAM,YAAY,IAAM,CAC/C,GAAIe,IAAgB,EAClB,OAEF,MAAMI,EAAeJ,EAAc,EAC7BK,EAAwBC,EAC5BF,EACAX,CACF,EAEIY,EAAwB,GAC5BJ,EAASI,CAAqB,CAChC,EAAG,CAACL,EAAaP,EAAeQ,CAAQ,CAAC,EAEnCM,EAAetB,EAAM,YAAY,IAAM,CAC3C,GAAIe,IAAgBT,EAClB,OAEF,MAAMiB,EAAWR,EAAc,EACzBS,EAAoBC,EAAsBF,EAAUf,CAAa,EAEnEgB,EAAoBlB,GACxBU,EAASQ,CAAiB,CAC5B,EAAG,CAACT,EAAaP,EAAeQ,EAAUV,CAAU,CAAC,EAE/CoB,EAAQ1B,EAAM,QAAQ,KACnB,CACL,aAAAsB,EACA,iBAAAJ,EACA,SAAAF,EACA,YAAAD,EACA,qBAAAV,EACA,eAAAE,EACA,cAAAC,EACA,WAAAF,EACA,YAAAG,EACA,OAAAC,EACA,yBAAAI,CACF,GACC,CACDQ,EACAJ,EACAF,EACAD,EACAV,EACAE,EACAC,EACAF,EACAG,EACAC,EACAI,CACF,CAAC,EAED,OACEd,EAAA,cAACD,EAAkB,SAAlB,CAA2B,MAAO2B,CAChCf,EAAAA,CACH,CAEJ"}
|
|
@@ -1,42 +1,36 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { TcolorScheme } from '../../experiments/color-scheme';
|
|
3
2
|
import { CSS } from '../../stitches';
|
|
4
|
-
import { Box } from '..';
|
|
5
3
|
interface ILabels {
|
|
6
4
|
popoverTriggerLabel?: string;
|
|
7
5
|
nextPageButtonLabel?: string;
|
|
8
6
|
previousPageButtonLabel?: string;
|
|
9
7
|
}
|
|
10
|
-
interface
|
|
8
|
+
interface IBasePagination {
|
|
9
|
+
pagesCount: number;
|
|
11
10
|
visibleElementsCount: TVisibleElementsCount;
|
|
12
11
|
indicatedPages: number[];
|
|
13
12
|
disabledPages: number[];
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
labels: ILabels;
|
|
14
|
+
onItemHover: (pageNumber: number) => void;
|
|
16
15
|
}
|
|
17
16
|
export declare type TVisibleElementsCount = 6 | 8;
|
|
18
|
-
export
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
onSelectedPageChange: (pageNumber: number) => void;
|
|
26
|
-
pagesCount: number;
|
|
27
|
-
selectedPage?: number;
|
|
28
|
-
} & TBasePaginationType;
|
|
29
|
-
export declare type TPaginationContext = {
|
|
17
|
+
export interface IPaginationItemProps {
|
|
18
|
+
pageNumber: number;
|
|
19
|
+
css?: CSS;
|
|
20
|
+
}
|
|
21
|
+
export interface IPaginationContext extends IBasePagination {
|
|
22
|
+
currentPage: number;
|
|
23
|
+
isMaxVisibleElementCount: boolean;
|
|
30
24
|
goToPage: (pagenumber: number) => void;
|
|
31
25
|
goToPreviousPage: () => void;
|
|
32
26
|
goToNextPage: () => void;
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
27
|
+
}
|
|
28
|
+
export declare type TPaginationProviderProps = Pick<IBasePagination, 'pagesCount'> & Partial<IBasePagination> & {
|
|
29
|
+
selectedPage?: number;
|
|
30
|
+
onSelectedPageChange?: (pageNumber: number) => void;
|
|
31
|
+
};
|
|
32
|
+
export interface IPaginationProps extends TPaginationProviderProps {
|
|
33
|
+
colorScheme?: TcolorScheme;
|
|
39
34
|
css?: CSS;
|
|
40
|
-
onItemHover?: (pageNumber: number) => void;
|
|
41
35
|
}
|
|
42
36
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export declare const usePagination: () =>
|
|
1
|
+
import type { IPaginationContext } from './types';
|
|
2
|
+
export declare const usePagination: () => IPaginationContext;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePagination.js","sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './pagination-context/PaginationContext'\nimport type {
|
|
1
|
+
{"version":3,"file":"usePagination.js","sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './pagination-context/PaginationContext'\nimport type { IPaginationContext } from './types'\n\nexport const usePagination = (): IPaginationContext => {\n const context = React.useContext(PaginationContext)\n\n if (!context) {\n throw new Error(\n 'Ensure that you wrap any components with the PaginationProvider component'\n )\n }\n\n return context\n}\n"],"names":["usePagination","context","React","PaginationContext"],"mappings":"sGAKa,MAAAA,EAAgB,IAA0B,CACrD,MAAMC,EAAUC,EAAM,WAAWC,CAAiB,EAElD,GAAI,CAACF,EACH,MAAM,IAAI,MACR,2EACF,EAGF,OAAOA,CACT"}
|