@redneckz/wildless-cms-uni-blocks 0.16.1 → 0.16.2-credit

package/mobile/src/components/OfficesAtmsMap/renderWorkSchedule.tsx

@@ -8,7 +8,7 @@ export const renderWorkSchedule = (workSchedule?: WorkSchedule) => {
   const businessTimeOfWork = workSchedule ? workSchedule.businessScheduleDescription : '';
 
   if (!workSchedule) {
-    return null;
+    return '';
   }
 
   if (!workSchedule.businessScheduleVisibleTag) {

package/mobile/src/components/OfficesAtmsMap/useAtms.ts

@@ -1,11 +1,12 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { API_BASE_URI } from '../../api/apiBaseUrl';
 import { fetchJSON } from '../../utils/fetchJSON';
 import { type Atm } from './OfficesAtmsMapProps';
 
 const EMPTY_VALUE = [];
 
 export function useAtms(regionCode?: string) {
-  const { data, error } = useAsyncData(`/api/v1/atms?regionCode=${regionCode}`, fetchMap);
+  const { data, error } = useAsyncData(`${API_BASE_URI}/atms?regionCode=${regionCode}`, fetchMap);
   const isLoad = !data && !error;
 
   return { data: data || EMPTY_VALUE, isLoad };

package/mobile/src/components/OfficesAtmsMap/useOffices.ts

@@ -1,12 +1,13 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
+import { API_BASE_URI } from '../../api/apiBaseUrl';
 import { fetchJSON } from '../../utils/fetchJSON';
 import { type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
 
 const EMPTY_VALUE = { branches: [], remoteWorkplaces: [] };
 
-export function useOffices(regionCode?: string) {
+export function useOffices(regionCode = '000') {
   const { data, error } = useAsyncData(
-    `/api/v1/branchesAndRemoteWorkplaces?regionCode=${regionCode}`,
+    `${API_BASE_URI}/branchesAndRemoteWorkplaces?regionCode=${encodeURIComponent(regionCode)}`,
     fetchMap,
   );
   const isLoad = !data && !error;

package/mobile/src/components/OfficesAtmsMap/useOfficesAtmsMapData.tsx

@@ -0,0 +1,49 @@
+import { useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { filterItems } from './filterItems';
+import { type Atm, type Branch, type RemoteWorkplace } from './OfficesAtmsMapProps';
+import { type BalloonContent } from './YandexMapProps';
+
+const defaultEmptyFunction = () => void 0;
+
+interface UseOfficesAtmsMapDataProps {
+  data: (Branch | RemoteWorkplace)[];
+  remoteWorkplaces?: (Branch | RemoteWorkplace)[];
+  filtrationState?: Record<string, boolean>;
+  getBalloon?: (item: Branch | Atm | RemoteWorkplace) => BalloonContent | undefined;
+  getBalloonRemoteWorkplaces?: (item: RemoteWorkplace) => BalloonContent | undefined;
+}
+
+export const useOfficesAtmsMapData = ({
+  data,
+  remoteWorkplaces = [],
+  filtrationState = {},
+  getBalloon = defaultEmptyFunction,
+  getBalloonRemoteWorkplaces = defaultEmptyFunction,
+}: UseOfficesAtmsMapDataProps) => {
+  const [filteredItems, points, filteredRemoteWorkplaces, lengthItems] = useMemo(() => {
+    const _filteredItems = filterItems(data, filtrationState);
+    const _filteredRemoteWorkplaces = filterItems(remoteWorkplaces, filtrationState);
+
+    const _points = [
+      ..._filteredItems.map((_) => ({
+        type: 'offices',
+        coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
+        content: getBalloon(_),
+      })),
+      ..._filteredRemoteWorkplaces.map((_: RemoteWorkplace) => ({
+        type: 'workplaces',
+        coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
+        content: getBalloonRemoteWorkplaces({
+          address: _.address,
+          workScheduleDescription: _.workScheduleDescription,
+        }),
+      })),
+    ].filter((_) => _.coords && _.coords.length === 2);
+
+    const itemsLength = _filteredItems.length + _filteredRemoteWorkplaces?.length;
+
+    return [_filteredItems, _points, _filteredRemoteWorkplaces, itemsLength];
+  }, [data, remoteWorkplaces, filtrationState, getBalloon, getBalloonRemoteWorkplaces]);
+
+  return { filteredItems, points, filteredRemoteWorkplaces, lengthItems };
+};

package/mobile/src/components/ProductBlock/ProductBlock.example.json

@@ -71,17 +71,7 @@
             }
           }
         ]
-      },
-      "blocks": [
-        {
-          "content": {
-            "prefix": "префикс",
-            "unit": 1,
-            "suffix": "суффикс"
-          },
-          "type": "UnitBlock"
-        }
-      ]
+      }
     }
   ]
 ]

package/mobile/src/components/ProductBlock/ProductBlock.tsx

@@ -22,5 +22,4 @@ export const ProductBlock = UniBlock<ProductBlockProps>(
       />
     </BlockWrapper>
   ),
-  { childrenTypes: ['UnitBlock'] },
 );

package/mobile/src/components/ProductBlock/renderBackwardButton.tsx

@@ -11,6 +11,7 @@ type BackwardButtonProps = {
   alwaysVisible?: boolean;
 };
 
+// TODO Заменить LinkButton на Button и применить RoundedIcon
 export function renderBackwardButton({
   version,
   handleClick,

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -1,23 +1,17 @@
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useMobileMode } from '../../hooks/useMobileMode';
-import { type Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { type FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
-import { type IconBgVersion, type IconProps } from '../../ui-kit/Icon/IconProps';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
-import { AccordionFoldButton } from './AccordionFoldButton';
 import { getFoldableStyles } from './getFoldableStyles';
-import { getIconName } from './getIconName';
-import { type FoldButtonVersion, type RollupItemContent } from './RollupItemContent';
+import { type RollupItemContent } from './RollupItemContent';
 
 interface RollupItemProps extends RollupItemContent, UniBlockProps {
-  labelIcon?: Picture;
-  labelIconBgVersion?: IconBgVersion;
   role?: string;
 }
 
@@ -26,10 +20,8 @@ export const RollupItem = UniBlock<RollupItemProps>(
     className = '',
     isExpanded,
     isFoldButtonOnTop = true,
-    label = 'Развернуть',
-    labelIcon,
-    labelIconBgVersion,
     foldButtonVersion = 'default',
+    label,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     version,
     role,
@@ -37,6 +29,31 @@ export const RollupItem = UniBlock<RollupItemProps>(
   }) => {
     const isMobile = useMobileMode();
 
+    const [isUnfolded, { toggle }] = useBool(isExpanded);
+
+    const foldableSection = (
+      <FoldableSection
+        className={style('gap-lg', getFoldableStyles(isMobile))}
+        isUnfolded={isUnfolded}
+      >
+        {renderChildren({
+          ...rest,
+          extraProps: { className: 'w-full', padding: 'p-0' },
+        })}
+      </FoldableSection>
+    );
+
+    const isAccordion = foldButtonVersion === 'accordion';
+    const foldButton = (
+      <DefaultFoldButton
+        className={style(isAccordion ? 'text-h6 my-lg' : 'text-h4')}
+        label={label}
+        isUnfolded={isUnfolded}
+        embedded={isAccordion}
+        onClick={toggle}
+      />
+    );
+
     return (
       <BlockWrapper
         className={style(
@@ -49,74 +66,12 @@ export const RollupItem = UniBlock<RollupItemProps>(
         role={role}
         {...rest}
       >
-        <Foldable
-          isFoldButtonOnTop={isFoldButtonOnTop}
-          unfoldedByDefault={isExpanded}
-          renderFoldableSection={({ isUnfolded }) => (
-            <FoldableSection
-              className={style('gap-lg', getFoldableStyles(isMobile))}
-              isUnfolded={isUnfolded}
-            >
-              {renderChildren({
-                ...rest,
-                extraProps: { className: 'w-full', padding: 'p-0' },
-              })}
-            </FoldableSection>
-          )}
-          renderFoldButton={({ isUnfolded, onToggle }) =>
-            renderFoldButton({
-              foldButtonVersion,
-              label,
-              labelIcon,
-              labelIconBgVersion,
-              isUnfolded,
-              onToggle,
-              isMobile,
-            })
-          }
-        />
+        <Foldable>
+          {isFoldButtonOnTop ? foldButton : foldableSection}
+          {isFoldButtonOnTop ? foldableSection : foldButton}
+        </Foldable>
       </BlockWrapper>
     );
   },
-  {
-    childrenTypes: { exclude: ['RollupItem'] },
-  },
+  { childrenTypes: { exclude: ['RollupItem'] } },
 );
-
-interface FoldButtonProps extends FoldablePartProps {
-  foldButtonVersion?: FoldButtonVersion;
-  label?: string;
-  labelIcon?: IconProps;
-  labelIconBgVersion?: IconBgVersion;
-  isPadding?: boolean;
-  isMobile?: boolean;
-}
-
-const renderFoldButton = ({
-  foldButtonVersion,
-  label: defaultLabel,
-  labelIcon,
-  labelIconBgVersion,
-  isUnfolded,
-  onToggle,
-  isMobile = false,
-}: FoldButtonProps) => {
-  const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
-  const icon = getIconName(isUnfolded, isMobile);
-
-  return foldButtonVersion === 'accordion' ? (
-    <AccordionFoldButton
-      label={label}
-      labelIcon={labelIcon}
-      labelIconBgVersion={labelIconBgVersion}
-      icon={icon}
-      onToggle={onToggle}
-    />
-  ) : (
-    <DefaultFoldButton
-      label={label}
-      icon={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-      onClick={onToggle}
-    />
-  );
-};

package/mobile/src/components/StepsBlock/renderStep.tsx

@@ -40,11 +40,7 @@ export const renderStep =
           </div>
         </div>
         {button?.text ? (
-          <LinkButton
-            className="box-border py-s w-full max-w-60 mt-auto"
-            version={version}
-            {...button}
-          >
+          <LinkButton className="box-border py-s w-full mt-auto" version={version} {...button}>
             {button?.text}
           </LinkButton>
         ) : null}

package/mobile/src/components/StepsBlock/renderStepMobile.tsx

@@ -31,11 +31,7 @@ export const renderStepMobile =
           >
             {renderText(step)}
             {button?.text ? (
-              <LinkButton
-                className="box-border py-s w-full max-w-60 mt-lg"
-                version={version}
-                {...button}
-              >
+              <LinkButton className="box-border py-s w-full mt-lg" version={version} {...button}>
                 {button?.text}
               </LinkButton>
             ) : null}

package/mobile/src/components/StickyBottomMenu/BurgerMenuDialog.tsx

@@ -5,24 +5,23 @@ import { type JSONRefObject } from '../../data/JSONRefObject';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
 import { env } from '../../Env';
 import { useLocation } from '../../hooks/useLocation';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { useLocationDialog } from '../../ui-kit/LocationDialog/useLocationDialog';
+import { LocationDialog } from '../../ui-kit/LocationDialog/LocationDialog';
 import { getBasePath } from '../../utils/getBasePath';
 import { StickyBottomMenuDialog } from './StickyBottomMenuDialog';
 
 export interface BurgerMenuDialogProps {
-  menuRef: {
-    current?: HTMLDivElement | null;
-  };
+  menuRef: { current?: HTMLDivElement | null };
   menuItem?: StickyMenuItem;
   locationDialogProps?: HeaderData & JSONRefObject;
-  closeAll: () => void;
+  onClose?: () => void;
 }
 
 export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
-  ({ menuRef, menuItem, locationDialogProps, closeAll }) => {
-    const locationDialog = useLocationDialog(locationDialogProps || {});
-    const [{ name: location }] = useLocation();
+  ({ menuRef, menuItem, locationDialogProps, onClose }) => {
+    const locationDialog = useDialog(LocationDialog, locationDialogProps);
+    const { name: location } = useLocation();
     const menuDimensions = menuRef?.current?.getBoundingClientRect();
 
     const handleIframeLoad = useCallback(() => {
@@ -44,10 +43,10 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
     useEffect(() => {
       const onMessage = (e: MessageEvent<any>) => {
         if (e.data.type === 'location') {
-          locationDialog.open();
+          locationDialog.open({});
         }
         if (e.data.type === 'reload') {
-          closeAll();
+          onClose?.();
         }
         if (e.data.type === 'resize') {
           const ifDoc: HTMLIFrameElement = document.getElementsByTagName('iframe')['iframe-dialog'];
@@ -61,16 +60,17 @@ export const BurgerMenuDialog = JSX<BurgerMenuDialogProps>(
       return () => {
         globalThis.removeEventListener('message', onMessage);
       };
-    }, []);
+    }, [onClose]);
 
     return (
       <StickyBottomMenuDialog
-        onClick={(e) => e.stopPropagation()}
         head={
           <div className="flex items-center justify-center px-xl">
             <Heading as="h4" title={menuItem?.title} className="font-medium" />
           </div>
         }
+        onClick={(e) => e.stopPropagation()}
+        onClose={onClose}
       >
         <div className="bg-white pb-20 pt-1 text-l">
           <iframe

package/mobile/src/components/StickyBottomMenu/StickyBottomMenu.tsx

@@ -28,41 +28,39 @@ export const StickyBottomMenu = UniBlock<StickyBottomMenuProps>(({ sticky, ...re
   const [activeIndex, setActiveIndex] = useState(-1);
   const [currentItemPosition, setCurrentItemPosition] = useState<string>('');
 
-  const { open: openDialog, closeAll } = useDialogManager();
+  const { closeAll } = useDialogManager();
 
-  const closeDialog = useCallback(() => {
+  const handleClose = useCallback(() => {
     setActiveIndex(-1);
     setCurrentItemPosition('');
     closeAll();
   }, [closeAll]);
 
-  const dialogRef = useOutsideClick<HTMLDivElement>(closeDialog);
+  const dialogRef = useOutsideClick<HTMLDivElement>(handleClose);
   const menuRef = useRef<HTMLDivElement | null>(null);
 
   const [isBurgerMenuDialogOpen, { toggle }] = useBurgerMenuDialog({
     menuRef,
     centralMenuItem,
-    closeAll,
-    openDialog,
     locationDialogProps: rest.header,
+    onClose: handleClose,
   });
 
-  const [{ openBottomMenuItemDialog }] = useBottomMenuItemDialog({
+  const openBottomMenuItemDialog = useBottomMenuItemDialog({
     menuRef,
     dialogRef,
-    closeDialog,
-    openDialog,
     leftItems,
     rightItems,
+    onClose: handleClose,
   });
 
   const handleMenuBurgerClick = useCallback(
     (e: PreventableEvent) => {
-      closeDialog();
       e.stopPropagation();
+      handleClose();
       toggle();
     },
-    [closeDialog, toggle],
+    [handleClose, toggle],
   );
 
   const handleMenuItemClick = useCallback(

package/mobile/src/components/StickyBottomMenu/StickyBottomMenuDialog.tsx

@@ -1,39 +1,28 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { type ComponentType } from '../../model/ComponentType';
 import { type VNode } from '../../model/VNode';
 import { CloseButton } from '../../ui-kit/DialogManager/CloseButton';
-import { useDialogManager } from '../../ui-kit/DialogManager/useDialogManager';
 import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { style } from '../../utils/style';
 
-export interface StickyBottomMenuDialogProps {
-  className?: string;
+export interface StickyBottomMenuDialogProps extends ComponentType {
   head?: VNode;
   onClose?: () => void;
   onClick?: (e: PreventableEvent) => void;
 }
 
 export const StickyBottomMenuDialog = JSX<StickyBottomMenuDialogProps>(
-  ({ className, head, children, onClose, onClick }) => {
-    const { close } = useDialogManager();
-
-    const handleClose = useCallback(() => {
-      close();
-      onClose && onClose();
-    }, [onClose]);
-
-    return (
-      <div
-        onClick={onClick}
-        className={style('relative min-h-full bg-white p-0 rounded-xl top-32', className)}
-        role="dialog"
-      >
-        <div className="sticky py-xl top-0 rounded-xl bg-white z-10">
-          <CloseButton className="absolute top-1.5 right-0" onClose={handleClose} />
-          <div className="container">{head}</div>
-        </div>
-        <div className="container pb-6xl">{children}</div>
+  ({ className, head, children, onClose, onClick }) => (
+    <div
+      onClick={onClick}
+      className={style('relative bg-white p-0 rounded-xl top-32', className)}
+      role="dialog"
+    >
+      <div className="sticky py-xl top-0 rounded-xl bg-white z-10">
+        <CloseButton className="absolute top-1.5 right-0" onClose={onClose} />
+        <div className="container">{head}</div>
       </div>
-    );
-  },
+      <div className="container pb-6xl">{children}</div>
+    </div>
+  ),
 );

package/mobile/src/components/StickyBottomMenu/useBottomMenuItemDialog.tsx

@@ -1,65 +1,67 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
-import { type VNode } from '../../model/VNode';
-import { type DialogOptions } from '../../ui-kit/DialogManager/useDialogManager';
+import { useDialogManager } from '../../ui-kit/DialogManager/useDialogManager';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { StickyBottomMenuDialog } from './StickyBottomMenuDialog';
 
 interface BottomMenuItemDialog {
-  menuRef?: {
-    current: HTMLDivElement | null;
-  };
-  dialogRef?: {
-    current: HTMLDivElement | null;
-  };
-  closeDialog: () => void;
-  openDialog: (dialog: VNode, options: DialogOptions) => void;
+  menuRef?: { current: HTMLDivElement | null };
+  dialogRef?: { current: HTMLDivElement | null };
   leftItems: StickyMenuItem[];
   rightItems: StickyMenuItem[];
+  onClose?: () => void;
 }
 
 export const useBottomMenuItemDialog = ({
   menuRef,
   dialogRef,
-  closeDialog,
-  openDialog,
   leftItems,
   rightItems,
+  onClose,
 }: BottomMenuItemDialog) => {
-  const openBottomMenuItemDialog = (index: number, itemsPosition: string) => {
-    const requiredArray = itemsPosition === 'left' ? leftItems : rightItems;
-    const menuDimensions = menuRef?.current?.getBoundingClientRect();
+  const { open, close } = useDialogManager();
 
-    const handleIframeLoad = () => {
-      const ifDoc: HTMLIFrameElement = document.getElementsByTagName('iframe')['iframe-dialog'];
-      ifDoc.style.height = String(ifDoc?.contentWindow?.document.body.offsetHeight) + 'px';
-    };
+  const handleIframeLoad = useCallback(() => {
+    const ifDoc: HTMLIFrameElement = document.getElementsByTagName('iframe')['iframe-dialog'];
+    ifDoc.style.height = `${ifDoc?.contentWindow?.document.body.offsetHeight}px`;
+  }, []);
 
-    openDialog(
-      <StickyBottomMenuDialog
-        onClick={(e) => e.stopPropagation()}
-        onClose={closeDialog}
-        className="mt-[20%] border-t border-current"
-        head={
-          <div className="flex items-center justify-center px-xl">
-            <Heading
-              as="h4"
-              title={requiredArray[index].description || requiredArray[index].title}
-            />
-          </div>
-        }
-      >
-        <div className="bg-white pb-20 pt-1 text-l" ref={dialogRef}>
-          <iframe
-            id="iframe-dialog"
-            onLoad={() => handleIframeLoad()}
-            src={requiredArray[index]?.src}
-            width={menuDimensions?.width || 0}
-          />
-        </div>
-      </StickyBottomMenuDialog>,
-      { id: itemsPosition === 'left' ? leftItems[index].title : rightItems[index].title },
-    );
-  };
+  return useCallback(
+    (index: number, itemsPosition: string) => {
+      const requiredArray = itemsPosition === 'left' ? leftItems : rightItems;
+      const menuDimensions = menuRef?.current?.getBoundingClientRect();
 
-  return [{ openBottomMenuItemDialog }];
+      open({
+        id: itemsPosition === 'left' ? leftItems[index].title : rightItems[index].title,
+        dialog: (
+          <StickyBottomMenuDialog
+            className="mt-[20%] border-t border-current"
+            head={
+              <div className="flex items-center justify-center px-xl">
+                <Heading
+                  as="h4"
+                  title={requiredArray[index].description || requiredArray[index].title}
+                />
+              </div>
+            }
+            onClick={(e) => e.stopPropagation()}
+            onClose={() => {
+              close();
+              onClose?.();
+            }}
+          >
+            <div className="bg-white pb-20 pt-1 text-l" ref={dialogRef}>
+              <iframe
+                id="iframe-dialog"
+                src={requiredArray[index]?.src}
+                width={menuDimensions?.width ?? 0}
+                onLoad={handleIframeLoad}
+              />
+            </div>
+          </StickyBottomMenuDialog>
+        ),
+      });
+    },
+    [handleIframeLoad, leftItems, rightItems, onClose],
+  );
 };

package/mobile/src/components/StickyBottomMenu/useBurgerMenuDialog.tsx

@@ -1,58 +1,40 @@
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { type HeaderData } from '../../data/HeaderData';
 import { type JSONRefObject } from '../../data/JSONRefObject';
 import { type StickyMenuItem } from '../../data/StickyMobileData';
-import { type VNode } from '../../model/VNode';
 import { isDialogOpen } from '../../ui-kit/DialogManager/isDialogOpen';
-import { type DialogOptions } from '../../ui-kit/DialogManager/useDialogManager';
+import { useDialog } from '../../ui-kit/DialogManager/useDialog';
 import { useDialogsList } from '../../ui-kit/DialogManager/useDialogsList';
+import { noop } from '../../utils/noop';
 import { BurgerMenuDialog } from './BurgerMenuDialog';
 
 export const BURGER_MENU_DIALOG_ID = 'burgerMenuDialog';
 
 interface BurgerMenuDialog {
-  menuRef: {
-    current?: HTMLDivElement | null;
-  };
+  menuRef: { current?: HTMLDivElement | null };
   centralMenuItem?: StickyMenuItem;
-  closeAll: () => void;
-  openDialog: (dialog: VNode, options: DialogOptions) => void;
   locationDialogProps?: HeaderData & JSONRefObject;
+  onClose?: () => void;
 }
 
 export const useBurgerMenuDialog = ({
   menuRef,
   centralMenuItem,
-  closeAll,
-  openDialog,
   locationDialogProps,
-}: BurgerMenuDialog): [
-  boolean,
-  {
-    toggle: () => void;
-  },
-] => {
-  const dialogs = useDialogsList();
+  onClose = noop,
+}: BurgerMenuDialog): [boolean, { toggle: () => void }] => {
+  const { open } = useDialog(BurgerMenuDialog);
+  const [dialogs] = useDialogsList(); // TODO Рефакторинг
   const isBurgerMenuOpen = isDialogOpen(BURGER_MENU_DIALOG_ID, dialogs);
 
-  const open = () =>
-    openDialog(
-      <BurgerMenuDialog
-        locationDialogProps={locationDialogProps}
-        menuRef={menuRef}
-        menuItem={centralMenuItem}
-        closeAll={closeAll}
-      />,
-      {
-        id: BURGER_MENU_DIALOG_ID,
-      },
-    );
-  const toggle = () => {
-    if (isBurgerMenuOpen) {
-      closeAll();
-    } else {
-      open();
-    }
-  };
+  const openDialog = useCallback(
+    () =>
+      open(
+        { menuRef, locationDialogProps, menuItem: centralMenuItem, onClose },
+        { id: BURGER_MENU_DIALOG_ID },
+      ),
+    [menuRef, locationDialogProps, centralMenuItem, onClose],
+  );
 
-  return [isBurgerMenuOpen, { toggle }];
+  return [isBurgerMenuOpen, { toggle: isBurgerMenuOpen ? onClose : openDialog }];
 };