|
|
|
@ -1,8 +1,6 @@ |
|
|
|
import React, { useState, useRef } from "react"; |
|
|
|
import React, { useRef } from "react"; |
|
|
|
import Shop from "../Shop/Shop"; |
|
|
|
import "./ShopList.scss"; |
|
|
|
import InfiniteScroll from "react-infinite-scroller"; |
|
|
|
|
|
|
|
const ShopList = ({ |
|
|
|
mall, |
|
|
|
q, |
|
|
|
@ -12,7 +10,6 @@ const ShopList = ({ |
|
|
|
format = null, |
|
|
|
floorOrder = null, |
|
|
|
}) => { |
|
|
|
const [index, setIndex] = useState(0); |
|
|
|
const shops = mall.shopInfo.reduce( |
|
|
|
(acc, { shopList }) => acc.concat(shopList), |
|
|
|
[] |
|
|
|
@ -55,26 +52,18 @@ const ShopList = ({ |
|
|
|
const listRef = useRef(null); |
|
|
|
return ( |
|
|
|
<div className={"shop-list " + (isRow ? "is-row" : "")} ref={listRef}> |
|
|
|
<InfiniteScroll |
|
|
|
pageStart={0} |
|
|
|
loadMore={() => setIndex(index + 1)} |
|
|
|
hasMore={filteredShops && filteredShops.length > index * 10} |
|
|
|
useWindow={false} |
|
|
|
getScrollParent={() => listRef && listRef.current} |
|
|
|
> |
|
|
|
<div className="list"> |
|
|
|
{filteredShops.map((shop, i) => ( |
|
|
|
<Shop |
|
|
|
{...shop} |
|
|
|
hasBorderTop={i !== 0} |
|
|
|
key={`${shop.name}_${shop.houseNum}`} |
|
|
|
onClick={() => onClick(shop)} |
|
|
|
isRow={isRow} |
|
|
|
></Shop> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
<div className="end">END</div> |
|
|
|
</InfiniteScroll> |
|
|
|
<div className="list"> |
|
|
|
{filteredShops.map((shop, i) => ( |
|
|
|
<Shop |
|
|
|
{...shop} |
|
|
|
hasBorderTop={i !== 0} |
|
|
|
key={`${shop.name}_${shop.houseNum}`} |
|
|
|
onClick={() => onClick(shop)} |
|
|
|
isRow={isRow} |
|
|
|
></Shop> |
|
|
|
))} |
|
|
|
</div> |
|
|
|
<div className="end">END</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
}; |
|
|
|
|