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

package/mobile/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/mobile/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>
+    );
+  },
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/MortgageFiltration/MortgageFiltration.tsx

@@ -28,7 +28,7 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
     const [filtrationState, { field, reset, update: replaceFiltrationState }] =
       useForm(initialFiltrationState);
 
-    const normalizedHotFilters: TabItemBase[] = useMemo(
+    const tabsControlItems: TabItemBase[] = useMemo(
       () =>
         hotFilters.map(({ text }) => ({
           text,
@@ -40,12 +40,12 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
 
     const handleHotFilterSelect = useCallback(
       (_: TabItemBase) => {
-        setHotFilterIndex(normalizedHotFilters.indexOf(_));
+        setHotFilterIndex(tabsControlItems.indexOf(_));
         replaceFiltrationState(
-          hotFilters[normalizedHotFilters.indexOf(_)].filter || initialFiltrationState,
+          hotFilters[tabsControlItems.indexOf(_)].filter || initialFiltrationState,
         );
       },
-      [normalizedHotFilters],
+      [hotFilters, tabsControlItems],
     );
 
     useEffect(() => {
@@ -65,8 +65,8 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
       >
         <TabsControl
           className="mb-2xs"
-          items={normalizedHotFilters}
-          value={normalizedHotFilters[hotFilterIndex]}
+          items={tabsControlItems}
+          value={tabsControlItems[hotFilterIndex]}
           onChange={handleHotFilterSelect}
         />
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton })}

package/src/components/Tabs/Tabs.tsx

@@ -12,7 +12,7 @@ export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
 export const Tabs = JSX<TabsBlockProps>(
   ({ className = '', isSticky, tabs = [], tabsMode, ...rest }) => {
-    const normalizedTabs: TabItemBase[] = useMemo(() => tabs.map(normalizeTab), [tabs]);
+    const tabsControlItems: TabItemBase[] = useMemo(() => tabs.map(normalizeTab), [tabs]);
 
     const [activeTabIndex, setActiveTabIndex] = useState(0);
 
@@ -32,12 +32,15 @@ export const Tabs = JSX<TabsBlockProps>(
       }
     }, [tabs, activeTabIndex]);
 
-    const handleChange = useCallback((_: TabItemBase) => {
-      const index = normalizedTabs.indexOf(_);
+    const handleChange = useCallback(
+      (_: TabItemBase) => {
+        const index = tabsControlItems.indexOf(_);
 
-      setActiveTabIndex(index);
-      fireTabEvent(tabs[index]);
-    }, []);
+        setActiveTabIndex(index);
+        fireTabEvent(tabs[index]);
+      },
+      [tabs, tabsControlItems],
+    );
 
     return (
       <BlockWrapper
@@ -46,10 +49,10 @@ export const Tabs = JSX<TabsBlockProps>(
         {...rest}
       >
         {renderTabs({
-          items: normalizedTabs,
-          onChange: handleChange,
-          value: normalizedTabs[activeTabIndex],
+          items: tabsControlItems,
+          value: tabsControlItems[activeTabIndex],
           tabsMode,
+          onChange: handleChange,
         })}
       </BlockWrapper>
     );

package/src/ui-kit/BaseFiltration/checkShouldRenderBlock.ts

@@ -34,10 +34,8 @@ export const checkShouldRenderBlock = (pattern: Record<string, any>, target: Rec
         return isNumberFieldMatch(key, pattern);
       }
 
-      if (typeof subPattern === 'object') {
-        if ('min' in subPattern && 'max' in subPattern) {
-          return isValueInRange(key, pattern);
-        }
+      if (typeof subPattern === 'object' && 'min' in subPattern && 'max' in subPattern) {
+        return isValueInRange(key, pattern);
       }
 
       return Array.isArray(subPattern)

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>
+    );
+  },
+);