-
Notifications
You must be signed in to change notification settings - Fork 635
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update OP Round 2 Rewards Sheet (#5110)
* progress on rewards sheet * restructuring of components * graphql schema fix * fix: layout of stats cards and secondary colors * fix: revert stats to pass actions and cleanup props and unused fns * chore: revert feature flag for optimize locally * fix a few android bugs * fix stats section * revert pbxproj file * ref: code review changes * chore: add EOL to pbxproj file * account for light/dark mode shadows and added android shadows * fix: android shadows not appearing * fix: add info sheets back * revert pxb file * fix: pass percent through to explain sheet * revert ios pbx file * fix titles --------- Co-authored-by: Ben Goldberg <[email protected]>
- Loading branch information
Showing
13 changed files
with
482 additions
and
192 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import React from 'react'; | ||
| import { Box, Text, useForegroundColor } from '@/design-system'; | ||
|
|
||
| type InfoAlertProps = { | ||
| title: string; | ||
| description: string; | ||
| rightIcon: React.ReactNode; | ||
| }; | ||
|
|
||
| export const InfoAlert: React.FC<InfoAlertProps> = ({ | ||
| rightIcon, | ||
| title, | ||
| description, | ||
| }) => { | ||
| return ( | ||
| <Box | ||
| style={{ | ||
| gap: 12, | ||
| borderWidth: 2, | ||
| borderColor: useForegroundColor('separatorTertiary'), | ||
| }} | ||
| flexDirection="row" | ||
| borderRadius={20} | ||
| alignItems="center" | ||
| justifyContent="flex-start" | ||
| paddingHorizontal="20px" | ||
| paddingVertical="16px" | ||
| > | ||
| <Box width={{ custom: 20 }} height={{ custom: 20 }} alignItems="center"> | ||
| {rightIcon} | ||
| </Box> | ||
| <Box style={{ gap: 10 }} flexDirection="column"> | ||
| <Text color="label" size="15pt" weight="heavy"> | ||
| {title} | ||
| </Text> | ||
| <Text color="labelTertiary" size="13pt" weight="medium"> | ||
| {description} | ||
| </Text> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,229 @@ | ||
| import { BottomSheetScrollView } from '@gorhom/bottom-sheet'; | ||
| import { BottomSheetContext } from '@gorhom/bottom-sheet/src/contexts/external'; | ||
| import React, { | ||
| forwardRef, | ||
| Fragment, | ||
| useContext, | ||
| useEffect, | ||
| useImperativeHandle, | ||
| useMemo, | ||
| useRef, | ||
| } from 'react'; | ||
| import { Pressable, StyleSheet, TouchableWithoutFeedback } from 'react-native'; | ||
| import Animated, { | ||
| useAnimatedScrollHandler, | ||
| useSharedValue, | ||
| } from 'react-native-reanimated'; | ||
| import { useSafeAreaInsets } from 'react-native-safe-area-context'; | ||
| import { useTheme } from '../../theme/ThemeContext'; | ||
| import { Centered } from '../layout'; | ||
| import SheetHandleFixedToTop, { | ||
| SheetHandleFixedToTopHeight, | ||
| } from './SheetHandleFixedToTop'; | ||
| import { useDimensions } from '@/hooks'; | ||
| import { useNavigation } from '@/navigation'; | ||
| import styled from '@/styled-thing'; | ||
| import { position } from '@/styles'; | ||
| import { IS_ANDROID, IS_IOS } from '@/env'; | ||
| import TouchableBackdrop from '../TouchableBackdrop'; | ||
|
|
||
| const AndroidBackground = styled.View({ | ||
| ...position.coverAsObject, | ||
| backgroundColor: ({ backgroundColor }) => backgroundColor, | ||
| }); | ||
|
|
||
| const Container = styled(Centered).attrs({ direction: 'column' })( | ||
| ({ | ||
| backgroundColor, | ||
| borderRadius, | ||
| contentHeight, | ||
| sheetHeight, | ||
| sheetHeightRatio, // Default to 2/3 of the screen | ||
| }) => ({ | ||
| borderTopLeftRadius: borderRadius, | ||
| borderTopRightRadius: borderRadius, | ||
| borderBottomRightRadius: 0, | ||
| borderBottomLeftRadius: 0, | ||
| backgroundColor: backgroundColor, | ||
| bottom: 0, | ||
| left: 0, | ||
| overflow: 'hidden', | ||
| position: 'absolute', | ||
| right: 0, | ||
| height: sheetHeight ? sheetHeight : contentHeight * sheetHeightRatio, // Set height to a ratio of the device height | ||
| }) | ||
| ); | ||
|
|
||
| const Content = styled.ScrollView.attrs(({ limitScrollViewContent }) => ({ | ||
| contentContainerStyle: limitScrollViewContent ? { height: '100%' } : {}, | ||
| directionalLockEnabled: true, | ||
| keyboardShouldPersistTaps: 'always', | ||
| scrollEventThrottle: 16, | ||
| }))( | ||
| ({ | ||
| contentHeight, | ||
| deviceHeight, | ||
| backgroundColor, | ||
| removeTopPadding, | ||
| sheetHeightRatio = 0.67, | ||
| }) => ({ | ||
| // Default to 2/3 of the screen | ||
| backgroundColor: backgroundColor, | ||
| ...(contentHeight | ||
| ? { height: deviceHeight * sheetHeightRatio + contentHeight } | ||
| : {}), // Set height to a ratio of the device height | ||
| paddingTop: removeTopPadding ? 0 : SheetHandleFixedToTopHeight, | ||
| width: '100%', | ||
| }) | ||
| ); | ||
|
|
||
| const ContentWrapper = styled.View({ | ||
| ...position.sizeAsObject('100%'), | ||
| backgroundColor: ({ backgroundColor }) => backgroundColor, | ||
| }); | ||
|
|
||
| export default forwardRef(function SlackSheet( | ||
| { | ||
| additionalTopPadding = false, | ||
| removeTopPadding = false, | ||
| backgroundColor, | ||
| borderRadius = 30, | ||
| children, | ||
| contentHeight, | ||
| deferredHeight = false, | ||
| discoverSheet, | ||
| hideHandle = false, | ||
| limitScrollViewContent, | ||
| onContentSizeChange, | ||
| renderHeader, | ||
| scrollEnabled = true, | ||
| showsHorizontalScrollIndicator = true, | ||
| showsVerticalScrollIndicator = true, | ||
| showBlur, | ||
| testID, | ||
| removeClippedSubviews = false, | ||
| yPosition: givenYPosition, | ||
| onDismiss, | ||
| sheetHeight, | ||
| sheetHeightRatio = 1, // Default to full height of screen | ||
| ...props | ||
| }, | ||
| ref | ||
| ) { | ||
| // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| const yPosition = givenYPosition || useSharedValue(0); | ||
| const { height: deviceHeight } = useDimensions(); | ||
| const { goBack } = useNavigation(); | ||
| const insets = useSafeAreaInsets(); | ||
| const bottomInset = useMemo( | ||
| () => (insets.bottom || scrollEnabled ? 42 : 30), | ||
| [insets.bottom, scrollEnabled] | ||
| ); | ||
| const { colors } = useTheme(); | ||
| const contentContainerStyle = useMemo( | ||
| () => ({ | ||
| paddingBottom: bottomInset, | ||
| }), | ||
| [bottomInset] | ||
| ); | ||
|
|
||
| const sheet = useRef(); | ||
| const isInsideBottomSheet = !!useContext(BottomSheetContext); | ||
|
|
||
| useImperativeHandle(ref, () => sheet.current); | ||
|
|
||
| const scrollIndicatorInsets = useMemo( | ||
| () => ({ | ||
| bottom: bottomInset, | ||
| top: borderRadius + SheetHandleFixedToTopHeight, | ||
| }), | ||
| [borderRadius, bottomInset] | ||
| ); | ||
|
|
||
| // In discover sheet we need to set it additionally | ||
| useEffect( | ||
| () => { | ||
| discoverSheet && | ||
| ios && | ||
| sheet.current.setNativeProps({ scrollIndicatorInsets }); | ||
| }, | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| [] | ||
| ); | ||
|
|
||
| const scrollHandler = useAnimatedScrollHandler(event => { | ||
| yPosition.value = event.contentOffset.y; | ||
| }); | ||
|
|
||
| const bg = backgroundColor || colors.white; | ||
|
|
||
| // callback upon closing the sheet | ||
| useEffect( | ||
| () => () => { | ||
| if (onDismiss) onDismiss(); | ||
| }, | ||
| [] | ||
| ); | ||
|
|
||
| return ( | ||
| <Fragment> | ||
| {IS_ANDROID ? ( | ||
| <Pressable onPress={goBack} style={[StyleSheet.absoluteFillObject]} /> | ||
| ) : null} | ||
| <TouchableBackdrop onPress={goBack} /> | ||
|
|
||
| <Container | ||
| additionalTopPadding={additionalTopPadding} | ||
| backgroundColor={bg} | ||
| contentHeight={contentHeight} | ||
| borderRadius={borderRadius} | ||
| deferredHeight={deferredHeight} | ||
| deviceHeight={deviceHeight} | ||
| sheetHeightRatio={sheetHeightRatio} | ||
| sheetHeight={sheetHeight} | ||
| testID={testID} | ||
| {...props} | ||
| > | ||
| {IS_ANDROID && ( | ||
| <AndroidBackground as={TouchableWithoutFeedback} backgroundColor={bg}> | ||
| <AndroidBackground backgroundColor={bg} /> | ||
| </AndroidBackground> | ||
| )} | ||
| {!hideHandle && ( | ||
| <SheetHandleFixedToTop showBlur={showBlur || scrollEnabled} /> | ||
| )} | ||
| <ContentWrapper backgroundColor={bg}> | ||
| {renderHeader?.(yPosition)} | ||
| <Content | ||
| as={ | ||
| isInsideBottomSheet ? BottomSheetScrollView : Animated.ScrollView | ||
| } | ||
| backgroundColor={bg} | ||
| contentContainerStyle={scrollEnabled && contentContainerStyle} | ||
| contentHeight={contentHeight} | ||
| deviceHeight={deviceHeight} | ||
| sheetHeightRatio={sheetHeightRatio} | ||
| limitScrollViewContent={limitScrollViewContent} | ||
| onContentSizeChange={onContentSizeChange} | ||
| ref={sheet} | ||
| removeClippedSubviews={removeClippedSubviews} | ||
| removeTopPadding={removeTopPadding} | ||
| scrollEnabled={scrollEnabled} | ||
| scrollIndicatorInsets={scrollIndicatorInsets} | ||
| showsHorizontalScrollIndicator={showsHorizontalScrollIndicator} | ||
| showsVerticalScrollIndicator={showsVerticalScrollIndicator} | ||
| {...(isInsideBottomSheet && IS_ANDROID | ||
| ? { | ||
| onScrollWorklet: scrollHandler, | ||
| } | ||
| : { | ||
| onScroll: scrollHandler, | ||
| })} | ||
| > | ||
| {children} | ||
| </Content> | ||
| </ContentWrapper> | ||
| </Container> | ||
| </Fragment> | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.