@qoretechnologies/reqore 0.34.2 → 0.34.4

package/src/containers/Paging.tsx

@@ -1,26 +1,64 @@
 import { memo, useMemo } from 'react';
-import { IReqorePaginationProps, ReqorePagination } from '../components/Paging';
+import {
+  IReqorePaginationComponentProps,
+  IReqorePaginationProps,
+  ReqorePagination,
+} from '../components/Paging';
 import { ReqoreVerticalSpacer } from '../components/Spacer';
 import {
+  getPaginationOptionsFromType,
   TReqorePaginationType,
   TReqorePaginationTypeResult,
-  getPaginationOptionsFromType,
 } from '../constants/paging';
 import { PADDING_FROM_SIZE, TSizes } from '../constants/sizes';
-import { useReqorePaging } from '../hooks/usePaging';
+import { IReqorePagingResult, useReqorePaging } from '../hooks/usePaging';
 
 export interface IReqorePagingContainerProps<T> {
   type?: TReqorePaginationType<T>;
   items: T[];
-  scrollContainer?: HTMLElement;
+  scrollContainer?: IReqorePaginationComponentProps['scrollContainer'];
   children: (
     items: T[],
-    Controls: React.FC<Partial<IReqorePaginationProps<T>>>,
+    Controls: JSX.Element,
     options: TReqorePaginationTypeResult<T>
   ) => React.ReactNode;
   size?: TSizes;
 }
 
+function PagingControls<T>({
+  withSpacer,
+  position,
+  pagingData,
+  componentOptions,
+  scrollContainer,
+  size,
+  ...pagingProps
+}: Partial<IReqorePaginationProps<T>> &
+  Partial<TReqorePaginationTypeResult<T>> & {
+    withSpacer?: boolean;
+    position?: 'top' | 'bottom';
+    pagingData: Omit<IReqorePagingResult<T>, 'items'>;
+  }) {
+  return pagingData.renderControls ? (
+    <>
+      {withSpacer && position === 'bottom' ? (
+        <ReqoreVerticalSpacer height={PADDING_FROM_SIZE[size]} />
+      ) : null}
+      <ReqorePagination
+        key={`reqore-pagination-${position}`}
+        size={size}
+        {...pagingData}
+        {...componentOptions}
+        scrollContainer={scrollContainer}
+        {...pagingProps}
+      />
+      {withSpacer && position === 'top' ? (
+        <ReqoreVerticalSpacer height={PADDING_FROM_SIZE[size]} />
+      ) : null}
+    </>
+  ) : null;
+}
+
 function PagingContainer<T>({
   type,
   items,
@@ -42,46 +80,54 @@ function PagingContainer<T>({
     enabled: !!type,
   });
 
-  const Controls = ({
-    withSpacer,
-    position,
-    ...pagingProps
-  }: Partial<IReqorePaginationProps<T>> & { withSpacer?: boolean; position?: 'top' | 'bottom' }) =>
-    pagingData.renderControls ? (
-      <>
-        {withSpacer && position === 'bottom' ? (
-          <ReqoreVerticalSpacer height={PADDING_FROM_SIZE[size]} />
-        ) : null}
-        <ReqorePagination
-          size={size}
-          {...pagingData}
-          {...componentOptions}
-          scrollContainer={scrollContainer}
-          {...pagingProps}
-        />
-        {withSpacer && position === 'top' ? (
-          <ReqoreVerticalSpacer height={PADDING_FROM_SIZE[size]} />
-        ) : null}
-      </>
-    ) : null;
-
   return (
     <>
       {includeTopControls && (pageControlsPosition === 'top' || pageControlsPosition === 'both') ? (
-        <Controls autoLoadMore={false} scrollOnLoadMore={false} position='top' withSpacer />
+        <PagingControls<T>
+          key='top-paging'
+          position='top'
+          withSpacer
+          scrollContainer={scrollContainer}
+          size={size}
+          pagingData={pagingData}
+          pagingOptions={pagingOptions}
+          componentOptions={componentOptions}
+          autoLoadMore={false}
+          scrollOnLoadMore={false}
+        />
       ) : null}
 
-      {children(finalItems, Controls, {
-        pagingOptions,
-        componentOptions,
-        pageControlsPosition,
-        includeTopControls,
-        includeBottomControls,
-      })}
+      {children(
+        finalItems,
+        <PagingControls
+          key='custom-paging'
+          scrollContainer={scrollContainer}
+          size={size}
+          pagingData={pagingData}
+          pagingOptions={pagingOptions}
+          componentOptions={componentOptions}
+        />,
+        {
+          pagingOptions,
+          componentOptions,
+          pageControlsPosition,
+          includeTopControls,
+          includeBottomControls,
+        }
+      )}
 
       {includeBottomControls &&
       (pageControlsPosition === 'bottom' || pageControlsPosition === 'both') ? (
-        <Controls position='bottom' withSpacer />
+        <PagingControls<T>
+          key='bottom-paging'
+          position='bottom'
+          withSpacer
+          scrollContainer={scrollContainer}
+          size={size}
+          pagingData={pagingData}
+          pagingOptions={pagingOptions}
+          componentOptions={componentOptions}
+        />
       ) : null}
     </>
   );

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

@@ -20,11 +20,17 @@ const Template: Story<IReqorePaginationProps<any> & { pagingOptions?: IReqorePag
     });
 
     return (
-      <ReqoreControlGroup vertical fluid>
+      <ReqoreControlGroup vertical fluid key='paging-wrapper'>
         {paging.items.map((item) => (
           <ReqoreTag fixed='key' labelKey={item.id} label={`${item.firstName} ${item.lastName}`} />
         ))}
-        <ReqorePagination<any> {...paging} {...args} scrollContainer={scrollContainer} />
+        <ReqorePagination<any>
+          {...paging}
+          {...args}
+          scrollContainer={
+            args.scrollToTopOnPageChange || !!args.changePageOnScroll ? scrollContainer : undefined
+          }
+        />
       </ReqoreControlGroup>
     );
   };
@@ -138,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({});