Skip to content

Commit 2a6e00a

Browse files
situchansituchan
committed
fix more issues in storybook
1 parent 5a711f4 commit 2a6e00a

5 files changed

Lines changed: 80 additions & 45 deletions

File tree

‎src/stories/AddressSearch.stories.tsx‎

100644100755
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ function Template(props: AddressSearchProps) {
2525
const [value, setValue] = useState<string | number | Address | StreetValue>('');
2626
return (
2727
<AddressSearch
28+
inputID="addressLine1"
2829
value={value as string}
2930
onInputChange={(inputValue) => setValue(inputValue)}
3031
{...props}

‎src/stories/Button.stories.tsx‎

100644100755
Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type {Meta, StoryFn} from '@storybook/react-webpack5';
2-
import React, {useCallback, useState} from 'react';
2+
import React, {useState} from 'react';
33
import {View} from 'react-native';
44
import type {ButtonProps} from '@components/Button';
55
import Button from '@components/Button';
@@ -26,11 +26,11 @@ function Template(props: ButtonProps) {
2626
const Default: ButtonStory = Template.bind({});
2727
const Loading: ButtonStory = Template.bind({});
2828
function PressOnEnter(props: ButtonProps) {
29-
const [text, setText] = useState('');
30-
const onPress = useCallback(() => {
29+
const [text, setText] = useState(props.text);
30+
const onPress = () => {
3131
setText('Button Pressed!');
32-
setTimeout(() => setText(''), 500);
33-
}, []);
32+
setTimeout(() => setText(props.text), 500);
33+
};
3434
return (
3535
<Button
3636
{...props}

‎src/stories/EReceipt.stories.tsx‎

100644100755
Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const transactionData = {
3535
amount: 1000,
3636
currency: 'USD',
3737
cardID: 5,
38+
cardName: 'Expensify Test Card',
3839
merchant: 'United Airlines',
3940
mccGroup: 'Commuter',
4041
created: '2023-07-24 13:46:20',
@@ -155,8 +156,8 @@ const transactionData = {
155156

156157
Onyx.mergeCollection(ONYXKEYS.COLLECTION.TRANSACTION, transactionData);
157158
Onyx.merge('cardList', {
158-
4: {bank: 'Expensify Card', lastFourPAN: '1000'},
159-
5: {bank: 'Expensify Card', lastFourPAN: '4444'},
159+
4: {cardName: 'Test Card', lastFourPAN: '1000', fundID: '123'},
160+
5: {bank: 'Expensify Card', lastFourPAN: '4444', fundID: '456'},
160161
});
161162

162163
/**

‎src/stories/MoneyRequestReportPreview.stories.tsx‎

100644100755
Lines changed: 67 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1+
import type {ListRenderItem} from '@shopify/flash-list';
12
import type {StoryFn} from '@storybook/react-webpack5';
2-
import React from 'react';
3-
import type {ListRenderItem} from 'react-native';
3+
import React, {useRef, useState} from 'react';
4+
import type {LayoutChangeEvent} from 'react-native';
45
import {View} from 'react-native';
56
import MoneyRequestReportPreviewContent from '@components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent';
67
import type {MoneyRequestReportPreviewContentProps} from '@components/ReportActionItem/MoneyRequestReportPreview/types';
78
import TransactionPreviewContent from '@components/ReportActionItem/TransactionPreview/TransactionPreviewContent';
89
import ThemeProvider from '@components/ThemeProvider';
910
import ThemeStylesProvider from '@components/ThemeStylesContextProvider';
10-
// eslint-disable-next-line no-restricted-imports
11-
import getMoneyRequestReportPreviewStyle from '@styles/utils/getMoneyRequestReportPreviewStyle';
12-
// eslint-disable-next-line no-restricted-imports
13-
import sizing from '@styles/utils/sizing';
11+
import useStyleUtils from '@hooks/useStyleUtils';
12+
import useThemeStyles from '@hooks/useThemeStyles';
1413
import CONST from '@src/CONST';
1514
import SCREENS from '@src/SCREENS';
1615
import type {Transaction} from '@src/types/onyx';
@@ -34,30 +33,6 @@ const mockTransactionsBig = Array.from({length: 12}).map((item, index) => {
3433
return {...transactionR14932, transactionID: `${transactionR14932.transactionID}${index}`};
3534
});
3635

37-
const mockRenderItem: ListRenderItem<Transaction> = ({item}) => (
38-
<TransactionPreviewContent
39-
action={actionR14932}
40-
isWhisper={false}
41-
isHovered={false}
42-
chatReport={chatReportR14932}
43-
personalDetails={personalDetails}
44-
report={iouReportR14932}
45-
transaction={item}
46-
transactionRawAmount={item.amount}
47-
violations={item.errors ? violationsR14932 : []}
48-
offlineWithFeedbackOnClose={() => undefined}
49-
navigateToReviewFields={() => undefined}
50-
isBillSplit={false}
51-
areThereDuplicates={false}
52-
sessionAccountID={11111111}
53-
walletTermsErrors={undefined}
54-
routeName={SCREENS.TRANSACTION_DUPLICATE.REVIEW}
55-
shouldHideOnDelete={false}
56-
transactionPreviewWidth={303}
57-
containerStyles={[sizing.h100]}
58-
/>
59-
);
60-
6136
type MoneyRequestReportPreviewStory = StoryFn<typeof MoneyRequestReportPreviewContent>;
6237

6338
export default {
@@ -123,7 +98,6 @@ export default {
12398
violations: violationsR14932,
12499
invoiceReceiverPersonalDetail: undefined,
125100
invoiceReceiverPolicy: undefined,
126-
renderTransactionItem: mockRenderItem,
127101
},
128102
parameters: {
129103
useLightTheme: true,
@@ -133,17 +107,76 @@ export default {
133107
function Template(props: MoneyRequestReportPreviewContentProps, {parameters}: {parameters: {useLightTheme?: boolean; transactionsBig?: boolean}}) {
134108
const theme = parameters.useLightTheme ? CONST.THEME.LIGHT : CONST.THEME.DARK;
135109
const transactions = parameters.transactionsBig ? mockTransactionsBig : props.transactions;
136-
const reportPreviewStyle = getMoneyRequestReportPreviewStyle(false, transactions.length, 400, 400);
110+
111+
const widthsRef = useRef<{currentWidth: number | null; currentWrapperWidth: number | null}>({currentWidth: null, currentWrapperWidth: null});
112+
const [widths, setWidths] = useState({currentWidth: 0, currentWrapperWidth: 0});
113+
114+
const updateWidths = () => {
115+
const {currentWidth, currentWrapperWidth} = widthsRef.current;
116+
117+
if (currentWidth && currentWrapperWidth) {
118+
setWidths({currentWidth, currentWrapperWidth});
119+
}
120+
};
121+
122+
const onCarouselLayout = (e: LayoutChangeEvent) => {
123+
const newWidth = e.nativeEvent.layout.width;
124+
if (widthsRef.current.currentWidth !== newWidth) {
125+
widthsRef.current.currentWidth = newWidth;
126+
updateWidths();
127+
}
128+
};
129+
130+
const onWrapperLayout = (e: LayoutChangeEvent) => {
131+
const newWrapperWidth = e.nativeEvent.layout.width;
132+
if (widthsRef.current.currentWrapperWidth !== newWrapperWidth) {
133+
widthsRef.current.currentWrapperWidth = newWrapperWidth;
134+
updateWidths();
135+
}
136+
};
137+
138+
const StyleUtils = useStyleUtils();
139+
const styles = useThemeStyles();
140+
const reportPreviewStyles = StyleUtils.getMoneyRequestReportPreviewStyle(false, transactions.length, widths.currentWidth, widths.currentWrapperWidth);
141+
const transactionPreviewContainerStyles = [styles.h100, reportPreviewStyles.transactionPreviewCarouselStyle];
142+
143+
const renderItem: ListRenderItem<Transaction> = ({item}) => (
144+
<TransactionPreviewContent
145+
action={actionR14932}
146+
isWhisper={false}
147+
isHovered={false}
148+
chatReport={chatReportR14932}
149+
personalDetails={personalDetails}
150+
report={iouReportR14932}
151+
transaction={item}
152+
transactionRawAmount={item.amount}
153+
violations={item.errors ? violationsR14932 : []}
154+
offlineWithFeedbackOnClose={() => undefined}
155+
navigateToReviewFields={() => undefined}
156+
isBillSplit={false}
157+
areThereDuplicates={false}
158+
sessionAccountID={11111111}
159+
walletTermsErrors={undefined}
160+
routeName={SCREENS.TRANSACTION_DUPLICATE.REVIEW}
161+
shouldHideOnDelete={false}
162+
transactionPreviewWidth={reportPreviewStyles.transactionPreviewCarouselStyle.width}
163+
containerStyles={transactionPreviewContainerStyles}
164+
/>
165+
);
137166

138167
return (
139168
<ThemeProvider theme={theme}>
140169
<ThemeStylesProvider>
141170
<View style={{maxWidth: '100%'}}>
142171
<MoneyRequestReportPreviewContent
143172
{...props}
144-
reportPreviewStyles={reportPreviewStyle}
145-
containerStyles={[reportPreviewStyle.componentStyle, props.containerStyles]}
173+
reportPreviewStyles={reportPreviewStyles}
174+
containerStyles={[reportPreviewStyles.componentStyle, props.containerStyles]}
146175
transactions={transactions}
176+
onCarouselLayout={onCarouselLayout}
177+
onWrapperLayout={onWrapperLayout}
178+
currentWidth={widths.currentWidth}
179+
renderTransactionItem={renderItem}
147180
/>
148181
</View>
149182
</ThemeStylesProvider>

‎src/stories/TransactionItemRow.stories.tsx‎

100644100755
Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@ function Template(
8282

8383
return (
8484
<ThemeProvider theme={theme}>
85-
<ScreenWrapper testID="testID">
86-
<ThemeStylesProvider>
85+
<ThemeStylesProvider>
86+
<ScreenWrapper testID="testID">
8787
<TransactionItemRow
8888
transactionItem={transactionItem}
8989
shouldUseNarrowLayout={shouldUseNarrowLayout}
@@ -97,8 +97,8 @@ function Template(
9797
columns={columns}
9898
onButtonPress={() => {}}
9999
/>
100-
</ThemeStylesProvider>
101-
</ScreenWrapper>
100+
</ScreenWrapper>
101+
</ThemeStylesProvider>
102102
</ThemeProvider>
103103
);
104104
}

0 commit comments

Comments
 (0)