fix: input value should follow current (#546)

Author: MadCcc

docs/examples/simple.tsx

@@ -1,25 +1,37 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Pagination from 'rc-pagination';
 import Select from 'rc-select';
 import '../../assets/index.less';
 
-export default () => (
-  <>
-    <Pagination simple defaultCurrent={1} total={50} />
-    <br />
-    <Pagination
-      simple
-      defaultCurrent={1}
-      total={50}
-      showTotal={(total) => `Total ${total} items`}
-    />
-    <br />
-    <Pagination
-      simple
-      defaultCurrent={1}
-      total={50}
-      showSizeChanger
-      selectComponentClass={Select}
-    />
-  </>
-);
+export default () => {
+  const [pageIndex, setPageIndex] = useState(1);
+
+  return (
+    <>
+      <button onClick={() => setPageIndex((i) => ++i)}>increase</button>
+      <Pagination
+        simple
+        current={pageIndex}
+        total={50}
+        onChange={setPageIndex}
+      />
+      <br />
+      <Pagination simple defaultCurrent={1} total={50} />
+      <br />
+      <Pagination
+        simple
+        defaultCurrent={1}
+        total={50}
+        showTotal={(total) => `Total ${total} items`}
+      />
+      <br />
+      <Pagination
+        simple
+        defaultCurrent={1}
+        total={50}
+        showSizeChanger
+        selectComponentClass={Select}
+      />
+    </>
+  );
+};

src/Pagination.tsx

@@ -3,7 +3,7 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import KeyCode from 'rc-util/lib/KeyCode';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import warning from 'rc-util/lib/warning';
-import React from 'react';
+import React, { useEffect } from 'react';
 import type { PaginationProps } from './interface';
 import zhCN from './locale/zh_CN';
 import Options from './Options';
@@ -89,6 +89,10 @@ const Pagination: React.FC<PaginationProps> = (props) => {
 
   const [internalInputVal, setInternalInputVal] = React.useState(current);
 
+  useEffect(() => {
+    setInternalInputVal(current);
+  }, [current]);
+
   const hasOnChange = onChange !== noop;
   const hasCurrent = 'current' in props;
 

tests/__snapshots__/demo.test.tsx.snap

@@ -1105,49 +1105,9 @@ exports[`Example showTotal 1`] = `
 `;
 
 exports[`Example simple 1`] = `
-<ul
-  class="rc-pagination rc-pagination-simple"
->
-  <li
-    aria-disabled="true"
-    class="rc-pagination-prev rc-pagination-disabled"
-    title="上一页"
-  >
-    <button
-      aria-label="prev page"
-      class="rc-pagination-item-link"
-      disabled=""
-      type="button"
-    />
-  </li>
-  <li
-    class="rc-pagination-simple-pager"
-    title="1/5"
-  >
-    <input
-      size="3"
-      type="text"
-      value="1"
-    />
-    <span
-      class="rc-pagination-slash"
-    >
-      /
-    </span>
-    5
-  </li>
-  <li
-    aria-disabled="false"
-    class="rc-pagination-next"
-    title="下一页"
-  >
-    <button
-      aria-label="next page"
-      class="rc-pagination-item-link"
-      type="button"
-    />
-  </li>
-</ul>
+<button>
+  increase
+</button>
 `;
 
 exports[`Example sizer 1`] = `

tests/simple.test.tsx

@@ -223,4 +223,30 @@ describe('simple Pagination', () => {
       container.querySelector('.rc-pagination-simple-pager'),
     ).toHaveAttribute('title', '2/3');
   });
+
+  it('page should displayed correctly when controlled', () => {
+    const Demo = () => {
+      const [current, setCurrent] = React.useState(1);
+
+      return (
+        <div>
+          <button onClick={() => setCurrent((i) => ++i)}>increase</button>
+          <Pagination
+            simple
+            current={current}
+            total={25}
+            onChange={setCurrent}
+          />
+        </div>
+      );
+    };
+
+    const { container } = render(<Demo />);
+    const input = container.querySelector('.rc-pagination-simple input');
+    const button = container.querySelector('button');
+
+    expect(input).toHaveProperty('value', '1');
+    fireEvent.click(button);
+    expect(input).toHaveProperty('value', '2');
+  });
 });

tsconfig.json

@@ -13,5 +13,5 @@
       "rc-pagination": ["src/index.ts"]
     }
   },
-  "include": [".dumi/**/*", ".dumirc.ts", "**/*.ts", "**/*.tsx"]
+  "include": [".dumirc.ts", "**/*.ts", "**/*.tsx"]
 }