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

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

@@ -1,50 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
-import { SwipeListControlItem } from './SwipeListControlItem';
-import { SwipeContainer } from './SwipeListControlProps';
-import { getContainerStyle } from './utils/getContainerStyle';
-
-/**
- * @title Список
- */
-export interface SwipeListControlListProps extends SwipeContainer {
-  className?: string;
-  activeIndex: number;
-  onScroll?: JSX.IntrinsicElements['div']['onScroll'];
-}
-
-export const SwipeListControlList = JSX<SwipeListControlListProps>(
-  ({
-    className = '',
-    activeIndex = -1,
-    gap = DEFAULT_GAP,
-    padding = DEFAULT_PADDING,
-    children,
-    onScroll,
-  }) => {
-    return children ? (
-      <div
-        className={`overflow-auto flex horizontal-list no-scrollbar ${className}`}
-        style={{ ...getContainerStyle(padding), gap: `${gap}px` }}
-        role="list"
-        onScroll={onScroll}
-      >
-        {children.length && children.map ? (
-          children.map((child, idx) => (
-            <SwipeListControlItem
-              key={String(idx)}
-              style={getContainerStyle(padding / 4)}
-              aria-current={Boolean(activeIndex === idx)}
-            >
-              {child}
-            </SwipeListControlItem>
-          ))
-        ) : (
-          <SwipeListControlItem style={getContainerStyle(padding / 4)} aria-current>
-            {children}
-          </SwipeListControlItem>
-        )}
-      </div>
-    ) : null;
-  },
-);

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

@@ -1,10 +0,0 @@
-// column-gap between children of SwipeListControl container
-export 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.
- */
-export const DEFAULT_PADDING = 16;
-
-// Classes used to compensate outer container padding, so that child elements won't be clipped

package/mobile/src/ui-kit/SwipeListControl/utils/getContainerStyle.ts

@@ -1,9 +0,0 @@
-// styles used to compensate outer container padding to get rid of clipping effect
-export const getContainerStyle = (padding: number): Record<string, string> => {
-  return {
-    marginLeft: `${-padding}px`,
-    marginRight: `${-padding}px`,
-    paddingLeft: `${padding}px`,
-    paddingRight: `${padding}px`,
-  };
-};

package/mobile/src/ui-kit/SwipeListControl/utils/getIndexParts.ts

@@ -1,25 +0,0 @@
-/*
-  Returns object containing whole index part, and it's decimal part for a given
-  scrollLeft value of a container and an array of tuple containing values of a
-  start and end boundaries of a scrollable child, right boundary non-inclusive.
-  Returns object with index equal -1 and fraction equal 0 if scrollLeft is outside given scrollPoints
- */
-export const getIndexParts = (
-  scrollLeft: number,
-  scrollPoints: [number, number][],
-): {
-  index: number;
-  fraction: number;
-} => {
-  const index = scrollPoints.findIndex(
-    ([pointStart, pointEnd]) => pointStart <= scrollLeft && scrollLeft < pointEnd,
-  );
-  if (index < 0) {
-    return { index, fraction: 0 };
-  }
-
-  const [start, end] = scrollPoints[index];
-  const fraction = (scrollLeft - start) / (end - start);
-
-  return { index, fraction };
-};

package/mobile/src/ui-kit/SwipeListControl/utils/getScrollPoints.ts

@@ -1,49 +0,0 @@
-/*
- Calculates array of breakpoints for each scrollable element in container.
- Returns array of tuples consisting of [start, end] boundary scrollLeft values.
-*/
-export const getScrollPoints = ({
-  gap,
-  padding,
-  clientWidth,
-  scrollWidth,
-  childElementCount,
-  itemWidth,
-}: {
-  gap: number;
-  padding: number;
-  clientWidth: number;
-  scrollWidth: number;
-  childElementCount: number;
-  itemWidth: number;
-}): [number, number][] => {
-  const scrollableDistance = scrollWidth - clientWidth;
-
-  if (childElementCount === 2) {
-    return [
-      [0, scrollableDistance],
-      [scrollableDistance, scrollWidth],
-    ];
-  }
-
-  const scrollItemWidth = itemWidth + gap;
-  const edgeScrollDistance = clientWidth - gap - padding;
-
-  const lastScrollableIdx = childElementCount - 2;
-  const scrollPoints: [number, number][] = new Array(childElementCount)
-    .fill(0)
-    .map((_, idx) =>
-      idx === 0 || idx === lastScrollableIdx
-        ? [
-            idx > 0 ? scrollableDistance - edgeScrollDistance : 0,
-            idx > 0 ? scrollableDistance : edgeScrollDistance,
-          ]
-        : [
-            (idx - 1) * scrollItemWidth + edgeScrollDistance,
-            idx * scrollItemWidth + edgeScrollDistance,
-          ],
-    );
-  scrollPoints[childElementCount - 1] = [scrollableDistance, scrollWidth];
-
-  return scrollPoints;
-};

package/src/components/Carousel/CarouselContainer.tsx

@@ -1,34 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-
-interface CarouselContainerProps {
-  activeIndex: number;
-  itemCount: number;
-  visibleItemCount?: number;
-  containerRef?: { current: HTMLDivElement | null };
-}
-
-const childStyleMap = ['[&>*]:min-w-[100%]', '[&>*]:min-w-[50%]', '[&>*]:min-w-[33.33%]'];
-
-export const CarouselContainer = JSX<CarouselContainerProps>(
-  ({ activeIndex, itemCount, visibleItemCount, containerRef, children }) => {
-    const scrollWidth = containerRef?.current?.scrollWidth || 0;
-    const maxScrollLeft = scrollWidth - (containerRef?.current?.clientWidth || 0);
-
-    const translateX = visibleItemCount
-      ? `${-Math.round((100 * activeIndex) / visibleItemCount)}%`
-      : `${-Math.round(Math.min((scrollWidth * activeIndex) / (itemCount || 1), maxScrollLeft))}px`;
-
-    return (
-      <div
-        className={`flex gap-1 duration-1000 ${
-          visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''
-        }`}
-        style={{ transform: `translateX(${translateX})` }}
-        role="list"
-        ref={containerRef}
-      >
-        {children}
-      </div>
-    );
-  },
-);

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

@@ -1,24 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-
-/**
- * @title Элемент списка
- */
-export interface SwipeListControlItemProps {
-  className?: string;
-  style?: Record<string, string>;
-  'aria-current'?: boolean;
-}
-
-export const SwipeListControlItem = JSX<SwipeListControlItemProps>(
-  ({ className = '', children, ...rest }) => {
-    return (
-      <div
-        className={`snap-center snap-always min-w-full box-border ${className}`}
-        role="listitem"
-        {...rest}
-      >
-        {children}
-      </div>
-    );
-  },
-);

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

@@ -1,50 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
-import { SwipeListControlItem } from './SwipeListControlItem';
-import { SwipeContainer } from './SwipeListControlProps';
-import { getContainerStyle } from './utils/getContainerStyle';
-
-/**
- * @title Список
- */
-export interface SwipeListControlListProps extends SwipeContainer {
-  className?: string;
-  activeIndex: number;
-  onScroll?: JSX.IntrinsicElements['div']['onScroll'];
-}
-
-export const SwipeListControlList = JSX<SwipeListControlListProps>(
-  ({
-    className = '',
-    activeIndex = -1,
-    gap = DEFAULT_GAP,
-    padding = DEFAULT_PADDING,
-    children,
-    onScroll,
-  }) => {
-    return children ? (
-      <div
-        className={`overflow-auto flex horizontal-list no-scrollbar ${className}`}
-        style={{ ...getContainerStyle(padding), gap: `${gap}px` }}
-        role="list"
-        onScroll={onScroll}
-      >
-        {children.length && children.map ? (
-          children.map((child, idx) => (
-            <SwipeListControlItem
-              key={String(idx)}
-              style={getContainerStyle(padding / 4)}
-              aria-current={Boolean(activeIndex === idx)}
-            >
-              {child}
-            </SwipeListControlItem>
-          ))
-        ) : (
-          <SwipeListControlItem style={getContainerStyle(padding / 4)} aria-current>
-            {children}
-          </SwipeListControlItem>
-        )}
-      </div>
-    ) : null;
-  },
-);

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

@@ -1,10 +0,0 @@
-// column-gap between children of SwipeListControl container
-export 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.
- */
-export const DEFAULT_PADDING = 16;
-
-// Classes used to compensate outer container padding, so that child elements won't be clipped

package/src/ui-kit/SwipeListControl/utils/getContainerStyle.ts

@@ -1,9 +0,0 @@
-// styles used to compensate outer container padding to get rid of clipping effect
-export const getContainerStyle = (padding: number): Record<string, string> => {
-  return {
-    marginLeft: `${-padding}px`,
-    marginRight: `${-padding}px`,
-    paddingLeft: `${padding}px`,
-    paddingRight: `${padding}px`,
-  };
-};

package/src/ui-kit/SwipeListControl/utils/getIndexParts.ts

@@ -1,25 +0,0 @@
-/*
-  Returns object containing whole index part, and it's decimal part for a given
-  scrollLeft value of a container and an array of tuple containing values of a
-  start and end boundaries of a scrollable child, right boundary non-inclusive.
-  Returns object with index equal -1 and fraction equal 0 if scrollLeft is outside given scrollPoints
- */
-export const getIndexParts = (
-  scrollLeft: number,
-  scrollPoints: [number, number][],
-): {
-  index: number;
-  fraction: number;
-} => {
-  const index = scrollPoints.findIndex(
-    ([pointStart, pointEnd]) => pointStart <= scrollLeft && scrollLeft < pointEnd,
-  );
-  if (index < 0) {
-    return { index, fraction: 0 };
-  }
-
-  const [start, end] = scrollPoints[index];
-  const fraction = (scrollLeft - start) / (end - start);
-
-  return { index, fraction };
-};

package/src/ui-kit/SwipeListControl/utils/getScrollPoints.ts

@@ -1,49 +0,0 @@
-/*
- Calculates array of breakpoints for each scrollable element in container.
- Returns array of tuples consisting of [start, end] boundary scrollLeft values.
-*/
-export const getScrollPoints = ({
-  gap,
-  padding,
-  clientWidth,
-  scrollWidth,
-  childElementCount,
-  itemWidth,
-}: {
-  gap: number;
-  padding: number;
-  clientWidth: number;
-  scrollWidth: number;
-  childElementCount: number;
-  itemWidth: number;
-}): [number, number][] => {
-  const scrollableDistance = scrollWidth - clientWidth;
-
-  if (childElementCount === 2) {
-    return [
-      [0, scrollableDistance],
-      [scrollableDistance, scrollWidth],
-    ];
-  }
-
-  const scrollItemWidth = itemWidth + gap;
-  const edgeScrollDistance = clientWidth - gap - padding;
-
-  const lastScrollableIdx = childElementCount - 2;
-  const scrollPoints: [number, number][] = new Array(childElementCount)
-    .fill(0)
-    .map((_, idx) =>
-      idx === 0 || idx === lastScrollableIdx
-        ? [
-            idx > 0 ? scrollableDistance - edgeScrollDistance : 0,
-            idx > 0 ? scrollableDistance : edgeScrollDistance,
-          ]
-        : [
-            (idx - 1) * scrollItemWidth + edgeScrollDistance,
-            idx * scrollItemWidth + edgeScrollDistance,
-          ],
-    );
-  scrollPoints[childElementCount - 1] = [scrollableDistance, scrollWidth];
-
-  return scrollPoints;
-};