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

package/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/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 ? (

package/src/components/Tabs/Tabs.fixture.tsx

@@ -12,6 +12,7 @@ export default {
           { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
           { type: 'group', ref: 'tab3', title: 'Вкладка 4' },
         ]}
+        tabsMode="wideScreen"
       />
     </div>
   ),
@@ -36,4 +37,30 @@ export default {
       />
     </div>
   ),
+  centered: (
+    <div className="container grid grid-cols-12">
+      <Tabs
+        className="col-span-12"
+        tabs={[
+          { type: 'group', ref: 'tab1', title: '2021' },
+          { type: 'link', href: 'https://google.com', text: '2020' },
+          { type: 'group', ref: 'tab3', title: '2019' },
+          { type: 'link', href: 'https://yandex.com', text: '2018' },
+          { type: 'group', ref: 'tab5', title: '2017' },
+          { type: 'link', href: 'https://ya.com', text: '2016' },
+          { type: 'link', href: 'https://habr.com', text: '2014' },
+          { type: 'group', ref: 'tab3', title: '2013' },
+          { type: 'link', href: 'https://kremlin.com', text: '2012' },
+          { type: 'group', ref: 'tab5', title: '2011' },
+          { type: 'link', href: 'https://ria.com', text: '2009' },
+          { type: 'group', ref: 'tab8', title: '2008' },
+          { type: 'group', ref: 'tab8', title: '2007' },
+          { type: 'group', ref: 'tab8', title: '2006' },
+          { type: 'group', ref: 'tab8', title: '2005' },
+          { type: 'group', ref: 'tab8', title: '2004' },
+        ]}
+        tabsMode="centered"
+      />
+    </div>
+  ),
 };

package/src/components/Tabs/Tabs.tsx

@@ -3,14 +3,20 @@ import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { CenteredTabs } from './CenteredTabs';
 import { renderTab } from './renderTab';
 import { ScrollableTabs } from './ScrollableTabs';
 import type { TabData, TabsContent } from './TabsContent';
 
 export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
+interface RenderTabsProps extends TabsBlockProps {
+  currentTab?: TabData;
+  onClick: (tab: TabData) => void;
+}
+
 export const Tabs = JSX<TabsBlockProps>((props) => {
-  const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
+  const { className = '', tabs, isSticky, ...rest } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
@@ -41,28 +47,24 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
       role="tablist"
       {...rest}
     >
-      {tabsMode === 'scrollable' ? (
-        <ScrollableTabs
-          tabs={tabs}
-          onClick={handleClick}
-          currentTab={currentTab}
-          showCounter={showCounter}
-          {...rest}
-        />
-      ) : (
-        tabs?.map(
-          renderTab({
-            onClick: handleClick,
-            currentTab,
-            showCounter,
-            ...rest,
-          }),
-        )
-      )}
+      {renderTabs({ tabs, onClick: handleClick, currentTab, ...rest })}
     </BlockWrapper>
   );
 });
 
+const renderTabs = ({ tabsMode, tabs, ...rest }: RenderTabsProps) => {
+  switch (tabsMode) {
+    case 'wideScreen':
+      return tabs?.map(renderTab({ tabsMode, ...rest }));
+    case 'centered':
+      return <CenteredTabs tabs={tabs} tabsMode={tabsMode} {...rest} />;
+    case 'scrollable':
+      return <ScrollableTabs tabs={tabs} tabsMode={tabsMode} {...rest} />;
+  }
+
+  return null;
+};
+
 const fireTabEvent = (tab: TabData) => {
   if (tab.type === 'group') {
     defaultEventBus.fire('tab', { type: tab.type, label: tab.ref });

package/src/components/Tabs/TabsContent.ts

@@ -31,10 +31,11 @@ export type TabData = GroupTabData | LinkTabData;
 /**
  * @enumNames [
  *   "По ширине экрана",
- *   "С прокруткой"
+ *   "С прокруткой",
+ *   "По центру"
  * ]
  */
-export type TabsMode = 'wideScreen' | 'scrollable';
+export type TabsMode = 'wideScreen' | 'scrollable' | 'centered';
 
 /**
  * @title Вкладки

package/src/components/Tabs/renderGroupTab.tsx

@@ -1,12 +1,12 @@
-import type { GroupTabData } from './TabsContent';
 import type { RenderTabProps } from './renderTab';
 import {
   ACTIVE_TEXT_CLASSES,
+  getGroupTabClassName,
   INACTIVE_TEXT_CLASSES,
   TEXT_CLASSES,
   WHITE_ACTIVE_TEXT_CLASSES,
-  getGroupTabClassName,
 } from './tabItemClasses';
+import type { GroupTabData, TabsMode } from './TabsContent';
 
 const BADGE_CLASSES =
   'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
@@ -15,7 +15,7 @@ const INACTIVE_BADGE_CLASSES =
   'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
 
 export const renderGroupTab =
-  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
+  ({ page, currentTab, showCounter, onClick, tabsMode }: RenderTabProps) =>
   (tab: GroupTabData, i: number) => {
     const active = currentTab === tab;
 
@@ -27,7 +27,7 @@ export const renderGroupTab =
     return (
       <div
         key={`group-${String(i)}`}
-        className={getGroupTabClassName('div', active, isScrollable)}
+        className={getGroupTabClassName('div', active, tabsMode)}
         role="tab"
         aria-selected={active}
         onClick={() => onClick(tab)}
@@ -36,21 +36,22 @@ export const renderGroupTab =
           className={`flex flex-1 items-center justify-center ${getGroupTabClassName(
             'text',
             active,
-            isScrollable,
+            tabsMode,
           )}`}
         >
-          {renderTitle(tab.title, active, isScrollable)}
+          {renderTitle(tab.title, active, tabsMode)}
           {renderCount(showCounter, count, active)}
         </div>
       </div>
     );
   };
 
-const renderTitle = (title: string | undefined, active: boolean, isScrollable: boolean) => {
+const renderTitle = (title: string | undefined, active: boolean, tabsMode?: TabsMode) => {
   const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
-  const titleClassName = isScrollable
-    ? `${TEXT_CLASSES} ${activeClassName}`
-    : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
+  const titleClassName =
+    tabsMode === 'scrollable'
+      ? `${TEXT_CLASSES} ${activeClassName}`
+      : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
 
   return title ? <h3 className={titleClassName}>{title}</h3> : null;
 };

package/src/components/Tabs/renderTab.tsx

@@ -2,18 +2,18 @@ import type { ContentPageDef } from '../../model/ContentPageDef';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import { LinkTab } from './LinkTab';
 import { renderGroupTab } from './renderGroupTab';
-import type { TabData } from './TabsContent';
+import type { TabData, TabsMode } from './TabsContent';
 
 export interface RenderTabProps {
   page?: ContentPageDef;
   currentTab?: TabData;
   showCounter?: boolean;
   onClick: (tab: TabData) => void;
-  isScrollable?: boolean;
+  tabsMode?: TabsMode;
 }
 
 export const renderTab =
-  ({ page, currentTab, showCounter, onClick, isScrollable = false }: RenderTabProps) =>
+  ({ page, showCounter, ...rest }: RenderTabProps) =>
   (tab: TabData, i: number) => {
     const type = tab.type;
 
@@ -23,17 +23,9 @@ export const renderTab =
 
     switch (type) {
       case 'group':
-        return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
+        return renderGroupTab({ page, showCounter, ...rest })(tab, i);
       case 'link': {
-        return (
-          <LinkTab
-            key={String(i)}
-            tab={tab}
-            currentTab={currentTab}
-            isScrollable={isScrollable}
-            onClick={onClick}
-          />
-        );
+        return <LinkTab key={String(i)} tab={tab} {...rest} />;
       }
       default:
         assertUnreachable(type);

package/src/components/Tabs/tabItemClasses.ts

@@ -1,3 +1,5 @@
+import type { TabsMode } from './TabsContent';
+
 export const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
 export const ACTIVE_LINK_CLASSES = 'bg-primary-main';
 export const INACTIVE_LINK_CLASSES = 'group/btn bg-white';
@@ -17,7 +19,11 @@ const GROUP_TAB_CLASSES = {
       active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
       default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
     },
-    default: {
+    centered: {
+      active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+      default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
+    },
+    wideScreen: {
       active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
       default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
     },
@@ -27,7 +33,11 @@ const GROUP_TAB_CLASSES = {
       active: `h-full border-0 border-b-2`,
       default: ``,
     },
-    default: {
+    centered: {
+      active: '',
+      default: '',
+    },
+    wideScreen: {
       active: '',
       default: '',
     },
@@ -39,7 +49,11 @@ const LINK_TAB_CLASSES = {
       active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
       default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
     },
-    default: {
+    centered: {
+      active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+      default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
+    },
+    wideScreen: {
       active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
       default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
     },
@@ -49,23 +63,27 @@ const LINK_TAB_CLASSES = {
       active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
       default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
     },
-    default: {
+    centered: {
+      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
+      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+    },
+    wideScreen: {
       active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
       default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
     },
   },
 };
 
-export const getGroupTabClassName = (type: string, active: boolean, isScrollable: boolean) => {
-  const styleType = isScrollable ? 'scrollable' : 'default';
+export const getGroupTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
   const styleActive = active ? 'active' : 'default';
+  const mode = tabsMode || 'wideScreen';
 
-  return GROUP_TAB_CLASSES[type][styleType][styleActive];
+  return GROUP_TAB_CLASSES[type][mode][styleActive];
 };
 
-export const getLinkTabClassName = (type: string, active: boolean, isScrollable: boolean) => {
-  const styleType = isScrollable ? 'scrollable' : 'default';
+export const getLinkTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
   const styleActive = active ? 'active' : 'default';
+  const mode = tabsMode || 'wideScreen';
 
-  return LINK_TAB_CLASSES[type][styleType][styleActive];
+  return LINK_TAB_CLASSES[type][mode][styleActive];
 };

package/src/hooks/useLink.ts

@@ -23,7 +23,7 @@ export function useLink(params: UseLinkParams = {}) {
 
   return <L extends Partial<LinkProps & Clickable>>(props: L): L & Clickable => ({
     ...props,
-    href: isRemote ? props.href : adjustHref(router)(props.href, basePath),
+    href: isRemote && !basePath ? props.href : adjustHref(router)(props.href, basePath),
     'aria-label': props.text,
     onClick: handlerDecorator(handleHref(props), props),
   });