UNPKG

@mantine/core

Version:

React components library focused on usability, accessibility and developer experience

1 lines 6.94 kB
{"version":3,"file":"PaginationRoot.cjs","names":["createVarsResolver","getRadius","getSize","getFontSize","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","PaginationProvider","createEventHandler","Box","classes"],"sources":["../../../../src/components/Pagination/PaginationRoot/PaginationRoot.tsx"],"sourcesContent":["import { usePagination } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createEventHandler,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getFontSize,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport { PaginationProvider } from '../Pagination.context';\nimport classes from '../Pagination.module.css';\n\nexport type PaginationRootStylesNames = 'root' | 'control' | 'dots';\nexport type PaginationRootCssVariables = {\n root:\n | '--pagination-control-size'\n | '--pagination-control-radius'\n | '--pagination-control-fz'\n | '--pagination-active-bg'\n | '--pagination-active-color';\n};\n\nexport interface PaginationRootProps\n extends\n BoxProps,\n StylesApiProps<PaginationRootFactory>,\n ElementProps<'div', 'value' | 'onChange'> {\n /** `height` and `min-width` of controls @default 'md' */\n size?: MantineSize | `input-${MantineSize}` | (string & {}) | number;\n\n /** Total number of pages, must be an integer */\n total: number;\n\n /** Active page for controlled component, must be an integer in [1, total] interval */\n value?: number;\n\n /** Active page for uncontrolled component, must be an integer in [1, total] interval */\n defaultValue?: number;\n\n /** Called when page changes */\n onChange?: (value: number) => void;\n\n /** Disables all controls, applies disabled styles */\n disabled?: boolean;\n\n /** Number of siblings displayed on the left/right side of the selected page @default 1 */\n siblings?: number;\n\n /** Number of elements visible on the left/right edges @default 1 */\n boundaries?: number;\n\n /** Key of `theme.colors`, active item color @default theme.primaryColor */\n color?: MantineColor;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Called when next page control is clicked */\n onNextPage?: () => void;\n\n /** Called when previous page control is clicked */\n onPreviousPage?: () => void;\n\n /** Called when first page control is clicked */\n onFirstPage?: () => void;\n\n /** Called when last page control is clicked */\n onLastPage?: () => void;\n\n /** Additional props passed down to controls */\n getItemProps?: (page: number) => Record<string, any>;\n\n /** If set, adjusts text color based on the active page background color to ensure sufficient contrast */\n autoContrast?: boolean;\n\n /** Starting page number, defaults to 1 */\n startValue?: number;\n}\n\nexport type PaginationRootFactory = Factory<{\n props: PaginationRootProps;\n ref: HTMLDivElement;\n stylesNames: PaginationRootStylesNames;\n vars: PaginationRootCssVariables;\n}>;\n\nconst defaultProps = {\n siblings: 1,\n boundaries: 1,\n} satisfies Partial<PaginationRootProps>;\n\nconst varsResolver = createVarsResolver<PaginationRootFactory>(\n (theme, { size, radius, color, autoContrast }) => ({\n root: {\n '--pagination-control-radius': radius === undefined ? undefined : getRadius(radius),\n '--pagination-control-size': getSize(size, 'pagination-control-size'),\n '--pagination-control-fz': getFontSize(size),\n '--pagination-active-bg': color ? getThemeColor(color, theme) : undefined,\n '--pagination-active-color': getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n })\n);\n\nexport const PaginationRoot = factory<PaginationRootFactory>((_props) => {\n const props = useProps('PaginationRoot', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n total,\n value,\n defaultValue,\n onChange,\n disabled,\n siblings,\n boundaries,\n color,\n radius,\n onNextPage,\n onPreviousPage,\n onFirstPage,\n onLastPage,\n getItemProps,\n autoContrast,\n startValue,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<PaginationRootFactory>({\n name: 'Pagination',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { range, setPage, next, previous, active, first, last } = usePagination({\n page: value,\n initialPage: defaultValue,\n onChange,\n total,\n siblings,\n boundaries,\n startValue,\n });\n\n return (\n <PaginationProvider\n value={{\n total,\n range,\n active,\n disabled,\n getItemProps,\n onChange: setPage,\n onNext: createEventHandler(onNextPage, next),\n onPrevious: createEventHandler(onPreviousPage, previous),\n onFirst: createEventHandler(onFirstPage, first),\n onLast: createEventHandler(onLastPage, last),\n getStyles,\n }}\n >\n <Box {...getStyles('root')} {...others} />\n </PaginationProvider>\n );\n});\n\nPaginationRoot.classes = classes;\nPaginationRoot.varsResolver = varsResolver;\nPaginationRoot.displayName = '@mantine/core/PaginationRoot';\n"],"mappings":";;;;;;;;;;;;;;;;;AAmGA,MAAM,eAAe;CACnB,UAAU;CACV,YAAY;CACb;AAED,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,oBAAoB,EACjD,MAAM;CACJ,+BAA+B,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;CACnF,6BAA6BC,iBAAAA,QAAQ,MAAM,0BAA0B;CACrE,2BAA2BC,iBAAAA,YAAY,KAAK;CAC5C,0BAA0B,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA;CAChE,6BAA6BC,gCAAAA,qBAAqB,cAAc,MAAM,GAClEC,2BAAAA,iBAAiB;EAAE;EAAO;EAAO;EAAc,CAAC,GAChD,KAAA;CACL,EACF,EACF;AAED,MAAa,iBAAiBC,gBAAAA,SAAgC,WAAW;CACvE,MAAM,QAAQC,kBAAAA,SAAS,kBAAkB,cAAc,OAAO;CAC9D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,cACA,UACA,UACA,UACA,YACA,OACA,QACA,YACA,gBACA,aACA,YACA,cACA,cACA,YACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAiC;EACjD,MAAM;EACN,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,OAAO,SAAS,MAAM,UAAU,QAAQ,OAAO,UAAA,GAAA,eAAA,eAAuB;EAC5E,MAAM;EACN,aAAa;EACb;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,2BAAAA,oBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,UAAU;GACV,QAAQC,6BAAAA,mBAAmB,YAAY,KAAK;GAC5C,YAAYA,6BAAAA,mBAAmB,gBAAgB,SAAS;GACxD,SAASA,6BAAAA,mBAAmB,aAAa,MAAM;GAC/C,QAAQA,6BAAAA,mBAAmB,YAAY,KAAK;GAC5C;GACD;YAED,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GAAK,GAAI,UAAU,OAAO;GAAE,GAAI;GAAU,CAAA;EACvB,CAAA;EAEvB;AAEF,eAAe,UAAUC,0BAAAA;AACzB,eAAe,eAAe;AAC9B,eAAe,cAAc"}