From c6baa3f843e637e8b6dffd1737392f6a563f0f2c Mon Sep 17 00:00:00 2001 From: Matt Grote Date: Tue, 8 Nov 2022 10:35:44 -0300 Subject: [PATCH 1/7] Update ReAnimated --- ios/Podfile.lock | 4 ++-- package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index b7b2f9b4..2a8fbbd8 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -447,7 +447,7 @@ PODS: - React-Core - RNReactNativeHapticFeedback (1.14.0): - React-Core - - RNReanimated (2.10.0): + - RNReanimated (2.12.0): - DoubleConversion - FBLazyVector - FBReactNativeSpec @@ -825,7 +825,7 @@ SPEC CHECKSUMS: RNGestureHandler: b7a872907ee289ada902127f2554fa1d2c076122 RNLocalize: a64514b46a01375fdfae9349036b4dc7130333b5 RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c - RNReanimated: 60e291d42c77752a0f6d6f358387bdf225a87c6e + RNReanimated: 2a91e85fcd343f8af3c58d3425b99fdd285590a5 RNScreens: 34cc502acf1b916c582c60003dc3089fa01dc66d RNSentry: a034d0e81e3d3c04b770dd2df953fe634d372d22 RNSVG: 07dbd870b0dcdecc99b3a202fa37c8ca163caec2 diff --git a/package.json b/package.json index 19c5cc1b..8819aa39 100644 --- a/package.json +++ b/package.json @@ -90,7 +90,7 @@ "react-native-portalize": "^1.0.7", "react-native-process-shim": "^1.1.1", "react-native-randombytes": "^3.6.1", - "react-native-reanimated": "^2.10.0", + "react-native-reanimated": "^2.12.0", "react-native-safe-area-context": "^4.4.1", "react-native-screens": "^3.14.1", "react-native-sensitive-info": "^6.0.0-alpha.9", diff --git a/yarn.lock b/yarn.lock index 4278bd64..71424b49 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9227,10 +9227,10 @@ react-native-randombytes@^3.6.1: buffer "^4.9.1" sjcl "^1.0.3" -react-native-reanimated@^2.10.0: - version "2.10.0" - resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.10.0.tgz#ed53be66bbb553b5b5e93e93ef4217c87b8c73db" - integrity sha512-jKm3xz5nX7ABtHzzuuLmawP0pFWP77lXNdIC6AWOceBs23OHUaJ29p4prxr/7Sb588GwTbkPsYkDqVFaE3ezNQ== +react-native-reanimated@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.12.0.tgz#5821eecfb1769b1617a67a2d4dec12fdeedb2b6e" + integrity sha512-nrlPyw+Hx9u4iJhZk9PoTvDo/QmVAd+bo7OK9Tv3hveNEF9++5oig/g3Uv9V93shy9avTYGsUprUvAEt/xdzeQ== dependencies: "@babel/plugin-transform-object-assign" "^7.16.7" "@babel/preset-typescript" "^7.16.7" From 441a75c126c98bd60ebaa353246dea4e8b62bb90 Mon Sep 17 00:00:00 2001 From: Matt Grote Date: Tue, 8 Nov 2022 15:11:26 -0300 Subject: [PATCH 2/7] Pass common components to TS --- .../AccountInfo/{index.js => index.tsx} | 8 ++--- .../AccountInfo/{styles.js => styles.ts} | 0 .../common/Badge/{index.js => index.tsx} | 11 ++++-- .../common/Badge/{styles.js => styles.ts} | 0 .../CopiedToast/{index.js => index.tsx} | 13 +++++-- .../CopiedToast/{styles.js => styles.ts} | 0 .../common/Copy/{index.js => index.tsx} | 15 ++++---- .../common/Copy/{styles.js => styles.ts} | 0 src/components/common/ErrorBoundary/index.js | 25 -------------- src/components/common/ErrorBoundary/index.tsx | 34 +++++++++++++++++++ .../ErrorState/{constants.js => constants.ts} | 9 ++++- .../common/ErrorState/{index.js => index.tsx} | 29 ++++++++++++---- .../ErrorState/{styles.js => styles.ts} | 0 .../components/ListItem/index.tsx} | 10 ++++-- .../components/ListItem/styles.ts} | 0 src/components/common/SeedPhrase/index.tsx | 5 ++- src/components/common/index.ts | 2 -- src/constants/general.ts | 10 +++--- .../Deposit/components/IDDetails/index.js | 2 +- .../components/InfoWithActions/index.tsx} | 20 ++++++++--- .../components/InfoWithActions/styles.ts} | 0 21 files changed, 126 insertions(+), 67 deletions(-) rename src/components/common/AccountInfo/{index.js => index.tsx} (83%) rename src/components/common/AccountInfo/{styles.js => styles.ts} (100%) rename src/components/common/Badge/{index.js => index.tsx} (76%) rename src/components/common/Badge/{styles.js => styles.ts} (100%) rename src/components/common/CopiedToast/{index.js => index.tsx} (81%) rename src/components/common/CopiedToast/{styles.js => styles.ts} (100%) rename src/components/common/Copy/{index.js => index.tsx} (79%) rename src/components/common/Copy/{styles.js => styles.ts} (100%) delete mode 100644 src/components/common/ErrorBoundary/index.js create mode 100644 src/components/common/ErrorBoundary/index.tsx rename src/components/common/ErrorState/{constants.js => constants.ts} (72%) rename src/components/common/ErrorState/{index.js => index.tsx} (51%) rename src/components/common/ErrorState/{styles.js => styles.ts} (100%) rename src/components/common/{ListItem/index.js => SeedPhrase/components/ListItem/index.tsx} (66%) rename src/components/common/{ListItem/styles.js => SeedPhrase/components/ListItem/styles.ts} (100%) rename src/{components/common/InfoWithActions/index.js => screens/flows/Deposit/components/InfoWithActions/index.tsx} (77%) rename src/{components/common/InfoWithActions/styles.js => screens/flows/Deposit/components/InfoWithActions/styles.ts} (100%) diff --git a/src/components/common/AccountInfo/index.js b/src/components/common/AccountInfo/index.tsx similarity index 83% rename from src/components/common/AccountInfo/index.js rename to src/components/common/AccountInfo/index.tsx index a3986017..598ae126 100644 --- a/src/components/common/AccountInfo/index.js +++ b/src/components/common/AccountInfo/index.tsx @@ -2,13 +2,11 @@ import Clipboard from '@react-native-community/clipboard'; import React, { useEffect, useState } from 'react'; import { View } from 'react-native'; -import CopiedToast from '@/commonComponents/CopiedToast'; -import Touchable from '@/commonComponents/Touchable'; +import { CopiedToast, Text, Touchable } from '@/components/common'; import { FontStyles } from '@/constants/theme'; import { useAppSelector } from '@/redux/hooks'; import shortAddress from '@/utils/shortAddress'; -import Text from '../Text'; import styles from './styles'; const AccountInfo = () => { @@ -24,7 +22,7 @@ const AccountInfo = () => { }, []); const copyToClipboard = async () => { - Clipboard.setString(principal); + Clipboard.setString(principal!); setVisibility(true); }; @@ -32,7 +30,7 @@ const AccountInfo = () => { <> - {reverseResolvedName || name} + {reverseResolvedName || name} {shortAddress(principal)} diff --git a/src/components/common/AccountInfo/styles.js b/src/components/common/AccountInfo/styles.ts similarity index 100% rename from src/components/common/AccountInfo/styles.js rename to src/components/common/AccountInfo/styles.ts diff --git a/src/components/common/Badge/index.js b/src/components/common/Badge/index.tsx similarity index 76% rename from src/components/common/Badge/index.js rename to src/components/common/Badge/index.tsx index 63ea9cc7..c02d85a7 100644 --- a/src/components/common/Badge/index.js +++ b/src/components/common/Badge/index.tsx @@ -1,10 +1,17 @@ import React from 'react'; import { Image, View } from 'react-native'; -import Text from '../Text'; +import { Text } from '@/components/common'; + import styles from './styles'; -const Badge = ({ name, value, icon }) => ( +interface Props { + name?: string; + value: string; + icon?: string; +} + +const Badge = ({ name, value, icon }: Props) => ( {name && {name}} diff --git a/src/components/common/Badge/styles.js b/src/components/common/Badge/styles.ts similarity index 100% rename from src/components/common/Badge/styles.js rename to src/components/common/Badge/styles.ts diff --git a/src/components/common/CopiedToast/index.js b/src/components/common/CopiedToast/index.tsx similarity index 81% rename from src/components/common/CopiedToast/index.js rename to src/components/common/CopiedToast/index.tsx index b738b184..6894ec12 100644 --- a/src/components/common/CopiedToast/index.js +++ b/src/components/common/CopiedToast/index.tsx @@ -1,21 +1,28 @@ import { t } from 'i18next'; import React, { useEffect, useRef } from 'react'; -import { Animated, View } from 'react-native'; +import { Animated, StyleProp, View, ViewStyle } from 'react-native'; +import { Text } from '@/components/common'; import { FontStyles } from '@/constants/theme'; -import Text from '../Text'; import styles from './styles'; const TOAST_DURATION = 2500; const TOAST_ANIMATION_SPEED = 200; +interface Props { + visibility: boolean; + setVisibility: (value: boolean) => void; + customStyle?: StyleProp; + customPointerStyle?: StyleProp; +} + function CopiedToast({ visibility, setVisibility, customStyle, customPointerStyle, -}) { +}: Props) { const fadeAnim = useRef(new Animated.Value(0)).current; useEffect(() => { diff --git a/src/components/common/CopiedToast/styles.js b/src/components/common/CopiedToast/styles.ts similarity index 100% rename from src/components/common/CopiedToast/styles.js rename to src/components/common/CopiedToast/styles.ts diff --git a/src/components/common/Copy/index.js b/src/components/common/Copy/index.tsx similarity index 79% rename from src/components/common/Copy/index.js rename to src/components/common/Copy/index.tsx index 5511244b..dbe4db39 100644 --- a/src/components/common/Copy/index.js +++ b/src/components/common/Copy/index.tsx @@ -1,17 +1,20 @@ import Clipboard from '@react-native-community/clipboard'; import { t } from 'i18next'; import React, { useEffect, useState } from 'react'; -import { View } from 'react-native'; +import { StyleProp, View, ViewStyle } from 'react-native'; -import CopiedToast from '@/commonComponents/CopiedToast'; -import Touchable from '@/commonComponents/Touchable'; +import { CopiedToast, Text, Touchable } from '@/components/common'; import { Colors } from '@/constants/theme'; import Icon from '@/icons'; -import Text from '../Text'; import styles from './styles'; -const Copy = ({ text, customStyle }) => { +interface Props { + text: string; + customStyle?: StyleProp; +} + +function Copy({ text, customStyle }: Props) { const [visibility, setVisibility] = useState(false); useEffect(() => { @@ -37,6 +40,6 @@ const Copy = ({ text, customStyle }) => { ); -}; +} export default Copy; diff --git a/src/components/common/Copy/styles.js b/src/components/common/Copy/styles.ts similarity index 100% rename from src/components/common/Copy/styles.js rename to src/components/common/Copy/styles.ts diff --git a/src/components/common/ErrorBoundary/index.js b/src/components/common/ErrorBoundary/index.js deleted file mode 100644 index 6e07361a..00000000 --- a/src/components/common/ErrorBoundary/index.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; - -import ErrorBoundaryScreen from '@/screens/error/ErrorBoundaryScreen'; - -class ErrorBoundary extends React.Component { - state = { hasError: null }; - - static getDerivedStateFromError(error) { - return { hasError: error }; - } - - componentDidCatch(error, info) { - this.logErrorToServices(error.toString(), info.componentStack); - } - // A fake logging service 😬 - logErrorToServices = console.log; - render() { - if (this.state.hasError) { - return ; - } - return this.props.children; - } -} - -export default ErrorBoundary; diff --git a/src/components/common/ErrorBoundary/index.tsx b/src/components/common/ErrorBoundary/index.tsx new file mode 100644 index 00000000..9b340977 --- /dev/null +++ b/src/components/common/ErrorBoundary/index.tsx @@ -0,0 +1,34 @@ +import React, { Component, ErrorInfo, ReactNode } from 'react'; + +import ErrorBoundaryScreen from '@/screens/error/ErrorBoundaryScreen'; + +interface Props { + children?: ReactNode; +} + +interface State { + hasError: boolean; +} + +class ErrorBoundary extends Component { + public state: State = { hasError: false }; + + public static getDerivedStateFromError(_: Error): State { + return { hasError: true }; + } + + public componentDidCatch(error: Error, info: ErrorInfo) { + this.logErrorToServices(error.toString(), info.componentStack); + } + // A fake logging service 😬 + logErrorToServices = console.log; + + public render() { + if (this.state.hasError) { + return ; + } + return this.props.children; + } +} + +export default ErrorBoundary; diff --git a/src/components/common/ErrorState/constants.js b/src/components/common/ErrorState/constants.ts similarity index 72% rename from src/components/common/ErrorState/constants.js rename to src/components/common/ErrorState/constants.ts index c7f2da8e..b50dcb46 100644 --- a/src/components/common/ErrorState/constants.js +++ b/src/components/common/ErrorState/constants.ts @@ -2,7 +2,14 @@ import { t } from 'i18next'; import { ERROR_TYPES } from '@/constants/general'; -export const getErrorStateData = type => +export interface ErrorStateData { + emoji: string; + title: string; + description: string; + buttonTitle: string; +} + +export const getErrorStateData = (type: ERROR_TYPES) => ({ [ERROR_TYPES.FETCH_ERROR]: t(`errors.${ERROR_TYPES.FETCH_ERROR}`, { returnObjects: true, diff --git a/src/components/common/ErrorState/index.js b/src/components/common/ErrorState/index.tsx similarity index 51% rename from src/components/common/ErrorState/index.js rename to src/components/common/ErrorState/index.tsx index 6fb49fbc..ffd6b8dd 100644 --- a/src/components/common/ErrorState/index.js +++ b/src/components/common/ErrorState/index.tsx @@ -1,21 +1,37 @@ import React from 'react'; -import { View } from 'react-native'; +import { StyleProp, View, ViewStyle } from 'react-native'; import Button from '@/buttons/Button'; +import { ERROR_TYPES } from '@/constants/general'; import { FontStyles } from '@/constants/theme'; import Text from '../Text'; -import { getErrorStateData } from './constants'; +import { ErrorStateData, getErrorStateData } from './constants'; import styles from './styles'; -function ErrorState({ errorType, onPress, loading, style, buttonStyle }) { - const { title, emoji, description, buttonTitle, buttonImage } = - getErrorStateData(errorType); +interface Props { + errorType: ERROR_TYPES; + onPress?: () => void; + loading?: boolean; + style?: StyleProp; + buttonStyle?: StyleProp; +} + +function ErrorState({ + errorType, + onPress, + loading, + style, + buttonStyle, +}: Props) { + const { title, emoji, description, buttonTitle } = getErrorStateData( + errorType + ) as ErrorStateData; return ( {emoji} - {title} + {title} {description} @@ -24,7 +40,6 @@ function ErrorState({ errorType, onPress, loading, style, buttonStyle }) { onPress={onPress} loading={loading} text={buttonTitle} - iconName={buttonImage} buttonStyle={[styles.button, buttonStyle]} /> )} diff --git a/src/components/common/ErrorState/styles.js b/src/components/common/ErrorState/styles.ts similarity index 100% rename from src/components/common/ErrorState/styles.js rename to src/components/common/ErrorState/styles.ts diff --git a/src/components/common/ListItem/index.js b/src/components/common/SeedPhrase/components/ListItem/index.tsx similarity index 66% rename from src/components/common/ListItem/index.js rename to src/components/common/SeedPhrase/components/ListItem/index.tsx index 506f5cf5..31e78936 100644 --- a/src/components/common/ListItem/index.js +++ b/src/components/common/SeedPhrase/components/ListItem/index.tsx @@ -1,10 +1,16 @@ import React from 'react'; import { View } from 'react-native'; -import Text from '../Text'; +import { Text } from '@/components/common'; + import styles from './styles'; -function ListItem({ number, text }) { +interface Props { + number: number; + text: string; +} + +function ListItem({ number, text }: Props) { return ( {number} diff --git a/src/components/common/ListItem/styles.js b/src/components/common/SeedPhrase/components/ListItem/styles.ts similarity index 100% rename from src/components/common/ListItem/styles.js rename to src/components/common/SeedPhrase/components/ListItem/styles.ts diff --git a/src/components/common/SeedPhrase/index.tsx b/src/components/common/SeedPhrase/index.tsx index b9393285..ac49dfd4 100644 --- a/src/components/common/SeedPhrase/index.tsx +++ b/src/components/common/SeedPhrase/index.tsx @@ -4,11 +4,10 @@ import { useTranslation } from 'react-i18next'; import { Image, Pressable, View } from 'react-native'; import KeyImg from '@/assets/icons/key.png'; -import ListItem from '@/commonComponents/ListItem'; -import Touchable from '@/commonComponents/Touchable'; +import { Text, Touchable } from '@/components/common'; import { TestIds } from '@/constants/testIds'; -import Text from '../Text'; +import ListItem from './components/ListItem'; import styles from './styles'; interface Props { diff --git a/src/components/common/index.ts b/src/components/common/index.ts index a3aa182e..0cfd876a 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -13,9 +13,7 @@ export { default as ErrorState } from './ErrorState'; export { default as GradientText } from './GradientText'; export { default as Header } from './Header'; export { default as Image } from './Image'; -export { default as InfoWithActions } from './InfoWithActions'; export { default as KeyboardScrollView } from './KeyboardScrollView'; -export { default as ListItem } from './ListItem'; export { default as Modal } from './Modal'; export { default as NftDisplayer } from './NftDisplayer'; export { default as PasswordInput } from './PasswordInput'; diff --git a/src/constants/general.ts b/src/constants/general.ts index e277bc25..6fb63b20 100644 --- a/src/constants/general.ts +++ b/src/constants/general.ts @@ -13,8 +13,8 @@ export const isValidPassword = (password?: string) => { return password.trim() !== '' && password.length >= MIN_PASSWORD_LENGTH; }; -export const ERROR_TYPES = { - CONNECTION_ERROR: 'CONNECTION_ERROR', - FETCH_ERROR: 'FETCH_ERROR', - ERROR_BOUNDARY: 'ERROR_BOUNDARY', -}; +export enum ERROR_TYPES { + CONNECTION_ERROR = 'CONNECTION_ERROR', + FETCH_ERROR = 'FETCH_ERROR', + ERROR_BOUNDARY = 'ERROR_BOUNDARY', +} diff --git a/src/screens/flows/Deposit/components/IDDetails/index.js b/src/screens/flows/Deposit/components/IDDetails/index.js index 7fd5d60a..ff59355d 100644 --- a/src/screens/flows/Deposit/components/IDDetails/index.js +++ b/src/screens/flows/Deposit/components/IDDetails/index.js @@ -3,13 +3,13 @@ import React, { useEffect, useState } from 'react'; import CopiedToast from '@/commonComponents/CopiedToast'; import GradientText from '@/commonComponents/GradientText'; -import InfoWithActions from '@/commonComponents/InfoWithActions'; import Text from '@/commonComponents/Text'; import { Column } from '@/layout'; import { useAppSelector } from '@/redux/hooks'; import shortAddress from '@/utils/shortAddress'; import { getIdInfo } from '../../constants'; +import InfoWithActions from '../InfoWithActions'; import styles from './styles'; function IDDetails({ idType }) { diff --git a/src/components/common/InfoWithActions/index.js b/src/screens/flows/Deposit/components/InfoWithActions/index.tsx similarity index 77% rename from src/components/common/InfoWithActions/index.js rename to src/screens/flows/Deposit/components/InfoWithActions/index.tsx index 3b0cf964..2f888ea9 100644 --- a/src/components/common/InfoWithActions/index.js +++ b/src/screens/flows/Deposit/components/InfoWithActions/index.tsx @@ -2,14 +2,24 @@ import React from 'react'; import { View } from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; -import Touchable from '@/commonComponents/Touchable'; +import { Text, Touchable } from '@/components/common'; import Icon from '@/icons'; import animationScales from '@/utils/animationScales'; -import Text from '../Text'; import styles from './styles'; -const InfoWithActions = ({ text, colors, actions }) => { +interface Action { + icon: string; + onPress: () => void; +} + +interface Props { + text: string; + colors: string[]; + actions: Action[]; +} + +function InfoWithActions({ text, colors, actions }: Props) { return ( { end={{ x: 1, y: 0 }}> {text} - + {React.Children.toArray( actions.map(action => ( @@ -34,6 +44,6 @@ const InfoWithActions = ({ text, colors, actions }) => { ); -}; +} export default InfoWithActions; diff --git a/src/components/common/InfoWithActions/styles.js b/src/screens/flows/Deposit/components/InfoWithActions/styles.ts similarity index 100% rename from src/components/common/InfoWithActions/styles.js rename to src/screens/flows/Deposit/components/InfoWithActions/styles.ts From f9dc4540b00c10564dafdd86d1b5352574fb3d5b Mon Sep 17 00:00:00 2001 From: Matt Grote Date: Tue, 8 Nov 2022 16:19:31 -0300 Subject: [PATCH 3/7] Pass TS emojis components --- .../components/Emoji/{index.js => index.tsx} | 11 +++-- .../components/Emoji/{styles.js => styles.ts} | 0 .../EmojiBar/{index.js => index.tsx} | 22 ++++++---- .../EmojiBar/{styles.js => styles.ts} | 0 .../EmojiBoard/{index.js => index.tsx} | 29 ++++++++----- .../EmojiBoard/{styles.js => styles.ts} | 2 +- .../components/EmojiCategoryTitle/index.js | 11 ----- .../components/EmojiCategoryTitle/styles.js | 9 ---- .../EmojiSelector/{index.js => index.tsx} | 13 ++++-- .../EmojiSelector/{styles.js => styles.ts} | 7 ++++ .../EmojiSelector/{utils.js => utils.ts} | 41 ++++++++++++------- .../layout/{styles.js => styles.ts} | 0 12 files changed, 84 insertions(+), 61 deletions(-) rename src/components/common/EmojiSelector/components/Emoji/{index.js => index.tsx} (64%) rename src/components/common/EmojiSelector/components/Emoji/{styles.js => styles.ts} (100%) rename src/components/common/EmojiSelector/components/EmojiBar/{index.js => index.tsx} (59%) rename src/components/common/EmojiSelector/components/EmojiBar/{styles.js => styles.ts} (100%) rename src/components/common/EmojiSelector/components/EmojiBoard/{index.js => index.tsx} (53%) rename src/components/common/EmojiSelector/components/EmojiBoard/{styles.js => styles.ts} (89%) delete mode 100644 src/components/common/EmojiSelector/components/EmojiCategoryTitle/index.js delete mode 100644 src/components/common/EmojiSelector/components/EmojiCategoryTitle/styles.js rename src/components/common/EmojiSelector/{index.js => index.tsx} (71%) rename src/components/common/EmojiSelector/{styles.js => styles.ts} (61%) rename src/components/common/EmojiSelector/{utils.js => utils.ts} (72%) rename src/components/layout/{styles.js => styles.ts} (100%) diff --git a/src/components/common/EmojiSelector/components/Emoji/index.js b/src/components/common/EmojiSelector/components/Emoji/index.tsx similarity index 64% rename from src/components/common/EmojiSelector/components/Emoji/index.js rename to src/components/common/EmojiSelector/components/Emoji/index.tsx index bdd799f6..e0a969cc 100644 --- a/src/components/common/EmojiSelector/components/Emoji/index.js +++ b/src/components/common/EmojiSelector/components/Emoji/index.tsx @@ -1,12 +1,17 @@ import React from 'react'; -import Text from '@/commonComponents/Text'; -import Touchable from '@/commonComponents/Touchable'; +import { Text, Touchable } from '@/components/common'; import { charFromEmojiObject } from '../../utils'; import styles from './styles'; -function Emoji({ onSelect, emojiObject, isLastEmoji }) { +interface Props { + onSelect: (emoji: string) => void; + emojiObject: any; + isLastEmoji: boolean; +} + +function Emoji({ onSelect, emojiObject, isLastEmoji }: Props) { const charEmoji = charFromEmojiObject(emojiObject); const margin = { marginRight: isLastEmoji ? 0 : 10 }; diff --git a/src/components/common/EmojiSelector/components/Emoji/styles.js b/src/components/common/EmojiSelector/components/Emoji/styles.ts similarity index 100% rename from src/components/common/EmojiSelector/components/Emoji/styles.js rename to src/components/common/EmojiSelector/components/Emoji/styles.ts diff --git a/src/components/common/EmojiSelector/components/EmojiBar/index.js b/src/components/common/EmojiSelector/components/EmojiBar/index.tsx similarity index 59% rename from src/components/common/EmojiSelector/components/EmojiBar/index.js rename to src/components/common/EmojiSelector/components/EmojiBar/index.tsx index 0eda9178..6a6230bc 100644 --- a/src/components/common/EmojiSelector/components/EmojiBar/index.js +++ b/src/components/common/EmojiSelector/components/EmojiBar/index.tsx @@ -1,21 +1,25 @@ import React from 'react'; import { View } from 'react-native'; -import Text from '@/commonComponents/Text'; -import Touchable from '@/commonComponents/Touchable'; +import { Text, Touchable } from '@/components/common'; +import { Colors } from '@/constants/theme'; -import { Categories, categoryKeys } from '../../utils'; +import { Categories, Category } from '../../utils'; import styles from './styles'; -const EmojiBar = ({ currentCategory, setCurrentCategory }) => { +interface Props { + currentCategory: Category; + setCurrentCategory: (category: Category) => void; +} + +function EmojiBar({ currentCategory, setCurrentCategory }: Props) { return ( - {categoryKeys.map(c => { - const category = Categories[c]; + {Categories.map((category: Category) => { const backgroundColor = category.name === currentCategory.name - ? 'rgba(120, 120, 128, 0.36)' - : '#000000'; + ? Colors.White.Secondary + : Colors.Black.Pure; return ( { })} ); -}; +} export default EmojiBar; diff --git a/src/components/common/EmojiSelector/components/EmojiBar/styles.js b/src/components/common/EmojiSelector/components/EmojiBar/styles.ts similarity index 100% rename from src/components/common/EmojiSelector/components/EmojiBar/styles.js rename to src/components/common/EmojiSelector/components/EmojiBar/styles.ts diff --git a/src/components/common/EmojiSelector/components/EmojiBoard/index.js b/src/components/common/EmojiSelector/components/EmojiBoard/index.tsx similarity index 53% rename from src/components/common/EmojiSelector/components/EmojiBoard/index.js rename to src/components/common/EmojiSelector/components/EmojiBoard/index.tsx index debf99d8..857acedb 100644 --- a/src/components/common/EmojiSelector/components/EmojiBoard/index.js +++ b/src/components/common/EmojiSelector/components/EmojiBoard/index.tsx @@ -1,11 +1,16 @@ import React from 'react'; import { ScrollView, View } from 'react-native'; -import { emojiByCategory, sortEmoji, splitToRows } from '../../utils'; +import { Category, emojiByCategory, sortEmoji, splitToRows } from '../../utils'; import Emoji from '../Emoji'; import styles from './styles'; -function EmojiBoard({ onSelect, currentCategory }) { +interface Props { + onSelect: () => void; + currentCategory: Category; +} + +function EmojiBoard({ onSelect, currentCategory }: Props) { const categoryEmojis = emojiByCategory(currentCategory); const sortedEmojis = sortEmoji(categoryEmojis); const rowsToDisplay = splitToRows(sortedEmojis); @@ -19,14 +24,18 @@ function EmojiBoard({ onSelect, currentCategory }) { - {row.map((emojiObject, emojiIndex) => ( - - ))} + {row.map((emojiObject, emojiIndex) => { + console.tron.log('emojiObject', emojiObject); + console.tron.log('emojiIndex', emojiIndex); + return ( + + ); + })} ); })} diff --git a/src/components/common/EmojiSelector/components/EmojiBoard/styles.js b/src/components/common/EmojiSelector/components/EmojiBoard/styles.ts similarity index 89% rename from src/components/common/EmojiSelector/components/EmojiBoard/styles.js rename to src/components/common/EmojiSelector/components/EmojiBoard/styles.ts index cdb4118b..70941a43 100644 --- a/src/components/common/EmojiSelector/components/EmojiBoard/styles.js +++ b/src/components/common/EmojiSelector/components/EmojiBoard/styles.ts @@ -11,6 +11,6 @@ export default StyleSheet.create({ justifyContent: 'space-between', }, lastBoardRow: { - justifyContent: null, + justifyContent: undefined, }, }); diff --git a/src/components/common/EmojiSelector/components/EmojiCategoryTitle/index.js b/src/components/common/EmojiSelector/components/EmojiCategoryTitle/index.js deleted file mode 100644 index 49b92ff5..00000000 --- a/src/components/common/EmojiSelector/components/EmojiCategoryTitle/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -import Text from '@/components/common/Text'; - -import styles from './styles'; - -function EmojiCategoryTitle({ currentCategory }) { - return {currentCategory.name}; -} - -export default EmojiCategoryTitle; diff --git a/src/components/common/EmojiSelector/components/EmojiCategoryTitle/styles.js b/src/components/common/EmojiSelector/components/EmojiCategoryTitle/styles.js deleted file mode 100644 index b90b5cf1..00000000 --- a/src/components/common/EmojiSelector/components/EmojiCategoryTitle/styles.js +++ /dev/null @@ -1,9 +0,0 @@ -import { StyleSheet } from 'react-native'; - -export default StyleSheet.create({ - emojiCategoryTytle: { - fontSize: 16, - marginBottom: 3, - color: 'rgba(235, 235, 245, 0.6)', - }, -}); diff --git a/src/components/common/EmojiSelector/index.js b/src/components/common/EmojiSelector/index.tsx similarity index 71% rename from src/components/common/EmojiSelector/index.js rename to src/components/common/EmojiSelector/index.tsx index 9dc70a3a..06033af7 100644 --- a/src/components/common/EmojiSelector/index.js +++ b/src/components/common/EmojiSelector/index.tsx @@ -1,18 +1,23 @@ import React, { useState } from 'react'; import { View } from 'react-native'; +import { Text } from '@/components/common'; + import EmojiBar from './components/EmojiBar'; import EmojiBoard from './components/EmojiBoard'; -import EmojiCategoryTitle from './components/EmojiCategoryTitle'; import styles from './styles'; import { Categories } from './utils'; -function EmojiSelector({ onSelect }) { - const [currentCategory, setCurrentCategory] = useState(Categories.emotion); +interface Props { + onSelect: (emoji: string) => void; +} + +function EmojiSelector({ onSelect }: Props) { + const [currentCategory, setCurrentCategory] = useState(Categories[0]); return ( - + {currentCategory.name} String.fromCodePoint(...utf16.split('-').map(u => '0x' + u)); @@ -46,14 +61,12 @@ export const charFromEmojiObject = obj => charFromUtf16(obj.unified); export const filteredEmojis = emoji.filter(e => !e.obsoleted_by); -export const emojiByCategory = category => +export const emojiByCategory = (category: Category) => filteredEmojis.filter(e => e.category === category.name); export const sortEmoji = list => list.sort((a, b) => a.sort_order - b.sort_order); -export const categoryKeys = Object.keys(Categories); - export const splitToRows = list => { const result = []; while (list.length > 0) { diff --git a/src/components/layout/styles.js b/src/components/layout/styles.ts similarity index 100% rename from src/components/layout/styles.js rename to src/components/layout/styles.ts From 9c8aa7c8603d14c68e6b0559fb6e5ad07c6c27bc Mon Sep 17 00:00:00 2001 From: nachosan Date: Mon, 14 Nov 2022 19:34:47 -0300 Subject: [PATCH 4/7] Improved emoji selector --- .../components/EmojiBoard/index.tsx | 17 ++++++++++--- .../components/EmojiBoard/styles.ts | 5 +--- src/components/common/EmojiSelector/index.tsx | 4 ++- src/components/common/EmojiSelector/styles.ts | 8 +----- src/components/common/EmojiSelector/utils.ts | 25 ++++++++++++++----- src/components/common/UserIcon/styles.ts | 2 +- src/screens/tabs/Profile/index.tsx | 4 +-- .../modals/EditEmoji/{index.js => index.tsx} | 23 +++++++++++++---- .../modals/EditEmoji/{styles.js => styles.ts} | 1 - 9 files changed, 59 insertions(+), 30 deletions(-) rename src/screens/tabs/Profile/modals/EditEmoji/{index.js => index.tsx} (70%) rename src/screens/tabs/Profile/modals/EditEmoji/{styles.js => styles.ts} (92%) diff --git a/src/components/common/EmojiSelector/components/EmojiBoard/index.tsx b/src/components/common/EmojiSelector/components/EmojiBoard/index.tsx index 857acedb..974d7773 100644 --- a/src/components/common/EmojiSelector/components/EmojiBoard/index.tsx +++ b/src/components/common/EmojiSelector/components/EmojiBoard/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useRef } from 'react'; import { ScrollView, View } from 'react-native'; import { Category, emojiByCategory, sortEmoji, splitToRows } from '../../utils'; @@ -6,7 +6,7 @@ import Emoji from '../Emoji'; import styles from './styles'; interface Props { - onSelect: () => void; + onSelect: (emoji: string) => void; currentCategory: Category; } @@ -14,10 +14,21 @@ function EmojiBoard({ onSelect, currentCategory }: Props) { const categoryEmojis = emojiByCategory(currentCategory); const sortedEmojis = sortEmoji(categoryEmojis); const rowsToDisplay = splitToRows(sortedEmojis); + const listRef = useRef(null); + + useEffect(() => { + if (listRef.current) { + listRef.current.scrollTo({ y: 0, animated: false }); + } + }, [currentCategory]); return ( - + {rowsToDisplay.map((row, index) => { const isLastRow = rowsToDisplay?.length === index + 1; return ( diff --git a/src/components/common/EmojiSelector/components/EmojiBoard/styles.ts b/src/components/common/EmojiSelector/components/EmojiBoard/styles.ts index 70941a43..c76da636 100644 --- a/src/components/common/EmojiSelector/components/EmojiBoard/styles.ts +++ b/src/components/common/EmojiSelector/components/EmojiBoard/styles.ts @@ -2,13 +2,10 @@ import { StyleSheet } from 'react-native'; export default StyleSheet.create({ emojiBoard: { - height: 250, + height: 200, }, emojiBoardRow: { flex: 1, - flexDirection: 'row', - marginBottom: 6, - justifyContent: 'space-between', }, lastBoardRow: { justifyContent: undefined, diff --git a/src/components/common/EmojiSelector/index.tsx b/src/components/common/EmojiSelector/index.tsx index 06033af7..68276a0e 100644 --- a/src/components/common/EmojiSelector/index.tsx +++ b/src/components/common/EmojiSelector/index.tsx @@ -17,7 +17,9 @@ function EmojiSelector({ onSelect }: Props) { return ( - {currentCategory.name} + + {currentCategory.name} + - String.fromCodePoint(...utf16.split('-').map(u => '0x' + u)); +export const charFromUtf16 = (utf16: any) => + String.fromCodePoint(...utf16.split('-').map((u: number) => '0x' + u)); -export const charFromEmojiObject = obj => charFromUtf16(obj.unified); +export const charFromEmojiObject = (obj: Emoji) => charFromUtf16(obj.unified); -export const filteredEmojis = emoji.filter(e => !e.obsoleted_by); +export const filteredEmojis: Emoji[] = emoji.filter( + (e: Emoji) => !e.obsoleted_by && e.added_in < '13.1' +); export const emojiByCategory = (category: Category) => filteredEmojis.filter(e => e.category === category.name); -export const sortEmoji = list => +export const sortEmoji = (list: Emoji[]) => list.sort((a, b) => a.sort_order - b.sort_order); -export const splitToRows = list => { +export const splitToRows = (list: Emoji[]) => { const result = []; while (list.length > 0) { result.push(list.splice(0, 8)); diff --git a/src/components/common/UserIcon/styles.ts b/src/components/common/UserIcon/styles.ts index e8ac6716..23a4418a 100644 --- a/src/components/common/UserIcon/styles.ts +++ b/src/components/common/UserIcon/styles.ts @@ -25,7 +25,7 @@ export default StyleSheet.create({ height: 34, }, textextralarge: { - fontSize: 40, + fontSize: 36, }, textlarge: { fontSize: 32, diff --git a/src/screens/tabs/Profile/index.tsx b/src/screens/tabs/Profile/index.tsx index 2e494d76..ba8f84ca 100644 --- a/src/screens/tabs/Profile/index.tsx +++ b/src/screens/tabs/Profile/index.tsx @@ -18,7 +18,7 @@ import { import Icon from '@/components/icons'; import { ERROR_TYPES } from '@/constants/general'; import { Colors } from '@/constants/theme'; -import { ScreenProps } from '@/interfaces/navigation'; +import { RootScreenProps } from '@/interfaces/navigation'; import { Transaction } from '@/interfaces/redux'; import { Container, Separator } from '@/layout'; import Routes from '@/navigation/Routes'; @@ -33,7 +33,7 @@ import Accounts from './modals/Accounts'; import ActivityDetail from './modals/ActivityDetail'; import styles from './styles'; -function Profile({ navigation }: ScreenProps) { +function Profile({ navigation }: RootScreenProps) { const accountsModalRef = useRef(null); const activityDetailModalRef = useRef(null); const transactionListRef = useRef(null); diff --git a/src/screens/tabs/Profile/modals/EditEmoji/index.js b/src/screens/tabs/Profile/modals/EditEmoji/index.tsx similarity index 70% rename from src/screens/tabs/Profile/modals/EditEmoji/index.js rename to src/screens/tabs/Profile/modals/EditEmoji/index.tsx index cd49a922..d8f8e8f6 100644 --- a/src/screens/tabs/Profile/modals/EditEmoji/index.js +++ b/src/screens/tabs/Profile/modals/EditEmoji/index.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { View } from 'react-native'; +import { Modalize } from 'react-native-modalize'; import EmojiSelector from '@/commonComponents/EmojiSelector'; import Header from '@/commonComponents/Header'; @@ -11,14 +12,20 @@ import Text from '@/components/common/Text'; import styles from './styles'; -const EditEmoji = ({ modalRef, onSave, emoji }) => { +interface Props { + modalRef: React.RefObject; + onSave: (emoji: string) => void; + emoji?: string; +} + +function EditEmoji({ modalRef, onSave, emoji }: Props) { const { t } = useTranslation(); const [selectedEmoji, setSelectedEmoji] = useState(''); const handleSave = () => { onSave(selectedEmoji); setSelectedEmoji(''); - modalRef?.current.close(); + modalRef.current?.close(); }; useEffect(() => { @@ -28,8 +35,14 @@ const EditEmoji = ({ modalRef, onSave, emoji }) => { }, [emoji]); return ( - -
{t('accounts.setEmoji')}} /> + {t('accounts.setEmoji')}} + /> + }> @@ -37,6 +50,6 @@ const EditEmoji = ({ modalRef, onSave, emoji }) => { ); -}; +} export default EditEmoji; diff --git a/src/screens/tabs/Profile/modals/EditEmoji/styles.js b/src/screens/tabs/Profile/modals/EditEmoji/styles.ts similarity index 92% rename from src/screens/tabs/Profile/modals/EditEmoji/styles.js rename to src/screens/tabs/Profile/modals/EditEmoji/styles.ts index 09bb5ac1..f5f4b0d7 100644 --- a/src/screens/tabs/Profile/modals/EditEmoji/styles.js +++ b/src/screens/tabs/Profile/modals/EditEmoji/styles.ts @@ -4,7 +4,6 @@ export default StyleSheet.create({ content: { flex: 1, paddingHorizontal: 20, - paddingTop: 20, paddingBottom: 35, justifyContent: 'space-between', }, From 7e0f2168a4e034be473aefc1a7418e84cc0a520a Mon Sep 17 00:00:00 2001 From: nachosan Date: Tue, 15 Nov 2022 10:07:17 -0300 Subject: [PATCH 5/7] removed console logs --- .../common/EmojiSelector/components/EmojiBoard/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/common/EmojiSelector/components/EmojiBoard/index.tsx b/src/components/common/EmojiSelector/components/EmojiBoard/index.tsx index 974d7773..b0cdb68d 100644 --- a/src/components/common/EmojiSelector/components/EmojiBoard/index.tsx +++ b/src/components/common/EmojiSelector/components/EmojiBoard/index.tsx @@ -36,8 +36,6 @@ function EmojiBoard({ onSelect, currentCategory }: Props) { style={[styles.emojiBoardRow, isLastRow && styles.lastBoardRow]} key={`${currentCategory}-${index}`}> {row.map((emojiObject, emojiIndex) => { - console.tron.log('emojiObject', emojiObject); - console.tron.log('emojiIndex', emojiIndex); return ( Date: Tue, 15 Nov 2022 16:48:15 -0300 Subject: [PATCH 6/7] removed version filter --- src/components/common/EmojiSelector/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/EmojiSelector/utils.ts b/src/components/common/EmojiSelector/utils.ts index 559610af..48b88c83 100644 --- a/src/components/common/EmojiSelector/utils.ts +++ b/src/components/common/EmojiSelector/utils.ts @@ -71,7 +71,7 @@ export const charFromUtf16 = (utf16: any) => export const charFromEmojiObject = (obj: Emoji) => charFromUtf16(obj.unified); export const filteredEmojis: Emoji[] = emoji.filter( - (e: Emoji) => !e.obsoleted_by && e.added_in < '13.1' + (e: Emoji) => !e.obsoleted_by ); export const emojiByCategory = (category: Category) => From b8f2f5f103fefb269e0a7bed0cae50328f9083e6 Mon Sep 17 00:00:00 2001 From: nachosan Date: Tue, 15 Nov 2022 16:54:32 -0300 Subject: [PATCH 7/7] Changed row number of icons --- src/components/common/EmojiSelector/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/EmojiSelector/utils.ts b/src/components/common/EmojiSelector/utils.ts index 48b88c83..798c825b 100644 --- a/src/components/common/EmojiSelector/utils.ts +++ b/src/components/common/EmojiSelector/utils.ts @@ -83,7 +83,7 @@ export const sortEmoji = (list: Emoji[]) => export const splitToRows = (list: Emoji[]) => { const result = []; while (list.length > 0) { - result.push(list.splice(0, 8)); + result.push(list.splice(0, 5)); } return result; };