chore: code optimization (#540)

* chore: code optimization

* type: update type

Author: li-jia-nan

docs/examples/lessPages.tsx

@@ -20,18 +20,17 @@ const doublePath = [
     '1c9.1-11.7 9.1-27.9 0-39.5z',
 ];
 
-const getSvgIcon = (path, reverse, type) => {
+const getSvgIcon = (
+  path: string | string[],
+  reverse: boolean,
+  type: string,
+) => {
   const paths = Array.isArray(path) ? path : [path];
-  const renderPaths = paths.map((p, i) => {
-    return <path key={i} d={p} />;
-  });
+  const renderPaths = paths.map<React.ReactNode>((p, i) => (
+    <path key={i} d={p} />
+  ));
   return (
-    <i
-      className={`custom-icon-${type}`}
-      style={{
-        fontSize: '16px',
-      }}
-    >
+    <i className={`custom-icon-${type}`} style={{ fontSize: '16px' }}>
       <svg
         viewBox="0 0 1024 1024"
         width="1em"
@@ -58,11 +57,9 @@ class App extends React.Component {
     current: 3,
     useIcon: true,
   };
-  onChange = (page) => {
+  onChange = (page: number) => {
     console.log(page);
-    this.setState({
-      current: page,
-    });
+    this.setState({ current: page });
   };
   toggleCustomIcon = () => {
     this.setState({

src/Options.tsx

@@ -29,7 +29,7 @@ interface OptionsProps {
 
 const defaultPageSizeOptions = ['10', '20', '50', '100'];
 
-function Options(props: OptionsProps) {
+const Options: React.FC<OptionsProps> = (props) => {
   const {
     pageSizeOptions = defaultPageSizeOptions,
     locale,
@@ -113,12 +113,12 @@ function Options(props: OptionsProps) {
     return null;
   }
 
-  let changeSelect = null;
-  let goInput = null;
-  let gotoButton = null;
+  let changeSelect: React.ReactNode = null;
+  let goInput: React.ReactNode = null;
+  let gotoButton: React.ReactNode = null;
 
   if (changeSize && Select) {
-    const options = getPageSizeOptions().map((opt, i) => (
+    const options = getPageSizeOptions().map<React.ReactNode>((opt, i) => (
       <Select.Option key={i} value={opt.toString()}>
         {mergeBuildOptionText(opt)}
       </Select.Option>
@@ -187,6 +187,10 @@ function Options(props: OptionsProps) {
       {goInput}
     </li>
   );
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  Options.displayName = 'Options';
 }
 
 export default Options;

src/Pager.tsx

@@ -63,4 +63,8 @@ const Pager: React.FC<PagerProps> = (props) => {
   ) : null;
 };
 
+if (process.env.NODE_ENV !== 'production') {
+  Pager.displayName = 'Pager';
+}
+
 export default Pager;

src/Pagination.tsx

@@ -33,7 +33,7 @@ function calculatePage(p: number | undefined, pageSize: number, total: number) {
   return Math.floor((total - 1) / _pageSize) + 1;
 }
 
-function Pagination(props: PaginationProps) {
+const Pagination: React.FC<PaginationProps> = (props) => {
   const {
     // cls
     prefixCls = 'rc-pagination',
@@ -117,7 +117,7 @@ function Pagination(props: PaginationProps) {
       />
     );
     if (typeof icon === 'function') {
-      iconNode = React.createElement(icon, { ...props });
+      iconNode = React.createElement<PaginationProps>(icon, { ...props });
     }
     return iconNode as React.ReactNode;
   }
@@ -275,8 +275,8 @@ function Pagination(props: PaginationProps) {
       'prev',
       getItemIcon(prevIcon, 'prev page'),
     );
-    return React.isValidElement(prevButton)
-      ? React.cloneElement<any>(prevButton, { disabled: !hasPrev })
+    return React.isValidElement<HTMLButtonElement>(prevButton)
+      ? React.cloneElement(prevButton, { disabled: !hasPrev })
       : prevButton;
   }
 
@@ -286,8 +286,8 @@ function Pagination(props: PaginationProps) {
       'next',
       getItemIcon(nextIcon, 'next page'),
     );
-    return React.isValidElement(nextButton)
-      ? React.cloneElement<any>(nextButton, { disabled: !hasNext })
+    return React.isValidElement<HTMLButtonElement>(nextButton)
+      ? React.cloneElement(nextButton, { disabled: !hasNext })
       : nextButton;
   }
 
@@ -323,7 +323,8 @@ function Pagination(props: PaginationProps) {
     return null;
   }
 
-  const pagerList: React.ReactElement[] = [];
+  const pagerList: React.ReactElement<PagerProps>[] = [];
+
   const pagerProps: PagerProps = {
     rootPrefixCls: prefixCls,
     onClick: handleChange,
@@ -468,7 +469,7 @@ function Pagination(props: PaginationProps) {
     }
 
     if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) {
-      pagerList[0] = React.cloneElement(pagerList[0], {
+      pagerList[0] = React.cloneElement<PagerProps>(pagerList[0], {
         className: classNames(
           `${prefixCls}-item-after-jump-prev`,
           pagerList[0].props.className,
@@ -574,6 +575,10 @@ function Pagination(props: PaginationProps) {
       />
     </ul>
   );
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  Pagination.displayName = 'Pagination';
 }
 
 export default Pagination;

src/interface.ts

@@ -60,6 +60,7 @@ export interface PaginationProps extends Partial<PaginationData> {
   ) => React.ReactNode;
   showTotal?: (total: number, range: [number, number]) => React.ReactNode;
 }
+
 export interface PaginationState {
   current: number;
   currentInputValue: number;