|
import React, { memo, useMemo, useRef } from "react"; |
|
import { RefreshControl, ViewStyle } from "react-native"; |
|
import { |
|
DataProvider, |
|
LayoutProvider, |
|
RecyclerListView, |
|
} from "recyclerlistview"; // Version can be specified in package.json |
|
|
|
import theme from "../theme"; |
|
import strings from "../translations"; |
|
import { RestaurantsType, RestaurantTypeItem } from "../types"; |
|
import { Column } from "../ui/Column"; |
|
import ListFooterLoading from "../ui/ListFooterLoading"; |
|
import ListHeaderTitle from "../ui/ListHeaderTitle"; |
|
import { Row } from "../ui/Row"; |
|
import ShowMore from "../ui/ShowMore"; |
|
import { VerticalSpacer } from "../ui/Spacer"; |
|
import DiscountsList from "./DiscountsList"; |
|
import HomeLandingsList from "./HomeLandingsList"; |
|
import HomeNearRestaurantsList from "./HomeNearRestaurantsList"; |
|
import HomeNewRestaurantsList from "./HomeNewRestaurantsList"; |
|
import HomeRecommendedRestaurantsList from "./HomeRecommendedRestaurantsList"; |
|
import HomeTopRestaurantList from "./HomeTopRestaurantList"; |
|
import PreferenceInlineList from "./PreferenceInlineList"; |
|
|
|
type ViewTypes = |
|
| "HomeLandingsList" |
|
| "PreferenceInlineList" |
|
| "HomeNearRestaurantsList" |
|
| "DiscountsList" |
|
| "HomeRecommendedRestaurantsList" |
|
| "HomeTopRestaurantsList" |
|
| "HomeNewRestaurantsList" |
|
| "default"; |
|
|
|
const dataProviderMaker = <ItemT,>( |
|
data: ReadonlyArray<ItemT>, |
|
sections: Array<{ type: ViewTypes }> |
|
) => new DataProvider((r1, r2) => r1 !== r2).cloneWithRows([sections, ...data]); |
|
|
|
const layoutMaker = () => |
|
new LayoutProvider( |
|
(index) => { |
|
let layoutType: ViewTypes = "default"; |
|
if (index === 0) { |
|
layoutType = "HomeLandingsList"; |
|
} else if (index === 1) { |
|
layoutType = "PreferenceInlineList"; |
|
} else if (index === 2) { |
|
layoutType = "HomeNearRestaurantsList"; |
|
} else if (index === 3) { |
|
layoutType = "DiscountsList"; |
|
} else if (index === 4) { |
|
layoutType = "HomeRecommendedRestaurantsList"; |
|
} else if (index === 5) { |
|
layoutType = "HomeTopRestaurantsList"; |
|
} else if (index === 6) { |
|
layoutType = "HomeNewRestaurantsList"; |
|
} |
|
return layoutType; |
|
}, |
|
(type, dim) => { |
|
switch (type as ViewTypes) { |
|
case "HomeLandingsList": |
|
dim.width = theme.windowWidth; |
|
dim.height = 260; |
|
break; |
|
case "HomeNearRestaurantsList": |
|
dim.width = theme.windowWidth; |
|
dim.height = 350; |
|
break; |
|
case "PreferenceInlineList": |
|
dim.width = theme.windowWidth; |
|
dim.height = 160; |
|
break; |
|
case "DiscountsList": |
|
dim.width = theme.windowWidth; |
|
dim.height = 190; |
|
break; |
|
case "HomeRecommendedRestaurantsList": |
|
dim.width = theme.windowWidth; |
|
dim.height = 340; |
|
break; |
|
case "HomeTopRestaurantsList": |
|
dim.width = theme.windowWidth; |
|
dim.height = 220; |
|
break; |
|
case "HomeNewRestaurantsList": |
|
dim.width = theme.windowWidth; |
|
dim.height = 370; |
|
break; |
|
case "default": |
|
dim.width = theme.windowWidth; |
|
dim.height = 290; |
|
break; |
|
default: |
|
dim.width = theme.windowWidth; |
|
dim.height = 0; |
|
} |
|
} |
|
); |
|
|
|
// type RecycleListDataType = { |
|
// type: ViewTypes; |
|
// data?: RestaurantsType; |
|
// }; |
|
// const PreparedData: RecycleListDataType[] & RestaurantsType = [ |
|
// {type: 'HomeLandingsList'}, |
|
// {type: 'PreferenceInlineList'}, |
|
// {type: 'HomeNearRestaurantsList'}, |
|
// {type: 'DiscountsList'}, |
|
// {type: 'HomeRecommendedRestaurantsList'}, |
|
// {type: 'HomeTopRestaurantsList'}, |
|
// {type: 'HomeNewRestaurantsList'}, |
|
// ]; |
|
|
|
type Props<ItemT> = { |
|
restaurantData: ReadonlyArray<ItemT> | null | undefined; |
|
refreshing: boolean; |
|
listEndReached: boolean; |
|
isLoadMore: boolean; |
|
|
|
renderItem: (item: ItemT) => React.ReactNode; |
|
onEndReached: () => void; |
|
reloadRestaurants: () => void; |
|
isMarkets?: boolean; |
|
onPressShowMore: () => void; |
|
numberOfSections: number; |
|
}; |
|
|
|
const RecycleList2 = memo(<ItemT,>(props: Props<ItemT>) => { |
|
const _layoutProvider = useRef(layoutMaker()).current; |
|
|
|
const dataProvider = useMemo(() => { |
|
// const p = [ |
|
// {type: 'HomeLandingsList'}, |
|
// {type: 'PreferenceInlineList'}, |
|
// {type: 'HomeNearRestaurantsList'}, |
|
// {type: 'DiscountsList'}, |
|
// {type: 'HomeRecommendedRestaurantsList'}, |
|
// {type: 'HomeTopRestaurantsList'}, |
|
// {type: 'HomeNewRestaurantsList'}, |
|
// ] |
|
if (!props.restaurantData) return dataProviderMaker([], []); |
|
return dataProviderMaker(props.restaurantData, [ |
|
{ type: "HomeLandingsList" }, |
|
{ type: "PreferenceInlineList" }, |
|
{ type: "HomeNearRestaurantsList" }, |
|
{ type: "DiscountsList" }, |
|
{ type: "HomeRecommendedRestaurantsList" }, |
|
{ type: "HomeTopRestaurantsList" }, |
|
{ type: "HomeNewRestaurantsList" }, |
|
]); |
|
}, [props.restaurantData]); |
|
|
|
const rowRenderer = (type: string | number, data: ItemT, index: number) => { |
|
console.log(">type", type, index); |
|
const children = [ |
|
<HomeLandingsList />, |
|
<PreferenceInlineList />, |
|
<> |
|
<HomeNearRestaurantsList /> |
|
<VerticalSpacer variant="sm" /> |
|
</>, |
|
<DiscountsList />, |
|
]; |
|
|
|
if (index < 2) |
|
return ( |
|
<Column style={{ width: theme.windowWidth }}>{children[index]}</Column> |
|
); |
|
if (index > 6) return <Column>{props.renderItem(data)}</Column>; |
|
|
|
return null; |
|
// switch (type as ViewTypes) { |
|
// case 'HomeLandingsList': |
|
// return ( |
|
// <Column> |
|
// <HomeLandingsList /> |
|
// </Column> |
|
// ); |
|
// case 'PreferenceInlineList': |
|
// return ( |
|
// <Column style={{width: theme.windowWidth}}> |
|
// <PreferenceInlineList /> |
|
// </Column> |
|
// ); |
|
// case 'HomeNearRestaurantsList': |
|
// return ( |
|
// <Column> |
|
// <HomeNearRestaurantsList /> |
|
// <VerticalSpacer variant="sm" /> |
|
// </Column> |
|
// ); |
|
// case 'DiscountsList': |
|
// return ( |
|
// <Column> |
|
// <DiscountsList /> |
|
// </Column> |
|
// ); |
|
// case 'HomeRecommendedRestaurantsList': |
|
// return ( |
|
// <Column> |
|
// <HomeRecommendedRestaurantsList /> |
|
// </Column> |
|
// ); |
|
// case 'HomeTopRestaurantsList': |
|
// return ( |
|
// <Column> |
|
// <HomeTopRestaurantList /> |
|
// </Column> |
|
// ); |
|
// case 'HomeNewRestaurantsList': |
|
// return ( |
|
// <Column> |
|
// <HomeNewRestaurantsList /> |
|
// <VerticalSpacer variant="sm" /> |
|
// <Row align="center" justify="space-between"> |
|
// <ListHeaderTitle title={strings.restaurants} /> |
|
// <ShowMore itemsCount={'200+'} onPress={props.onPressShowMore} /> |
|
// </Row> |
|
// </Column> |
|
// ); |
|
// case 'default': |
|
// return <Column>{props.renderItem(data)}</Column>; |
|
// default: |
|
// return null; |
|
// } |
|
}; |
|
|
|
const handleEndReached = () => { |
|
if (!props.listEndReached) props.onEndReached(); |
|
}; |
|
|
|
const recycleStyles: ViewStyle = { minWidth: 1, minHeight: 1 }; |
|
return ( |
|
<Column flex={1} bgColor={theme.colorWhite}> |
|
<RecyclerListView |
|
style={recycleStyles} |
|
layoutProvider={_layoutProvider} |
|
dataProvider={dataProvider} |
|
rowRenderer={rowRenderer} |
|
canChangeSize |
|
forceNonDeterministicRendering |
|
renderAheadOffset={theme.windowHeight} |
|
renderFooter={() => (props.isLoadMore ? <ListFooterLoading /> : null)} |
|
onEndReachedThreshold={1} |
|
onEndReachedThresholdRelative={1} |
|
onEndReached={handleEndReached} |
|
scrollViewProps={{ |
|
refreshControl: ( |
|
<RefreshControl |
|
tintColor={theme.colorPurple} |
|
refreshing={props.refreshing} |
|
onRefresh={props.reloadRestaurants} |
|
/> |
|
), |
|
}} |
|
/> |
|
</Column> |
|
); |
|
}); |
|
|
|
export default RecycleList2; |