@redneckz/wildless-cms-uni-blocks 0.6.34 → 0.6.36

package/mobile/src/ui-kit/Button/ArrowButton.tsx

@@ -24,3 +24,16 @@ export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) =
     />
   </Button>
 ));
+
+export const ScrollLeftButton = JSX<ButtonProps>((props) => (
+  <ArrowButton {...props} ariaLabel="Пролистать влево" data-block-control="scroll-left" />
+));
+
+export const ScrollRightButton = JSX<ButtonProps>((props) => (
+  <ArrowButton
+    {...props}
+    className={`${props.className || ''} rotate-180`}
+    ariaLabel="Пролистать вправо"
+    data-block-control="scroll-right"
+  />
+));

package/mobile/src/ui-kit/Foldable/FoldableSection.tsx

@@ -21,7 +21,9 @@ export const FoldableSection = JSX<FoldableSectionProps>(
     return (
       <div
         ref={containerRef}
-        className={`transition-max-h duration-300 overflow-hidden max-h-0 ${className}`}
+        className={`transition-max-h duration-300 overflow-hidden ${
+          containerRef.current || !isUnfolded ? 'max-h-0' : ''
+        } ${className}`}
       >
         {children}
       </div>

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

@@ -0,0 +1,97 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
+import { mapChildren } from '../../utils/mapChildren';
+import type { SwipeContainerProps } from './SwipeListControlProps';
+import { SwipeListItem } from './SwipeListItem';
+
+type ItemsVisibilityList = Array<IntersectionObserverEntry | undefined>;
+
+type SwipeListItemWidthAuto = 0;
+
+/**
+ * @title Список
+ */
+interface SwipeListContainerProps extends SwipeContainerProps {
+  className?: string;
+  containerRef?: { current: HTMLDivElement | null };
+  activeIndex?: number;
+  visibleItemCount?: SwipeListItemWidthAuto | 1 | 2 | 3;
+  snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
+  onVisibleItemsChange?: (itemsVisibilityList: ItemsVisibilityList) => void;
+  onVisibleIndicesChange?: (indices: number[]) => void;
+}
+
+const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]'];
+
+export const SwipeListContainer = JSX<SwipeListContainerProps>(
+  ({
+    className = '',
+    containerRef,
+    activeIndex,
+    visibleItemCount,
+    gap = 0,
+    padding = 0,
+    snapAlign = 'snap-center',
+    children,
+    onVisibleItemsChange,
+    onVisibleIndicesChange,
+  }) => {
+    const observerOptions: IntersectionObserverOptions = {
+      sensitivity: 1,
+      rootRef: containerRef,
+    };
+
+    const itemsVisibilityListRef = useRef<ItemsVisibilityList>([]);
+    const handleIntersection = useCallback(
+      (idx: number, entry: IntersectionObserverEntry) => {
+        const itemsVisibilityList = [...(itemsVisibilityListRef.current || [])];
+        itemsVisibilityList[idx] = entry;
+        itemsVisibilityListRef.current = itemsVisibilityList;
+
+        onVisibleItemsChange && onVisibleItemsChange(itemsVisibilityList);
+        onVisibleIndicesChange && onVisibleIndicesChange(getVisibleIndices(itemsVisibilityList));
+      },
+      [onVisibleItemsChange, onVisibleIndicesChange],
+    );
+
+    return (
+      <div
+        className={`box-border overflow-auto flex horizontal-list no-scrollbar ${className}`}
+        style={{ ...getContainerStyle(padding), gap: `${gap}px` }}
+        role="list"
+        ref={containerRef}
+      >
+        {mapChildren((child, idx) => (
+          <SwipeListItem
+            key={String(idx)}
+            className={`${snapAlign} ${
+              visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''
+            }`}
+            style={getContainerStyle(padding / 4)}
+            activeIndex={activeIndex}
+            idx={idx}
+            observerOptions={observerOptions}
+            onIntersection={handleIntersection}
+          >
+            {child}
+          </SwipeListItem>
+        ))(children)}
+      </div>
+    );
+  },
+);
+
+// Styles used to compensate outer container padding to get rid of clipping effect
+const getContainerStyle = (padding: number): Record<string, string> => ({
+  marginLeft: `${-padding}px`,
+  marginRight: `${-padding}px`,
+  paddingLeft: `${padding}px`,
+  paddingRight: `${padding}px`,
+});
+
+const getVisibleIndices = (itemsVisibilityList: ItemsVisibilityList) =>
+  itemsVisibilityList
+    .map((_, i): [IntersectionObserverEntry | undefined, number] => [_, i])
+    .filter(([_]) => _ && _.intersectionRatio >= 0.9)
+    .map(([, i]) => i);

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

@@ -1,12 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { SwipeListContainer } from './SwipeListContainer';
 import { SwipeListControlDots } from './SwipeListControlDots';
-import { SwipeListControlList } from './SwipeListControlList';
-import type { SwipeListControlListProps } from './SwipeListControlList';
 import type { SwipeListControlProps } from './SwipeListControlProps';
-import { getIndexParts } from './utils/getIndexParts';
-import { getScrollPoints } from './utils/getScrollPoints';
+import { useSwipeListScroll } from './useSwipeListScroll';
+
+const DEFAULT_GAP = 14;
+
+/*
+  Horizontal padding used on a container above SwipeListControl.
+  Same value used on a SwipeListControlChildren container to compensate it
+  and get rid of a clipping effect caused by overflow: hidden.
+ */
+const DEFAULT_PADDING = 16;
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
@@ -14,65 +19,36 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
-    onSlideChange,
     children,
+    onVisibleIndicesChange,
   }) => {
-    const [activeIndex, setActiveIndex] = useState(0);
-    const [indexFraction, setIndexFraction] = useState(0);
-
-    const dotsProps = {
-      activeIndex,
-      indexFraction,
-      showDots,
-      children,
-    };
-
-    const handleScroll: SwipeListControlListProps['onScroll'] = useCallback(
-      (e) => {
-        const {
-          scrollLeft,
-          clientWidth,
-          childElementCount,
-          scrollWidth,
-          children: childrenCollection,
-        } = e?.currentTarget as HTMLElement;
-        if (!childrenCollection[0]) {
-          return;
-        }
+    const itemCount = Array.isArray(children) ? children.length : 0;
 
-        // horizontal PADDING / 2 to compensate padding-margin combo of child container
-        // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
-        const itemWidth = (childrenCollection[0] as HTMLElement).offsetWidth - padding / 2;
-        const scrollPoints = getScrollPoints({
-          gap,
-          padding,
-          clientWidth,
-          scrollWidth,
-          childElementCount,
-          itemWidth,
-        });
-
-        const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
-        if (index !== activeIndex && onSlideChange) {
-          onSlideChange();
-        }
-        setActiveIndex(index);
-        setIndexFraction(fraction);
-      },
-      [gap, padding, activeIndex, onSlideChange],
-    );
+    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
+      itemCount,
+      onVisibleIndicesChange,
+    });
+    const [activeIndex] = scroll.visibleIndicesRange;
 
     return (
       <div className={className}>
-        <SwipeListControlList
+        <SwipeListContainer
+          containerRef={containerRef}
+          activeIndex={activeIndex}
+          visibleItemCount={1}
           gap={gap}
           padding={padding}
-          activeIndex={activeIndex}
-          onScroll={handleScroll}
+          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
         >
           {children}
-        </SwipeListControlList>
-        <SwipeListControlDots {...dotsProps} />
+        </SwipeListContainer>
+        {showDots ? (
+          <SwipeListControlDots
+            containerRef={containerRef}
+            activeIndex={activeIndex}
+            dotCount={itemCount}
+          />
+        ) : null}
       </div>
     );
   },

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

@@ -1,70 +1,36 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 
-const DOT_STYLES = 'bg-primary-main opacity-30 w-1.5 h-1.5 min-w-1.5 min-h-1.5 rounded-full';
-const BASE_DOT_WIDTH = 6;
-const ACTIVE_DOT_WIDTH_CHANGE = 16;
-const BASE_DOT_OPACITY = 0.3;
-const ACTIVE_DOT_OPACITY_CHANGE = 0.7;
+const dotStyle = 'cursor-pointer bg-primary-main h-2 rounded-full transition-width duration-300';
 
-export interface SwipeListControlDotsProps {
-  activeIndex: number;
-  indexFraction: number;
-  showDots?: boolean;
+interface SwipeListControlDotsProps {
+  containerRef?: { current: HTMLDivElement | null };
+  activeIndex?: number;
+  dotCount?: number;
 }
 
 export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
-  ({ children, activeIndex, indexFraction, showDots }) => {
-    const handleClick = useCallback(
-      (idx: number) => (e) => {
-        if (idx === activeIndex) {
-          return;
-        }
-
-        const contentContainer = (e.currentTarget as HTMLElement).parentElement
-          ?.previousElementSibling;
-
-        contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-      },
-      [activeIndex],
-    );
-
-    return showDots && children ? (
+  ({ containerRef, activeIndex, dotCount = 0 }) => {
+    const handleClick = (idx: number) => {
+      if (idx !== activeIndex && containerRef?.current) {
+        containerRef.current.children[idx]?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+        });
+      }
+    };
+
+    return dotCount ? (
       <div className="flex gap-2 mx-auto mt-5 w-fit">
-        {children.length && children.map ? (
-          children.map((_, idx: number) => (
-            <div
-              key={String(idx)}
-              onClick={handleClick(idx)}
-              className={DOT_STYLES}
-              style={getDotStyles(idx, activeIndex, indexFraction)}
-              aria-hidden
-            />
-          ))
-        ) : (
-          <div className={DOT_STYLES} style={createDotStyle(1)} />
-        )}
+        {new Array(dotCount).fill(null).map((_, idx: number) => (
+          <div
+            key={String(idx)}
+            className={`${dotStyle} ${idx === activeIndex ? 'w-6' : 'w-2 opacity-30'}`}
+            role="button"
+            aria-hidden
+            onClick={() => handleClick(idx)}
+          />
+        ))}
       </div>
     ) : null;
   },
 );
-
-const getDotStyles = (
-  currentIdx: number,
-  activeIndex: number,
-  indexFraction: number,
-): Record<string, string> | undefined => {
-  if (currentIdx < activeIndex || currentIdx > activeIndex + 1) {
-    return undefined;
-  }
-
-  const leftIndexMod = 1 - indexFraction;
-  const rightIndexMod = indexFraction;
-
-  return createDotStyle(currentIdx === activeIndex ? leftIndexMod : rightIndexMod);
-};
-
-const createDotStyle = (indexModifier: number): Record<string, string> => ({
-  opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * indexModifier}`,
-  width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * indexModifier}px`,
-});

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

@@ -1,7 +1,7 @@
 /**
  * @title Контейнер
  */
-export interface SwipeContainer {
+export interface SwipeContainerProps {
   /** @title Расстояние между элементами */
   gap?: number;
   /** @title Отступы */
@@ -11,9 +11,9 @@ export interface SwipeContainer {
 /**
  * @title Swipe-контроллер
  */
-export interface SwipeListControlProps extends SwipeContainer {
+export interface SwipeListControlProps extends SwipeContainerProps {
   className?: string;
   /** @title Точки-индикаторы */
   showDots?: boolean;
-  onSlideChange?: () => void;
+  onVisibleIndicesChange?: (indices: number[]) => void;
 }

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

@@ -0,0 +1,44 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import {
+  useIntersectionObserver,
+  type IntersectionObserverOptions,
+} from '../../hooks/useIntersectionObserver';
+
+/**
+ * @title Элемент списка
+ */
+interface SwipeListControlItemProps {
+  className?: string;
+  style?: Record<string, string>;
+  idx?: number;
+  activeIndex?: number;
+  observerOptions?: IntersectionObserverOptions;
+  onIntersection?: (idx: number, entry: IntersectionObserverEntry) => void;
+}
+
+export const SwipeListItem = JSX<SwipeListControlItemProps>(
+  ({ className = '', style, idx, activeIndex, observerOptions, children, onIntersection }) => {
+    const observerCallback = useCallback(
+      (entries: IntersectionObserverEntry[]) => {
+        if (entries.length && onIntersection) {
+          onIntersection(idx || 0, entries[entries.length - 1]);
+        }
+      },
+      [onIntersection, idx],
+    );
+    const ref = useIntersectionObserver<HTMLDivElement>(observerCallback, observerOptions);
+
+    return (
+      <div
+        className={`inline-block snap-always box-border ${className}`}
+        style={style}
+        role="listitem"
+        aria-current={Boolean(idx === activeIndex)}
+        ref={ref}
+      >
+        {children}
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,10 @@
+const getItemWidth =
+  (container: HTMLElement) =>
+  (itemCount: number): number =>
+    container.scrollWidth / itemCount;
+
+export const scrollBy =
+  (container: HTMLElement) =>
+  (itemCount: number, delta: -1 | 1): void => {
+    container.scrollBy({ left: delta * getItemWidth(container)(itemCount), behavior: 'smooth' });
+  };

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

@@ -0,0 +1,3 @@
+export const scrollToEnd = (container: HTMLElement): void => {
+  container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' });
+};

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

@@ -0,0 +1,3 @@
+export const scrollToStart = (container: HTMLElement): void => {
+  container.scrollTo({ left: 0, behavior: 'smooth' });
+};

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

@@ -0,0 +1,84 @@
+import { useCallback, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { areArraysEqual } from '../../utils/areArraysEqual';
+import { maxBy } from '../../utils/maxBy';
+import { minBy } from '../../utils/minBy';
+import { scrollBy } from './scrollBy';
+import { scrollToEnd } from './scrollToEnd';
+import { scrollToStart } from './scrollToStart';
+
+export interface SwipeListScroll {
+  scrollLeft: () => void;
+  scrollRight: () => void;
+  canScrollLeft: boolean;
+  canScrollRight: boolean;
+  visibleIndicesRange: [number, number];
+  handleVisibleIndicesChange: (indices: number[]) => void;
+}
+
+interface SwipeListScrollProps {
+  itemCount: number;
+  isCyclic?: boolean;
+  onVisibleIndicesChange?: (indices: number[]) => void;
+}
+
+export const useSwipeListScroll = <E extends HTMLElement>({
+  itemCount,
+  isCyclic,
+  onVisibleIndicesChange,
+}: SwipeListScrollProps): [containerRef: { current: E | null }, scroll: SwipeListScroll] => {
+  const containerRef = useRef<E | null>(null);
+
+  const [visibleIndices, setVisibleIndices] = useState<number[]>([]);
+  const handleVisibleIndicesChange = useCallback(
+    (indices: number[]) => {
+      setVisibleIndices((prevIndices) =>
+        areArraysEqual(prevIndices, indices) ? prevIndices : indices,
+      );
+      onVisibleIndicesChange && onVisibleIndicesChange(indices);
+    },
+    [itemCount],
+  );
+
+  const [minIndex, maxIndex] = visibleIndices.length
+    ? [minBy<number>()(visibleIndices), maxBy<number>()(visibleIndices)]
+    : [-1, -1];
+
+  const canScrollLeft = minIndex > 0;
+  const canScrollRight = maxIndex < itemCount - 1;
+
+  const scrollLeft = useCallback(() => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    if (isCyclic && !canScrollLeft) {
+      scrollToEnd(containerRef.current);
+    } else {
+      scrollBy(containerRef.current)(itemCount, -1);
+    }
+  }, [isCyclic, itemCount, canScrollLeft]);
+
+  const scrollRight = useCallback(() => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    if (isCyclic && !canScrollRight) {
+      scrollToStart(containerRef.current);
+    } else {
+      scrollBy(containerRef.current)(itemCount, 1);
+    }
+  }, [itemCount, isCyclic, canScrollRight]);
+
+  return [
+    containerRef,
+    {
+      scrollLeft,
+      scrollRight,
+      canScrollLeft: isCyclic || canScrollLeft,
+      canScrollRight: isCyclic || canScrollRight,
+      visibleIndicesRange: [minIndex, maxIndex],
+      handleVisibleIndicesChange,
+    },
+  ];
+};

package/mobile/src/utils/areArraysEqual.ts

@@ -0,0 +1,2 @@
+export const areArraysEqual = <T>(as?: T[], bs?: T[]): boolean =>
+  as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));

package/mobile/src/utils/mapChildren.ts

@@ -0,0 +1,11 @@
+import type { VNode } from '../model/VNode';
+
+export const mapChildren =
+  (mapper: (node: VNode, idx: number) => VNode) =>
+  (children: VNode): VNode => {
+    if (children === null || children === undefined) {
+      return children;
+    }
+
+    return Array.isArray(children) ? children.map(mapper) : mapper(children, 0);
+  };

package/mobile/src/utils/maxBy.ts

@@ -1,7 +1,6 @@
+export const defaultDiscriminator = <Item, Value>(_: Item): Value => _ as any;
+
 export const maxBy =
-  <Item, Value>(discriminator: (item: Item) => Value) =>
+  <Item, Value = Item>(discriminator: (item: Item) => Value = defaultDiscriminator) =>
   (list: Item[]): Item =>
     list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
-
-export const minBy = <Item, Value>(discriminator: (item: Item) => Value) =>
-  maxBy((_: Item) => -discriminator(_));

package/mobile/src/utils/minBy.ts

@@ -0,0 +1,5 @@
+import { defaultDiscriminator, maxBy } from './maxBy';
+
+export const minBy = <Item, Value = Item>(
+  discriminator: (item: Item) => Value = defaultDiscriminator,
+) => maxBy((_: Item) => -discriminator(_));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.34",
+  "version": "0.6.36",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -185,7 +185,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "41 kB",
+      "limit": "43 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/common.css

@@ -73,13 +73,6 @@ html {
     scroll-snap-type: x mandatory;
   }
 
-  .horizontal-list-item {
-    flex-shrink: 0;
-    scroll-snap-align: start;
-    scroll-snap-stop: always;
-    width: 100%;
-  }
-
   .gradient-color-text {
     background: linear-gradient(180deg, #42ab44 0%, #f6db7d 100%);
     -webkit-background-clip: text;

package/src/components/Blocks.ts

@@ -8,6 +8,7 @@ import { BusinessBlock } from './BusinessBlock/BusinessBlock';
 import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
+import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
@@ -51,7 +52,6 @@ import { Video } from './Video/Video';
 export const Blocks: BlocksRegistry = {
   Accordion,
   AccordionItem,
-  CarouselLinks,
   BenefitsBlock,
   BusinessBlock,
   Bonus,
@@ -60,6 +60,8 @@ export const Blocks: BlocksRegistry = {
   Calculator,
   Carousel,
   CarouselCard,
+  CarouselLinks,
+  CarouselProgramsCard,
   CarouselTariffsCard,
   Catalog,
   ContactsBlock,

package/src/components/Calculator/Calculator.fixture.tsx

@@ -34,11 +34,6 @@ const CREDIT_CALCULATOR_BLOCK: CreditCalculatorParamsDef = {
 
 const DEPOSIT_CALCULATOR_BLOCK: DepositCalculatorParamsDef = {
   calcType: 'DepositCalculatorForm',
-  minSum: 50000,
-  maxSum: 5000000,
-  minMonths: 2,
-  maxMonths: 120,
-  rate: 5.9,
   buttons: buttons,
   footnote,
 };