feat: support pagination for member list (#4231)

packages/component/src/components/member-components/index.tsx

@@ -1,2 +1,3 @@
 export * from './accept-invite-page';
 export * from './invite-modal';
+export * from './pagination';

packages/component/src/components/member-components/invite-modal.tsx

@@ -15,50 +15,6 @@ export interface InviteModalProps {
   isMutating: boolean;
 }
 
-const PermissionMenu = ({
-  currentPermission,
-  onChange,
-}: {
-  currentPermission: Permission;
-  onChange: (permission: Permission) => void;
-}) => {
-  console.log('currentPermission', currentPermission);
-  console.log('onChange', onChange);
-
-  return null;
-  // return (
-  //   <Menu
-  //     trigger="click"
-  //     content={
-  //       <>
-  //         {Object.entries(Permission).map(([permission]) => {
-  //           return (
-  //             <MenuItem
-  //               key={permission}
-  //               onClick={() => {
-  //                 onChange(permission as Permission);
-  //               }}
-  //             >
-  //               {permission}
-  //             </MenuItem>
-  //           );
-  //         })}
-  //       </>
-  //     }
-  //   >
-  //     <MenuTrigger
-  //       type="plain"
-  //       style={{
-  //         marginRight: -10,
-  //         height: '100%',
-  //       }}
-  //     >
-  //       {currentPermission}
-  //     </MenuTrigger>
-  //   </Menu>
-  // );
-};
-
 export const InviteModal = ({
   open,
   setOpen,
@@ -67,7 +23,7 @@ export const InviteModal = ({
 }: InviteModalProps) => {
   const t = useAFFiNEI18N();
   const [inviteEmail, setInviteEmail] = useState('');
-  const [permission, setPermission] = useState(Permission.Write);
+  const [permission] = useState(Permission.Write);
   const [isValidEmail, setIsValidEmail] = useState(true);
 
   const handleCancel = useCallback(() => {
@@ -125,12 +81,6 @@ export const InviteModal = ({
             onEnter={handleConfirm}
             style={{ marginTop: 20 }}
             size="large"
-            endFix={
-              <PermissionMenu
-                currentPermission={permission}
-                onChange={setPermission}
-              />
-            }
           />
         </div>
         <div className={styles.inviteModalButtonContainer}>

packages/component/src/components/member-components/pagination.tsx

@@ -0,0 +1,49 @@
+import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons';
+import clsx from 'clsx';
+import { useCallback, useMemo } from 'react';
+import ReactPaginate from 'react-paginate';
+
+import * as styles from './styles.css';
+export interface PaginationProps {
+  totalCount: number;
+  countPerPage: number;
+  onPageChange: (skip: number) => void;
+}
+
+export const Pagination = ({
+  totalCount,
+  countPerPage,
+  onPageChange,
+}: PaginationProps) => {
+  const handlePageClick = useCallback(
+    (e: { selected: number }) => {
+      const newOffset = (e.selected * countPerPage) % totalCount;
+      onPageChange(newOffset);
+    },
+    [countPerPage, onPageChange, totalCount]
+  );
+
+  const pageCount = useMemo(
+    () => Math.ceil(totalCount / countPerPage),
+    [countPerPage, totalCount]
+  );
+
+  return (
+    <ReactPaginate
+      onPageChange={handlePageClick}
+      pageRangeDisplayed={3}
+      marginPagesDisplayed={2}
+      pageCount={pageCount}
+      previousLabel={<ArrowLeftSmallIcon />}
+      nextLabel={<ArrowRightSmallIcon />}
+      pageClassName={styles.pageItem}
+      previousClassName={clsx(styles.pageItem, 'label')}
+      nextClassName={clsx(styles.pageItem, 'label')}
+      breakLabel="..."
+      breakClassName={styles.pageItem}
+      containerClassName={styles.pagination}
+      activeClassName="active"
+      renderOnZeroPageCount={null}
+    />
+  );
+};

packages/component/src/components/member-components/styles.css.tsx

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const inviteModalTitle = style({
   fontWeight: '600',
@@ -21,3 +21,48 @@ export const inviteName = style({
   marginRight: '10px',
   color: 'var(--affine-black)',
 });
+
+export const pagination = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '6px',
+  marginTop: 5,
+});
+
+export const pageItem = style({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '20px',
+  height: '20px',
+  fontSize: 'var(--affine-font-xs)',
+  color: 'var(--affine-text-primary-color)',
+  borderRadius: '4px',
+
+  selectors: {
+    '&:hover': {
+      background: 'var(--affine-hover-color)',
+    },
+    '&.active': {
+      color: 'var(--affine-primary-color)',
+      cursor: 'default',
+      pointerEvents: 'none',
+    },
+    '&.label': {
+      color: 'var(--affine-icon-color)',
+      fontSize: '16px',
+    },
+    '&.disabled': {
+      opacity: '.4',
+      cursor: 'default',
+      color: 'var(--affine-disable-color)',
+      pointerEvents: 'none',
+    },
+  },
+});
+globalStyle(`${pageItem} a`, {
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});