@cleartrip/ct-design-typography 5.13.0-SNAPSHOT-native-main.19 → 5.13.0-SNAPSHOT-typographyOnTextLayout.0

package/dist/Typography.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.native.d.ts","sourceRoot":"","sources":["../packages/components/Typography/src/Typography.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAQpC,OAAO,EAAE,WAAW,EAAyB,MAAM,QAAQ,CAAC;AA+B5D,QAAA,MAAM,UAAU,0EA+Df,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Typography.native.d.ts","sourceRoot":"","sources":["../packages/components/Typography/src/Typography.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAwB,IAAI,EAAuB,MAAM,cAAc,CAAC;AAQ/E,OAAO,EAAE,WAAW,EAAyB,MAAM,QAAQ,CAAC;AA+B5D,QAAA,MAAM,UAAU,0EAyEf,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/type.d.ts

@@ -8,6 +8,11 @@ export interface TypographyStyleConfigProps {
     root?: TextStyle[];
     container?: Styles[];
 }
+export interface IOnTextLayoutEvent {
+    target?: {
+        visibleLinesCount?: number;
+    };
+}
 export interface ITypography {
     children: ReactNode;
     variant: TypographyVariantType;
@@ -23,5 +28,6 @@ export interface ITypography {
     isDisabled?: boolean;
     componentNode?: TypographyNodeElementType;
     styleConfig?: TypographyStyleConfigProps;
+    onTextLayout?: (e: IOnTextLayoutEvent) => void;
 }
 //# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Typography/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,MAAM,qBAAqB,GAAG,GAAG,iBAAiB,EAAE,CAAC;AAE3D,MAAM,MAAM,mBAAmB,GAAG,GAAG,eAAe,EAAE,CAAC;AAEvD,MAAM,MAAM,yBAAyB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;AAE9G,MAAM,WAAW,0BAA0B;IAIzC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IAInB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IAI1B,QAAQ,EAAE,SAAS,CAAC;IAKpB,OAAO,EAAE,qBAAqB,CAAC;IAK/B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAK5B,YAAY,CAAC,EAAE,OAAO,CAAC;IAKvB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,WAAW,CAAC,EAAE,OAAO,CAAC;IAKtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAKrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,aAAa,CAAC,EAAE,OAAO,CAAC;IAKxB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAK3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,UAAU,CAAC,EAAE,OAAO,CAAC;IAKrB,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAK1C,WAAW,CAAC,EAAE,0BAA0B,CAAC;CAC1C"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Typography/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,MAAM,qBAAqB,GAAG,GAAG,iBAAiB,EAAE,CAAC;AAE3D,MAAM,MAAM,mBAAmB,GAAG,GAAG,eAAe,EAAE,CAAC;AAEvD,MAAM,MAAM,yBAAyB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;AAE9G,MAAM,WAAW,0BAA0B;IAIzC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IAInB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE;QACP,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;CACH;AAED,MAAM,WAAW,WAAW;IAI1B,QAAQ,EAAE,SAAS,CAAC;IAKpB,OAAO,EAAE,qBAAqB,CAAC;IAK/B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAK5B,YAAY,CAAC,EAAE,OAAO,CAAC;IAKvB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,WAAW,CAAC,EAAE,OAAO,CAAC;IAKtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAKrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,aAAa,CAAC,EAAE,OAAO,CAAC;IAKxB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAK3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,UAAU,CAAC,EAAE,OAAO,CAAC;IAKrB,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAK1C,WAAW,CAAC,EAAE,0BAA0B,CAAC;IAKzC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/ct-design-typography",
-  "version": "5.13.0-SNAPSHOT-native-main.19",
+  "version": "5.13.0-SNAPSHOT-typographyOnTextLayout.0",
   "description": "Typography component with enhanced styleConfig support for RNW compatibility",
   "types": "dist/index.d.ts",
   "main": "dist/ct-design-typography.cjs.js",
@@ -19,13 +19,13 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@cleartrip/ct-design-types": "5.13.0-SNAPSHOT-native-main.19",
-    "@cleartrip/ct-design-theme": "5.13.0-SNAPSHOT-native-main.19",
-    "@cleartrip/ct-design-conditional-wrap": "5.13.0-SNAPSHOT-native-main.19",
-    "@cleartrip/ct-design-container": "5.13.0-SNAPSHOT-native-main.19",
-    "@cleartrip/ct-design-event-propagation": "5.13.0-SNAPSHOT-native-main.19",
-    "@cleartrip/ct-design-style-manager": "5.13.0-SNAPSHOT-native-main.19",
-    "@cleartrip/ct-design-common-utils": "5.13.0-SNAPSHOT-native-main.19"
+    "@cleartrip/ct-design-types": "5.13.0-SNAPSHOT-typographyOnTextLayout.0",
+    "@cleartrip/ct-design-theme": "5.13.0-SNAPSHOT-typographyOnTextLayout.0",
+    "@cleartrip/ct-design-conditional-wrap": "5.14.0-SNAPSHOT-typographyOnTextLayout.0",
+    "@cleartrip/ct-design-style-manager": "5.12.1-SNAPSHOT-typographyOnTextLayout.0",
+    "@cleartrip/ct-design-event-propagation": "5.14.0-SNAPSHOT-typographyOnTextLayout.0",
+    "@cleartrip/ct-design-container": "5.14.0-SNAPSHOT-typographyOnTextLayout.0",
+    "@cleartrip/ct-design-common-utils": "5.12.1-SNAPSHOT-typographyOnTextLayout.0"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.12.0"

package/src/Typography.native.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { Text } from 'react-native';
+import { NativeSyntheticEvent, Text, TextLayoutEventData } from 'react-native';
 import { useStyles } from '@cleartrip/ct-design-style-manager';
 import { useNativeMergeStyles } from '@cleartrip/ct-design-style-manager';
 import { getAccessibilityProps } from '@cleartrip/ct-design-common-utils';
@@ -51,6 +51,7 @@ const Typography = forwardRef<Text, ITypography>(
       onClick,
       isDisabled = false,
       colorCode = '',
+      onTextLayout,
     }: ITypography,
     ref: React.ForwardedRef<Text>,
   ) => {
@@ -82,6 +83,14 @@ const Typography = forwardRef<Text, ITypography>(
     const mergedEvents = useMergeEvents({ onClick: [onClick] });
     const { onClick: onClickEvent } = useTriggerEvents(mergedEvents);
 
+    const handleOnTextLayout = (e: NativeSyntheticEvent<TextLayoutEventData>) => {
+      onTextLayout?.({
+        target: {
+          visibleLinesCount: e?.nativeEvent?.lines?.length,
+        },
+      });
+    };
+
     return (
       <Conditional
         condition={!!onClick}
@@ -96,6 +105,7 @@ const Typography = forwardRef<Text, ITypography>(
           allowFontScaling={false}
           suppressHighlighting
           disabled={isDisabled}
+          onTextLayout={onTextLayout ? handleOnTextLayout : undefined}
         >
           {children}
         </Text>

package/src/type.ts

@@ -21,6 +21,12 @@ export interface TypographyStyleConfigProps {
   container?: Styles[];
 }
 
+export interface IOnTextLayoutEvent {
+  target?: {
+    visibleLinesCount?: number;
+  };
+}
+
 export interface ITypography {
   /**
    * The content to be displayed within the typography element.
@@ -91,4 +97,9 @@ export interface ITypography {
    * Style configuration for the typography.
    */
   styleConfig?: TypographyStyleConfigProps;
+
+  /**
+   * Callback function triggered onTextLayout.
+   */
+  onTextLayout?: (e: IOnTextLayoutEvent) => void;
 }