@qoretechnologies/reqore 0.32.3 → 0.34.0

package/src/components/Paging/index.tsx

@@ -0,0 +1,260 @@
+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;
+  scrollContainer?: HTMLElement;
+  scrollToTopOnPageChange?: boolean;
+}
+export interface IReqorePaginationProps<T>
+  extends Omit<IReqorePagingResult<T>, 'items'>,
+    IReqorePaginationComponentProps {}
+
+export const StyledPagesWrapper = styled(ReqoreControlGroup)`
+  width: unset;
+  flex: 0 auto;
+  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,
+  renderControls,
+  scrollContainer,
+  scrollToTopOnPageChange = true,
+  ...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]);
+
+  // Scroll to bottom on load more
+  useEffect(() => {
+    if (scrollContainer && scrollOnLoadMore && !isFirstPage) {
+      scrollContainer.scrollBy?.({
+        top: scrollContainer.scrollHeight,
+        behavior: 'smooth',
+      });
+    }
+  }, [currentPage, scrollContainer, scrollOnLoadMore, isFirstPage]);
+
+  // Scroll to top on page change
+  useEffect(() => {
+    if (scrollContainer && scrollToTopOnPageChange && !infinite) {
+      scrollContainer.scrollTo?.({
+        top: 0,
+        behavior: 'smooth',
+      });
+    }
+  }, [currentPage, scrollContainer, scrollToTopOnPageChange, infinite]);
+
+  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 (!renderControls) {
+    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>
+      ) : null}
+      {!infinite ? (
+        <>
+          {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}
+        </>
+      ) : null}
+    </ReqoreControlGroup>
+  );
+}
+
+export const ReqorePagination = memo(Pagination) as typeof Pagination;

package/src/components/Panel/index.tsx

@@ -1,6 +1,6 @@
 import { size } from 'lodash';
 import { darken, rgba } from 'polished';
-import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
+import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
@@ -103,6 +103,7 @@ export interface IReqorePanelProps
   iconColor?: TReqoreEffectColor;
   responsiveActions?: boolean;
   responsiveTitle?: boolean;
+  getContentRef?: (ref: HTMLDivElement) => any;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -298,6 +299,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       responsiveActions = true,
       responsiveTitle = true,
       size: panelSize = 'normal',
+      getContentRef,
       ...rest
     }: IReqorePanelProps,
     ref
@@ -643,6 +645,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             padded={padded}
             minimal={minimal}
             size={contentSize || panelSize}
+            ref={getContentRef}
             noHorizontalPadding={noHorizontalPadding}
           >
             {children}

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,67 @@
+import { IReqorePaginationComponentProps, IReqorePaginationProps } from '../components/Paging';
+import { IReqorePagingOptions } from '../hooks/usePaging';
+
+export type TReqorePaginationType<T> =
+  | 'buttons'
+  | 'list'
+  | 'infinite'
+  | 'auto-load'
+  | IReqoreComponentPagingOptions<T>;
+
+export interface IReqoreComponentPagingOptions<T>
+  extends Omit<IReqorePagingOptions<T>, 'items'>,
+    IReqorePaginationComponentProps {
+  pageControlsPosition?: 'top' | 'bottom' | 'both';
+  includeTopControls?: boolean;
+  includeBottomControls?: boolean;
+}
+
+export type TReqorePaginationTypeResult<T> = {
+  pagingOptions?: Omit<IReqorePagingOptions<T>, 'items'>;
+  componentOptions?: Partial<Omit<IReqorePaginationProps<T>, 'items'>>;
+  pageControlsPosition?: 'top' | 'bottom' | 'both';
+  includeTopControls?: boolean;
+  includeBottomControls?: boolean;
+};
+
+export function getPaginationOptionsFromType<T>(
+  type: TReqorePaginationType<T>
+): TReqorePaginationTypeResult<T> {
+  if (!type) return {};
+
+  if (typeof type === 'object') {
+    const {
+      infinite,
+      itemsPerPage,
+      pagesToShow,
+      startPage,
+      pageControlsPosition = 'bottom',
+      includeBottomControls,
+      includeTopControls,
+      ...componentOptions
+    } = type;
+    return {
+      pagingOptions: { infinite, itemsPerPage, pagesToShow, startPage },
+      pageControlsPosition,
+      componentOptions,
+      includeBottomControls,
+      includeTopControls,
+    };
+  }
+
+  switch (type) {
+    case 'buttons':
+      return {};
+    case 'list':
+      return {
+        componentOptions: {
+          showPagesAs: 'list',
+        },
+      };
+    case 'infinite':
+    case 'auto-load':
+      return { pagingOptions: { infinite: true } };
+    default:
+      return {};
+  }
+}

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/Paging.tsx

@@ -0,0 +1,90 @@
+import { memo, useMemo } from 'react';
+import { IReqorePaginationProps, ReqorePagination } from '../components/Paging';
+import { ReqoreVerticalSpacer } from '../components/Spacer';
+import {
+  TReqorePaginationType,
+  TReqorePaginationTypeResult,
+  getPaginationOptionsFromType,
+} from '../constants/paging';
+import { PADDING_FROM_SIZE, TSizes } from '../constants/sizes';
+import { useReqorePaging } from '../hooks/usePaging';
+
+export interface IReqorePagingContainerProps<T> {
+  type?: TReqorePaginationType<T>;
+  items: T[];
+  scrollContainer?: HTMLElement;
+  children: (
+    items: T[],
+    Controls: React.FC<Partial<IReqorePaginationProps<T>>>,
+    options: TReqorePaginationTypeResult<T>
+  ) => React.ReactNode;
+  size?: TSizes;
+}
+
+function PagingContainer<T>({
+  type,
+  items,
+  scrollContainer,
+  children,
+  size = 'normal',
+}: IReqorePagingContainerProps<T>) {
+  const {
+    pagingOptions = {},
+    componentOptions = {},
+    pageControlsPosition = 'bottom',
+    includeTopControls = true,
+    includeBottomControls = true,
+  } = useMemo(() => getPaginationOptionsFromType(type), [type]);
+
+  const { items: finalItems, ...pagingData } = useReqorePaging({
+    items,
+    ...pagingOptions,
+    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 />
+      ) : null}
+
+      {children(finalItems, Controls, {
+        pagingOptions,
+        componentOptions,
+        pageControlsPosition,
+        includeTopControls,
+        includeBottomControls,
+      })}
+
+      {includeBottomControls &&
+      (pageControlsPosition === 'bottom' || pageControlsPosition === 'both') ? (
+        <Controls position='bottom' withSpacer />
+      ) : null}
+    </>
+  );
+}
+
+export const ReqorePaginationContainer = memo(PagingContainer) as typeof PagingContainer;

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) => {