@mantine/core/cjs/components/Pagination/PaginationEdges/PaginationEdges.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"PaginationEdges.cjs","names":["useProps","usePaginationContext","PaginationControl","polymorphic","PaginationNextIcon","PaginationPreviousIcon","PaginationFirstIcon","PaginationLastIcon"],"sources":["../../../../src/components/Pagination/PaginationEdges/PaginationEdges.tsx"],"sourcesContent":["import { BoxProps, polymorphic, useProps } from '../../../core';\nimport { usePaginationContext } from '../Pagination.context';\nimport {\n  PaginationFirstIcon,\n  PaginationIconProps,\n  PaginationLastIcon,\n  PaginationNextIcon,\n  PaginationPreviousIcon,\n} from '../Pagination.icons';\nimport { PaginationControl } from '../PaginationControl/PaginationControl';\n\nexport interface CreateEdgeComponent {\n  icon: React.FC<PaginationIconProps>;\n  name: string;\n  action: 'onNext' | 'onPrevious' | 'onFirst' | 'onLast';\n  type: 'next' | 'previous';\n}\n\nexport interface PaginationEdgeProps extends BoxProps {\n  /** An icon component to replace the default icon */\n  icon?: React.FC<PaginationIconProps>;\n}\n\nexport function createEdgeComponent({ icon, name, action, type }: CreateEdgeComponent) {\n  const defaultProps = { icon } satisfies Partial<PaginationEdgeProps>;\n\n  const Component = (props: PaginationEdgeProps) => {\n    const { icon: Icon, ...others } = useProps(name, defaultProps, props);\n    const ctx = usePaginationContext();\n    const disabled = type === 'next' ? ctx.active === ctx.total : ctx.active === 1;\n\n    return (\n      <PaginationControl\n        disabled={ctx.disabled || disabled}\n        onClick={ctx[action]}\n        withPadding={false}\n        {...others}\n      >\n        <Icon\n          className=\"mantine-rotate-rtl\"\n          style={{\n            width: 'calc(var(--pagination-control-size) / 1.8)',\n            height: 'calc(var(--pagination-control-size) / 1.8)',\n          }}\n        />\n      </PaginationControl>\n    );\n  };\n\n  Component.displayName = `@mantine/core/${name}`;\n  return polymorphic<'button', PaginationEdgeProps>(Component);\n}\n\nexport const PaginationNext = createEdgeComponent({\n  icon: PaginationNextIcon,\n  name: 'PaginationNext',\n  action: 'onNext',\n  type: 'next',\n});\n\nexport const PaginationPrevious = createEdgeComponent({\n  icon: PaginationPreviousIcon,\n  name: 'PaginationPrevious',\n  action: 'onPrevious',\n  type: 'previous',\n});\n\nexport const PaginationFirst = createEdgeComponent({\n  icon: PaginationFirstIcon,\n  name: 'PaginationFirst',\n  action: 'onFirst',\n  type: 'previous',\n});\n\nexport const PaginationLast = createEdgeComponent({\n  icon: PaginationLastIcon,\n  name: 'PaginationLast',\n  action: 'onLast',\n  type: 'next',\n});\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,oBAAoB,EAAE,MAAM,MAAM,QAAQ,QAA6B;CACrF,MAAM,eAAe,EAAE,MAAM;CAE7B,MAAM,aAAa,UAA+B;EAChD,MAAM,EAAE,MAAM,MAAM,GAAG,WAAWA,kBAAAA,SAAS,MAAM,cAAc,MAAM;EACrE,MAAM,MAAMC,2BAAAA,sBAAsB;EAClC,MAAM,WAAW,SAAS,SAAS,IAAI,WAAW,IAAI,QAAQ,IAAI,WAAW;AAE7E,SACE,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,mBAAD;GACE,UAAU,IAAI,YAAY;GAC1B,SAAS,IAAI;GACb,aAAa;GACb,GAAI;aAEJ,iBAAA,GAAA,kBAAA,KAAC,MAAD;IACE,WAAU;IACV,OAAO;KACL,OAAO;KACP,QAAQ;KACT;IACD,CAAA;GACgB,CAAA;;AAIxB,WAAU,cAAc,iBAAiB;AACzC,QAAOC,qCAAAA,YAA2C,UAAU;;AAG9D,MAAa,iBAAiB,oBAAoB;CAChD,MAAMC,yBAAAA;CACN,MAAM;CACN,QAAQ;CACR,MAAM;CACP,CAAC;AAEF,MAAa,qBAAqB,oBAAoB;CACpD,MAAMC,yBAAAA;CACN,MAAM;CACN,QAAQ;CACR,MAAM;CACP,CAAC;AAEF,MAAa,kBAAkB,oBAAoB;CACjD,MAAMC,yBAAAA;CACN,MAAM;CACN,QAAQ;CACR,MAAM;CACP,CAAC;AAEF,MAAa,iBAAiB,oBAAoB;CAChD,MAAMC,yBAAAA;CACN,MAAM;CACN,QAAQ;CACR,MAAM;CACP,CAAC"}