react-datatable/src/components/Pagination.js at 2ee61b915f2a53af2a9e9a794af234bce76b977e · ashvin27/react-datatable · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React, { Fragment, useContext } from "react";
import { ConfigContext } from "..";

const InitialPagination = ({
  isFirst,
  firstPage,
  previousPage,
  is_temp_page,
  temp_page_number,
  page_number,
  onPageBlur,
  onPageChange,
  nextPage,
  isLast,
}) => {

  const config = useContext(ConfigContext);

  return (
    <Fragment>
      {config.show_first ? (
        <li className={(isFirst ? "disabled " : "") + "page-item"}>
          <a
            href="#"
            className="page-link"
            tabIndex="-1"
            onClick={firstPage}
          >
            {config.language.pagination.first}
          </a>
        </li>
      ) : null}
      <li className={(isFirst ? "disabled " : "") + "page-item"}>
        <a
          href="#"
          className="page-link"
          tabIndex="-1"
          onClick={previousPage}
        >
          {config.language.pagination.previous}
        </a>
      </li>
      <li className="page-item">
        <a className="page-link">
          <input
            style={{
              border: "none",
              padding: "0",
              maxWidth: "30px",
              textAlign: "center",
              display: "inline-block",
            }}
            type="text"
            value={
              is_temp_page ? temp_page_number : page_number
            }
            onChange={(e) => onPageChange(e, true)}
            onBlur={onPageBlur}
            onKeyDown={onPageChange}
          />
        </a>
      </li>
      <li className={(isLast ? "disabled " : "") + "page-item"}>
        <a href="#" className="page-link" onClick={nextPage}>
          {config.language.pagination.next}
        </a>
      </li>
      {config.show_last ? (
        <li className={(isLast ? "disabled " : "") + "page-item"}>
          <a
            href="#"
            className="page-link"
            tabIndex="-1"
            onClick={lastPage}
          >
            {config.language.pagination.last}
          </a>
        </li>
      ) : null}
    </Fragment>
  );
};

export default InitialPagination