@qoretechnologies/reqore 0.33.0 → 0.34.0

package/src/index.tsx

@@ -58,6 +58,7 @@ 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';

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

@@ -188,9 +188,28 @@ FilteringSearchingPaging.args = {
   sortButtonProps: {
     fixed: false,
   },
-  paging: true,
+  paging: 'buttons',
   size: 'big',
   padded: false,
   fill: true,
   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>();
@@ -130,15 +129,16 @@ export default {
 } as Meta<IReqoreDropdownProps>;
 
 const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
-  const [selected, setSelected] = useState<(string | number)[]>(['Item 3', 'Item 6']);
-
-  if (args.scrollToSelected) {
+  if (args.scrollToSelected || args.paging) {
     return (
       <ReqoreControlGroup>
         <ReqoreDropdown
-          label='Scrolling to selected'
+          {...args}
+          label={args.label}
           isDefaultOpen
-          scrollToSelected
+          filterable
+          scrollToSelected={args.scrollToSelected}
+          paging={args.paging}
           items={Array(130)
             .fill(null)
             .map((_, i) => ({
@@ -151,31 +151,6 @@ const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
     );
   }
 
-  if (args.multiSelect) {
-    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>
-      </>
-    );
-  }
-
   return (
     <>
       <ReqoreControlGroup wrap>
@@ -248,8 +223,52 @@ CustomComponent.args = {
 export const ScrollToSelectedItem = Template.bind({});
 ScrollToSelectedItem.args = {
   scrollToSelected: true,
+  label: 'Dropdown that scrolls to selected item',
 };
-export const MultiSelect = Template.bind({});
-MultiSelect.args = {
-  multiSelect: true,
+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,

package/src/stories/Paging/Paging.stories.tsx

@@ -1,4 +1,6 @@
 import { Story, StoryObj } from '@storybook/react/types-6-0';
+import { useState } from 'react';
+import { useMount } from 'react-use';
 import { IReqorePaginationProps, ReqorePagination } from '../../components/Paging';
 import { IReqorePagingOptions } from '../../hooks/usePaging';
 import { ReqoreControlGroup, ReqoreTag, useReqorePaging } from '../../index';
@@ -10,14 +12,19 @@ export default {
 
 const Template: Story<IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }> =
   (args) => {
+    const [scrollContainer, setScrollContainer] = useState<any>(undefined);
     const paging = useReqorePaging<any>({ items: tableData, ...args.pagingOptions });
 
+    useMount(() => {
+      setScrollContainer(document.querySelector('.reqore-content')!);
+    });
+
     return (
       <ReqoreControlGroup vertical fluid>
         {paging.items.map((item) => (
           <ReqoreTag fixed='key' labelKey={item.id} label={`${item.firstName} ${item.lastName}`} />
         ))}
-        <ReqorePagination<any> {...paging} {...args} />
+        <ReqorePagination<any> {...paging} {...args} scrollContainer={scrollContainer} />
       </ReqoreControlGroup>
     );
   };
@@ -131,6 +138,17 @@ WithLabels.args = {
   } as IReqorePagingOptions<any>,
 };
 
+export const ScrollToTop: Story<
+  IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
+> = Template.bind({});
+ScrollToTop.args = {
+  scrollToTopOnPageChange: true,
+  pagingOptions: {
+    pagesToShow: 5,
+    itemsPerPage: 100,
+  } as IReqorePagingOptions<any>,
+};
+
 export const Infinite: Story<
   IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
 > = Template.bind({});