@redneckz/wildless-cms-uni-blocks 0.6.49 → 0.7.1

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

@@ -2,7 +2,8 @@ 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 { style } from '../../utils/style';
+import type { SwipeContainerProps, SwipeListControlType } from './SwipeListControlProps';
 import { SwipeListItem } from './SwipeListItem';
 
 type ItemsVisibilityList = Array<IntersectionObserverEntry | undefined>;
@@ -20,6 +21,7 @@ interface SwipeListContainerProps extends SwipeContainerProps {
   snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
   onVisibleItemsChange?: (itemsVisibilityList: ItemsVisibilityList) => void;
   onVisibleIndicesChange?: (indices: number[]) => void;
+  listType?: SwipeListControlType;
 }
 
 const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]', 'min-w-[25%]'];
@@ -32,6 +34,7 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
     visibleItemCount = 0,
     gap = 0,
     padding = 0,
+    listType = 'horizontal-list',
     snapAlign = 'snap-center',
     children,
     onVisibleItemsChange,
@@ -54,25 +57,31 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
       },
       [onVisibleItemsChange, onVisibleIndicesChange],
     );
+
     const additionPadding = visibleItemCount > 0 ? gap * Number(visibleItemCount) - 1 : 0;
 
+    const isHorizontalList = listType === 'horizontal-list';
+    const containerStyle = {
+      ...(isHorizontalList ? getContainerStyle(padding, additionPadding) : {}),
+      gap: `${gap}px`,
+    };
+
     return (
       <div
-        className={`box-border overflow-auto flex horizontal-list no-scrollbar ${className}`}
-        style={{
-          ...getContainerStyle(padding, additionPadding),
-          gap: `${gap}px`,
-        }}
+        className={style('box-border overflow-auto no-scrollbar', listType, className)}
+        style={containerStyle}
         role="list"
         ref={containerRef}
       >
         {mapChildren((child, idx) => (
           <SwipeListItem
             key={String(idx)}
-            className={`${snapAlign} ${
-              visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''
-            }`}
-            style={getContainerStyle(padding / 4)}
+            className={style(
+              snapAlign,
+              visibleItemCount ? childStyleMap[visibleItemCount - 1] : '',
+              listType === 'vertical-list' ? 'h-full' : '',
+            )}
+            style={isHorizontalList ? getContainerStyle(padding / 4) : {}}
             activeIndex={activeIndex}
             idx={idx}
             observerOptions={observerOptions}

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

@@ -3,7 +3,7 @@ import '../../setup-fixture';
 import { SwipeListControl } from './SwipeListControl';
 
 const renderElement = (_: any, i: number): VNode => (
-  <div key={String(i)} className="border border-gray rounded-md text-center h-12">
+  <div key={String(i)} className="border border-gray rounded-md text-center h-full">
     {`Element #${i}`}
   </div>
 );
@@ -45,4 +45,9 @@ export default {
       <SwipeListControl>string content</SwipeListControl>
     </div>
   ),
+  vertical: (
+    <div className="px-4 py-5 bg-white h-80">
+      <SwipeListControl listType="vertical-list">{generateChildren(3)}</SwipeListControl>
+    </div>
+  ),
 };

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

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import { SwipeListContainer } from './SwipeListContainer';
 import { SwipeListControlDots } from './SwipeListControlDots';
 import type { SwipeListControlProps } from './SwipeListControlProps';
@@ -15,12 +16,13 @@ const DEFAULT_PADDING = 16;
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
-    className,
+    className = '',
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
     children,
     onVisibleIndicesChange,
+    listType = 'horizontal-list',
   }) => {
     const itemCount = Array.isArray(children) ? children.length : 0;
 
@@ -31,7 +33,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     const [activeIndex] = scroll.visibleIndicesRange;
 
     return (
-      <div className={className}>
+      <div className={style(className, listType === 'vertical-list' ? 'relative h-full' : '')}>
         <SwipeListContainer
           containerRef={containerRef}
           activeIndex={activeIndex}
@@ -39,6 +41,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
           gap={gap}
           padding={padding}
           onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
+          listType={listType}
         >
           {children}
         </SwipeListContainer>
@@ -47,6 +50,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
             containerRef={containerRef}
             activeIndex={activeIndex}
             dotCount={itemCount}
+            listType={listType}
           />
         ) : null}
       </div>

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

@@ -1,15 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { SwipeListControlType } from './SwipeListControlProps';
 
-const dotStyle = 'cursor-pointer bg-primary-main h-2 rounded-full transition-width duration-300';
+const containerStyles: Record<SwipeListControlType, string> = {
+  'horizontal-list': 'mx-auto mt-5 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 bg-primary-main rounded-full transition-width duration-300';
+
+const inactiveDotStyle = 'w-2 h-2 opacity-30';
 
 interface SwipeListControlDotsProps {
   containerRef?: { current: HTMLDivElement | null };
   activeIndex?: number;
   dotCount?: number;
+  listType?: SwipeListControlType;
 }
 
 export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
-  ({ containerRef, activeIndex, dotCount = 0 }) => {
+  ({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list' }) => {
     const handleClick = (idx: number) => {
       if (idx !== activeIndex && containerRef?.current) {
         containerRef.current.children[idx]?.scrollIntoView({
@@ -20,11 +34,13 @@ export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
     };
 
     return dotCount ? (
-      <div className="flex gap-2 mx-auto mt-5 w-fit">
+      <div className={`flex gap-2 ${containerStyles[listType]}`}>
         {new Array(dotCount).fill(null).map((_, idx: number) => (
           <div
             key={String(idx)}
-            className={`${dotStyle} ${idx === activeIndex ? 'w-6' : 'w-2 opacity-30'}`}
+            className={`${dotStyle} ${
+              idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle
+            }`}
             role="button"
             aria-hidden
             onClick={() => handleClick(idx)}

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

@@ -1,3 +1,9 @@
+/**
+ * @title Вид
+ * @enumNames ["Горизонтальный", "Вертикальный"]
+ */
+export type SwipeListControlType = 'horizontal-list' | 'vertical-list';
+
 /**
  * @title Контейнер
  */
@@ -15,5 +21,7 @@ export interface SwipeListControlProps extends SwipeContainerProps {
   className?: string;
   /** @title Точки-индикаторы */
   showDots?: boolean;
+  /** @hidden */
   onVisibleIndicesChange?: (indices: number[]) => void;
+  listType?: SwipeListControlType;
 }

package/src/utils/style.ts

@@ -0,0 +1,2 @@
+export const style = (...atoms: (string | null | undefined)[]): string =>
+  atoms.filter(Boolean).join(' ');