@redneckz/wildless-cms-uni-blocks 0.13.24 → 0.14.0

package/mobile/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -1,31 +1,27 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
-import { Button } from '../Button/Button';
-import { Icon } from '../Icon/Icon';
 import type { TariffsTableInnerContent } from './InnerTableProps';
+import { Img } from '../Img/Img';
+import { Button } from '../Button/Button';
 
-export interface TableInnerButtonProps
+export interface InnerTableButtonProps
   extends Partial<TariffsTableCellIndexProps>,
     TariffsTableInnerContent {
   onClick?: () => void;
   isOpen?: boolean;
+  className?: string;
 }
 
-export const TableInnerButton = JSX<TableInnerButtonProps>(({ isOpen, onClick }) => {
-  return (
+export const TableInnerButton = JSX<InnerTableButtonProps>(
+  ({ className = '', isOpen, onClick }) => (
     <Button
-      version="primary"
+      className={className}
+      appendRight={
+        <Img image={{ icon: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon' }} width="20" height="20" />
+      }
+      text={isOpen ? 'Скрыть' : 'Показать'}
+      version="gray"
       onClick={onClick}
-      className="w-full flex items-center justify-center rounded-none py-lg"
-    >
-      <div className="text-h4">{isOpen ? 'Скрыть' : 'Показать'}</div>
-      <Icon
-        name={isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-        className="ml-s"
-        iconVersion="white"
-        width="20"
-        height="20"
-      />
-    </Button>
-  );
-});
+    />
+  ),
+);

package/mobile/src/ui-kit/InnerTable/InnerTableHeader.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
+import { linkButtonVersion } from './linkButtonVersion';
 
 export interface InnerTableHeaderProps {
   currencies?: string[];
@@ -11,13 +12,13 @@ export interface InnerTableHeaderProps {
 
 export const InnerTableHeader = JSX<InnerTableHeaderProps>(
   ({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (
-    <div className="flex justify-between w-full px-s">
+    <div className="flex justify-between items-center w-full py-lg">
       {currencies && currencies.length > 1 ? (
         <div className="flex bg-secondary-light p-2xs rounded-md">
           {currencies.map((currency, idx) => (
             <div
               key={currency}
-              className={`rounded-md text-xl font-light px-m py-s cursor-pointer ${
+              className={`rounded-md text-xl font-light px-4 py-3 cursor-pointer ${
                 idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'
               }`}
               onClick={() => setActiveTabIndex(idx)}
@@ -29,8 +30,9 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
       ) : null}
       {linkToPDF ? (
         <Button
+          className="text-primary-main"
           href={linkToPDF}
-          version="secondary"
+          version={linkButtonVersion}
           target="_blank"
           appendLeft={
             <Icon

package/mobile/src/ui-kit/InnerTable/getHorizontalShift.tsx

@@ -0,0 +1,7 @@
+import type { RowsData } from './InnerTableProps';
+import { sum } from '../../utils/sum';
+
+const COLUMN_WIDTH = 140;
+
+export const getHorizontalShift = (columns: RowsData[], activeColumnIndex: number) =>
+  sum(columns.slice(0, activeColumnIndex).map((_) => _?.cols?.length ?? 1)) * COLUMN_WIDTH;

package/mobile/src/ui-kit/InnerTable/linkButtonVersion.tsx

@@ -0,0 +1 @@
+export const linkButtonVersion = 'link';

package/mobile/src/ui-kit/InnerTable/renderInnerTableRow.tsx

@@ -0,0 +1,54 @@
+import type { RowsData } from './InnerTableProps';
+import { style } from '../../utils/style';
+import { getHorizontalShift } from './getHorizontalShift';
+
+export const renderInnerTableRow =
+  (activeColumnIndex: number) => (rowData: RowsData[], rowIdx: number) => {
+    if (!rowData?.length) {
+      return null;
+    }
+
+    const [headerColumn, ...columns] = rowData;
+
+    const columnsStyle = style(
+      'flex duration-1000 text-center',
+      rowIdx !== 0 ? 'font-normal' : 'font-light',
+    );
+
+    return (
+      <div key={String(rowIdx)} className="flex border-main-divider border-b border-solid h-full">
+        {headerColumn?.data ? (
+          <div className="text-xl font-light min-w-56 py-lg">{headerColumn.data}</div>
+        ) : null}
+        <div className="flex flex-grow overflow-hidden">
+          <div
+            className={columnsStyle}
+            style={{
+              transform: `translateX(-${getHorizontalShift(columns, activeColumnIndex)}px)`,
+            }}
+          >
+            {columns?.map((_, i) => (
+              <div
+                key={`row${i}`}
+                className="flex flex-col flex-grow gap-s justify-center py-xl odd:bg-main-divider"
+              >
+                {_?.data ? <div className="text-xl font-light">{_.data}</div> : null}
+                {_?.cols ? renderCols(_.cols, activeColumnIndex) : null}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+const renderCols = (cols: string[], rowIndex: number) =>
+  cols?.length > 0 ? (
+    <div className={style('flex', rowIndex === 0 ? 'text-secondary-text' : '')}>
+      {cols.map((data, i) => (
+        <div key={String(i)} className="w-20 text-h6 mx-lg">
+          {data}
+        </div>
+      ))}
+    </div>
+  ) : null;

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

@@ -4,16 +4,16 @@ import { useLocation } from '../../hooks/useLocation';
 import type { Region } from '../../hooks/useRegions';
 import { useRegions } from '../../hooks/useRegions';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { jaroWinklerDistance } from '../../services/search/jaroWinklerDistance';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import { groupBy } from '../../utils/groupBy';
+import { jaroWinklerDistance } from '../../utils/jaroWinklerDistance';
 import { Dialog } from '../DialogManager/Dialog';
 import { useDialogManager } from '../DialogManager/useDialogManager';
 import { Text } from '../Text/Text';
+import { SearchBar } from './SearchBar';
 import { renderForeignOffices } from './renderForeignOffices';
 import { renderRegion } from './renderRegion';
 import { renderRegionGroup } from './renderRegionGroup';
-import { SearchBar } from './SearchBar';
 
 const SEARCH_TERM_MIN_LENGTH = 3;
 

package/mobile/src/ui-kit/PopupManager/PopupAction.ts

@@ -0,0 +1,18 @@
+import type { VNode } from '../../model/VNode';
+
+export type PopupAction = PopupOpenAction | PopupCloseAction;
+
+export interface PopupOptions {
+  top: number;
+  left: number;
+  width?: number;
+}
+
+export interface PopupOpenAction extends PopupOptions {
+  type: 'open' | 'update';
+  popup: VNode;
+}
+
+export interface PopupCloseAction {
+  type: 'close';
+}

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

@@ -0,0 +1,57 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useEventListener } from '@redneckz/uni-jsx/lib/hooks/useEventListener';
+import { defaultEventBus } from '../../EventBus/defaultEventBus';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+import { PopupOpenAction } from './PopupAction';
+
+export const PopupManager = JSX(() => {
+  const [popup, setPopup] = useState<PopupOpenAction | null>(null);
+
+  const close = useCallback(() => {
+    setPopup(null);
+  }, []);
+
+  useEffect(
+    () =>
+      defaultEventBus.subscribe('popup', (action) => {
+        switch (action.type) {
+          case 'open':
+          case 'update':
+            setPopup(action);
+            break;
+          case 'close':
+            close();
+            break;
+          default:
+            assertUnreachable(action);
+        }
+      }),
+    [],
+  );
+
+  const escapeHandler = useCallback(
+    ({ key }: { key: string }) => {
+      if (key === 'Escape') {
+        close();
+      }
+    },
+    [close],
+  );
+
+  useEventListener(globalThis.document, 'keydown', escapeHandler);
+
+  return popup ? (
+    <div
+      className="absolute z-50"
+      style={{
+        left: `${popup.left}px`,
+        top: `${popup.top}px`,
+        ...(popup.width ? { width: `${popup.width}px` } : {}),
+      }}
+      role="dialog"
+    >
+      {popup.popup}
+    </div>
+  ) : null;
+});

package/mobile/src/ui-kit/PopupManager/usePopupManager.tsx

@@ -0,0 +1,11 @@
+import { defaultEventBus } from '../../EventBus/defaultEventBus';
+import type { VNode } from '../../model/VNode';
+import type { PopupOptions } from './PopupAction';
+
+export const usePopupManager = () => ({
+  open: (popup: VNode, options: PopupOptions) =>
+    defaultEventBus.fire('popup', { type: 'open', popup, ...options }),
+  update: (popup: VNode, options: PopupOptions) =>
+    defaultEventBus.fire('popup', { type: 'update', popup, ...options }),
+  close: () => defaultEventBus.fire('popup', { type: 'close' }),
+});

package/mobile/src/ui-kit/Select/Option.ts

@@ -0,0 +1,4 @@
+export interface Option {
+  key: string;
+  text?: string;
+}

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

@@ -1,18 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useBool } from '../../hooks/useBool';
-import { useOutsideClick } from '../../hooks/useOutsideClick';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { LabelProps } from '../../model/HeadlineType';
-import { jaroWinklerDistance } from '../../services/search/jaroWinklerDistance';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
 import { Input } from '../Input/Input';
-
-export interface Option {
-  key: string;
-  text?: string;
-}
+import type { Option } from './Option';
+import { formatOption } from './formatOption';
+import { useSelectPopup } from './useSelectPopup';
 
 export type SelectProps = LabelProps & {
   className?: string;
@@ -21,69 +17,58 @@ export type SelectProps = LabelProps & {
   valid?: boolean;
   isBorder?: boolean;
   placeholder?: string;
-  onChange?: (value: Option) => void;
   isSearch?: boolean;
+  onChange?: (value: Option) => void;
 };
 
 export const Select = JSX<SelectProps>(
   ({
-    className = '',
+    className,
     label,
     options = [],
     value,
     valid = true,
     isBorder = true,
     placeholder = '',
-    onChange,
     isSearch = false,
+    onChange,
   }) => {
-    const [isOpen, { setFalse: close, toggle }] = useBool();
-    const [searchValue, setSearchValue] = useState('');
-    const reset = useCallback(() => {
+    const [isOpen, { setFalse: close, setTrue: open }] = useBool();
+    const [query, setQuery] = useState('');
+
+    const handleClose = useCallback(() => {
+      setQuery('');
       close();
-      setSearchValue('');
     }, []);
-    const wrapperRef = useOutsideClick<HTMLDivElement>(reset);
-
-    const handleChange = useCallback(
-      (option: Option) => {
-        reset();
-        onChange && onChange(option);
-      },
-      [onChange],
-    );
 
-    const isSelected = (option: Option) => option.key === value?.key;
+    const inputRef = useSelectPopup({
+      isOpen,
+      options,
+      value,
+      query,
+      onChange,
+      onClose: handleClose,
+    });
 
     return (
-      <div className={className} ref={wrapperRef}>
+      <div className={className}>
         {renderLabel(label)}
-        <div className={style('relative', isOpen ? 'z-20' : 'z-10')}>
+        <div className={style('relative', isOpen ? 'z-20' : 'z-10')} ref={inputRef}>
           <div
             className={style(
               'text-l flex justify-between items-center text-primary-text cursor-pointer relative z-10',
               getBorderStyle(isBorder, valid),
             )}
-            onClick={toggle}
+            onClick={isOpen ? handleClose : open}
           >
-            <p className="p-m pr-3xl h-14 overflow-hidden text-ellipsis whitespace-nowrap">
+            <p className="p-m pr-3xl flex items-center overflow-hidden text-ellipsis whitespace-nowrap">
               {formatOption(value) || placeholder}
             </p>
-            <Icon
-              className={style('absolute right-3', isOpen ? '' : 'rotate-180')}
-              name="ArrowUpIcon"
-              width="16"
-              height="16"
-            />
+            {renderIcon(isOpen)}
           </div>
-          {isSearch ? renderSearch(isOpen, searchValue, setSearchValue) : null}
-          {options?.length ? (
-            <div className={style('h-0', isOpen ? '' : 'overflow-hidden')}>
-              <div className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
-                {getFilteredOptions(options, searchValue).map(
-                  renderOption(handleChange, isOpen, isSelected),
-                )}
-              </div>
+          {isSearch && isOpen ? (
+            <div className={style('absolute top-0 w-full z-20')}>
+              <Input type="text" autoFocus value={query} onChange={setQuery} />
             </div>
           ) : null}
         </div>
@@ -101,51 +86,14 @@ const renderLabel = (label?: string) =>
     </div>
   ) : null;
 
-const getFilteredOptions = (options: Option[], searchValue: string) => {
-  return searchValue
-    ? options.filter(
-        (_) => jaroWinklerDistance(_.text?.toLowerCase())(searchValue.toLowerCase()) >= 0.6,
-      )
-    : options;
-};
-
-const renderSearch = (
-  isOpen: boolean,
-  searchValue: string,
-  setSearchValue: (value: string) => void,
-) =>
-  isOpen ? (
-    <div className={style('absolute top-0 w-full h-full z-20')}>
-      <Input type="text" autoFocus value={searchValue} onChange={setSearchValue} />
-    </div>
-  ) : null;
-
-const renderOption =
-  (
-    handleChange: (option: Option) => void,
-    isOpen: boolean,
-    isSelected: (option: Option) => boolean,
-  ) =>
-  (option: Option, i: number) =>
-    (
-      <div
-        key={String(i)}
-        onClick={() => {
-          handleChange(option);
-        }}
-        className="flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative"
-      >
-        <span className="min-h-6">{formatOption(option)}</span>
-        <Icon
-          name="DoneSimpleIcon"
-          width="16"
-          height="16"
-          className={style('absolute right-4 pt-3xs', isSelected(option) && isOpen ? '' : 'hidden')}
-        />
-      </div>
-    );
-
-const formatOption = (_?: Option): string => _?.text || _?.key || '';
+const renderIcon = (isOpen: boolean) => (
+  <Icon
+    className={style('absolute right-3', isOpen ? '' : 'rotate-180')}
+    name="ArrowUpIcon"
+    width="16"
+    height="16"
+  />
+);
 
 const getBorderStyle = (isBorder: boolean, valid: boolean) =>
   style(

package/mobile/src/ui-kit/Select/SelectPopup.tsx

@@ -0,0 +1,42 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { Icon } from '../Icon/Icon';
+import type { Option } from './Option';
+import { filterOptions } from './filterOptions';
+import { formatOption } from './formatOption';
+
+export interface SelectPopupProps {
+  popupRef?: { current: HTMLDivElement | null };
+  options?: Option[];
+  value?: Option;
+  query?: string;
+  onChange?: (option: Option) => void;
+}
+
+export const SelectPopup = JSX<SelectPopupProps>(({ popupRef, options, value, query, onChange }) =>
+  options?.length ? (
+    <div
+      className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]"
+      role="listbox"
+      ref={popupRef}
+    >
+      {filterOptions(options, query).map((option) => (
+        <div
+          key={option.key}
+          className="flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative"
+          role="option"
+          aria-selected={option.key === value?.key}
+          onClick={() => onChange && onChange(option)}
+        >
+          <span className="min-h-6">{formatOption(option)}</span>
+          <Icon
+            name="DoneSimpleIcon"
+            width="16"
+            height="16"
+            className={style('absolute right-4 pt-3xs', option.key === value?.key ? '' : 'hidden')}
+          />
+        </div>
+      ))}
+    </div>
+  ) : null,
+);

package/mobile/src/ui-kit/Select/filterOptions.ts

@@ -0,0 +1,19 @@
+import { compareBy, desc } from '../../utils/Comparator';
+import { jaroWinklerDistance } from '../../utils/jaroWinklerDistance';
+import { zip } from '../../utils/zip';
+import type { Option } from './Option';
+
+export const filterOptions = (options: Option[], query: string | undefined): Option[] => {
+  if (!options?.length || !query?.trim()) {
+    return options;
+  }
+
+  const ranking = options
+    .map((_) => _.text?.toLowerCase())
+    .map(jaroWinklerDistance(query?.trim().toLowerCase()));
+
+  return zip(options, ranking)
+    .filter(([, rank]) => rank >= 0.5)
+    .sort(desc(compareBy(([, rank]) => rank)))
+    .map(([option]) => option);
+};

package/mobile/src/ui-kit/Select/formatOption.ts

@@ -0,0 +1,3 @@
+import type { Option } from './Option';
+
+export const formatOption = (_: Option | undefined): string => _?.text || _?.key || '';

package/mobile/src/ui-kit/Select/useSelectPopup.tsx

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
+import { usePopupManager } from '../PopupManager/usePopupManager';
+import type { Option } from './Option';
+import { SelectPopup, SelectPopupProps } from './SelectPopup';
+
+interface SelectPopupOptions extends SelectPopupProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+}
+
+export function useSelectPopup({
+  isOpen,
+  options,
+  value,
+  query,
+  onChange,
+  onClose,
+}: SelectPopupOptions) {
+  const popup = usePopupManager();
+
+  const close = useCallback(() => {
+    popup.close();
+    onClose && onClose();
+  }, [onClose]);
+
+  const handleChange = useCallback(
+    (option: Option) => {
+      close();
+      onChange && onChange(option);
+    },
+    [close, onChange],
+  );
+
+  const inputRef = useRef<HTMLDivElement | null>(null);
+  const popupRef = useOutsideClick<HTMLDivElement>(close);
+
+  useEffect(() => {
+    if (!isOpen || !inputRef.current) {
+      return;
+    }
+
+    const inputElement = inputRef.current;
+    const { top, left, width, height } = inputElement.getBoundingClientRect();
+
+    popup.update(
+      <SelectPopup
+        popupRef={popupRef}
+        options={options}
+        value={value}
+        query={query}
+        onChange={handleChange}
+      />,
+      {
+        top: top + window.scrollY + height,
+        left,
+        width,
+      },
+    );
+  }, [isOpen, options, value, query, handleChange]);
+
+  return inputRef;
+}

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

@@ -0,0 +1,35 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { VNode } from '../../model/VNode';
+
+interface TextWithIconProps extends UniBlockProps {
+  tag?: keyof HTMLElementTagNameMap;
+  textNode?: VNode;
+  iconNode?: VNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  justifyContent?: 'between' | 'center';
+}
+
+export const TextWithIcon = JSX<TextWithIconProps>(
+  ({ textNode, iconNode, tag, onClick, justifyContent = 'between', className, ...rest }) => {
+    const Tag: any = tag;
+
+    return (
+      <Tag
+        tag={tag}
+        className={style(
+          'flex items-center w-full gap-1',
+          justifyContent === 'between' ? 'justify-between' : 'justify-center',
+          className,
+        )}
+        onClick={onClick}
+        {...rest}
+      >
+        {textNode ? <div>{textNode}</div> : null}
+        {iconNode ? <div>{iconNode}</div> : null}
+      </Tag>
+    );
+  },
+);

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

@@ -13,7 +13,7 @@ import { useYandexMaps } from './useYandexMaps';
 import { ZoomButton } from './ZoomButton';
 
 interface YandexMapProps {
-  points: number[][];
+  points?: number[][];
   className?: string;
   zoom?: number;
   showSearchField?: boolean;
@@ -41,9 +41,8 @@ export const YandexMap = JSX<YandexMapProps>(
     const yandexMaps = useYandexMaps();
 
     const [isFullScreen, setIsFullScreen] = useState();
-    const [pointsToRender, setPointsToRender] = useState<number[][]>(normalizePoints(mockPoints));
 
-    const pointsCenter = getCenterPoint(points);
+    const pointsCenter = points ? getCenterPoint(points) : [55.753995, 37.614069];
 
     useEffect(() => {
       if (!map?.current) {
@@ -54,17 +53,17 @@ export const YandexMap = JSX<YandexMapProps>(
             controls: [],
             suppressMapOpenBlock: true,
           });
-          renderClusterer(yandexMaps, map.current, pointsToRender);
+          renderClusterer(yandexMaps, map.current, points);
         });
       }
-    }, [yandexMaps, map, pointsToRender]);
+    }, [yandexMaps, map, points]);
 
     useEffect(() => {
-      if (map.current && pointsToRender && yandexMaps) {
-        const newPoints = pointsToRender.length < 1 ? normalizePoints(mockPoints) : pointsToRender;
+      if (map.current && points?.length && yandexMaps) {
+        const newPoints = points.length < 1 ? normalizePoints(mockPoints) : points;
         renderClusterer(yandexMaps, map.current, newPoints);
       }
-    }, [map, pointsToRender, yandexMaps]);
+    }, [map, points, yandexMaps]);
 
     if (!yandexMaps) {
       return null;

package/mobile/src/utils/fetchMultitudeJSON.ts

@@ -0,0 +1,9 @@
+import { fetchJSON } from './fetchJSON';
+
+export async function fetchMultitudeJSON<R = unknown>(
+  ...urls: string[]
+): Promise<Awaited<R | null>[]> {
+  const fetchPromises = urls.map((url) => fetchJSON<R>(url));
+
+  return await Promise.all(fetchPromises);
+}