{"ast":null,"code":"var __jsx = React.createElement;\n// cSpell:words hellip\nimport React, { useCallback, useMemo } from 'react';\nimport { backgroundColor, borderColor, borderFocusedColor, em, primaryColor, sameBorder, size, textColor, textInvertColor, transitionProps } from '~/utils/style';\nimport styled from 'styled-components';\nconst height = em(36);\nconst Wrapper = styled.nav.withConfig({\n  displayName: \"Pagination__Wrapper\",\n  componentId: \"pj0gu-0\"\n})([\"display:flex;user-select:none;\"]);\nconst Ul = styled.ul.withConfig({\n  displayName: \"Pagination__Ul\",\n  componentId: \"pj0gu-1\"\n})([\"display:inline-flex;list-style:none;margin:0;padding:0;\"]);\nconst Li = styled.li.withConfig({\n  displayName: \"Pagination__Li\",\n  componentId: \"pj0gu-2\"\n})([\"list-style:none;margin-left:\", \";&:first-child{margin-left:0;}\"], em(10));\nconst A = styled.a.withConfig({\n  displayName: \"Pagination__A\",\n  componentId: \"pj0gu-3\"\n})([\"cursor:pointer;display:block;background-color:\", \";color:\", \";height:\", \";line-height:calc(\", \" - 2px);min-width:\", \";padding:0 \", \";text-align:center;\", \";\", \" &:hover{border-color:\", \";}\"], props => props.current ? primaryColor : backgroundColor, props => props.current ? textInvertColor : textColor, height, height, height, em(10), props => sameBorder({\n  color: props.current ? primaryColor : borderColor,\n  radius: true\n}), transitionProps(['color', 'border-color', 'background-color']), props => props.current ? primaryColor : borderFocusedColor);\nconst Span = styled.span.withConfig({\n  displayName: \"Pagination__Span\",\n  componentId: \"pj0gu-4\"\n})([\"display:block;\", \" line-height:\", \";text-align:center;\"], size(height), height);\n\nconst Pagination = ({\n  page,\n  total,\n  className,\n  onChange\n}) => {\n  const padding = 2;\n  const around = 2;\n  const startEllipsis = useMemo(() => page - padding - around - 1 > 0, [page]);\n  const endEllipsis = useMemo(() => page + padding + around < total, [page, total]);\n  const start = useMemo(() => page - around - 1 <= 0 ? [] : Array.from(new Array(Math.min(padding, page - around - 1)), (_v, i) => i + 1), [page]);\n  const end = useMemo(() => page + around >= total ? [] : Array.from(new Array(Math.min(padding, total - page - around)), (_v, i) => total - padding + i + 1 + Math.max(padding - total + page + around, 0)), [page, total]);\n  const before = useMemo(() => page - 1 <= 0 ? [] : Array.from(new Array(Math.min(around, page - 1)), (_v, i) => page - around + i + Math.max(around - page + 1, 0)), [page]);\n  const after = useMemo(() => page >= total ? [] : Array.from(new Array(Math.min(around, total - page)), (_v, i) => page + i + 1), [page, total]);\n  const genLink = useCallback(arr => arr.map(i => __jsx(Li, {\n    key: i\n  }, __jsx(A, {\n    onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(i)\n  }, i))), [onChange]);\n\n  const hellip = __jsx(Li, null, __jsx(Span, null, \"\\u2026\"));\n\n  return __jsx(Wrapper, {\n    className: className\n  }, __jsx(Ul, null, genLink(start), startEllipsis && hellip, genLink(before), __jsx(Li, null, __jsx(A, {\n    current: true\n  }, page)), genLink(after), endEllipsis && hellip, genLink(end)));\n};\n\nexport default Pagination;","map":null,"metadata":{},"sourceType":"module"}