@true-engineering/true-react-common-ui-kit 2.2.0 → 2.3.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/popper-helpers.ts

@@ -1,17 +1,17 @@
-import { Modifier } from 'react-overlays/usePopper';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const minWidthModifier: Partial<Modifier<any, any>> = {
-  name: 'minWidth',
-  enabled: true,
-  phase: 'beforeWrite',
-  requires: ['computeStyles'],
-  fn: ({ state }) => {
-    state.styles.popper.minWidth = `${state.rects.reference.width}px`;
-  },
-  effect: ({ state }) => {
-    state.elements.popper.style.minWidth = `${
-      (state.elements.reference as HTMLElement).offsetWidth
-    }px`;
-  },
-};
+import { Modifier } from 'react-overlays/usePopper';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const minWidthModifier: Partial<Modifier<any, any>> = {
+  name: 'minWidth',
+  enabled: true,
+  phase: 'beforeWrite',
+  requires: ['computeStyles'],
+  fn: ({ state }) => {
+    state.styles.popper.minWidth = `${state.rects.reference.width}px`;
+  },
+  effect: ({ state }) => {
+    state.elements.popper.style.minWidth = `${
+      (state.elements.reference as HTMLElement).offsetWidth
+    }px`;
+  },
+};

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/index.ts

@@ -1,6 +1,6 @@
-export * from './use-is-mounted';
-export * from './use-on-click-outside';
-export * from './use-theme';
-export * from './use-dropdown';
-export * from './use-tweak-styles';
-export * from './use-did-mount-effect';
+export * from './use-is-mounted';
+export * from './use-on-click-outside';
+export * from './use-theme';
+export * from './use-dropdown';
+export * from './use-tweak-styles';
+export * from './use-did-mount-effect';

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-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-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]);
+}