@redneckz/wildless-cms-uni-blocks 0.6.33 → 0.6.35

package/mobile/src/hooks/useCarouselControls.ts

@@ -5,39 +5,35 @@ export interface CarouselControls {
   dec: () => void;
   canInc: boolean;
   canDec: boolean;
+  isScrollAvailable: boolean;
 }
 
-interface CarouselProps {
-  itemsCount: number;
+interface CarouselControlsProps {
+  itemCount: number;
   visibleItemCount?: number;
   isCyclic?: boolean;
+  container?: HTMLDivElement | null;
 }
 
-export const useCarouselControls = ({
-  itemsCount,
-  visibleItemCount = itemsCount,
-  isCyclic,
-}: CarouselProps): [number, CarouselControls] => {
+export const useCarouselControls = (props: CarouselControlsProps): [number, CarouselControls] => {
+  const { itemCount, visibleItemCount, isCyclic } = props;
+
   const [activeIndex, setActiveIndex] = useState(0);
 
   const inc = useCallback(
-    () =>
-      setActiveIndex((_) => (isCyclic ? (_ + 1) % itemsCount : Math.min(_ + 1, itemsCount - 1))),
-    [isCyclic, itemsCount],
+    () => setActiveIndex((_) => (isCyclic ? (_ + 1) % itemCount : Math.min(_ + 1, itemCount - 1))),
+    [isCyclic, itemCount],
   );
   const dec = useCallback(
-    () =>
-      setActiveIndex((_) => (isCyclic ? (itemsCount + _ - 1) % itemsCount : Math.max(_ - 1, 0))),
-    [isCyclic, itemsCount],
+    () => setActiveIndex((_) => (isCyclic ? (itemCount + _ - 1) % itemCount : Math.max(_ - 1, 0))),
+    [isCyclic, itemCount],
   );
 
-  const isScrollAvailable = itemsCount > visibleItemCount;
-  const isCyclicAndScrollAvailable = isCyclic && isScrollAvailable;
-
   const canInc =
-    isCyclicAndScrollAvailable ||
-    (isScrollAvailable && itemsCount - activeIndex > visibleItemCount);
-  const canDec = isCyclicAndScrollAvailable || Boolean(isScrollAvailable && activeIndex > 0);
+    isCyclic ||
+    (isScrollable(activeIndex, props) && activeIndex < itemCount - (visibleItemCount || 1));
+  const canDec = isCyclic || activeIndex > 0;
+  const isScrollAvailable = canDec || canInc;
 
   return [
     activeIndex,
@@ -46,6 +42,24 @@ export const useCarouselControls = ({
       dec,
       canInc,
       canDec,
+      isScrollAvailable,
     },
   ];
 };
+
+function isScrollable(
+  activeIndex: number,
+  { itemCount, visibleItemCount, container }: CarouselControlsProps,
+): boolean {
+  if (visibleItemCount) {
+    return itemCount > visibleItemCount;
+  }
+
+  if (container) {
+    const scrollLeft = (container.scrollWidth * activeIndex) / itemCount;
+
+    return scrollLeft + container.clientWidth < container.scrollWidth;
+  }
+
+  return false;
+}

package/mobile/src/model/JSXBlock.ts

@@ -1,14 +1,13 @@
 import type { UNIComponent } from '@redneckz/uni-jsx';
-import type { BlockAncestors, SlotName } from './BlockDecorator';
-import type { BlockDef, ContentPageDef } from './ContentPageDef';
+import type { BlockRendererOptions } from '../BlockRenderer/BlockRendererOptions';
+import type { SlotName } from './BlockDecorator';
+import type { BlockDef } from './ContentPageDef';
 import type { VNode } from './VNode';
 
 export interface UniBlockProps {
   className?: string;
-  page?: ContentPageDef;
   block?: BlockDef;
-  ancestors?: BlockAncestors;
-  slots?: Record<string, VNode>;
+  options?: BlockRendererOptions;
 }
 
 export type JSXBlock<BlockProps extends UniBlockProps = UniBlockProps> = UNIComponent<

package/mobile/src/model/LinkProps.ts

@@ -13,6 +13,7 @@ export type Target = '' | '_self' | '_blank' | '_parent' | '_top';
 export interface LinkCommonProps {
   /** @title URL (href) */
   href?: string;
+  /** @default "" */
   target?: Target;
 }
 

package/mobile/src/model/Picture.ts

@@ -33,9 +33,15 @@ export type ImgAlignment =
 export interface Img {
   /** @title Картинка */
   src?: string;
-  /** @title Альтернативный текст (alt) */
+  /**
+   * @title Альтернативный текст (alt)
+   * @default ""
+   */
   alt?: string;
-  /** @title Текст подсказки (title) */
+  /**
+   * @title Текст подсказки (title)
+   * @default ""
+   */
   title?: string;
 }
 

package/mobile/src/services/sitemap/SitemapProps.ts

@@ -20,13 +20,12 @@ export interface DispositionItem extends LinkProps {
 }
 
 export interface SitemapDataProps {
-  /** @title Основное меню */
   topItems?: TopMenuItem[];
-  /** @title Дополнительное меню */
   dispositions?: DispositionItem[];
   logo?: {
     image?: Picture;
     title?: string;
   };
   defaultLocation?: string;
+  officesLink?: string;
 }

package/{src/react → mobile/src}/setup-fixture.ts

@@ -1,9 +1,9 @@
 import '@redneckz/uni-jsx/lib/setup.react';
 import { useState } from 'react';
-import { handlerDecorator } from '../hooks/handlerDecorator';
-import { useRouter } from '../hooks/useRouter';
-import { projectSettings } from '../ProjectSettings';
-import wlc from '../wlc.json';
+import { handlerDecorator } from './hooks/handlerDecorator';
+import { useRouter } from './hooks/useRouter';
+import { projectSettings } from './ProjectSettings';
+import wlc from './wlc.json';
 
 projectSettings.setup(wlc);
 

package/mobile/src/ui-kit/Button/renderArrows.tsx

@@ -1,40 +1,45 @@
 import { ArrowButton } from './ArrowButton';
 
-export type renderArrowsProps = {
-  handler: [() => void, () => void];
-  isShown: [boolean, boolean];
+export type RenderArrowsProps = {
+  dec: () => void;
+  inc: () => void;
+  canInc: boolean;
+  canDec: boolean;
   btnClass: [string, string];
   className?: string;
   isDisabled?: boolean;
 };
 
 export function renderArrows({
-  handler,
-  isShown,
+  dec,
+  inc,
+  canDec,
+  canInc,
   btnClass,
   className = '',
-  isDisabled = false,
-}: renderArrowsProps) {
-  return (
+}: RenderArrowsProps) {
+  const isVisible = canDec || canInc;
+
+  return isVisible ? (
     <div>
-      {isShown[0] || isDisabled ? (
+      {canDec ? (
         <ArrowButton
-          className={`absolute z-10 ${btnClass[0]} ${className}`}
-          onClick={handler[0]}
+          className={`absolute z-50 ${btnClass[0]} ${className}`}
+          onClick={dec}
           ariaLabel="Пролистать влево"
           data-block-control="scroll-left"
-          disabled={!isShown[0]}
+          disabled={!canDec}
         />
       ) : null}
-      {isShown[1] || isDisabled ? (
+      {canInc ? (
         <ArrowButton
-          className={`absolute z-10 rotate-180 ${btnClass[1]} ${className}`}
-          onClick={handler[1]}
+          className={`absolute z-50 rotate-180 ${btnClass[1]} ${className}`}
+          onClick={inc}
           ariaLabel="Пролистать вправо"
           data-block-control="scroll-right"
-          disabled={!isShown[1]}
+          disabled={!canInc}
         />
       ) : null}
     </div>
-  );
+  ) : null;
 }

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { renderArrows } from '../Button/renderArrows';
 import type { RowsData } from './InnerTableProps';
 
@@ -10,23 +10,19 @@ export interface InnerTableBodyItemProps {
 }
 
 export const InnerTableBodyItem = JSX<InnerTableBodyItemProps>(({ rows }) => {
-  const [activeColumnIndex, setActiveColumnIndex] = useState(0);
-
-  const handleNextClick = () => setActiveColumnIndex(activeColumnIndex + 1);
-  const handlePrevClick = () => setActiveColumnIndex(activeColumnIndex - 1);
-
   const rowsLength = rows?.[0]?.length ?? 0;
-  const showNextButton = rowsLength > 3 && rowsLength > activeColumnIndex + 4;
-
-  const showPrevButton = activeColumnIndex > 0;
+  const CARD_VIEW_COUNT = 5;
+  const [activeIndex, controls] = useCarouselControls({
+    itemCount: rowsLength,
+    visibleItemCount: CARD_VIEW_COUNT,
+  });
 
   return (
     <div>
-      {rows?.map(renderRow(activeColumnIndex))}
+      {rows?.map(renderRow(activeIndex))}
       {renderArrows({
-        handler: [handlePrevClick, handleNextClick],
-        isShown: [showPrevButton, showNextButton],
-        btnClass: ['right-3 top-24', 'right-3 top-2'],
+        ...controls,
+        btnClass: ['left-3 top-20', 'right-3 top-20'],
         className: '',
       })}
     </div>

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

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
 import { SwipeListControlDots } from './SwipeListControlDots';
-import { SwipeListControlList, SwipeListControlListProps } from './SwipeListControlList';
+import { SwipeListControlList } from './SwipeListControlList';
+import type { SwipeListControlListProps } from './SwipeListControlList';
 import type { SwipeListControlProps } from './SwipeListControlProps';
 import { getIndexParts } from './utils/getIndexParts';
 import { getScrollPoints } from './utils/getScrollPoints';
@@ -26,34 +27,40 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
       children,
     };
 
-    const handleScroll: SwipeListControlListProps['onScroll'] = (e) => {
-      const {
-        scrollLeft,
-        clientWidth,
-        childElementCount,
-        scrollWidth,
-        children: childrenCollection,
-      } = e?.currentTarget as HTMLElement;
+    const handleScroll: SwipeListControlListProps['onScroll'] = useCallback(
+      (e) => {
+        const {
+          scrollLeft,
+          clientWidth,
+          childElementCount,
+          scrollWidth,
+          children: childrenCollection,
+        } = e?.currentTarget as HTMLElement;
+        if (!childrenCollection[0]) {
+          return;
+        }
 
-      // horizontal PADDING / 2 to compensate padding-margin combo of child container
-      // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
-      const itemWidth = (childrenCollection[0] as HTMLElement).offsetWidth - padding / 2;
-      const scrollPoints = getScrollPoints({
-        gap,
-        padding,
-        clientWidth,
-        scrollWidth,
-        childElementCount,
-        itemWidth,
-      });
+        // horizontal PADDING / 2 to compensate padding-margin combo of child container
+        // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
+        const itemWidth = (childrenCollection[0] as HTMLElement).offsetWidth - padding / 2;
+        const scrollPoints = getScrollPoints({
+          gap,
+          padding,
+          clientWidth,
+          scrollWidth,
+          childElementCount,
+          itemWidth,
+        });
 
-      const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
-      if (index !== activeIndex && onSlideChange) {
-        onSlideChange();
-      }
-      setActiveIndex(index);
-      setIndexFraction(fraction);
-    };
+        const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
+        if (index !== activeIndex && onSlideChange) {
+          onSlideChange();
+        }
+        setActiveIndex(index);
+        setIndexFraction(fraction);
+      },
+      [gap, padding, activeIndex, onSlideChange],
+    );
 
     return (
       <div className={className}>

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 
 const DOT_STYLES = 'bg-primary-main opacity-30 w-1.5 h-1.5 min-w-1.5 min-h-1.5 rounded-full';
 const BASE_DOT_WIDTH = 6;
@@ -14,28 +15,35 @@ export interface SwipeListControlDotsProps {
 
 export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
   ({ children, activeIndex, indexFraction, showDots }) => {
-    const handleClick = (idx: number) => (e) => {
-      if (idx === activeIndex) {
-        return;
-      }
+    const handleClick = useCallback(
+      (idx: number) => (e) => {
+        if (idx === activeIndex) {
+          return;
+        }
 
-      const contentContainer = (e.currentTarget as HTMLElement).parentElement
-        ?.previousElementSibling;
+        const contentContainer = (e.currentTarget as HTMLElement).parentElement
+          ?.previousElementSibling;
 
-      contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    };
+        contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      },
+      [activeIndex],
+    );
 
-    return showDots && children?.length ? (
+    return showDots && children ? (
       <div className="flex gap-2 mx-auto mt-5 w-fit">
-        {children?.map((_, idx: number) => (
-          <div
-            key={String(idx)}
-            onClick={handleClick(idx)}
-            className={`${DOT_STYLES}`}
-            style={getDotStyles(idx, activeIndex, indexFraction)}
-            aria-hidden
-          />
-        ))}
+        {children.length && children.map ? (
+          children.map((_, idx: number) => (
+            <div
+              key={String(idx)}
+              onClick={handleClick(idx)}
+              className={DOT_STYLES}
+              style={getDotStyles(idx, activeIndex, indexFraction)}
+              aria-hidden
+            />
+          ))
+        ) : (
+          <div className={DOT_STYLES} style={createDotStyle(1)} />
+        )}
       </div>
     ) : null;
   },
@@ -53,13 +61,10 @@ const getDotStyles = (
   const leftIndexMod = 1 - indexFraction;
   const rightIndexMod = indexFraction;
 
-  return currentIdx === activeIndex
-    ? {
-        opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * leftIndexMod}`,
-        width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * leftIndexMod}px`,
-      }
-    : {
-        opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * rightIndexMod}`,
-        width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * rightIndexMod}px`,
-      };
+  return createDotStyle(currentIdx === activeIndex ? leftIndexMod : rightIndexMod);
 };
+
+const createDotStyle = (indexModifier: number): Record<string, string> => ({
+  opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * indexModifier}`,
+  width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * indexModifier}px`,
+});

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlList.tsx

@@ -16,21 +16,21 @@ export interface SwipeListControlListProps extends SwipeContainer {
 export const SwipeListControlList = JSX<SwipeListControlListProps>(
   ({
     className = '',
-    children,
-    activeIndex,
-    onScroll,
+    activeIndex = -1,
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
+    children,
+    onScroll,
   }) => {
-    return (
+    return children ? (
       <div
         className={`overflow-auto flex horizontal-list no-scrollbar ${className}`}
         style={{ ...getContainerStyle(padding), gap: `${gap}px` }}
         role="list"
         onScroll={onScroll}
       >
-        {children?.length ? (
-          children?.map((child, idx) => (
+        {children.length && children.map ? (
+          children.map((child, idx) => (
             <SwipeListControlItem
               key={String(idx)}
               style={getContainerStyle(padding / 4)}
@@ -40,9 +40,11 @@ export const SwipeListControlList = JSX<SwipeListControlListProps>(
             </SwipeListControlItem>
           ))
         ) : (
-          <SwipeListControlItem>{children}</SwipeListControlItem>
+          <SwipeListControlItem style={getContainerStyle(padding / 4)} aria-current>
+            {children}
+          </SwipeListControlItem>
         )}
       </div>
-    );
+    ) : null;
   },
 );

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

@@ -7,9 +7,11 @@ export const TableArrowScrollControl = JSX<TableArrowScrollControlProps>(
     return isScrollAvailable ? (
       <div>
         {renderArrows({
-          handler: [onPrevClick, onNextClick],
-          isShown: [showPrevButton, showNextButton],
-          btnClass: ['top-[108px]', 'top-11'],
+          dec: onPrevClick,
+          inc: onNextClick,
+          canDec: showPrevButton,
+          canInc: showNextButton,
+          btnClass: ['top-[108px]', 'top-[44px]'],
           className: 'right-7',
           isDisabled: true,
         })}

package/mobile/src/ui-kit/TableArrowScrollControl/TableArrowScrollControlProps.ts

@@ -1,8 +1,9 @@
 export interface TableArrowScrollControlProps {
-  activeCardIndex: number;
+  activeIndex: number;
   onNextClick: () => void;
   onPrevClick: () => void;
   isScrollAvailable?: boolean;
   showNextButton: boolean;
   showPrevButton: boolean;
+  setActiveIndex: (index: number) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.33",
+  "version": "0.6.35",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/BlockRenderer/BlockRendererOptions.ts

@@ -0,0 +1,12 @@
+import type { BlockAncestors, BlockDecorator } from '../model/BlockDecorator';
+import type { BlocksRegistry } from '../model/BlocksRegistry';
+import type { ContentPageDef, Slot } from '../model/ContentPageDef';
+
+export interface BlockRendererOptions {
+  key?: string;
+  page?: ContentPageDef;
+  blockDecorator?: BlockDecorator;
+  blocksRegistry?: BlocksRegistry;
+  parent?: Slot;
+  ancestors?: BlockAncestors;
+}

package/src/BlockRenderer/defaultBlockDecorator.ts

@@ -0,0 +1,4 @@
+import type { BlockDecorator } from '../model/BlockDecorator';
+
+export const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
+  render({ blockClassName, block });

package/src/{model → BlockRenderer}/getParentBlockContent.ts

@@ -1,11 +1,11 @@
-import type { BlockAncestors } from './BlockDecorator';
+import type { BlockRendererOptions } from './BlockRendererOptions';
 import { getParentBlockDef } from './getParentBlockDef';
 
 export function getParentBlockContent<C extends Record<string, any>>(
-  ancestors: BlockAncestors | undefined,
+  options: BlockRendererOptions | undefined,
   defaultContent: C,
 ): C {
-  const { content } = getParentBlockDef(ancestors);
+  const { content } = getParentBlockDef(options);
 
   return (content as C) || defaultContent;
 }

package/src/BlockRenderer/getParentBlockDef.ts

@@ -0,0 +1,6 @@
+import type { BlockRendererOptions } from '../BlockRenderer/BlockRendererOptions';
+import type { BlockDef } from '../model/ContentPageDef';
+
+export function getParentBlockDef(options: BlockRendererOptions | undefined): BlockDef {
+  return options?.parent || {};
+}

package/src/BlockRenderer/renderBlock.tsx

@@ -0,0 +1,47 @@
+import type { BlockAncestors } from '../model/BlockDecorator';
+import type { BlockDef } from '../model/ContentPageDef';
+import { style2className } from '../utils/style2className';
+import type { BlockRendererOptions } from './BlockRendererOptions';
+import { defaultBlockDecorator } from './defaultBlockDecorator';
+
+const DEFAULT_ANCESTORS: BlockAncestors = [];
+const DEFAULT_STYLE = ['col-span-12'];
+
+export function renderBlock(block: BlockDef, options: BlockRendererOptions) {
+  const {
+    key,
+    blockDecorator = defaultBlockDecorator,
+    blocksRegistry = {},
+    ancestors = DEFAULT_ANCESTORS,
+  } = options;
+  const { type } = block;
+
+  if (!(type && type in blocksRegistry)) {
+    console.warn(`No block with "${type}" is registered`);
+  }
+
+  const BlockComponent = type && blocksRegistry[type];
+
+  return blockDecorator(
+    {
+      blockClassName: `scroll-mt-12 ${style2className(block.style || DEFAULT_STYLE)}`, // TODO scroll-mt-12 ? here?
+      block,
+      ancestors,
+      // Adjusted by decorator block and blockClassName
+      render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
+        const { content } = adjustedBlock;
+
+        return BlockComponent ? (
+          <BlockComponent
+            key={key}
+            className={adjustedBlockClassName}
+            block={block}
+            options={options}
+            {...content}
+          />
+        ) : null;
+      },
+    },
+    key,
+  );
+}

package/src/BlockRenderer/renderBlockList.tsx

@@ -0,0 +1,33 @@
+import type { BlockAncestors, SlotName } from '../model/BlockDecorator';
+import { DEFAULT_SLOT_NAME } from '../model/BlockDecorator';
+import type { BlockDef } from '../model/ContentPageDef';
+import type { VNode } from '../model/VNode';
+import type { BlockRendererOptions } from './BlockRendererOptions';
+import { renderBlock } from './renderBlock';
+
+export interface BlocksListRendererProps extends BlockRendererOptions {
+  slotName?: SlotName;
+  renderChild?: (block: BlockDef, options: BlockRendererOptions) => VNode;
+}
+
+const EMPTY_ANCESTORS: BlockAncestors = [];
+
+export const renderBlocksList = (
+  blocks: BlockDef[] | undefined,
+  {
+    key,
+    ancestors = EMPTY_ANCESTORS,
+    slotName = DEFAULT_SLOT_NAME,
+    renderChild = renderBlock,
+    ...options
+  }: BlocksListRendererProps,
+): VNode[] =>
+  (blocks || []).map((_: BlockDef, j: number) =>
+    renderChild(_, {
+      ...options,
+      key: `${key ? key : _.type}-${j}`,
+      ancestors: options.parent
+        ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
+        : ancestors,
+    }),
+  );

package/src/BlockRenderer/renderChildren.ts

@@ -0,0 +1,25 @@
+import type { BlockDef } from '../model/ContentPageDef';
+import type { UniBlockProps } from '../model/JSXBlock';
+import type { VNode } from '../model/VNode';
+import type { BlockRendererOptions } from './BlockRendererOptions';
+import { renderBlocksList } from './renderBlockList';
+
+interface ChildrenRendererProps extends UniBlockProps {
+  children?: VNode;
+  renderChild?: (block: BlockDef, options: BlockRendererOptions) => VNode;
+}
+
+export function renderChildren({
+  children,
+  block,
+  options,
+  renderChild,
+}: ChildrenRendererProps): VNode[] | null {
+  if (children) {
+    return children;
+  }
+
+  return block && options
+    ? renderBlocksList(block.blocks, { ...options, parent: block, renderChild })
+    : null;
+}