-
Notifications
You must be signed in to change notification settings - Fork 318
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: horizontal section and label for Clear Signing #7529
Merged
Merged
Changes from all commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
2c7fdfe
feat: add label
RamyEB da22ad4
add clear signing horizontal list
RamyEB a333ff6
fix: prettier
RamyEB c99a8e8
fix: change translation location
RamyEB 7ff6cfa
fix: put styles related to branch
RamyEB eac580b
fix: add memo and move function label to component
RamyEB ac9b0ac
refacto horizontal list
RamyEB 15d24f4
feat: add test
RamyEB 55fc6de
feat: fix after rebase
RamyEB 422ee33
feat: fix after rebase
RamyEB 8744350
fix: review correction
RamyEB 8fcad2a
fix: review correction
RamyEB f130274
fix: lint correction
RamyEB 0e2da57
fix: review correction
RamyEB 4e294f8
fix: props wrongly passed to renderItem
RamyEB File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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,5 @@ | ||
--- | ||
"live-mobile": patch | ||
--- | ||
|
||
Add label clear signing |
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
42 changes: 42 additions & 0 deletions
42
...mobile/src/newArch/features/Web3Hub/components/ManifestsList/ManifestItem/Label/index.tsx
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 { Text } from "@ledgerhq/native-ui"; | ||
|
||
type ItemStyle = { | ||
badgeColor: string; | ||
borderColor: string; | ||
backgroundColor: string; | ||
}; | ||
|
||
type Props = { | ||
text: string; | ||
style: ItemStyle; | ||
}; | ||
|
||
const Label: React.FC<Props> = ({ text, style }) => { | ||
const { badgeColor, borderColor, backgroundColor } = style; | ||
return ( | ||
<Text | ||
role="banner" | ||
fontSize="9px" | ||
width="auto" | ||
paddingX={2} | ||
paddingY={1} | ||
borderWidth={1} | ||
borderRadius={3} | ||
borderStyle={"solid"} | ||
flexGrow={0} | ||
flexShrink={0} | ||
overflow={"hidden"} | ||
textTransform="uppercase" | ||
color={badgeColor} | ||
borderColor={borderColor} | ||
backgroundColor={backgroundColor} | ||
fontWeight="semiBold" | ||
marginLeft={3} | ||
> | ||
{text} | ||
</Text> | ||
); | ||
}; | ||
|
||
export default Label; |
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
29 changes: 29 additions & 0 deletions
29
...h/features/Web3Hub/screens/Web3HubMain/components/HorizontalList/MinimalAppCard/index.tsx
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,29 @@ | ||
import React, { useCallback, useMemo } from "react"; | ||
import { TouchableOpacity } from "react-native"; | ||
import { Flex, Text } from "@ledgerhq/native-ui"; | ||
import AppIcon from "LLM/features/Web3Hub/components/AppIcon"; | ||
import { AppManifest } from "@ledgerhq/live-common/wallet-api/types"; | ||
|
||
export default function MinimalAppCard({ | ||
item, | ||
onPress, | ||
}: { | ||
item: AppManifest; | ||
onPress: (manifest: AppManifest) => void; | ||
}) { | ||
const disabled = useMemo(() => item.branch === "soon", [item]); | ||
const handlePress = useCallback(() => { | ||
if (!disabled) { | ||
onPress(item); | ||
} | ||
}, [disabled, item, onPress]); | ||
|
||
return ( | ||
<TouchableOpacity disabled={disabled} onPress={handlePress}> | ||
<Flex rowGap={6} marginRight={3} width={70} alignItems={"center"}> | ||
<AppIcon isDisabled={disabled} size={48} name={item.name} icon={item.icon} /> | ||
<Text numberOfLines={1}>{item.name}</Text> | ||
</Flex> | ||
</TouchableOpacity> | ||
); | ||
} |
70 changes: 70 additions & 0 deletions
70
...bile/src/newArch/features/Web3Hub/screens/Web3HubMain/components/HorizontalList/index.tsx
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,70 @@ | ||
import React from "react"; | ||
import { StyleSheet } from "react-native"; | ||
import { FlashList } from "@shopify/flash-list"; | ||
import { Box, Flex, InfiniteLoader, Text } from "@ledgerhq/native-ui"; | ||
import { AppManifest } from "@ledgerhq/live-common/wallet-api/types"; | ||
import MinimalAppCard from "./MinimalAppCard"; | ||
|
||
type Props = { | ||
title: string; | ||
isLoading: boolean; | ||
data: AppManifest[]; | ||
onEndReached?: () => void; | ||
onPressItem: (manifest: AppManifest) => void; | ||
testID?: string; | ||
}; | ||
|
||
type PropRenderItem = { | ||
item: AppManifest; | ||
extraData?: (manifest: AppManifest) => void; | ||
}; | ||
|
||
const identityFn = (item: AppManifest) => item.id; | ||
|
||
const renderItem = ({ item, extraData: onPressItem = () => {} }: PropRenderItem) => ( | ||
<MinimalAppCard item={item} onPress={onPressItem} /> | ||
); | ||
|
||
export default function HorizontalList({ | ||
title, | ||
isLoading, | ||
data, | ||
onEndReached, | ||
onPressItem, | ||
testID, | ||
}: Props) { | ||
return ( | ||
<> | ||
<Text mt={2} mb={5} numberOfLines={1} variant="h5" mx={5} accessibilityRole="header"> | ||
{title} | ||
</Text> | ||
<Box mb={2}> | ||
<FlashList | ||
testID={testID} | ||
horizontal | ||
contentContainerStyle={styles.container} | ||
keyExtractor={identityFn} | ||
renderItem={renderItem} | ||
ListFooterComponent={ | ||
isLoading ? ( | ||
<Flex marginRight={4} justifyContent={"center"} paddingTop={3}> | ||
<InfiniteLoader size={30} /> | ||
</Flex> | ||
) : null | ||
} | ||
estimatedItemSize={70} | ||
data={data} | ||
showsHorizontalScrollIndicator={false} | ||
extraData={onPressItem} | ||
onEndReached={onEndReached} | ||
/> | ||
</Box> | ||
</> | ||
); | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
container: { | ||
paddingHorizontal: 5, | ||
}, | ||
}); |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure we'll go with columnGap while we use margins for everything else, and we'll probably remove or update the other because I don't think an experimental badge followed by a clear-signing one would probably take a lot of space on the line
Also columnGap below wouldn't add some margin left before the first badge so you instead have to add a columnGap above while it would not be needed with simpler margins
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If the fact that margins are used for everything else is the main argument, then okay
Otherwise, I think gap is a better practice since we're using flex, and it's cleaner for managing spacing in this context. As we deal with flexbox and want to add spacing between items, it's better to avoid affecting the first or last element