@redneckz/wildless-cms-uni-blocks 0.13.0 → 0.13.2

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
-import { style } from '../../utils/style';
-import { Text } from '../Text/Text';
+import { TabItemInner } from './TabItemInner';
 import type { TabsControlProps } from './TabsControlProps';
 
 export type TabItemBase = LinkProps;
@@ -16,66 +16,27 @@ export interface TabItemProps {
   type?: TabType;
 }
 
-const tabPaddingStyleMap: Record<TabType, string> = {
-  default: 'px-xs',
-  underlined: 'px-m',
-  rounded: 'px-lg rounded-md',
-};
+export const TabItem = JSX<TabItemProps>((props) =>
+  props?.item?.href ? <LinkTabItem {...props} /> : <ButtonTabItem {...props} />,
+);
 
-const tabTextStyle = 'text-secondary-text hover:text-primary-main';
-
-const activeTabTextStyleMap: Record<TabType, string> = {
-  default: 'text-black sm:text-white',
-  underlined: 'text-primary-main border-b-2',
-  rounded: 'text-white',
-};
+const LinkTabItem = JSX<TabItemProps>((props) => {
+  const link = useLink();
 
-const tabBgStyleMap: Record<TabType, string> = {
-  default: 'bg-white',
-  underlined: 'bg-white',
-  rounded: 'bg-transparent',
-};
+  const handleClick = useCallback(() => {
+    props.onClick && props.onClick(props.item || {});
+  }, [props.onClick, props.item]);
 
-const activeTabBgStyleMap: Record<TabType, string> = {
-  default: 'sm:bg-primary-main',
-  underlined: 'bg-white',
-  rounded: 'bg-primary-main',
-};
+  const { onClick, ...item } = link({ ...props.item, onClick: handleClick });
 
-export const TabItem = JSX<TabItemProps>(({ item = {}, isActive, onClick, type = 'default' }) => {
-  const link = useLink();
+  return <TabItemInner {...props} tag="a" item={item} onClick={onClick} />;
+});
 
-  const handleClick = () => {
+// TODO: Update handlerDecorator (support buttons?)
+const ButtonTabItem = JSX<TabItemProps>(({ item = {}, onClick, ...rest }) => {
+  const handleClick = useCallback(() => {
     onClick && onClick(item);
-  };
-
-  const { text, ...linkProps } = link({ ...item, onClick: handleClick });
-
-  const Tag = item.href ? 'a' : 'div';
+  }, [onClick, item]);
 
-  return (
-    <Tag
-      className={style(
-        'h-12',
-        'block flex-1',
-        'cursor-pointer',
-        tabPaddingStyleMap[type],
-        isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type],
-      )}
-      role="tab"
-      aria-selected={isActive}
-      {...linkProps}
-    >
-      <div
-        className={style(
-          'h-full',
-          'flex justify-center items-center',
-          'text-center whitespace-nowrap',
-          isActive ? activeTabTextStyleMap[type] : tabTextStyle,
-        )}
-      >
-        <Text size="text-m">{text}</Text>
-      </div>
-    </Tag>
-  );
+  return <TabItemInner item={item} onClick={handleClick} {...rest} />;
 });

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

@@ -0,0 +1,69 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { Text } from '../Text/Text';
+import type { TabItemProps, TabType } from './TabItem';
+
+const tabPaddingStyleMap: Record<TabType, string> = {
+  default: 'px-xs',
+  underlined: 'px-m',
+  rounded: 'px-lg rounded-md',
+};
+
+const tabTextStyle = 'text-secondary-text hover:text-primary-main';
+
+const activeTabTextStyleMap: Record<TabType, string> = {
+  default: 'text-black sm:text-white',
+  underlined: 'text-primary-main border-b-2',
+  rounded: 'text-white',
+};
+
+const tabBgStyleMap: Record<TabType, string> = {
+  default: 'bg-white',
+  underlined: 'bg-white',
+  rounded: 'bg-transparent',
+};
+
+const activeTabBgStyleMap: Record<TabType, string> = {
+  default: 'sm:bg-primary-main',
+  underlined: 'bg-white',
+  rounded: 'bg-primary-main',
+};
+
+interface TabItemInnerProps extends TabItemProps {
+  tag?: string;
+}
+
+export const TabItemInner = JSX<TabItemInnerProps>(
+  ({ tag = 'div', item = {}, isActive, type = 'default', onClick }) => {
+    const Tag: any = tag;
+
+    const { text, ...link } = item;
+
+    return (
+      <Tag
+        className={style(
+          'h-12',
+          'block flex-1',
+          'cursor-pointer',
+          tabPaddingStyleMap[type],
+          isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type],
+        )}
+        role="tab"
+        aria-selected={isActive}
+        onClick={onClick}
+        {...link}
+      >
+        <div
+          className={style(
+            'h-full',
+            'flex justify-center items-center',
+            'text-center whitespace-nowrap',
+            isActive ? activeTabTextStyleMap[type] : tabTextStyle,
+          )}
+        >
+          <Text size="text-m">{text}</Text>
+        </div>
+      </Tag>
+    );
+  },
+);