@redneckz/wildless-cms-uni-blocks 0.14.335 → 0.14.337

package/src/components/TabsLayout/TabsLayout.fixture.mobile.tsx

@@ -9,8 +9,40 @@ const options: BlockRendererOptions = {
 };
 
 const TABS: Tab[] = [
-  { text: 'Первый таб', description: 'Описание первого таба', type: 'group' },
-  { text: 'Второй таб', description: 'Описание второго таба', type: 'group' },
+  {
+    type: 'group',
+    description: 'Описание первого таб группа',
+    text: 'Первый таб',
+    selected: false,
+  },
+  {
+    type: 'group',
+    description: 'Описание первого таб группа',
+    text: 'Второй таб',
+    selected: false,
+  },
+  {
+    type: 'group',
+    description: 'Описание первого таб группа',
+    text: 'Третий таб и с очень длинным текстом',
+    selected: false,
+  },
+];
+const TabsWithIcon: Tab[] = [
+  {
+    type: 'group',
+    description: 'Описание первого таба',
+    text: 'Первый таб',
+    selected: false,
+    icon: { icon: 'CalendarIcon' },
+  },
+  {
+    type: 'group',
+    description: 'Описание второго таба',
+    text: 'Второй таб',
+    selected: false,
+    icon: { icon: 'BankIcon' },
+  },
 ];
 
 const TEXT_BLOCK_DESCRIPTION = {
@@ -22,52 +54,66 @@ const TEXT_BLOCK_DESCRIPTION = {
   style: ['col-span-12'],
 };
 
+const slots = {
+  'Первый таб': [TEXT_BLOCK_DESCRIPTION],
+  'Второй таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+  'Третий таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TABS}
+        tabsType="default"
         options={options}
+        block={{ slots }}
+      />
+    </div>
+  ),
+  animated: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TABS}
         tabsType="animated"
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        options={options}
+        block={{ slots }}
       />
     </div>
   ),
-  wide: (
+  underlined: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TABS}
+        tabsType="underlined"
         options={options}
-        tabsType="default"
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        block={{ slots }}
+      />
+    </div>
+  ),
+  animatedIcons: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TabsWithIcon}
+        tabsType="animated"
+        options={options}
+        block={{ slots }}
       />
     </div>
   ),
-  scrollable: (
+  defaultCounter: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TABS}
+        tabsType="default"
         options={options}
-        tabsType="underlined"
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        block={{ slots }}
+        showCounter={true}
       />
     </div>
   ),

package/src/components/TabsLayout/TabsLayout.fixture.tsx

@@ -21,6 +21,12 @@ const TABS: Tab[] = [
     text: 'Второй таб',
     selected: false,
   },
+  {
+    type: 'group',
+    description: 'Описание первого таб группа',
+    text: 'Третий таб и с очень длинным текстом и так далее и тому подобное',
+    selected: false,
+  },
 ];
 const TabsWithIcon: Tab[] = [
   {
@@ -48,68 +54,66 @@ const TEXT_BLOCK_DESCRIPTION = {
   style: ['col-span-12'],
 };
 
+const slots = {
+  'Первый таб': [TEXT_BLOCK_DESCRIPTION],
+  'Второй таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+  'Третий таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TABS}
-        tabsType="animated"
+        tabsType="default"
         options={options}
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        block={{ slots }}
       />
     </div>
   ),
-  wide: (
+  animated: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TABS}
-        tabsType="default"
+        tabsType="animated"
         options={options}
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        block={{ slots }}
       />
     </div>
   ),
-  scrollable: (
+  underlined: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TABS}
         tabsType="underlined"
         options={options}
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        block={{ slots }}
       />
     </div>
   ),
-  icons: (
+  animatedIcons: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
         tabs={TabsWithIcon}
         tabsType="animated"
         options={options}
-        block={{
-          slots: {
-            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
-            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
-          },
-        }}
+        block={{ slots }}
+      />
+    </div>
+  ),
+  defaultCounter: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TABS}
+        tabsType="default"
+        options={options}
+        block={{ slots }}
+        showCounter={true}
       />
     </div>
   ),

package/src/components/TabsLayout/TabsLayout.tsx

@@ -11,21 +11,31 @@ import { type Tab, type TabsLayoutContent } from './TabsLayoutContent';
 
 const TAB_QUERY_PARAM_KEY = 'tab';
 
+type TabCountedProps = Tab & {
+  count?: number;
+};
 export interface TabsLayoutProps extends TabsLayoutContent, UniBlockProps {}
 
 export const TabsLayout = UniBlock<TabsLayoutProps>(
-  ({ className = '', tabs = [], block, tabsType, ...rest }) => {
+  ({ className = '', tabs = [], block, tabsType, showCounter = false, ...rest }) => {
     const router = useRouter();
 
+    const tabsCounted: TabCountedProps[] = showCounter
+      ? tabs.map((_) => ({
+          ..._,
+          count: block?.slots?.[_?.text ?? '']?.length ?? 0,
+        }))
+      : tabs;
+
     const { isReady } = router;
 
-    const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
+    const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabsCounted));
 
-    const defaultSelectedTab = tabs.findIndex((_) => Boolean(_.selected));
+    const defaultSelectedTab = tabsCounted.findIndex((_) => Boolean(_.selected));
 
     useEffect(() => {
       const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
-        ? tabs.findIndex(
+        ? tabsCounted.findIndex(
             (_, index) => _.type === 'group' && String(index) === router.query[TAB_QUERY_PARAM_KEY],
           )
         : defaultSelectedTab;
@@ -33,7 +43,7 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
       setActiveTabIndex(defaultTabIndex === -1 ? 0 : defaultTabIndex);
     }, [isReady, defaultSelectedTab]);
 
-    const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
+    const slotName = getSlotName(tabsCounted[activeTabIndex], activeTabIndex);
 
     const updateUrlSearchTabParam = (_: TabItemBase, index: number) => {
       const searchParams = new URLSearchParams(router.query as Record<string, string>);
@@ -47,8 +57,8 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
 
     const handleChange = useCallback(
       (_: TabItemBase) => {
-        const index = tabs.indexOf(_ as Tab);
-        const tab = tabs[index];
+        const index = tabsCounted.indexOf(_ as Tab);
+        const tab = tabsCounted[index];
 
         setActiveTabIndex(index);
 
@@ -56,14 +66,14 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
           updateUrlSearchTabParam(_, index);
         }
       },
-      [tabs],
+      [tabsCounted],
     );
 
     return (
       <BlockWrapper className={style(className)} defaultPadding="p-0" {...rest}>
         {renderTabsLayout({
-          items: tabs,
-          value: tabs[activeTabIndex],
+          items: tabsCounted,
+          value: tabsCounted[activeTabIndex],
           tabsType,
           onChange: handleChange,
         })}

package/src/components/TabsLayout/renderTabsLayout.tsx

@@ -1,6 +1,5 @@
 import { ScrollableTabsControl } from '../../ui-kit/TabsControl/ScrollableTabsControl';
 import { type TabItemBase } from '../../ui-kit/TabsControl/TabItem';
-import { TabsControl } from '../../ui-kit/TabsControl/TabsControl';
 import { type TabsControlProps, type TabsType } from '../../ui-kit/TabsControl/TabsControlProps';
 
 interface RenderTabsProps {
@@ -10,23 +9,28 @@ interface RenderTabsProps {
   tabsType?: TabsType;
 }
 
-export const renderTabsLayout = ({ tabsType = 'animated', ...props }: RenderTabsProps) => {
-  switch (tabsType) {
-    case 'default':
-      return <TabsControl {...props} />;
-    case 'underlined':
-      return (
-        <div className="flex">
-          <TabsControl className="m-auto" tabsType="underlined" {...props} />
-        </div>
-      );
-    case 'animated':
-      return (
-        <div className="border-b-8 border-primary-main">
-          <ScrollableTabsControl className="m-auto" {...props} tabsType="animated" />
-        </div>
-      );
-    default:
-      return null;
-  }
+const tabsStyle: Record<TabsType, { wrapper: string; component: string }> = {
+  default: {
+    wrapper: '',
+    component: '',
+  },
+  animated: {
+    wrapper: 'border-b-8 border-primary-main bg-white',
+    component: 'm-auto',
+  },
+  underlined: {
+    wrapper: 'flex',
+    component: 'm-auto',
+  },
 };
+
+export const renderTabsLayout = ({ tabsType = 'animated', ...props }: RenderTabsProps) =>
+  tabsType ? (
+    <div className={tabsStyle[tabsType].wrapper}>
+      <ScrollableTabsControl
+        className={tabsStyle[tabsType].component}
+        tabsType={tabsType}
+        {...props}
+      />
+    </div>
+  ) : null;

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

@@ -18,18 +18,16 @@ const badgeTextColorStyleMap: Record<string, TextColor> = {
   secondary: 'text-secondary-text',
 };
 
-export const Badge = JSX<BadgeProps>(({ count, version = 'secondary' }) => {
-  return (
-    <div
-      className={style(
-        'w-6 h-6 rounded-full flex items-center justify-center',
-        badgeBgStyleMap[version],
-      )}
-      role="status"
-    >
-      <Text size="text-xs" color={badgeTextColorStyleMap[version]}>
-        {count}
-      </Text>
-    </div>
-  );
-});
+export const Badge = JSX<BadgeProps>(({ count, version = 'secondary' }) => (
+  <div
+    className={style(
+      'w-6 h-6 rounded-full flex items-center justify-center',
+      badgeBgStyleMap[version],
+    )}
+    role="status"
+  >
+    <Text size="text-xs" color={badgeTextColorStyleMap[version]}>
+      {count}
+    </Text>
+  </div>
+));

package/src/ui-kit/BaseFiltration/useHotFilters.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import { type BlockDef } from '../../model/ContentPageDef';
-import { Badge } from '../Badge/Badge';
+import { getVersion } from '../../utils/getVersion';
 import { type TabItemBase } from '../TabsControl/TabItem';
 import { type TabsControlProps } from '../TabsControl/TabsControlProps';
 import { getBadgeCount } from './getBadgeCount';
@@ -40,12 +40,8 @@ export const useHotFilters = ({
     () =>
       hotFilters.map((_) => ({
         text: _.text,
-        appendRight: (
-          <Badge
-            version={_ === hotFilters[activeItemIndex] ? 'primary' : 'secondary'}
-            count={getBadgeCount(blocks, _.filter)}
-          />
-        ),
+        count: getBadgeCount(blocks, _.filter),
+        version: getVersion(_ === hotFilters[activeItemIndex]),
       })),
     [hotFilters, blocks, activeItemIndex],
   );

package/src/ui-kit/TabsControl/ScrollableTabsControl.tsx

@@ -4,18 +4,23 @@ import { ScrollLeftButton, ScrollRightButton } from '../LinkButton/ArrowButton';
 import { SwipeListContainer } from '../SwipeListControl/SwipeListContainer';
 import { useSwipeListScroll } from '../SwipeListControl/useSwipeListScroll';
 import { renderTab } from './renderTab';
-import { type TabsControlProps } from './TabsControlProps';
+import { type TabsControlProps, type TabsType } from './TabsControlProps';
 
 const scrollButtonStyle = 'hidden sm:flex absolute z-40';
 
-const scrollStyleType = {
+const scrollStyle: Record<TabsType, { item: string; gap: number; buttonTop: string }> = {
+  default: {
+    item: 'flex-1',
+    gap: 0,
+    buttonTop: 'top-0',
+  },
   animated: {
-    itemClassName: 'flex',
+    item: 'flex',
     gap: 8,
     buttonTop: 'top-5',
   },
   underlined: {
-    itemClassName: '',
+    item: '',
     gap: 0,
     buttonTop: 'top-0',
   },
@@ -33,28 +38,20 @@ export const ScrollableTabsControl = JSX<TabsControlProps>(
           containerRef={containerRef}
           snapAlign="snap-start"
           onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
-          itemClassName={scrollStyleType[tabsType].itemClassName}
-          gap={scrollStyleType[tabsType].gap}
+          itemClassName={scrollStyle[tabsType].item}
+          gap={scrollStyle[tabsType].gap}
         >
           {items.map(renderTab(value, onChange, tabsType))}
         </SwipeListContainer>
         {scroll.canScrollLeft ? (
           <ScrollLeftButton
-            className={style(
-              'left-6',
-              scrollButtonStyle,
-              scrollStyleType[tabsType].buttonTop as string,
-            )}
+            className={style('left-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop)}
             onClick={scroll.scrollLeft}
           />
         ) : null}
         {scroll.canScrollRight ? (
           <ScrollRightButton
-            className={style(
-              'right-6',
-              scrollButtonStyle,
-              scrollStyleType[tabsType].buttonTop as string,
-            )}
+            className={style('right-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop)}
             onClick={scroll.scrollRight}
           />
         ) : null}

package/src/ui-kit/TabsControl/TabItem.tsx

@@ -4,12 +4,11 @@ import { useLink } from '../../hooks/useLink';
 import { type DescriptionProps, type TitleProps } from '../../model/HeadlineType';
 import { type LinkProps } from '../../model/LinkProps';
 import { type IconProps } from '../../model/Picture';
-import { type VNode } from '../../model/VNode';
 import { TabItemInner } from './TabItemInner';
 import { type TabsControlProps, type TabsType } from './TabsControlProps';
 export interface TabItemBase extends LinkProps, TitleProps, DescriptionProps, IconProps {
   name?: string;
-  appendRight?: VNode;
+  count?: number;
 }
 
 export interface TabItemProps {

package/src/ui-kit/TabsControl/TabItemInner.tsx

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { getVersion } from '../../utils/getVersion';
 import { style } from '../../utils/style';
+import { Badge } from '../Badge/Badge';
 import { renderTabItemInner } from './renderTabItemInner';
 import { type TabItemProps } from './TabItem';
 import { type TabsType } from './TabsControlProps';
@@ -32,13 +34,14 @@ const activeTabBgStyleMap: Record<TabsType, string> = {
 
 interface TabItemInnerProps extends TabItemProps {
   tag?: string;
+  count?: number;
 }
 
 export const TabItemInner = JSX<TabItemInnerProps>(
   ({ tag = 'div', item = {}, isActive = false, type = 'default', onClick }) => {
     const Tag: any = tag;
 
-    const { text, description, icon, appendRight, ...link } = item;
+    const { text, description, icon, count, ...link } = item;
 
     return (
       <Tag
@@ -68,7 +71,11 @@ export const TabItemInner = JSX<TabItemInnerProps>(
             isActive,
             type,
           })}
-          {appendRight ? <div className="ml-xs">{appendRight}</div> : null}
+          {Number.isInteger(count) ? (
+            <div className="ml-xs">
+              <Badge count={count} version={getVersion(isActive)} />
+            </div>
+          ) : null}
         </div>
       </Tag>
     );

package/src/utils/getVersion.ts

@@ -0,0 +1 @@
+export const getVersion = (isPrimary: boolean) => (isPrimary ? 'primary' : 'secondary');