Skip to content

Commit a874b83

Browse files
committed
Fixed issue with text overflow in List and Detail view
Added documentation for Barricade functions
1 parent becbc72 commit a874b83

File tree

12 files changed

+212
-47
lines changed

12 files changed

+212
-47
lines changed

example/mock-server/api/recent.api.mock.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const errorResponseHandler = () => {
4040
};
4141

4242
const loadMoreResponseHandler = (request: Request) => {
43+
// Here we can make use of many other properties in Request like headers/params to return mocked response.
4344
const { page } = request.params ?? {};
4445

4546
if (page === '1') {
@@ -62,7 +63,11 @@ const RecentApiRequestConfig: RequestConfig = {
6263
method: Method.Get,
6364
pathEvaluation: {
6465
path: apiConfig.photos.recent,
65-
type: PathEvaluationType.Includes,
66+
type: PathEvaluationType.Callback,
67+
callback: (request: Request) => {
68+
// Here we can make use of many other properties in Request like headers / params to identify the API call.
69+
return request._url.includes(apiConfig.photos.recent);
70+
},
6671
},
6772
responseHandler: [
6873
{
@@ -83,7 +88,7 @@ const RecentApiRequestConfig: RequestConfig = {
8388
handler: loadMoreResponseHandler,
8489
},
8590
],
86-
delay: 5000,
91+
delay: 3000,
8792
};
8893

8994
export { RecentApiRequestConfig };

example/mock-server/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@ export const mockServer = () => {
88
RecentApiRequestConfig,
99
SearchApiRequestConfig,
1010
]);
11-
barricade.start();
11+
barricade.start(); // We can all call this like - getBarricadeInstance()?.start();
1212
};

example/src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const AppContent = () => {
3434
/>
3535
<AppRouter />
3636
{!__DEV__ && Env.enableBarricade && (
37-
<IconButton icon={Images.logo} onPress={showBarricadeView} />
37+
<IconButton icon={Images.logo} onPress={showBarricadeView} /> // This is optional and is required only when you want to mock API in release mode.
3838
)}
3939
{Env.enableBarricade && <BarricadeView />}
4040
</>

src/__tests__/components/__snapshots__/BarricadeView.test.tsx.snap

Lines changed: 58 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ exports[`given that theme is dark and detail view is selected, should match Barr
9090
"fontSize": 40,
9191
"fontWeight": "bold",
9292
"left": 0,
93-
"marginHorizontal": 120,
93+
"marginHorizontal": 140,
9494
"position": "absolute",
9595
"right": 0,
9696
"textAlign": "center",
@@ -213,6 +213,7 @@ exports[`given that theme is dark and detail view is selected, should match Barr
213213
Object {
214214
"borderBottomWidth": 1,
215215
"borderColor": "#69696D",
216+
"flex": 1,
216217
"flexDirection": "row",
217218
"justifyContent": "space-between",
218219
"opacity": 1,
@@ -225,8 +226,10 @@ exports[`given that theme is dark and detail view is selected, should match Barr
225226
style={
226227
Array [
227228
Object {
229+
"flex": 1,
228230
"fontSize": 36,
229231
"fontWeight": "400",
232+
"marginEnd": 20,
230233
},
231234
Object {
232235
"color": "#ffffff",
@@ -271,6 +274,7 @@ exports[`given that theme is dark and detail view is selected, should match Barr
271274
Object {
272275
"borderBottomWidth": 1,
273276
"borderColor": "#69696D",
277+
"flex": 1,
274278
"flexDirection": "row",
275279
"justifyContent": "space-between",
276280
"opacity": 1,
@@ -283,8 +287,10 @@ exports[`given that theme is dark and detail view is selected, should match Barr
283287
style={
284288
Array [
285289
Object {
290+
"flex": 1,
286291
"fontSize": 36,
287292
"fontWeight": "400",
293+
"marginEnd": 20,
288294
},
289295
Object {
290296
"color": "#ffffff",
@@ -369,7 +375,7 @@ exports[`given that theme is dark and list view is selected, should match Barric
369375
"fontSize": 40,
370376
"fontWeight": "bold",
371377
"left": 0,
372-
"marginHorizontal": 120,
378+
"marginHorizontal": 140,
373379
"position": "absolute",
374380
"right": 0,
375381
"textAlign": "center",
@@ -583,6 +589,7 @@ exports[`given that theme is dark and list view is selected, should match Barric
583589
Object {
584590
"borderBottomWidth": 1,
585591
"borderColor": "#69696D",
592+
"flex": 1,
586593
"flexDirection": "row",
587594
"justifyContent": "space-between",
588595
"opacity": 1,
@@ -596,8 +603,11 @@ exports[`given that theme is dark and list view is selected, should match Barric
596603
style={
597604
Array [
598605
Object {
606+
"flex": 1,
607+
"flexWrap": "wrap",
599608
"fontSize": 36,
600609
"fontWeight": "400",
610+
"textAlign": "left",
601611
},
602612
Object {
603613
"color": "#ffffff",
@@ -611,7 +621,10 @@ exports[`given that theme is dark and list view is selected, should match Barric
611621
style={
612622
Array [
613623
Object {
624+
"flex": 1,
625+
"flexWrap": "wrap",
614626
"fontSize": 32,
627+
"textAlign": "right",
615628
},
616629
Object {
617630
"color": "#EBEBEB",
@@ -657,6 +670,7 @@ exports[`given that theme is dark and list view is selected, should match Barric
657670
Object {
658671
"borderBottomWidth": 1,
659672
"borderColor": "#69696D",
673+
"flex": 1,
660674
"flexDirection": "row",
661675
"justifyContent": "space-between",
662676
"opacity": 1,
@@ -670,8 +684,11 @@ exports[`given that theme is dark and list view is selected, should match Barric
670684
style={
671685
Array [
672686
Object {
687+
"flex": 1,
688+
"flexWrap": "wrap",
673689
"fontSize": 36,
674690
"fontWeight": "400",
691+
"textAlign": "left",
675692
},
676693
Object {
677694
"color": "#ffffff",
@@ -685,7 +702,10 @@ exports[`given that theme is dark and list view is selected, should match Barric
685702
style={
686703
Array [
687704
Object {
705+
"flex": 1,
706+
"flexWrap": "wrap",
688707
"fontSize": 32,
708+
"textAlign": "right",
689709
},
690710
Object {
691711
"color": "#EBEBEB",
@@ -731,6 +751,7 @@ exports[`given that theme is dark and list view is selected, should match Barric
731751
Object {
732752
"borderBottomWidth": 1,
733753
"borderColor": "#69696D",
754+
"flex": 1,
734755
"flexDirection": "row",
735756
"justifyContent": "space-between",
736757
"opacity": 1,
@@ -744,8 +765,11 @@ exports[`given that theme is dark and list view is selected, should match Barric
744765
style={
745766
Array [
746767
Object {
768+
"flex": 1,
769+
"flexWrap": "wrap",
747770
"fontSize": 36,
748771
"fontWeight": "400",
772+
"textAlign": "left",
749773
},
750774
Object {
751775
"color": "#ffffff",
@@ -759,7 +783,10 @@ exports[`given that theme is dark and list view is selected, should match Barric
759783
style={
760784
Array [
761785
Object {
786+
"flex": 1,
787+
"flexWrap": "wrap",
762788
"fontSize": 32,
789+
"textAlign": "right",
763790
},
764791
Object {
765792
"color": "#EBEBEB",
@@ -914,7 +941,7 @@ exports[`given that theme is light and detail view is selected, should match Bar
914941
"fontSize": 40,
915942
"fontWeight": "bold",
916943
"left": 0,
917-
"marginHorizontal": 120,
944+
"marginHorizontal": 140,
918945
"position": "absolute",
919946
"right": 0,
920947
"textAlign": "center",
@@ -1037,6 +1064,7 @@ exports[`given that theme is light and detail view is selected, should match Bar
10371064
Object {
10381065
"borderBottomWidth": 1,
10391066
"borderColor": "#DEDEDE",
1067+
"flex": 1,
10401068
"flexDirection": "row",
10411069
"justifyContent": "space-between",
10421070
"opacity": 1,
@@ -1049,8 +1077,10 @@ exports[`given that theme is light and detail view is selected, should match Bar
10491077
style={
10501078
Array [
10511079
Object {
1080+
"flex": 1,
10521081
"fontSize": 36,
10531082
"fontWeight": "400",
1083+
"marginEnd": 20,
10541084
},
10551085
Object {
10561086
"color": "#181818",
@@ -1095,6 +1125,7 @@ exports[`given that theme is light and detail view is selected, should match Bar
10951125
Object {
10961126
"borderBottomWidth": 1,
10971127
"borderColor": "#DEDEDE",
1128+
"flex": 1,
10981129
"flexDirection": "row",
10991130
"justifyContent": "space-between",
11001131
"opacity": 1,
@@ -1107,8 +1138,10 @@ exports[`given that theme is light and detail view is selected, should match Bar
11071138
style={
11081139
Array [
11091140
Object {
1141+
"flex": 1,
11101142
"fontSize": 36,
11111143
"fontWeight": "400",
1144+
"marginEnd": 20,
11121145
},
11131146
Object {
11141147
"color": "#181818",
@@ -1193,7 +1226,7 @@ exports[`given that theme is light and list view is selected, should match Barri
11931226
"fontSize": 40,
11941227
"fontWeight": "bold",
11951228
"left": 0,
1196-
"marginHorizontal": 120,
1229+
"marginHorizontal": 140,
11971230
"position": "absolute",
11981231
"right": 0,
11991232
"textAlign": "center",
@@ -1407,6 +1440,7 @@ exports[`given that theme is light and list view is selected, should match Barri
14071440
Object {
14081441
"borderBottomWidth": 1,
14091442
"borderColor": "#DEDEDE",
1443+
"flex": 1,
14101444
"flexDirection": "row",
14111445
"justifyContent": "space-between",
14121446
"opacity": 1,
@@ -1420,8 +1454,11 @@ exports[`given that theme is light and list view is selected, should match Barri
14201454
style={
14211455
Array [
14221456
Object {
1457+
"flex": 1,
1458+
"flexWrap": "wrap",
14231459
"fontSize": 36,
14241460
"fontWeight": "400",
1461+
"textAlign": "left",
14251462
},
14261463
Object {
14271464
"color": "#181818",
@@ -1435,7 +1472,10 @@ exports[`given that theme is light and list view is selected, should match Barri
14351472
style={
14361473
Array [
14371474
Object {
1475+
"flex": 1,
1476+
"flexWrap": "wrap",
14381477
"fontSize": 32,
1478+
"textAlign": "right",
14391479
},
14401480
Object {
14411481
"color": "#69696D",
@@ -1481,6 +1521,7 @@ exports[`given that theme is light and list view is selected, should match Barri
14811521
Object {
14821522
"borderBottomWidth": 1,
14831523
"borderColor": "#DEDEDE",
1524+
"flex": 1,
14841525
"flexDirection": "row",
14851526
"justifyContent": "space-between",
14861527
"opacity": 1,
@@ -1494,8 +1535,11 @@ exports[`given that theme is light and list view is selected, should match Barri
14941535
style={
14951536
Array [
14961537
Object {
1538+
"flex": 1,
1539+
"flexWrap": "wrap",
14971540
"fontSize": 36,
14981541
"fontWeight": "400",
1542+
"textAlign": "left",
14991543
},
15001544
Object {
15011545
"color": "#181818",
@@ -1509,7 +1553,10 @@ exports[`given that theme is light and list view is selected, should match Barri
15091553
style={
15101554
Array [
15111555
Object {
1556+
"flex": 1,
1557+
"flexWrap": "wrap",
15121558
"fontSize": 32,
1559+
"textAlign": "right",
15131560
},
15141561
Object {
15151562
"color": "#69696D",
@@ -1555,6 +1602,7 @@ exports[`given that theme is light and list view is selected, should match Barri
15551602
Object {
15561603
"borderBottomWidth": 1,
15571604
"borderColor": "#DEDEDE",
1605+
"flex": 1,
15581606
"flexDirection": "row",
15591607
"justifyContent": "space-between",
15601608
"opacity": 1,
@@ -1568,8 +1616,11 @@ exports[`given that theme is light and list view is selected, should match Barri
15681616
style={
15691617
Array [
15701618
Object {
1619+
"flex": 1,
1620+
"flexWrap": "wrap",
15711621
"fontSize": 36,
15721622
"fontWeight": "400",
1623+
"textAlign": "left",
15731624
},
15741625
Object {
15751626
"color": "#181818",
@@ -1583,7 +1634,10 @@ exports[`given that theme is light and list view is selected, should match Barri
15831634
style={
15841635
Array [
15851636
Object {
1637+
"flex": 1,
1638+
"flexWrap": "wrap",
15861639
"fontSize": 32,
1640+
"textAlign": "right",
15871641
},
15881642
Object {
15891643
"color": "#69696D",

src/__tests__/components/__snapshots__/Header.test.tsx.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ exports[`given that Header is called with only title props, should match Header
3434
"fontSize": 40,
3535
"fontWeight": "bold",
3636
"left": 0,
37-
"marginHorizontal": 120,
37+
"marginHorizontal": 140,
3838
"position": "absolute",
3939
"right": 0,
4040
"textAlign": "center",
@@ -92,7 +92,7 @@ exports[`given that Header is called with title and headerLeft props, should mat
9292
"fontSize": 40,
9393
"fontWeight": "bold",
9494
"left": 0,
95-
"marginHorizontal": 120,
95+
"marginHorizontal": 140,
9696
"position": "absolute",
9797
"right": 0,
9898
"textAlign": "center",
@@ -185,7 +185,7 @@ exports[`given that Header is called with title and headerRight props, should ma
185185
"fontSize": 40,
186186
"fontWeight": "bold",
187187
"left": 0,
188-
"marginHorizontal": 120,
188+
"marginHorizontal": 140,
189189
"position": "absolute",
190190
"right": 0,
191191
"textAlign": "center",
@@ -278,7 +278,7 @@ exports[`given that Header is called with title, headerLeft and headerRight prop
278278
"fontSize": 40,
279279
"fontWeight": "bold",
280280
"left": 0,
281-
"marginHorizontal": 120,
281+
"marginHorizontal": 140,
282282
"position": "absolute",
283283
"right": 0,
284284
"textAlign": "center",

0 commit comments

Comments
 (0)