@qoretechnologies/reqore 0.44.0 → 0.46.0

package/src/hooks/useOutsideClick.ts

@@ -1,29 +0,0 @@
-import { MutableRefObject, useCallback, useEffect } from 'react';
-
-const useOutsideClick = (
-  targetElement?: MutableRefObject<any>,
-  checkTarget?: boolean,
-  callback?: () => void
-): void => {
-  const handleClick = useCallback(
-    (event: any): void => {
-      if (
-        !checkTarget ||
-        (targetElement?.current && !targetElement.current.contains(event.target))
-      ) {
-        callback?.();
-      }
-    },
-    [checkTarget, targetElement, callback]
-  );
-
-  useEffect(() => {
-    window.addEventListener('click', handleClick);
-
-    return () => {
-      window.removeEventListener('click', handleClick);
-    };
-  });
-};
-
-export default useOutsideClick;

package/src/hooks/usePaging.ts

@@ -1,128 +0,0 @@
-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 IReqorePageChangeData {
-  isFirst?: boolean;
-  isLast?: boolean;
-}
-
-export interface IReqorePagingOptions<T> {
-  items: T[];
-  startPage?: number;
-  pagesToShow?: number;
-  itemsPerPage?: number;
-  infinite?: boolean;
-  enabled?: boolean;
-  onPageChange?: (page: number, info: IReqorePageChangeData) => void;
-}
-
-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;
-  renderControls: 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,
-    onPageChange,
-  }: 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(() => {
-    onPageChange?.(currentPage, {
-      isFirst: currentPage === 1,
-      isLast: currentPage === allPageCount,
-    });
-  }, [currentPage]);
-
-  useUpdateEffect(() => {
-    setPage(1);
-    setTotalPage(Math.ceil(size(items) / itemsPerPage));
-  }, [size(items)]);
-
-  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,
-    renderControls:
-      enabled &&
-      !(allPageCount === 1 || allPageCount === 0 || (infinite && currentPage === allPageCount)),
-    isLastPage: currentPage === allPageCount,
-    isFirstPage: currentPage === 1,
-    first: () => setPage(1),
-    last: () => setPage(allPageCount),
-  };
-};

package/src/hooks/usePopover.tsx

@@ -1,220 +0,0 @@
-import { Placement } from '@popperjs/core';
-import { MutableRefObject, useEffect, useMemo, useRef } from 'react';
-import { useUnmount, useUpdateEffect } from 'react-use';
-import shortid from 'shortid';
-import { useContext } from 'use-context-selector';
-import { useReqoreProperty } from '..';
-import { IPopoverData } from '../containers/PopoverProvider';
-import { IReqoreOptions } from '../containers/UIProvider';
-import PopoverContext from '../context/PopoverContext';
-import {
-  IReqoreIntent,
-  IWithReqoreEffect,
-  IWithReqoreFlat,
-  IWithReqoreMinimal,
-} from '../types/global';
-import { IReqoreIconName } from '../types/icons';
-
-const startEvents = {
-  hover: 'mouseenter',
-  hoverStay: 'mouseenter',
-  click: 'click',
-  focus: 'focusin',
-};
-
-const endEvents = {
-  hover: 'mouseleave',
-  hoverStay: null,
-  click: null,
-  focus: null,
-};
-
-export interface IPopoverControls {
-  open: () => void;
-  close: () => void;
-  isOpen: () => boolean;
-  id: string;
-}
-
-export interface IPopover
-  extends IReqoreIntent,
-    IWithReqoreMinimal,
-    IWithReqoreEffect,
-    IWithReqoreFlat {
-  content?: JSX.Element | string | undefined;
-  handler?: 'hover' | 'click' | 'focus' | 'hoverStay';
-  placement?: Placement;
-  show?: boolean;
-  openOnMount?: boolean;
-  noArrow?: boolean;
-  noWrapper?: boolean;
-  useTargetWidth?: boolean;
-  closeOnOutsideClick?: boolean;
-  closeOnAnyClick?: boolean;
-  delay?: number;
-  blur?: boolean;
-  transparent?: boolean;
-  maxWidth?: string;
-  maxHeight?: string;
-  icon?: IReqoreIconName;
-  title?: string;
-  updater?: string | number;
-  uiScale?: IReqoreOptions['uiScale'];
-}
-
-export interface IPopoverOptions extends IPopover {
-  targetElement?: HTMLElement;
-  passPopoverData?: (data: IPopoverControls) => void;
-}
-
-const usePopover = ({
-  targetElement,
-  content,
-  handler = 'hover',
-  placement,
-  show = true,
-  noArrow,
-  useTargetWidth,
-  closeOnOutsideClick = true,
-  openOnMount = false,
-  delay,
-  ...rest
-}: IPopoverOptions): IPopoverControls => {
-  const { addPopover, removePopover, updatePopover, popovers, isPopoverOpen } =
-    useContext(PopoverContext);
-  const tooltips = useReqoreProperty('tooltips');
-  const { current }: MutableRefObject<string> = useRef(shortid.generate());
-  let { current: timeout }: MutableRefObject<any> = useRef(0);
-
-  const startEvent = startEvents[handler];
-  const endEvent = endEvents[handler];
-  const currentPopover: IPopoverData = useMemo(
-    () => popovers?.find((p) => p.id === current),
-    [popovers, current]
-  );
-
-  const openPopover = () => {
-    addPopover?.({
-      id: current,
-      content,
-      targetElement,
-      placement,
-      noArrow,
-      useTargetWidth,
-      closeOnOutsideClick,
-      closeOnAnyClick: handler === 'hover',
-      ...rest,
-    });
-
-    if (rest.blur) {
-      // Create a div and prepend before the targetElement
-      const blurDiv = document.createElement('div');
-
-      blurDiv.id = `reqore-blur-${current}`;
-      blurDiv.classList.add('reqore-blur-wrapper');
-
-      // Add the blur div before the target element
-      targetElement.before(blurDiv);
-
-      // Add the highest z-index to the target element
-      targetElement.classList.add('reqore-blur-z-index');
-    }
-  };
-
-  const _addPopover = () => {
-    if (currentPopover) {
-      if (handler !== 'hoverStay' && handler !== 'focus') {
-        _removePopover();
-      }
-    } else if (show) {
-      if (delay || tooltips.delay) {
-        timeout = setTimeout(() => {
-          openPopover();
-        }, delay || tooltips.delay);
-      } else {
-        openPopover();
-      }
-    }
-  };
-
-  const _removePopover = () => {
-    cancelTimeout();
-    removePopover?.(current);
-  };
-
-  const cancelTimeout = () => {
-    clearTimeout(timeout);
-    timeout = null;
-  };
-
-  useUpdateEffect(() => {
-    if (content && show) {
-      updatePopover?.(current, {
-        id: current,
-        content,
-        targetElement,
-        placement,
-        noArrow,
-        useTargetWidth,
-        closeOnOutsideClick,
-        closeOnAnyClick: handler === 'hover',
-        ...rest,
-      });
-    }
-  }, [content]);
-
-  useEffect(() => {
-    if (openOnMount && targetElement) {
-      _addPopover();
-    }
-  }, [targetElement?.outerHTML]);
-
-  useEffect(() => {
-    if (targetElement && content) {
-      targetElement.addEventListener(startEvent, _addPopover);
-
-      if (endEvent) {
-        targetElement.addEventListener(endEvent, _removePopover);
-      }
-
-      if (handler === 'hoverStay') {
-        targetElement.addEventListener('mouseleave', cancelTimeout);
-      }
-    }
-
-    if (!content) {
-      _removePopover();
-    }
-
-    return () => {
-      cancelTimeout();
-
-      targetElement?.removeEventListener(startEvent, _addPopover);
-
-      if (endEvent) {
-        targetElement?.removeEventListener(endEvent, _removePopover);
-      }
-
-      if (handler === 'hoverStay') {
-        targetElement?.removeEventListener('mouseleave', cancelTimeout);
-      }
-    };
-  }, [targetElement?.toString(), content, current, currentPopover]);
-
-  useUnmount(() => {
-    cancelTimeout();
-  });
-
-  return {
-    id: current,
-    open: () => {
-      if (!isPopoverOpen(current)) {
-        openPopover();
-      }
-    },
-    close: () => _removePopover(),
-    isOpen: () => isPopoverOpen(current),
-  };
-};
-
-export default usePopover;

package/src/hooks/useQueryWithDelay.ts

@@ -1,30 +0,0 @@
-import { useState } from 'react';
-import { useDebounce, useUpdateEffect } from 'react-use';
-
-export const useQueryWithDelay = (
-  defaultQuery: string = '',
-  delay: number = 300,
-  onQueryChange?: (query: string | number) => void
-) => {
-  const [query, setQuery] = useState<string>(defaultQuery);
-  const [preQuery, setPreQuery] = useState<string>(defaultQuery);
-
-  useUpdateEffect(() => {
-    onQueryChange?.(query);
-  }, [query]);
-
-  useDebounce(
-    () => {
-      setQuery(preQuery);
-    },
-    delay,
-    [preQuery]
-  );
-
-  return {
-    query,
-    setQuery,
-    setPreQuery,
-    preQuery,
-  };
-};

package/src/hooks/useReqore.ts

@@ -1,12 +0,0 @@
-import { useContext } from 'use-context-selector';
-import ReqoreContext, { IReqoreContext } from '../context/ReqoreContext';
-
-export const useReqore = (): IReqoreContext => {
-  const reqore = useContext(ReqoreContext);
-
-  if (!reqore) {
-    throw new Error('Reqore context is not defined');
-  }
-
-  return reqore;
-};

package/src/hooks/useReqoreContext.ts

@@ -1,16 +0,0 @@
-import { useContextSelector } from 'use-context-selector';
-import ReqoreContext, { IReqoreContext } from '../context/ReqoreContext';
-
-export const useReqoreProperty = <T extends keyof IReqoreContext>(
-  property: T
-): IReqoreContext[T] => {
-  const contextProperty = useContextSelector(ReqoreContext, (value) => {
-    if (!(property in value)) {
-      throw new Error(`Reqore context property ${property} not found`);
-    }
-
-    return value[property];
-  });
-
-  return contextProperty;
-};

package/src/hooks/useReqoreEffect.ts

@@ -1,49 +0,0 @@
-import { useMemo } from 'react';
-import {
-  IReqoreEffect,
-  TReqoreEffectGradientAnimationTrigger,
-  TReqoreHexColor,
-} from '../components/Effect';
-import { IReqoreTheme } from '../constants/theme';
-import { useReqoreTheme } from './useTheme';
-
-export const useReqoreEffect = (
-  component: 'buttons',
-  theme: IReqoreTheme,
-  effect?: IReqoreEffect
-): IReqoreEffect => {
-  let _theme: IReqoreTheme = useReqoreTheme();
-
-  // Return the effect if the component is not defined in the theme
-  if (!theme[component]) {
-    return effect;
-  }
-
-  if (theme) {
-    // No other way to conditionally use a hook
-    _theme = theme;
-  }
-
-  const colors: TReqoreHexColor = useMemo(() => {
-    return _theme[component].gradient ? _theme.main : undefined;
-  }, [_theme, effect]);
-
-  const animate: TReqoreEffectGradientAnimationTrigger = useMemo(() => {
-    return _theme[component].animate;
-  }, [_theme, effect]);
-
-  const _effect = useMemo(() => {
-    return {
-      ...effect,
-      gradient: {
-        colors,
-        animate,
-
-        // If the user has defined a gradient, we don't want to override it
-        ...effect?.gradient,
-      },
-    };
-  }, [colors, animate, effect]);
-
-  return _effect;
-};

package/src/hooks/useTextareaAutoSize.ts

@@ -1,22 +0,0 @@
-import { useEffect } from 'react';
-
-// Updates the height of a <textarea> when the value changes.
-const useAutosizeTextArea = (
-  textAreaRef: HTMLTextAreaElement | null,
-  value: string,
-  scaleWithContent?: boolean
-) => {
-  useEffect(() => {
-    if (textAreaRef && scaleWithContent) {
-      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
-      textAreaRef.style.height = '0px';
-      const scrollHeight = textAreaRef.scrollHeight;
-
-      // We then set the height directly, outside of the render loop
-      // Trying to set this with state or a ref will product an incorrect value.
-      textAreaRef.style.height = scrollHeight + 'px';
-    }
-  }, [textAreaRef, value]);
-};
-
-export default useAutosizeTextArea;

package/src/hooks/useTheme.ts

@@ -1,48 +0,0 @@
-import { cloneDeep } from 'lodash';
-import { useMemo } from 'react';
-import { TReqoreEffectColor } from '../components/Effect';
-import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
-import { getColorFromMaybeString, mergeThemes } from '../helpers/colors';
-import { useReqoreProperty } from './useReqoreContext';
-
-export interface IReqoreCustomTheme extends Partial<Omit<IReqoreTheme, 'main' | 'text'>> {
-  main?: TReqoreEffectColor;
-  text?: {
-    color?: TReqoreEffectColor;
-    dim?: boolean;
-  };
-  gradient?: boolean;
-}
-
-export const useReqoreTheme = (
-  element?: string,
-  customTheme: IReqoreCustomTheme = {},
-  intent?: TReqoreIntent,
-  intentsKey: 'intents' | 'notifications' = 'intents'
-): IReqoreTheme => {
-  const theme: IReqoreTheme = useReqoreProperty('theme');
-
-  const finalTheme = useMemo(() => {
-    if (!element) {
-      return theme;
-    }
-
-    const _customTheme: IReqoreCustomTheme = cloneDeep(customTheme);
-
-    if (_customTheme.main) {
-      _customTheme.main = getColorFromMaybeString(theme, customTheme.main);
-    }
-
-    if (_customTheme.text?.color) {
-      _customTheme.text.color = getColorFromMaybeString(theme, customTheme.text.color);
-    }
-
-    if (element === 'main' && intent) {
-      _customTheme.main = theme[intentsKey][intent];
-    }
-
-    return mergeThemes(element, theme, _customTheme) as IReqoreTheme;
-  }, [JSON.stringify(theme), element, JSON.stringify(customTheme), intent, intentsKey]);
-
-  return finalTheme;
-};

package/src/hooks/useTooltip.ts

@@ -1,40 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { IReqoreTooltip, TReqoreTooltipProp } from '../types/global';
-import usePopover from './usePopover';
-
-export const useTooltip = (
-  targetElement: HTMLElement | undefined,
-  tooltip?: TReqoreTooltipProp
-): void => {
-  const [element, setElement] = useState<HTMLElement | undefined>(undefined);
-  const [data, setData] = useState<string | IReqoreTooltip | undefined>(undefined);
-  const content = useMemo(
-    () => (typeof tooltip === 'object' ? tooltip?.content : tooltip),
-    [tooltip]
-  );
-
-  useEffect(() => {
-    if (!content) {
-      setElement(targetElement);
-      setData(undefined);
-    } else {
-      setElement(targetElement);
-      setData(tooltip);
-    }
-  }, [content]);
-
-  useEffect(() => {
-    if (targetElement) {
-      setElement(targetElement);
-      setData(tooltip);
-    }
-  }, [targetElement]);
-
-  const popoverData = typeof data === 'string' ? { content: data } : data;
-
-  usePopover({
-    ...popoverData,
-    targetElement: element,
-    show: !!popoverData?.content,
-  });
-};

package/src/hooks/useWhyDidYouUpdate.ts

@@ -1,32 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export function useWhyDidYouUpdate(name, props) {
-  // Get a mutable ref object where we can store props ...
-  // ... for comparison next time this hook runs.
-  const previousProps: any = useRef();
-  useEffect(() => {
-    if (previousProps.current) {
-      // Get all keys from previous and current props
-      const allKeys = Object.keys({ ...previousProps.current, ...props });
-      // Use this object to keep track of changed props
-      const changesObj = {};
-      // Iterate through keys
-      allKeys.forEach((key) => {
-        // If previous is different from current
-        if (previousProps.current[key] !== props[key]) {
-          // Add to changesObj
-          changesObj[key] = {
-            from: previousProps.current[key],
-            to: props[key],
-          };
-        }
-      });
-      // If changesObj not empty then output to console
-      if (Object.keys(changesObj).length) {
-        console.warn('[why-did-you-update]', name, changesObj);
-      }
-    }
-    // Finally update previousProps with current props for next hook call
-    previousProps.current = props;
-  });
-}