@redneckz/wildless-cms-uni-blocks 0.14.147 → 0.14.149

package/src/ui-kit/Shimmer/Shimmer.tsx

@@ -0,0 +1,29 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+
+const GOLDEN_RATIO = 1.618;
+
+export interface ShimmerProps {
+  className?: string;
+  size?: number;
+}
+
+export const Shimmer = JSX<ShimmerProps>(({ className, size }) => (
+  <figure className={style('m-0 mt-xl min-w-[80%]', className)}>{renderShimmer(size)}</figure>
+));
+
+const renderShimmer = (size = 3) =>
+  goldenSequence(100, size)
+    .map((_) => Math.floor(_))
+    .map(renderShimmerItem);
+
+const renderShimmerItem = (width: number, index: number) => (
+  <div
+    key={String(index)}
+    style={{ width: `${width || 100}%` }}
+    className="h-4 mt-xs bg-secondary-light"
+  />
+);
+
+const goldenSequence = (first: number, size: number): number[] =>
+  [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);

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

@@ -9,16 +9,15 @@ import { SwipeListItem } from './SwipeListItem';
 
 type ItemsVisibilityList = Array<IntersectionObserverEntry | undefined>;
 
-type SwipeListItemWidthAuto = 0;
-
 /**
  * @title Список
  */
 interface SwipeListContainerProps extends SwipeListContainerContent {
   className?: string;
+  itemClassName?: string;
   containerRef?: { current: HTMLDivElement | null };
   activeIndex?: number;
-  visibleItemCount?: SwipeListItemWidthAuto | 1 | 2 | 3 | 4;
+  visibleItemCount?: 0 | 1 | 2 | 3 | 4;
   snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
   gap?: number;
   padding?: number;
@@ -30,7 +29,8 @@ const childStyleMap = ['min-w-full', '@lg:min-w-[50%]', '@lg:min-w-[33.3%]', '@l
 
 export const SwipeListContainer = JSX<SwipeListContainerProps>(
   ({
-    className = '',
+    className,
+    itemClassName,
     containerRef,
     activeIndex,
     visibleItemCount = 0,
@@ -84,6 +84,7 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
               snapAlign,
               visibleItemCount ? childStyleMap[visibleItemCount - 1] : '',
               isVerticalList ? 'h-full' : '',
+              itemClassName,
             )}
             style={isHorizontalList ? getContainerOffset(padding / 4) : {}}
             activeIndex={activeIndex}

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

@@ -4,6 +4,7 @@ import {
   useIntersectionObserver,
   type IntersectionObserverOptions,
 } from '../../hooks/useIntersectionObserver';
+import { style } from '../../utils/style';
 
 /**
  * @title Элемент списка
@@ -18,7 +19,15 @@ interface SwipeListControlItemProps {
 }
 
 export const SwipeListItem = JSX<SwipeListControlItemProps>(
-  ({ className = '', style, idx, activeIndex, observerOptions, children, onIntersection }) => {
+  ({
+    className,
+    style: inlineStyle,
+    idx,
+    activeIndex,
+    observerOptions,
+    children,
+    onIntersection,
+  }) => {
     const observerCallback = useCallback(
       (entries: IntersectionObserverEntry[]) => {
         if (entries.length && onIntersection) {
@@ -31,8 +40,8 @@ export const SwipeListItem = JSX<SwipeListControlItemProps>(
 
     return (
       <div
-        className={`inline-block snap-always box-border ${className}`}
-        style={style}
+        className={style('inline-block snap-always box-border', className)}
+        style={inlineStyle}
         aria-current={Boolean(idx === activeIndex)}
         ref={ref}
       >

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

@@ -9,7 +9,7 @@ import { scrollToStart } from './scrollToStart';
 export interface SwipeListScroll {
   scrollLeft: () => void;
   scrollRight: () => void;
-  scrollTo: (idx: number) => void;
+  scrollTo: (idx: number, options?: ScrollIntoViewOptions) => void;
   canScrollLeft: boolean;
   canScrollRight: boolean;
   visibleIndicesRange: [number, number];
@@ -70,13 +70,16 @@ export const useSwipeListScroll = <E extends HTMLElement>({
   }, [itemCount, canScrollRight]);
 
   const scrollTo = useCallback(
-    (idx: number) => {
+    (
+      idx: number,
+      options = {
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'center',
+      } as ScrollIntoViewOptions,
+    ) => {
       if (containerRef?.current) {
-        containerRef.current.children[idx]?.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-          inline: 'center',
-        });
+        containerRef.current.children[idx]?.scrollIntoView(options);
       }
     },
     [containerRef],