lowcoder/client/packages/lowcoder-design/src/components/tacoPagination.tsx at nodeserver_encrypted_payload · lowcoder-org/lowcoder · 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { default as Pagination, PaginationProps } from "antd/es/pagination";
import styled, { css } from "styled-components";
import { ReactComponent as PackUpIcon } from "icons/v1/icon-Pack-up.svg";

const packUpIconCss = css`
  height: 24px;
  width: 24px;

  &:hover:not([disabled]) {
    g path {
      fill: #315efb;
    }
  }

  &[disabled] g path {
    fill: #b8b9bf;
    opacity: 45%;
  }
`;

const PrevIcon = styled(PackUpIcon)`
  transform: rotate(270deg);
  ${packUpIconCss};
`;
const NextIcon = styled(PackUpIcon)`
  transform: rotate(90deg);
  ${packUpIconCss};
`;

const StyledPagination = styled(Pagination)`
  .ant-pagination-jump-prev,
  .ant-pagination-jump-next {
    .ant-pagination-item-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 24px;
      width: 24px;
      min-width: 24px;

      .ant-pagination-item-link-icon {
        color: #315efb;
      }

      .ant-pagination-item-ellipsis {
        transform: scale(0.5, 0.5);
        color: #333333;
        line-height: 24px;
      }
    }
  }

  .ant-pagination-prev,
  .ant-pagination-next,
  .ant-pagination-jump-prev,
  .ant-pagination-jump-next {
    height: 24px;
    width: 24px;
    min-width: 24px;
  }

  .ant-pagination-item {
    border: unset;
    background: #f5f5f6;
    border-radius: 4px;
    height: 24px;
    width: 24px;
    min-width: 24px;

    a {
      font-size: 13px;
      color: #8b8fa3;
      text-align: center;
      line-height: 24px;
      padding: 0;
    }
  }

  .ant-pagination-item-active,
  .ant-pagination-item:hover {
    background: #f2f7fc;
    font-weight: unset;

    a {
      color: #315efb;
    }
  }
`;

export const pageItemRender: PaginationProps["itemRender"] = (_, type, originalElement) => {
  if (type === "prev") {
    return <PrevIcon />;
  }
  if (type === "next") {
    return <NextIcon />;
  }
  return originalElement;
};

export function TacoPagination(props: PaginationProps) {
  return <StyledPagination itemRender={pageItemRender} {...props} />;
}