@redneckz/wildless-cms-uni-blocks 0.14.534 → 0.14.536

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

@@ -1,74 +1,97 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useMobileMode } from '../../hooks/useMobileMode';
 import { type BlockVersion } from '../../model/BlockVersion';
 import { style } from '../../utils/style';
+import { type NavButtonProp } from './NavButtonProp';
+import { renderDotButton } from './renderDotButton';
+import { renderNavButton } from './renderNavButton';
+import { SwipeListContainer } from './SwipeListContainer';
 import { type SwipeListControlType } from './SwipeListControlContent';
+import { useSwipeListScroll, type SwipeListScroll } from './useSwipeListScroll';
 
 const containerStyles: Record<SwipeListControlType, string> = {
   'horizontal-list': 'mx-auto mt-lg w-fit',
   'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
 };
 
-const activeDotStyles: Record<SwipeListControlType, string> = {
-  'horizontal-list': 'w-6',
-  'vertical-list': 'h-6',
-};
-
-const dotStyle =
-  'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white';
-
-const inactiveDotStyle = 'w-2 h-2 opacity-30';
-
 interface SwipeListDotsProps {
   className?: string;
-  containerRef?: { current: HTMLDivElement | null };
   activeIndex?: number;
   dotCount?: number;
   listType?: SwipeListControlType;
   version?: BlockVersion;
+  navButtons?: NavButtonProp[];
+  onVisibleIndicesChange?: (indices: number[]) => void;
+  containerRef?: { current: HTMLDivElement | null };
+  containerScroll?: SwipeListScroll;
 }
-
 export const SwipeListDots = JSX<SwipeListDotsProps>(
   ({
     className = '',
-    containerRef,
-    activeIndex,
+    activeIndex = 0,
     dotCount = 0,
     listType = 'horizontal-list',
     version,
+    navButtons = [],
+    containerRef,
+    containerScroll,
   }) => {
-    const handleClick = (idx: number) => {
-      if (idx !== activeIndex && containerRef?.current) {
-        containerRef.current.children[idx]?.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-        });
+    const isMobileMode = useMobileMode();
+    const [navRef, navScroll] = useSwipeListScroll<HTMLDivElement>({
+      itemCount: navButtons.length,
+    });
+    const scrollOption = getOptions(Boolean(navButtons?.length));
+
+    useEffect(() => {
+      if (navButtons?.length && activeIndex >= 0 && navRef?.current) {
+        navScroll.scrollTo(activeIndex, scrollOption);
       }
-    };
+    }, [activeIndex]);
 
-    return dotCount ? (
-      <div
-        className={style(
-          'flex gap-xs',
-          containerStyles[listType],
-          version ? 'group' : '',
-          className,
-        )}
-        data-ver={version}
-      >
-        {Array.from({ length: dotCount })
-          .fill(null)
-          .map((_, idx: number) => (
-            <div
-              key={String(idx)}
-              className={`${dotStyle} ${
-                idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle
-              }`}
-              role="button"
-              aria-hidden
-              onClick={() => handleClick(idx)}
-            />
-          ))}
-      </div>
-    ) : null;
+    const onChangeActiveIndex = useCallback(
+      (idx: number) => {
+        if (idx !== activeIndex && containerRef?.current) {
+          containerScroll?.scrollTo(idx, scrollOption);
+        }
+      },
+      [containerRef?.current],
+    );
+
+    if (navButtons?.length && !isMobileMode) {
+      return (
+        <SwipeListContainer
+          containerRef={navRef}
+          snapAlign="snap-start"
+          itemClassName="h-36 flex items-stretch w-screen"
+          gap={8}
+        >
+          {navButtons.map(renderNavButton({ activeIndex, onClick: onChangeActiveIndex }))}
+        </SwipeListContainer>
+      );
+    } else if (dotCount) {
+      return (
+        <div
+          className={style(
+            'flex gap-xs',
+            containerStyles[listType],
+            version ? 'group' : '',
+            className,
+            { 'pb-xl': navButtons?.length && isMobileMode },
+          )}
+          data-ver={version}
+        >
+          {Array.from({ length: dotCount })
+            .fill(null)
+            .map(renderDotButton({ activeIndex, onClick: onChangeActiveIndex, listType }))}
+        </div>
+      );
+    }
+
+    return null;
   },
 );
+
+const getOptions = (isAuto = false): ScrollIntoViewOptions => ({
+  behavior: isAuto ? 'auto' : 'smooth',
+});

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

@@ -4,31 +4,32 @@ import { ScrollLeftButton, ScrollRightButton } from '../LinkButton/ArrowButton';
 import { type SwipeListScrollButtonsContent } from './SwipeListControlContent';
 import { type SwipeListScroll } from './useSwipeListScroll';
 
-const scrollButtonStyle = 'absolute top-[calc(50%-24px)] z-40';
 const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
 
 export interface SwipeListScrollButtonsProps extends SwipeListScrollButtonsContent {
   className?: string;
   scroll: SwipeListScroll;
   hasBlur?: boolean;
+  isBottom?: boolean;
 }
 
 export const SwipeListScrollButtons = JSX<SwipeListScrollButtonsProps>(
-  ({ className, scroll, hasBlur, arrowsPadded }) => {
+  ({ className, scroll, hasBlur, arrowsPadded, isBottom }) => {
     const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
+    const isArrowPadded = arrowsPadded && !isBottom;
 
     return (
-      <div className={style(className)}>
+      <div className={className}>
         {hasBlur ? renderBlur(scroll) : null}
         {canScrollLeft ? (
           <ScrollLeftButton
-            className={style(scrollButtonStyle, arrowsPadded ? 'left-1' : 'left-0')}
+            className={style(buttonStyle(isBottom), isArrowPadded ? 'left-1' : 'left-0')}
             onClick={scrollLeft}
           />
         ) : null}
         {canScrollRight ? (
           <ScrollRightButton
-            className={style(scrollButtonStyle, arrowsPadded ? 'right-1' : 'right-0')}
+            className={style(buttonStyle(isBottom), isArrowPadded ? 'right-1' : 'right-0')}
             onClick={scrollRight}
           />
         ) : null}
@@ -54,3 +55,6 @@ const renderBlur = (scroll: SwipeListScroll) => (
     ) : null}
   </div>
 );
+
+const buttonStyle = (isBottom = false) =>
+  style('absolute z-40', isBottom ? 'bottom-[56px]' : 'top-[calc(50%-24px)]');

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

@@ -0,0 +1,29 @@
+import { style } from '../../utils/style';
+import type { DotProp } from './NavButtonProp';
+import type { SwipeListControlType } from './SwipeListControlContent';
+
+const activeDotStyles: Record<SwipeListControlType, string> = {
+  'horizontal-list': 'w-6',
+  'vertical-list': 'h-6',
+};
+
+const dotStyle =
+  'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white';
+
+const inactiveDotStyle = 'w-2 h-2 opacity-30';
+
+export const renderDotButton =
+  ({ activeIndex, onClick, listType = 'horizontal-list' }: DotProp) =>
+  (_: any, idx: number) =>
+    (
+      <div
+        key={String(idx)}
+        className={style(
+          dotStyle,
+          idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle,
+        )}
+        role="button"
+        aria-hidden
+        onClick={() => onClick(idx)}
+      />
+    );

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

@@ -0,0 +1,33 @@
+import { style } from '../../utils/style';
+import { type DotProp, type NavButtonProp } from './NavButtonProp';
+
+export const renderNavButton =
+  ({ activeIndex, onClick }: DotProp) =>
+  (nav: NavButtonProp, i: number) => {
+    const isActive = i === activeIndex;
+    const btnClassName = isActive
+      ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
+      : 'min-w-72 ease-in duration-300 bg-white/10 px-xl py-lg hover:backdrop-blur';
+    const btnTitleClassName = isActive
+      ? 'text-primary-text text-h6 py-xs'
+      : 'text-l pb-2xs text-secondary-text group-data-secondary:text-white';
+    const btnDescClassName = isActive ? 'text-l' : 'text-m group-data-secondary:text-white/80';
+
+    return (
+      <button
+        type="button"
+        key={String(i)}
+        onClick={() => onClick(i)}
+        aria-label={nav?.title}
+        className={style(
+          'max-h-28 mt-xs ml-xs relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50 whitespace-nowrap',
+          btnClassName,
+        )}
+      >
+        <div className={btnTitleClassName}>{nav?.title}</div>
+        <div className={style('text-secondary-text font-light', btnDescClassName)}>
+          {nav?.description}
+        </div>
+      </button>
+    );
+  };

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

@@ -35,7 +35,7 @@ export const useSwipeListScroll = <E extends HTMLElement>({
       );
       onVisibleIndicesChange && onVisibleIndicesChange(indices);
     },
-    [itemCount],
+    [onVisibleIndicesChange],
   );
 
   const [minIndex, maxIndex] = visibleIndices.length

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.534",
+  "version": "0.14.536",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -210,7 +210,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "66 kB",
+      "limit": "67 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/components/ApplicationForm/ApplicationForm.example.json

@@ -118,6 +118,11 @@
                 "name": "phone",
                 "required": true
               },
+              {
+                "fieldType": "common",
+                "name": "email",
+                "label": "Электронная почта (для уведомлений от Банка по Вашему сообщению)"
+              },
               {
                 "fieldType": "common",
                 "name": "birthday",

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

@@ -127,6 +127,11 @@ export default {
               { fieldType: 'common', name: 'name', required: true },
               { fieldType: 'common', name: 'middleName' },
               { fieldType: 'common', name: 'phone', required: true },
+              {
+                fieldType: 'common',
+                name: 'email',
+                label: 'Электронная почта (для уведомлений от Банка по Вашему сообщению)',
+              },
               { fieldType: 'common', name: 'birthday', required: true },
               { fieldType: 'common', name: 'isClient' },
               { fieldType: 'common', name: 'comment', required: true },

package/src/components/ApplicationForm/ApplicationForm.fixture.tsx

@@ -131,6 +131,11 @@ export default {
               { fieldType: 'common', name: 'name', required: true },
               { fieldType: 'common', name: 'middleName' },
               { fieldType: 'common', name: 'phone', required: true },
+              {
+                fieldType: 'common',
+                name: 'email',
+                label: 'Электронная почта (для уведомлений от Банка по Вашему сообщению)',
+              },
               { fieldType: 'common', name: 'birthday', required: true },
               { fieldType: 'common', name: 'isClient' },
               { fieldType: 'common', name: 'comment', required: true },

package/src/components/ApplicationForm/ApplicationForm.tsx

@@ -57,7 +57,7 @@ export const ApplicationForm = JSX<ApplicationFormProps>(
         setResponseType(status);
 
         if (status) {
-          const responseTypeDialog = useResponseTypeDialog({ responseType: status });
+          const responseTypeDialog = useResponseTypeDialog({ responseType: status, typeForm });
           responseTypeDialog.open();
         }
         if (status === 'OK' && data) {

package/src/components/ApplicationForm/getField.tsx

@@ -56,6 +56,7 @@ export const getField =
         <InputControl
           label="Электронная почта"
           {...getValidation(field('email'), validatorObj.email, required)}
+          {...rest}
         />
       ),
       fullName: (

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

@@ -8,6 +8,7 @@ import { CATALOG_CARD, CATALOG_CARD_NEW } from '../CarouselCatalogCard/CarouselC
 import { CAROUSEL_RECOMMENDATION_CARD_BENEFITS } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
 import { CAROUSEL_RECOMMENDATION_CARD } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture.mobile';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
+import type { ProductBlockContent } from '../ProductBlock/ProductBlockContent';
 import { Carousel } from './Carousel';
 
 const catalogImage: Picture = {
@@ -20,6 +21,25 @@ const catalogImage: Picture = {
   title: 'pay-ring',
 };
 
+const productBlock: ProductBlockContent = {
+  isFullWidthTitle: true,
+  version: 'secondary',
+  image: {
+    iconVersion: 'normal',
+    src: 'cow-card.png',
+  },
+  headlineVersion: 'XXL',
+  title: 'Кредит до 5 млн₽ на любые цели',
+  description: 'Оформление по паспорту',
+  buttons: [
+    {
+      text: 'Кнопка',
+      href: 'href',
+      version: 'secondary',
+    },
+  ],
+};
+
 const options = {
   blocksRegistry: Blocks,
 } as BlockRendererOptions;
@@ -137,4 +157,41 @@ export default {
       />
     </div>
   ),
+  productGallery: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={1}
+        padding="p-0"
+        noCardBorder={true}
+        isNavButtons={true}
+        version="secondary"
+        block={{
+          type: 'Carousel',
+          blocks: [
+            { type: 'ProductBlock', content: { ...productBlock } },
+            {
+              type: 'ProductBlock',
+              content: {
+                ...productBlock,
+                title: 'Вклад «Доходный»',
+                description: 'Получайте максимальный доход даже при небольшой сумме вклада',
+                additionalDescription: 'Ставка до 16% годовых',
+              },
+            },
+            { type: 'ProductBlock', content: { ...productBlock, title: 'Карта Своя' } },
+            {
+              type: 'ProductBlock',
+              content: {
+                ...productBlock,
+                title: 'Сельская ипотека',
+                additionalDescription: 'до 6 млн. ₽',
+              },
+            },
+          ],
+        }}
+        options={options}
+      />
+    </div>
+  ),
 };

package/src/components/Carousel/Carousel.fixture.tsx

@@ -44,6 +44,25 @@ const catalogImage: Picture = {
   title: 'pay-ring',
 };
 
+const productBlock: ProductBlockContent = {
+  isFullWidthTitle: true,
+  version: 'secondary',
+  image: {
+    iconVersion: 'normal',
+    src: 'cow-card.png',
+  },
+  headlineVersion: 'XXL',
+  title: 'Кредит до 5 млн₽ на любые цели',
+  description: 'Оформление по паспорту',
+  buttons: [
+    {
+      text: 'Кнопка',
+      href: 'href',
+      version: 'secondary',
+    },
+  ],
+};
+
 const options = {
   blocksRegistry: Blocks,
 } as BlockRendererOptions;
@@ -211,4 +230,41 @@ export default {
       />
     </div>
   ),
+  productGallery: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={1}
+        padding="p-0"
+        noCardBorder={true}
+        isNavButtons={true}
+        version="secondary"
+        block={{
+          type: 'Carousel',
+          blocks: [
+            { type: 'ProductBlock', content: { ...productBlock } },
+            {
+              type: 'ProductBlock',
+              content: {
+                ...productBlock,
+                title: 'Вклад «Доходный»',
+                description: 'Получайте максимальный доход даже при небольшой сумме вклада',
+                additionalDescription: 'Ставка до 16% годовых',
+              },
+            },
+            { type: 'ProductBlock', content: { ...productBlock, title: 'Карта Своя' } },
+            {
+              type: 'ProductBlock',
+              content: {
+                ...productBlock,
+                title: 'Сельская ипотека',
+                additionalDescription: 'до 6 млн. ₽',
+              },
+            },
+          ],
+        }}
+        options={options}
+      />
+    </div>
+  ),
 };

package/src/components/Carousel/Carousel.tsx

@@ -3,6 +3,7 @@ import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
+import { type ProductBlockContent } from '../ProductBlock/ProductBlockContent';
 import { type CarouselContent } from './CarouselContent';
 import { ITEMS_GAP } from './itemsGap';
 import { renderCarouselCards } from './renderCarouselCards';
@@ -18,24 +19,24 @@ export const Carousel = UniBlock<CarouselProps>(
     arrowsPadded = true,
     isGap = true,
     cardSize = 'normal',
+    isNavButtons = false,
     ...rest
-  }) => {
-    return (
-      <BlockWrapper className={style(className)} defaultPadding="p-6xl" {...rest}>
-        <SwipeListControl
-          className={style('relative max-w-full')}
-          visibleItemCount={visibleItemCount}
-          snapAlign="snap-start"
-          gap={isGap ? ITEMS_GAP : 0}
-          padding={0}
-          arrowsPadded={arrowsPadded}
-          hasBlur
-        >
-          {renderCarouselCards({ noCardBorder, cardSize, ...rest })}
-        </SwipeListControl>
-      </BlockWrapper>
-    );
-  },
+  }) => (
+    <BlockWrapper className={style(className)} defaultPadding="p-6xl" {...rest}>
+      <SwipeListControl
+        className={style('relative max-w-full')}
+        visibleItemCount={visibleItemCount}
+        snapAlign="snap-start"
+        gap={isGap ? ITEMS_GAP : 0}
+        padding={0}
+        arrowsPadded={arrowsPadded}
+        navButtons={isNavButtons ? getNavButton(rest?.block?.blocks) : []}
+        hasBlur
+      >
+        {renderCarouselCards({ noCardBorder, cardSize, isNavButtons, ...rest })}
+      </SwipeListControl>
+    </BlockWrapper>
+  ),
   {
     childrenTypes: [
       'CarouselCard',
@@ -53,3 +54,13 @@ export const Carousel = UniBlock<CarouselProps>(
     }),
   },
 );
+
+const getNavButton = (blocks?: { content?: ProductBlockContent }[]) =>
+  blocks?.map((_) => {
+    const content = _?.content;
+
+    return {
+      title: content?.title,
+      description: content?.additionalDescription || content?.description,
+    };
+  }) ?? [];

package/src/components/Carousel/CarouselContent.ts

@@ -16,6 +16,8 @@ export type CarouselContent = UniBlockContent & {
   arrowsPadded?: boolean;
   /** @title Отступы между карточками */
   isGap?: boolean;
+  /** @title Показывать кнопки навигации */
+  isNavButtons?: boolean;
   /** @title Не показывать контур на карточках */
   noCardBorder?: boolean;
   cardSize?: CardSizeMode;

package/src/components/Carousel/renderCarouselCards.tsx

@@ -19,10 +19,16 @@ const CARD_SIZE_MAP: Record<CardSizeMode, string> = {
 export const renderCarouselCards = ({
   noCardBorder,
   cardSize = 'normal',
+  isNavButtons = false,
   ...rest
-}: UniBlockProps & { noCardBorder?: boolean; cardSize?: CardSizeMode }) => {
+}: UniBlockProps & {
+  noCardBorder?: boolean;
+  cardSize?: CardSizeMode;
+  isNavButtons?: boolean;
+}) => {
   const { blocks: childBlocks } = rest.block || {};
   const someCardsHighlighted = childBlocks?.some(isCardHighlighted);
+  const defaultPadding = isNavButtons ? { defaultPadding: 'p-6xl pb-m' } : {};
 
   return renderChildren({
     ...rest,
@@ -34,6 +40,7 @@ export const renderCarouselCards = ({
             showBorder: !noCardBorder,
             cardSize,
           }),
+          ...defaultPadding,
           blockIndex,
         })}
         {isCardHighlighted(block)

package/src/components/ProductBlock/ProductBlock.tsx

@@ -8,13 +8,18 @@ import { type ProductBlockContent } from './ProductBlockContent';
 export interface ProductBlockProps extends UniBlockProps, ProductBlockContent {}
 
 export const ProductBlock = UniBlock<ProductBlockProps>(
-  ({ className, padding, ...rest }) => (
+  ({ className, padding, defaultPadding, ...rest }) => (
     <BlockWrapper
       className={style('overflow-hidden flex flex-col gap-3xl box-border', className)}
       padding="p-0"
       {...rest}
     >
-      <BaseProductTile defaultPadding="p-6xl" padding={padding} className="grow h-full" {...rest} />
+      <BaseProductTile
+        defaultPadding={defaultPadding || 'p-6xl'}
+        padding={padding}
+        className="grow h-full"
+        {...rest}
+      />
     </BlockWrapper>
   ),
   { childrenTypes: ['UnitBlock'] },

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,3 +1,4 @@
+import { type AdditionalDescriptionProps } from '../../model/HeadlineType';
 import { type BaseProductTileContent } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
@@ -5,7 +6,8 @@ import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
  * @title Продуктовый блок
  */
 export type ProductBlockContent = UniBlockContent &
-  BaseProductTileContent & {
+  BaseProductTileContent &
+  AdditionalDescriptionProps & {
     /** @title Отображать кнопку возврата */
     backwardButton?: boolean;
   };