WIP: Migrate components to TS

Author: gabrieldonadel

package.json

@@ -111,7 +111,7 @@
     "@types/invariant": "^2.2.35",
     "@types/jest": "^26.0.0",
     "@types/react": "^16.9.19",
-    "@types/react-native": "0.62.13",
+    "@types/react-native": "^0.69.5",
     "babel-eslint": "^10.0.0",
     "babel-jest": "^24.9.0",
     "commitlint": "^11.0.0",
@@ -127,7 +127,7 @@
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
     "react": "16.13.1",
-    "react-native": "0.63.4",
+    "react-native": "^0.69.4",
     "react-native-builder-bob": "^0.18.0",
     "react-test-renderer": "16.10.2",
     "release-it": "^14.2.2",

src/components/affix/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import {
+  Animated,
+  ColorValue,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+interface AffixProps {
+  labelAnimation: Animated.Value;
+  style?: StyleProp<TextStyle>;
+  children?: string;
+  type: 'prefix' | 'suffix';
+  fontSize: number;
+  color: ColorValue;
+}
+
+const Affix = ({
+  labelAnimation,
+  style,
+  children,
+  type,
+  fontSize,
+  color,
+}: AffixProps) => {
+  let containerStyle: Animated.AnimatedProps<StyleProp<ViewStyle>> = {
+    height: fontSize * 1.5,
+    opacity: labelAnimation,
+  };
+
+  let textStyle: StyleProp<TextStyle> = {
+    includeFontPadding: false,
+    textAlignVertical: 'top',
+    fontSize,
+    color,
+  };
+
+  switch (type) {
+    case 'prefix':
+      containerStyle.paddingRight = 8;
+      textStyle.textAlign = 'left';
+      break;
+
+    case 'suffix':
+      containerStyle.paddingLeft = 8;
+      textStyle.textAlign = 'right';
+      break;
+  }
+
+  return (
+    <Animated.View style={[styles.container, containerStyle]}>
+      <Animated.Text style={[style, textStyle]}>{children}</Animated.Text>
+    </Animated.View>
+  );
+};
+
+export default Affix;
+
+const styles = StyleSheet.create({
+  container: {
+    top: 2,
+    justifyContent: 'center',
+  },
+});

src/components/affix/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  ColorValue,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+} from 'react-native';
+
+interface CounterProps {
+  count: number;
+  limit?: number;
+  baseColor: ColorValue;
+  errorColor: ColorValue;
+  style?: StyleProp<TextStyle>;
+}
+
+const Counter = ({
+  count,
+  limit,
+  baseColor,
+  errorColor,
+  style,
+}: CounterProps) => {
+  if (!limit) {
+    return null;
+  }
+
+  return (
+    <Text
+      style={[
+        styles.text,
+        style,
+        {
+          color: count > limit ? errorColor : baseColor,
+        },
+      ]}
+    >{`${count} / ${limit}`}</Text>
+  );
+};
+
+export default Counter;
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 12,
+    lineHeight: 16,
+    textAlign: 'right',
+    backgroundColor: 'transparent',
+    paddingVertical: 2,
+    marginLeft: 8,
+  },
+});

src/components/affix/styles.js

@@ -2,7 +2,7 @@ import 'react-native';
 import React from 'react';
 import renderer from 'react-test-renderer';
 
-import Counter from '.';
+import Counter from './index';
 
 /* eslint-env jest */