@true-engineering/true-react-common-ui-kit 4.0.0-alpha2 → 4.0.0-alpha4

package/src/hooks/use-dropdown.ts

@@ -1,84 +1,84 @@
-import { DependencyList, useEffect } from 'react';
-import usePopper, { VirtualElement } from 'react-overlays/usePopper';
-import { getScrollParent, minWidthModifier } from '../helpers';
-import { IDropdownWithPopperOptions } from '../types';
-
-export const useDropdown = ({
-  isOpen,
-  onDropdownClose,
-  referenceElement,
-  dropdownElement,
-  options,
-  dependenciesForPositionUpdating = [],
-}: {
-  isOpen: boolean;
-  referenceElement: VirtualElement | null | undefined;
-  dropdownElement: HTMLElement | null | undefined;
-  options?: IDropdownWithPopperOptions;
-  dependenciesForPositionUpdating?: DependencyList;
-  onDropdownClose: (event: Event) => void;
-}): ReturnType<typeof usePopper> | undefined => {
-  const {
-    shouldUsePopper = false,
-    shouldRenderInBody = false,
-    shouldHideOnScroll = false,
-    scrollParent = 'document',
-    canBeFlipped = false,
-    modifiers = [],
-    placement = 'bottom-start',
-    flipOptions,
-  } = options ?? {};
-
-  useEffect(() => {
-    if (!shouldHideOnScroll || !isOpen) {
-      return;
-    }
-
-    const scrollParentEl =
-      scrollParent === 'auto'
-        ? getScrollParent(referenceElement as Element)
-        : scrollParent === 'document'
-        ? document
-        : scrollParent;
-    scrollParentEl.addEventListener('scroll', onDropdownClose);
-
-    return () => {
-      scrollParentEl.removeEventListener('scroll', onDropdownClose);
-    };
-  }, [shouldHideOnScroll, isOpen]);
-
-  let popperData: ReturnType<typeof usePopper> | undefined;
-  if (shouldUsePopper) {
-    // TODO: Вытащить хук из под условия???
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    popperData = usePopper(referenceElement, dropdownElement, {
-      enabled: isOpen,
-      placement,
-      modifiers: [
-        ...(shouldRenderInBody ? [minWidthModifier] : []),
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 6],
-          },
-        },
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: canBeFlipped ? ['bottom-start', 'top-start'] : ['bottom-start'],
-            ...flipOptions,
-          },
-        },
-        ...modifiers,
-      ],
-    });
-  }
-
-  useEffect(() => {
-    if (dependenciesForPositionUpdating.length !== 0) {
-      popperData?.update();
-    }
-  }, dependenciesForPositionUpdating);
-
-  return popperData;
-};
+import { DependencyList, useEffect } from 'react';
+import usePopper, { VirtualElement } from 'react-overlays/usePopper';
+import { getScrollParent, minWidthModifier } from '../helpers';
+import { IDropdownWithPopperOptions } from '../types';
+
+export const useDropdown = ({
+  isOpen,
+  onDropdownClose,
+  referenceElement,
+  dropdownElement,
+  options,
+  dependenciesForPositionUpdating = [],
+}: {
+  isOpen: boolean;
+  referenceElement: VirtualElement | null | undefined;
+  dropdownElement: HTMLElement | null | undefined;
+  options?: IDropdownWithPopperOptions;
+  dependenciesForPositionUpdating?: DependencyList;
+  onDropdownClose: (event: Event) => void;
+}): ReturnType<typeof usePopper> | undefined => {
+  const {
+    shouldUsePopper = false,
+    shouldRenderInBody = false,
+    shouldHideOnScroll = false,
+    scrollParent = 'document',
+    canBeFlipped = false,
+    modifiers = [],
+    placement = 'bottom-start',
+    flipOptions,
+  } = options ?? {};
+
+  useEffect(() => {
+    if (!shouldHideOnScroll || !isOpen) {
+      return;
+    }
+
+    const scrollParentEl =
+      scrollParent === 'auto'
+        ? getScrollParent(referenceElement as Element)
+        : scrollParent === 'document'
+        ? document
+        : scrollParent;
+    scrollParentEl.addEventListener('scroll', onDropdownClose);
+
+    return () => {
+      scrollParentEl.removeEventListener('scroll', onDropdownClose);
+    };
+  }, [shouldHideOnScroll, isOpen]);
+
+  let popperData: ReturnType<typeof usePopper> | undefined;
+  if (shouldUsePopper) {
+    // TODO: Вытащить хук из под условия???
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    popperData = usePopper(referenceElement, dropdownElement, {
+      enabled: isOpen,
+      placement,
+      modifiers: [
+        ...(shouldRenderInBody ? [minWidthModifier] : []),
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 6],
+          },
+        },
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: canBeFlipped ? ['bottom-start', 'top-start'] : ['bottom-start'],
+            ...flipOptions,
+          },
+        },
+        ...modifiers,
+      ],
+    });
+  }
+
+  useEffect(() => {
+    if (dependenciesForPositionUpdating.length !== 0) {
+      popperData?.update();
+    }
+  }, dependenciesForPositionUpdating);
+
+  return popperData;
+};

package/src/hooks/use-is-mounted.ts

@@ -1,15 +1,15 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-export const useIsMounted = (): (() => boolean) => {
-  const isMounted = useRef(false);
-
-  useEffect(() => {
-    isMounted.current = true;
-
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
-  return useCallback(() => isMounted.current, []);
-};
+import { useCallback, useEffect, useRef } from 'react';
+
+export const useIsMounted = (): (() => boolean) => {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return useCallback(() => isMounted.current, []);
+};

package/src/hooks/use-merged-refs.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
-import { mergeRefs } from '@true-engineering/true-react-platform-helpers';
-
-export const useMergedRefs: typeof mergeRefs = (refs) => useMemo(() => mergeRefs(refs), refs);
+import { useMemo } from 'react';
+import { mergeRefs } from '@true-engineering/true-react-platform-helpers';
+
+export const useMergedRefs: typeof mergeRefs = (refs) => useMemo(() => mergeRefs(refs), refs);

package/src/hooks/use-mixed-styles.ts

@@ -1,14 +1,14 @@
-import { useMemo } from 'react';
-import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
-
-export const useMixedStyles = <StyleSheet>(
-  baseStyles?: StyleSheet,
-  tweakStyles?: StyleSheet,
-): StyleSheet | undefined =>
-  useMemo(
-    () =>
-      isNotEmpty(baseStyles) && isNotEmpty(tweakStyles)
-        ? mergeStyles(baseStyles, tweakStyles)
-        : baseStyles ?? tweakStyles,
-    [baseStyles, tweakStyles],
-  );
+import { useMemo } from 'react';
+import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+
+export const useMixedStyles = <StyleSheet>(
+  baseStyles?: StyleSheet,
+  tweakStyles?: StyleSheet,
+): StyleSheet | undefined =>
+  useMemo(
+    () =>
+      isNotEmpty(baseStyles) && isNotEmpty(tweakStyles)
+        ? mergeStyles(baseStyles, tweakStyles)
+        : baseStyles ?? tweakStyles,
+    [baseStyles, tweakStyles],
+  );

package/src/hooks/use-on-click-outside.ts

@@ -1,77 +1,77 @@
-import { RefObject, useEffect } from 'react';
-
-export const checkElementParentsClassNames = (element: HTMLElement, className: string): boolean => {
-  if (element.classList.contains(className)) {
-    return true;
-  }
-
-  if (element === document.body) {
-    return false;
-  }
-
-  if (element.parentElement) {
-    return checkElementParentsClassNames(element.parentElement, className);
-  }
-
-  return false;
-};
-
-export const isElementOneOfParents = (element: HTMLElement, elToSearch: HTMLElement): boolean => {
-  if (element === elToSearch) {
-    return true;
-  }
-
-  if (element === document.body) {
-    return false;
-  }
-
-  if (element.parentElement) {
-    return isElementOneOfParents(element.parentElement, elToSearch);
-  }
-
-  return false;
-};
-
-export function useOnClickOutsideWithRef<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
-  ref: RefObject<Elem>,
-  handler: (event: MouseEvent | TouchEvent) => void,
-  ignoreRef?: RefObject<IgnoreElem>,
-): void {
-  useOnClickOutside(ref, handler, undefined, ignoreRef);
-}
-
-export function useOnClickOutside<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
-  ref: RefObject<Elem>,
-  handler: (event: MouseEvent | TouchEvent) => void,
-  ignoreClassName?: string,
-  ignoreRef?: RefObject<IgnoreElem>,
-): void {
-  useEffect(() => {
-    const listener = (event: MouseEvent | TouchEvent) => {
-      // Do nothing if clicking ref's element or descendent elements
-      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
-        return;
-      }
-
-      if (
-        (ignoreClassName !== undefined &&
-          checkElementParentsClassNames(event.target as HTMLElement, ignoreClassName)) ||
-        (ignoreRef !== undefined &&
-          ignoreRef.current !== null &&
-          isElementOneOfParents(event.target as HTMLElement, ignoreRef.current))
-      ) {
-        return;
-      }
-
-      handler(event);
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-
-    return () => {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [ref, handler, ignoreClassName]);
-}
+import { RefObject, useEffect } from 'react';
+
+export const checkElementParentsClassNames = (element: HTMLElement, className: string): boolean => {
+  if (element.classList.contains(className)) {
+    return true;
+  }
+
+  if (element === document.body) {
+    return false;
+  }
+
+  if (element.parentElement) {
+    return checkElementParentsClassNames(element.parentElement, className);
+  }
+
+  return false;
+};
+
+export const isElementOneOfParents = (element: HTMLElement, elToSearch: HTMLElement): boolean => {
+  if (element === elToSearch) {
+    return true;
+  }
+
+  if (element === document.body) {
+    return false;
+  }
+
+  if (element.parentElement) {
+    return isElementOneOfParents(element.parentElement, elToSearch);
+  }
+
+  return false;
+};
+
+export function useOnClickOutsideWithRef<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
+  ref: RefObject<Elem>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+  ignoreRef?: RefObject<IgnoreElem>,
+): void {
+  useOnClickOutside(ref, handler, undefined, ignoreRef);
+}
+
+export function useOnClickOutside<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(
+  ref: RefObject<Elem>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+  ignoreClassName?: string,
+  ignoreRef?: RefObject<IgnoreElem>,
+): void {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
+        return;
+      }
+
+      if (
+        (ignoreClassName !== undefined &&
+          checkElementParentsClassNames(event.target as HTMLElement, ignoreClassName)) ||
+        (ignoreRef !== undefined &&
+          ignoreRef.current !== null &&
+          isElementOneOfParents(event.target as HTMLElement, ignoreRef.current))
+      ) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler, ignoreClassName]);
+}

package/src/hooks/use-tweak-styles.ts

@@ -1,57 +1,57 @@
-import { useMemo } from 'react';
-import { isEmpty, isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
-import { areStylesThemed, getTheme, IComponentName, themedStyles } from '../theme';
-
-// TODO: Можно усилить типы
-export const useTweakStyles = <StyleSheet, ClassName extends keyof StyleSheet & `tweak${string}`>({
-  innerStyles,
-  tweakStyles: currentComponentTweakStyles,
-  className,
-  currentComponentName,
-}: {
-  /**
-   * Это tweakStyles, определенные в родительском компоненте
-   * (например, стили для Input, определенные в стилях компонента Select)
-   */
-  innerStyles?: StyleSheet[ClassName];
-  /**
-   * Пропса tweakStyles из родительского компонента
-   * (это уже непосредственно ISelectProps.tweakStyles)
-   */
-  tweakStyles?: StyleSheet;
-  /**
-   * Класс для переопределения tweakStyles из-вне. (Например, 'tweakInput')
-   */
-  className: ClassName;
-  /**
-   * Название компонента который вызывает useTweakStyles. (В данном примере 'Select')
-   */
-  currentComponentName?: IComponentName;
-}): StyleSheet[ClassName] =>
-  useMemo(() => {
-    const theme = getTheme();
-    // tweakStyles, переопределенные в теме родительского компонента
-    const themeStyles = isNotEmpty(currentComponentName)
-      ? (theme.components?.[currentComponentName]?.[className as never] as StyleSheet[ClassName])
-      : undefined;
-    const tweakStyles = currentComponentTweakStyles?.[className];
-
-    // Если нечего мержить
-    const styles = [innerStyles, tweakStyles, themeStyles].filter(isNotEmpty);
-    if (styles.length <= 1) {
-      return styles[0];
-    }
-
-    // Мы можем подмержить тему в innerStyles, чтобы сохранить кэширование
-    if (isNotEmpty(innerStyles) && isNotEmpty(themeStyles) && isEmpty(tweakStyles)) {
-      return areStylesThemed(innerStyles) ? innerStyles : themedStyles(innerStyles, themeStyles);
-    }
-
-    // Ну тут уже прощай кэш
-    return mergeStyles(innerStyles, themeStyles, tweakStyles);
-  }, [
-    innerStyles,
-    className,
-    currentComponentName,
-    currentComponentTweakStyles,
-  ]) as StyleSheet[ClassName];
+import { useMemo } from 'react';
+import { isEmpty, isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+import { areStylesThemed, getTheme, IComponentName, themedStyles } from '../theme';
+
+// TODO: Можно усилить типы
+export const useTweakStyles = <StyleSheet, ClassName extends keyof StyleSheet & `tweak${string}`>({
+  innerStyles,
+  tweakStyles: currentComponentTweakStyles,
+  className,
+  currentComponentName,
+}: {
+  /**
+   * Это tweakStyles, определенные в родительском компоненте
+   * (например, стили для Input, определенные в стилях компонента Select)
+   */
+  innerStyles?: StyleSheet[ClassName];
+  /**
+   * Пропса tweakStyles из родительского компонента
+   * (это уже непосредственно ISelectProps.tweakStyles)
+   */
+  tweakStyles?: StyleSheet;
+  /**
+   * Класс для переопределения tweakStyles из-вне. (Например, 'tweakInput')
+   */
+  className: ClassName;
+  /**
+   * Название компонента который вызывает useTweakStyles. (В данном примере 'Select')
+   */
+  currentComponentName?: IComponentName;
+}): StyleSheet[ClassName] =>
+  useMemo(() => {
+    const theme = getTheme();
+    // tweakStyles, переопределенные в теме родительского компонента
+    const themeStyles = isNotEmpty(currentComponentName)
+      ? (theme.components?.[currentComponentName]?.[className as never] as StyleSheet[ClassName])
+      : undefined;
+    const tweakStyles = currentComponentTweakStyles?.[className];
+
+    // Если нечего мержить
+    const styles = [innerStyles, tweakStyles, themeStyles].filter(isNotEmpty);
+    if (styles.length <= 1) {
+      return styles[0];
+    }
+
+    // Мы можем подмержить тему в innerStyles, чтобы сохранить кэширование
+    if (isNotEmpty(innerStyles) && isNotEmpty(themeStyles) && isEmpty(tweakStyles)) {
+      return areStylesThemed(innerStyles) ? innerStyles : themedStyles(innerStyles, themeStyles);
+    }
+
+    // Ну тут уже прощай кэш
+    return mergeStyles(innerStyles, themeStyles, tweakStyles);
+  }, [
+    innerStyles,
+    className,
+    currentComponentName,
+    currentComponentTweakStyles,
+  ]) as StyleSheet[ClassName];

package/src/index.ts

@@ -1,6 +1,6 @@
-export * from './theme';
-export * from './components';
-export * from './hooks';
-export * from './types';
-export * from './constants';
-export * from './helpers';
+export * from './theme';
+export * from './components';
+export * from './hooks';
+export * from './types';
+export * from './constants';
+export * from './helpers';

package/src/theme/Provider.tsx

@@ -1,21 +1,21 @@
-import { createContext, FC, ReactNode } from 'react';
-import { common } from './common';
-import { IUiKitTheme } from './types';
-
-export interface IThemedProviderProps {
-  theme: IUiKitTheme;
-  children: ReactNode;
-}
-
-let globalTheme: IUiKitTheme;
-
-export const getTheme = (): IUiKitTheme => globalTheme;
-
-export const ThemeContext = createContext<{
-  theme: IUiKitTheme;
-}>({ theme: common });
-
-export const ThemeProvider: FC<IThemedProviderProps> = ({ theme, children }) => {
-  globalTheme = theme;
-  return <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>;
-};
+import { createContext, FC, ReactNode } from 'react';
+import { common } from './common';
+import { IUiKitTheme } from './types';
+
+export interface IThemedProviderProps {
+  theme: IUiKitTheme;
+  children: ReactNode;
+}
+
+let globalTheme: IUiKitTheme;
+
+export const getTheme = (): IUiKitTheme => globalTheme;
+
+export const ThemeContext = createContext<{
+  theme: IUiKitTheme;
+}>({ theme: common });
+
+export const ThemeProvider: FC<IThemedProviderProps> = ({ theme, children }) => {
+  globalTheme = theme;
+  return <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>;
+};