feat(pagi): add mobile-flavor pagination

Author: mydearxym

components/Pagi/MobilePagination.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import { Button } from 'antd'
+
+// import { ICON_CMD } from '../../config'
+import {
+  Wrapper,
+  IndexPage,
+  SelectorWrapper,
+  CurPageNumber,
+} from './styles/mobile_pagination'
+
+const hasExtraPage = (totalCount, pageSize) => totalCount > pageSize
+
+const MobilePagination = ({ current, pageSize, total, onChange }) => {
+  console.log('current: ', current)
+
+  return (
+    <Wrapper>
+      {current !== 1 && hasExtraPage(total, pageSize) ? (
+        <IndexPage onClick={onChange.bind(this, 1)}>首页</IndexPage>
+      ) : (
+        <div />
+      )}
+
+      <SelectorWrapper>
+        {current !== 1 && (
+          <React.Fragment>
+            <Button
+              type="primary"
+              ghost
+              onClick={onChange.bind(this, Math.max(current - 1, 1))}
+            >
+              上一页
+            </Button>
+          </React.Fragment>
+        )}
+        {current !== 1 &&
+          current < Math.floor(total / pageSize) && (
+            <CurPageNumber>{current}</CurPageNumber>
+          )}
+
+        {current < Math.floor(total / pageSize) && (
+          <Button
+            type="primary"
+            ghost
+            onClick={onChange.bind(this, current + 1)}
+          >
+            下一页
+          </Button>
+        )}
+      </SelectorWrapper>
+      {hasExtraPage(total, pageSize) && (
+        <IndexPage onClick={onChange.bind(this, Math.floor(total / pageSize))}>
+          末页(
+          {Math.floor(total / pageSize)})
+        </IndexPage>
+      )}
+    </Wrapper>
+  )
+}
+
+export default MobilePagination

components/Pagi/index.js

@@ -9,7 +9,14 @@ import { Pagination } from 'antd'
 import PropTypes from 'prop-types'
 
 import { makeDebugger } from 'utils'
-import { PagiWrapper, CustomText, BottomMsg } from './styles'
+import MobilePagination from './MobilePagination'
+import {
+  PagiWrapper,
+  DesktopPagiWrapper,
+  MobilePagiWrapper,
+  CustomText,
+  BottomMsg,
+} from './styles'
 
 /* eslint-disable-next-line */
 const debug = makeDebugger('c:Pagi:index')
@@ -54,13 +61,26 @@ const Pagi = ({
   return (
     <PagiWrapper left={left} top={top} bottom={bottom}>
       {hasExtraPage(totalCount, pageSize) ? (
-        <Pagination
-          current={pageNumber}
-          pageSize={pageSize}
-          total={totalCount}
-          itemRender={PagiCustomRender}
-          onChange={onChange}
-        />
+        <React.Fragment>
+          <DesktopPagiWrapper>
+            <Pagination
+              current={pageNumber}
+              pageSize={pageSize}
+              total={totalCount}
+              itemRender={PagiCustomRender}
+              onChange={onChange}
+            />
+          </DesktopPagiWrapper>
+          <MobilePagiWrapper>
+            <MobilePagination
+              current={pageNumber}
+              pageSize={pageSize}
+              total={totalCount}
+              itemRender={PagiCustomRender}
+              onChange={onChange}
+            />
+          </MobilePagiWrapper>
+        </React.Fragment>
       ) : (
         <BottomFooter show={showBottomMsg} msg={noMoreMsg} />
       )}

components/Pagi/styles/index.js

@@ -8,6 +8,18 @@ export const PagiWrapper = styled.div`
   margin-left: ${({ left }) => left};
 `
 
+export const DesktopPagiWrapper = styled.div`
+  ${cs.media.mobile`
+    display: none;
+  `};
+`
+export const MobilePagiWrapper = styled.div`
+  display: none;
+  ${cs.media.mobile`
+    display: block;
+  `};
+`
+
 export const CustomText = styled.a`
   ${cs.media.tablet`display: none`};
 `

components/Pagi/styles/mobile_pagination.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+
+// import Img from '../../../components/Img'
+import { theme, cs } from '../../../utils'
+
+export const Wrapper = styled.div`
+  ${cs.flex('justify-between')};
+  align-items: center;
+  margin-left: 12px;
+  margin-right: 0;
+`
+export const IndexPage = styled.div`
+  color: ${theme('thread.articleTitle')};
+`
+export const SelectorWrapper = styled.div`
+  ${cs.flex('align-center')};
+`
+export const CurPageNumber = styled.div`
+  color: ${theme('thread.articleDigest')};
+  margin-left: 4px;
+  margin-right: 4px;
+`