From 2689b93ba20249aea20bed90147903cb90ffd24e Mon Sep 17 00:00:00 2001
From: Juwon Jeong <juwon.jeong@lge.com>
Date: Mon, 23 Sep 2024 17:53:26 +0900
Subject: [PATCH] WRR-2172: Update VirtualList qa-sampler for cases where the
 contents of a VirtualList change between fixed size and variable size
 contents (#1683)

* Update VirtualList qa-sampler

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)

* Fixed to functional component

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)

* Fixed typo

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)

* Fixed typo

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)
---
 samples/sampler/stories/qa/VirtualList.js | 47 +++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/samples/sampler/stories/qa/VirtualList.js b/samples/sampler/stories/qa/VirtualList.js
index 37253da947..6c7ab0e6f1 100644
--- a/samples/sampler/stories/qa/VirtualList.js
+++ b/samples/sampler/stories/qa/VirtualList.js
@@ -542,3 +542,50 @@ WithContainerItemsHaveSpottableControls.storyName = 'with container items have s
 WithContainerItemsHaveSpottableControls.parameters = {
 	propTables: [Config]
 };
+
+const fixedItemSizes = new Array(16).fill(ri.scale(390));
+const variableItemSizes = fixedItemSizes.map((size, index) => {
+	return index % 2  ? size * 2  : size;
+});
+
+// eslint-disable-next-line enact/prop-types, enact/display-name
+const renderVirtualListItem = (variableItemSizesMode) => ({index, ...rest}) => {
+	return (
+		<Item {...rest} style={{width: variableItemSizesMode && index % 2 ? ri.scaleToRem(720) : ri.scaleToRem(360), margin: ri.scaleToRem(15)}}>
+			{`item ${index}`}
+		</Item>
+	);
+};
+
+export const WithChangingFixedAndVariableItemSizes = () => {
+	const [variableItemSizesMode, setVariableItemSizesMode] = useState(false);
+	const handleDataSize = useCallback(() => {
+		setVariableItemSizesMode(!variableItemSizesMode);
+	}, [variableItemSizesMode]);
+
+	return (
+		<Column>
+			<Cell shrink>
+				<Button size="small" onClick={handleDataSize}>Update Items</Button>
+			</Cell>
+			<br />
+			<br />
+			<Cell>
+				<VirtualList
+					dataSize={16}
+					direction="horizontal"
+					itemRenderer={renderVirtualListItem(variableItemSizesMode)}
+					itemSize={{
+						size: variableItemSizesMode ? variableItemSizes : fixedItemSizes,
+						minSize: Math.min(...variableItemSizes)
+					}}
+				/>
+			</Cell>
+		</Column>
+	);
+};
+
+WithChangingFixedAndVariableItemSizes.storyName = 'with changing fixed and variable item sizes';
+WithChangingFixedAndVariableItemSizes.parameters = {
+	propTables: [Config]
+};