diff options
Diffstat (limited to 'src/view/com/lists')
| -rw-r--r-- | src/view/com/lists/ListActions.tsx | 83 | ||||
| -rw-r--r-- | src/view/com/lists/ListCard.tsx | 5 | ||||
| -rw-r--r-- | src/view/com/lists/ListItems.tsx | 78 | ||||
| -rw-r--r-- | src/view/com/lists/ListsList.tsx | 13 |
4 files changed, 126 insertions, 53 deletions
diff --git a/src/view/com/lists/ListActions.tsx b/src/view/com/lists/ListActions.tsx new file mode 100644 index 000000000..4e6f7e6b9 --- /dev/null +++ b/src/view/com/lists/ListActions.tsx @@ -0,0 +1,83 @@ +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {Button} from '../util/forms/Button' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {usePalette} from 'lib/hooks/usePalette' + +export const ListActions = ({ + muted, + onToggleSubscribed, + onPressEditList, + isOwner, + onPressDeleteList, + onPressShareList, + reversed = false, // Default value of reversed is false +}: { + isOwner: boolean + muted?: boolean + onToggleSubscribed?: () => void + onPressEditList?: () => void + onPressDeleteList?: () => void + onPressShareList?: () => void + reversed?: boolean // New optional prop +}) => { + const pal = usePalette('default') + + let buttons = [ + <Button + key="subscribeButton" + type={muted ? 'inverted' : 'primary'} + label={muted ? 'Unsubscribe' : 'Subscribe & Mute'} + accessibilityLabel={muted ? 'Unsubscribe' : 'Subscribe and mute'} + accessibilityHint="" + onPress={onToggleSubscribed} + />, + isOwner && ( + <Button + key="editListButton" + type="default" + label="Edit List" + accessibilityLabel="Edit list" + accessibilityHint="" + onPress={onPressEditList} + /> + ), + isOwner && ( + <Button + key="deleteListButton" + type="default" + testID="deleteListBtn" + accessibilityLabel="Delete list" + accessibilityHint="" + onPress={onPressDeleteList}> + <FontAwesomeIcon icon={['far', 'trash-can']} style={[pal.text]} /> + </Button> + ), + <Button + key="shareListButton" + type="default" + testID="shareListBtn" + accessibilityLabel="Share list" + accessibilityHint="" + onPress={onPressShareList}> + <FontAwesomeIcon icon={'share'} style={[pal.text]} /> + </Button>, + ] + + // If reversed is true, reverse the array to reverse the order of the buttons + if (reversed) { + buttons = buttons.filter(Boolean).reverse() // filterting out any falsey values and reversing the array + } else { + buttons = buttons.filter(Boolean) // filterting out any falsey values + } + + return <View style={styles.headerBtns}>{buttons}</View> +} + +const styles = StyleSheet.create({ + headerBtns: { + flexDirection: 'row', + gap: 8, + marginTop: 12, + }, +}) diff --git a/src/view/com/lists/ListCard.tsx b/src/view/com/lists/ListCard.tsx index 0e13ca333..2293dbeca 100644 --- a/src/view/com/lists/ListCard.tsx +++ b/src/view/com/lists/ListCard.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {StyleSheet, View} from 'react-native' +import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import {AtUri, AppBskyGraphDefs, RichText} from '@atproto/api' import {Link} from '../util/Link' import {Text} from '../util/text/Text' @@ -16,12 +16,14 @@ export const ListCard = ({ noBg, noBorder, renderButton, + style, }: { testID?: string list: AppBskyGraphDefs.ListView noBg?: boolean noBorder?: boolean renderButton?: () => JSX.Element + style?: StyleProp<ViewStyle> }) => { const pal = usePalette('default') const store = useStores() @@ -53,6 +55,7 @@ export const ListCard = ({ pal.border, noBorder && styles.outerNoBorder, !noBg && pal.view, + style, ]} href={`/profile/${list.creator.did}/lists/${rkey}`} title={list.name} diff --git a/src/view/com/lists/ListItems.tsx b/src/view/com/lists/ListItems.tsx index 42965981b..47fa4a943 100644 --- a/src/view/com/lists/ListItems.tsx +++ b/src/view/com/lists/ListItems.tsx @@ -6,10 +6,10 @@ import { StyleSheet, View, ViewStyle, + FlatList, } from 'react-native' import {AppBskyActorDefs, AppBskyGraphDefs, RichText} from '@atproto/api' import {observer} from 'mobx-react-lite' -import {FlatList} from '../util/Views' import {ProfileCardFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' import {ErrorMessage} from '../util/error/ErrorMessage' import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' @@ -25,6 +25,7 @@ import {usePalette} from 'lib/hooks/usePalette' import {useStores} from 'state/index' import {s} from 'lib/styles' import {isDesktopWeb} from 'platform/detection' +import {ListActions} from './ListActions' const LOADING_ITEM = {_reactKey: '__loading__'} const HEADER_ITEM = {_reactKey: '__header__'} @@ -41,6 +42,7 @@ export const ListItems = observer( onToggleSubscribed, onPressEditList, onPressDeleteList, + onPressShareList, renderEmptyState, testID, headerOffset = 0, @@ -49,9 +51,10 @@ export const ListItems = observer( style?: StyleProp<ViewStyle> scrollElRef?: MutableRefObject<FlatList<any> | null> onPressTryAgain?: () => void - onToggleSubscribed?: () => void - onPressEditList?: () => void - onPressDeleteList?: () => void + onToggleSubscribed: () => void + onPressEditList: () => void + onPressDeleteList: () => void + onPressShareList: () => void renderEmptyState?: () => JSX.Element testID?: string headerOffset?: number @@ -163,6 +166,7 @@ export const ListItems = observer( onToggleSubscribed={onToggleSubscribed} onPressEditList={onPressEditList} onPressDeleteList={onPressDeleteList} + onPressShareList={onPressShareList} /> ) : null } else if (item === ERROR_ITEM) { @@ -193,14 +197,17 @@ export const ListItems = observer( ) }, [ - list, - onPressTryAgain, - onPressRetryLoadMore, renderMemberButton, + renderEmptyState, + list.list, + list.isOwner, + list.error, + onToggleSubscribed, onPressEditList, onPressDeleteList, - onToggleSubscribed, - renderEmptyState, + onPressShareList, + onPressTryAgain, + onPressRetryLoadMore, ], ) @@ -257,12 +264,14 @@ const ListHeader = observer( onToggleSubscribed, onPressEditList, onPressDeleteList, + onPressShareList, }: { list: AppBskyGraphDefs.ListView isOwner: boolean - onToggleSubscribed?: () => void - onPressEditList?: () => void - onPressDeleteList?: () => void + onToggleSubscribed: () => void + onPressEditList: () => void + onPressDeleteList: () => void + onPressShareList: () => void }) => { const pal = usePalette('default') const store = useStores() @@ -301,43 +310,14 @@ const ListHeader = observer( /> )} {isDesktopWeb && ( - <View style={styles.headerBtns}> - {list.viewer?.muted ? ( - <Button - type="inverted" - label="Unsubscribe" - accessibilityLabel="Unsubscribe" - accessibilityHint="" - onPress={onToggleSubscribed} - /> - ) : ( - <Button - type="primary" - label="Subscribe & Mute" - accessibilityLabel="Subscribe and mute" - accessibilityHint="" - onPress={onToggleSubscribed} - /> - )} - {isOwner && ( - <Button - type="default" - label="Edit List" - accessibilityLabel="Edit list" - accessibilityHint="" - onPress={onPressEditList} - /> - )} - {isOwner && ( - <Button - type="default" - label="Delete List" - accessibilityLabel="Delete list" - accessibilityHint="" - onPress={onPressDeleteList} - /> - )} - </View> + <ListActions + isOwner={isOwner} + muted={list.viewer?.muted} + onPressDeleteList={onPressDeleteList} + onPressEditList={onPressEditList} + onToggleSubscribed={onToggleSubscribed} + onPressShareList={onPressShareList} + /> )} </View> <View> diff --git a/src/view/com/lists/ListsList.tsx b/src/view/com/lists/ListsList.tsx index 09e3a501c..2b6f74c2b 100644 --- a/src/view/com/lists/ListsList.tsx +++ b/src/view/com/lists/ListsList.tsx @@ -6,6 +6,7 @@ import { StyleSheet, View, ViewStyle, + FlatList, } from 'react-native' import {observer} from 'mobx-react-lite' import { @@ -13,7 +14,6 @@ import { FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' import {AppBskyGraphDefs as GraphDefs} from '@atproto/api' -import {FlatList} from '../util/Views' import {ListCard} from './ListCard' import {ProfileCardFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' import {ErrorMessage} from '../util/error/ErrorMessage' @@ -149,7 +149,11 @@ export const ListsList = observer( return renderItem ? ( renderItem(item) ) : ( - <ListCard list={item} testID={`list-${item.name}`} /> + <ListCard + list={item} + testID={`list-${item.name}`} + style={styles.item} + /> ) }, [ @@ -193,7 +197,7 @@ export const ListsList = observer( progressViewOffset={headerOffset} /> } - contentContainerStyle={s.contentContainer} + contentContainerStyle={[s.contentContainer]} style={{paddingTop: headerOffset}} onEndReached={onEndReached} onEndReachedThreshold={0.6} @@ -237,4 +241,7 @@ const styles = StyleSheet.create({ gap: 8, }, feedFooter: {paddingTop: 20}, + item: { + paddingHorizontal: 18, + }, }) |