@redneckz/wildless-cms-uni-blocks 0.9.2 → 0.9.4

package/mobile/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,23 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
-import { useBool } from '../../hooks/useBool';
-import { useLocation } from '../../hooks/useLocation';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
 import { projectSettings } from '../../ProjectSettings';
-import type { ForeignOffice } from '../../services/sitemap/SitemapData';
-import { Location } from '../../ui-kit/Location/Location';
-import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
+import { useDialog } from '../../ui-kit/Dialog/useDialog';
+import { LOCATION_DIALOG_ID } from '../../ui-kit/LocationDialog/LocationDialog';
+import { SEARCH_DIALOG_ID } from '../../ui-kit/SearchDialog/SearchDialog';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { style } from '../../utils/style';
 import { HeaderChatBotButton } from './HeaderChatBotButton';
-import { defaultEventBus } from '../../EventBus/defaultEventBus';
+import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
 interface HeaderSecondaryMenuContent {
   version?: BlockVersion;
-  defaultLocation?: string;
+  locationName?: string;
   officesLink?: string;
-  foreignOffices?: ForeignOffice[];
 }
 
 export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
@@ -25,47 +22,26 @@ export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
 }
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices }) => {
-    const [isShowLocationModal, { setTrue: showLocationModal, setFalse: hideLocationModal }] =
-      useBool();
-
-    const [location, onChangeLocation] = useLocation(defaultLocation);
-
+  ({ className, version, locationName: location, officesLink }) => {
     const iconVersion: IconVersion = version === 'transparent' ? 'white' : 'black';
 
-    const handleShowLocationModal = useCallback((ev?: PreventableEvent) => {
-      ev?.preventDefault();
-      showLocationModal();
-    }, []);
+    const { open: openLocationModal } = useDialog(LOCATION_DIALOG_ID);
+    const handleOpenLocationModal = useCallback(() => openLocationModal(), []);
 
-    defaultEventBus.fire('setPageOverflowHidden', isShowLocationModal);
+    const { open: openSearchModal } = useDialog(SEARCH_DIALOG_ID);
+    const handleOpenSearchModal = useCallback(() => openSearchModal(), []);
 
     return (
-      <div className={style('flex items-center', className)}>
-        <TopItem
-          className="mr-5"
-          flat={true}
-          href="#"
-          text={location.name}
-          onClick={handleShowLocationModal}
+      <div className={style('flex items-center gap-5', className)}>
+        <TopItem flat={true} href="#" text={location} onClick={handleOpenLocationModal} />
+        {officesLink ? <TopItem flat={true} href={officesLink} text="Офисы и банкоматы" /> : null}
+        <HeaderSecondaryMenuButton
+          image={{ icon: 'LoupeIcon', iconVersion }}
+          ariaLabel="Поиск"
+          onClick={handleOpenSearchModal}
         />
-        {officesLink ? (
-          <TopItem className="mr-7" flat={true} href={officesLink} text="Офисы и банкоматы" />
-        ) : null}
         {projectSettings.CHAT_BOT ? (
-          <HeaderChatBotButton
-            className="mr-5"
-            iconVersion={iconVersion}
-            chat={projectSettings.CHAT_BOT}
-          />
-        ) : null}
-        {isShowLocationModal ? (
-          <Location
-            currentLocation={location}
-            foreignOffices={foreignOffices}
-            onChangeLocation={onChangeLocation}
-            onClose={hideLocationModal}
-          />
+          <HeaderChatBotButton iconVersion={iconVersion} chat={projectSettings.CHAT_BOT} />
         ) : null}
       </div>
     );

package/mobile/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { style } from '../../utils/style';
 
 export interface HeaderSecondaryMenuButtonProps extends ImageContent {
@@ -9,7 +8,7 @@ export interface HeaderSecondaryMenuButtonProps extends ImageContent {
   isRounded?: boolean;
   disabled?: boolean;
   ariaLabel?: string;
-  onClick?: (ev?: PreventableEvent) => void;
+  onClick?: () => void;
 }
 
 export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(

package/mobile/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -29,5 +29,5 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
 );
 
 HorizontalLayout.childrenTypes = {
-  exclude: ['HorizontalLayout', 'Accordion', 'OtherProducts'],
+  exclude: ['HorizontalLayout'],
 };

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

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { getParentBlockContent } from '../../BlockRenderer/getParentBlockContent';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { IconName } from '../../icons/IconName';
 import { BlockVersion } from '../../model/BlockVersion';
@@ -14,7 +13,6 @@ import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
-import { AccordionContent } from '../Accordion/AccordionContent';
 import type { RollupItemContent } from './RollupItemContent';
 
 export interface RollupItemProps extends RollupItemContent, UniBlockProps {}
@@ -28,15 +26,9 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
     version = 'primary',
     ...rest
   }) => {
-    const { bordered } = getParentBlockContent(rest.options, {} as AccordionContent);
-
     return (
       <BlockWrapper
-        className={style(
-          'border-b border-solid border-main-divider w-full',
-          bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0',
-          className,
-        )}
+        className={style('border-b border-solid border-main-divider w-full', className)}
         tag="div"
         version="transparent"
         {...rest}
@@ -62,7 +54,7 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
 );
 
 RollupItem.childrenTypes = {
-  exclude: ['RollupItem', 'Accordion', 'OtherProducts'],
+  exclude: ['RollupItem'],
 };
 
 interface FoldButtonProps extends FoldablePartProps {

package/mobile/src/components/SafeDepositRental/RegionsAndBranches.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Branch } from '../../hooks/useSafeBoxes';
 import type { Region } from './useGetRegions';
+import type { Branch } from './useSafeBoxes';
 import { WrapperSelect } from './WrapperSelect';
 
 interface RegionsAndBranchesProps {

package/mobile/src/components/SafeDepositRental/SafeBoxCases.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { SafeBoxCase, SafeBoxCaseVolume } from '../../hooks/useSafeBoxes';
+import type { SafeBoxCase, SafeBoxCaseVolume } from './useSafeBoxes';
 import { WrapperSelect } from './WrapperSelect';
 
 interface SafeBoxCasesProps {

package/mobile/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useSafeBoxes } from '../../hooks/useSafeBoxes';
+import { useSafeBoxes } from './useSafeBoxes';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';

package/mobile/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Branch, SafeBoxCase, SafeBoxCaseVolume } from '../../hooks/useSafeBoxes';
 import { Button } from '../../ui-kit/Button/Button';
 import { RegionsAndBranches } from './RegionsAndBranches';
 import { RenderRadioButtons } from './RenderRadioButtons';
 import { RentalPeriod } from './RentalPeriod';
 import { SafeBoxCases } from './SafeBoxCases';
 import type { HandleFormStateChange, SafeDepositRentalState } from './SafeDepositRentalTypes';
-import { Region } from './useGetRegions';
+import type { Region } from './useGetRegions';
+import type { Branch, SafeBoxCase, SafeBoxCaseVolume } from './useSafeBoxes';
 
 export interface SafeDepositRentalFieldsProps extends SafeDepositRentalState {
   regions?: Region[];

package/mobile/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect } from '@redneckz/uni-jsx/lib/hooks/core';
-import { Branch, SafeBoxCase, SafeBoxCaseVolume } from '../../hooks/useSafeBoxes';
+import { Branch, SafeBoxCase, SafeBoxCaseVolume } from './useSafeBoxes';
 import { SafeDepositRentalFields } from './SafeDepositRentalFields';
 import { SafeDepositRentalTotal } from './SafeDepositRentalTotal';
 import type { SafeDepositRentalState } from './SafeDepositRentalTypes';

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Tariff } from '../../hooks/useSafeBoxes';
 import { Img } from '../../ui-kit/Img/Img';
+import type { Tariff } from './useSafeBoxes';
 
 export interface SafeDepositRentalTotalProps {
   days: number;

package/mobile/src/{hooks → components/SafeDepositRental}/useSafeBoxes.ts

@@ -1,5 +1,5 @@
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
-import { fetchJSON } from '../utils/fetchJSON';
+import { fetchJSON } from '../../utils/fetchJSON';
 
 export interface Tariff {
   tariffType?: string;

package/mobile/src/components/SafeDepositRental/utils.ts

@@ -1,4 +1,4 @@
-import type { Branch } from '../../hooks/useSafeBoxes';
+import type { Branch } from './useSafeBoxes';
 
 export const getCoordinates = (data?: Branch | Branch[]): number[][] => {
   if (Array.isArray(data)) {

package/mobile/src/components/Tabs/TabActivationEvent.ts

@@ -0,0 +1,6 @@
+import type { TabData } from './TabsContent';
+
+export interface TabActivationEvent {
+  type?: TabData['type'];
+  label?: string;
+}

package/mobile/src/components/Tabs/Tabs.tsx

@@ -7,11 +7,6 @@ import { renderTab } from './renderTab';
 import { ScrollableTabs } from './ScrollableTabs';
 import type { TabData, TabsContent } from './TabsContent';
 
-export interface TabActivationEvent {
-  type?: TabData['type'];
-  label?: string;
-}
-
 export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
 export const Tabs = JSX<TabsBlockProps>((props) => {

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -49,6 +49,4 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
   },
 );
 
-VerticalLayout.childrenTypes = {
-  exclude: ['Accordion', 'OtherProducts'],
-};
+VerticalLayout.childrenTypes = [];

package/mobile/src/hooks/useLink.ts

@@ -1,4 +1,5 @@
 import type { LinkProps } from '../model/LinkProps';
+import { useDialog } from '../ui-kit/Dialog/useDialog';
 import type { PreventableEvent } from '../ui-kit/PreventableEvent';
 import { adjustHref } from '../utils/adjustHref';
 import { isLocalURL } from '../utils/url';
@@ -11,6 +12,7 @@ interface Clickable {
 
 export function useLink(isRemote = false) {
   const router = useRouter();
+  const { close } = useDialog();
 
   return <L extends Partial<LinkProps & Clickable>>(props: L): L & Clickable => ({
     ...props,
@@ -28,6 +30,8 @@ export function useLink(isRemote = false) {
         return;
       }
 
+      close();
+
       // Client routing
       ev?.preventDefault();
       router.push(href);

package/mobile/src/hooks/useLocation.ts

@@ -16,7 +16,7 @@ interface LocationStorageData {
 }
 
 export function useLocation(
-  defaultLocation: string,
+  defaultLocation = 'Москва',
 ): [RegionData, (newLocation: RegionData) => void] {
   const currentLocation = getLocalStorageLocation();
   const [location, setLocation] = useState<RegionData>(
@@ -32,13 +32,10 @@ export function useLocation(
     );
   }, [data]);
 
-  const onChangeLocation = useCallback(
-    (region: RegionData) => {
-      globalThis.localStorage?.setItem('location', JSON.stringify({ manual: true, region }));
-      setLocation(region);
-    },
-    [setLocation],
-  );
+  const onChangeLocation = useCallback((region: RegionData) => {
+    globalThis.localStorage?.setItem('location', JSON.stringify({ manual: true, region }));
+    setLocation(region);
+  }, []);
 
   return [location, onChangeLocation];
 }

package/mobile/src/services/search/useSearch.ts

@@ -1,51 +1,54 @@
-import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useAsyncData } from '@redneckz/uni-jsx/lib/hooks/useAsyncData';
 import { fetchJSON } from '../../utils/fetchJSON';
 import { joinPath } from '../../utils/url';
+import { useDebouncedEffect } from '../../utils/useDebouncedEffect';
 import { CorpusItem, search, SearchIndex } from './search';
 
 const SEARCH_INDEX_FILENAME = 'search.index.json';
 
 export type SearchResult = Array<CorpusItem[]>; // List of pages (CorpusItem) per base path from "basePathList"
 
+interface SearchParams {
+  basePathList?: string[];
+  initialQuery?: string;
+  wasOpened?: boolean;
+}
+
 export interface SearchInputProps {
   value: string;
   onChange: (query: string) => void;
-  onFocus: () => void;
 }
 
-export const useSearch = (
-  basePathList: string[] = ['/'],
-): [SearchResult | null, SearchInputProps] => {
-  const [query, setQuery] = useState('');
+export const useSearch = ({
+  basePathList = ['/'],
+  initialQuery = '',
+  wasOpened,
+}: SearchParams): [SearchResult | null, SearchInputProps] => {
+  const [query, setQuery] = useState(initialQuery || '');
 
-  const [wasQueryFocused, setWasQueryFocused] = useState(false);
-  const handleFocus = useCallback(() => {
-    setWasQueryFocused(true);
-  }, []);
+  useEffect(() => {
+    if (initialQuery !== undefined && initialQuery !== null) {
+      setQuery(initialQuery);
+    }
+  }, [initialQuery]);
 
   const key = useMemo(
-    () => basePathList.map((_) => (wasQueryFocused ? _ : null)), // Load search index on input focus
-    [wasQueryFocused, ...basePathList],
+    () => basePathList.map((_) => (wasOpened ? _ : null)), // Load search index on very first search
+    [wasOpened, ...basePathList],
   );
 
   const { data } = useAsyncData(key, fetchSearchIndex);
 
   const [result, setResult] = useState<SearchResult | null>(null);
 
-  useEffect(() => {
-    const timerId = setTimeout(() => {
-      if (data) {
-        setResult(data.map(search(query)));
-      }
-    }, 300);
-
-    return () => {
-      clearTimeout(timerId);
-    };
+  useDebouncedEffect(() => {
+    if (data) {
+      setResult(data.map(search(query)));
+    }
   }, [data, query]);
 
-  return [result, { value: query, onChange: setQuery, onFocus: handleFocus }];
+  return [result, { value: query, onChange: setQuery }];
 };
 
 const fetchSearchIndex = async (...basePathList: (string | null)[]): Promise<SearchIndex[]> =>

package/mobile/src/ui-kit/Dialog/Dialog.tsx

@@ -1,25 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import type { VNode } from '../../model/VNode';
 import { style } from '../../utils/style';
-import type { PreventableEvent } from '../PreventableEvent';
 import { CloseButton } from './CloseButton';
 
 export interface DialogProps {
   className?: string;
+  isOpened?: boolean;
   head?: VNode;
   onClose?: () => void;
 }
 
-export const Dialog = JSX<DialogProps>(({ className, head, children, onClose }) => {
-  const handleClose = useCallback(
-    (ev: PreventableEvent) => {
-      ev.preventDefault();
-      onClose && onClose();
-    },
-    [onClose],
-  );
-
+export const Dialog = JSX<DialogProps>(({ className, isOpened, head, children, onClose }) => {
   useEffect(() => {
     const handleEscape = ({ key }: { key: string }) => {
       if (key === 'Escape') {
@@ -34,7 +26,7 @@ export const Dialog = JSX<DialogProps>(({ className, head, children, onClose })
     };
   }, [onClose]);
 
-  return (
+  return isOpened ? (
     <div
       className={style(
         'fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar',
@@ -44,11 +36,11 @@ export const Dialog = JSX<DialogProps>(({ className, head, children, onClose })
     >
       <div className="relative container pb-12 min-h-full">
         <div className="sticky bg-white pt-6 top-0">
-          <CloseButton className="absolute top-3 -right-6" onClick={handleClose} />
+          <CloseButton className="absolute top-3 -right-6" onClick={onClose} />
           {head}
         </div>
         {children}
       </div>
     </div>
-  );
+  ) : null;
 });

package/mobile/src/ui-kit/Dialog/DialogAction.ts

@@ -0,0 +1,14 @@
+export type DialogAction = DialogOpenAction | DialogCloseAction;
+
+export interface DialogInitialParams {
+  id: string;
+  message?: string;
+}
+
+interface DialogOpenAction extends DialogInitialParams {
+  type: 'open';
+}
+
+interface DialogCloseAction {
+  type: 'close';
+}

package/mobile/src/ui-kit/Dialog/useDialog.ts

@@ -0,0 +1,6 @@
+import { defaultEventBus } from '../../EventBus/defaultEventBus';
+
+export const useDialog = (id = '') => ({
+  open: (message?: string) => defaultEventBus.fire('dialog', { type: 'open', id, message }),
+  close: () => defaultEventBus.fire('dialog', { type: 'close' }),
+});

package/mobile/src/ui-kit/Dialog/useDialogHandlers.ts

@@ -0,0 +1,28 @@
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { defaultEventBus } from '../../EventBus/defaultEventBus';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+import type { DialogInitialParams } from './DialogAction';
+
+export interface DialogHandlers {
+  onOpen?: (params: DialogInitialParams) => void;
+  onClose?: () => void;
+}
+
+export function useDialogHandlers({ onOpen, onClose }: DialogHandlers = {}) {
+  useEffect(
+    () =>
+      defaultEventBus.subscribe('dialog', (action) => {
+        switch (action.type) {
+          case 'open':
+            onOpen && onOpen(action);
+            break;
+          case 'close':
+            onClose && onClose();
+            break;
+          default:
+            assertUnreachable(action);
+        }
+      }),
+    [onOpen, onClose],
+  );
+}

package/mobile/src/ui-kit/Dialog/useDialogProps.ts

@@ -0,0 +1,45 @@
+import { useCallback, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { defaultEventBus } from '../../EventBus/defaultEventBus';
+import { useBool } from '../../hooks/useBool';
+import type { DialogProps } from './Dialog';
+import type { DialogInitialParams } from './DialogAction';
+import { useDialogHandlers } from './useDialogHandlers';
+
+export function useDialogProps(
+  id: string,
+): DialogProps & DialogInitialParams & { wasOpened: boolean } {
+  const [isOpened, { setTrue: open, setFalse: close }] = useBool();
+  const [params, setParams] = useState<DialogInitialParams>({ id });
+
+  const wasOpened = useRef(isOpened);
+  wasOpened.current ||= isOpened;
+
+  const handleOpen = useCallback(
+    (_: DialogInitialParams) => {
+      if (_.id === id) {
+        setParams(_);
+        open();
+      } else {
+        close();
+      }
+    },
+    [id],
+  );
+
+  useDialogHandlers({
+    onOpen: handleOpen,
+    onClose: close,
+  });
+
+  const handleCloseAsEventSource = useCallback(() => {
+    close();
+    defaultEventBus.fire('dialog', { type: 'close' });
+  }, []);
+
+  return {
+    ...params,
+    isOpened,
+    wasOpened: wasOpened.current,
+    onClose: handleCloseAsEventSource,
+  };
+}