@redneckz/wildless-cms-uni-blocks 0.10.6 → 0.10.8

package/mobile/src/components/Calculator/renderPaymentType.tsx

@@ -1,49 +1,13 @@
-import { ListOrientation } from '../../model/ListOrientation';
-import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
-import { Text } from '../../ui-kit/Text/Text';
-
-export const ANNUITY = 'annuity';
-export const DIFFERENTIAL = 'differential';
-
-const paymentTypeItems = [
-  {
-    id: ANNUITY,
-    text: 'Аннуитетный',
-  },
-  {
-    id: DIFFERENTIAL,
-    text: 'Дифференцированный',
-  },
-];
-
-interface PaymentTypeProps {
-  isAnnuity: boolean;
-  callback?: (value: boolean) => void;
-  title?: string;
-  orientation?: ListOrientation;
-}
-
-export function renderPaymentType({
-  isAnnuity,
-  callback,
-  title,
-  orientation = 'horizontal',
-}: PaymentTypeProps) {
-  return (
-    <div>
-      {title ? (
-        <div className="mb-3">
-          <Text color="text-secondary-text" font="font-light">
-            {title}
-          </Text>
-        </div>
-      ) : null}
-      <RadioButtonGroup
-        orientation={orientation}
-        items={paymentTypeItems}
-        checkedItem={isAnnuity ? ANNUITY : DIFFERENTIAL}
-        onChange={(text: string) => callback && callback(text === ANNUITY)}
-      />
-    </div>
-  );
-}
+import {
+  BinaryRadioButtonGroupProps,
+  renderBinaryRadioButtonGroup,
+} from './renderBinaryRadioButtonGroup';
+
+export const renderPaymentType = (props: Partial<BinaryRadioButtonGroupProps>) =>
+  renderBinaryRadioButtonGroup({
+    ...props,
+    items: [
+      { id: 'annuity', text: 'Аннуитетный' },
+      { id: 'differential', text: 'Дифференцированный' },
+    ],
+  });

package/mobile/src/components/Calculator/renderRegistrationType.tsx

@@ -1,51 +1,13 @@
-import { ListOrientation } from '../../model/ListOrientation';
-import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
-import { Text } from '../../ui-kit/Text/Text';
-
-const REMOTE_REGISTRATION = 'remote';
-const OFFICE_REGISTRATION = 'office';
-
-const registrationTypeItems = [
-  {
-    id: OFFICE_REGISTRATION,
-    text: 'Офис Банка',
-  },
-  {
-    id: REMOTE_REGISTRATION,
-    text: 'Дистанционно',
-  },
-];
-
-interface RegistrationTypeProps {
-  isRemoteRegistration: boolean;
-  callback?: (value: boolean) => void;
-  title?: string;
-  orientation?: ListOrientation;
-}
-
-export function renderRegistrationType({
-  isRemoteRegistration,
-  callback,
-  title,
-  orientation = 'horizontal',
-}: RegistrationTypeProps) {
-  return (
-    <div>
-      {title ? (
-        <div className="mb-3">
-          <Text color="text-secondary-text" font="font-light">
-            {title}
-          </Text>
-        </div>
-      ) : null}
-      <div>
-        <RadioButtonGroup
-          orientation={orientation}
-          items={registrationTypeItems}
-          checkedItem={isRemoteRegistration ? REMOTE_REGISTRATION : OFFICE_REGISTRATION}
-          onChange={(text: string) => callback && callback(text === REMOTE_REGISTRATION)}
-        />
-      </div>
-    </div>
-  );
-}
+import {
+  BinaryRadioButtonGroupProps,
+  renderBinaryRadioButtonGroup,
+} from './renderBinaryRadioButtonGroup';
+
+export const renderRegistrationType = (props: Partial<BinaryRadioButtonGroupProps>) =>
+  renderBinaryRadioButtonGroup({
+    ...props,
+    items: [
+      { id: 'remote', text: 'Дистанционно' },
+      { id: 'office', text: 'Офис Банка' },
+    ],
+  });

package/mobile/src/components/Calculator/renderWantedSumInput.tsx

@@ -1,39 +1,22 @@
 import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import type { InputRangeProps } from '../../ui-kit/InputRange/InputRangeProps';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { clamp } from '../../utils/clamp';
 
 const DEFAULT_MONEY_STEP = 1000;
 
-interface RenderWantedSumParams {
-  minSum: number;
-  maxSum: number;
-  moneyValue: number;
-  className?: string;
-  step?: number;
+interface RenderWantedSumParams extends InputRangeProps {
   isShowItems?: boolean;
 }
 
-export function renderWantedSumInput(
-  title: string,
-  params: RenderWantedSumParams,
-  callback?: (value: number) => void,
-) {
-  const { moneyValue, minSum, maxSum, step = DEFAULT_MONEY_STEP, isShowItems = true } = params;
-
+export function renderWantedSumInput({
+  isShowItems = true,
+  step = DEFAULT_MONEY_STEP,
+  ...rest
+}: RenderWantedSumParams) {
   const items = [
-    `От ${addSpacesBetweenNumbers(minSum)} ₽`,
-    `До ${addSpacesBetweenNumbers(maxSum)} ₽`,
+    `От ${addSpacesBetweenNumbers(rest.min || 0)} ₽`,
+    `До ${addSpacesBetweenNumbers(rest.max || 0)} ₽`,
   ];
 
-  return (
-    <InputRange
-      title={title}
-      items={isShowItems ? items : []}
-      min={minSum}
-      max={maxSum}
-      step={step}
-      value={clamp(moneyValue, minSum, maxSum)}
-      onChange={callback}
-    />
-  );
+  return <InputRange items={isShowItems ? items : []} step={step} {...rest} />;
 }

package/mobile/src/components/Calculator/useDepositCalculatorParams.ts

@@ -45,7 +45,7 @@ export const useDepositCalculatorParams = (
   const data = useCalculatorParams<DepositCalculatorData>(
     sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR,
   );
-  const defaultMonth = data?.rateRows[0]
+  const defaultMonth = data?.rateRows?.[0]
     ? getMiddleMonth(data.rateRows[0].minMonths, data.rateRows[0].maxMonths)
     : 1;
   const isExcludeMonthlyInterestPayment = !paramsViewSettings?.isShowMonthlyInterestPayment;

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

@@ -10,14 +10,13 @@ import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListSc
 import { style } from '../../utils/style';
 import type { CarouselContent } from './CarouselContent';
 import { CarouselScrollButtons } from './CarouselScrollButtons';
+import { ITEMS_GAP } from './itemsGap';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
   showDots?: boolean;
 }
 
-const ITEMS_GAP = 4;
-
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({
     className = '',
@@ -83,7 +82,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             activeIndex={activeIndex}
             itemCount={count}
           />
-          {showDots ? renderDots(containerRef, dotsActiveIndex, itemCount) : null}
+          {showDots ? renderDots(containerRef, dotsActiveIndex, count) : null}
         </div>
       </BlockWrapper>
     );

package/mobile/src/components/Carousel/itemsGap.ts

@@ -0,0 +1 @@
+export const ITEMS_GAP = 16;

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -8,11 +8,9 @@ import { List } from '../../ui-kit/List/List';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
+import { BORDER_STYLE } from './cardStyle';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 
-const BORDER_STYLE =
-  'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
-
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
 export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
@@ -26,44 +24,40 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     target,
     title,
     align = 'text-left',
-    version = 'primary',
     ...rest
   }) => {
     return (
       <BlockWrapper
         className={style(
-          'relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50',
+          'relative box-border p-default group-data-gray:bg-main-divider/50',
           BORDER_STYLE,
           className,
         )}
-        version={version}
         {...rest}
       >
         <LinkWrapper href={href} target={target}>
           <Headline
-            className="mb-4"
+            className="mb-2"
             title={title}
             description={description}
             headlineVersion="S"
             isPadding={false}
             align={align}
           />
-          <div className="w-1/2 h-full flex flex-col flex-1 justify-end">
-            {items.length ? (
-              <List className="flex flex-col gap-2" itemClassName="text-l-light" items={items} />
-            ) : null}
-            {socialMedia.length ? <SocialMedia className="pt-10" media={socialMedia} /> : null}
-          </div>
-          {renderIconBlock(icon)}
+          {items.length ? (
+            <List className="flex flex-col gap-2" items={items} listItemSize="S" />
+          ) : null}
+          {renderIcon(icon)}
+          {socialMedia.length ? <SocialMedia className="mt-5" media={socialMedia} /> : null}
         </LinkWrapper>
       </BlockWrapper>
     );
   },
 );
 
-const renderIconBlock = (icon: Picture | undefined) => (
-  <div className="absolute bottom-0 right-0">
-    {icon?.icon ? <Img image={icon} /> : null}
-    {icon?.src ? <Img image={icon} /> : null}
-  </div>
-);
+const renderIcon = (icon?: Picture) =>
+  icon?.src || icon?.icon ? (
+    <div>
+      <Img image={icon} />
+    </div>
+  ) : null;

package/mobile/src/components/CarouselRecommendationCard/cardStyle.ts

@@ -0,0 +1,2 @@
+export const BORDER_STYLE =
+  'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -4,7 +4,6 @@ import type { Picture } from '../../model/Picture';
 import type { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
@@ -13,17 +12,16 @@ import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { style } from '../../utils/style';
-import type {
-  CarouselTariffsCardContent,
-  TariffsCardCellProps,
-} from './CarouselTariffsCardContent';
+import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import { getPaddingStyle } from './getPaddingStyle';
+import { renderCardInfo } from './renderCardInfo';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
 const VISIBLE_CELLS_COUNT = 1;
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, isHighlighting, button, cardCells = [], ...rest }) => {
+  ({ className = '', title, icon, isHighlighting = false, button, cardCells = [], ...rest }) => {
     const cellsNode = cardCells.map(renderCardInfo);
     const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
@@ -31,8 +29,8 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
     return (
       <BlockWrapper
         className={style(
-          'relative border border-gray p-8 flex flex-col',
-          getHitStyle(isHighlighting),
+          'relative border border-gray flex flex-col',
+          getPaddingStyle(isHighlighting),
           className,
         )}
         {...rest}
@@ -59,14 +57,10 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
 const renderIconBlock = (icon?: Picture) => (
   <div className="w-[267px] min-w-[267px] self-center">
-    {icon?.src ? <Img image={icon} /> : null}
-    {icon?.icon ? <Img image={icon} /> : null}
+    {icon?.src || icon?.icon ? <Img image={icon} /> : null}
   </div>
 );
 
-const getHitStyle = (isHighlighting?: boolean): string =>
-  isHighlighting ? 'mt-8 pt-20' : 'mt-20 pt-8';
-
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
     className="w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center"
@@ -82,24 +76,6 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
   </button>
 );
 
-const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
-  const { title, description, buttons } = cell;
-
-  return (
-    <div key={String(i)} className="py-5 border-b border-main-divider">
-      {title ? (
-        <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
-      ) : null}
-      {description ? (
-        <div className="text-primary-text text-h6 mt-1">{cell.description}</div>
-      ) : null}
-      {buttons?.length ? (
-        <div className="text-primary-main">{renderButtonsSection(buttons)}</div>
-      ) : null}
-    </div>
-  );
-};
-
 const renderHitIcon = (): VNode => (
   <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
     <Icon iconVersion="black" name="HeartIcon" width="23" height="22" />

package/mobile/src/components/CarouselTariffsCard/descriptionSize.tsx

@@ -0,0 +1 @@
+export const descriptionSize = 'text-l';

package/mobile/src/components/CarouselTariffsCard/getPaddingStyle.tsx

@@ -0,0 +1,2 @@
+export const getPaddingStyle = (isHighlighting = false): string =>
+  isHighlighting ? 'p-default mt-6' : 'mt-6 p-default'; // Хак для мобильной версии т.к. контракт должен быть идентичный

package/mobile/src/components/CarouselTariffsCard/renderCardInfo.tsx

@@ -0,0 +1,31 @@
+import { VNode } from '../../model/VNode';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { Text } from '../../ui-kit/Text/Text';
+import { TariffsCardCellProps } from './CarouselTariffsCardContent';
+import { descriptionSize } from './descriptionSize';
+
+export const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
+  const { title, description, buttons } = cell;
+
+  return (
+    <div key={String(i)} className="py-5 border-b border-main-divider">
+      {title ? (
+        <div className="opacity-80">
+          <Text size="text-m" color="text-secondary-text">
+            {title}
+          </Text>
+        </div>
+      ) : null}
+      {description ? (
+        <div className="mt-1">
+          <Text size={descriptionSize} color="text-primary-text">
+            {description}
+          </Text>
+        </div>
+      ) : null}
+      {buttons?.length ? (
+        <div className="text-primary-main">{renderButtonsSection(buttons)}</div>
+      ) : null}
+    </div>
+  );
+};

package/mobile/src/components/Footer/Footer.tsx

@@ -43,7 +43,7 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
         {...rest}
       />
       <SearchBar className="grow" />
-      <SocialMedia className="pb-4" media={socialMedia} />
+      <SocialMedia className="pt-6 pb-6" media={socialMedia} />
       <HorizontalNavigation title={horizontalNavigationTitle} links={relatedEnterprises} />
       <TextInformation links={documents} />
     </BlockWrapper>

package/mobile/src/components/Footer/SocialMedia.tsx

@@ -8,7 +8,7 @@ export interface SocialMediaProps {
 }
 
 export const SocialMedia = JSX<SocialMediaProps>(({ className = '', media }) => (
-  <div className={`flex gap-2 items-start justify-start pt-6 pb-6 ${className}`}>
+  <div className={`flex gap-2 items-start justify-start ${className}`}>
     {media?.map((_, index) => (
       <MediaButton key={String(index)} {..._} />
     ))}

package/mobile/src/components/Headline/Headline.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import type { TextSize } from '../../ui-kit/Text/TextProps';
 import { style } from '../../utils/style';
-import type { HeadlineContent } from './HeadlineContent';
 import { headlineVersionStyles } from './headlineVersionStyles';
+import type { TextSize } from '../../ui-kit/Text/TextProps';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
@@ -25,10 +25,11 @@ export const Headline = JSX<HeadlineProps>(
   }) => {
     const versionStyle = headlineVersionStyles[headlineVersion];
     const paddingStyle = isPadding ? 'p-default' : '';
+    const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
 
     return (
       <BlockWrapper
-        className={style('flex flex-col', paddingStyle, versionStyle.wrapper, className)}
+        className={style(paddingStyle, className)}
         version={version}
         isTheme={isTheme}
         {...rest}
@@ -42,7 +43,11 @@ export const Headline = JSX<HeadlineProps>(
           />
         ) : null}
         {description ? (
-          <Paragraph size={versionStyle.descriptionSize as TextSize} align={align}>
+          <Paragraph
+            size={versionStyle.descriptionSize as TextSize}
+            align={align}
+            {...descriptionStyle}
+          >
             {description}
           </Paragraph>
         ) : null}

package/mobile/src/components/Headline/headlineVersionStyles.ts

@@ -5,40 +5,40 @@ import type { TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
 export const headlineVersionStyles: Record<
   HeadlineVersion,
   {
-    wrapper: string;
     title: HeadingCommonProps;
     descriptionSize: TextSize | TitleSize;
+    descriptionStyle: string;
   }
 > = {
   XXL: {
-    wrapper: 'gap-[18px]',
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
+    descriptionStyle: 'mt-5',
   },
   XL: {
-    wrapper: 'gap-4',
     title: { headingType: 'h1', as: 'h1' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-4',
   },
   L: {
-    wrapper: 'gap-4',
     title: { headingType: 'h2', as: 'h2' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-4',
   },
   M: {
-    wrapper: 'gap-3',
     title: { headingType: 'h3', as: 'h3' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-3',
   },
   S: {
-    wrapper: 'gap-2',
     title: { headingType: 'h4', as: 'h4' },
     descriptionSize: 'text-xl-light',
+    descriptionStyle: 'mt-2',
   },
   XS: {
-    wrapper: 'gap-2',
     title: { headingType: 'h5', as: 'h5' },
     descriptionSize: 'text-l-light',
+    descriptionStyle: 'mt-2',
   },
 };
 

package/mobile/src/components/Tabs/CenteredTabs.tsx

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { RenderTabProps } from './renderTab';
+import { renderTab } from './renderTab';
+import type { TabData } from './TabsContent';
+
+interface CenteredTabsProps extends RenderTabProps {
+  tabs?: TabData[];
+}
+
+export const CenteredTabs = JSX<CenteredTabsProps>(({ tabs, ...rest }) => (
+  <div className="flex p-1 m-auto bg-main-gray rounded-md">{tabs?.map(renderTab({ ...rest }))}</div>
+));

package/mobile/src/components/Tabs/LinkTab.tsx

@@ -1,17 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import { getLinkTabClassName } from './tabItemClasses';
-import type { LinkTabData, TabData } from './TabsContent';
+import type { LinkTabData, TabData, TabsMode } from './TabsContent';
 
 interface LinkTabProps {
   tab: LinkTabData;
   currentTab?: TabData;
-  isScrollable?: boolean;
   onClick: (tab: TabData) => void;
+  tabsMode?: TabsMode;
 }
 
 export const LinkTab = JSX<LinkTabProps>((props) => {
-  const { tab, currentTab, onClick, isScrollable = false } = props;
+  const { tab, currentTab, onClick, tabsMode } = props;
   const active = currentTab?.type === 'link' && currentTab.href === tab.href;
 
   const link = useLink();
@@ -25,12 +25,12 @@ export const LinkTab = JSX<LinkTabProps>((props) => {
   return (
     <a
       role="tab"
-      className={getLinkTabClassName('link', active, isScrollable)}
+      className={getLinkTabClassName('link', active, tabsMode)}
       target={tab.target}
       href={adjustedProps.href}
       onClick={handleClick}
     >
-      <span className={getLinkTabClassName('text', active, isScrollable)}>{tab.text}</span>
+      <span className={getLinkTabClassName('text', active, tabsMode)}>{tab.text}</span>
     </a>
   );
 });

package/mobile/src/components/Tabs/ScrollableTabs.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { RenderTabProps } from './renderTab';
-import type { TabData } from './TabsContent';
+import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
-import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
+import type { RenderTabProps } from './renderTab';
 import { renderTab } from './renderTab';
+import type { TabData } from './TabsContent';
 
 interface ScrollableTabsProps extends RenderTabProps {
   tabs?: TabData[];
@@ -15,7 +15,7 @@ export type IsScrollButtonsShown = boolean[];
 const scrollButtonStyle = 'absolute z-40 top-0';
 
 export const ScrollableTabs = JSX<ScrollableTabsProps>((props) => {
-  const { tabs, onClick, currentTab, page, showCounter } = props;
+  const { tabs, ...rest } = props;
 
   const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
     itemCount: tabs?.length || 0,
@@ -30,15 +30,7 @@ export const ScrollableTabs = JSX<ScrollableTabsProps>((props) => {
           snapAlign="snap-start"
           onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
         >
-          {tabs?.map(
-            renderTab({
-              onClick,
-              currentTab,
-              showCounter,
-              page,
-              isScrollable: true,
-            }),
-          )}
+          {tabs?.map(renderTab({ ...rest }))}
         </SwipeListContainer>
       </div>
       {scroll.canScrollLeft ? (