@qoretechnologies/reqore 0.32.3 → 0.33.0

package/src/components/Paging/index.tsx

@@ -0,0 +1,232 @@
+import { memo, useEffect, useRef, useState } from 'react';
+import { useUnmount, useUpdateEffect } from 'react-use';
+import styled from 'styled-components';
+import { ReqoreDropdown } from '../..';
+import { IReqorePagingResult } from '../../hooks/usePaging';
+import ReqoreButton, { IReqoreButtonProps, StyledButton } from '../Button';
+import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
+import { IReqoreDropdownProps } from '../Dropdown';
+import { IReqoreDropdownItemProps } from '../Dropdown/item';
+
+export interface IReqorePaginationComponentProps
+  extends Omit<IReqoreControlGroupProps, 'children'> {
+  pageButtonProps?: IReqoreButtonProps;
+  activePageButtonProps?: IReqoreButtonProps;
+  listPageButtonProps?: IReqoreDropdownProps;
+  controlPageButtonProps?: IReqoreButtonProps;
+  loadMoreButtonProps?: IReqoreButtonProps;
+  firstPageLabel?: string;
+  lastPageLabel?: string;
+  nextPageLabel?: string;
+  previousPageLabel?: string;
+  pageLabel?: string;
+  loadMoreLabel?: string;
+  showPages?: boolean;
+  showControls?: boolean;
+  showPagesAs?: 'buttons' | 'list';
+  showLabels?: boolean;
+  scrollOnLoadMore?: boolean;
+  autoLoadMore?: boolean;
+}
+export interface IReqorePaginationProps<T>
+  extends Omit<IReqorePagingResult<T>, 'items'>,
+    IReqorePaginationComponentProps {}
+
+export const StyledPagesWrapper = styled(ReqoreControlGroup)`
+  width: unset;
+  max-width: 100%;
+  justify-content: center;
+
+  & > ${StyledButton} {
+    margin: 0;
+  }
+`;
+
+function Pagination<T>({
+  allPages,
+  back,
+  first,
+  currentPage,
+  isLastPage,
+  isFirstPage,
+  pageCount,
+  pages,
+  last,
+  next,
+  setPage,
+  infinite,
+  itemsLeft,
+  showPagesAs = 'buttons',
+  pageButtonProps = {},
+  activePageButtonProps = {},
+  listPageButtonProps = {},
+  controlPageButtonProps = {},
+  loadMoreButtonProps = {},
+  firstPageLabel = 'First',
+  lastPageLabel = 'Last',
+  nextPageLabel = 'Next',
+  previousPageLabel = 'Back',
+  pageLabel = 'Page',
+  loadMoreLabel = 'Load more',
+  showLabels,
+  showPages = true,
+  showControls = true,
+  scrollOnLoadMore,
+  autoLoadMore,
+  itemsPerPage,
+  ...rest
+}: IReqorePaginationProps<T>) {
+  const [loadMoreRef, setLoadMoreRef] = useState<HTMLButtonElement>(undefined);
+  const [scrollTargetRef, setScrollTargetRef] = useState<HTMLDivElement>(undefined);
+  const observer = useRef<IntersectionObserver>(null);
+
+  useEffect(() => {
+    if (scrollTargetRef && scrollOnLoadMore && !isLastPage && !isFirstPage) {
+      scrollTargetRef.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+        inline: 'nearest',
+      });
+    }
+  }, [currentPage, scrollTargetRef, scrollOnLoadMore, isLastPage, isFirstPage]);
+
+  useUpdateEffect(() => {
+    if (loadMoreRef && autoLoadMore) {
+      observer.current = new IntersectionObserver(
+        (entries: IntersectionObserverEntry[]) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              next();
+            }
+          });
+        },
+        {
+          threshold: 0.8,
+        }
+      );
+
+      observer.current.observe(loadMoreRef);
+    }
+  }, [loadMoreRef, autoLoadMore, isLastPage]);
+
+  useUnmount(() => {
+    observer.current?.disconnect();
+  });
+
+  if (pageCount === 1 || pageCount === 0) return null;
+
+  return (
+    <ReqoreControlGroup
+      {...rest}
+      className={`${rest.className || ''} reqore-pagination-wrapper`}
+      style={{ justifyContent: 'center' }}
+    >
+      {infinite && !isLastPage ? (
+        <ReqoreControlGroup vertical>
+          <div className='reqore-auto-scroll-target' ref={setScrollTargetRef} />
+          <ReqoreButton
+            icon='ArrowDropDownLine'
+            badge={itemsLeft}
+            iconsAlign='center'
+            {...loadMoreButtonProps}
+            onClick={next}
+            ref={setLoadMoreRef}
+            style={{
+              scrollMarginTop: '200px',
+            }}
+          >
+            {showLabels && loadMoreLabel}
+          </ReqoreButton>
+        </ReqoreControlGroup>
+      ) : (
+        <>
+          {showPagesAs === 'list' || (showControls && !showPages) ? (
+            <ReqoreButton
+              icon='RewindMiniLine'
+              fixed
+              {...controlPageButtonProps}
+              onClick={first}
+              disabled={isFirstPage}
+              tooltip={!showLabels && firstPageLabel}
+            >
+              {showLabels && firstPageLabel}
+            </ReqoreButton>
+          ) : null}
+          {showControls && (
+            <ReqoreButton
+              icon='ArrowDropLeftLine'
+              fixed
+              {...controlPageButtonProps}
+              onClick={back}
+              disabled={isFirstPage}
+              tooltip={!showLabels && previousPageLabel}
+            >
+              {showLabels && previousPageLabel}
+            </ReqoreButton>
+          )}
+          {showPages && (
+            <StyledPagesWrapper wrap horizontalAlign='center'>
+              {showPagesAs === 'buttons' ? (
+                pages.map((page) => (
+                  <ReqoreButton
+                    textAlign='center'
+                    fixed
+                    key={page}
+                    onClick={() => setPage(page)}
+                    active={page === currentPage}
+                    {...(page === currentPage ? activePageButtonProps : pageButtonProps)}
+                  >
+                    {page}
+                  </ReqoreButton>
+                ))
+              ) : (
+                <ReqoreDropdown
+                  filterable
+                  label={`${showLabels ? `${pageLabel} ` : ''}${currentPage} / ${pageCount}`}
+                  items={pages.map((page) => ({
+                    label: `${showLabels ? `${pageLabel} ` : ''}${page}`,
+                    onClick: () => setPage(page),
+                    selected: page === currentPage,
+                    ...(page === currentPage
+                      ? (activePageButtonProps as IReqoreDropdownItemProps)
+                      : (pageButtonProps as IReqoreDropdownItemProps)),
+                  }))}
+                  placement='bottom'
+                  inputProps={{ focusRules: { type: 'auto', viewportOnly: true } }}
+                  scrollToSelected
+                  {...listPageButtonProps}
+                />
+              )}
+            </StyledPagesWrapper>
+          )}
+          {showControls && (
+            <ReqoreButton
+              icon='ArrowDropRightLine'
+              fixed
+              {...controlPageButtonProps}
+              onClick={next}
+              disabled={isLastPage}
+              tooltip={!showLabels && nextPageLabel}
+            >
+              {showLabels && nextPageLabel}
+            </ReqoreButton>
+          )}
+          {showPagesAs === 'list' || (showControls && !showPages) ? (
+            <ReqoreButton
+              icon='SpeedMiniLine'
+              fixed
+              {...controlPageButtonProps}
+              onClick={last}
+              disabled={isLastPage}
+              tooltip={!showLabels && lastPageLabel}
+            >
+              {showLabels && lastPageLabel}
+            </ReqoreButton>
+          ) : null}
+        </>
+      )}
+    </ReqoreControlGroup>
+  );
+}
+
+export const ReqorePagination = memo(Pagination) as typeof Pagination;

package/src/components/Tag/index.tsx

@@ -25,7 +25,6 @@ import {
   IReqoreDisabled,
   IReqoreIntent,
   IWithReqoreEffect,
-  IWithReqoreFixed,
   IWithReqoreFluid,
   IWithReqoreMinimal,
   IWithReqoreTooltip,
@@ -52,8 +51,8 @@ export interface IReqoreTagProps
     IReqoreDisabled,
     IWithReqoreMinimal,
     IWithReqoreFluid,
-    IWithReqoreFixed,
     IWithReqoreEffect {
+  fixed?: boolean | 'key' | 'label';
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;
@@ -93,9 +92,10 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
-  max-width: ${({ fixed }) => (!fixed ? '100%' : undefined)};
-  flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
-  align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
+  max-width: ${({ fixed }) => (fixed !== true ? '100%' : undefined)};
+  flex: ${({ fluid, fixed }) => (fixed === true ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
+  align-self: ${({ fixed, fluid }) =>
+    fixed === true ? 'flex-start' : fluid ? 'stretch' : undefined};
   border-radius: ${({ asBadge, size }) => (asBadge ? 18 : RADIUS_FROM_SIZE[size])}px;
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
@@ -163,7 +163,7 @@ const StyledTagKeyWrapper = styled.span<{ size: TSizes }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  flex: ${({ hasKey }) => (hasKey ? 1 : undefined)};
+  flex: ${({ hasKey, fixed }) => (hasKey ? (fixed === 'key' ? '0 0 auto' : 1) : undefined)};
   flex-shrink: 0;
   min-height: 100%;
 `;
@@ -172,7 +172,7 @@ const StyledTagContentWrapper = styled.span<{ size: TSizes }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  flex: 1;
+  flex: ${({ fixed }) => (fixed === 'label' ? '0 0 auto' : 1)};
   flex-shrink: 0;
   min-height: 100%;
 `;
@@ -311,6 +311,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             wrap={wrap}
             hasWidth={!!width}
             hasKey={!!labelKey}
+            fixed={rest.fixed}
           >
             {icon && (
               <ReqoreIcon
@@ -345,6 +346,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             wrap={wrap}
             hasWidth={!!width}
             hasKey={!!labelKey}
+            fixed={rest.fixed}
           >
             {label || label === 0 ? (
               <StyledTagContent

package/src/constants/colors.ts

@@ -1,9 +1,13 @@
-export const Colors = {
+import { TReqoreHexColor } from '../components/Effect';
+
+export const Colors: Record<string, TReqoreHexColor> = {
   DARK: '#000000',
+  DARK_THEME: '#333333',
   LIGHT: '#ffffff',
   BLUE: '#0E5A8A',
   GREEN: '#0A6640',
   YELLOW: '#d1a036',
   ORANGE: '#A66321',
   RED: '#A82A2A',
+  GRAY: '#444444',
 };

package/src/constants/paging.ts

@@ -0,0 +1,48 @@
+import { IReqoreCollectionPagingOptions } from '../components/Collection';
+import { IReqorePaginationProps } from '../components/Paging';
+import { IReqorePagingOptions } from '../hooks/usePaging';
+
+export type TReqorePaginationType =
+  | true
+  | 'list'
+  | 'infinite'
+  | 'auto-load'
+  | IReqoreCollectionPagingOptions;
+
+export function getPaginationOptionsFromType<T>(type: TReqorePaginationType): {
+  pagingOptions?: Omit<IReqorePagingOptions<T>, 'items'>;
+  componentOptions?: Partial<Omit<IReqorePaginationProps<T>, 'items'>>;
+  pageControlsPosition?: 'top' | 'bottom' | 'both';
+} {
+  if (!type) return {};
+
+  if (typeof type === 'object') {
+    const {
+      infinite,
+      itemsPerPage,
+      pagesToShow,
+      startPage,
+      pageControlsPosition = 'bottom',
+      ...componentOptions
+    } = type;
+    return {
+      pagingOptions: { infinite, itemsPerPage, pagesToShow, startPage },
+      pageControlsPosition,
+      componentOptions,
+    };
+  }
+
+  switch (type) {
+    case true:
+      return {};
+    case 'list':
+      return {
+        componentOptions: {
+          showPagesAs: 'list',
+        },
+      };
+    case 'infinite':
+    case 'auto-load':
+      return { pagingOptions: { infinite: true } };
+  }
+}

package/src/constants/theme.ts

@@ -3,6 +3,7 @@ import {
   TReqoreEffectGradientAnimationTrigger,
   TReqoreHexColor,
 } from '../components/Effect';
+import { Colors } from './colors';
 
 export interface IReqoreSidebarTheme {
   main?: TReqoreHexColor;
@@ -94,16 +95,16 @@ export interface IReqoreIntents {
 export type TReqoreIntent = 'info' | 'success' | 'pending' | 'warning' | 'danger' | 'muted';
 
 export const DEFAULT_INTENTS: IReqoreIntents = {
-  info: '#0E5A8A',
-  success: '#0A6640',
-  pending: '#d1a036',
-  warning: '#A66321',
-  danger: '#A82A2A',
-  muted: '#444444',
+  info: Colors.BLUE,
+  success: Colors.GREEN,
+  pending: Colors.YELLOW,
+  warning: Colors.ORANGE,
+  danger: Colors.RED,
+  muted: Colors.GRAY,
 };
 
 export const DEFAULT_THEME: IReqoreTheme = {
-  main: '#333333',
+  main: Colors.DARK_THEME,
   text: {
     dim: true,
   },

package/src/containers/ReqoreProvider.tsx

@@ -1,5 +1,5 @@
 import { size } from 'lodash';
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import shortid from 'shortid';
 import { useContext } from 'use-context-selector';
@@ -62,11 +62,11 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
       : useMedia('(min-width: 480px) and (max-width: 1200px)');
   const isMobileOrTablet = isMobile || isTablet;
 
-  const getAndIncreaseZIndex = (): number => {
+  const getAndIncreaseZIndex = useCallback((): number => {
     latestZIndex.current += 1;
 
     return latestZIndex.current;
-  };
+  }, [latestZIndex.current]);
 
   const confirmAction = (data: IReqoreConfirmationModal): void => {
     setConfirmationModal({

package/src/containers/UIProvider.tsx

@@ -1,13 +1,13 @@
 import { cloneDeep } from 'lodash';
 import merge from 'lodash/merge';
 import { rgba } from 'polished';
-import React, { useState } from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
+import React, { forwardRef, useState } from 'react';
+import styled, { createGlobalStyle, css } from 'styled-components';
 import ReqoreLayoutWrapper from '../components/Layout';
 import { IReqoreNotificationsPosition } from '../components/Notifications';
 import { DEFAULT_THEME, IReqoreTheme } from '../constants/theme';
 import ThemeContext from '../context/ThemeContext';
-import { buildTheme, getMainBackgroundColor } from '../helpers/colors';
+import { buildTheme, getMainBackgroundColor, getReadableColor } from '../helpers/colors';
 import PopoverProvider from './PopoverProvider';
 import ReqoreProvider from './ReqoreProvider';
 import ReqoreThemeProvider from './ThemeProvider';
@@ -56,11 +56,24 @@ const GlobalStyle = createGlobalStyle`
 
 const StyledPortal = styled.div`
   z-index: 9999;
+
   * {
     box-sizing: border-box;
   }
+
+  ${({ theme }) => css`
+    color: ${getReadableColor(theme, undefined, undefined, true)};
+  `}
 `;
 
+const ReqorePortal = forwardRef<HTMLDivElement, {}>((_props, ref) => {
+  return (
+    <ReqoreThemeProvider>
+      <StyledPortal id='reqore-portal' ref={ref} />
+    </ReqoreThemeProvider>
+  );
+});
+
 const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({ children, theme, options }) => {
   const [modalPortal, setModalPortal] = useState<any>(false);
 
@@ -81,8 +94,8 @@ const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({ children, theme, o
             </ReqoreProvider>
           ) : null}
         </ReqoreLayoutWrapper>
+        <ReqorePortal ref={setModalPortal} />
       </ThemeContext.Provider>
-      <StyledPortal id='reqore-portal' ref={setModalPortal} />
     </>
   );
 };

package/src/hooks/useCombinedRefs.ts

@@ -6,9 +6,9 @@ import React from 'react';
  * @param refs - An array of refs to combine.
  * @returns A ref object.
  */
-export function useCombinedRefs(...refs) {
+export function useCombinedRefs<T = any>(...refs) {
   const [_innerRef, setInnerRef] = React.useState(null);
-  const targetRef = React.useRef();
+  const targetRef = React.useRef<T>();
 
   React.useEffect(() => {
     [...refs, setInnerRef].forEach((ref) => {

package/src/hooks/usePaging.ts

@@ -0,0 +1,110 @@
+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;
+}
+
+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,
+    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';
@@ -62,6 +63,7 @@ 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: [
     {