@qoretechnologies/reqore 0.32.3 → 0.34.0

package/src/hooks/usePaging.ts

@@ -0,0 +1,114 @@
+import { merge, size } from 'lodash';
+import { useEffect, useMemo } from 'react';
+import { useUpdateEffect } from 'react-use';
+import usePagination, { usePaginationReturn } from 'react-use-pagination-hook';
+
+export interface IReqorePagingOptions<T> {
+  items: T[];
+  startPage?: number;
+  pagesToShow?: number;
+  itemsPerPage?: number;
+  infinite?: boolean;
+  enabled?: boolean;
+}
+
+export interface IReqorePagingResult<T>
+  extends Pick<usePaginationReturn, 'setPage' | 'currentPage'> {
+  pages: number[];
+  allPages: number[];
+  items: T[];
+  itemsPerPage: number;
+  itemsLeft: number;
+  isLastPage: boolean;
+  isFirstPage: boolean;
+  next: usePaginationReturn['goNext'];
+  back: usePaginationReturn['goBefore'];
+  first: () => void;
+  last: () => void;
+  pageCount: number;
+  infinite: boolean;
+  renderControls: boolean;
+}
+
+export const defaultPagingOptions: IReqorePagingOptions<any> = {
+  items: [],
+  itemsPerPage: 10,
+  infinite: false,
+};
+
+export const useReqorePaging = <T>(
+  options: IReqorePagingOptions<T> = defaultPagingOptions
+): IReqorePagingResult<T> => {
+  const {
+    items,
+    itemsPerPage,
+    infinite,
+    pagesToShow,
+    startPage,
+    enabled = true,
+  }: IReqorePagingOptions<T> = merge({}, defaultPagingOptions, options);
+  const allPageCount = useMemo(() => Math.ceil(size(items) / itemsPerPage), [items, itemsPerPage]);
+  const { pagelist, currentPage, setPage, setTotalPage, goNext, goBefore } = usePagination({
+    numOfPage: allPageCount,
+    totalPage: allPageCount,
+  });
+
+  useEffect(() => {
+    setPage(startPage || 1);
+  }, [startPage]);
+
+  useUpdateEffect(() => {
+    setPage(1);
+    setTotalPage(Math.ceil(size(items) / itemsPerPage));
+  }, [size(items), itemsPerPage]);
+
+  const slicedItems: T[] = useMemo(() => {
+    return items.slice(infinite ? 0 : (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+  }, [items, currentPage, itemsPerPage, infinite]);
+
+  const pages: number[] = useMemo(() => {
+    if (!pagesToShow || pagesToShow >= allPageCount) {
+      return pagelist;
+    }
+    // Get the middle of the desired page count
+    const middle = Math.ceil(pagesToShow / 2);
+    // Get the start number of the pages to show
+    // If the current page is the last page, we need to subtract the number of pages to show from the total number of pages
+    const start =
+      currentPage === allPageCount ? allPageCount - pagesToShow : Math.max(currentPage - middle, 0);
+    // Get the end number of the pages to show
+    // If the start number is 0, we need to add the number of pages to show to the total number of pages
+    const end = Math.min(start + pagesToShow, allPageCount);
+
+    let newPages = pagelist.slice(start, end);
+    // Always remove the first page
+    newPages = newPages.filter((page) => page !== 1);
+    // Always remove the last page
+    newPages = newPages.filter((page) => page !== allPageCount);
+    // Add the first and last page
+    newPages = [1, ...newPages, allPageCount];
+
+    return newPages;
+  }, [pagesToShow, allPageCount, currentPage, pagelist]);
+
+  return {
+    pages,
+    allPages: pagelist,
+    pageCount: allPageCount,
+    items: enabled ? slicedItems : items,
+    itemsPerPage,
+    itemsLeft: items.length - slicedItems.length,
+    infinite,
+    setPage,
+    currentPage,
+    next: goNext,
+    back: goBefore,
+    renderControls:
+      enabled &&
+      !(allPageCount === 1 || allPageCount === 0 || (infinite && currentPage === allPageCount)),
+    isLastPage: currentPage === allPageCount,
+    isFirstPage: currentPage === 1,
+    first: () => setPage(1),
+    last: () => setPage(allPageCount),
+  };
+};

package/src/index.tsx

@@ -37,6 +37,7 @@ export { default as ReqoreNavbarGroup } from './components/Navbar/group';
 export { default as ReqoreNavbarItem } from './components/Navbar/item';
 export { default as ReqoreNotificationsWrapper } from './components/Notifications';
 export { default as ReqoreNotification } from './components/Notifications/notification';
+export { ReqorePagination } from './components/Paging';
 export { ReqorePanel } from './components/Panel';
 export { ReqoreP, ReqoreP as ReqoreParagraph } from './components/Paragraph';
 export { default as ReqorePopover } from './components/Popover';
@@ -57,11 +58,13 @@ export { ReqoreTree } from './components/Tree';
 export { Colors as ReqoreColors } from './constants/colors';
 export { ReqoreSizes } from './constants/sizes';
 export { ReqoreIntents } from './constants/theme';
+export { ReqorePaginationContainer } from './containers/Paging';
 export { default as ReqoreNotifications } from './containers/ReqoreProvider';
 export { default as ReqoreUIProvider } from './containers/UIProvider';
 export { default as ReqoreContext } from './context/ReqoreContext';
 export { default as ReqoreThemeContext } from './context/ThemeContext';
 export { default as useLatestZIndex } from './hooks/useLatestZIndex';
+export { useReqorePaging } from './hooks/usePaging';
 export { useReqore } from './hooks/useReqore';
 export { useReqoreProperty } from './hooks/useReqoreContext';
 export { useReqoreTheme } from './hooks/useTheme';

package/src/mock/collectionData.tsx

@@ -5,6 +5,25 @@ import ReqoreMessage from '../components/Message';
 import { ReqoreP } from '../components/Paragraph';
 import { ReqoreSpacer } from '../components/Spacer';
 import ReqoreTag from '../components/Tag';
+import data from './data.json';
+
+export const bigCollection = data.slice(0, 100).map((datum) => ({
+  label: `${datum.firstName} ${datum.lastName}`,
+  badge: datum.id,
+  size: 'small',
+  expandable: true,
+  content: datum.address,
+  tags: [
+    {
+      labelKey: 'Age',
+      label: datum.age,
+    },
+    {
+      labelKey: 'Occupation',
+      label: datum.occupation,
+    },
+  ],
+})) as IReqoreCollectionItemProps[];
 
 export default [
   {

package/src/mock/tableData.ts

@@ -1,6 +1,7 @@
 import { IReqoreTableColumn } from '../components/Table';
 import data from './data.json';
 
+export const tableData = data;
 export default {
   columns: [
     {

package/src/stories/Button/Button.stories.tsx

@@ -19,7 +19,7 @@ export default {
 
 const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
   return (
-    <>
+    <ReqoreControlGroup vertical gapSize='big'>
       <ReqoreControlGroup size={buttonProps.size} wrap>
         <ReqoreButton {...buttonProps} icon='BankFill' rightIcon={null} />
         <ReqoreButton {...buttonProps} />
@@ -27,7 +27,7 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
           {...buttonProps}
           icon='BankFill'
           rightIcon={null}
-          textAlign='center'
+          iconsAlign='center'
           style={{ width: '100px' }}
         />
         <ReqoreButton {...buttonProps}>Default</ReqoreButton>
@@ -47,7 +47,6 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
           Read only
         </ReqoreButton>
       </ReqoreControlGroup>
-      <br />
       <ReqoreControlGroup size={buttonProps.size} wrap>
         <ReqoreButton {...buttonProps} active flat={false} tooltip='hello'>
           Active Not Flat
@@ -72,13 +71,33 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
           Disabled not flat
         </ReqoreButton>
       </ReqoreControlGroup>
-      <br />
       <ReqoreControlGroup fluid wrap>
         <ReqoreButton {...buttonProps} fluid>
           Fluid button
         </ReqoreButton>
       </ReqoreControlGroup>
-      <br />
+      <ReqoreControlGroup fluid wrap>
+        <ReqoreButton {...buttonProps} fluid textAlign='center'>
+          Fluid button with centered text
+        </ReqoreButton>
+      </ReqoreControlGroup>
+      <ReqoreControlGroup fluid wrap>
+        <ReqoreButton {...buttonProps} fluid textAlign='center' iconsAlign='center'>
+          Fluid button with centered text & icons
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          rightIcon={null}
+          fluid
+          textAlign='center'
+          iconsAlign='center'
+        >
+          Fluid button with centered text & icons
+        </ReqoreButton>
+        <ReqoreButton {...buttonProps} icon={null} fluid textAlign='center' iconsAlign='center'>
+          Fluid button with centered text & icons
+        </ReqoreButton>
+      </ReqoreControlGroup>
       <ReqoreControlGroup fluid wrap>
         <ReqoreButton {...buttonProps}>Left text</ReqoreButton>
         <ReqoreButton
@@ -112,7 +131,6 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
           Right text
         </ReqoreButton>
       </ReqoreControlGroup>
-      <br />
       <ReqoreControlGroup wrap>
         <ReqoreButton
           {...buttonProps}
@@ -171,7 +189,6 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
           wrap
         />
       </ReqoreControlGroup>
-      <br />
       <ReqoreControlGroup wrap>
         <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
           Read only with badge
@@ -225,7 +242,7 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
           With modified Badge
         </ReqoreButton>
       </ReqoreControlGroup>
-    </>
+    </ReqoreControlGroup>
   );
 };
 

package/src/stories/Collection/Collection.stories.tsx

@@ -1,10 +1,11 @@
 import { Meta, Story } from '@storybook/react';
-import { ReqoreButton, ReqoreControlGroup } from '../..';
+import { ReqoreButton, ReqoreControlGroup, ReqoreVerticalSpacer } from '../..';
 import { IReqoreCollectionProps, ReqoreCollection } from '../../components/Collection';
 import { IReqoreColumnsProps } from '../../components/Columns';
-import items from '../../mock/collectionData';
-import data from '../../mock/data.json';
-import { IntentArg, SizeArg, argManager } from '../utils/args';
+import { PADDING_FROM_SIZE } from '../../constants/sizes';
+import items, { bigCollection } from '../../mock/collectionData';
+
+import { argManager, IntentArg, SizeArg } from '../utils/args';
 
 export interface IColumnsStoryArgs extends IReqoreColumnsProps {
   multipleColumns?: boolean;
@@ -143,34 +144,38 @@ export const ChildrenBeforeAndAfter = Template.bind({});
 ChildrenBeforeAndAfter.args = {
   label: 'Collection of items',
   items,
-  childrenBefore: (
-    <ReqoreControlGroup horizontalAlign='center' fluid>
-      <ReqoreButton fluid> I could be a filter of some kind</ReqoreButton>
-    </ReqoreControlGroup>
-  ),
-  childrenAfter: (
-    <ReqoreControlGroup horizontalAlign='center' fluid>
-      <ReqoreControlGroup fluid={false} fixed>
-        <ReqoreButton fixed textAlign='center'>
-          1
-        </ReqoreButton>
-        <ReqoreButton fixed textAlign='center'>
-          2
-        </ReqoreButton>
-        <ReqoreButton fixed textAlign='center'>
-          3
-        </ReqoreButton>
-        <ReqoreButton fixed textAlign='center'>
-          4
-        </ReqoreButton>
+  contentRenderer: (children) => (
+    <>
+      <ReqoreControlGroup horizontalAlign='center' fluid>
+        <ReqoreButton fluid> I could be a filter of some kind</ReqoreButton>
+      </ReqoreControlGroup>
+      <ReqoreVerticalSpacer height={PADDING_FROM_SIZE.normal} />
+      {children}
+      <ReqoreVerticalSpacer height={PADDING_FROM_SIZE.normal} />
+      <ReqoreControlGroup horizontalAlign='center' fluid>
+        <ReqoreControlGroup fluid={false} fixed>
+          <ReqoreButton fixed textAlign='center'>
+            1
+          </ReqoreButton>
+          <ReqoreButton fixed textAlign='center'>
+            2
+          </ReqoreButton>
+          <ReqoreButton fixed textAlign='center'>
+            3
+          </ReqoreButton>
+          <ReqoreButton fixed textAlign='center'>
+            4
+          </ReqoreButton>
+        </ReqoreControlGroup>
       </ReqoreControlGroup>
-    </ReqoreControlGroup>
+    </>
   ),
 };
 
 export const FilteringSearchingPaging = Template.bind({});
 FilteringSearchingPaging.args = {
   inputProps: {
+    fluid: true,
     focusRules: {
       type: 'keypress',
       shortcut: 'letters',
@@ -183,24 +188,28 @@ FilteringSearchingPaging.args = {
   sortButtonProps: {
     fixed: false,
   },
+  paging: 'buttons',
   size: 'big',
   padded: false,
   fill: true,
-  items: data.slice(0, 100).map((datum) => ({
-    label: `${datum.firstName} ${datum.lastName}`,
-    badge: datum.id,
-    size: 'small',
-    expandable: true,
-    content: datum.address,
-    tags: [
-      {
-        labelKey: 'Age',
-        label: datum.age,
-      },
-      {
-        labelKey: 'Occupation',
-        label: datum.occupation,
-      },
-    ],
-  })),
+  items: bigCollection,
+} as IReqoreCollectionProps;
+
+export const CustomFilteringSearchingPaging = Template.bind({});
+CustomFilteringSearchingPaging.args = {
+  inputProps: {
+    fluid: true,
+    focusRules: {
+      type: 'auto',
+      clearOnFocus: true,
+    },
+  },
+  paging: {
+    itemsPerPage: 25,
+    scrollToTopOnPageChange: true,
+  },
+  size: 'small',
+  padded: false,
+  height: '300px',
+  items: bigCollection,
 } as IReqoreCollectionProps;

package/src/stories/Dropdown/Dropdown.stories.tsx

@@ -1,8 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
-import { useState } from 'react';
 import ReqoreButton from '../../components/Button';
 import { IReqoreDropdownProps } from '../../components/Dropdown';
-import { ReqoreControlGroup, ReqoreDropdown, ReqoreInput, ReqoreTag } from '../../index';
+import { ReqoreControlGroup, ReqoreDropdown, ReqoreInput } from '../../index';
 import { argManager } from '../utils/args';
 
 const { createArg, disableArg } = argManager<IReqoreDropdownProps>();
@@ -11,7 +10,7 @@ export default {
   title: 'Components/Dropdown',
   parameters: {
     chromatic: {
-      delay: 500,
+      delay: 1500,
     },
   },
   argTypes: {
@@ -130,30 +129,25 @@ export default {
 } as Meta<IReqoreDropdownProps>;
 
 const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
-  const [selected, setSelected] = useState<(string | number)[]>(['Item 3', 'Item 6']);
-
-  if (args.multiSelect) {
+  if (args.scrollToSelected || args.paging) {
     return (
-      <>
-        <ReqoreControlGroup>
-          <ReqoreDropdown
-            label='Multi Select'
-            multiSelect
-            isDefaultOpen
-            onItemSelect={({ label }) => setSelected([...selected, label])}
-            items={Array(13)
-              .fill(null)
-              .map((_, i) => ({
-                label: `Item ${i}`,
-                value: `item-${i}`,
-                selected: selected.includes(`Item ${i}`),
-              }))}
-          />
-          {selected.map((item, index) => (
-            <ReqoreTag label={item} key={index} />
-          ))}
-        </ReqoreControlGroup>
-      </>
+      <ReqoreControlGroup>
+        <ReqoreDropdown
+          {...args}
+          label={args.label}
+          isDefaultOpen
+          filterable
+          scrollToSelected={args.scrollToSelected}
+          paging={args.paging}
+          items={Array(130)
+            .fill(null)
+            .map((_, i) => ({
+              label: `Item ${i}`,
+              value: `item-${i}`,
+              selected: i === 55,
+            }))}
+        />
+      </ReqoreControlGroup>
     );
   }
 
@@ -226,7 +220,55 @@ CustomComponent.args = {
   component: ReqoreInput,
   placeholder: 'Custom component',
 };
-export const MultiSelect = Template.bind({});
-MultiSelect.args = {
-  multiSelect: true,
+export const ScrollToSelectedItem = Template.bind({});
+ScrollToSelectedItem.args = {
+  scrollToSelected: true,
+  label: 'Dropdown that scrolls to selected item',
+};
+export const WithPaging: Story<IReqoreDropdownProps> = Template.bind({});
+WithPaging.args = {
+  paging: {
+    itemsPerPage: 50,
+  },
+  label: 'Dropdown with paging',
+};
+
+export const WithLoadMore: Story<IReqoreDropdownProps> = Template.bind({});
+WithLoadMore.args = {
+  paging: {
+    fluid: true,
+    infinite: true,
+    scrollOnLoadMore: true,
+    loadMoreLabel: 'Load additional items...',
+    showLabels: true,
+    includeBottomControls: false,
+  },
+  label: 'Dropdown with load more',
 };
+
+export const WithCustomPaging: Story<IReqoreDropdownProps> = Template.bind({});
+WithCustomPaging.args = {
+  paging: {
+    fluid: true,
+    infinite: true,
+    scrollOnLoadMore: true,
+    pageControlsPosition: 'both',
+    loadMoreLabel: 'Load additional items...',
+    showLabels: true,
+    loadMoreButtonProps: {
+      textAlign: 'center',
+      effect: {
+        gradient: {
+          colors: 'info',
+          animate: 'hover',
+        },
+        textSize: 'small',
+        uppercase: true,
+        spaced: 3,
+      },
+    },
+  },
+  label: 'Dropdown with custom paging',
+};
+
+WithCustomPaging.play = () => {};

package/src/stories/Menu/Menu.stories.tsx

@@ -192,6 +192,10 @@ export const Minimal = Template.bind({});
 Minimal.args = {
   minimal: true,
 };
+export const NoPadding = Template.bind({});
+NoPadding.args = {
+  padded: false,
+};
 export const NotFlat = Template.bind({});
 NotFlat.args = {
   flat: false,