@qoretechnologies/reqore 0.44.0 → 0.45.0

package/src/components/Notifications/notification.tsx

@@ -1,362 +0,0 @@
-import { animated, useTransition } from '@react-spring/web';
-import { rgba } from 'polished';
-import React, { forwardRef, useEffect, useState } from 'react';
-import { useMount, useUnmount } from 'react-use';
-import styled, { css, keyframes } from 'styled-components';
-import { SPRING_CONFIG } from '../../constants/animations';
-import { PADDING_FROM_SIZE, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
-import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
-import ReqoreThemeProvider from '../../containers/ThemeProvider';
-import { fadeIn } from '../../helpers/animations';
-import {
-  changeDarkness,
-  changeLightness,
-  getNotificationIntent,
-  getReadableColor,
-} from '../../helpers/colors';
-import { useReqoreTheme } from '../../hooks/useTheme';
-import {
-  IWithReqoreCustomTheme,
-  IWithReqoreEffect,
-  IWithReqoreMinimal,
-  IWithReqoreOpaque,
-} from '../../types/global';
-import { IReqoreIconName } from '../../types/icons';
-import { StyledEffect } from '../Effect';
-import { ReqoreHeading } from '../Header';
-import ReqoreIcon from '../Icon';
-import { ReqoreSpinner } from '../Spinner';
-
-export type IReqoreNotificationType = TReqoreIntent;
-
-export interface IReqoreNotificationProps
-  extends IWithReqoreEffect,
-    IWithReqoreMinimal,
-    IWithReqoreOpaque,
-    IWithReqoreCustomTheme {
-  type?: IReqoreNotificationType;
-  intent?: TReqoreIntent;
-  title?: string;
-  content: string | React.ReactNode;
-  icon?: IReqoreIconName;
-  onClose?: () => any;
-  onClick?: () => any;
-  duration?: number;
-  onFinish?: () => any;
-  fluid?: boolean;
-  flat?: boolean;
-  size?: TSizes;
-}
-
-export interface IReqoreNotificationStyle extends IWithReqoreOpaque {
-  theme: IReqoreTheme;
-  type?: IReqoreNotificationType;
-  clickable?: boolean;
-  timeout?: number;
-  intent?: TReqoreIntent;
-  hasShadow?: boolean;
-  fluid?: boolean;
-  flat?: boolean;
-  minimal?: boolean;
-  size?: TSizes;
-  asMessage?: boolean;
-  margin?: 'top' | 'bottom' | 'both' | 'none';
-}
-
-const timeoutAnimation = keyframes`
-  0% {
-    width: 100%;
-  }
-  100% {
-    width: 0;
-  }
-`;
-
-export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotificationStyle>`
-  min-width: ${({ fluid }) => (!fluid ? '30px' : undefined)};
-  max-width: ${({ maxWidth, fluid, fixed }) => maxWidth || (fluid && !fixed ? '100%' : undefined)};
-  border-radius: 5px;
-  display: flex;
-  flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
-  align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
-  overflow: hidden;
-  position: relative;
-  transition: all 0.2s ease-out;
-
-  ${({ margin, size = 'normal' }) => css`
-    margin-top: ${margin === 'top' || margin === 'both'
-      ? `${PADDING_FROM_SIZE[size]}px`
-      : undefined};
-    margin-bottom: ${margin === 'bottom' || margin === 'both'
-      ? `${PADDING_FROM_SIZE[size]}px`
-      : undefined};
-  `};
-
-  // Do not fade in the component if it's a message
-  ${({ asMessage }) => {
-    if (asMessage) {
-      return undefined;
-    }
-    return css`
-      animation: 0.2s ${fadeIn} ease-in;
-    `;
-  }}
-
-  &:not(:first-child) {
-    margin-top: ${({ asMessage, size }) =>
-      asMessage ? undefined : `${PADDING_FROM_SIZE[size]}px`};
-  }
-
-  ${({
-    theme,
-    type,
-    intent,
-    clickable,
-    timeout,
-    hasShadow,
-    flat,
-    minimal,
-    opaque = true,
-  }: IReqoreNotificationStyle) => css`
-    background-color: ${minimal
-      ? 'transparent'
-      : opaque
-      ? changeLightness(theme.main, 0.1)
-      : rgba(getNotificationIntent(theme, intent || type), 0.3)};
-    border: ${flat ? 0 : '1px solid'};
-    border-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.2)};
-
-    ${hasShadow &&
-    css`
-      box-shadow: 0px 0px 30px 10px ${rgba('#000000', 0.3)};
-    `}
-
-    ${timeout &&
-    css`
-      &::before {
-        content: '';
-        position: absolute;
-        display: block;
-        top: 0;
-        height: 3px;
-        background-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.2)};
-        animation-name: ${timeoutAnimation};
-        animation-duration: ${timeout}ms;
-      }
-    `}
-
-    color: ${minimal || !opaque
-      ? 'inherit'
-      : getReadableColor(theme, null, null, true, minimal ? theme.originalMain : undefined)};
-
-    ${clickable &&
-    css`
-      cursor: pointer;
-      &:hover {
-        background-color: ${minimal
-          ? 'transparent'
-          : opaque
-          ? changeDarkness(theme.main, 0.002)
-          : rgba(getNotificationIntent(theme, intent || type), 0.4)};
-        border-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.25)};
-      }
-    `}
-  `}
-`;
-
-export const StyledIconWrapper = styled.div<IReqoreNotificationStyle>`
-  flex: 0 1 auto;
-  flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.2s ease-out;
-
-  ${({ clickable, theme, intent, type }) =>
-    clickable &&
-    css`
-      margin-top: unset;
-      height: unset;
-
-      .reqore-icon {
-        transform: scale(0.85);
-      }
-
-      &:hover {
-        cursor: pointer;
-        background-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.02)};
-        .reqore-icon {
-          transform: scale(1);
-        }
-      }
-    `}
-`;
-
-export const StyledNotificationInnerContent = styled.div<IReqoreNotificationStyle>`
-  flex: 1;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-
-  .reqore-heading {
-    line-height: 1;
-  }
-`;
-
-export const StyledNotificationContentWrapper = styled.div<IReqoreNotificationStyle>`
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  padding: ${({ size = 'normal' }: IReqoreNotificationStyle) => `${PADDING_FROM_SIZE[size]}px`};
-`;
-
-export const StyledNotificationTitle = styled.h4`
-  margin: 0 0 5px 0;
-  padding: 0;
-  display: flex;
-  align-items: center;
-`;
-
-export const StyledNotificationContent = styled.div`
-  margin: 0;
-  padding: 0;
-  flex: 1;
-  font-size: ${({ size = 'normal' }) => TEXT_FROM_SIZE[size]}px;
-  overflow-wrap: anywhere;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-
-  ${({ hasTitle, size = 'normal' }) =>
-    hasTitle &&
-    css`
-      padding-top: ${PADDING_FROM_SIZE[size]}px;
-    `}
-`;
-
-export const typeToIcon: { [type: string]: IReqoreIconName } = {
-  info: 'InformationLine',
-  pending: 'TimerLine',
-  warning: 'AlarmWarningLine',
-  danger: 'ErrorWarningLine',
-  success: 'CheckFill',
-  muted: 'Forbid2Line',
-};
-
-const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
-  (
-    {
-      type,
-      intent,
-      icon,
-      title,
-      content,
-      onClose,
-      onClick,
-      duration,
-      onFinish,
-      flat,
-      minimal,
-      opaque = true,
-      size = 'normal',
-      customTheme,
-    },
-    ref: any
-  ) => {
-    const [internalTimeout, setInternalTimeout] = useState(null);
-    const theme = useReqoreTheme('main', customTheme, type || intent, 'notifications');
-
-    const transitions = useTransition(true, {
-      from: { opacity: 0, transform: 'scale(0.9)' },
-      enter: { opacity: 1, transform: 'scale(1)' },
-      leave: { opacity: 0, transform: 'scale(0.9)' },
-      config: SPRING_CONFIG,
-    });
-
-    useMount(() => {
-      if (duration) {
-        setInternalTimeout(
-          setTimeout(() => {
-            onFinish && onFinish();
-          }, duration)
-        );
-      }
-    });
-
-    useEffect(() => {
-      if (internalTimeout) {
-        clearTimeout(internalTimeout);
-        setInternalTimeout(
-          setTimeout(() => {
-            onFinish && onFinish();
-          }, duration)
-        );
-      }
-    }, [duration, type, intent, content, title]);
-
-    useUnmount(() => {
-      clearTimeout(internalTimeout);
-    });
-
-    return transitions((styles, item) =>
-      item ? (
-        <ReqoreThemeProvider>
-          <StyledReqoreNotification
-            as={animated.div}
-            key={`${duration}${type || intent}${title}${content}`}
-            type={type || intent}
-            hasShadow
-            timeout={duration}
-            clickable={!!onClick}
-            onClick={() => onClick?.()}
-            flat={flat}
-            minimal={minimal}
-            className='reqore-notification'
-            ref={ref}
-            style={styles}
-            size={size}
-            opaque={opaque}
-            theme={theme}
-            maxWidth='450px'
-          >
-            <StyledNotificationContentWrapper size={size} theme={theme}>
-              {type || intent || icon ? (
-                <>
-                  {intent === 'pending' || type === 'pending' ? (
-                    <ReqoreSpinner size={size} type={5} iconMargin={'right'} />
-                  ) : (
-                    <ReqoreIcon
-                      icon={icon || typeToIcon[type || intent]}
-                      margin={'right'}
-                      size={size}
-                    />
-                  )}
-                </>
-              ) : null}
-              <StyledNotificationInnerContent>
-                {title && <ReqoreHeading size={size}>{title}</ReqoreHeading>}
-                <StyledNotificationContent theme={theme} hasTitle={!!title} size={size}>
-                  {content}
-                </StyledNotificationContent>
-              </StyledNotificationInnerContent>
-            </StyledNotificationContentWrapper>
-            <StyledIconWrapper
-              type={type || intent}
-              size={size}
-              clickable
-              className='reqore-notification-close'
-              onClick={(event) => {
-                event.stopPropagation();
-                onClose && onClose();
-              }}
-            >
-              <ReqoreIcon icon='CloseFill' margin='both' size={size} />
-            </StyledIconWrapper>
-          </StyledReqoreNotification>
-        </ReqoreThemeProvider>
-      ) : null
-    );
-  }
-);
-
-export default ReqoreNotification;

package/src/components/Paging/index.tsx

@@ -1,321 +0,0 @@
-import { debounce } from 'lodash';
-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;
-  loadAllButtonProps?: IReqoreButtonProps;
-  firstPageLabel?: string;
-  lastPageLabel?: string;
-  nextPageLabel?: string;
-  previousPageLabel?: string;
-  pageLabel?: string;
-  loadMoreLabel?: string;
-  loadAllLabel?: string;
-  showPages?: boolean;
-  showControls?: boolean;
-  showLoadAllButton?: boolean;
-  showPagesAs?: 'buttons' | 'list';
-  showLabels?: boolean;
-  scrollOnLoadMore?: boolean;
-  autoLoadMore?: boolean;
-  changePageOnScroll?: 'vertical' | 'horizontal';
-  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>({
-  back,
-  first,
-  currentPage,
-  isLastPage,
-  isFirstPage,
-  pageCount,
-  pages,
-  last,
-  next,
-  setPage,
-  infinite,
-  itemsLeft,
-  showPagesAs = 'buttons',
-  pageButtonProps = {},
-  activePageButtonProps = {},
-  listPageButtonProps = {},
-  controlPageButtonProps = {},
-  loadMoreButtonProps = {},
-  loadAllButtonProps = {},
-  firstPageLabel = 'First',
-  lastPageLabel = 'Last',
-  nextPageLabel = 'Next',
-  previousPageLabel = 'Back',
-  pageLabel = 'Page',
-  loadMoreLabel = 'Load more',
-  loadAllLabel = 'Load all',
-  showLabels,
-  showPages = true,
-  showControls = true,
-  showLoadAllButton = true,
-  scrollOnLoadMore,
-  autoLoadMore,
-  itemsPerPage,
-  renderControls,
-  scrollContainer,
-  scrollToTopOnPageChange = true,
-  changePageOnScroll,
-  ...rest
-}: IReqorePaginationProps<T>) {
-  const [loadMoreRef, setLoadMoreRef] = useState<HTMLButtonElement>(undefined);
-  const [scrollTargetRef, setScrollTargetRef] = useState<HTMLDivElement>(undefined);
-  const observer = useRef<IntersectionObserver>(null);
-
-  useUpdateEffect(() => {
-    // If scroll container is defined, do not scroll to load more button
-    // because it will be scrolled to the bottom of the container
-    // resulting in infinite scroll
-    if (!scrollContainer && scrollTargetRef && scrollOnLoadMore && !isLastPage && !isFirstPage) {
-      scrollTargetRef.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end',
-        inline: 'start',
-      });
-    }
-  }, [currentPage, scrollTargetRef, scrollContainer, scrollOnLoadMore, isLastPage, isFirstPage]);
-
-  // Scroll to bottom on load more
-  // Scroll container has power over scroll target
-  useUpdateEffect(() => {
-    if (scrollContainer && scrollOnLoadMore && !isFirstPage) {
-      scrollContainer.scrollBy?.({
-        top: scrollContainer.scrollHeight,
-        behavior: 'smooth',
-      });
-    }
-  }, [currentPage, scrollContainer, scrollOnLoadMore, isFirstPage]);
-
-  // Scroll to top on page change
-  useUpdateEffect(() => {
-    if (scrollContainer && scrollToTopOnPageChange && !infinite) {
-      scrollContainer.scrollTo?.({
-        top: 0,
-        behavior: 'smooth',
-      });
-    }
-  }, [currentPage, scrollContainer, scrollToTopOnPageChange, infinite]);
-
-  // Switch pages when user scrolls and holds the Shift key
-  useEffect(() => {
-    const handleScroll = debounce((e: WheelEvent) => {
-      const deltaKey = changePageOnScroll === 'vertical' ? 'deltaY' : 'deltaX';
-      // Only change pages when user holds the shift key
-      // aka horizontal scroll
-      if (
-        changePageOnScroll === 'vertical' ||
-        (changePageOnScroll === 'horizontal' && e.shiftKey)
-      ) {
-        // Do not horizontal scroll
-        e.preventDefault();
-        // If the user scrolls to the right, go to the next page
-        if (e[deltaKey] > 20) {
-          next();
-          // If the user scrolls to the left, go to the previous page
-        } else if (e[deltaKey] < -20) {
-          back();
-        }
-      }
-    }, 30);
-
-    if (scrollContainer && changePageOnScroll) {
-      scrollContainer.addEventListener('wheel', handleScroll);
-    }
-
-    return () => {
-      if (scrollContainer) {
-        scrollContainer.removeEventListener('wheel', handleScroll);
-      }
-    };
-  }, [currentPage, scrollContainer, changePageOnScroll]);
-
-  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} />
-          <ReqoreControlGroup stack>
-            <ReqoreButton
-              icon='ArrowDropDownLine'
-              badge={itemsPerPage}
-              iconsAlign='center'
-              {...loadMoreButtonProps}
-              onClick={next}
-              ref={setLoadMoreRef}
-              style={{
-                scrollMarginTop: '200px',
-              }}
-            >
-              {showLabels && loadMoreLabel}
-            </ReqoreButton>
-            {showLoadAllButton && (
-              <ReqoreButton
-                icon='ArrowDropDownLine'
-                badge={itemsLeft}
-                iconsAlign='center'
-                {...loadAllButtonProps}
-                onClick={last}
-                style={{
-                  scrollMarginTop: '200px',
-                }}
-              >
-                {showLabels && loadAllLabel}
-              </ReqoreButton>
-            )}
-          </ReqoreControlGroup>
-        </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;