optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[SearchPanel] TVirtualGridList 적용

Browse Source
This commit is contained in:
hyunwoo93.cha
2024-02-19 20:10:04 +09:00
parent 8f6998be64
commit 3d2f2289a6
7 changed files with 25 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemCard/SearchItemCard.module.less
View File

@@ -22,7 +22,7 @@
.infoWrap {
.size(@w: calc(100% - 150px), @h: 100%);
padding-left: 24px;
padding: 0 24px;
.flex(@direction: column, @alignCenter: flex-start);
.title {

38
com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemResults.jsx
View File

@@ -1,51 +1,29 @@
import React, { useCallback } from "react";
import React from "react";
import { VirtualGridList } from "@enact/sandstone/VirtualList";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import ri from "@enact/ui/resolution";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import SearchItemCard from "./SearchItemCard/SearchItemCard";
import css from "./SearchItemResults.module.less";
const LIST_ITEM_CONF = {
ITEM_WIDTH: 561 * 2,
ITEM_HEIGHT: 150 * 2,
SPACING: 30 * 2,
};
const Container = SpotlightContainerDecorator(
{ leaveFor: { right: "" }, enterTo: "last-focused" },
"div"
);
export default function SearchItemResults({ itemDatas, itemCount, ...rest }) {
const renderItem = useCallback(
({ index, ...rest }) => {
const itemData = itemDatas[index];
return (
<SearchItemCard {...rest} key={itemDatas.contentId} {...itemData} />
);
},
[itemDatas]
);
return (
<Container className={css.container}>
{itemDatas && (
<VirtualGridList
<TVirtualGridList
className={css.grid}
items={itemDatas}
dataSize={itemDatas.length}
direction="horizontal"
itemRenderer={renderItem}
itemSize={{
minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
}}
spacing={ri.scale(LIST_ITEM_CONF.SPACING)}
scrollMode="translate"
horizontalScrollbar="hidden"
noScrollByWheel
itemCard={SearchItemCard}
itemWidth={561}
itemHeight={150}
spacing={30}
/>
)}
</Container>

5
com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchItemResults/SearchItemResults.module.less
View File

@@ -9,9 +9,4 @@
.grid {
height: 150px;
overflow: unset;
> div {
overflow: unset !important;
}
}

38
com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchShowResults/SearchShowResults.jsx
View File

@@ -1,51 +1,29 @@
import React, { useCallback } from "react";
import React from "react";
import VirtualGridList from "@enact/sandstone/VirtualList";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import ri from "@enact/ui/resolution";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import SearchShowCard from "./SearchShowCard/SearchShowCard";
import css from "./SearchShowResults.module.less";
const LIST_ITEM_CONF = {
ITEM_WIDTH: 344 * 2,
ITEM_HEIGHT: 281 * 2,
SPACING: 0,
};
const Container = SpotlightContainerDecorator(
{ leaveFor: { right: "" }, enterTo: "last-focused" },
"div"
);
export default function SearchShowResults({ showDatas, showCount, ...rest }) {
const renderItem = useCallback(
({ index, ...rest }) => {
const showData = showDatas[index];
return (
<SearchShowCard {...rest} key={showData.contentId} {...showData} />
);
},
[showDatas]
);
return (
<Container className={css.container}>
{showDatas && (
<VirtualGridList
<TVirtualGridList
className={css.grid}
items={showDatas}
dataSize={showDatas.length}
direction="horizontal"
itemRenderer={renderItem}
itemSize={{
minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
}}
spacing={ri.scale(LIST_ITEM_CONF.SPACING)}
scrollMode="translate"
horizontalScrollbar="hidden"
noScrollByWheel
itemCard={SearchShowCard}
itemWidth={344}
itemHeight={281}
spacing={0}
/>
)}
</Container>

5
com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchShowResults/SearchShowResults.module.less
View File

@@ -9,9 +9,4 @@
.grid {
height: 281px;
overflow: unset;
> div {
overflow: unset !important;
}
}

38
com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchThemeResults/SearchThemeResults.jsx
View File

@@ -1,18 +1,11 @@
import React, { useCallback } from "react";
import React from "react";
import { VirtualGridList } from "@enact/sandstone/VirtualList";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import ri from "@enact/ui/resolution";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import SearchThemeCard from "./SearchThemeCard/SearchThemeCard";
import css from "./SearchThemeResults.module.less";
const LIST_ITEM_CONF = {
ITEM_WIDTH: 560 * 2,
ITEM_HEIGHT: 140 * 2,
SPACING: 30 * 2,
};
const Container = SpotlightContainerDecorator(
{ leaveFor: { right: "" }, enterTo: "last-focused" },
"div"
@@ -23,33 +16,18 @@ export default function SearchThemeResults({
themeCount,
...rest
}) {
const renderItem = useCallback(
({ index, ...rest }) => {
const themeData = themeDatas[index];
return (
<SearchThemeCard {...rest} key={themeData.contentId} {...themeData} />
);
},
[themeDatas]
);
return (
<Container className={css.container}>
{themeDatas && (
<VirtualGridList
<TVirtualGridList
className={css.grid}
items={themeDatas}
dataSize={themeDatas.length}
direction="horizontal"
itemRenderer={renderItem}
itemSize={{
minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
}}
spacing={ri.scale(LIST_ITEM_CONF.SPACING)}
scrollMode="translate"
horizontalScrollbar="hidden"
noScrollByWheel
itemCard={SearchThemeCard}
itemWidth={560}
itemHeight={130}
spacing={30}
/>
)}
</Container>

5
com.twin.app.shoptime/src/views/SearchPanel/SearchResults/SearchThemeResults/SearchThemeResults.module.less
View File

@@ -9,9 +9,4 @@
.grid {
height: 141px;
overflow: unset;
> div {
overflow: unset !important;
}
}