@redneckz/wildless-cms-uni-blocks 0.3.9 → 0.3.10

package/mobile/src/components/ComparisonTable/HeaderCell.tsx

@@ -1,46 +1,50 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
-import { BORDER_CLASSES, GRADIENT } from './constants';
 
 export interface HeaderCellProps {
   icon?: IconName;
   image?: Picture;
   title?: string;
+  subtitle?: string;
+  isFillGradient?: boolean;
   link?: LinkProps;
 }
 
-export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) => (
-  <div
-    className={`w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES} ${GRADIENT}`}
-    role="columnheader"
-    scope="col"
-  >
-    {icon && !image?.src && (
-      <Icon
-        className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
-        name={icon}
-        width="63"
-        height="63"
-      />
-    )}
-    {image?.src && <Img className="mb-[18px]" image={image} />}
-    {title && <Heading headingType="h4" className="text-center text-white" title={title} />}
-    {link?.text && (
-      <div className="mt-auto w-full">
-        <Button
-          href={link.href}
-          target={link.target}
-          className="mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
+export const HeaderCell = JSX<HeaderCellProps>(
+  ({ icon, image, title, subtitle, isFillGradient }) => (
+    <div role="columnheader" scope="col">
+      {icon && (
+        <Icon
+          className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
+          name={icon}
+          width="63"
+          height="63"
+        />
+      )}
+      {image?.src && (
+        <div className="mb-3.5">
+          <Img image={image} />
+        </div>
+      )}
+      {title && (
+        <Heading
+          headingType="h4"
+          className={`${isFillGradient ? 'text-white' : ''}`}
+          title={title}
+        />
+      )}
+      {subtitle && (
+        <div
+          className={`text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`}
         >
-          <div className="font-medium text-xs py-[11px]">{link.text}</div>
-        </Button>
-      </div>
-    )}
-  </div>
-));
+          {subtitle}
+        </div>
+      )}
+    </div>
+  ),
+);

package/mobile/src/components/ComparisonTable/TableCell.tsx

@@ -1,43 +1,46 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { CellData } from './ComparisonTableContent';
-import { BORDER_CLASSES, DIVIDER_CLASSES, GRADIENT } from './constants';
+import { DIVIDER_CLASSES } from './constants';
 
 export interface TableCellProps {
   cell: CellData[];
-  isLastRow: boolean;
-  isFirstRow: boolean;
-  isFillGradient: boolean;
+  rowHeader?: string;
+  isLastRow?: boolean;
+  isFirstRow?: boolean;
+  isFillGradient?: boolean;
 }
 
-export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
-  const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES} ${
-    !isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'
-  } ${isFillGradient ? GRADIENT : ''}`;
+export const TableCell = JSX<TableCellProps>(({ cell, rowHeader, isFillGradient = false }) => {
+  const cellWrapperClasses = `box-border flex flex-col`;
 
-  const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES} ${
-    isFillGradient && isFirstRow ? 'border-t' : ''
-  } ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
+  const cellClasses = `h-full ${DIVIDER_CLASSES}`;
 
   return (
     <div className={cellWrapperClasses} role="cell">
-      <div className={cellClasses}>
-        {cell.map((item, i) => renderCellInner(item, i, isFillGradient))}
-      </div>
+      <div className={cellClasses}>{cell.map(renderCellInner(isFillGradient, rowHeader))}</div>
     </div>
   );
 });
 
-const renderCellInner = ({ label, description }: CellData, i: number, isFillGradient: boolean) => (
-  <div key={String(i)} className="first:pt-7 pt-6 last:pb-7">
-    {label && (
-      <h5 className={`text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`}>{label}</h5>
-    )}
-    {description && (
-      <div
-        className={`text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`}
-      >
-        {description}
+const renderCellInner =
+  (isFillGradient: boolean, rowHeader?: string) =>
+  ({ label, description }: CellData, i: number) =>
+    (
+      <div key={String(i)} className="flex justify-between text-m-sm py-3.5">
+        <div className={`${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}>
+          {rowHeader}
+        </div>
+        <div className="basis-1/2">
+          {label && (
+            <div className={`text-right ${isFillGradient ? 'text-white' : ''}`}>{label}</div>
+          )}
+          {description && (
+            <div
+              className={`text-right ${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}
+            >
+              {description}
+            </div>
+          )}
+        </div>
       </div>
-    )}
-  </div>
-);
+    );

package/mobile/src/components/ComparisonTable/TableColumn.tsx

@@ -0,0 +1,66 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { GRADIENT } from './constants';
+import { HeaderCell } from './HeaderCell';
+import { TableCell } from './TableCell';
+
+export interface TableColumnProps extends UniBlockProps {
+  header: any;
+  columnData: any;
+  visibleRowLength: number;
+  isFillGradient: boolean;
+  showRow: boolean;
+  onToggleColumn: () => void;
+}
+
+export const TableColumn = JSX<TableColumnProps>(
+  ({ header, columnData, visibleRowLength = 0, isFillGradient, showRow, onToggleColumn }) => {
+    const columnDataView = columnData.slice(0, showRow ? columnData.length : visibleRowLength);
+    const gradientClassName = isFillGradient ? GRADIENT : '';
+    const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
+    return (
+      <div className={`border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`}>
+        <HeaderCell {...header} isFillGradient={isFillGradient} />
+        {columnDataView?.length
+          ? columnDataView.map(({ rowHeader, cell }, i) => (
+              <TableCell
+                key={String(i)}
+                cell={cell}
+                rowHeader={rowHeader}
+                isFillGradient={isFillGradient}
+              />
+            ))
+          : null}
+
+        {showRow && renderButton({ header, buttonVersion })}
+        {renderToggleButton({ onToggleColumn, isFillGradient, showRow })}
+      </div>
+    );
+  },
+);
+
+const renderButton = ({ header, buttonVersion }) => (
+  <Button
+    href={header.link.href}
+    target={header.link.target}
+    version={buttonVersion}
+    className="font-medium text-m-sm mt-4 py-[11px]"
+  >
+    {header.link.text}
+  </Button>
+);
+
+const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (
+  <div className="mt-5">
+    <a
+      onClick={onToggleColumn}
+      className={`font-medium text-m-sm cursor-pointer ${
+        isFillGradient ? 'text-white/80' : 'text-primary-main'
+      }`}
+    >
+      {!showRow ? 'Показать описание' : 'Скрыть'}
+    </a>
+  </div>
+);

package/mobile/src/components/Gallery/Gallery.tsx

@@ -2,12 +2,12 @@ import { JSX } from '@redneckz/uni-jsx';
 import { BlockVersion } from '../../model/BlockVersion';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import type { GalleryCard } from './GalleryContent';
 import { GalleryItem } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
-import { Icon } from '../../ui-kit/Icon/Icon';
 
 const blockStyle: Record<BlockVersion, string> = {
   primary: 'bg-white',
@@ -57,7 +57,7 @@ function renderCard(card: GalleryCard, key: number) {
         {card.description ? renderDescription(card) : null}
         {card.items?.length ? renderItems(card.items) : null}
       </div>
-      {card?.button?.href ? renderButton(card.button) : null}
+      {card?.button?.text ? renderButton(card.button) : null}
     </div>
   );
 }

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

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { SwipeListControlDots } from './SwipeListControlDots';
+import { SwipeListControlList } from './SwipeListControlList';
 import type { SwipeListControlProps } from './SwipeListControlProps';
-import { getScrollPoints } from './utils/getScrollPoints';
 import { getIndexParts } from './utils/getIndexParts';
-import { SwipeListControlList } from './SwipeListControlList';
-import { SwipeListControlDots } from './SwipeListControlDots';
-import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { getScrollPoints } from './utils/getScrollPoints';
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
@@ -14,6 +14,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
+    onSlideChange,
   }) => {
     const [activeIndex, setActiveIndex] = context.useState<number>(0);
     const [indexFraction, setIndexFraction] = context.useState<number>(0);
@@ -35,28 +36,35 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
       });
 
       const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
+      if (index !== activeIndex && onSlideChange) {
+        onSlideChange();
+      }
       setActiveIndex(index);
       setIndexFraction(fraction);
     };
 
     return (
       <div className={className}>
-        <SwipeListControlList
-          gap={gap}
-          padding={padding}
-          activeIndex={activeIndex}
-          onScroll={handleScroll}
-        >
-          {children}
-        </SwipeListControlList>
-        <SwipeListControlDots
-          activeIndex={activeIndex}
-          indexFraction={indexFraction}
-          showDots={showDots}
-        >
-          {children}
-        </SwipeListControlDots>
+        {renderSwipeList({ gap, padding, activeIndex, handleScroll, children })}
+        {renderSwipelistDots({ activeIndex, indexFraction, showDots, children })}
       </div>
     );
   },
 );
+
+const renderSwipeList = ({ gap, padding, activeIndex, handleScroll, children }) => (
+  <SwipeListControlList
+    gap={gap}
+    padding={padding}
+    activeIndex={activeIndex}
+    onScroll={handleScroll}
+  >
+    {children}
+  </SwipeListControlList>
+);
+
+const renderSwipelistDots = ({ activeIndex, indexFraction, showDots, children }) => (
+  <SwipeListControlDots activeIndex={activeIndex} indexFraction={indexFraction} showDots={showDots}>
+    {children}
+  </SwipeListControlDots>
+);

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -16,4 +16,5 @@ export interface SwipeContainer {
 export interface SwipeListControlProps extends SwipeContainer, UniBlockProps {
   /** @title Точки-индикаторы */
   showDots?: boolean;
+  onSlideChange?: () => void;
 }

package/package.json

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

package/src/common.css

@@ -86,9 +86,7 @@
   .horizontal-list {
     display: flex;
     overflow-x: scroll;
-    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
-    touch-action: pan-x;
     scroll-snap-type: x mandatory;
   }
 

package/src/components/ComparisonTable/ComparisonTable.fixture.mobile.tsx

@@ -0,0 +1,152 @@
+import type { Picture } from '../../model/Picture';
+import { context } from '../../setup-fixture';
+import { ComparisonTable } from './ComparisonTable';
+import type { Column } from './ComparisonTableContent';
+
+const image1: Picture = {
+  src: 'card-1.png',
+  format: 'webp',
+  size: {
+    width: 100,
+    height: 63,
+  },
+};
+
+const image2: Picture = {
+  src: 'card-2.png',
+  format: 'webp',
+  size: {
+    width: 100,
+    height: 63,
+  },
+};
+
+const image3: Picture = {
+  src: 'card-3.png',
+  format: 'webp',
+  size: {
+    width: 100,
+    height: 63,
+  },
+};
+
+const rowHeaders = [
+  { title: 'Начисление процентов на остаток по счету' },
+  { title: 'Начисление процентов на остаток по счету' },
+  { title: 'Начисление процентов на остаток по счету' },
+];
+const columns: Column[] = [
+  {
+    header: {
+      title: 'Россельхоз-Росснефть',
+      subtitle: 'Менеджер свяжется с вами и согласует встречу',
+      image: image1,
+      link: {
+        text: 'Подробнее',
+        href: '#',
+      },
+    },
+    data: [
+      [
+        {
+          label: 'Бесплатно',
+          description: 'Мир',
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'Мир',
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'Мир',
+        },
+      ],
+    ],
+  },
+  {
+    header: {
+      title: 'Россельхоз-Росснефть',
+      image: image2,
+      link: {
+        text: 'Подробнее',
+        href: '#',
+      },
+    },
+    data: [
+      [
+        {
+          label: 'Бесплатно',
+          description: 'Начисление процентов на остаток по счету',
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'Начисление',
+        },
+      ],
+      [
+        {
+          description: 'Начисление процентов на остаток по счету',
+        },
+      ],
+    ],
+  },
+  {
+    header: {
+      title: 'Профсоюзная',
+      image: image3,
+      link: {
+        text: 'Подробнее',
+        href: '/credits',
+      },
+    },
+    data: [
+      [{ label: 'Нет' }],
+      [{ label: 'Бесплатно' }],
+      [{ label: 'Есть' }],
+      [{ label: 'До 20%' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'При обороте по карте от 10000 ₽ в месяц',
+        },
+      ],
+      [{ label: '69 рублей в месяц' }],
+      [{ description: 'Для членов профсоюзных организаций' }],
+    ],
+  },
+];
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ComparisonTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        isColoredFirstColumn={true}
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={Array(2).fill(columns).flat()}
+        visibleRowLength={2}
+      />
+    </div>
+  ),
+  'with swiper': (
+    <div className="container grid grid-cols-12">
+      <ComparisonTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        isColoredFirstColumn={true}
+        context={context}
+        rowHeaders={rowHeaders}
+        useSwiper={true}
+        columns={Array(2).fill(columns).flat()}
+        visibleRowLength={2}
+      />
+    </div>
+  ),
+};

package/src/components/ComparisonTable/ComparisonTable.mobile.tsx

@@ -0,0 +1,121 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import type { ComparisonTableContent } from './ComparisonTableContent';
+import { TableColumn } from './TableColumn';
+
+export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
+
+export const ComparisonTable = JSX<ComparisonTableProps>(
+  ({
+    className,
+    context,
+    title,
+    rowHeaders,
+    columns,
+    visibleRowLength = 0,
+    isColoredFirstColumn = false,
+    useSwiper = false,
+  }) => {
+    const tableData =
+      columns?.map(({ data, header }) => ({
+        header,
+        column: data?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title })),
+      })) || [];
+
+    const [columnsViewState, setColumnsViewState] = context.useState<boolean[]>(
+      new Array(columns?.length).fill(!visibleRowLength),
+    );
+
+    const handleToggleColumn = (i: number) => {
+      columnsViewState[i] = !columnsViewState[i];
+      setColumnsViewState([...columnsViewState]);
+    };
+
+    return (
+      <section
+        className={`bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${
+          className || ''
+        }`}
+      >
+        {title && (
+          <Heading headingType="h3" className="font-medium text-center m-0 mb-5" title={title} />
+        )}
+
+        {renderColumns({
+          tableData,
+          context,
+          visibleRowLength,
+          isColoredFirstColumn,
+          columnsViewState,
+          handleToggleColumn,
+          useSwiper,
+          setColumnsViewState,
+        })}
+      </section>
+    );
+  },
+);
+
+const renderColumns = ({
+  context,
+  tableData,
+  visibleRowLength,
+  isColoredFirstColumn,
+  columnsViewState,
+  handleToggleColumn,
+  useSwiper,
+  setColumnsViewState,
+}) => (
+  <div role="table">
+    {tableData?.length ? (
+      useSwiper ? (
+        <SwipeListControl
+          context={context}
+          onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
+        >
+          {tableData.map(
+            renderColumn({
+              context,
+              visibleRowLength,
+              isColoredFirstColumn,
+              columnsViewState,
+              handleToggleColumn,
+            }),
+          )}
+        </SwipeListControl>
+      ) : (
+        tableData.map(
+          renderColumn({
+            context,
+            visibleRowLength,
+            isColoredFirstColumn,
+            columnsViewState,
+            handleToggleColumn,
+          }),
+        )
+      )
+    ) : null}
+  </div>
+);
+
+const renderColumn =
+  ({ context, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn }) =>
+  (columnData, i) =>
+    (
+      <TableColumn
+        key={String(i)}
+        context={context}
+        visibleRowLength={visibleRowLength}
+        showRow={columnsViewState[i]}
+        header={columnData.header}
+        columnData={columnData.column}
+        isFillGradient={i === 0 && isColoredFirstColumn}
+        onToggleColumn={() => handleToggleColumn(i)}
+      />
+    );
+
+const onSlideChange = (columnsViewState, setColumnsViewState) => () => {
+  setColumnsViewState(new Array(columnsViewState.length).fill(false));
+};

package/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -26,6 +26,8 @@ export interface CellData {
 export interface ColumnHeader {
   /** @title Заголовок */
   title?: string;
+  /** @title Подзаголовок */
+  subtitle?: string;
   icon?: IconName;
   image?: Picture;
   link?: LinkProps;
@@ -61,4 +63,6 @@ export interface ComparisonTableContent {
   isColoredFirstColumn?: boolean;
   /** @title Отображать заданное количество строк */
   visibleRowLength?: number;
+  /** @title Использовать свайпер- */
+  useSwiper?: boolean;
 }

package/src/components/ComparisonTable/HeaderCell.mobile.tsx

@@ -0,0 +1,50 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+import type { Picture } from '../../model/Picture';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { Img } from '../../ui-kit/Img/Img';
+
+export interface HeaderCellProps {
+  icon?: IconName;
+  image?: Picture;
+  title?: string;
+  subtitle?: string;
+  isFillGradient?: boolean;
+  link?: LinkProps;
+}
+
+export const HeaderCell = JSX<HeaderCellProps>(
+  ({ icon, image, title, subtitle, isFillGradient }) => (
+    <div role="columnheader" scope="col">
+      {icon && (
+        <Icon
+          className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
+          name={icon}
+          width="63"
+          height="63"
+        />
+      )}
+      {image?.src && (
+        <div className="mb-3.5">
+          <Img image={image} />
+        </div>
+      )}
+      {title && (
+        <Heading
+          headingType="h4"
+          className={`${isFillGradient ? 'text-white' : ''}`}
+          title={title}
+        />
+      )}
+      {subtitle && (
+        <div
+          className={`text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`}
+        >
+          {subtitle}
+        </div>
+      )}
+    </div>
+  ),
+);