Skip to content

Commit

Permalink
Improve/swap map with flatlist (#1595)
Browse files Browse the repository at this point in the history 
* added FlatLists to Profile section task cards

* added flatLists to team screen task cards

* added margin bottom to the end of the lists, also prevented bouncing when scrolling

* added flatList to Teams Dropdown

* added flatLists to profile screen filter tasks by status, label, priority and size

* added FlatLists to status, label, priority, size screens

* added flatList to unassigned tasks in Teams Screen task card

* added flatList to timer screen combobox

* added flatlists to tenant rendering when user logins
  • Loading branch information
@desperado1802
desperado1802 authored Oct 20, 2023
1 parent 37da1e7 commit d861b58
Show file tree
Hide file tree
Showing 17 changed files with 563 additions and 441 deletions.
26 changes: 17 additions & 9 deletions apps/mobile/app/components/TeamDropdown/DropDownSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { Avatar } from "react-native-paper"
import { observer } from "mobx-react-lite"
import { limitTextCharaters } from "../../helpers/sub-text"
import { useNavigation } from "@react-navigation/native"
import { FlatList } from "react-native-gesture-handler"

export interface Props {
teams: IOrganizationTeamList[]
Expand Down Expand Up @@ -73,15 +74,22 @@ const DropDownSection: FC<Props> = observer(function DropDownSection({
{activeTeamId && (
<DropItem resized={resized} team={activeTeam} changeTeam={changeTeam} isActiveTeam={true} />
)}
{others.map((item, index) => (
<DropItem
key={index}
team={item}
resized={resized}
changeTeam={changeTeam}
isActiveTeam={false}
/>
))}

<FlatList
data={others}
scrollEnabled={false}
renderItem={({ item, index }) => (
<View style={{ width: "100%", justifyContent: "center", alignItems: "center" }}>
<DropItem
key={index}
team={item}
resized={resized}
changeTeam={changeTeam}
isActiveTeam={false}
/>
</View>
)}
/>
<TouchableOpacity
style={{ width: "90%", opacity: isAccountVerified ? 1 : 0.5 }}
onPress={() => onCreateTeam()}
Expand Down
27 changes: 16 additions & 11 deletions apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskLabelFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import {
Text,
StyleSheet,
ViewStyle,
ScrollView,
Dimensions,
Animated,
Modal,
TouchableWithoutFeedback,
FlatList,
} from "react-native"
import { AntDesign, Feather, FontAwesome } from "@expo/vector-icons"
import { GLOBAL_STYLE as GS } from "../../../../../assets/ts/styles"
Expand Down Expand Up @@ -92,16 +92,21 @@ const TaskStatusFilterDropDown: FC<DropDownProps> = observer(
>
<View style={styles.secondContainer}>
<Text style={[styles.dropdownTitle, { color: colors.primary }]}>Statuses</Text>
<ScrollView bounces={false} style={{ paddingHorizontal: 16, height: height / 2.55 }}>
{allTaskLabels.map((item, idx) => (
<DropDownItem
selectedLabels={selectedLabels}
setSelectedLabels={setSelectedLabels}
label={item}
key={idx}
/>
))}
</ScrollView>
<View style={{ paddingHorizontal: 16, height: height / 2.55 }}>
<FlatList
bounces={false}
showsVerticalScrollIndicator={false}
data={allTaskLabels}
renderItem={({ item, index }) => (
<DropDownItem
selectedLabels={selectedLabels}
setSelectedLabels={setSelectedLabels}
label={item}
key={index}
/>
)}
/>
</View>
</View>
</View>
</TouchableWithoutFeedback>
Expand Down
27 changes: 16 additions & 11 deletions apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskPriorityFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import {
Text,
StyleSheet,
ViewStyle,
ScrollView,
Dimensions,
Animated,
Modal,
TouchableWithoutFeedback,
FlatList,
} from "react-native"
import { AntDesign, Feather, FontAwesome } from "@expo/vector-icons"
import { GLOBAL_STYLE as GS } from "../../../../../assets/ts/styles"
Expand Down Expand Up @@ -99,16 +99,21 @@ const TaskStatusFilterDropDown: FC<DropDownProps> = observer(
>
<View style={styles.secondContainer}>
<Text style={[styles.dropdownTitle, { color: colors.primary }]}>Statuses</Text>
<ScrollView bounces={false} style={{ paddingHorizontal: 16, height: height / 2.55 }}>
{allTaskPriorities.map((item, idx) => (
<DropDownItem
selectedPriorities={selectedPriorities}
setSelectedPriorities={setSelectedPriorities}
priority={item}
key={idx}
/>
))}
</ScrollView>
<View style={{ paddingHorizontal: 16, height: height / 2.55 }}>
<FlatList
bounces={false}
showsVerticalScrollIndicator={false}
data={allTaskPriorities}
renderItem={({ item, index }) => (
<DropDownItem
selectedPriorities={selectedPriorities}
setSelectedPriorities={setSelectedPriorities}
priority={item}
key={index}
/>
)}
/>
</View>
</View>
</View>
</TouchableWithoutFeedback>
Expand Down
27 changes: 16 additions & 11 deletions apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskSizeFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import {
Text,
StyleSheet,
ViewStyle,
ScrollView,
Dimensions,
Animated,
Modal,
TouchableWithoutFeedback,
FlatList,
} from "react-native"
import { AntDesign, Feather, FontAwesome } from "@expo/vector-icons"
import { GLOBAL_STYLE as GS } from "../../../../../assets/ts/styles"
Expand Down Expand Up @@ -92,16 +92,21 @@ const TaskStatusFilterDropDown: FC<DropDownProps> = observer(
>
<View style={styles.secondContainer}>
<Text style={[styles.dropdownTitle, { color: colors.primary }]}>Statuses</Text>
<ScrollView bounces={false} style={{ paddingHorizontal: 16, height: height / 2.55 }}>
{allTaskSizes.map((item, idx) => (
<DropDownItem
selectedSizes={selectedSizes}
setSelectedSizes={setSelectedSizes}
size={item}
key={idx}
/>
))}
</ScrollView>
<View style={{ paddingHorizontal: 16, height: height / 2.55 }}>
<FlatList
bounces={false}
showsVerticalScrollIndicator={false}
data={allTaskSizes}
renderItem={({ item, index }) => (
<DropDownItem
selectedSizes={selectedSizes}
setSelectedSizes={setSelectedSizes}
size={item}
key={index}
/>
)}
/>
</View>
</View>
</View>
</TouchableWithoutFeedback>
Expand Down
27 changes: 16 additions & 11 deletions apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskStatusFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import {
Text,
StyleSheet,
ViewStyle,
ScrollView,
Dimensions,
Animated,
Modal,
TouchableWithoutFeedback,
FlatList,
} from "react-native"
import { AntDesign, Feather, FontAwesome } from "@expo/vector-icons"
import { GLOBAL_STYLE as GS } from "../../../../../assets/ts/styles"
Expand Down Expand Up @@ -93,16 +93,21 @@ const TaskStatusFilterDropDown: FC<DropDownProps> = observer(
>
<View style={styles.secondContainer}>
<Text style={[styles.dropdownTitle, { color: colors.primary }]}>Statuses</Text>
<ScrollView bounces={false} style={{ paddingHorizontal: 16, height: height / 2.55 }}>
{allStatuses.map((item, idx) => (
<DropDownItem
selectedStatus={selectedStatus}
setSelectedStatus={setSelectedStatus}
status={item}
key={idx}
/>
))}
</ScrollView>
<View style={{ paddingHorizontal: 16, height: height / 2.55 }}>
<FlatList
bounces={false}
showsVerticalScrollIndicator={false}
data={allStatuses}
renderItem={({ item, index }) => (
<DropDownItem
selectedStatus={selectedStatus}
setSelectedStatus={setSelectedStatus}
status={item}
key={index}
/>
)}
/>
</View>
</View>
</View>
</TouchableWithoutFeedback>
Expand Down
Loading

0 comments on commit d861b58

Please sign in to comment.