feat: adjust AnimatedText, update Typography component and props desc…

…ription (#3082) * refactor: adjust AnimatedText, update component and props description * refactor: correct prop description
callstack · Mar 13, 2022 · be26644 · be26644
1 parent 32dcb73
commit be26644
Show file tree

Hide file tree

Showing 9 changed files with 258 additions and 155 deletions.
diff --git a/example/src/Examples/TextExample.tsx b/example/src/Examples/TextExample.tsx
@@ -7,80 +7,78 @@ import {
   Subheading,
   Text,
   Title,
+  useTheme,
 } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
-const SectionHeader = ({ children }: React.PropsWithChildren<{}>) => {
-  return (
-    <Text variant="titleLarge" style={styles.sectionHeader}>
-      {children}
-    </Text>
-  );
-};
-
 const TextExample = () => {
+  const { isV3 } = useTheme();
   return (
     <ScreenWrapper>
       <View style={styles.container}>
-        <SectionHeader>Old text components:</SectionHeader>
+        {!isV3 && (
+          <>
+            <Caption style={styles.text}>Caption</Caption>
+            <Paragraph style={styles.text}>Paragraph</Paragraph>
+            <Subheading style={styles.text}>Subheading</Subheading>
+            <Title style={styles.text}>Title</Title>
+            <Headline style={styles.text}>Headline</Headline>
+          </>
+        )}
 
-        <Caption style={styles.text}>Caption</Caption>
-        <Paragraph style={styles.text}>Paragraph</Paragraph>
-        <Subheading style={styles.text}>Subheading</Subheading>
-        <Title style={styles.text}>Title</Title>
-        <Headline style={styles.text}>Headline</Headline>
+        {isV3 && (
+          <>
+            <Text style={styles.text} variant="displayLarge">
+              Display Large
+            </Text>
+            <Text style={styles.text} variant="displayMedium">
+              Display Medium
+            </Text>
+            <Text style={styles.text} variant="displaySmall">
+              Display small
+            </Text>
 
-        <SectionHeader>Text component:</SectionHeader>
+            <Text style={styles.text} variant="headlineLarge">
+              Headline Large
+            </Text>
+            <Text style={styles.text} variant="headlineMedium">
+              Headline Medium
+            </Text>
+            <Text style={styles.text} variant="headlineSmall">
+              Headline Small
+            </Text>
 
-        <Text style={styles.text} variant="displayLarge">
-          Display Large
-        </Text>
-        <Text style={styles.text} variant="displayMedium">
-          Display Medium
-        </Text>
-        <Text style={styles.text} variant="displaySmall">
-          Display small
-        </Text>
+            <Text style={styles.text} variant="titleLarge">
+              Title Large
+            </Text>
+            <Text style={styles.text} variant="titleMedium">
+              Title Medium
+            </Text>
+            <Text style={styles.text} variant="titleSmall">
+              Title Small
+            </Text>
 
-        <Text style={styles.text} variant="headlineLarge">
-          Headline Large
-        </Text>
-        <Text style={styles.text} variant="headlineMedium">
-          Headline Medium
-        </Text>
-        <Text style={styles.text} variant="headlineSmall">
-          Headline Small
-        </Text>
+            <Text style={styles.text} variant="bodyLarge">
+              Body Large
+            </Text>
+            <Text style={styles.text} variant="bodyMedium">
+              Body Medium
+            </Text>
+            <Text style={styles.text} variant="bodySmall">
+              Body Small
+            </Text>
 
-        <Text style={styles.text} variant="titleLarge">
-          Title Large
-        </Text>
-        <Text style={styles.text} variant="titleMedium">
-          Title Medium
-        </Text>
-        <Text style={styles.text} variant="titleSmall">
-          Title Small
-        </Text>
-
-        <Text style={styles.text} variant="bodyLarge">
-          Body Large
-        </Text>
-        <Text style={styles.text} variant="bodyMedium">
-          Body Medium
-        </Text>
-        <Text style={styles.text} variant="bodySmall">
-          Body Small
-        </Text>
-
-        <Text style={styles.text} variant="labelLarge">
-          Label Large
-        </Text>
-        <Text style={styles.text} variant="labelMedium">
-          Label Medium
-        </Text>
-        <Text style={styles.text} variant="labelSmall">
-          Label Small
-        </Text>
+            <Text style={styles.text} variant="labelLarge">
+              Label Large
+            </Text>
+            <Text style={styles.text} variant="labelMedium">
+              Label Medium
+            </Text>
+            <Text style={styles.text} variant="labelSmall">
+              Label Small
+            </Text>
+          </>
+        )}
       </View>
     </ScreenWrapper>
   );
@@ -89,11 +87,6 @@ const TextExample = () => {
 TextExample.title = 'Typography';
 
 const styles = StyleSheet.create({
-  sectionHeader: {
-    marginTop: 16,
-    marginBottom: 8,
-    opacity: 0.6,
-  },
   container: {
     padding: 16,
   },

diff --git a/src/components/FAB/AnimatedFAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB/AnimatedFAB.tsx
@@ -24,7 +24,7 @@ import type {
   TextLayoutEventData,
 } from 'react-native';
 import { white, black } from '../../../styles/themes/v2/colors';
-import AnimatedText from '../../Typography/v2/AnimatedText';
+import AnimatedText from '../../Typography/AnimatedText';
 import { getCombinedStyles } from './utils';
 
 export type AnimatedFABIconMode = 'static' | 'dynamic';

diff --git a/src/components/HelperText.tsx b/src/components/HelperText.tsx
@@ -7,7 +7,7 @@ import {
   TextStyle,
   LayoutChangeEvent,
 } from 'react-native';
-import AnimatedText from './Typography/v2/AnimatedText';
+import AnimatedText from './Typography/AnimatedText';
 import { withTheme } from '../core/theming';
 import type { $Omit, Theme } from '../types';
 

diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Animated, StyleSheet } from 'react-native';
-import AnimatedText from '../../Typography/v2/AnimatedText';
+import AnimatedText from '../../Typography/AnimatedText';
 
 import type { InputLabelProps } from '../types';
 

diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 
-import AnimatedText from '../../Typography/v2/AnimatedText';
+import AnimatedText from '../../Typography/AnimatedText';
 
 import type { LabelBackgroundProps } from '../types';
 

diff --git a/src/components/Typography/AnimatedText.tsx b/src/components/Typography/AnimatedText.tsx
@@ -0,0 +1,102 @@
+import * as React from 'react';
+import {
+  Animated,
+  TextStyle,
+  I18nManager,
+  StyleProp,
+  StyleSheet,
+} from 'react-native';
+import { withTheme } from '../../core/theming';
+import { Font, MD3TypescaleKey, Theme } from '../../types';
+
+type Props = React.ComponentPropsWithRef<typeof Animated.Text> & {
+  /**
+   * Variant defines appropriate text styles for type role and its size.
+   * Available variants:
+   *
+   *  Display: `displayLarge`, `displayMedium`, `displaySmall`
+   *
+   *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
+   *
+   *  Title: `titleLarge`, `titleMedium`, `titleSmall`
+   *
+   *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
+   *
+   *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
+   */
+  variant?: keyof typeof MD3TypescaleKey;
+  style?: StyleProp<TextStyle>;
+  /**
+   * @optional
+   */
+  theme: Theme;
+};
+
+/**
+ * Animated text component which follows styles from the theme.
+ *
+ * @extends Text props https://reactnative.dev/docs/text#props
+ */
+function AnimatedText({ style, theme, variant, ...rest }: Props) {
+  const writingDirection = I18nManager.isRTL ? 'rtl' : 'ltr';
+
+  if (theme.isV3 && variant) {
+    const stylesByVariant = Object.keys(MD3TypescaleKey).reduce(
+      (acc, key) => {
+        const { size, weight, lineHeight, tracking } =
+          theme.typescale[key as keyof typeof MD3TypescaleKey];
+
+        return {
+          ...acc,
+          [key]: {
+            fontSize: size,
+            fontWeight: weight,
+            lineHeight: lineHeight,
+            letterSpacing: tracking,
+            color: theme.colors.onSurface,
+          },
+        };
+      },
+      {} as {
+        [key in MD3TypescaleKey]: {
+          fontSize: number;
+          fontWeight: Font['fontWeight'];
+          lineHeight: number;
+          letterSpacing: number;
+        };
+      }
+    );
+
+    const styleForVariant = stylesByVariant[variant];
+
+    return (
+      <Animated.Text
+        {...rest}
+        style={[styleForVariant, styles.text, { writingDirection }, style]}
+      />
+    );
+  } else {
+    return (
+      <Animated.Text
+        {...rest}
+        style={[
+          styles.text,
+          {
+            ...theme.fonts.regular,
+            color: theme.isV3 ? theme.colors.onSurface : theme.colors.text,
+            writingDirection,
+          },
+          style,
+        ]}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  text: {
+    textAlign: 'left',
+  },
+});
+
+export default withTheme(AnimatedText);