@qoretechnologies/reqore 0.19.13 → 0.20.2

package/src/helpers/sidebar.ts

@@ -0,0 +1,105 @@
+import { reduce, size } from "lodash";
+import {
+  IQorusSidebarCustomItem,
+  IQorusSidebarItems,
+} from "../components/Sidebar";
+
+export const transformMenu: Function = (
+  menu: IQorusSidebarItems,
+  bookmarks: string[],
+  customItems?: IQorusSidebarCustomItem[]
+): Object => {
+  let newMenu: IQorusSidebarItems = { ...menu };
+  let _qorusCustomElements;
+  let _qorusBookmarks;
+
+  if (size(bookmarks)) {
+    _qorusBookmarks = {
+      title: "Bookmarks",
+      items: [],
+    };
+
+    newMenu = reduce(
+      newMenu,
+      (cur, menuSection, name: string) => {
+        let newSection = { ...menuSection };
+
+        newSection.items = [...newSection.items]
+          .map((newSectionItem) => {
+            const copySectionItem = { ...newSectionItem };
+
+            if (copySectionItem.submenu) {
+              copySectionItem.submenu = copySectionItem.submenu.filter(
+                (submenuItem) => {
+                  const isItemInSubmenu = bookmarks.find(
+                    (favoriteItem) => favoriteItem === submenuItem.id
+                  );
+
+                  if (isItemInSubmenu) {
+                    _qorusBookmarks.items.push(submenuItem);
+                  }
+
+                  return !isItemInSubmenu;
+                }
+              );
+
+              if (size(copySectionItem.submenu)) {
+                return copySectionItem;
+              } else {
+                return undefined;
+              }
+            } else {
+              if (
+                !bookmarks.find(
+                  (favoriteItem) => favoriteItem === copySectionItem.id
+                )
+              ) {
+                return copySectionItem;
+              } else {
+                _qorusBookmarks.items.push(copySectionItem);
+                return undefined;
+              }
+            }
+          })
+          .filter((newSectionItem) => newSectionItem);
+
+        return { ...cur, [name]: newSection };
+      },
+      {}
+    );
+
+    newMenu = { _qorusBookmarks, ...newMenu };
+  }
+
+  if (size(customItems)) {
+    _qorusCustomElements = {
+      items: customItems,
+    };
+
+    newMenu = { _qorusCustomElements, ...newMenu };
+  }
+
+  return newMenu;
+};
+
+export const isActive = (
+  to: string,
+  currentPath: string,
+  exact?: boolean
+): boolean => (exact ? currentPath === to : currentPath.startsWith(to));
+
+export const isActiveMulti: Function = (
+  to: string[],
+  currentPath: string,
+  exact?: boolean
+): boolean => {
+  let active: boolean = false;
+
+  to.forEach((path: string) => {
+    if (isActive(path, currentPath, exact)) {
+      active = true;
+    }
+  });
+
+  return active;
+};

package/src/helpers/time.ts

@@ -0,0 +1,21 @@
+/**
+ * If the time is larger than one day, update once a day. If the time is larger than one hour,
+update once an hour. Otherwise update every 5 seconds.
+ * @param {number} time - the time in milliseconds since the epoch
+ * @returns The interval ID.
+ */
+export const getTimeAgoIntervalDelay = (time: number): number => {
+  // If the time is larger than one day
+  if (Date.now() - time > 60000 * 60 * 24) {
+    // update once a day
+    return 60000 * 60 * 24;
+  }
+  // If the time is larger than one hour
+  if (Date.now() - time > 60000 * 60) {
+    // update once an hour
+    return 60000 * 60;
+  }
+
+  // Otherwise update every 5 seconds
+  return 5000;
+};

package/src/helpers/utils.ts

@@ -0,0 +1,75 @@
+import {
+  isArray,
+  isBoolean,
+  isFunction,
+  isNull,
+  isNumber,
+  isObject,
+  isString,
+  isUndefined,
+} from 'lodash';
+
+export const sleep = async (ms: number) => await new Promise((r) => setTimeout(r, ms));
+
+export const getTypeFromValue: Function = (item: any): string => {
+  if (isBoolean(item)) {
+    return 'boolean';
+  }
+
+  if (isString(item)) {
+    return 'string';
+  }
+
+  if (isNumber(item)) {
+    return 'number';
+  }
+
+  if (isArray(item)) {
+    return 'array';
+  }
+
+  if (isObject(item)) {
+    return 'object';
+  }
+
+  if (isFunction(item)) {
+    return 'function';
+  }
+
+  if (isNull(item) || isUndefined(item)) {
+    return 'null';
+  }
+
+  return 'null';
+};
+
+export const getLineCount = (value: string): number => {
+  try {
+    return value.match(/[^\n]*\n[^\n]*/gi).length;
+  } catch (e) {
+    return 0;
+  }
+};
+
+export const calculateStringSizeInPixels = (value: string = '', fontSize: number): number => {
+  const widths = [
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+    0.2796875, 0.2765625, 0.3546875, 0.5546875, 0.5546875, 0.8890625, 0.665625, 0.190625, 0.3328125,
+    0.3328125, 0.3890625, 0.5828125, 0.2765625, 0.3328125, 0.2765625, 0.3015625, 0.5546875,
+    0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875,
+    0.5546875, 0.2765625, 0.2765625, 0.584375, 0.5828125, 0.584375, 0.5546875, 1.0140625, 0.665625,
+    0.665625, 0.721875, 0.721875, 0.665625, 0.609375, 0.7765625, 0.721875, 0.2765625, 0.5, 0.665625,
+    0.5546875, 0.8328125, 0.721875, 0.7765625, 0.665625, 0.7765625, 0.721875, 0.665625, 0.609375,
+    0.721875, 0.665625, 0.94375, 0.665625, 0.665625, 0.609375, 0.2765625, 0.3546875, 0.2765625,
+    0.4765625, 0.5546875, 0.3328125, 0.5546875, 0.5546875, 0.5, 0.5546875, 0.5546875, 0.2765625,
+    0.5546875, 0.5546875, 0.221875, 0.240625, 0.5, 0.221875, 0.8328125, 0.5546875, 0.5546875,
+    0.5546875, 0.5546875, 0.3328125, 0.5, 0.2765625, 0.5546875, 0.5, 0.721875, 0.5, 0.5, 0.5,
+    0.3546875, 0.259375, 0.353125, 0.5890625,
+  ];
+  const avg = 0.5279276315789471;
+
+  /* It's calculating the width of a string in pixels. */
+  return (
+    Array.from(value).reduce((acc, cur) => acc + (widths[cur.charCodeAt(0)] ?? avg), 0) * fontSize
+  );
+};

package/src/hooks/useCombinedRefs.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export function useCombinedRefs(...refs) {
+  const targetRef = React.useRef();
+
+  React.useEffect(() => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+
+      if (typeof ref === 'function') {
+        ref(targetRef.current);
+      } else {
+        ref.current = targetRef.current;
+      }
+    });
+  }, [refs]);
+
+  return targetRef;
+}

package/src/hooks/useLatestZIndex.ts

@@ -0,0 +1,11 @@
+import { useContext, useMemo } from 'react';
+import { ReqoreContext } from '..';
+
+const useLatestZIndex = (): number => {
+  const { getAndIncreaseZIndex } = useContext(ReqoreContext);
+  const zIndex = useMemo(() => getAndIncreaseZIndex(), []);
+
+  return zIndex;
+};
+
+export default useLatestZIndex;

package/src/hooks/useOutsideClick.ts

@@ -0,0 +1,29 @@
+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/usePopover.tsx

@@ -0,0 +1,118 @@
+import { Placement } from '@popperjs/core';
+import { MutableRefObject, useContext, useEffect, useRef } from 'react';
+import { useUpdateEffect } from 'react-use';
+import shortid from 'shortid';
+import PopoverContext from '../context/PopoverContext';
+
+const startEvents = {
+  hover: 'mouseenter',
+  hoverStay: 'mouseenter',
+  click: 'click',
+  focus: 'focusin',
+};
+
+const endEvents = {
+  hover: 'mouseleave',
+  hoverStay: null,
+  click: null,
+  focus: null,
+};
+
+export interface IPopover {
+  content?: JSX.Element | string | undefined;
+  handler?: 'hover' | 'click' | 'focus' | 'hoverStay';
+  placement?: Placement;
+  show?: boolean;
+  openOnMount?: boolean;
+  noArrow?: boolean;
+  useTargetWidth?: boolean;
+  closeOnOutsideClick?: boolean;
+  closeOnAnyClick?: boolean;
+}
+
+export interface IPopoverOptions extends IPopover {
+  targetElement?: HTMLElement;
+}
+
+const usePopover = ({
+  targetElement,
+  content,
+  handler = 'hover',
+  placement,
+  show = true,
+  noArrow,
+  useTargetWidth,
+  closeOnOutsideClick = true,
+  openOnMount = false,
+}: IPopoverOptions) => {
+  const { addPopover, removePopover, updatePopover, popovers } = useContext(PopoverContext);
+  const { current }: MutableRefObject<string> = useRef(shortid.generate());
+
+  const startEvent = startEvents[handler];
+  const endEvent = endEvents[handler];
+
+  const _addPopover = () => {
+    if (popovers?.find((p) => p.id === current)) {
+      removePopover?.(current);
+    } else if (show) {
+      addPopover?.({
+        id: current,
+        content,
+        targetElement,
+        placement,
+        noArrow,
+        useTargetWidth,
+        closeOnOutsideClick,
+        closeOnAnyClick: handler === 'hover' || handler === 'hoverStay',
+      });
+    }
+  };
+
+  const _removePopover = () => {
+    removePopover?.(current);
+  };
+
+  useUpdateEffect(() => {
+    if (show) {
+      updatePopover?.(current, {
+        id: current,
+        content,
+        targetElement,
+        placement,
+        noArrow,
+        useTargetWidth,
+        closeOnOutsideClick,
+        closeOnAnyClick: handler === 'hover' || handler === 'hoverStay',
+      });
+    }
+  }, [content]);
+
+  useEffect(() => {
+    if (openOnMount && targetElement) {
+      _addPopover();
+    }
+  }, [targetElement]);
+
+  useEffect(() => {
+    if (targetElement && content) {
+      targetElement.addEventListener(startEvent, _addPopover);
+
+      if (endEvent) {
+        targetElement.addEventListener(endEvent, _removePopover);
+      }
+    }
+
+    return () => {
+      if (targetElement && content) {
+        targetElement.removeEventListener(startEvent, _addPopover);
+        if (endEvent) {
+          targetElement.removeEventListener(endEvent, _removePopover);
+        }
+      }
+    };
+  });
+
+  return current;
+};
+
+export default usePopover;

package/src/hooks/useShareForwardedRef.ts

@@ -0,0 +1,23 @@
+import { Ref, useEffect, useRef } from "react";
+
+export default function useShareForwardedRef<T>(forwardedRef: Ref<T>) {
+  // final ref that will share value with forward ref. this is the one we will attach to components
+  const innerRef = useRef<T>(null);
+
+  useEffect(() => {
+    // after every render - try to share current ref value with forwarded ref
+    if (!forwardedRef) {
+      return;
+    }
+    if (typeof forwardedRef === "function") {
+      forwardedRef(innerRef.current);
+      return;
+    } else {
+      // @ts-ignore
+      // by default forwardedRef.current is readonly. Let's ignore it
+      forwardedRef.current = innerRef.current;
+    }
+  });
+
+  return innerRef;
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,20 @@
+import { cloneDeep } from 'lodash';
+import { useContext } from 'react';
+import { IReqoreIntent, IReqoreTheme } from '../constants/theme';
+import ThemeContext from '../context/ThemeContext';
+import { mergeThemes } from '../helpers/colors';
+
+export const useReqoreTheme = (
+  element: string,
+  customTheme: Partial<IReqoreTheme> = {},
+  intent?: IReqoreIntent
+) => {
+  const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
+  let _customTheme: Partial<IReqoreTheme> = cloneDeep(customTheme);
+
+  if (element === 'main' && intent) {
+    _customTheme.main = theme.intents[intent];
+  }
+
+  return mergeThemes(element, theme, _customTheme) as IReqoreTheme;
+};

package/src/hooks/useTooltip.ts

@@ -0,0 +1,15 @@
+import { IReqoreTooltip } from '../types/global';
+import usePopover from './usePopover';
+
+export const useTooltip = (
+  targetElement: HTMLElement | undefined,
+  tooltip?: string | IReqoreTooltip
+): void => {
+  const popoverData = typeof tooltip === 'string' ? { content: tooltip } : tooltip;
+
+  usePopover({
+    ...popoverData,
+    targetElement,
+    show: !!popoverData?.content,
+  });
+};