From 0d5f86b0ab6c8195eae1344907f153387b1fa60d Mon Sep 17 00:00:00 2001 From: Pablo Velez Vidal Date: Wed, 16 Nov 2022 18:07:05 +0100 Subject: [PATCH] pr feedback, reorganize styles, move types to correct folder, remove unnecesary values --- app/screens/onboarding/footer_buttons.tsx | 31 ++++++++++++----- app/screens/onboarding/illustrations/chat.tsx | 8 ----- app/screens/onboarding/index.tsx | 31 ++++++++--------- app/screens/onboarding/paginator.tsx | 33 ++++++++----------- app/screens/onboarding/slide.tsx | 17 +++++----- app/screens/onboarding/slides_data.tsx | 15 ++------- tsconfig.json | 2 +- types/screens/onboarding.ts | 7 ++++ 8 files changed, 70 insertions(+), 74 deletions(-) create mode 100644 types/screens/onboarding.ts diff --git a/app/screens/onboarding/footer_buttons.tsx b/app/screens/onboarding/footer_buttons.tsx index a587bba2a4..2b381be04a 100644 --- a/app/screens/onboarding/footer_buttons.tsx +++ b/app/screens/onboarding/footer_buttons.tsx @@ -5,8 +5,8 @@ import React from 'react'; import {Pressable, useWindowDimensions, View} from 'react-native'; import Animated, {Extrapolate, interpolate, useAnimatedStyle} from 'react-native-reanimated'; -import CompassIcon from '@app/components/compass_icon'; -import FormattedText from '@app/components/formatted_text'; +import CompassIcon from '@components/compass_icon'; +import FormattedText from '@components/formatted_text'; import {buttonBackgroundStyle, buttonTextStyle} from '@utils/buttonStyles'; import {makeStyleSheetFromTheme} from '@utils/theme'; @@ -28,9 +28,25 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ marginLeft: 5, marginTop: 2, }, + nextButtonText: { + flexDirection: 'row', + position: 'absolute', + }, + signInButtonText: { + flexDirection: 'row', + }, + footerButtonsContainer: { + flexDirection: 'column', + height: 150, + marginTop: 15, + width: '100%', + marginHorizontal: 10, + alignItems: 'center', + }, })); const AnimatedButton = Animated.createAnimatedComponent(Pressable); +const BUTTON_SIZE = 80; const FooterButtons = ({ theme, @@ -41,7 +57,6 @@ const FooterButtons = ({ }: Props) => { const {width} = useWindowDimensions(); const styles = getStyleSheet(theme); - const BUTTON_SIZE = 80; // keep in mind penultimate and ultimate slides to run buttons text/opacity/size animations const penultimateSlide = lastSlideIndex - 1; @@ -96,7 +111,7 @@ const FooterButtons = ({ }); const nextButtonText = ( - + + + nextSlideHandler()} + onPress={nextSlideHandler} style={[styles.button, buttonBackgroundStyle(theme, 'm', 'primary', 'default'), resizeStyle]} > {nextButtonText} @@ -131,7 +146,7 @@ const FooterButtons = ({ signInHandler()} + onPress={signInHandler} style={[styles.button, buttonBackgroundStyle(theme, 'm', 'link', 'default'), opacitySignInButton]} > { id='image0_1023_92018' width={133} height={302} - - // @ts-expect-error string source xlinkHref='data:image/png;base64,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' /> diff --git a/app/screens/onboarding/index.tsx b/app/screens/onboarding/index.tsx index d89e445349..44e011da97 100644 --- a/app/screens/onboarding/index.tsx +++ b/app/screens/onboarding/index.tsx @@ -2,19 +2,19 @@ // See LICENSE.txt for license information. import React, {useCallback, useEffect, useRef} from 'react'; -import {View, ListRenderItemInfo, useWindowDimensions, SafeAreaView, ScrollView, Animated as AnimatedRN} from 'react-native'; +import {View, ListRenderItemInfo, useWindowDimensions, SafeAreaView, ScrollView, Animated as AnimatedRN, StyleSheet} from 'react-native'; import Animated, {Easing, useAnimatedRef, useAnimatedScrollHandler, useDerivedValue, useSharedValue} from 'react-native-reanimated'; import {storeOnboardingViewedValue} from '@actions/app/global'; import {Screens} from '@app/constants'; import Background from '@screens/background'; import {goToScreen, loginAnimationOptions} from '@screens/navigation'; -import {makeStyleSheetFromTheme} from '@utils/theme'; +import {OnboardingItem} from '@typings/screens/onboarding'; import FooterButtons from './footer_buttons'; import Paginator from './paginator'; import SlideItem from './slide'; -import useSlidesData, {OnboardingItem} from './slides_data'; +import useSlidesData from './slides_data'; import type {LaunchProps} from '@typings/launch'; @@ -22,9 +22,7 @@ interface OnboardingProps extends LaunchProps { theme: Theme; } -const AnimatedSafeArea = Animated.createAnimatedComponent(SafeAreaView); - -const getStyleSheet = makeStyleSheetFromTheme(() => ({ +const styles = StyleSheet.create({ onBoardingContainer: { flex: 1, alignItems: 'center', @@ -34,17 +32,15 @@ const getStyleSheet = makeStyleSheetFromTheme(() => ({ scrollContainer: { flex: 1, alignItems: 'center', - height: '100%', justifyContent: 'center', }, -})); +}); const Onboarding = ({ theme, }: OnboardingProps) => { const {width} = useWindowDimensions(); - const styles = getStyleSheet(theme); - const slidesData = useSlidesData().slidesData; + const {slidesData} = useSlidesData(); const lastSlideIndex = slidesData.length - 1; const slidesRef = useAnimatedRef(); @@ -63,14 +59,14 @@ const Onboarding = ({ return () => scrollAnimation.current.removeAllListeners(); }, []); - const moveToSlide = (slideIndexToMove: number) => { + const moveToSlide = useCallback((slideIndexToMove: number) => { AnimatedRN.timing(scrollAnimation.current, { toValue: (slideIndexToMove * width), duration: Math.abs(currentIndex.value - slideIndexToMove) * 200, useNativeDriver: true, easing: Easing.linear, }).start(); - }; + }, [currentIndex.value]); const nextSlide = useCallback(() => { const nextSlideIndex = currentIndex.value + 1; @@ -95,7 +91,7 @@ const Onboarding = ({ theme={theme} scrollX={scrollX} index={index} - key={item.id} + key={`key-${index.toString()}`} /> ); }, []); @@ -112,12 +108,11 @@ const Onboarding = ({ testID='onboarding.screen' > - - + ); }; diff --git a/app/screens/onboarding/paginator.tsx b/app/screens/onboarding/paginator.tsx index b1798af187..ca1aa82979 100644 --- a/app/screens/onboarding/paginator.tsx +++ b/app/screens/onboarding/paginator.tsx @@ -7,10 +7,8 @@ import Animated, {interpolate, useAnimatedStyle} from 'react-native-reanimated'; import {makeStyleSheetFromTheme} from '@utils/theme'; -import {OnboardingItem} from './slides_data'; - type Props = { - data: OnboardingItem[]; + dataLength: number; theme: Theme; scrollX: Animated.SharedValue; moveToSlide: (slideIndexToMove: number) => void; @@ -46,20 +44,25 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ width: DOT_SIZE, opacity: 0.15, }, + paginatorContainer: { + flexDirection: 'row', + height: 15, + }, })); const Paginator = ({ theme, - data, + dataLength, scrollX, moveToSlide, }: Props) => { + const styles = getStyleSheet(theme); return ( - - {data.map((item: OnboardingItem, index: number) => { + + {[...Array(dataLength)].map((item: number, index: number) => { return ( { }); return ( - moveToSlide(index)} - > - - - + moveToSlide(index)}> + + + ); }; diff --git a/app/screens/onboarding/slide.tsx b/app/screens/onboarding/slide.tsx index 2811fe5ac7..4bc19ea2cd 100644 --- a/app/screens/onboarding/slide.tsx +++ b/app/screens/onboarding/slide.tsx @@ -5,11 +5,10 @@ import React, {useEffect, useState} from 'react'; import {View, useWindowDimensions} from 'react-native'; import Animated, {Extrapolate, interpolate, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; +import {OnboardingItem} from '@typings/screens/onboarding'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; import {typography} from '@utils/typography'; -import {OnboardingItem} from './slides_data'; - type Props = { item: OnboardingItem; theme: Theme; @@ -24,6 +23,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ height: 100, color: theme.centerChannelColor, textAlign: 'center', + fontFamily: 'Metropolis-SemiBold', + paddingHorizontal: 20, }, fontTitle: { fontSize: 40, @@ -36,10 +37,9 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ opacity: 0, }, description: { - fontWeight: '400', - fontSize: 16, textAlign: 'center', paddingHorizontal: 20, + fontFamily: 'Open Sans', height: 80, color: changeOpacity(theme.centerChannelColor, 0.64), ...typography('Body', 200, 'Regular'), @@ -57,15 +57,16 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ }, })); +const FIRST_SLIDE = 0; +const FIRST_LOAD_ELEMENTS_POSITION = 400; + const SlideItem = ({theme, item, scrollX, index}: Props) => { const {width} = useWindowDimensions(); const styles = getStyleSheet(theme); - const FIRST_SLIDE = 0; /** * Code used to animate the first image load */ - const FIRST_LOAD_ELEMENTS_POSITION = 400; const [firstLoad, setFirstLoad] = useState(true); const initialImagePosition = useSharedValue(FIRST_LOAD_ELEMENTS_POSITION); @@ -182,7 +183,7 @@ const SlideItem = ({theme, item, scrollX, index}: Props) => { > {item.image} - + { ); }; -export default SlideItem; +export default React.memo(SlideItem); diff --git a/app/screens/onboarding/slides_data.tsx b/app/screens/onboarding/slides_data.tsx index a0f75c3e18..467fa2887e 100644 --- a/app/screens/onboarding/slides_data.tsx +++ b/app/screens/onboarding/slides_data.tsx @@ -5,18 +5,13 @@ import React from 'react'; import {useIntl} from 'react-intl'; import {StyleSheet} from 'react-native'; +import {OnboardingItem} from '@typings/screens/onboarding'; + import CallsSvg from './illustrations/calls'; import ChatSvg from './illustrations/chat'; import IntegrationsSvg from './illustrations/integrations'; import TeamCommunicationSvg from './illustrations/team_communication'; -export type OnboardingItem = { - id: string; - title: string; - description: string; - image: React.ReactElement; -} - const styles = StyleSheet.create({ image: { justifyContent: 'center', @@ -35,25 +30,21 @@ const useSalidesData = () => { const slidesData: OnboardingItem[] = [ { - id: '1', - title: intl.formatMessage({id: 'onboarding_screen.welcome', defaultMessage: 'Welcome'}), + title: intl.formatMessage({id: 'onboarding.welcome', defaultMessage: 'Welcome'}), description: intl.formatMessage({id: 'onboaring.welcome_description', defaultMessage: 'Mattermost is an open source platform for developer collaboration. Secure, flexible, and integrated with your tools.'}), image: chatSvg, }, { - id: '2', title: intl.formatMessage({id: 'onboarding.realtime_collaboration', defaultMessage: 'Collaborate in real-time'}), description: intl.formatMessage({id: 'onboarding.realtime_collaboration_description', defaultMessage: 'Persistent channels, direct messaging, and file sharing works seamlessly so you can stay connected, wherever you are.'}), image: teamCommunicationSvg, }, { - id: '3', title: intl.formatMessage({id: 'onboarding.calls', defaultMessage: 'Start secure audio calls instantly'}), description: intl.formatMessage({id: 'onboarding.calls_description', defaultMessage: 'When typing isn’t fast enough, switch from channel-based chat to secure audio calls with a single tap.'}), image: callsSvg, }, { - id: '4', title: intl.formatMessage({id: 'onboarding.integrations', defaultMessage: 'Integrate with tools you love'}), description: intl.formatMessage({id: 'onboarding.integrations_description', defaultMessage: 'Go beyond chat with tightly-integratedproduct solutions matched to common development processes.'}), image: integrationsSvg, diff --git a/tsconfig.json b/tsconfig.json index 6b405d1cfa..0dec6dd843 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -63,7 +63,7 @@ "*": ["./*", "node_modules/*"], } }, - "include": ["app/**/*", "share_extensionn/**/*", "test/**/*", "types/**/*"], + "include": ["app/**/*", "share_extension/**/*", "test/**/*", "types/**/*"], "exclude": [ "node_modules", "build", diff --git a/types/screens/onboarding.ts b/types/screens/onboarding.ts new file mode 100644 index 0000000000..a1809e20c3 --- /dev/null +++ b/types/screens/onboarding.ts @@ -0,0 +1,7 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +export type OnboardingItem = { + title: string; + description: string; + image: React.ReactElement; +};