@redneckz/wildless-cms-uni-blocks 0.14.854 → 0.14.855

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

@@ -2,8 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import { type TableVersion } from '../../model/TableVersion';
 
 export interface TableCarouselContainerProps {
-  activeIndex: number;
-  columnWidth: number;
   version?: TableVersion;
 }
 
@@ -13,14 +11,9 @@ const carouselContainerClassesMap: Record<TableVersion, string> = {
 };
 
 export const TableCarouselContainer = JSX<TableCarouselContainerProps>(
-  ({ children, activeIndex, columnWidth, version = 'comparison' }) => (
-    <div className="flex flex-1 overflow-hidden">
-      <div
-        className={carouselContainerClassesMap[version]}
-        style={{ transform: `translateX(-${activeIndex * columnWidth}px)` }}
-      >
-        {children}
-      </div>
+  ({ children, version = 'comparison' }) => (
+    <div className="flex flex-1">
+      <div className={carouselContainerClassesMap[version]}>{children}</div>
     </div>
   ),
 );

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

@@ -29,67 +29,34 @@
         "data": [
           [
             {
-              "tableCellType": "LabelDescription",
               "label": "Ячейка 1-1",
               "description": "Описание для ячейки 2-1"
             },
             {
-              "tableCellType": "RichText",
               "isDotted": true,
-              "listItemSize": "M",
               "__html": "<ul><li>Элемент списка 1</li><li>Элемент списка 2</li><li>Элемент списка 3</li></ul>"
             },
             {
               "label": "Ячейка 1-2",
-              "tableCellType": "LabelDescription",
               "description": "Описание"
             },
             {
-              "tableCellType": "RichText",
               "isDotted": false,
-              "listItemSize": "M",
               "__html": "<ul><li>Элемент списка 1</li><li>Элемент списка 2</li><li>Элемент списка 3</li></ul>"
             }
           ],
           [
             {
-              "tableCellType": "LabelDescription",
               "label": "Ячейка 2-1"
             },
             {
-              "tableCellType": "RichText",
               "isDotted": true,
-              "listItemSize": "M",
               "__html": "<ul><li>Элемент списка 1</li><li>Элемент списка 2</li><li>Элемент списка 3</li></ul>"
             }
           ],
           [
             {
-              "label": "Ячейка 3-1",
-              "tableCellType": "LabelDescription"
-            },
-            {
-              "tableCellType": "Button",
-              "buttons": [
-                {
-                  "icon": {
-                    "icon": "AppleIcon"
-                  },
-                  "rounded": true,
-                  "version": "secondary",
-                  "href": "/",
-                  "target": "_blank"
-                },
-                {
-                  "icon": {
-                    "icon": "PlayMarketIcon"
-                  },
-                  "rounded": true,
-                  "version": "secondary",
-                  "href": "/",
-                  "target": "_blank"
-                }
-              ]
+              "label": "Ячейка 3-1"
             }
           ]
         ]

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

@@ -1,21 +1,19 @@
-import { JSX } from '@redneckz/uni-jsx';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import { COLS_LENGTH_FOR_SCROLL } from './constants';
 import { type TariffsTableContent } from './TariffsTableContent';
 import { TariffsTableRow } from './TariffsTableRow';
 import { TariffsTableWrapper } from './TariffsTableWrapper';
 
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
-export const TariffsTable = JSX<TariffsTableProps>(
+export const TariffsTable = UniBlock<TariffsTableProps>(
   ({
     className = '',
     title,
@@ -30,13 +28,8 @@ export const TariffsTable = JSX<TariffsTableProps>(
       header,
       data: colData.map((col) => col?.[i] || []),
     }));
-    const itemCount = colData.length;
-    const [activeIndex, controls] = useCarouselControls({
-      itemCount: itemCount,
-      visibleItemCount: COLS_LENGTH_FOR_SCROLL,
-    });
     const rows = (rowData || []).map((row, i) => (
-      <TariffsTableRow key={String(i)} row={row} activeIndex={activeIndex} rowIdx={i} {...rest} />
+      <TariffsTableRow key={String(i)} row={row} {...rest} />
     ));
     const [visibleRows, hiddenRows] =
       hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
@@ -45,7 +38,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 
     return (
       <BlockWrapper
-        className={style('relative space-y-6xl @4xl:space-y-xl', className)}
+        className={style('relative space-y-xl', className)}
         defaultPadding="p-6xl"
         {...rest}
       >
@@ -59,14 +52,14 @@ export const TariffsTable = JSX<TariffsTableProps>(
         <div className="space-y-m overflow-hidden">
           {hiddenRowsNum > 0 ? (
             <Foldable>
-              <TariffsTableWrapper controls={controls}>
+              <TariffsTableWrapper>
                 {visibleRows}
                 <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
               </TariffsTableWrapper>
               <DefaultFoldButton className="text-h4" isUnfolded={isUnfolded} onClick={toggle} />
             </Foldable>
           ) : (
-            <TariffsTableWrapper controls={controls}>{rows}</TariffsTableWrapper>
+            <TariffsTableWrapper>{rows}</TariffsTableWrapper>
           )}
         </div>
       </BlockWrapper>

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

@@ -5,9 +5,6 @@
         "data": {
           "items": {
             "items": {
-              "tableCellType": {
-                "ui:widget": "hidden"
-              },
               "image": {
                 "ui:field": "picture"
               },

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

@@ -1,48 +1,50 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
+import type { JSONRefObject } from '../../data/JSONRefObject';
+import { type OnCloseProps } from '../../model/onClose';
+import { TableInnerButton } from '../../ui-kit/InnerTable/InnerTableButton';
+import {
+  type TableFetchData,
+  type TariffsTableInnerContent,
+} from '../../ui-kit/InnerTable/InnerTableProps';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { renderCell } from './renderCell';
 import { type CellDef } from './TariffsTableContent';
-import { RenderCellInner } from './TariffsTableRenderCell';
 
 export interface TariffTableContentProps {
-  openTableInnerIdx?: number;
-  setOpenTableInnerIdx: (props?: number) => void;
-  setTableInner: (props?: TariffsTableInnerContent) => void;
+  onSetTable: (props?: TariffsTableInnerContent) => void;
   tableInner?: TariffsTableInnerContent;
 }
 
-export interface TariffsTableCellProps extends TariffTableContentProps, UniBlockProps {
-  rowIdx: number;
-  cellIdx: number;
-  cells: CellDef[];
+type CellDefProps = CellDef & { tableSource?: JSONRefObject & TableFetchData };
+
+export interface TariffsTableCellProps
+  extends TariffTableContentProps,
+    UniBlockProps,
+    OnCloseProps {
+  cells: CellDefProps[];
 }
 
-export const TariffsTableCell = JSX<TariffsTableCellProps>(
-  ({
-    cells,
-    rowIdx,
-    cellIdx,
-    setTableInner,
-    tableInner,
-    openTableInnerIdx,
-    setOpenTableInnerIdx,
-  }) => (
-    <div className="w-80 flex-grow flex flex-col gap-m @4xl:gap-lg" role="cell">
+export const TariffsTableCell = JSX<TariffsTableCellProps>(({ cells, tableInner, onSetTable }) => {
+  return (
+    <div className="w-80 flex-grow flex flex-col gap-lg" role="cell">
       {cells?.length
-        ? cells.map((_, i) => (
-            <RenderCellInner
-              key={String(i)}
-              cell={_}
-              fieldIdx={i}
-              rowIdx={rowIdx}
-              cellIdx={cellIdx}
-              setTableInner={setTableInner}
-              tableInner={tableInner}
-              openTableInnerIdx={openTableInnerIdx}
-              setOpenTableInnerIdx={setOpenTableInnerIdx}
-            />
-          ))
+        ? cells.map((_, i) => {
+            if (_?.tableSource?.tableData) {
+              return (
+                <TableInnerButton
+                  key={String(i)}
+                  className="w-fit"
+                  isOpen={Boolean(tableInner)}
+                  onClick={() => {
+                    onSetTable(tableInner ? undefined : { tableSource: _.tableSource });
+                  }}
+                />
+              );
+            }
+
+            return renderCell(_, i);
+          })
         : null}
     </div>
-  ),
-);
+  );
+});

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

@@ -4,31 +4,7 @@ import { type ImageContent } from '../../ui-kit/Img/ImgProps';
 import { type TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import { type ButtonsSectionContent } from '../../ui-kit/LinkButton/ButtonsSectionContent';
 import { type RichTextProps } from '../../ui-kit/RichText/RichTextProps';
-import { type UniBlockContent, type UniBlockProps } from '../../UniBlock/UniBlockProps';
-
-/**
- * @hidden
- */
-export interface TariffsTableTile {
-  header: TariffsTableRowHeader;
-  data: CellDef[];
-}
-
-/**
- * @hidden
- */
-export interface TariffsTableProps extends UniBlockProps {
-  tiles?: TariffsTableTile[];
-}
-
-/**
- * @hidden
- */
-export interface TariffsTableCellIndexProps {
-  rowIdx: number;
-  cellIdx: number;
-  fieldIdx: number;
-}
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
 /**
  * @hidden
@@ -43,68 +19,15 @@ export type Data = {
  */
 export type TariffsTableRowHeader = TitleProps & IconProps;
 
-/**
- * @title Изображение
- */
-export type ImageCellDef = ImageContent & {
-  /** @default Img */
-  tableCellType: 'Img';
-};
-
-/**
- * @title Кнопки
- */
-export type ButtonsCellDef = ButtonsSectionContent & {
-  /** @default Buttons */
-  tableCellType: 'Buttons';
-};
-
-/**
- * @title Заголовок и описание
- */
-export type LabelDescriptionCell = LabelProps & DescriptionProps;
-
-/**
- * @title Заголовок и описание
- */
-export type LabelDescriptionCellDef = LabelDescriptionCell & {
-  /** @default LabelDescription */
-  tableCellType: 'LabelDescription';
-};
-
-/**
- * @title Список
- */
-export type RichTextDef = RichTextProps & {
-  /** @default RichText */
-  tableCellType: 'RichText';
-};
-
-/**
- * @title Таблица
- */
-export type InnerTableBlockDef = TariffsTableInnerContent & {
-  /** @default Table */
-  tableCellType: 'Table';
-};
-
-/** @title Не выбрано * */
-export type EmptyCellType = {
-  /** @default "" */
-  tableCellType: '';
-};
-
 /**
  * @title Содержимое ячейки
- * @default { "tableCellType": "" }
  */
-export type CellDef =
-  | EmptyCellType
-  | ImageCellDef
-  | ButtonsCellDef
-  | LabelDescriptionCellDef
-  | RichTextDef
-  | InnerTableBlockDef;
+export type CellDef = LabelProps &
+  DescriptionProps &
+  RichTextProps &
+  ImageContent &
+  TariffsTableInnerContent &
+  ButtonsSectionContent;
 
 /**
  * @title Ячейки

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

@@ -1,11 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { Img } from '../../ui-kit/Img/Img';
 import { type TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
-import { Text } from '../../ui-kit/Text/Text';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
-import { style } from '../../utils/style';
-import { COLUMN_WIDTH, firstCellStyle } from './constants';
+import { renderHeader } from './renderHeader';
 import { TableCarouselContainer } from './TableCarouselContainer';
 import { TariffsTableCell } from './TariffsTableCell';
 import { type Data } from './TariffsTableContent';
@@ -13,63 +10,26 @@ import { TariffsTableRowContainer } from './TariffsTableRowContainer';
 
 export interface TariffsTableRowProps extends UniBlockProps {
   row: Data;
-  activeIndex: number;
-  rowIdx: number;
 }
 
 export const TariffsTableRow = JSX<TariffsTableRowProps>(
-  ({ row: { header, data }, activeIndex, rowIdx, ...rest }) => {
+  ({ row: { header, data = [] }, ...rest }) => {
     const [tableInner, setTableInner] = useState<TariffsTableInnerContent | undefined>(undefined);
-    const handleSetTableInner = useCallback(
-      (_: TariffsTableInnerContent | undefined) => setTableInner(_),
-      [],
-    );
-    const [openTableInnerIdx, setOpenTableInnerIdx] = useState<number | undefined>(undefined);
-    const handleOpenTableInnerIdx = useCallback(
-      (_: number | undefined) => setOpenTableInnerIdx(_),
-      [],
-    );
-    const onHideContentClick = () => setTableInner(undefined);
+    const handleSetTableInner = useCallback((_?: TariffsTableInnerContent) => {
+      setTableInner(_);
+    }, []);
 
     return (
-      <TariffsTableRowContainer
-        onHideContentClick={onHideContentClick}
-        tableInner={tableInner}
-        {...rest}
-      >
-        <div className={style('text-s', firstCellStyle)}>
-          <div className="flex gap-m items-center" role="cell">
-            {header?.icon ? (
-              <Img
-                className="hidden @4xl:block max-w-6 shrink-0"
-                image={header.icon}
-                width="24"
-                height="24"
-              />
-            ) : null}
-            {header?.title ? (
-              <Text size="text-m" font="font-light" color="text-primary-text">
-                {header?.title}
-              </Text>
-            ) : null}
-          </div>
-        </div>
+      <TariffsTableRowContainer tableInner={tableInner} {...rest}>
+        {renderHeader(header)}
         {data?.length ? (
-          <TableCarouselContainer
-            activeIndex={activeIndex}
-            columnWidth={COLUMN_WIDTH}
-            version="tariff"
-          >
+          <TableCarouselContainer version="tariff">
             {data.map((cells, i) => (
               <TariffsTableCell
                 key={String(i)}
                 cells={cells}
-                rowIdx={rowIdx}
-                cellIdx={i}
-                setTableInner={handleSetTableInner}
+                onSetTable={handleSetTableInner}
                 tableInner={tableInner}
-                openTableInnerIdx={openTableInnerIdx}
-                setOpenTableInnerIdx={handleOpenTableInnerIdx}
                 {...rest}
               />
             ))}

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

@@ -3,27 +3,21 @@ import { InnerTable } from '../../ui-kit/InnerTable/InnerTable';
 import { type TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
-import { dividerStyle } from './constants';
 
 export interface TariffsTableRowContainerProps extends UniBlockProps {
   tableInner?: TariffsTableInnerContent;
-  onHideContentClick?: () => void;
+  onClick?: (_?: TariffsTableInnerContent) => void;
 }
 
+export const DIVIDER_STYLE = 'border-main-divider lg:border-b w-full py-s lg:py-xl';
+
 export const TariffsTableRowContainer = JSX<TariffsTableRowContainerProps>(
-  ({ children, tableInner, onHideContentClick }) => (
-    <div className="self-start flex flex-col" role="row">
-      <div
-        className={style(
-          dividerStyle,
-          'flex flex-col @4xl:flex-row gap-y-xs gap-x-5xl pb-lg @4xl:pt-lg',
-        )}
-      >
-        {children}
-      </div>
+  ({ children, tableInner, onClick }) => (
+    <div className={style('self-start flex flex-col gap-xl', DIVIDER_STYLE)} role="row">
+      <div className={style('flex flex-col lg:flex-row gap-x-5xl gap-y-xs')}>{children}</div>
       {tableInner ? (
         <div className="origin-top animate-expansion">
-          <InnerTable {...tableInner} onClick={onHideContentClick} />
+          <InnerTable {...tableInner} onClick={onClick} />
         </div>
       ) : null}
     </div>

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

@@ -1,27 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type CarouselControls } from '../../hooks/useCarouselControls';
-import { renderArrows } from '../../ui-kit/LinkButton/renderArrows';
 
-interface WrapperProps {
-  controls: CarouselControls;
-}
-
-export const TariffsTableWrapper = JSX<WrapperProps>(({ children, controls }) => {
-  const { isScrollAvailable } = controls;
-
-  return (
-    <div role="table" className="overflow-x-auto w-auto grid md:block">
-      <div className="relative space-y-xs">
-        {children}
-        {renderArrows({
-          ...controls,
-          btnClass: ['top-28', 'top-11'],
-          className: 'right-7',
-        })}
-      </div>
-      {isScrollAvailable ? (
-        <div className="absolute top-0 right-0 bottom-0 w-20 bg-opacity-to-white" />
-      ) : null}
-    </div>
-  );
-});
+export const TariffsTableWrapper = JSX(({ children }) => (
+  <div role="table" className="overflow-x-auto w-auto grid relative gap-y-xs">
+    {children}
+  </div>
+));

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

@@ -1,9 +1,8 @@
 /* eslint-disable max-lines */
 import { type Picture } from '../../model/Picture';
+import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import {
-  type InnerTableBlockDef,
-  type LabelDescriptionCellDef,
-  type RichTextDef,
+  type CellDef,
   type TariffsTableColumn,
   type TariffsTableContent,
   type TariffsTableRowHeader,
@@ -23,30 +22,25 @@ const image: Picture = {
   title: 'Платёжные системы',
 };
 
-const LABEL_BLOCK: LabelDescriptionCellDef = {
-  tableCellType: 'LabelDescription',
+const LABEL_BLOCK: CellDef = {
   label: 'Заголовок без описания',
 };
 
-const LABEL_DESCRIPTION_BLOCK: LabelDescriptionCellDef = {
+const LABEL_DESCRIPTION_BLOCK: CellDef = {
   label: 'Ячейка 1-2',
-  tableCellType: 'LabelDescription',
+
   description: 'Описание',
 };
 
-const TABLE_BLOCK: InnerTableBlockDef = {
-  tableCellType: 'Table',
+const TABLE_BLOCK: TariffsTableInnerContent = {
   tableSource: { $ref: '/wcms-resources/tariffs-inner-table-data.json' },
-  pdfUrl: '#',
 };
 
-const DESCRIPTION_BLOCK: LabelDescriptionCellDef = {
-  tableCellType: 'LabelDescription',
+const DESCRIPTION_BLOCK: CellDef = {
   description: 'Описание без заголовка',
 };
 
-const RICHTEXT_BLOCK: RichTextDef = {
-  tableCellType: 'RichText',
+const RICHTEXT_BLOCK: CellDef = {
   __html: `
     <ul>
       <li>Элемент списка 1</li>
@@ -77,29 +71,24 @@ export const columns: TariffsTableColumn[] = [
         {
           label: 'Бесплатно',
           description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
-          tableCellType: 'LabelDescription',
         },
         {
           label: 'Бесплатно',
           description: 'В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб',
-          tableCellType: 'LabelDescription',
         },
       ],
       [LABEL_BLOCK],
       [
         {
           label: 'Платёжные системы картинкой',
-          tableCellType: 'LabelDescription',
         },
         {
           image: image,
-          tableCellType: 'Img',
         },
       ],
       [
-        { label: 'Кнопки-иконки', tableCellType: 'LabelDescription' },
+        { label: 'Кнопки-иконки' },
         {
-          tableCellType: 'Buttons',
           buttons: [
             {
               icon: { icon: 'AppleIcon' },
@@ -121,7 +110,6 @@ export const columns: TariffsTableColumn[] = [
       [
         {
           label: 'Бесплатно',
-          tableCellType: 'LabelDescription',
         },
       ],
       [
@@ -135,7 +123,6 @@ export const columns: TariffsTableColumn[] = [
             },
             alt: 'Деньги',
           },
-          tableCellType: 'Img',
         },
       ],
     ],

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

@@ -0,0 +1,42 @@
+import { Img } from '../../ui-kit/Img/Img';
+import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { type RichTextProps } from '../../ui-kit/RichText/RichTextProps';
+import { Text } from '../../ui-kit/Text/Text';
+import type { CellDef } from './TariffsTableContent';
+
+export const renderCell = (
+  { label, description, __html, isDotted, buttons, image }: CellDef,
+  i: number,
+) => (
+  <div className="grid gap-xs" key={String(i)}>
+    {renderLabel(label)}
+    {renderDescription(description)}
+    {renderRich({ __html, isDotted })}
+    {renderButtonsSection(buttons, {
+      buttonClassName: 'basis-0',
+    })}
+    {image?.src ? <Img image={image} /> : null}
+  </div>
+);
+
+const renderLabel = (label?: string) =>
+  label ? (
+    <div>
+      <Text size="text-h6">{label}</Text>
+    </div>
+  ) : null;
+
+const renderDescription = (description?: string) =>
+  description ? (
+    <div className="text-l font-light">
+      <Text color="text-secondary-text">{description}</Text>
+    </div>
+  ) : null;
+
+const renderRich = ({ __html, isDotted }: RichTextProps) =>
+  __html ? (
+    <div className="flex flex-col justify-between items-start text-h6">
+      <RichText __html={__html} isDotted={isDotted} itemSize="list-m" />
+    </div>
+  ) : null;