@bitrise/bitkit 13.327.0 → 13.328.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.327.0",
+  "version": "13.328.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/PaginationLoadMore/PaginationLoadMore.theme.ts

@@ -0,0 +1,96 @@
+import { createMultiStyleConfigHelpers } from 'chakra-ui-2--styled-system';
+import { rem } from '../../utils/utils';
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers([
+  'container',
+  'text',
+  'divider',
+  'button',
+  'progressIndicator',
+]);
+
+const PaginationLoadMoreTheme = defineMultiStyleConfig({
+  baseStyle: {
+    container: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingX: '16',
+    },
+    text: {
+      textColor: 'text/secondary',
+    },
+    progressIndicator: {
+      textColor: 'text/tertiary',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8',
+    },
+  },
+  sizes: {
+    xs: {
+      container: {
+        height: rem(32),
+        gap: '12',
+      },
+      text: {
+        textStyle: 'body/sm/regular',
+      },
+      divider: {
+        height: rem(20),
+      },
+      progressIndicator: {
+        textStyle: 'body/sm/regular',
+      },
+    },
+    sm: {
+      container: {
+        height: rem(48),
+        gap: '8',
+      },
+      text: {
+        textStyle: 'body/md/regular',
+      },
+      divider: {
+        height: rem(24),
+        marginLeft: '8',
+      },
+      button: {
+        '*': {
+          px: 4,
+        },
+      },
+      progressIndicator: {
+        pl: 12,
+        textStyle: 'body/md/regular',
+      },
+    },
+    md: {
+      container: {
+        height: rem(56),
+        gap: '12',
+      },
+      text: {
+        textStyle: 'body/md/regular',
+      },
+      divider: {
+        height: rem(24),
+        marginLeft: '12',
+      },
+      button: {
+        '*': {
+          px: 4,
+        },
+      },
+      progressIndicator: {
+        pl: 12,
+        textStyle: 'body/md/regular',
+      },
+    },
+  },
+  defaultProps: {
+    size: 'sm',
+  },
+});
+
+export default PaginationLoadMoreTheme;

package/src/Components/PaginationLoadMore/PaginationLoadMore.tsx

@@ -0,0 +1,74 @@
+import { useMultiStyleConfig } from 'chakra-ui-2--react';
+import Box from '../Box/Box';
+import Text from '../Text/Text';
+import LinkButton from '../LinkButton/LinkButton';
+import Divider from '../Divider/Divider';
+import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
+import Button from '../Button/Button';
+
+export type PaginationLoadMoreProps = {
+  loadedCount: number;
+  totalCount: number;
+  onLoadMore: () => void;
+  isLoading: boolean;
+  size?: 'xs' | 'sm' | 'md';
+  loadMoreCount?: number;
+};
+
+const PaginationLoadMore = ({
+  loadedCount,
+  totalCount,
+  onLoadMore,
+  isLoading,
+  size = 'sm',
+  loadMoreCount = 10,
+}: PaginationLoadMoreProps) => {
+  const styles = useMultiStyleConfig('PaginationLoadMore', { size });
+
+  const hasMore = loadedCount < totalCount;
+
+  const loadMoreButton = () => {
+    if (size === 'xs') {
+      return (
+        <LinkButton size="sm" onClick={onLoadMore}>
+          Load {loadMoreCount} more
+        </LinkButton>
+      );
+    }
+
+    return (
+      <Button variant="tertiary" size={size} onClick={onLoadMore}>
+        Load {loadMoreCount} more
+      </Button>
+    );
+  };
+
+  const renderLoadMoreAction = () => {
+    if (!hasMore) return null;
+
+    return (
+      <>
+        <Divider orientation="vertical" size="1" sx={styles.divider} />
+        {isLoading ? (
+          <Box sx={styles.progressIndicator}>
+            <ProgressSpinner color="sys/interactive/base" size="16" />
+            Loading more...
+          </Box>
+        ) : (
+          loadMoreButton()
+        )}
+      </>
+    );
+  };
+
+  return (
+    <Box sx={styles.container}>
+      <Text as="span" sx={styles.text}>
+        Showing {loadedCount} of {totalCount}
+      </Text>
+      {renderLoadMoreAction()}
+    </Box>
+  );
+};
+
+export default PaginationLoadMore;

package/src/Components/components.theme.ts

@@ -53,6 +53,7 @@ import DraggableCard from './DraggableCard/DraggableCard.theme';
 import SelectableTag from './SelectableTag/SelectableTag.theme';
 import DataWidget from './DataWidget/DataWidget.theme';
 import TreeView from './TreeView/TreeView.theme';
+import PaginationLoadMore from './PaginationLoadMore/PaginationLoadMore.theme';
 
 const components = {
   Accordion,
@@ -88,6 +89,7 @@ const components = {
   Note,
   NoteCard,
   NumberInput,
+  PaginationLoadMore,
   Popover,
   Progress: ProgressBar,
   ProgressIndicator,

package/src/index.ts

@@ -334,6 +334,9 @@ export { default as TablePagination } from './Components/Table/TablePagination';
 export type { PaginationProps } from './Components/Pagination/Pagination';
 export { default as Pagination } from './Components/Pagination/Pagination';
 
+export type { PaginationLoadMoreProps } from './Components/PaginationLoadMore/PaginationLoadMore';
+export { default as PaginationLoadMore } from './Components/PaginationLoadMore/PaginationLoadMore';
+
 export type { ProgressIndicatorProps } from './Components/ProgressIndicator/ProgressIndicator';
 export { default as ProgressIndicator } from './Components/ProgressIndicator/ProgressIndicator';