@true-engineering/true-react-common-ui-kit 2.5.0 → 2.7.0

package/src/helpers/phone.ts

@@ -1,87 +1,87 @@
-import { isNotEmpty, isEmpty } from '@true-engineering/true-react-platform-helpers';
-import { phoneInfo, IPhoneInfo, IPhoneValue } from '../components';
-
-export const findCountryByCode = (
-  countryCode?: string,
-  countriesList = phoneInfo,
-): IPhoneInfo | undefined =>
-  isNotEmpty(countryCode)
-    ? countriesList.find((info) => info.countryCode === countryCode)
-    : undefined;
-
-export const findCountryIndexByCode = (countryCode?: string, countriesList = phoneInfo): number =>
-  isNotEmpty(countryCode)
-    ? countriesList.findIndex((info) => info.countryCode === countryCode)
-    : -1;
-
-export const getCountryTextByLocale = (country: IPhoneInfo, locale: string): string =>
-  locale.toLowerCase() === 'ru' ? country.countryRu : country.countryEn;
-
-export const sortCountriesByLocale = (countriesList: IPhoneInfo[], locale: string) =>
-  countriesList.sort((countryA, countryB) =>
-    getCountryTextByLocale(countryA, locale).localeCompare(
-      getCountryTextByLocale(countryB, locale),
-    ),
-  );
-
-export const checkSearchStringInCountry = (country: IPhoneInfo, searchString: string): boolean => {
-  const checkValue = searchString.toLowerCase().trim().replace('+', '');
-
-  const possibleValues = [
-    country.countryRu,
-    country.countryEn,
-    ...country.countryRu.split(' '),
-    ...country.countryEn.split(' '),
-    country.dialCode,
-  ].map((part) => part.toLowerCase());
-
-  return possibleValues.some((v) => v.startsWith(checkValue));
-};
-
-export const getFullPhone = (phone?: IPhoneValue): string =>
-  (phone?.dialCode ?? '') + (phone?.phoneNumber ?? '');
-
-export const getCountryCodeFromPhone = (phoneWithCode: string): string | undefined => {
-  // попробуем найти уникальный код страны fullCode (dialCode + arealCode)
-  let countryCode = phoneInfo.find((info) =>
-    info.fullCodes.some((code) => phoneWithCode.startsWith(code)),
-  )?.countryCode;
-
-  if (isEmpty(countryCode) && isNotEmpty(phoneWithCode)) {
-    // если не нашли уникальный fullCode (dialCode + arealCode),
-    // то пробуем найти dialCode и выбираем с наименьшим Priority
-    countryCode = phoneInfo
-      .filter((info) => phoneWithCode.startsWith(info.dialCode))
-      .sort(
-        (infoA, infoB) => (infoA.dialCodePriority ?? 1000) - (infoB.dialCodePriority ?? 1000),
-      )[0]?.countryCode;
-  }
-
-  return countryCode;
-};
-
-export const getPhoneObjFromString = (fullPhone: string, countryCode?: string): IPhoneValue => {
-  const newCountryCode = countryCode ?? getCountryCodeFromPhone(fullPhone);
-  const dialCode = findCountryByCode(newCountryCode)?.dialCode;
-  const phoneNumber = fullPhone.slice(dialCode?.length);
-
-  return { dialCode, phoneNumber, countryCode: newCountryCode };
-};
-
-export const DEFAULT_PHONE_MASK = '+ 9 999 999 999 999 99';
-
-export const getPhoneMask = (countryCode?: string): string => {
-  let mask = DEFAULT_PHONE_MASK;
-  if (isNotEmpty(countryCode)) {
-    const countrySettings = findCountryByCode(countryCode);
-
-    if (countrySettings !== undefined) {
-      const dialCodeLength = countrySettings.dialCode.length;
-      const areaAndPhoneMask =
-        countrySettings.phoneMask ?? mask.substring(2, mask.length - dialCodeLength);
-      mask = `+ ${'9'.repeat(dialCodeLength)} ${areaAndPhoneMask}`;
-    }
-  }
-
-  return mask;
-};
+import { isNotEmpty, isEmpty } from '@true-engineering/true-react-platform-helpers';
+import { phoneInfo, IPhoneInfo, IPhoneValue } from '../components';
+
+export const findCountryByCode = (
+  countryCode?: string,
+  countriesList = phoneInfo,
+): IPhoneInfo | undefined =>
+  isNotEmpty(countryCode)
+    ? countriesList.find((info) => info.countryCode === countryCode)
+    : undefined;
+
+export const findCountryIndexByCode = (countryCode?: string, countriesList = phoneInfo): number =>
+  isNotEmpty(countryCode)
+    ? countriesList.findIndex((info) => info.countryCode === countryCode)
+    : -1;
+
+export const getCountryTextByLocale = (country: IPhoneInfo, locale: string): string =>
+  locale.toLowerCase() === 'ru' ? country.countryRu : country.countryEn;
+
+export const sortCountriesByLocale = (countriesList: IPhoneInfo[], locale: string) =>
+  countriesList.sort((countryA, countryB) =>
+    getCountryTextByLocale(countryA, locale).localeCompare(
+      getCountryTextByLocale(countryB, locale),
+    ),
+  );
+
+export const checkSearchStringInCountry = (country: IPhoneInfo, searchString: string): boolean => {
+  const checkValue = searchString.toLowerCase().trim().replace('+', '');
+
+  const possibleValues = [
+    country.countryRu,
+    country.countryEn,
+    ...country.countryRu.split(' '),
+    ...country.countryEn.split(' '),
+    country.dialCode,
+  ].map((part) => part.toLowerCase());
+
+  return possibleValues.some((v) => v.startsWith(checkValue));
+};
+
+export const getFullPhone = (phone?: IPhoneValue): string =>
+  (phone?.dialCode ?? '') + (phone?.phoneNumber ?? '');
+
+export const getCountryCodeFromPhone = (phoneWithCode: string): string | undefined => {
+  // попробуем найти уникальный код страны fullCode (dialCode + arealCode)
+  let countryCode = phoneInfo.find((info) =>
+    info.fullCodes.some((code) => phoneWithCode.startsWith(code)),
+  )?.countryCode;
+
+  if (isEmpty(countryCode) && isNotEmpty(phoneWithCode)) {
+    // если не нашли уникальный fullCode (dialCode + arealCode),
+    // то пробуем найти dialCode и выбираем с наименьшим Priority
+    countryCode = phoneInfo
+      .filter((info) => phoneWithCode.startsWith(info.dialCode))
+      .sort(
+        (infoA, infoB) => (infoA.dialCodePriority ?? 1000) - (infoB.dialCodePriority ?? 1000),
+      )[0]?.countryCode;
+  }
+
+  return countryCode;
+};
+
+export const getPhoneObjFromString = (fullPhone: string, countryCode?: string): IPhoneValue => {
+  const newCountryCode = countryCode ?? getCountryCodeFromPhone(fullPhone);
+  const dialCode = findCountryByCode(newCountryCode)?.dialCode;
+  const phoneNumber = fullPhone.slice(dialCode?.length);
+
+  return { dialCode, phoneNumber, countryCode: newCountryCode };
+};
+
+export const DEFAULT_PHONE_MASK = '+ 9 999 999 999 999 99';
+
+export const getPhoneMask = (countryCode?: string): string => {
+  let mask = DEFAULT_PHONE_MASK;
+  if (isNotEmpty(countryCode)) {
+    const countrySettings = findCountryByCode(countryCode);
+
+    if (countrySettings !== undefined) {
+      const dialCodeLength = countrySettings.dialCode.length;
+      const areaAndPhoneMask =
+        countrySettings.phoneMask ?? mask.substring(2, mask.length - dialCodeLength);
+      mask = `+ ${'9'.repeat(dialCodeLength)} ${areaAndPhoneMask}`;
+    }
+  }
+
+  return mask;
+};

package/src/helpers/snippets.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { Icon } from '../components';
-import { IIcon } from '../types';
-
-export const renderIcon = (icon: IIcon): ReactNode =>
-  typeof icon === 'string' ? <Icon type={icon} /> : icon;
+import { ReactNode } from 'react';
+import { Icon } from '../components';
+import { IIcon } from '../types';
+
+export const renderIcon = (icon: IIcon): ReactNode =>
+  typeof icon === 'string' ? <Icon type={icon} /> : icon;

package/src/hooks/use-did-mount-effect.ts

@@ -1,18 +1,18 @@
-import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
-
-export const useDidMountEffect = (effect: EffectCallback, dependencies: DependencyList): void => {
-  const isMountedRef = useRef(false);
-  useEffect(() => {
-    let unmount: ReturnType<EffectCallback>;
-    if (isMountedRef.current) {
-      unmount = effect();
-    } else {
-      isMountedRef.current = true;
-    }
-    return () => {
-      if (unmount !== undefined) {
-        unmount();
-      }
-    };
-  }, dependencies);
-};
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
+
+export const useDidMountEffect = (effect: EffectCallback, dependencies: DependencyList): void => {
+  const isMountedRef = useRef(false);
+  useEffect(() => {
+    let unmount: ReturnType<EffectCallback>;
+    if (isMountedRef.current) {
+      unmount = effect();
+    } else {
+      isMountedRef.current = true;
+    }
+    return () => {
+      if (unmount !== undefined) {
+        unmount();
+      }
+    };
+  }, dependencies);
+};

package/src/hooks/use-dropdown.ts

@@ -1,82 +1,82 @@
-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) {
-    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) {
+    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-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-theme.ts

@@ -1,32 +1,32 @@
-import { createContext, useContext, useMemo } from 'react';
-import { createUseStyles, Styles } from 'react-jss';
-import merge from 'lodash-es/merge';
-import { commonTheme } from '../theme';
-import { ComponentName, UiKitTheme } from '../types';
-
-export const ThemeContext = createContext<{
-  theme: UiKitTheme;
-}>({ theme: commonTheme });
-
-export const useTheme = <StyleSheet>(
-  componentName: ComponentName,
-  styles: StyleSheet,
-  tweakStyles?: Partial<Record<keyof StyleSheet, any>>,
-  options?: Record<string, unknown>,
-): {
-  classes: Record<keyof StyleSheet, string>;
-  componentStyles: StyleSheet;
-} => {
-  const { theme } = useContext(ThemeContext);
-  const { components } = theme;
-
-  const newStyles = useMemo(
-    () => merge({}, styles, components?.[componentName] ?? {}, tweakStyles),
-    [styles, components?.[componentName], tweakStyles],
-  );
-
-  return {
-    classes: createUseStyles(newStyles as Styles)(options) as Record<keyof StyleSheet, string>,
-    componentStyles: newStyles,
-  };
-};
+import { createContext, useContext, useMemo } from 'react';
+import { createUseStyles, Styles } from 'react-jss';
+import merge from 'lodash-es/merge';
+import { commonTheme } from '../theme';
+import { ComponentName, UiKitTheme } from '../types';
+
+export const ThemeContext = createContext<{
+  theme: UiKitTheme;
+}>({ theme: commonTheme });
+
+export const useTheme = <StyleSheet>(
+  componentName: ComponentName,
+  styles: StyleSheet,
+  tweakStyles?: Partial<Record<keyof StyleSheet, any>>,
+  options?: Record<string, unknown>,
+): {
+  classes: Record<keyof StyleSheet, string>;
+  componentStyles: StyleSheet;
+} => {
+  const { theme } = useContext(ThemeContext);
+  const { components } = theme;
+
+  const newStyles = useMemo(
+    () => merge({}, styles, components?.[componentName] ?? {}, tweakStyles),
+    [styles, components?.[componentName], tweakStyles],
+  );
+
+  return {
+    classes: createUseStyles(newStyles as Styles)(options) as Record<keyof StyleSheet, string>,
+    componentStyles: newStyles,
+  };
+};

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

@@ -1,13 +1,13 @@
-import { useMemo } from 'react';
-import { Styles } from 'react-jss';
-import merge from 'lodash-es/merge';
-
-export const useTweakStyles = <StyleSheet>(
-  componentStyles: StyleSheet = {} as StyleSheet,
-  tweakStyles: Partial<Record<keyof StyleSheet, any>> | undefined,
-  className: keyof StyleSheet,
-): Styles =>
-  useMemo(
-    () => merge({}, componentStyles[className], tweakStyles?.[className]) as Styles,
-    [tweakStyles?.[className]],
-  );
+import { useMemo } from 'react';
+import { Styles } from 'react-jss';
+import merge from 'lodash-es/merge';
+
+export const useTweakStyles = <StyleSheet>(
+  componentStyles: StyleSheet = {} as StyleSheet,
+  tweakStyles: Partial<Record<keyof StyleSheet, any>> | undefined,
+  className: keyof StyleSheet,
+): Styles =>
+  useMemo(
+    () => merge({}, componentStyles[className], tweakStyles?.[className]) as Styles,
+    [tweakStyles?.[className]],
+  );