Skip to content

Commit 13d1ad9

Browse files
kilbotkilbot
committed
fix grid layout for native
1 parent 088611e commit 13d1ad9

File tree

37 files changed

+1861
-1640
lines changed

37 files changed

+1861
-1640
lines changed

‎apps/main/app/(app)/(drawer)/(pos)/(modals)/cart/add-misc-product.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as React from 'react';
2+
3+
import {
4+
Dialog,
5+
DialogTrigger,
6+
DialogContent,
7+
DialogHeader,
8+
DialogTitle,
9+
DialogBody,
10+
} from '@wcpos/components/dialog';
11+
import { ErrorBoundary } from '@wcpos/components/error-boundary';
12+
import { IconButton } from '@wcpos/components/icon-button';
13+
import { AddMiscProduct as AddMiscProductForm } from '@wcpos/core/screens/main/pos/cart/add-misc-product';
14+
15+
interface Props {
16+
title: string;
17+
children: React.ReactNode;
18+
}
19+
20+
/**
21+
*
22+
*/
23+
export default function AddMiscProduct() {
24+
return (
25+
<ErrorBoundary>
26+
<AddMiscProductForm />
27+
</ErrorBoundary>
28+
);
29+
}

‎apps/main/app/(app)/(drawer)/(pos)/_layout.tsx

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,20 +43,30 @@ const POSStack = () => {
4343

4444
return (
4545
<TaxRatesProvider taxQuery={taxQuery} order={currentOrder}>
46-
<Stack
47-
screenOptions={{ headerShown: false, contentStyle: { backgroundColor: 'transparent' } }}
48-
>
46+
<Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: '#F0F4F8' } }}>
4947
<Stack.Screen name="index" />
48+
<Stack.Screen
49+
name="(modals)/cart/add-misc-product"
50+
options={{
51+
presentation: 'transparentModal',
52+
animation: 'fade',
53+
contentStyle: { backgroundColor: 'transparent' },
54+
}}
55+
/>
5056
<Stack.Screen
5157
name="(modals)/cart/[orderId]/checkout"
5258
options={{
53-
presentation: 'modal',
59+
presentation: 'transparentModal',
60+
animation: 'fade',
61+
contentStyle: { backgroundColor: 'transparent' },
5462
}}
5563
/>
5664
<Stack.Screen
5765
name="(modals)/cart/receipt/[orderId]"
5866
options={{
59-
presentation: 'modal',
67+
presentation: 'transparentModal',
68+
animation: 'fade',
69+
contentStyle: { backgroundColor: 'transparent' },
6070
}}
6171
/>
6272
</Stack>

‎apps/main/app/(app)/(drawer)/(pos)/index.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,13 @@ export default function IndexScreen() {
3232

3333
console.log('before redirect');
3434

35-
if (dimensions.width <= 640 && segments.includes('(columns)')) {
36-
debugger;
37-
const newPath = segments
38-
.map((segment) => (segment === '(columns)' ? '(tabs)' : segment))
39-
.join('/');
40-
return router.replace(newPath);
41-
}
35+
// if (dimensions.width <= 640 && segments.includes('(columns)')) {
36+
// debugger;
37+
// const newPath = segments
38+
// .map((segment) => (segment === '(columns)' ? '(tabs)' : segment))
39+
// .join('/');
40+
// return router.replace(newPath);
41+
// }
4242

4343
if (dimensions.width <= 640) {
4444
return <Redirect href="(tabs)" />;

‎apps/main/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"dependencies": {
1919
"@react-native-community/netinfo": "11.4.1",
2020
"@react-navigation/drawer": "7.1.2",
21-
"@shopify/flash-list": "1.7.3",
21+
"@shopify/flash-list": "1.7.6",
2222
"@shopify/react-native-skia": "1.5.0",
2323
"expo": "52.0.40",
2424
"expo-constants": "17.0.8",

‎packages/components/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"svg": "svgr --config-file ./svgr.config.js src/icon/svg/fontawesome/solid --out-dir src/icon/components/fontawesome/solid"
66
},
77
"peerDependencies": {
8-
"@shopify/flash-list": "^1.7.2",
8+
"@shopify/flash-list": "1.7.6",
99
"expo-haptics": "^13.0.1",
1010
"expo-image": "^2.0.5",
1111
"expo-router": "4.0.19",
@@ -43,14 +43,14 @@
4343
"@rn-primitives/toggle-group": "^1.1.0",
4444
"@rn-primitives/tooltip": "^1.1.0",
4545
"@tanstack/react-table": "^8.20.6",
46-
"@tanstack/react-virtual": "3.13.4",
46+
"@tanstack/react-virtual": "3.13.5",
4747
"@uiw/react-json-view": "^2.0.0-alpha.30",
4848
"class-variance-authority": "^0.7.1",
4949
"clsx": "^2.1.1",
5050
"cmdk": "1.1.1",
5151
"color": "^5.0.0",
5252
"date-fns": "^4.1.0",
53-
"html-entities": "^2.5.2",
53+
"html-entities": "2.5.3",
5454
"react-day-picker": "9.6.3",
5555
"react-hook-form": "^7.54.2",
5656
"react-native-toast-message": "^2.2.1",

‎packages/components/src/data-table/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { ActivityIndicator, RefreshControl, LayoutChangeEvent } from 'react-native';
33

4-
import { FlashList, type FlashListProps } from '@shopify/flash-list';
4+
import { FlashList } from '@shopify/flash-list';
55
import {
66
ColumnDef,
77
flexRender,
@@ -25,6 +25,8 @@ import { DataTableRow } from './row';
2525
import { getFlexAlign } from '../lib/utils';
2626
import { Table, TableBody, TableHead, TableHeader, TableRow } from '../table';
2727

28+
import type { FlashListProps } from '@shopify/flash-list';
29+
2830
interface DataTableProps<TData, TValue> {
2931
columns: ColumnDef<TData, TValue>[];
3032
data: TData[];

‎packages/core/babel.config.js

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎packages/core/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"@widgetbot/react-embed": "^1.9.0",
4141
"blob-polyfill": "^9.0.20240710",
4242
"date-fns": "4.1.0",
43-
"html-entities": "2.5.2",
43+
"html-entities": "2.5.3",
4444
"lodash": "4.17.21",
4545
"observable-hooks": "4.2.4",
4646
"react-error-boundary": "5.0.0",
@@ -59,7 +59,7 @@
5959
"@testing-library/react-hooks": "8.0.1",
6060
"@types/core-js": "^2.5.8",
6161
"@types/jest": "^29.5.13",
62-
"@types/lodash": "4.17.15",
62+
"@types/lodash": "4.17.16",
6363
"@types/react": "^18.2.79",
6464
"jest": "^29.7.0",
6565
"react-native": "0.77.1",

‎packages/core/src/screens/main/components/billing-address-form.tsx

Lines changed: 90 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { useFormContext } from 'react-hook-form';
55
import * as z from 'zod';
66

77
import { FormCombobox, FormField, FormInput } from '@wcpos/components/form';
8+
import { HStack } from '@wcpos/components/hstack';
9+
import { VStack } from '@wcpos/components/vstack';
810

911
import { CountryCombobox } from './country-state-select/country-combobox';
1012
import { StateFormInput } from './country-state-select/state-forminput';
@@ -44,81 +46,111 @@ export const BillingAddressForm = () => {
4446
*
4547
*/
4648
return (
47-
<View className="grid grid-cols-2 gap-4">
48-
<FormField
49-
control={control}
50-
name="billing.first_name"
51-
render={({ field }) => <FormInput label={t('First Name', { _tags: 'core' })} {...field} />}
52-
/>
53-
<FormField
54-
control={control}
55-
name="billing.last_name"
56-
render={({ field }) => <FormInput label={t('Last Name', { _tags: 'core' })} {...field} />}
57-
/>
58-
<FormField
59-
control={control}
60-
name="billing.email"
61-
render={({ field }) => <FormInput label={t('Email', { _tags: 'core' })} {...field} />}
62-
/>
63-
<FormField
64-
control={control}
65-
name="billing.phone"
66-
render={({ field }) => <FormInput label={t('Phone', { _tags: 'core' })} {...field} />}
67-
/>
68-
<View className="col-span-2">
49+
<VStack className="gap-4">
50+
<HStack className="gap-4">
6951
<FormField
7052
control={control}
71-
name="billing.company"
72-
render={({ field }) => <FormInput label={t('Company', { _tags: 'core' })} {...field} />}
53+
name="billing.first_name"
54+
render={({ field }) => (
55+
<View className="flex-1">
56+
<FormInput label={t('First Name', { _tags: 'core' })} {...field} />
57+
</View>
58+
)}
7359
/>
74-
</View>
75-
<View className="col-span-2">
7660
<FormField
7761
control={control}
78-
name="billing.address_1"
79-
render={({ field }) => <FormInput label={t('Address 1', { _tags: 'core' })} {...field} />}
62+
name="billing.last_name"
63+
render={({ field }) => (
64+
<View className="flex-1">
65+
<FormInput label={t('Last Name', { _tags: 'core' })} {...field} />
66+
</View>
67+
)}
8068
/>
81-
</View>
82-
<View className="col-span-2">
69+
</HStack>
70+
<HStack className="gap-4">
8371
<FormField
8472
control={control}
85-
name="billing.address_2"
86-
render={({ field }) => <FormInput label={t('Address 2', { _tags: 'core' })} {...field} />}
73+
name="billing.email"
74+
render={({ field }) => (
75+
<View className="flex-1">
76+
<FormInput label={t('Email', { _tags: 'core' })} {...field} />
77+
</View>
78+
)}
8779
/>
88-
</View>
89-
<FormField
90-
control={control}
91-
name="billing.city"
92-
render={({ field }) => <FormInput label={t('City', { _tags: 'core' })} {...field} />}
93-
/>
80+
<FormField
81+
control={control}
82+
name="billing.phone"
83+
render={({ field }) => (
84+
<View className="flex-1">
85+
<FormInput label={t('Phone', { _tags: 'core' })} {...field} />
86+
</View>
87+
)}
88+
/>
89+
</HStack>
9490
<FormField
9591
control={control}
96-
name="billing.state"
97-
render={({ field }) => (
98-
<FormInput
99-
customComponent={StateFormInput}
100-
label={t('State', { _tags: 'core' })}
101-
{...field}
102-
countryCode={countryCode}
103-
/>
104-
)}
92+
name="billing.company"
93+
render={({ field }) => <FormInput label={t('Company', { _tags: 'core' })} {...field} />}
10594
/>
10695
<FormField
10796
control={control}
108-
name="billing.country"
109-
render={({ field }) => (
110-
<FormCombobox
111-
customComponent={CountryCombobox}
112-
label={t('Country', { _tags: 'core' })}
113-
{...field}
114-
/>
115-
)}
97+
name="billing.address_1"
98+
render={({ field }) => <FormInput label={t('Address 1', { _tags: 'core' })} {...field} />}
11699
/>
117100
<FormField
118101
control={control}
119-
name="billing.postcode"
120-
render={({ field }) => <FormInput label={t('Postcode', { _tags: 'core' })} {...field} />}
102+
name="billing.address_2"
103+
render={({ field }) => <FormInput label={t('Address 2', { _tags: 'core' })} {...field} />}
121104
/>
122-
</View>
105+
<HStack className="gap-4">
106+
<FormField
107+
control={control}
108+
name="billing.city"
109+
render={({ field }) => (
110+
<View className="flex-1">
111+
<FormInput label={t('City', { _tags: 'core' })} {...field} />
112+
</View>
113+
)}
114+
/>
115+
<FormField
116+
control={control}
117+
name="billing.state"
118+
render={({ field }) => (
119+
<View className="flex-1">
120+
<FormInput
121+
customComponent={StateFormInput}
122+
label={t('State', { _tags: 'core' })}
123+
{...field}
124+
countryCode={countryCode}
125+
/>
126+
</View>
127+
)}
128+
/>
129+
</HStack>
130+
<HStack className="gap-4">
131+
<FormField
132+
control={control}
133+
name="billing.country"
134+
render={({ field }) => (
135+
<View className="flex-1">
136+
<FormCombobox
137+
customComponent={CountryCombobox}
138+
label={t('Country', { _tags: 'core' })}
139+
{...field}
140+
/>
141+
</View>
142+
)}
143+
/>
144+
<FormField
145+
control={control}
146+
name="billing.postcode"
147+
render={({ field }) => (
148+
<View className="flex-1">
149+
<FormInput label={t('Postcode', { _tags: 'core' })} {...field} />
150+
</View>
151+
)}
152+
/>
153+
</HStack>
154+
</VStack>
123155
);
124156
};

0 commit comments

Comments
 (0)