@redneckz/wildless-cms-uni-blocks 0.13.6 → 0.13.7

package/src/components/MortgageFiltration/MortgageFiltration.tsx

@@ -1,60 +1,45 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect, useMemo, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BaseFiltrationInner } from '../../ui-kit/BaseFiltration/BaseFiltrationInner';
 import { renderFiltrationForm } from '../../ui-kit/BaseFiltration/renderFiltrationForm';
+import { useHotFilters } from '../../ui-kit/BaseFiltration/useHotFilters';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import type { TabItemBase } from '../../ui-kit/TabsControl/TabItem';
 import { TabsControl } from '../../ui-kit/TabsControl/TabsControl';
 import { style } from '../../utils/style';
-import { hotFilterRecordCmp } from './HotFilterRecord';
 import type {
   MortgageFiltrationContent,
   MortgageFiltrationSchema,
 } from './MortgageFiltrationContent';
 
-interface MortgageFiltrationProps extends MortgageFiltrationContent, UniBlockProps {}
+type MortgageFiltrationState = Partial<Record<keyof MortgageFiltrationSchema, string[]>>;
 
-const initialFiltrationState: Partial<Record<keyof MortgageFiltrationSchema, string[]>> = {
+const initialFiltrationState: MortgageFiltrationState = {
   categories: [],
   extraOptions: [],
   propertyType: [],
   stage: [],
 };
 
+interface MortgageFiltrationProps extends MortgageFiltrationContent, UniBlockProps {}
+
 export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<MortgageFiltrationProps>(
-  ({ className, hotFilters = [], filtrationSchema = {}, resetButton, ...rest }) => {
+  ({ className, hotFilters, filtrationSchema = {}, resetButton, ...rest }) => {
     const [filtrationState, { field, reset, update: replaceFiltrationState }] =
       useForm(initialFiltrationState);
 
-    const tabsControlItems: TabItemBase[] = useMemo(
-      () =>
-        hotFilters.map(({ text }) => ({
-          text,
-        })),
-      [hotFilters],
+    const handleFiltrationStateChange = useCallback(
+      (_: MortgageFiltrationState = initialFiltrationState) => replaceFiltrationState(_),
+      [],
     );
 
-    const [hotFilterIndex, setHotFilterIndex] = useState(0);
-
-    const handleHotFilterSelect = useCallback(
-      (_: TabItemBase) => {
-        setHotFilterIndex(tabsControlItems.indexOf(_));
-        replaceFiltrationState(
-          hotFilters[tabsControlItems.indexOf(_)].filter || initialFiltrationState,
-        );
-      },
-      [hotFilters, tabsControlItems],
-    );
-
-    useEffect(() => {
-      const suggestedHotFilterIndex = hotFilters.findIndex((_) =>
-        hotFilterRecordCmp(_.filter, filtrationState),
-      );
-
-      setHotFilterIndex(suggestedHotFilterIndex !== -1 ? suggestedHotFilterIndex : 0);
-    }, [hotFilters, filtrationState]);
+    const tabsControlProps = useHotFilters({
+      hotFilters,
+      filtrationState,
+      blocks: rest.block?.blocks,
+      onFiltrationStateChange: handleFiltrationStateChange,
+    });
 
     return (
       <BlockWrapper
@@ -63,12 +48,7 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
         version="transparent"
         {...rest}
       >
-        <TabsControl
-          className="mb-2xs"
-          items={tabsControlItems}
-          value={tabsControlItems[hotFilterIndex]}
-          onChange={handleHotFilterSelect}
-        />
+        <TabsControl {...tabsControlProps} />
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton })}
         <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
       </BlockWrapper>

package/src/components/MortgageFiltration/MortgageFiltrationContent.ts

@@ -2,7 +2,7 @@ import type {
   BaseFiltrationInnerContent,
   StringArray,
 } from '../../ui-kit/BaseFiltration/BaseFiltrationContent';
-import type { HotFilterRecord } from './HotFilterRecord';
+import type { HotFilterBase } from '../../ui-kit/BaseFiltration/HotFilterBase';
 
 export type MortgageFiltrationSchema = {
   /** @title Тип недвижимости */
@@ -15,14 +15,18 @@ export type MortgageFiltrationSchema = {
   extraOptions?: StringArray;
 };
 
-/**
- * @title Кнопка фильтрации
- */
-export interface HotFilterButton {
-  /** @title Текст */
-  text?: string;
+export interface MortgageFiltrationHotFilter extends HotFilterBase {
   /** @title Применяемые фильтры */
-  filter?: HotFilterRecord;
+  filter?: {
+    /** @title Тип недвижимости */
+    propertyType?: string[];
+    /** @title Этап строительства */
+    stage?: string[];
+    /** @title Категории */
+    categories?: string[];
+    /** @title Дополнительно */
+    extraOptions?: string[];
+  };
 }
 
 /**
@@ -32,5 +36,5 @@ export interface MortgageFiltrationContent extends BaseFiltrationInnerContent {
   /** @title Параметры фильтрации */
   filtrationSchema?: MortgageFiltrationSchema;
   /** @title Горячие фильтры */
-  hotFilters?: HotFilterButton[];
+  hotFilters?: MortgageFiltrationHotFilter[];
 }

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

@@ -0,0 +1,24 @@
+import '../../setup-fixture';
+
+import { Badge } from './Badge';
+
+export default {
+  default: (
+    <div className="container grid-cols-12">
+      <section className="col-span-12 bg-white p-6xl">
+        <button className="p-xs border-2 border-green rounded-md flex justify-center w-52 mb-3xs">
+          <div className="mr-2xs">
+            <span>Какой-то текст</span>
+          </div>
+          <Badge count={3} />
+        </button>
+        <button className="p-xs border-2 border-green bg-green rounded-md flex justify-center w-52 text-white">
+          <div className="mr-2xs">
+            <span>Какой-то текст</span>
+          </div>
+          <Badge count={3} version="primary" />
+        </button>
+      </section>
+    </div>
+  ),
+};

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

@@ -0,0 +1,34 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { Text } from '../Text/Text';
+import type { TextColor } from '../Text/TextProps';
+
+interface BadgeProps {
+  count?: number;
+  version?: 'primary' | 'secondary';
+}
+
+const badgeBgStyleMap: Record<string, string> = {
+  primary: 'bg-white/30',
+  secondary: 'bg-main-divider',
+};
+
+const badgeTextColorStyleMap: Record<string, TextColor> = {
+  primary: 'text-white',
+  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],
+      )}
+    >
+      <Text size="text-xs" color={badgeTextColorStyleMap[version]}>
+        {count}
+      </Text>
+    </div>
+  );
+});

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

@@ -8,8 +8,7 @@ import { checkShouldRenderBlock } from '../BaseFiltration/checkShouldRenderBlock
 import { DefaultFoldButton } from '../Foldable/DefaultFoldButton';
 import { Foldable } from '../Foldable/Foldable';
 import { FoldableSection } from '../Foldable/FoldableSection';
-import { Paragraph } from '../Paragraph/Paragraph';
-import { Text } from '../Text/Text';
+import { Headline } from '../../components/Headline/Headline';
 
 const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
@@ -34,17 +33,14 @@ export const BaseFiltrationInner = JSX<BaseFiltrationInnerProps>(
         <div className={style(blocksToRender.length ? 'hidden' : 'block')}>
           {notFound ? renderNotFound(notFound) : null}
         </div>
-        <div className={style(blocksToRender.length ? '' : 'hidden')}>
-          <div className={style('mb-2xs', resultsGridStyle)}>
+        <div className={style('space-y-2xs', blocksToRender.length ? '' : 'hidden')}>
+          <div className={style(resultsGridStyle)}>
             {renderBlocksList(visibleBlocks, { ...rest.options, parent: block })}
           </div>
           <Foldable
             renderFoldableSection={({ isUnfolded }) => {
               return (
-                <FoldableSection
-                  className={style(resultsGridStyle, isUnfolded ? 'mb-2xs' : '')}
-                  isUnfolded={isUnfolded}
-                >
+                <FoldableSection className={style(resultsGridStyle)} isUnfolded={isUnfolded}>
                   {renderBlocksList(hiddenBlocks, { ...rest.options, parent: block })}
                 </FoldableSection>
               );
@@ -69,18 +65,7 @@ export const BaseFiltrationInner = JSX<BaseFiltrationInnerProps>(
 function renderNotFound({ title, description }: NotFound) {
   return (
     <div className="bg-white py-20">
-      {title ? (
-        <div className="mb-xs">
-          <Paragraph align="text-center">
-            <Text size="text-h4">{title}</Text>
-          </Paragraph>
-        </div>
-      ) : null}
-      {description ? (
-        <Paragraph size="text-xl" font="font-light" align="text-center">
-          {description}
-        </Paragraph>
-      ) : null}
+      <Headline title={title} description={description} headlineVersion="S" isEmbedded={true} />
     </div>
   );
 }

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

@@ -0,0 +1,7 @@
+/**
+ * @title Кнопка фильтрации
+ */
+export interface HotFilterBase {
+  /** @title Текст */
+  text?: string;
+}

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

@@ -0,0 +1,6 @@
+import type { BlockDef } from '../../model/ContentPageDef';
+import { checkShouldRenderBlock } from '../../ui-kit/BaseFiltration/checkShouldRenderBlock';
+import type { BaseFilter } from './useHotFilters';
+
+export const getBadgeCount = (blocks: BlockDef[] = [], filter: BaseFilter = {}) =>
+  blocks.filter(({ content = {} }) => checkShouldRenderBlock(filter, content)).length;

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

@@ -0,0 +1,3 @@
+import { arrCmp, combineBoolCmps, objCmp, scalarCmp } from '../../utils/BoolComparator';
+
+export const hotFilterRecordCmp = objCmp<string[]>(combineBoolCmps(scalarCmp, arrCmp()));

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

@@ -29,7 +29,7 @@ export const renderFiltrationForm = ({
   resetButton,
   children,
 }: RenderFiltrationFormProps) => (
-  <form className="flex justify-between bg-white p-4xl mb-2xs">
+  <form className="flex justify-between bg-white p-4xl">
     <div className="flex gap-5xl">
       {children}
       {Object.entries(filtrationSchema).map(renderFormItem(field))}

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

@@ -0,0 +1,65 @@
+import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import type { BlockDef } from '../../model/ContentPageDef';
+import { Badge } from '../Badge/Badge';
+import type { TabItemBase } from '../TabsControl/TabItem';
+import type { TabsControlProps } from '../TabsControl/TabsControlProps';
+import { getBadgeCount } from './getBadgeCount';
+import { HotFilterBase } from './HotFilterBase';
+import { hotFilterRecordCmp } from './hotFilterRecordCmp';
+
+const EMPTY_ARR = [];
+const EMPTY_OBJ = {};
+
+export type BaseFilter = HotFilterBase & {
+  filter?: Record<string, string[]>;
+};
+
+interface UseHotFiltersParams {
+  hotFilters?: BaseFilter[];
+  filtrationState?: Record<string, string[]>;
+  blocks?: BlockDef[];
+  onFiltrationStateChange: (_?: Record<string, string[]>) => void;
+}
+
+export const useHotFilters = ({
+  hotFilters = EMPTY_ARR,
+  filtrationState = EMPTY_OBJ,
+  blocks = EMPTY_ARR,
+  onFiltrationStateChange,
+}: UseHotFiltersParams): TabsControlProps => {
+  const activeItemIndex = useMemo(
+    () =>
+      Math.max(
+        0,
+        hotFilters.findIndex((_) => hotFilterRecordCmp(_.filter, filtrationState)),
+      ),
+    [hotFilters, filtrationState],
+  );
+
+  const items: TabItemBase[] = useMemo(
+    () =>
+      hotFilters.map((_) => ({
+        text: _.text,
+        appendRight: (
+          <Badge
+            version={_ === hotFilters[activeItemIndex] ? 'primary' : 'secondary'}
+            count={getBadgeCount(blocks, _.filter)}
+          />
+        ),
+      })),
+    [hotFilters, blocks, activeItemIndex],
+  );
+
+  const handleChange = useCallback(
+    (_: TabItemBase) => {
+      onFiltrationStateChange(hotFilters[items.indexOf(_)].filter);
+    },
+    [hotFilters, items],
+  );
+
+  return {
+    value: items[activeItemIndex],
+    items: items,
+    onChange: handleChange,
+  };
+};

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

@@ -66,20 +66,11 @@ export const BaseTile = JSX<BaseTileProps>(
 const renderImageContainer = (
   image: VNode | undefined,
   { className, imageAlign }: { className?: string; imageAlign?: Align },
-) => {
-  //TODO Спорное решение
-  const fullWidth = image?.props?.image?.size?.width > 400;
-
-  return image ? (
+) =>
+  image ? (
     <div
-      className={style(
-        'flex-shrink-0',
-        fullWidth ? 'w-full @xl:w-auto' : '',
-        imageAlign && imageAlignmentMap[imageAlign],
-        className,
-      )}
+      className={style('md:flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className)}
     >
       {image}
     </div>
   ) : null;
-};

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

@@ -2,18 +2,20 @@ 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 type { VNode } from '../../model/VNode';
 import { TabItemInner } from './TabItemInner';
 import type { TabsControlProps } from './TabsControlProps';
-
-export type TabItemBase = LinkProps;
+export interface TabItemBase extends LinkProps {
+  appendRight?: VNode;
+}
 
 export type TabType = 'default' | 'underlined' | 'rounded';
 
 export interface TabItemProps {
   item?: TabItemBase;
   isActive?: boolean;
-  onClick?: TabsControlProps['onChange'];
   type?: TabType;
+  onClick?: TabsControlProps['onChange'];
 }
 
 export const TabItem = JSX<TabItemProps>((props) =>

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

@@ -37,7 +37,7 @@ export const TabItemInner = JSX<TabItemInnerProps>(
   ({ tag = 'div', item = {}, isActive, type = 'default', onClick }) => {
     const Tag: any = tag;
 
-    const { text, ...link } = item;
+    const { text, appendRight, ...link } = item;
 
     return (
       <Tag
@@ -62,6 +62,7 @@ export const TabItemInner = JSX<TabItemInnerProps>(
           )}
         >
           <Text size="text-m">{text}</Text>
+          {appendRight ? <div className="ml-xs">{appendRight}</div> : null}
         </div>
       </Tag>
     );

package/bundle/components/MortgageFiltration/HotFilterRecord.d.ts

@@ -1,11 +0,0 @@
-export declare type HotFilterRecord = {
-    /** @title Тип недвижимости */
-    propertyType?: string[];
-    /** @title Этап строительства */
-    stage?: string[];
-    /** @title Категории */
-    categories?: string[];
-    /** @title Дополнительно */
-    extraOptions?: string[];
-};
-export declare const hotFilterRecordCmp: (a: Record<string, string[]> | null | undefined, b: Record<string, string[]> | null | undefined) => boolean;

package/dist/components/MortgageFiltration/HotFilterRecord.d.ts

@@ -1,11 +0,0 @@
-export declare type HotFilterRecord = {
-    /** @title Тип недвижимости */
-    propertyType?: string[];
-    /** @title Этап строительства */
-    stage?: string[];
-    /** @title Категории */
-    categories?: string[];
-    /** @title Дополнительно */
-    extraOptions?: string[];
-};
-export declare const hotFilterRecordCmp: (a: Record<string, string[]> | null | undefined, b: Record<string, string[]> | null | undefined) => boolean;

package/dist/components/MortgageFiltration/HotFilterRecord.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HotFilterRecord.js","sourceRoot":"","sources":["../../../src/components/MortgageFiltration/HotFilterRecord.ts"],"names":[],"mappings":";;AAAA,+DAAwF;AAa3E,QAAA,kBAAkB,GAAG,IAAA,uBAAM,EAAW,IAAA,gCAAe,EAAC,0BAAS,EAAE,IAAA,uBAAM,GAAE,CAAC,CAAC,CAAC"}

package/lib/components/MortgageFiltration/HotFilterRecord.d.ts

@@ -1,11 +0,0 @@
-export declare type HotFilterRecord = {
-    /** @title Тип недвижимости */
-    propertyType?: string[];
-    /** @title Этап строительства */
-    stage?: string[];
-    /** @title Категории */
-    categories?: string[];
-    /** @title Дополнительно */
-    extraOptions?: string[];
-};
-export declare const hotFilterRecordCmp: (a: Record<string, string[]> | null | undefined, b: Record<string, string[]> | null | undefined) => boolean;

package/lib/components/MortgageFiltration/HotFilterRecord.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HotFilterRecord.js","sourceRoot":"","sources":["../../../src/components/MortgageFiltration/HotFilterRecord.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAaxF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAW,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC"}

package/mobile/bundle/components/MortgageFiltration/HotFilterRecord.d.ts

@@ -1,11 +0,0 @@
-export declare type HotFilterRecord = {
-    /** @title Тип недвижимости */
-    propertyType?: string[];
-    /** @title Этап строительства */
-    stage?: string[];
-    /** @title Категории */
-    categories?: string[];
-    /** @title Дополнительно */
-    extraOptions?: string[];
-};
-export declare const hotFilterRecordCmp: (a: Record<string, string[]> | null | undefined, b: Record<string, string[]> | null | undefined) => boolean;

package/mobile/dist/components/MortgageFiltration/HotFilterRecord.d.ts

@@ -1,11 +0,0 @@
-export declare type HotFilterRecord = {
-    /** @title Тип недвижимости */
-    propertyType?: string[];
-    /** @title Этап строительства */
-    stage?: string[];
-    /** @title Категории */
-    categories?: string[];
-    /** @title Дополнительно */
-    extraOptions?: string[];
-};
-export declare const hotFilterRecordCmp: (a: Record<string, string[]> | null | undefined, b: Record<string, string[]> | null | undefined) => boolean;

package/mobile/dist/components/MortgageFiltration/HotFilterRecord.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HotFilterRecord.js","sourceRoot":"","sources":["../../../src/components/MortgageFiltration/HotFilterRecord.ts"],"names":[],"mappings":";;AAAA,+DAAwF;AAa3E,QAAA,kBAAkB,GAAG,IAAA,uBAAM,EAAW,IAAA,gCAAe,EAAC,0BAAS,EAAE,IAAA,uBAAM,GAAE,CAAC,CAAC,CAAC"}

package/mobile/lib/components/MortgageFiltration/HotFilterRecord.d.ts

@@ -1,11 +0,0 @@
-export declare type HotFilterRecord = {
-    /** @title Тип недвижимости */
-    propertyType?: string[];
-    /** @title Этап строительства */
-    stage?: string[];
-    /** @title Категории */
-    categories?: string[];
-    /** @title Дополнительно */
-    extraOptions?: string[];
-};
-export declare const hotFilterRecordCmp: (a: Record<string, string[]> | null | undefined, b: Record<string, string[]> | null | undefined) => boolean;

package/mobile/lib/components/MortgageFiltration/HotFilterRecord.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HotFilterRecord.js","sourceRoot":"","sources":["../../../src/components/MortgageFiltration/HotFilterRecord.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAaxF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAW,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC"}

package/mobile/src/components/MortgageFiltration/HotFilterRecord.ts

@@ -1,14 +0,0 @@
-import { arrCmp, combineBoolCmps, objCmp, scalarCmp } from '../../utils/BoolComparator';
-
-export type HotFilterRecord = {
-  /** @title Тип недвижимости */
-  propertyType?: string[];
-  /** @title Этап строительства */
-  stage?: string[];
-  /** @title Категории */
-  categories?: string[];
-  /** @title Дополнительно */
-  extraOptions?: string[];
-};
-
-export const hotFilterRecordCmp = objCmp<string[]>(combineBoolCmps(scalarCmp, arrCmp()));

package/src/components/MortgageFiltration/HotFilterRecord.ts

@@ -1,14 +0,0 @@
-import { arrCmp, combineBoolCmps, objCmp, scalarCmp } from '../../utils/BoolComparator';
-
-export type HotFilterRecord = {
-  /** @title Тип недвижимости */
-  propertyType?: string[];
-  /** @title Этап строительства */
-  stage?: string[];
-  /** @title Категории */
-  categories?: string[];
-  /** @title Дополнительно */
-  extraOptions?: string[];
-};
-
-export const hotFilterRecordCmp = objCmp<string[]>(combineBoolCmps(scalarCmp, arrCmp()));