@developer_tribe/react-builder 1.2.42 → 1.2.43

package/src/build-components/BIcon/BIconProps.generated.ts

@@ -66,7 +66,7 @@ export interface BIconPropsGenerated {
   attributes: {
     styles?: BIconStyleGenerated;
     adjustsFontSizeToFit?: boolean;
-    showEllipsis?: boolean;
+    numberOfLines?: number;
     translateCounter?: number;
     scrollable?: boolean;
     testID?: string;

package/src/build-components/CountDown/CountDownProps.generated.ts

@@ -66,7 +66,7 @@ export interface CountDownPropsGenerated {
   attributes: {
     styles?: CountDownStyleGenerated;
     adjustsFontSizeToFit?: boolean;
-    showEllipsis?: boolean;
+    numberOfLines?: number;
     translateCounter?: number;
     scrollable?: boolean;
     testID?: string;

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

@@ -66,7 +66,7 @@ export interface OnboardFooterPropsGenerated {
   attributes: {
     styles?: OnboardFooterStyleGenerated;
     adjustsFontSizeToFit?: boolean;
-    showEllipsis?: boolean;
+    numberOfLines?: number;
     translateCounter?: number;
     scrollable?: boolean;
     testID?: string;

package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.ts

@@ -66,7 +66,7 @@ export interface OnboardSubtitlePropsGenerated {
   attributes: {
     styles?: OnboardSubtitleStyleGenerated;
     adjustsFontSizeToFit?: boolean;
-    showEllipsis?: boolean;
+    numberOfLines?: number;
     translateCounter?: number;
     scrollable?: boolean;
     testID?: string;

package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts

@@ -66,7 +66,7 @@ export interface OnboardTitlePropsGenerated {
   attributes: {
     styles?: OnboardTitleStyleGenerated;
     adjustsFontSizeToFit?: boolean;
-    showEllipsis?: boolean;
+    numberOfLines?: number;
     translateCounter?: number;
     scrollable?: boolean;
     testID?: string;

package/src/build-components/PaywallCloseButton/PaywallCloseButtonProps.generated.ts

@@ -69,7 +69,7 @@ export interface PaywallCloseButtonPropsGenerated {
     size?: number;
     strokeWidth?: number;
     adjustsFontSizeToFit?: boolean;
-    showEllipsis?: boolean;
+    numberOfLines?: number;
     translateCounter?: number;
     scrollable?: boolean;
     testID?: string;

package/src/build-components/PaywallFooter/PaywallFooterProps.generated.ts

@@ -66,7 +66,7 @@ export interface PaywallFooterPropsGenerated {
   attributes: {
     styles?: PaywallFooterStyleGenerated;
     adjustsFontSizeToFit?: boolean;
-    showEllipsis?: boolean;
+    numberOfLines?: number;
     translateCounter?: number;
     scrollable?: boolean;
     testID?: string;

package/src/build-components/PriceTag/PriceTagProps.generated.ts

@@ -71,7 +71,7 @@ export interface PriceTagPropsGenerated {
   attributes: {
     styles?: PriceTagStyleGenerated;
     adjustsFontSizeToFit?: boolean;
-    showEllipsis?: boolean;
+    numberOfLines?: number;
     translateCounter?: number;
     scrollable?: boolean;
     testID?: string;

package/src/build-components/Pricing/PricingProps.generated.ts

@@ -66,7 +66,7 @@ export interface PricingPropsGenerated {
   attributes: {
     styles?: PricingStyleGenerated;
     adjustsFontSizeToFit?: boolean;
-    showEllipsis?: boolean;
+    numberOfLines?: number;
     translateCounter?: number;
     scrollable?: boolean;
     testID?: string;

package/src/build-components/Promo/PromoProps.generated.ts

@@ -66,7 +66,7 @@ export interface PromoPropsGenerated {
   attributes: {
     styles?: PromoStyleGenerated;
     adjustsFontSizeToFit?: boolean;
-    showEllipsis?: boolean;
+    numberOfLines?: number;
     translateCounter?: number;
     scrollable?: boolean;
     testID?: string;

package/src/build-components/Text/Text.tsx

@@ -44,9 +44,10 @@ export function Text({ node }: TextComponentProps) {
     | undefined;
   const adjustsFontSizeToFit = styleBag?.adjustsFontSizeToFit ?? false;
   const showEllipsis = styleBag?.showEllipsis ?? false;
+  const numberOfLines = (node.attributes as any)?.numberOfLines;
 
   useLayoutEffect(() => {
-    if (!adjustsFontSizeToFit) {
+    if (numberOfLines !== 1 || !adjustsFontSizeToFit) {
       setAutoFontSizePx(null);
       return;
     }
@@ -95,12 +96,12 @@ export function Text({ node }: TextComponentProps) {
       ro?.disconnect();
       window.removeEventListener('resize', compute);
     };
-  }, [adjustsFontSizeToFit, localizedText]);
+  }, [adjustsFontSizeToFit, localizedText, numberOfLines]);
 
   const extraStyle = useMemo((): React.CSSProperties | undefined => {
     let next: React.CSSProperties | undefined;
 
-    if (showEllipsis) {
+    if (numberOfLines == 1 && adjustsFontSizeToFit) {
       next = {
         ...(next ?? {}),
         overflow: 'hidden',
@@ -117,7 +118,7 @@ export function Text({ node }: TextComponentProps) {
     }
 
     return next;
-  }, [showEllipsis, autoFontSizePx]);
+  }, [showEllipsis, autoFontSizePx, numberOfLines, adjustsFontSizeToFit]);
 
   const style = useMergedStyle(
     useMergedStyle(textStyle, extraStyle),

package/src/build-components/Text/TextProps.generated.ts

@@ -68,7 +68,7 @@ export interface TextPropsGenerated {
     scrollable?: boolean;
     testID?: string;
     adjustsFontSizeToFit?: boolean;
-    showEllipsis?: boolean;
+    numberOfLines?: number;
     translateCounter?: number;
   };
 }

package/src/build-components/Text/pattern.json

@@ -8,7 +8,7 @@
     "extends": "View",
     "attributes": {
       "adjustsFontSizeToFit": "boolean",
-      "showEllipsis": "boolean",
+      "numberOfLines": "number",
       "translateCounter": "number",
       "styles": {
         "color": "color",
@@ -20,6 +20,7 @@
     },
     "defaults": {
       "translateCounter": 1,
+      "numberOfLines": 1,
       "styles": {
         "color": "THEME_COLORS.TEXT",
         "fontSize": "16@fs",

package/src/build-components/patterns.generated.ts

@@ -11,7 +11,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         adjustsFontSizeToFit: 'boolean',
-        showEllipsis: 'boolean',
+        numberOfLines: 'number',
         translateCounter: 'number',
         styles: {
           color: 'color',
@@ -457,6 +457,7 @@ export const patterns = [
     },
     defaults: {
       translateCounter: 1,
+      numberOfLines: 1,
       styles: {
         color: 'THEME_COLORS.TEXT',
         fontSize: '16',
@@ -3252,7 +3253,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         adjustsFontSizeToFit: 'boolean',
-        showEllipsis: 'boolean',
+        numberOfLines: 'number',
         translateCounter: 'number',
         styles: {
           color: 'color',
@@ -3682,6 +3683,7 @@ export const patterns = [
     },
     defaults: {
       translateCounter: 1,
+      numberOfLines: 1,
       styles: {
         color: 'THEME_COLORS.TEXT',
         fontSize: '16@fs',
@@ -6242,7 +6244,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         adjustsFontSizeToFit: 'boolean',
-        showEllipsis: 'boolean',
+        numberOfLines: 'number',
         translateCounter: 'number',
         styles: {
           color: 'color',
@@ -6720,6 +6722,7 @@ export const patterns = [
     },
     defaults: {
       translateCounter: 1,
+      numberOfLines: 1,
       styles: {
         color: 'THEME_COLORS.TEXT',
         fontSize: '16@fs',
@@ -7950,7 +7953,7 @@ export const patterns = [
       children: 'string',
       attributes: {
         adjustsFontSizeToFit: 'boolean',
-        showEllipsis: 'boolean',
+        numberOfLines: 'number',
         translateCounter: 'number',
         styles: {
           color: 'color',
@@ -8372,6 +8375,7 @@ export const patterns = [
     },
     defaults: {
       translateCounter: 1,
+      numberOfLines: 1,
       styles: {
         color: 'THEME_COLORS.TEXT',
         fontSize: '14@fs',
@@ -8395,7 +8399,7 @@ export const patterns = [
       children: 'string',
       attributes: {
         adjustsFontSizeToFit: 'boolean',
-        showEllipsis: 'boolean',
+        numberOfLines: 'number',
         translateCounter: 'number',
         styles: {
           color: 'color',
@@ -8817,6 +8821,7 @@ export const patterns = [
     },
     defaults: {
       translateCounter: 1,
+      numberOfLines: 1,
       styles: {
         color: 'THEME_COLORS.TEXT',
         fontSize: '24@fs',
@@ -9247,7 +9252,7 @@ export const patterns = [
         size: 'number',
         strokeWidth: 'number',
         adjustsFontSizeToFit: 'boolean',
-        showEllipsis: 'boolean',
+        numberOfLines: 'number',
         translateCounter: 'number',
         styles: {
           color: 'color',
@@ -9707,6 +9712,7 @@ export const patterns = [
         alignItems: 'center',
       },
       translateCounter: 1,
+      numberOfLines: 1,
       testID: 'paywall-close-button',
       size: 24,
     },
@@ -9721,7 +9727,7 @@ export const patterns = [
       children: 'never',
       attributes: {
         adjustsFontSizeToFit: 'boolean',
-        showEllipsis: 'boolean',
+        numberOfLines: 'number',
         translateCounter: 'number',
         styles: {
           color: 'color',
@@ -10199,6 +10205,7 @@ export const patterns = [
     },
     defaults: {
       translateCounter: 1,
+      numberOfLines: 1,
       styles: {
         color: 'THEME_COLORS.TEXT',
         fontSize: '16@fs',
@@ -11430,7 +11437,7 @@ export const patterns = [
       children: 'string',
       attributes: {
         adjustsFontSizeToFit: 'boolean',
-        showEllipsis: 'boolean',
+        numberOfLines: 'number',
         translateCounter: 'number',
         styles: {
           color: 'color',
@@ -11878,6 +11885,7 @@ export const patterns = [
     },
     defaults: {
       translateCounter: 1,
+      numberOfLines: 1,
       styles: {
         color: 'THEME_COLORS.TEXT',
         fontSize: '16@fs',
@@ -11901,7 +11909,7 @@ export const patterns = [
       children: 'string',
       attributes: {
         adjustsFontSizeToFit: 'boolean',
-        showEllipsis: 'boolean',
+        numberOfLines: 'number',
         translateCounter: 'number',
         styles: {
           color: 'color',
@@ -12324,6 +12332,7 @@ export const patterns = [
     },
     defaults: {
       translateCounter: 2,
+      numberOfLines: 1,
       styles: {
         color: 'rgba(255,255,255,0.6)',
         fontSize: '12@fs',
@@ -12348,7 +12357,7 @@ export const patterns = [
       children: 'string',
       attributes: {
         adjustsFontSizeToFit: 'boolean',
-        showEllipsis: 'boolean',
+        numberOfLines: 'number',
         translateCounter: 'number',
         styles: {
           color: 'color',
@@ -12771,6 +12780,7 @@ export const patterns = [
     },
     defaults: {
       translateCounter: 2,
+      numberOfLines: 1,
       styles: {
         color: '#34D399',
         fontSize: '12@fs',
@@ -13348,7 +13358,7 @@ export const patterns = [
         },
         testID: 'string',
         adjustsFontSizeToFit: 'boolean',
-        showEllipsis: 'boolean',
+        numberOfLines: 'number',
         translateCounter: 'number',
       },
     },
@@ -13725,6 +13735,7 @@ export const patterns = [
         fontWeight: '400',
       },
       translateCounter: 1,
+      numberOfLines: 1,
     },
     types: {},
   },

package/src/hooks/useSafeAreaViewStyle.ts

@@ -34,10 +34,6 @@ export function useSafeAreaViewStyle(
   const statusBarOverrideTranslucent = useRenderStore(
     (s) => s.statusBarOverrideTranslucent,
   );
-  const navBarOverrideTranslucent = useRenderStore(
-    (s) => s.navBarOverrideTranslucent,
-  );
-
   return useMemo(() => {
     if (!enabled) return baseStyle;
 
@@ -74,11 +70,5 @@ export function useSafeAreaViewStyle(
       width: subtractInset(baseStyle.width ?? '100%', horizontal),
       height: subtractInset(baseStyle.height ?? '100%', vertical),
     };
-  }, [
-    enabled,
-    baseStyle,
-    device,
-    statusBarOverrideTranslucent,
-    navBarOverrideTranslucent,
-  ]);
+  }, [enabled, baseStyle, device, statusBarOverrideTranslucent]);
 }

package/src/utils/extractViewStyle/extractViewStyle.ts

@@ -8,7 +8,6 @@ import type { BaseSize } from '../../types/PreviewConfig';
 import { parseSize } from '../../size-matters';
 import { parseColor } from '../parseColor';
 import { getStyleBag, toAttributeRecord } from '../attributeStyle';
-import { getDefaultDevice } from '../getDevices';
 
 export type ExtractViewStyleOptions = {
   projectColors?: ProjectColors;

package/src/utils/useMergedStyle.ts

@@ -6,7 +6,6 @@ const EMPTY_STYLE: CSSProperties = {};
 export function useMergedStyle(
   ...args: (CSSProperties | undefined | null | false)[]
 ): CSSProperties {
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- spread args intentionally
   return useMemo(() => {
     const validStyles = args.filter((arg): arg is CSSProperties => !!arg);
 
@@ -14,5 +13,6 @@ export function useMergedStyle(
     if (validStyles.length === 1) return validStyles[0];
 
     return Object.assign({}, ...validStyles);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, args);
 }