This is an automated email from the ASF dual-hosted git repository. mintsweet pushed a commit to branch fix-5853 in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 96217933fef9670329db237aa3cf3e11f641029a Author: mintsweet <[email protected]> AuthorDate: Tue Aug 15 20:55:00 2023 +1200 feat(config-ui): add new component pagination --- config-ui/src/components/index.ts | 1 + config-ui/src/components/pagination/index.tsx | 58 +++++++++++++++++++++ config-ui/src/components/pagination/styled.ts | 73 +++++++++++++++++++++++++++ 3 files changed, 132 insertions(+) diff --git a/config-ui/src/components/index.ts b/config-ui/src/components/index.ts index 4ce766199..f039fc6f9 100644 --- a/config-ui/src/components/index.ts +++ b/config-ui/src/components/index.ts @@ -29,6 +29,7 @@ export * from './logo'; export * from './message'; export * from './no-data'; export * from './page-header'; +export * from './pagination'; export * from './selector'; export * from './table'; export * from './toast'; diff --git a/config-ui/src/components/pagination/index.tsx b/config-ui/src/components/pagination/index.tsx new file mode 100644 index 000000000..8bde5cf53 --- /dev/null +++ b/config-ui/src/components/pagination/index.tsx @@ -0,0 +1,58 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +import { Icon } from '@blueprintjs/core'; + +import * as S from './styled'; + +export interface PaginationProps { + page: number; + pageSize?: number; + total: number; + onChange: (page: number) => void; +} + +export const Pagination = ({ page, pageSize = 20, total, onChange }: PaginationProps) => { + const lastPage = Math.ceil(total / pageSize); + + const handlePrevPage = () => { + if (page === 1) return; + onChange(page - 1); + }; + + const handleNextPage = () => { + if (page === lastPage) return; + onChange(page + 1); + }; + + return ( + <S.List> + <S.Item disabled={page === 1} onClick={handlePrevPage}> + <Icon icon="chevron-left" /> + </S.Item> + {Array.from({ length: lastPage }).map((_, i) => ( + <S.Item key={i + 1} active={page === i + 1} onClick={() => onChange(i + 1)}> + <span>{i + 1}</span> + </S.Item> + ))} + <S.Item disabled={page === lastPage} onClick={handleNextPage}> + <Icon icon="chevron-right" /> + </S.Item> + </S.List> + ); +}; diff --git a/config-ui/src/components/pagination/styled.ts b/config-ui/src/components/pagination/styled.ts new file mode 100644 index 000000000..5a810dcb1 --- /dev/null +++ b/config-ui/src/components/pagination/styled.ts @@ -0,0 +1,73 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +import styled from 'styled-components'; + +export const List = styled.ul` + display: flex; + align-items: center; + justify-content: flex-end; + margin-top: 16px; +`; + +export const Item = styled.li<{ active?: boolean; disabled?: boolean }>` + display: flex; + align-items: center; + justify-content: center; + margin-right: 8px; + width: 30px; + height: 30px; + color: #7497f7; + border: 1px solid #7497f7; + border-radius: 4px; + cursor: pointer; + transition: all 0.3s ease-in-out; + + &:hover { + color: #fff; + background-color: #7497f7; + } + + ${({ active }) => + active + ? ` + color: #fff; + background-color: #7497f7; + cursor: no-drop; + ` + : ''} + + ${({ disabled }) => + disabled + ? ` + color: #a1a1a1; + border-color: #a1a1a1; + cursor: no-drop; + + &:hover { + color: #a1a1a1; + border-color: #a1a1a1; + background-color: transparent; + } + ` + : ''} + + &:last-child { + margin-right: 0; + } +`;
