Skip to content

Commit 243b96f

Browse files
nitzanyiznitzanyiz
authored
Added gap modifier to the view component (#2802)
* Added gap modifier to the view component * Changed tests snapshot with the view component * Revert snapshot change This reverts commit 56396a8. * Changed extracted gap to be a number and not an object * updated snapshot to have gap object in the view style * reverted formatting that caused and error * Changed default gap to false
1 parent 332875d commit 243b96f

File tree

4 files changed

+119
-9
lines changed

4 files changed

+119
-9
lines changed

‎demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ exports[`AvatarScreen renders screen 1`] = `
2020
undefined,
2121
undefined,
2222
undefined,
23+
undefined,
2324
{
2425
"alignItems": "center",
2526
"flexDirection": "row",
@@ -111,6 +112,7 @@ exports[`AvatarScreen renders screen 1`] = `
111112
undefined,
112113
undefined,
113114
undefined,
115+
undefined,
114116
[
115117
{
116118
"alignItems": "center",
@@ -143,6 +145,7 @@ exports[`AvatarScreen renders screen 1`] = `
143145
undefined,
144146
undefined,
145147
undefined,
148+
undefined,
146149
{
147150
"alignItems": "center",
148151
"flexDirection": "row",
@@ -234,6 +237,7 @@ exports[`AvatarScreen renders screen 1`] = `
234237
undefined,
235238
undefined,
236239
undefined,
240+
undefined,
237241
[
238242
{
239243
"alignItems": "center",
@@ -264,6 +268,7 @@ exports[`AvatarScreen renders screen 1`] = `
264268
undefined,
265269
undefined,
266270
undefined,
271+
undefined,
267272
[
268273
{
269274
"borderRadius": 25,
@@ -326,6 +331,7 @@ exports[`AvatarScreen renders screen 1`] = `
326331
undefined,
327332
undefined,
328333
undefined,
334+
undefined,
329335
{
330336
"alignItems": "center",
331337
"flexDirection": "row",
@@ -417,6 +423,7 @@ exports[`AvatarScreen renders screen 1`] = `
417423
undefined,
418424
undefined,
419425
undefined,
426+
undefined,
420427
[
421428
{
422429
"alignItems": "center",
@@ -487,6 +494,7 @@ exports[`AvatarScreen renders screen 1`] = `
487494
undefined,
488495
undefined,
489496
undefined,
497+
undefined,
490498
[
491499
{
492500
"borderRadius": 25,
@@ -551,6 +559,7 @@ exports[`AvatarScreen renders screen 1`] = `
551559
undefined,
552560
undefined,
553561
undefined,
562+
undefined,
554563
{
555564
"alignItems": "center",
556565
"flexDirection": "row",
@@ -642,6 +651,7 @@ exports[`AvatarScreen renders screen 1`] = `
642651
undefined,
643652
undefined,
644653
undefined,
654+
undefined,
645655
[
646656
{
647657
"alignItems": "center",
@@ -722,6 +732,7 @@ exports[`AvatarScreen renders screen 1`] = `
722732
undefined,
723733
undefined,
724734
undefined,
735+
undefined,
725736
{
726737
"position": "absolute",
727738
"right": 2.322330470336313,
@@ -739,6 +750,7 @@ exports[`AvatarScreen renders screen 1`] = `
739750
undefined,
740751
undefined,
741752
undefined,
753+
undefined,
742754
{},
743755
{},
744756
{
@@ -781,6 +793,7 @@ exports[`AvatarScreen renders screen 1`] = `
781793
undefined,
782794
undefined,
783795
undefined,
796+
undefined,
784797
{
785798
"alignItems": "center",
786799
"flexDirection": "row",
@@ -872,6 +885,7 @@ exports[`AvatarScreen renders screen 1`] = `
872885
undefined,
873886
undefined,
874887
undefined,
888+
undefined,
875889
[
876890
{
877891
"alignItems": "center",
@@ -973,6 +987,7 @@ exports[`AvatarScreen renders screen 1`] = `
973987
undefined,
974988
undefined,
975989
undefined,
990+
undefined,
976991
{
977992
"bottom": 2.322330470336313,
978993
"position": "absolute",
@@ -990,6 +1005,7 @@ exports[`AvatarScreen renders screen 1`] = `
9901005
undefined,
9911006
undefined,
9921007
undefined,
1008+
undefined,
9931009
{},
9941010
{},
9951011
{
@@ -1032,6 +1048,7 @@ exports[`AvatarScreen renders screen 1`] = `
10321048
undefined,
10331049
undefined,
10341050
undefined,
1051+
undefined,
10351052
{
10361053
"alignItems": "center",
10371054
"flexDirection": "row",
@@ -1123,6 +1140,7 @@ exports[`AvatarScreen renders screen 1`] = `
11231140
undefined,
11241141
undefined,
11251142
undefined,
1143+
undefined,
11261144
[
11271145
{
11281146
"alignItems": "center",
@@ -1224,6 +1242,7 @@ exports[`AvatarScreen renders screen 1`] = `
12241242
undefined,
12251243
undefined,
12261244
undefined,
1245+
undefined,
12271246
{
12281247
"bottom": 0.8578643762690499,
12291248
"left": 0.8578643762690499,
@@ -1241,6 +1260,7 @@ exports[`AvatarScreen renders screen 1`] = `
12411260
undefined,
12421261
undefined,
12431262
undefined,
1263+
undefined,
12441264
{},
12451265
{},
12461266
{
@@ -1283,6 +1303,7 @@ exports[`AvatarScreen renders screen 1`] = `
12831303
undefined,
12841304
undefined,
12851305
undefined,
1306+
undefined,
12861307
{
12871308
"alignItems": "center",
12881309
"flexDirection": "row",
@@ -1374,6 +1395,7 @@ exports[`AvatarScreen renders screen 1`] = `
13741395
undefined,
13751396
undefined,
13761397
undefined,
1398+
undefined,
13771399
[
13781400
{
13791401
"alignItems": "center",
@@ -1409,6 +1431,7 @@ exports[`AvatarScreen renders screen 1`] = `
14091431
undefined,
14101432
undefined,
14111433
undefined,
1434+
undefined,
14121435
{
14131436
"alignItems": "center",
14141437
"borderRadius": 999,
@@ -1485,6 +1508,7 @@ exports[`AvatarScreen renders screen 1`] = `
14851508
undefined,
14861509
undefined,
14871510
undefined,
1511+
undefined,
14881512
{
14891513
"alignItems": "center",
14901514
"flexDirection": "row",
@@ -1576,6 +1600,7 @@ exports[`AvatarScreen renders screen 1`] = `
15761600
undefined,
15771601
undefined,
15781602
undefined,
1603+
undefined,
15791604
[
15801605
{
15811606
"alignItems": "center",
@@ -1677,6 +1702,7 @@ exports[`AvatarScreen renders screen 1`] = `
16771702
undefined,
16781703
undefined,
16791704
undefined,
1705+
undefined,
16801706
{
16811707
"left": 3.2512626584708375,
16821708
"position": "absolute",
@@ -1694,6 +1720,7 @@ exports[`AvatarScreen renders screen 1`] = `
16941720
undefined,
16951721
undefined,
16961722
undefined,
1723+
undefined,
16971724
{},
16981725
{},
16991726
{
@@ -1736,6 +1763,7 @@ exports[`AvatarScreen renders screen 1`] = `
17361763
undefined,
17371764
undefined,
17381765
undefined,
1766+
undefined,
17391767
{
17401768
"alignItems": "center",
17411769
"flexDirection": "row",
@@ -1827,6 +1855,7 @@ exports[`AvatarScreen renders screen 1`] = `
18271855
undefined,
18281856
undefined,
18291857
undefined,
1858+
undefined,
18301859
[
18311860
{
18321861
"alignItems": "center",
@@ -1939,6 +1968,7 @@ exports[`AvatarScreen renders screen 1`] = `
19391968
undefined,
19401969
undefined,
19411970
undefined,
1971+
undefined,
19421972
{
19431973
"position": "absolute",
19441974
"right": 0.28679656440357526,
@@ -1956,6 +1986,7 @@ exports[`AvatarScreen renders screen 1`] = `
19561986
undefined,
19571987
undefined,
19581988
undefined,
1989+
undefined,
19591990
{},
19601991
{},
19611992
{
@@ -2031,6 +2062,7 @@ exports[`AvatarScreen renders screen 1`] = `
20312062
undefined,
20322063
undefined,
20332064
undefined,
2065+
undefined,
20342066
{
20352067
"alignItems": "center",
20362068
"flexDirection": "row",
@@ -2122,6 +2154,7 @@ exports[`AvatarScreen renders screen 1`] = `
21222154
undefined,
21232155
undefined,
21242156
undefined,
2157+
undefined,
21252158
[
21262159
{
21272160
"alignItems": "center",
@@ -2215,6 +2248,7 @@ exports[`AvatarScreen renders screen 1`] = `
22152248
undefined,
22162249
undefined,
22172250
undefined,
2251+
undefined,
22182252
{
22192253
"alignItems": "center",
22202254
"flexDirection": "row",
@@ -2306,6 +2340,7 @@ exports[`AvatarScreen renders screen 1`] = `
23062340
undefined,
23072341
undefined,
23082342
undefined,
2343+
undefined,
23092344
[
23102345
{
23112346
"alignItems": "center",
@@ -2441,6 +2476,7 @@ exports[`AvatarScreen renders screen 1`] = `
24412476
undefined,
24422477
undefined,
24432478
undefined,
2479+
undefined,
24442480
{
24452481
"alignItems": "center",
24462482
"flexDirection": "row",
@@ -2532,6 +2568,7 @@ exports[`AvatarScreen renders screen 1`] = `
25322568
undefined,
25332569
undefined,
25342570
undefined,
2571+
undefined,
25352572
[
25362573
{
25372574
"alignItems": "center",
@@ -2667,6 +2704,7 @@ exports[`AvatarScreen renders screen 1`] = `
26672704
undefined,
26682705
undefined,
26692706
undefined,
2707+
undefined,
26702708
{
26712709
"alignItems": "center",
26722710
"flexDirection": "row",
@@ -2758,6 +2796,7 @@ exports[`AvatarScreen renders screen 1`] = `
27582796
undefined,
27592797
undefined,
27602798
undefined,
2799+
undefined,
27612800
[
27622801
{
27632802
"alignItems": "center",
@@ -2851,6 +2890,7 @@ exports[`AvatarScreen renders screen 1`] = `
28512890
undefined,
28522891
undefined,
28532892
undefined,
2893+
undefined,
28542894
{
28552895
"alignItems": "center",
28562896
"flexDirection": "row",
@@ -2942,6 +2982,7 @@ exports[`AvatarScreen renders screen 1`] = `
29422982
undefined,
29432983
undefined,
29442984
undefined,
2985+
undefined,
29452986
[
29462987
{
29472988
"alignItems": "center",
@@ -3021,6 +3062,7 @@ exports[`AvatarScreen renders screen 1`] = `
30213062
undefined,
30223063
undefined,
30233064
undefined,
3065+
undefined,
30243066
{},
30253067
{},
30263068
{},
@@ -3041,6 +3083,7 @@ exports[`AvatarScreen renders screen 1`] = `
30413083
undefined,
30423084
undefined,
30433085
undefined,
3086+
undefined,
30443087
{},
30453088
{},
30463089
{

‎src/commons/__tests__/modifiers.spec.js

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import PropTypes from 'prop-types';
2-
import {ThemeManager, Colors, Typography, BorderRadiuses} from '../../style';
2+
import {ThemeManager, Colors, Typography, BorderRadiuses, Spacings} from '../../style';
33
import * as uut from '../modifiers';
44

55
describe('Modifiers', () => {
@@ -329,6 +329,22 @@ describe('Modifiers', () => {
329329
left: true,
330330
'bg-red10': false
331331
});
332+
expect(uut.extractModifierProps({
333+
'paddingL-20': true,
334+
'gap-10': true,
335+
other: 'some-value'
336+
})).toEqual({
337+
'paddingL-20': true,
338+
'gap-10': true
339+
});
340+
expect(uut.extractModifierProps({
341+
'paddingL-20': true,
342+
'gap-s3': true,
343+
other: 'some-value'
344+
})).toEqual({
345+
'paddingL-20': true,
346+
'gap-s3': true
347+
});
332348
});
333349
});
334350

@@ -415,4 +431,23 @@ describe('Modifiers', () => {
415431
expect(modifiers.borderRadius).toBeUndefined();
416432
});
417433
});
434+
435+
describe('extractGapValues', () => {
436+
it('Should return gap 10', () => {
437+
const gap = uut.extractGapValues({'gap-10': true});
438+
expect(gap).toEqual(10);
439+
});
440+
it('Should return gap 20', () => {
441+
const gap = uut.extractGapValues({'gap-20': true});
442+
expect(gap).toEqual(20);
443+
});
444+
it('Should return gap spacing s3', () => {
445+
const gap = uut.extractGapValues({'gap-s3': true});
446+
expect(gap).toEqual(Spacings.s3);
447+
});
448+
it('Should return gap spacing s10', () => {
449+
const gap = uut.extractGapValues({'gap-s10': true});
450+
expect(gap).toEqual(Spacings.s10);
451+
});
452+
});
418453
});

0 commit comments

Comments
 (0)