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

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -1,9 +1,19 @@
 import { context } from '../../react/setup-fixture';
 import { StepsBlock } from './StepsBlock';
+import type { StepsBlockProps } from './StepsBlock';
 import type { Step } from './StepsBlockContent';
 
-const ITEMS = ['item1', 'item2', 'item3', 'item4', 'item5'];
-const STEPS = [
+const TITLE =
+  'Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит';
+
+const ITEMS: Step['items'] = ['item1', 'item2', 'item3', 'item4', 'item5'];
+const COMMON_PROPS: StepsBlockProps = {
+  className: 'col-span-12',
+  context,
+  title: TITLE,
+};
+
+const STEPS: Step[] = [
   {
     label: 'Заявка на кредит',
     description: 'Оставьте онлайн-заявку на потребительский кредит',
@@ -22,93 +32,71 @@ const STEPS = [
   },
 ];
 
-const STEPS_WITH_LIST: Step[] = [
+const STEPS_WITH_ICONS: Step[] = [
   {
     label: 'В мобильном приложении или интернет-банке',
     description: 'Для всех клиентов Россельхозбанка',
     icon: { icon: 'SignDocsIcon' },
-    items: ITEMS,
   },
   {
     label: 'Через Госуслуги',
     description: 'При наличии данных в Единой биометрической системе',
     icon: { icon: 'ClockIcon' },
-    items: ITEMS,
   },
   {
     label: 'В офисах Россельхозбанка',
     description: 'Откройте вклад',
     icon: { icon: 'ComfortableCompIcon' },
-    items: ITEMS,
   },
 ];
 
+const BUTTONS: Step['button'][] = [
+  { text: 'Войти в интернет-банк' },
+  { text: 'Оформить' },
+  { text: 'Офисы на карте' },
+];
+
+const STEPS_WITH_BUTTONS_AND_ICONS: Step[] = STEPS_WITH_ICONS.map((step, i) => ({
+  ...step,
+  button: BUTTONS[i],
+}));
+
+const STEPS_WITH_LIST_PROPS: StepsBlockProps = {
+  ...COMMON_PROPS,
+  steps: STEPS_WITH_ICONS.map((step) => ({ ...step, description: '', items: ITEMS })),
+};
+
+const STEPS_WITH_LIST_AND_DESC_PROPS: StepsBlockProps = {
+  ...COMMON_PROPS,
+  steps: STEPS_WITH_ICONS.map((step) => ({ ...step, items: ITEMS })),
+};
+
+const STEPS_WITH_BUTTON_PROPS: StepsBlockProps = {
+  ...COMMON_PROPS,
+  steps: STEPS.map((step) => ({
+    ...step,
+    button: { text: 'Оформить' },
+  })),
+  title: TITLE,
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <StepsBlock
-        className="col-span-12"
-        context={context}
-        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-        steps={STEPS.slice(0, 3)}
-        version="secondary"
-      />
+      <StepsBlock {...COMMON_PROPS} steps={STEPS.slice(0, 3)} version="secondary" />
     </div>
   ),
   'steps-img': (
     <div className="container grid grid-cols-12">
-      <StepsBlock
-        className="col-span-12"
-        context={context}
-        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-        showLines={false}
-        steps={[
-          {
-            label: 'В мобильном приложении или интернет-банке',
-            description: 'Для всех клиентов Россельхозбанка',
-            icon: { icon: 'SignDocsIcon' },
-            button: { text: 'Войти в интернет-банк' },
-          },
-          {
-            label: 'Через Госуслуги',
-            description: 'При наличии данных в Единой биометрической системе',
-            icon: { icon: 'ClockIcon' },
-            button: { text: 'Оформить' },
-          },
-          {
-            label: 'В офисах Россельхозбанка',
-            description: 'Откройте вклад',
-            icon: { icon: 'ComfortableCompIcon' },
-            button: { text: 'Офисы на карте' },
-          },
-        ]}
-      />
+      <StepsBlock {...COMMON_PROPS} showLines={false} steps={STEPS_WITH_BUTTONS_AND_ICONS} />
     </div>
   ),
   'steps-with-btn': (
     <div className="container grid grid-cols-12">
       <StepsBlock
-        className="col-span-12"
-        context={context}
-        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+        {...COMMON_PROPS}
         showLines={false}
-        steps={[
-          {
-            label: 'В мобильном приложении или интернет-банке',
-            description: 'Для всех клиентов Россельхозбанка',
-            icon: { icon: 'SignDocsIcon' },
-          },
-          {
-            label: 'Через Госуслуги',
-            description: 'При наличии данных в Единой биометрической системе',
-            icon: { icon: 'ClockIcon' },
-          },
-          {
-            label: 'В офисах Россельхозбанка',
-            description: 'Откройте вклад',
-            icon: { icon: 'ComfortableCompIcon' },
-          },
-        ]}
+        steps={STEPS_WITH_ICONS}
         button={{
           text: 'Отправить заявку',
           href: 'https://www.rshb.ru/',
@@ -121,34 +109,37 @@ export default {
   ),
   '4 steps': (
     <div className="container grid grid-cols-12">
-      <StepsBlock
-        className="col-span-12"
-        context={context}
-        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-        steps={STEPS}
-      />
+      <StepsBlock {...COMMON_PROPS} steps={STEPS} />
     </div>
   ),
-
-  'with list': (
+  'with list and description': (
     <div className="container grid grid-cols-12">
-      <StepsBlock
-        className="col-span-12"
-        context={context}
-        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-        steps={STEPS_WITH_LIST}
-      />
+      <StepsBlock {...STEPS_WITH_LIST_PROPS} version="primary" />
     </div>
   ),
-  'with list secondary': (
+  'with list and description secondary': (
     <div className="container grid grid-cols-12">
-      <StepsBlock
-        className="col-span-12"
-        context={context}
-        version="secondary"
-        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
-        steps={STEPS_WITH_LIST}
-      />
+      <StepsBlock {...STEPS_WITH_LIST_AND_DESC_PROPS} version="secondary" />
+    </div>
+  ),
+  'with list, no description': (
+    <div className="container grid grid-cols-12">
+      <StepsBlock {...STEPS_WITH_LIST_AND_DESC_PROPS} version="primary" />
+    </div>
+  ),
+  'with list, no description secondary': (
+    <div className="container grid grid-cols-12">
+      <StepsBlock {...STEPS_WITH_LIST_PROPS} version="secondary" />
+    </div>
+  ),
+  'with button primary': (
+    <div className="container grid grid-cols-12">
+      <StepsBlock {...STEPS_WITH_BUTTON_PROPS} version="primary" />
+    </div>
+  ),
+  'with button secondary': (
+    <div className="container grid grid-cols-12">
+      <StepsBlock {...STEPS_WITH_BUTTON_PROPS} version="secondary" />
     </div>
   ),
 };

package/src/components/StepsBlock/StepsBlock.tsx

@@ -41,9 +41,9 @@ export const StepsBlock = JSX<StepsBlockProps>(
     return (
       <BlockWrapper
         className={[
-          'box-border font-sans text-primary-text bg-white',
+          'box-border py-[50px] font-sans',
           shortGaps ? 'px-20' : 'px-[70px]',
-          'py-[50px] flex flex-col items-center',
+          'flex flex-col items-center',
           styleMap.background,
           styleMap.title,
           className,
@@ -61,7 +61,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
                 steps.map(renderStepIcon(styleMap)),
               )}
             </div>
-            <div className={`flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`}>
+            <div className={`flex justify-between mt-4 ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`}>
               {steps.map(
                 renderStepContent({
                   styleMap,

package/src/components/StepsBlock/renderItems.tsx

@@ -11,16 +11,13 @@ export const renderItems = ({
   isDotted?: boolean;
   version?: BlockVersion;
   className?: string;
-}) => {
-  const listVersion = version === 'primary' ? 'gray' : version;
-
-  return items ? (
+}) =>
+  items ? (
     <List
-      className={`mt-4 ${className}`}
-      version={listVersion}
+      className={className}
+      version={version}
       items={items}
-      listItemSize="S"
+      listItemSize="M"
       isDotted={isDotted}
     />
   ) : null;
-};

package/src/components/StepsBlock/renderStepContent.tsx

@@ -3,6 +3,7 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { HandlerDecorator, Router } from '../ContentPage/ContentPageContext';
 import type { Step } from './StepsBlockContent';
 import type { StyleType } from './StepsBlockStyleMaps';
+import type { VNode } from '../../model/VNode';
 import { renderItems } from './renderItems';
 import { useLink } from '../../hooks/useLink';
 
@@ -20,39 +21,48 @@ export const renderStepContent =
     router: Router;
     handlerDecorator?: HandlerDecorator;
   }) =>
-  (step: Step, i: number, { length }: { length: number }) => {
+  (step: Step, i: number, { length }: { length: number }): VNode => {
     const { label, description, button, items, isDotted } = step;
 
-    const additionalMarginClass = `${button?.text ? 'mb-8' : ''} ${step?.label ? 'mt-2' : 'mt-4'}`;
-    const widthContainer = length < 5 ? 'w-[276px]' : 'w-[210px]';
+    const contentMarginClass = label && (description || items) ? 'mt-2' : '';
 
     return (
       <div
         key={String(i)}
-        className={`flex flex-col items-center text-center relative
-        whitespace-pre-line overflow-hidden ${widthContainer}`}
+        className={`relative flex flex-col items-center text-center whitespace-pre-line overflow-hidden ${getContainerWidth(
+          length,
+        )}`}
       >
-        {renderStepLabel(label)}
-        {renderStepDescription({
-          description,
-          className: `${styleMap.description} ${additionalMarginClass}`,
-        })}
-        {renderItems({ items, isDotted, version, className: styleMap.description })}
+        <div className={`${button?.text ? 'mb-8' : ''}  text-center`}>
+          {renderStepLabel(label)}
+          <div className={`${contentMarginClass} flex flex-col items-center`}>
+            {renderStepDescription({
+              description,
+              className: styleMap.description,
+            })}
+            {renderItems({
+              items,
+              isDotted,
+              version,
+              className: getItemsClasses({ className: 'text-left', description, styleMap }),
+            })}
+          </div>
+        </div>
         {button?.text && !isMainButton ? (
           <Button
             className="box-border py-3 h-12 w-full max-w-[240px] mt-auto"
             {...useLink({ router, handlerDecorator }, button)}
             version={version}
           >
-            {button.text}
+            {button?.text}
           </Button>
         ) : null}
       </div>
     );
   };
 
-const renderStepLabel = (label?: string) =>
-  label ? <div className="text-x6 m-0 mt-4">{label}</div> : null;
+const renderStepLabel = (label?: string): VNode =>
+  label ? <div className="text-h6">{label}</div> : null;
 
 const renderStepDescription = ({
   description,
@@ -60,4 +70,19 @@ const renderStepDescription = ({
 }: {
   description?: string;
   className?: string;
-}) => (description ? <div className={className}>{description}</div> : null);
+}): VNode => (description ? <div className={className}>{description}</div> : null);
+
+const getItemsClasses = ({
+  className,
+  description,
+  styleMap,
+}: {
+  className?: string;
+  description?: string;
+  styleMap: StyleType;
+}): string =>
+  [description ? styleMap.description : 'text-h6', description ? 'mt-0.5' : '', className].join(
+    ' ',
+  );
+
+const getContainerWidth = (length: number): string => (length < 5 ? 'w-[276px]' : 'w-[210px]');

package/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -1,15 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { EventBus } from '../../EventBus/EventBus';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import { TableInnerButton, TableInnerButtonProps } from '../../ui-kit/InnerTable/InnerTableButton';
-import { TariffsTableInnerEvent } from '../../ui-kit/InnerTable/InnerTableProps';
+import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
-import type { LabelDescriptionCell, TariffsTableCellIndexProps } from './TariffsTableContent';
+import type { LabelDescriptionCell } from './TariffsTableContent';
 
 export type EmbeddableCellDataType =
   | LabelDescriptionCell
@@ -18,6 +16,11 @@ export type EmbeddableCellDataType =
   | ListProps
   | TableInnerButtonProps;
 
+interface TableCellDataProps extends TableInnerButtonProps {
+  isVisible?: boolean;
+  displayTable: (props: TariffsTableInnerContent) => void;
+}
+
 const renderButtonsCellData = ({ buttons }: ButtonContent) =>
   buttons && buttons?.length ? (
     <div>
@@ -52,20 +55,19 @@ const renderListCellData = ({ isDotted, ...rest }: ListProps) => (
   />
 );
 
-const renderTableCellData = JSX((props: TableInnerButtonProps) => {
-  const [showBtn, setShowBtn] = useState(true);
-  console.log(props);
-  const tariffInnerTableSubscriber = (event: TariffsTableInnerEvent) => {
-    const _showBtn = (
-      ['rowIdx', 'cellIdx', 'fieldIdx'] as Array<keyof TariffsTableCellIndexProps>
-    ).every((key) => props[key] === event[key]);
-    setShowBtn(!_showBtn);
-  };
-
-  useEffect(() => EventBus.inst.subscribe('tariffInnerTable', tariffInnerTableSubscriber), []);
-
-  return showBtn ? <TableInnerButton {...props} /> : null;
-});
+const renderTableCellData = JSX<TableCellDataProps>(
+  ({ isVisible, displayTable, dataUrl, pdfUrl, isOpen, context }) => {
+    return isVisible ? (
+      <TableInnerButton
+        isOpen={isOpen}
+        context={context}
+        onClick={() => {
+          displayTable({ dataUrl, pdfUrl });
+        }}
+      />
+    ) : null;
+  },
+);
 
 export const EmbeddableCellData = {
   Buttons: renderButtonsCellData,

package/src/components/TariffsTable/TariffsTable.tsx

@@ -43,12 +43,11 @@ export const TariffsTable = JSX<TariffsTableProps>(
       setActiveCardIndex,
     });
 
-    const rows = (rowData || []).map((row, i, { length }) => (
+    const rows = (rowData || []).map((row, i) => (
       <TariffsTableRow
         context={context}
         key={String(i)}
         row={row}
-        isLastRow={i + 1 === length}
         activeCardIndex={activeCardIndex}
         rowIdx={i}
       />

package/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/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/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} />;
+};