@redneckz/wildless-cms-uni-blocks 0.4.2 → 0.4.4

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

@@ -22,31 +22,49 @@
       "title": "Параметр 4"
     }
   ],
-  "columns": [
+  "tariffsColumns": [
     {
       "data": [
         [
           {
-            "label": "Ячейка 1"
+            "tableCellType": "LabelDescription",
+            "label": "Ячейка 1-1",
+            "description": "Описание для ячейки 2-1"
+          },
+          {
+            "tableCellType": "List",
+            "isDotted": true,
+            "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+          },
+          {
+            "label": "Ячейка 1-2",
+            "tableCellType": "LabelDescription",
+            "description": "Описание"
+          },
+          {
+            "tableCellType": "List",
+            "isDotted": false,
+            "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
           }
         ],
         [
           {
-            "label": "Ячейка 2-1",
-            "description": "Описание для ячейки 2-1"
+            "tableCellType": "LabelDescription",
+            "label": "Ячейка 2-1"
           },
           {
-            "label": "Ячейка 2-2",
-            "description": "Описание для ячейки 2-2"
+            "tableCellType": "List",
+            "isDotted": true,
+            "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
           }
         ],
         [
           {
             "label": "Ячейка 3-1",
-            "description": "Описание для ячейки 3-1"
+            "tableCellType": "LabelDescription"
           },
           {
-            "label": "Ячейка 3-2",
+            "tableCellType": "Button",
             "buttons": [
               {
                 "icon": {
@@ -55,8 +73,7 @@
                 "rounded": true,
                 "version": "secondary",
                 "href": "/",
-                "target": "_blank",
-                "text": ""
+                "target": "_blank"
               },
               {
                 "icon": {
@@ -65,29 +82,13 @@
                 "rounded": true,
                 "version": "secondary",
                 "href": "/",
-                "target": "_blank",
-                "text": ""
+                "target": "_blank"
               }
             ]
           }
-        ],
-        [
-          {
-            "image": {
-              "format": "webp",
-              "size": {
-                "width": 288,
-                "height": 56
-              }
-            }
-          },
-          {
-            "list": {
-              "items": ["item 1", "item 2", "item 3"]
-            }
-          }
         ]
       ]
     }
-  ]
+  ],
+  "hiddenRowsNum": 2
 }

package/mobile/src/components/TariffsTable/TariffsTable.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type {
-  TariffsTableCellData,
+  CellDef,
   TariffsTableColumn,
   TariffsTableContent,
   TariffsTableRowHeader,
@@ -13,7 +13,15 @@ import { TariffsTableVertical } from './TariffsTableVertical';
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
 export const TariffsTable = JSX<TariffsTableProps>(
-  ({ className, context, title, description, columns, rowHeaders, orientation = 'vertical' }) => {
+  ({
+    className,
+    context,
+    title,
+    description,
+    tariffsColumns: columns,
+    rowHeaders,
+    orientation = 'vertical',
+  }) => {
     const colData = getColData(columns);
     const tiles = getTiles(rowHeaders, colData);
     const headingMargin = description ? 'mb-2' : 'mb-5';
@@ -34,7 +42,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
 function renderOrientationTable(orientation, tiles, context) {
   return orientation === 'vertical' ? (
-    <TariffsTableVertical tiles={tiles} />
+    <TariffsTableVertical context={context} tiles={tiles} />
   ) : (
     <TariffsTableHorizontal context={context} tiles={tiles} />
   );
@@ -43,10 +51,7 @@ function renderOrientationTable(orientation, tiles, context) {
 const getColData = (columns: TariffsTableColumn[] | undefined) =>
   columns?.[0].data ? columns[0].data : [];
 
-const getTiles = (
-  rowHeaders: TariffsTableRowHeader[] | undefined,
-  colData: TariffsTableCellData[][],
-) =>
+const getTiles = (rowHeaders: TariffsTableRowHeader[] | undefined, colData: CellDef[][]) =>
   rowHeaders?.map((header, i) => ({
     header,
     data: colData?.[i] || [{}],

package/mobile/src/components/TariffsTable/TariffsTableCell.tsx

@@ -1,64 +1,59 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Img } from '../../ui-kit/Img/Img';
-import { List } from '../../ui-kit/List/List';
-import type { TariffsTableCellData, TariffsTableList } from './TariffsTableContent';
-import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
+import type { UniBlockProps } from '../../types';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { EmbeddableCellData } from './EmbeddableCellData';
+import type { CellDef, TariffsTableCellIndexProps } from './TariffsTableContent';
 
-export interface TariffsTableCellProps {
-  cell: TariffsTableCellData[];
+export interface TariffsTableCellProps extends UniBlockProps {
+  rowIdx: number;
+  cellIdx: number;
+  cells: CellDef[];
   isLastRow: boolean;
 }
 
-export const TariffsTableCell = JSX<TariffsTableCellProps>(({ cell, isLastRow }) => {
-  const cellWrapperClasses = `first:pl-0 pl-10 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0 ${
-    isLastRow ? 'border-t-0 rounded-b-md' : ''
-  }`;
+export const TariffsTableCell = JSX<TariffsTableCellProps>(
+  ({ context, cells, isLastRow, rowIdx, cellIdx }) => {
+    const cellWrapperClasses = `first:pl-0 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0 ${
+      isLastRow ? 'border-t-0 rounded-b-md' : ''
+    }`;
 
-  return (
-    <div className={cellWrapperClasses} role="cell">
-      <div>{cell.map(renderCellInner)}</div>
-    </div>
-  );
-});
-
-const renderCellInner = (
-  { label, description, list, image, buttons }: TariffsTableCellData,
-  i: number,
-) => (
-  <div key={String(i)} className="first:pt-5 last:pb-5">
-    {i > 0 && (
-      <div className="border-main-divider border border-solid border-t-0 border-x-0 my-4" />
-    )}
-    {label ? <div className="text-xl m-0">{label}</div> : null}
-    {description ? <div className="text-s text-secondary-text">{description}</div> : null}
-    {list?.items?.length ? renderList(list) : null}
-    {image ? <Img image={image} /> : null}
-    {buttons?.length ? renderButtons(buttons) : null}
-  </div>
+    return (
+      <div className={cellWrapperClasses} role="cell">
+        {cells.map(renderCellInner(rowIdx, context, cellIdx))}
+      </div>
+    );
+  },
 );
 
-const renderList = (list: TariffsTableList) => (
-  <List
-    className="flex flex-col justify-between items-start text-s"
-    version="gray"
-    items={list.items}
-    isDotted={list.isDotted ?? true}
-  />
-);
+const renderCellInner =
+  (rowIdx: number, context: ContentPageContext, cellIdx: number) => (cell: CellDef, i: number) => {
+    return (
+      <div
+        key={String(i)}
+        className={cell?.tableCellType === 'Table' ? 'mx-0.5' : `first:pt-5 last:pb-5 pl-10`}
+      >
+        {i > 0 ? <div className="h-5" /> : null}
+        {renderCell(cell, context, { rowIdx, cellIdx, fieldIdx: i })}
+      </div>
+    );
+  };
 
-const renderButtons = (buttons: ButtonWithIconProps[]) => (
-  <div>
-    {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
-      <Button
-        className={`${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`}
-        key={String(idx)}
-        ariaLabel={getButtonAriaLabel(icon)}
-        rounded={rounded}
-        appendLeft={icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null}
-        {...buttonProps}
-      />
-    ))}
-  </div>
-);
+const renderCell = (
+  cell: CellDef,
+  context: ContentPageContext,
+  indexes: TariffsTableCellIndexProps,
+) => {
+  if (!cell) {
+    return null;
+  }
+
+  const { tableCellType: type, ...rest } = cell;
+
+  if (!type || !(type in EmbeddableCellData)) {
+    return null;
+  }
+
+  const EmbeddableCellInner = EmbeddableCellData[type];
+
+  return <EmbeddableCellInner context={context} {...rest} {...indexes} />;
+};

package/mobile/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,67 +1,131 @@
+import type { EmptyOption } from '../../model/EmptyOptionType';
+import type { DescriptionProps } from '../../model/HeadlineType';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { HeadingProps } from '../../ui-kit/Heading/HeadingProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { CellData } from '../ComparisonTable/ComparisonTableContent';
-import type { HeadlineCommonProps, TitleProp } from '../../model/HeadlineType';
+import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
+import type { ListProps } from '../../ui-kit/List/ListProps';
+
+/**
+ * @hidden
+ */
+export interface TariffsTableCellIndexProps {
+  rowIdx: number;
+  cellIdx: number;
+  fieldIdx: number;
+}
+
+/**
+ * @title Параметр
+ */
+export type TariffsTableRowHeader = HeadingProps & {
+  /**
+   * @default { "format": "webp", "size": { "width": 24, "height": 24 } }
+   */
+  icon?: Picture;
+};
 
 /**
  * @title Ряд
  */
-export type TariffsTableRowData = {
+export type Data = {
   header: TariffsTableRowHeader;
-  data: TariffsTableCellData[][];
+  data: CellDef[][];
 };
 
 /**
- * @title Колонка
+ * @title Изображение
+ * @default { "image": { "format": "webp", "size": { "width": 24, "height": 24 } } }
  */
-export interface TariffsTableColumn {
-  /** @title Данные */
-  data?: TariffsTableCellData[][];
-}
+export type ImageCellDef = ImageContent & {
+  /**
+   * @default Img
+   */
+  tableCellType: 'Img';
+};
 
 /**
- * @title Список
+ * @title Кнопки
  */
-export type TariffsTableList = ListContent & {
-  /** @title Маркеры */
-  isDotted?: boolean;
+export type ButtonsCellDef = ButtonContent & {
+  /**
+   * @default Buttons
+   */
+  tableCellType: 'Buttons';
 };
 
 /**
- * @title Ячейка
+ * @title Заголовок и описание
  */
-export type TariffsTableCellData = CellData &
-  ImageContent &
-  ButtonContent & {
-    list?: TariffsTableList;
-  };
+export interface LabelDescriptionCell {
+  /** @title Заголовок */
+  label?: string;
+  /** @title Описание */
+  description?: string;
+}
 
 /**
- * @title Параметр
+ * @title Заголовок и описание
  */
-export type TariffsTableRowHeader = TitleProp & {
-  icon?: Picture;
+export type LabelDescriptionCellDef = LabelDescriptionCell & {
+  /**
+   * @default LabelDescription
+   */
+  tableCellType: 'LabelDescription';
 };
 
 /**
- * @title Таблица тарифов
+ * @title Список
  */
-export type TariffsTableContent = HeadlineCommonProps & {
-  /** @title Колонки */
-  columns?: TariffsTableColumn[];
-  /** @title Параметры */
-  rowHeaders?: TariffsTableRowHeader[];
-  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
-  orientation?: ListOrientation;
-  /** @title Скрывать строк */
-  hiddenRowsNum?: number;
+export type ListBlockDef = ListProps & {
+  /**
+   * @default List
+   */
+  tableCellType: 'List';
 };
 
-/** @hidden */
-export type TariffsTableTileCellProps = {
-  header: TariffsTableRowHeader;
-  data: TariffsTableCellData[];
+/**
+ * @title Таблица
+ */
+export type InnerTableBlockDef = TariffsTableInnerContent & {
+  /**
+   * @default Table
+   */
+  tableCellType: 'Table';
 };
+
+/**
+ * @title Содержимое ячейки
+ */
+export type CellDef =
+  | EmptyOption
+  | ImageCellDef
+  | ButtonsCellDef
+  | LabelDescriptionCellDef
+  | ListBlockDef
+  | InnerTableBlockDef;
+
+/**
+ * @title Колонка
+ */
+export interface TariffsTableColumn {
+  /** @title Данные */
+  data?: CellDef[][];
+}
+
+/**
+ * @title Таблица тарифов
+ */
+export type TariffsTableContent = HeadingProps &
+  DescriptionProps & {
+    /** @title Колонки */
+    tariffsColumns?: TariffsTableColumn[];
+    /** @title Параметры */
+    rowHeaders?: TariffsTableRowHeader[];
+    /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
+    orientation?: ListOrientation;
+    /** @title Скрывать строк */
+    hiddenRowsNum?: number;
+  };

package/mobile/src/components/TariffsTable/TariffsTableHorizontal.tsx

@@ -1,13 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
-import { TariffsTableTileCell } from './TariffsTableTileCell';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
-import type { TariffsTableTileCellProps } from './TariffsTableContent';
-
-export const TariffsTableHorizontal = JSX<{
-  context: ContentPageContext;
+import { TariffsTableTileCell, TariffsTableTileCellProps } from './TariffsTableTileCell';
+export interface TariffsTableHorizontalProps extends UniBlockProps {
   tiles: TariffsTableTileCellProps[];
-}>(({ tiles, context }) => (
+}
+
+export const TariffsTableHorizontal = JSX<TariffsTableHorizontalProps>(({ tiles, context }) => (
   <SwipeListControl context={context}>
     {tiles.map((tile, i) => (
       <TariffsTableTileCell key={String(i)} {...tile} />

package/mobile/src/components/TariffsTable/TariffsTableRow.tsx

@@ -1,28 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { UniBlockProps } from '../../types';
 import { Img } from '../../ui-kit/Img/Img';
 import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
-import { TableRowContainer } from '../ComparisonTable/TableRowContainer';
 import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
 import { TariffsTableCell } from './TariffsTableCell';
-import type { TariffsTableRowData } from './TariffsTableContent';
+import type { Data } from './TariffsTableContent';
+import { TariffsTableRowContainer } from './TariffsTableRowContainer';
 
-export interface TariffsTableRowProps {
-  className?: string;
-  row: TariffsTableRowData;
+export interface TariffsTableRowProps extends UniBlockProps {
+  row: Data;
   activeCardIndex: number;
   isLastRow: boolean;
+  rowIdx: number;
 }
 
 export const TariffsTableRow = JSX<TariffsTableRowProps>(
-  ({ row: { header, data }, activeCardIndex, isLastRow }) => {
+  ({ row: { header, data }, activeCardIndex, isLastRow, context, rowIdx }) => {
     return (
-      <TableRowContainer>
+      <TariffsTableRowContainer context={context} rowIdx={rowIdx}>
         <div
           className={`text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${
             !isLastRow ? 'border-solid' : ''
           }`}
         >
-          <div className="flex items-center text-primary-text">
+          <div className="flex items-center text-primary-text" role="cell">
             {header?.icon ? (
               <Img
                 className="mr-[14px] max-w-6 max-h-6"
@@ -41,12 +42,19 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
             columnWidth={COLUMN_WIDTH}
             version="tariff"
           >
-            {data.map((cell, i) => (
-              <TariffsTableCell key={String(i)} cell={cell} isLastRow={isLastRow} />
+            {data.map((cells, i) => (
+              <TariffsTableCell
+                key={String(i)}
+                cells={cells}
+                isLastRow={isLastRow}
+                rowIdx={rowIdx}
+                cellIdx={i}
+                context={context}
+              />
             ))}
           </TableCarouselContainer>
         ) : null}
-      </TableRowContainer>
+      </TariffsTableRowContainer>
     );
   },
 );

package/mobile/src/components/TariffsTable/TariffsTableRowContainer.tsx

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { EventBus } from '../../EventBus/EventBus';
+import type { VNode } from '../../model/VNode';
+import type { UniBlockProps } from '../../types';
+import { InnerTable } from '../../ui-kit/InnerTable/InnerTable';
+
+export interface TariffsTableRowContainerProps extends UniBlockProps {
+  children?: VNode;
+  rowIdx: number;
+}
+
+export const TariffsTableRowContainer = JSX<TariffsTableRowContainerProps>(
+  ({ context, children, rowIdx }) => {
+    const [dataUrl, setDataUrl] = useState<string | undefined>(undefined);
+
+    useEffect(
+      () =>
+        EventBus.inst.subscribe('tariffInnerTable', (event) => {
+          setDataUrl(rowIdx === event.rowIdx ? event.dataUrl : undefined);
+        }),
+      [rowIdx],
+    );
+
+    return (
+      <div className="self-start flex flex-col" role="row">
+        <div className="flex">{children}</div>
+        {dataUrl ? (
+          <div className="origin-top animate-expansion">
+            <InnerTable context={context} dataUrl={dataUrl} />
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);

package/mobile/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -1,62 +1,44 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Img } from '../../ui-kit/Img/Img';
-import { List } from '../../ui-kit/List/List';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { EmbeddableCellData } from './EmbeddableCellData';
 import { TableTileHeader } from './TableTileHeader';
-import type {
-  TariffsTableCellData,
-  TariffsTableList,
-  TariffsTableTileCellProps,
-} from './TariffsTableContent';
-import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
-
-export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ header, data }) => {
+import type { CellDef, TariffsTableRowHeader } from './TariffsTableContent';
+
+export interface TariffsTableTileCellProps {
+  header: TariffsTableRowHeader;
+  data: CellDef[];
+  context: ContentPageContext;
+}
+
+export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ context, header, data }) => {
   return (
     <div className="rounded-md border-main-stroke h-full box-border border p-4">
       <TableTileHeader {...header} />
-      {data?.length ? data.map(renderCellInner) : null}
+      {data?.length ? data.map(renderCellInner(context)) : null}
     </div>
   );
 });
 
-const renderCellInner = (
-  { label, description, list, image, buttons }: TariffsTableCellData,
-  i: number,
-) => (
-  <div key={String(i)}>
-    {i > 0 && (
-      <div className="border-main-divider border border-solid border-t-0 border-x-0 my-2" />
-    )}
-    {label ? <div className="text-s m-0">{label}</div> : null}
-    {description ? <div className="text-s text-secondary-text mt-[3px]">{description}</div> : null}
-    {list?.items?.length ? renderList(list) : null}
-    {image ? <Img image={{ ...image, className: 'm-0' }} /> : null}
-    {buttons?.length ? renderButtons(buttons) : null}
-  </div>
-);
-
-const renderList = (list: TariffsTableList) => (
-  <List
-    className="flex flex-col justify-between items-start text-s"
-    version="gray"
-    items={list.items}
-    isDotted={list.isDotted ?? true}
-  />
-);
-
-const renderButtons = (buttons: ButtonWithIconProps[]) => (
-  <div>
-    {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
-      <Button
-        className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
-        key={String(idx)}
-        ariaLabel={getButtonAriaLabel(icon)}
-        rounded={rounded}
-        appendLeft={icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null}
-        {...buttonProps}
-        aria-label={icon}
-      />
-    ))}
-  </div>
-);
+const renderCellInner = (context: ContentPageContext) => (cell: CellDef, i: number) =>
+  (
+    <div key={String(i)}>
+      {i > 0 ? <div className="h-5" /> : null}
+      {renderCell(cell, context)}
+    </div>
+  );
+
+const renderCell = (cell: CellDef, context: ContentPageContext) => {
+  if (!cell) {
+    return null;
+  }
+
+  const { tableCellType: type, ...rest } = cell;
+
+  if (!type || !(type in EmbeddableCellData)) {
+    return null;
+  }
+
+  const EmbeddableCellInner = EmbeddableCellData[type];
+
+  return <EmbeddableCellInner context={context} {...rest} />;
+};

package/mobile/src/components/TariffsTable/TariffsTableVertical.tsx

@@ -1,8 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { TariffsTableTileCell } from './TariffsTableTileCell';
-import type { TariffsTableTileCellProps } from './TariffsTableContent';
+import type { UniBlockProps } from '../../types';
+import { TariffsTableTileCell, TariffsTableTileCellProps } from './TariffsTableTileCell';
 
-export const TariffsTableVertical = JSX<{ tiles: TariffsTableTileCellProps[] }>(({ tiles }) => (
+export interface TariffsTableVerticalProps extends UniBlockProps {
+  tiles: TariffsTableTileCellProps[];
+}
+
+export const TariffsTableVertical = JSX<TariffsTableVerticalProps>(({ tiles }) => (
   <div className="flex flex-col gap-3.5">
     {tiles.map((tile, i) => (
       <TariffsTableTileCell key={String(i)} {...tile} />