@redneckz/wildless-cms-uni-blocks 0.6.18 → 0.6.19

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

@@ -1,59 +1,53 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { ContentPageContext } from '../ContentPage/ContentPageContext';
-import { EmbeddableCellData } from './EmbeddableCellData';
-import type { CellDef, TariffsTableCellIndexProps } from './TariffsTableContent';
+import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 
-export interface TariffsTableCellProps extends UniBlockProps {
+import type { CellDef } from './TariffsTableContent';
+import { renderCellInner } from './TariffsTableRenderCell';
+
+export interface TariffTableContentProps {
+  openTableInnerIdx?: number;
+  setOpenTableInnerIdx: (props?: number) => void;
+  setTableInner: (props?: TariffsTableInnerContent) => void;
+  tableInner?: TariffsTableInnerContent;
+}
+
+export interface TariffsTableCellProps extends TariffTableContentProps, UniBlockProps {
   rowIdx: number;
   cellIdx: number;
   cells: CellDef[];
-  isLastRow: boolean;
 }
 
 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">
-        {cells.map(renderCellInner(rowIdx, context, cellIdx))}
-      </div>
-    );
-  },
-);
-
-const renderCellInner =
-  (rowIdx: number, context: ContentPageContext, cellIdx: number) => (cell: CellDef, i: number) => {
+  ({
+    context,
+    cells,
+    rowIdx,
+    cellIdx,
+    setTableInner,
+    tableInner,
+    openTableInnerIdx,
+    setOpenTableInnerIdx,
+  }) => {
     return (
       <div
-        key={String(i)}
-        className={cell?.tableCellType === 'Table' ? 'ml-10' : `first:pt-5 last:pb-5 pl-10`}
+        className="first:pl-0 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0"
+        role="cell"
       >
-        {i > 0 ? <div className="h-5" /> : null}
-        {renderCell(cell, context, { rowIdx, cellIdx, fieldIdx: i })}
+        {cells?.length
+          ? cells.map(
+              renderCellInner({
+                rowIdx,
+                context,
+                cellIdx,
+                setTableInner,
+                tableInner,
+                openTableInnerIdx,
+                setOpenTableInnerIdx,
+              }),
+            )
+          : null}
       </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,10 +1,9 @@
 import type { EmptyOption } from '../../model/EmptyOptionType';
-import type { DescriptionProps, LabelProps } from '../../model/HeadlineType';
+import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 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 { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import type { ListProps } from '../../ui-kit/List/ListProps';
 
@@ -43,7 +42,7 @@ export type Data = {
 /**
  * @title Параметр
  */
-export type TariffsTableRowHeader = HeadingProps & {
+export type TariffsTableRowHeader = TitleProps & {
   /** @default { "format": "webp", "size": { "width": 24, "height": 24 } } */
   icon?: Picture;
 };
@@ -117,7 +116,7 @@ export interface TariffsTableColumn {
 /**
  * @title Таблица тарифов
  */
-export type TariffsTableContent = HeadingProps &
+export type TariffsTableContent = TitleProps &
   DescriptionProps & {
     /** @title Колонки */
     tariffsColumns?: TariffsTableColumn[];

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

@@ -0,0 +1,88 @@
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { EmbeddableCellData } from './EmbeddableCellData';
+import type { TariffTableContentProps } from './TariffsTableCell';
+import type { CellDef } from './TariffsTableContent';
+
+interface TariffTableCellInnerProps extends TariffTableContentProps {
+  cellIdx: number;
+  context: ContentPageContext;
+  rowIdx: number;
+}
+
+interface RenderCellProps {
+  cell: CellDef;
+  cellProps: CellProps;
+}
+
+interface CellProps {
+  isVisible?: boolean;
+  cellIdx: number;
+  context: ContentPageContext;
+  rowIdx: number;
+  fieldIdx: number;
+  displayTable: (props: TariffsTableInnerContent) => void;
+}
+
+export const renderCellInner =
+  ({
+    rowIdx,
+    context,
+    cellIdx,
+    setTableInner,
+    tableInner,
+    openTableInnerIdx,
+    setOpenTableInnerIdx,
+  }: TariffTableCellInnerProps) =>
+  (cell: CellDef, i: number) => {
+    const [isVisible, setVisibility] = useState(true);
+
+    useEffect(() => {
+      if (cellIdx !== openTableInnerIdx || !tableInner) {
+        setVisibility(true);
+      }
+    }, [tableInner, openTableInnerIdx]);
+
+    const displayTable = (props: TariffsTableInnerContent) => {
+      setVisibility(false);
+      setOpenTableInnerIdx(cellIdx);
+      setTableInner(props);
+    };
+
+    return (
+      <div
+        key={String(i)}
+        className={cell?.tableCellType === 'Table' ? 'ml-10' : `first:pt-5 last:pb-5 pl-10`}
+      >
+        {i > 0 ? <div className="h-5" /> : null}
+        {renderCell({
+          cell,
+          cellProps: {
+            rowIdx,
+            cellIdx,
+            fieldIdx: i,
+            displayTable,
+            isVisible,
+            context,
+          },
+        })}
+      </div>
+    );
+  };
+
+const renderCell = ({ cell, cellProps }: RenderCellProps) => {
+  if (!cell) {
+    return null;
+  }
+
+  const { tableCellType: type, ...rest } = cell;
+
+  if (!type || !(type in EmbeddableCellData)) {
+    return null;
+  }
+
+  const EmbeddableCellInner = EmbeddableCellData[type];
+
+  return <EmbeddableCellInner {...cellProps} {...rest} />;
+};

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

@@ -1,6 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Img } from '../../ui-kit/Img/Img';
+import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
 import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
 import { TariffsTableCell } from './TariffsTableCell';
@@ -10,19 +12,23 @@ import { TariffsTableRowContainer } from './TariffsTableRowContainer';
 export interface TariffsTableRowProps extends UniBlockProps {
   row: Data;
   activeCardIndex: number;
-  isLastRow: boolean;
   rowIdx: number;
 }
 
 export const TariffsTableRow = JSX<TariffsTableRowProps>(
-  ({ row: { header, data }, activeCardIndex, isLastRow, context, rowIdx }) => {
+  ({ row: { header, data }, activeCardIndex, context, rowIdx }) => {
+    const [tableInner, setTableInner] = useState<TariffsTableInnerContent | undefined>(undefined);
+    const [openTableInnerIdx, setOpenTableInnerIdx] = useState<number | undefined>(undefined);
+
+    const onHideContentClick = () => setTableInner(undefined);
+
     return (
-      <TariffsTableRowContainer context={context} rowIdx={rowIdx}>
-        <div
-          className={`text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${
-            !isLastRow ? 'border-solid' : ''
-          }`}
-        >
+      <TariffsTableRowContainer
+        context={context}
+        onHideContentClick={onHideContentClick}
+        tableInner={tableInner}
+      >
+        <div className={`text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`}>
           <div className="flex items-center text-primary-text" role="cell">
             {header?.icon ? (
               <Img
@@ -46,10 +52,13 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
               <TariffsTableCell
                 key={String(i)}
                 cells={cells}
-                isLastRow={isLastRow}
                 rowIdx={rowIdx}
                 cellIdx={i}
                 context={context}
+                setTableInner={setTableInner}
+                tableInner={tableInner}
+                openTableInnerIdx={openTableInnerIdx}
+                setOpenTableInnerIdx={setOpenTableInnerIdx}
               />
             ))}
           </TableCarouselContainer>

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

@@ -1,6 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { EventBus } from '../../EventBus/EventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { VNode } from '../../model/VNode';
 import { InnerTable } from '../../ui-kit/InnerTable/InnerTable';
@@ -8,31 +6,18 @@ import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTabl
 
 export interface TariffsTableRowContainerProps extends UniBlockProps {
   children?: VNode;
-  rowIdx: number;
+  onHideContentClick: () => void;
+  tableInner?: TariffsTableInnerContent;
 }
 
 export const TariffsTableRowContainer = JSX<TariffsTableRowContainerProps>(
-  ({ context, children, rowIdx }) => {
-    const [tableInnerData, setTableInnerData] = useState<TariffsTableInnerContent | undefined>(
-      undefined,
-    );
-
-    useEffect(
-      () =>
-        EventBus.inst.subscribe('tariffInnerTable', (event) => {
-          setTableInnerData(
-            rowIdx === event.rowIdx ? { dataUrl: event.dataUrl, pdfUrl: event.pdfUrl } : undefined,
-          );
-        }),
-      [rowIdx],
-    );
-
+  ({ context, children, tableInner, onHideContentClick }) => {
     return (
       <div className="self-start flex flex-col" role="row">
         <div className="flex">{children}</div>
-        {tableInnerData ? (
+        {tableInner ? (
           <div className="origin-top animate-expansion">
-            <InnerTable context={context} {...tableInnerData} />
+            <InnerTable context={context} {...tableInner} onClick={onHideContentClick} />
           </div>
         ) : null}
       </div>

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

@@ -39,5 +39,7 @@ const renderCell = (cell: CellDef, context: ContentPageContext) => {
 
   const EmbeddableCellInner = EmbeddableCellData[type];
 
-  return <EmbeddableCellInner context={context} {...rest} />;
+  return (
+    <EmbeddableCellInner context={context} displayTable={() => null} {...rest} isVisible={true} />
+  );
 };

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

@@ -7,9 +7,13 @@ import { TableInnerButton } from './InnerTableButton';
 import { InnerTableHeader } from './InnerTableHeader';
 import type { TableFetchData, TariffsTableInnerContent } from './InnerTableProps';
 
-export interface InnerTableProps extends TariffsTableInnerContent, UniBlockProps {}
+export interface InnerTableProps extends TariffsTableInnerContent, UniBlockProps {
+  onClick: () => void;
+}
 
-export const InnerTable = JSX<InnerTableProps>(({ context, dataUrl, pdfUrl }) => {
+const EMPTY_DATA = 'Данных нет';
+
+export const InnerTable = JSX<InnerTableProps>(({ context, dataUrl, pdfUrl, onClick }) => {
   const { tableData }: TableFetchData = useTariffsInnerTableData(dataUrl);
 
   const [activeTabIndex, setActiveTabIndex] = useState(0);
@@ -26,7 +30,12 @@ export const InnerTable = JSX<InnerTableProps>(({ context, dataUrl, pdfUrl }) =>
         linkToPDF={pdfUrl} //TODO: need link to service
       />
       <InnerTableBody context={context} activeTabIndex={activeTabIndex} items={items} />
-      <TableInnerButton context={context} isOpen />
+      <TableInnerButton context={context} onClick={onClick} isOpen />
+    </div>
+  ) : (
+    <div className="my-5 text-h6 text-center">
+      <p>{EMPTY_DATA}</p>
+      <TableInnerButton context={context} onClick={onClick} isOpen />
     </div>
-  ) : null;
+  );
 });

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

@@ -1,36 +1,30 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { EventBus } from '../../EventBus/EventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 import type { TariffsTableInnerEvent } from './InnerTableProps';
 
 export interface TableInnerButtonProps extends TariffsTableInnerEvent, UniBlockProps {
+  onClick?: () => void;
   isOpen?: boolean;
 }
 
-export const TableInnerButton = JSX<TableInnerButtonProps>(
-  ({ isOpen, dataUrl, pdfUrl, rowIdx, cellIdx, fieldIdx }) => {
-    const handleClick = () => {
-      EventBus.inst.fire('tariffInnerTable', { dataUrl, pdfUrl, rowIdx, cellIdx, fieldIdx });
-    };
-
-    return (
-      <Button
-        version="primary"
-        onClick={handleClick}
-        className="w-full flex items-center justify-center rounded-none py-5"
-      >
-        <div className="text-h4">{isOpen ? 'Скрыть' : 'Показать ставки по вкладу'}</div>
-        <Icon
-          name={isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon'}
-          className="ml-3"
-          iconVersion="white"
-          width="20"
-          height="20"
-          asSVG
-        />
-      </Button>
-    );
-  },
-);
+export const TableInnerButton = JSX<TableInnerButtonProps>(({ isOpen, onClick }) => {
+  return (
+    <Button
+      version="primary"
+      onClick={onClick}
+      className="w-full flex items-center justify-center rounded-none py-5"
+    >
+      <div className="text-h4">{isOpen ? 'Скрыть' : 'Показать ставки по вкладу'}</div>
+      <Icon
+        name={isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+        className="ml-3"
+        iconVersion="white"
+        width="20"
+        height="20"
+        asSVG
+      />
+    </Button>
+  );
+});

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

@@ -33,7 +33,7 @@ export const InputRange = JSX<InputRangeProps>(
     return (
       <div className={className}>
         <label className="block relative">
-          {title ? <span className="text-m-light">{title}</span> : null}
+          {title ? <span className="text-m-light text-primary-text">{title}</span> : null}
           <input
             className={`m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
             outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus ${DISABLED_INPUT_CLASSES}`}

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

@@ -3,7 +3,7 @@ import { RadioProps } from './RadioProps';
 
 export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, className }) => (
   <div className={className}>
-    <label className="flex items-center relative cursor-pointer">
+    <label className="font-sans flex items-center relative cursor-pointer">
       <input
         className="appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-checkbox-hover
         checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text
@@ -14,7 +14,7 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
         checked={checked}
         onChange={onChange}
       />
-      {text ? <span className="font-sans ml-3 cursor-pointer">{text}</span> : null}
+      {text ? <span className="text-primary-text ml-3 cursor-pointer">{text}</span> : null}
     </label>
   </div>
 ));

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

@@ -41,7 +41,7 @@ export const Select = JSX<SelectProps>(
 
     return (
       <div className={`${className}`} ref={wrapperRef}>
-        {label ? <span className="mb-2 flex">{label}</span> : null}
+        {label ? <span className="mb-2 flex text-primary-text">{label}</span> : null}
         <div className={`relative ${isOpen ? 'z-20' : 'z-10'}`}>
           <div
             className={`text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer

package/package.json

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

package/src/components/Bonus/Bonus.tsx

@@ -32,7 +32,7 @@ export const Bonus = JSX<BonusProps>((props) => {
                 return (
                   <div
                     key={String(i)}
-                    className="flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0"
+                    className="flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0"
                   >
                     <div className="flex justify-between w-full">
                       <div className="flex flex-col justify-between mr-4">

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -22,7 +22,11 @@ export function renderBackwardButton(
         href={href}
         target={target}
       >
-        <Img className="w-4 h-4" image={{ ...backwardIcon, iconVersion }} asSVG />
+        <Img
+          className="w-4 h-4"
+          image={{ ...backwardIcon, iconVersion: backwardIcon.iconVersion || iconVersion }}
+          asSVG
+        />
       </Button>
       {text ? <span className="text-m">{text}</span> : null}
     </div>

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -47,7 +47,12 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
       <BlockWrapper context={context} className={className} {...rest}>
         <div className="font-sans bg-white px-8 py-12">
           {title ? (
-            <Heading title={title} headingType="h3" as="h2" className="mb-2.5 text-center" />
+            <Heading
+              title={title}
+              headingType="h3"
+              as="h2"
+              className="text-primary-text mb-2.5 text-center"
+            />
           ) : null}
           <SafeDepositRentalForm
             regions={regions}