@qoretechnologies/reqore 0.34.3 → 0.34.5

package/src/hooks/usePaging.ts

@@ -3,6 +3,11 @@ import { useEffect, useMemo } from 'react';
 import { useUpdateEffect } from 'react-use';
 import usePagination, { usePaginationReturn } from 'react-use-pagination-hook';
 
+export interface IReqorePageChangeData {
+  isFirst?: boolean;
+  isLast?: boolean;
+}
+
 export interface IReqorePagingOptions<T> {
   items: T[];
   startPage?: number;
@@ -10,6 +15,7 @@ export interface IReqorePagingOptions<T> {
   itemsPerPage?: number;
   infinite?: boolean;
   enabled?: boolean;
+  onPageChange?: (page: number, info: IReqorePageChangeData) => void;
 }
 
 export interface IReqorePagingResult<T>
@@ -46,6 +52,7 @@ export const useReqorePaging = <T>(
     pagesToShow,
     startPage,
     enabled = true,
+    onPageChange,
   }: IReqorePagingOptions<T> = merge({}, defaultPagingOptions, options);
   const allPageCount = useMemo(() => Math.ceil(size(items) / itemsPerPage), [items, itemsPerPage]);
   const { pagelist, currentPage, setPage, setTotalPage, goNext, goBefore } = usePagination({
@@ -57,6 +64,13 @@ export const useReqorePaging = <T>(
     setPage(startPage || 1);
   }, [startPage]);
 
+  useUpdateEffect(() => {
+    onPageChange?.(currentPage, {
+      isFirst: currentPage === 1,
+      isLast: currentPage === allPageCount,
+    });
+  }, [currentPage]);
+
   useUpdateEffect(() => {
     setPage(1);
     setTotalPage(Math.ceil(size(items) / itemsPerPage));

package/src/stories/Drawer/Drawer.stories.tsx

@@ -10,12 +10,17 @@ import {
   ReqoreTabsContent,
   useReqoreProperty,
 } from '../../index';
-import { FlatArg, IntentArg, argManager } from '../utils/args';
+import { argManager, FlatArg, IntentArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreDrawerProps>();
 
 export default {
   title: 'Components/Drawer',
+  parameters: {
+    chromatic: {
+      viewports: [450, 600, 1440],
+    },
+  },
   argTypes: {
     ...FlatArg,
     ...createArg('floating', {

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

@@ -229,6 +229,7 @@ export const WithPaging: Story<IReqoreDropdownProps> = Template.bind({});
 WithPaging.args = {
   paging: {
     itemsPerPage: 50,
+    changePageOnScroll: 'horizontal',
   },
   label: 'Dropdown with paging',
 };

package/src/stories/Header/Header.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreHeadingProps } from '../../components/Header';
-import { ReqoreHeading, ReqoreVerticalSpacer } from '../../index';
+import { ReqoreControlGroup, ReqoreHeading } from '../../index';
 import { IntentArg } from '../utils/args';
 
 export default {
@@ -12,31 +12,29 @@ export default {
 
 const Template: Story<IReqoreHeadingProps> = (args) => {
   return (
-    <>
+    <ReqoreControlGroup gapSize='big' vertical>
       <ReqoreHeading size={1} {...args}>
         This is a heading
       </ReqoreHeading>
-      <ReqoreVerticalSpacer height={10} />
       <ReqoreHeading size={2} {...args}>
         This is a heading
       </ReqoreHeading>
-      <ReqoreVerticalSpacer height={10} />
       <ReqoreHeading size={3} {...args}>
         This is a heading
       </ReqoreHeading>
-      <ReqoreVerticalSpacer height={10} />
       <ReqoreHeading size={4} {...args}>
         This is a heading
       </ReqoreHeading>
-      <ReqoreVerticalSpacer height={10} />
       <ReqoreHeading size={5} {...args}>
         This is a heading
       </ReqoreHeading>
-      <ReqoreVerticalSpacer height={10} />
       <ReqoreHeading size={6} {...args}>
         This is a heading
       </ReqoreHeading>
-    </>
+      <ReqoreHeading size={1} {...args} tooltip={{ content: 'Nice tooltip', openOnMount: true }}>
+        This is a heading with tooltip
+      </ReqoreHeading>
+    </ReqoreControlGroup>
   );
 };
 

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

@@ -27,7 +27,9 @@ const Template: Story<IReqorePaginationProps<any> & { pagingOptions?: IReqorePag
         <ReqorePagination<any>
           {...paging}
           {...args}
-          scrollContainer={args.scrollToTopOnPageChange ? scrollContainer : undefined}
+          scrollContainer={
+            args.scrollToTopOnPageChange || !!args.changePageOnScroll ? scrollContainer : undefined
+          }
         />
       </ReqoreControlGroup>
     );
@@ -142,6 +144,20 @@ WithLabels.args = {
   } as IReqorePagingOptions<any>,
 };
 
+export const NextPageOnVerticalScroll: Story<
+  IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
+> = Template.bind({});
+NextPageOnVerticalScroll.args = {
+  changePageOnScroll: 'vertical',
+};
+
+export const NextPageOnHorizontalScroll: Story<
+  IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
+> = Template.bind({});
+NextPageOnHorizontalScroll.args = {
+  changePageOnScroll: 'horizontal',
+};
+
 export const ScrollToTop: Story<
   IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
 > = Template.bind({});

package/src/stories/Panel/Panel.stories.tsx

@@ -3,12 +3,17 @@ import { noop } from 'lodash';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../../components/Panel';
 import { ReqoreVerticalSpacer } from '../../components/Spacer';
-import { FlatArg, IconArg, IntentArg, SizeArg, argManager } from '../utils/args';
+import { argManager, FlatArg, IconArg, IntentArg, SizeArg } from '../utils/args';
 
 const { createArg } = argManager<IReqorePanelProps>();
 
 export default {
   title: 'Components/Panel',
+  parameters: {
+    chromatic: {
+      viewports: [450, 600, 1440],
+    },
+  },
   argTypes: {
     ...IntentArg,
     ...FlatArg,
@@ -373,13 +378,18 @@ NoLabel.args = {
   badge: undefined,
 };
 
-export const ImageAsIcon: Story<IReqorePanelProps> = Template.bind({});
-ImageAsIcon.args = {
+export const ImageAsIconLinkAsHeader: Story<IReqorePanelProps> = Template.bind({});
+ImageAsIconLinkAsHeader.args = {
   iconImage:
     'https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4',
   iconProps: {
     size: '30px',
   },
+  headerProps: {
+    as: 'a',
+    href: 'https://qoretechnologies.com',
+    target: '_blank',
+  } as React.HTMLAttributes<HTMLAnchorElement>,
 };
 
 export const ContentSize: Story<IReqorePanelProps> = Template.bind({});