react-native-unistyles 1.0.0-beta.6 → 1.0.0-rc.2
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +12 -589
- package/lib/commonjs/createUnistyles.js +6 -13
- package/lib/commonjs/createUnistyles.js.map +1 -1
- package/lib/commonjs/hooks/useDimensions.js +1 -10
- package/lib/commonjs/hooks/useDimensions.js.map +1 -1
- package/lib/commonjs/utils/index.js +43 -0
- package/lib/commonjs/utils/index.js.map +1 -1
- package/lib/module/createUnistyles.js +7 -14
- package/lib/module/createUnistyles.js.map +1 -1
- package/lib/module/hooks/useDimensions.js +1 -10
- package/lib/module/hooks/useDimensions.js.map +1 -1
- package/lib/module/utils/index.js +2 -1
- package/lib/module/utils/index.js.map +1 -1
- package/lib/typescript/src/createUnistyles.d.ts +2 -5
- package/lib/typescript/src/createUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useDimensions.d.ts.map +1 -1
- package/lib/typescript/src/types/mediaQueries.d.ts +7 -1
- package/lib/typescript/src/types/mediaQueries.d.ts.map +1 -1
- package/lib/typescript/src/utils/index.d.ts +2 -1
- package/lib/typescript/src/utils/index.d.ts.map +1 -1
- package/package.json +13 -10
- package/src/__tests__/createUnistyles.spec.tsx +192 -0
- package/src/createUnistyles.ts +8 -16
- package/src/hooks/useDimensions.ts +1 -8
- package/src/types/mediaQueries.ts +8 -67
- package/src/utils/index.ts +9 -1
- package/lib/commonjs/utils/breakpoints.spec.js +0 -154
- package/lib/commonjs/utils/breakpoints.spec.js.map +0 -1
- package/lib/commonjs/utils/mediaQueries.spec.js +0 -220
- package/lib/commonjs/utils/mediaQueries.spec.js.map +0 -1
- package/lib/commonjs/utils/styles.spec.js +0 -174
- package/lib/commonjs/utils/styles.spec.js.map +0 -1
- package/lib/module/utils/breakpoints.spec.js +0 -152
- package/lib/module/utils/breakpoints.spec.js.map +0 -1
- package/lib/module/utils/mediaQueries.spec.js +0 -218
- package/lib/module/utils/mediaQueries.spec.js.map +0 -1
- package/lib/module/utils/styles.spec.js +0 -172
- package/lib/module/utils/styles.spec.js.map +0 -1
- package/lib/typescript/src/utils/breakpoints.spec.d.ts +0 -2
- package/lib/typescript/src/utils/breakpoints.spec.d.ts.map +0 -1
- package/lib/typescript/src/utils/mediaQueries.spec.d.ts +0 -2
- package/lib/typescript/src/utils/mediaQueries.spec.d.ts.map +0 -1
- package/lib/typescript/src/utils/styles.spec.d.ts +0 -2
- package/lib/typescript/src/utils/styles.spec.d.ts.map +0 -1
package/src/utils/index.ts
CHANGED
@@ -1,3 +1,11 @@
|
|
1
1
|
export { normalizeStyles } from './normalizeStyles'
|
2
|
-
export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints } from './breakpoints'
|
2
|
+
export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints'
|
3
3
|
export { proxifyFunction, parseStyle } from './styles'
|
4
|
+
export {
|
5
|
+
extractValues,
|
6
|
+
getKeyForCustomMediaQuery,
|
7
|
+
isMediaQuery,
|
8
|
+
isWithinTheHeight,
|
9
|
+
isWithinTheWidth,
|
10
|
+
isWithinTheWidthAndHeight
|
11
|
+
} from './mediaQueries'
|
@@ -1,154 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _breakpoints = require("./breakpoints");
|
4
|
-
describe('breakpoints', () => {
|
5
|
-
describe('sortAndValidateBreakpoints', () => {
|
6
|
-
it('should throw error for empty breakpoints', () => {
|
7
|
-
const breakpoints = {};
|
8
|
-
expect(() => (0, _breakpoints.sortAndValidateBreakpoints)(breakpoints)).toThrow();
|
9
|
-
});
|
10
|
-
it('should throw error for breakpoints that don\'t start with 0', () => {
|
11
|
-
const breakpoints = {
|
12
|
-
sm: -1
|
13
|
-
};
|
14
|
-
expect(() => (0, _breakpoints.sortAndValidateBreakpoints)(breakpoints)).toThrow();
|
15
|
-
});
|
16
|
-
it('should return same order for sorted elements', () => {
|
17
|
-
const breakpoints = {
|
18
|
-
sm: 0,
|
19
|
-
md: 200,
|
20
|
-
lg: 300,
|
21
|
-
xl: 500
|
22
|
-
};
|
23
|
-
expect((0, _breakpoints.sortAndValidateBreakpoints)(breakpoints)).toEqual(breakpoints);
|
24
|
-
});
|
25
|
-
it('should sort the order of breakpoints', () => {
|
26
|
-
const breakpoints = {
|
27
|
-
md: 200,
|
28
|
-
sm: 0,
|
29
|
-
lg: 300,
|
30
|
-
xl: 500
|
31
|
-
};
|
32
|
-
expect((0, _breakpoints.sortAndValidateBreakpoints)(breakpoints)).toEqual({
|
33
|
-
sm: 0,
|
34
|
-
md: 200,
|
35
|
-
lg: 300,
|
36
|
-
xl: 500
|
37
|
-
});
|
38
|
-
});
|
39
|
-
it('should throw errors for duplicated values', () => {
|
40
|
-
const breakpoints = {
|
41
|
-
md: 200,
|
42
|
-
sm: 0,
|
43
|
-
lg: 300,
|
44
|
-
xl: 300
|
45
|
-
};
|
46
|
-
expect(() => (0, _breakpoints.sortAndValidateBreakpoints)(breakpoints)).toThrow();
|
47
|
-
});
|
48
|
-
});
|
49
|
-
describe('getBreakpointFromScreenWidth', () => {
|
50
|
-
it('should return correct breakpoints based on screen width', () => {
|
51
|
-
const breakpoints = {
|
52
|
-
xs: 0,
|
53
|
-
sm: 300,
|
54
|
-
md: 500,
|
55
|
-
xl: 1200
|
56
|
-
};
|
57
|
-
const breakpointPairs = Object.entries(breakpoints);
|
58
|
-
expect((0, _breakpoints.getBreakpointFromScreenWidth)(0, breakpointPairs)).toEqual('xs');
|
59
|
-
expect((0, _breakpoints.getBreakpointFromScreenWidth)(20, breakpointPairs)).toEqual('xs');
|
60
|
-
expect((0, _breakpoints.getBreakpointFromScreenWidth)(100, breakpointPairs)).toEqual('xs');
|
61
|
-
expect((0, _breakpoints.getBreakpointFromScreenWidth)(101, breakpointPairs)).toEqual('xs');
|
62
|
-
expect((0, _breakpoints.getBreakpointFromScreenWidth)(250, breakpointPairs)).toEqual('xs');
|
63
|
-
expect((0, _breakpoints.getBreakpointFromScreenWidth)(300, breakpointPairs)).toEqual('sm');
|
64
|
-
expect((0, _breakpoints.getBreakpointFromScreenWidth)(499, breakpointPairs)).toEqual('sm');
|
65
|
-
expect((0, _breakpoints.getBreakpointFromScreenWidth)(500, breakpointPairs)).toEqual('md');
|
66
|
-
expect((0, _breakpoints.getBreakpointFromScreenWidth)(799, breakpointPairs)).toEqual('md');
|
67
|
-
expect((0, _breakpoints.getBreakpointFromScreenWidth)(1200, breakpointPairs)).toEqual('xl');
|
68
|
-
expect((0, _breakpoints.getBreakpointFromScreenWidth)(2000, breakpointPairs)).toEqual('xl');
|
69
|
-
});
|
70
|
-
});
|
71
|
-
describe('getValueForBreakpoint', () => {
|
72
|
-
it('should prioritize custom media query', () => {
|
73
|
-
const breakpoint = 'sm';
|
74
|
-
const breakpoints = {
|
75
|
-
xs: 0,
|
76
|
-
sm: 200,
|
77
|
-
md: 500
|
78
|
-
};
|
79
|
-
const breakpointPairs = Object.entries(breakpoints);
|
80
|
-
const style = {
|
81
|
-
':w[, 200]': 'green',
|
82
|
-
':w[201]': 'orange',
|
83
|
-
sm: 'pink'
|
84
|
-
};
|
85
|
-
const screenSize = {
|
86
|
-
width: 200,
|
87
|
-
height: 800
|
88
|
-
};
|
89
|
-
expect((0, _breakpoints.getValueForBreakpoint)(style, breakpoint, screenSize, breakpointPairs)).toEqual('green');
|
90
|
-
});
|
91
|
-
});
|
92
|
-
it('should match breakpoint if media query doesnt exist', () => {
|
93
|
-
const breakpoint = 'md';
|
94
|
-
const breakpoints = {
|
95
|
-
xs: 0,
|
96
|
-
sm: 200,
|
97
|
-
md: 500
|
98
|
-
};
|
99
|
-
const breakpointPairs = Object.entries(breakpoints);
|
100
|
-
const style = {
|
101
|
-
':w[, 200]': 'green',
|
102
|
-
':w[201, 499]': 'orange',
|
103
|
-
sm: 'pink',
|
104
|
-
md: 'red'
|
105
|
-
};
|
106
|
-
const screenSize = {
|
107
|
-
width: 500,
|
108
|
-
height: 1200
|
109
|
-
};
|
110
|
-
expect((0, _breakpoints.getValueForBreakpoint)(style, breakpoint, screenSize, breakpointPairs)).toEqual('red');
|
111
|
-
});
|
112
|
-
it('should match breakpoint even if value is undefined', () => {
|
113
|
-
const breakpoint = 'md';
|
114
|
-
const breakpoints = {
|
115
|
-
xs: 0,
|
116
|
-
sm: 200,
|
117
|
-
md: 500
|
118
|
-
};
|
119
|
-
const breakpointPairs = Object.entries(breakpoints);
|
120
|
-
const style = {
|
121
|
-
':w[, 200]': 'green',
|
122
|
-
':w[201, 499]': 'orange',
|
123
|
-
sm: 'pink',
|
124
|
-
md: undefined
|
125
|
-
};
|
126
|
-
const screenSize = {
|
127
|
-
width: 500,
|
128
|
-
height: 1200
|
129
|
-
};
|
130
|
-
expect((0, _breakpoints.getValueForBreakpoint)(style, breakpoint, screenSize, breakpointPairs)).toEqual(undefined);
|
131
|
-
});
|
132
|
-
it('should match lower breakpoint to match css cascading', () => {
|
133
|
-
const breakpoint = 'xl';
|
134
|
-
const breakpoints = {
|
135
|
-
xs: 0,
|
136
|
-
sm: 200,
|
137
|
-
md: 500,
|
138
|
-
xl: 600
|
139
|
-
};
|
140
|
-
const breakpointPairs = Object.entries(breakpoints);
|
141
|
-
const style = {
|
142
|
-
':w[, 200]': 'green',
|
143
|
-
':w[201, 499]': 'orange',
|
144
|
-
sm: 'pink',
|
145
|
-
md: 'red'
|
146
|
-
};
|
147
|
-
const screenSize = {
|
148
|
-
width: 500,
|
149
|
-
height: 1200
|
150
|
-
};
|
151
|
-
expect((0, _breakpoints.getValueForBreakpoint)(style, breakpoint, screenSize, breakpointPairs)).toEqual('red');
|
152
|
-
});
|
153
|
-
});
|
154
|
-
//# sourceMappingURL=breakpoints.spec.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["_breakpoints","require","describe","it","breakpoints","expect","sortAndValidateBreakpoints","toThrow","sm","md","lg","xl","toEqual","xs","breakpointPairs","Object","entries","getBreakpointFromScreenWidth","breakpoint","style","screenSize","width","height","getValueForBreakpoint","undefined"],"sourceRoot":"../../../src","sources":["utils/breakpoints.spec.ts"],"mappings":"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"}
|
@@ -1,220 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _mediaQueries = require("./mediaQueries");
|
4
|
-
describe('utils', () => {
|
5
|
-
describe('extractValues', () => {
|
6
|
-
it('should correctly extract a width with both bounds', () => {
|
7
|
-
const mediaQuery = 'w[100, 600]';
|
8
|
-
expect((0, _mediaQueries.extractValues)(mediaQuery)).toEqual([100, 600]);
|
9
|
-
});
|
10
|
-
it('should correctly extract a width with lower bound equal to 0', () => {
|
11
|
-
const mediaQuery = 'w[0, 400]';
|
12
|
-
expect((0, _mediaQueries.extractValues)(mediaQuery)).toEqual([0, 400]);
|
13
|
-
});
|
14
|
-
it('should correctly extract a height with single value', () => {
|
15
|
-
const mediaQuery = 'h[700]';
|
16
|
-
expect((0, _mediaQueries.extractValues)(mediaQuery)).toEqual([700]);
|
17
|
-
});
|
18
|
-
it('should correctly extract a height with lower bound equal to 0', () => {
|
19
|
-
const mediaQuery = 'h[0,]';
|
20
|
-
expect((0, _mediaQueries.extractValues)(mediaQuery)).toEqual([0]);
|
21
|
-
});
|
22
|
-
it('should correctly extract a width with no lower bound', () => {
|
23
|
-
const mediaQuery = 'w[,100]';
|
24
|
-
expect((0, _mediaQueries.extractValues)(mediaQuery)).toEqual([0, 100]);
|
25
|
-
});
|
26
|
-
});
|
27
|
-
describe('isWithinTheWidth', () => {
|
28
|
-
it('should return true if the screen width is within the media query', () => {
|
29
|
-
const pairs = [{
|
30
|
-
width: 200,
|
31
|
-
query: 'w[120]'
|
32
|
-
}, {
|
33
|
-
width: 100,
|
34
|
-
query: 'w[,500]'
|
35
|
-
}, {
|
36
|
-
width: 0,
|
37
|
-
query: 'w[,500]'
|
38
|
-
}, {
|
39
|
-
width: 300,
|
40
|
-
query: 'w[300,500]'
|
41
|
-
}];
|
42
|
-
pairs.forEach(_ref => {
|
43
|
-
let {
|
44
|
-
width,
|
45
|
-
query
|
46
|
-
} = _ref;
|
47
|
-
expect((0, _mediaQueries.isWithinTheWidth)(query, width)).toEqual(true);
|
48
|
-
});
|
49
|
-
});
|
50
|
-
it('should return false if the screen width is outside the media query', () => {
|
51
|
-
const pairs = [{
|
52
|
-
width: 120,
|
53
|
-
query: 'w[200]'
|
54
|
-
}, {
|
55
|
-
width: 501,
|
56
|
-
query: 'w[,500]'
|
57
|
-
}, {
|
58
|
-
width: 700,
|
59
|
-
query: 'w[200,500]'
|
60
|
-
}];
|
61
|
-
pairs.forEach(_ref2 => {
|
62
|
-
let {
|
63
|
-
width,
|
64
|
-
query
|
65
|
-
} = _ref2;
|
66
|
-
expect((0, _mediaQueries.isWithinTheWidth)(query, width)).toEqual(false);
|
67
|
-
});
|
68
|
-
});
|
69
|
-
});
|
70
|
-
describe('isWithinTheHeight', () => {
|
71
|
-
it('should return true if the screen height is within the media query', () => {
|
72
|
-
const pairs = [{
|
73
|
-
height: 200,
|
74
|
-
query: 'h[120]'
|
75
|
-
}, {
|
76
|
-
height: 100,
|
77
|
-
query: 'h[,500]'
|
78
|
-
}, {
|
79
|
-
height: 0,
|
80
|
-
query: 'h[,500]'
|
81
|
-
}, {
|
82
|
-
height: 300,
|
83
|
-
query: 'h[300,500]'
|
84
|
-
}];
|
85
|
-
pairs.forEach(_ref3 => {
|
86
|
-
let {
|
87
|
-
height,
|
88
|
-
query
|
89
|
-
} = _ref3;
|
90
|
-
expect((0, _mediaQueries.isWithinTheHeight)(query, height)).toEqual(true);
|
91
|
-
});
|
92
|
-
});
|
93
|
-
it('should return false if the screen height is outside the media query', () => {
|
94
|
-
const pairs = [{
|
95
|
-
height: 120,
|
96
|
-
query: 'h[200]'
|
97
|
-
}, {
|
98
|
-
height: 501,
|
99
|
-
query: 'h[,500]'
|
100
|
-
}, {
|
101
|
-
height: 700,
|
102
|
-
query: 'h[200,500]'
|
103
|
-
}];
|
104
|
-
pairs.forEach(_ref4 => {
|
105
|
-
let {
|
106
|
-
height,
|
107
|
-
query
|
108
|
-
} = _ref4;
|
109
|
-
expect((0, _mediaQueries.isWithinTheHeight)(query, height)).toEqual(false);
|
110
|
-
});
|
111
|
-
});
|
112
|
-
});
|
113
|
-
describe('isWithinTheWidthAndHeight', () => {
|
114
|
-
it('should return true if the screen width and height are within the media query', () => {
|
115
|
-
const pairs = [{
|
116
|
-
screenSize: {
|
117
|
-
width: 200,
|
118
|
-
height: 600
|
119
|
-
},
|
120
|
-
query: 'w[, 200]:h[600]'
|
121
|
-
}, {
|
122
|
-
screenSize: {
|
123
|
-
width: 200,
|
124
|
-
height: 600
|
125
|
-
},
|
126
|
-
query: 'w[110]:h[400]'
|
127
|
-
}, {
|
128
|
-
screenSize: {
|
129
|
-
width: 400,
|
130
|
-
height: 800
|
131
|
-
},
|
132
|
-
query: 'w[400, 800]:h[400, 800]'
|
133
|
-
}];
|
134
|
-
pairs.forEach(_ref5 => {
|
135
|
-
let {
|
136
|
-
screenSize,
|
137
|
-
query
|
138
|
-
} = _ref5;
|
139
|
-
expect((0, _mediaQueries.isWithinTheWidthAndHeight)(query, screenSize)).toEqual(true);
|
140
|
-
});
|
141
|
-
});
|
142
|
-
it('should return false if the screen width and height are outside the media query', () => {
|
143
|
-
const pairs = [{
|
144
|
-
screenSize: {
|
145
|
-
width: 200,
|
146
|
-
height: 600
|
147
|
-
},
|
148
|
-
query: 'w[, 220]:h[620]'
|
149
|
-
}, {
|
150
|
-
screenSize: {
|
151
|
-
width: 200,
|
152
|
-
height: 600
|
153
|
-
},
|
154
|
-
query: 'w[290]:h[400]'
|
155
|
-
}, {
|
156
|
-
screenSize: {
|
157
|
-
width: 400,
|
158
|
-
height: 800
|
159
|
-
},
|
160
|
-
query: 'w[, 800]:h[, 700]'
|
161
|
-
}];
|
162
|
-
pairs.forEach(_ref6 => {
|
163
|
-
let {
|
164
|
-
screenSize,
|
165
|
-
query
|
166
|
-
} = _ref6;
|
167
|
-
expect((0, _mediaQueries.isWithinTheWidthAndHeight)(query, screenSize)).toEqual(false);
|
168
|
-
});
|
169
|
-
});
|
170
|
-
});
|
171
|
-
describe('isMediaQuery', () => {
|
172
|
-
it('should detect correct media queries', () => {
|
173
|
-
const correctMediaQueries = [':w[100]', ':w[100, 200]', ':w[, 300]', ':h[200]', ':h[0, 500]', ':h[, 750]', ':w[100]:h[200]', ':h[100]:w[200]', ':h[100, 200]:w[,400]', ':w[200]:h[200, 400]'];
|
174
|
-
correctMediaQueries.forEach(query => {
|
175
|
-
expect((0, _mediaQueries.isMediaQuery)(query)).toEqual(true);
|
176
|
-
});
|
177
|
-
});
|
178
|
-
it('should detect incorrect media queries', () => {
|
179
|
-
const incorrectMediaQueries = [':w100]', ':w[100, 200', ':p[, 300]', ':&[200]', ':h[0 500]', ':h[p, 750]', ':w[0]:l[200]', ':[100]:w[200]', ':h(100, 200):w[400]', ':w[2OO]:h[200, 400]', '', 'x', '>300', ']]w200[[', ':w[ 100]', ':w[ , 300]', ':w[ , 200]:h[ 200 , 400]'];
|
180
|
-
incorrectMediaQueries.forEach(query => {
|
181
|
-
expect((0, _mediaQueries.isMediaQuery)(query)).toEqual(false);
|
182
|
-
});
|
183
|
-
});
|
184
|
-
});
|
185
|
-
describe('getKeyForCustomMediaQuery', () => {
|
186
|
-
it('should return a key for string value based on media query', () => {
|
187
|
-
const mediaQueries = [['w[,200]', 'orange'], ['w[300, 400]', 'pink'], ['w[500, 600]', 'red']];
|
188
|
-
const screenSize = {
|
189
|
-
width: 300,
|
190
|
-
height: 700
|
191
|
-
};
|
192
|
-
expect((0, _mediaQueries.getKeyForCustomMediaQuery)(mediaQueries, screenSize)).toEqual('w[300, 400]');
|
193
|
-
});
|
194
|
-
it('should return a key for number value based on media query', () => {
|
195
|
-
const mediaQueries = [['w[,200]', 200], ['w[250]', 300]];
|
196
|
-
const screenSize = {
|
197
|
-
width: 300,
|
198
|
-
height: 700
|
199
|
-
};
|
200
|
-
expect((0, _mediaQueries.getKeyForCustomMediaQuery)(mediaQueries, screenSize)).toEqual('w[250]');
|
201
|
-
});
|
202
|
-
it('should return undefined for no match', () => {
|
203
|
-
const mediaQueries = [['w[,400]', 'green'], ['w[500, 999]', 'olive'], ['w[1000]', 'red']];
|
204
|
-
const screenSize = {
|
205
|
-
width: 450,
|
206
|
-
height: 1000
|
207
|
-
};
|
208
|
-
expect((0, _mediaQueries.getKeyForCustomMediaQuery)(mediaQueries, screenSize)).toEqual(undefined);
|
209
|
-
});
|
210
|
-
it('should handle correctly complex media queries', () => {
|
211
|
-
const mediaQueries = [['w[,300]:h[200,700]', 200], ['w[250]:h[701]', 300], ['w[200]', 500]];
|
212
|
-
const screenSize = {
|
213
|
-
width: 300,
|
214
|
-
height: 700
|
215
|
-
};
|
216
|
-
expect((0, _mediaQueries.getKeyForCustomMediaQuery)(mediaQueries, screenSize)).toEqual('w[,300]:h[200,700]');
|
217
|
-
});
|
218
|
-
});
|
219
|
-
});
|
220
|
-
//# sourceMappingURL=mediaQueries.spec.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["_mediaQueries","require","describe","it","mediaQuery","expect","extractValues","toEqual","pairs","width","query","forEach","_ref","isWithinTheWidth","_ref2","height","_ref3","isWithinTheHeight","_ref4","screenSize","_ref5","isWithinTheWidthAndHeight","_ref6","correctMediaQueries","isMediaQuery","incorrectMediaQueries","mediaQueries","getKeyForCustomMediaQuery","undefined"],"sourceRoot":"../../../src","sources":["utils/mediaQueries.spec.ts"],"mappings":"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"}
|
@@ -1,174 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _styles = require("./styles");
|
4
|
-
describe('styles', () => {
|
5
|
-
describe('proxifyFunction', () => {
|
6
|
-
it('should parse style for dynamic function', () => {
|
7
|
-
const screenSize = {
|
8
|
-
width: 400,
|
9
|
-
height: 800
|
10
|
-
};
|
11
|
-
const breakpoint = 'sm';
|
12
|
-
const breakpoints = {
|
13
|
-
xs: 0,
|
14
|
-
sm: 400,
|
15
|
-
md: 800
|
16
|
-
};
|
17
|
-
const breakpointPairs = Object.entries(breakpoints);
|
18
|
-
const dynamicFunction = isEven => ({
|
19
|
-
backgroundColor: {
|
20
|
-
sm: isEven ? 'green' : 'red',
|
21
|
-
md: isEven ? 'orange' : 'pink'
|
22
|
-
}
|
23
|
-
});
|
24
|
-
expect((0, _styles.proxifyFunction)(dynamicFunction, breakpoint, screenSize, breakpointPairs)(true)).toEqual({
|
25
|
-
backgroundColor: 'green'
|
26
|
-
});
|
27
|
-
});
|
28
|
-
it('should return proxified function for custom media query', () => {
|
29
|
-
const screenSize = {
|
30
|
-
width: 400,
|
31
|
-
height: 800
|
32
|
-
};
|
33
|
-
const breakpoint = 'sm';
|
34
|
-
const breakpoints = {
|
35
|
-
xs: 0,
|
36
|
-
sm: 400,
|
37
|
-
md: 800
|
38
|
-
};
|
39
|
-
const breakpointPairs = Object.entries(breakpoints);
|
40
|
-
const dynamicFunction = isEven => ({
|
41
|
-
backgroundColor: {
|
42
|
-
':w[,399]': isEven ? 'green' : 'red',
|
43
|
-
':w[400]': isEven ? 'orange' : 'pink'
|
44
|
-
}
|
45
|
-
});
|
46
|
-
expect((0, _styles.proxifyFunction)(dynamicFunction, breakpoint, screenSize, breakpointPairs)(false)).toEqual({
|
47
|
-
backgroundColor: 'pink'
|
48
|
-
});
|
49
|
-
});
|
50
|
-
it('should return same function for no breakpoints nor media queries', () => {
|
51
|
-
const screenSize = {
|
52
|
-
width: 400,
|
53
|
-
height: 800
|
54
|
-
};
|
55
|
-
const breakpoint = 'sm';
|
56
|
-
const breakpoints = {
|
57
|
-
xs: 0,
|
58
|
-
sm: 400,
|
59
|
-
md: 800
|
60
|
-
};
|
61
|
-
const breakpointPairs = Object.entries(breakpoints);
|
62
|
-
const dynamicFunction = isEven => ({
|
63
|
-
backgroundColor: isEven ? 'pink' : 'purple'
|
64
|
-
});
|
65
|
-
expect((0, _styles.proxifyFunction)(dynamicFunction, breakpoint, screenSize, breakpointPairs)(false)).toEqual({
|
66
|
-
backgroundColor: 'purple'
|
67
|
-
});
|
68
|
-
});
|
69
|
-
});
|
70
|
-
describe('parseStyle', () => {
|
71
|
-
it('should correctly parse styles', () => {
|
72
|
-
const screenSize = {
|
73
|
-
width: 400,
|
74
|
-
height: 800
|
75
|
-
};
|
76
|
-
const breakpoint = 'sm';
|
77
|
-
const breakpoints = {
|
78
|
-
xs: 0,
|
79
|
-
sm: 400,
|
80
|
-
md: 800
|
81
|
-
};
|
82
|
-
const breakpointPairs = Object.entries(breakpoints);
|
83
|
-
const style = {
|
84
|
-
fontSize: {
|
85
|
-
sm: 12,
|
86
|
-
md: 20
|
87
|
-
},
|
88
|
-
backgroundColor: {
|
89
|
-
xs: 'pink',
|
90
|
-
md: 'orange'
|
91
|
-
},
|
92
|
-
fontWeight: 'bold'
|
93
|
-
};
|
94
|
-
const parsedStyles = (0, _styles.parseStyle)(style, breakpoint, screenSize, breakpointPairs);
|
95
|
-
expect(parsedStyles).toEqual({
|
96
|
-
fontSize: 12,
|
97
|
-
backgroundColor: 'pink',
|
98
|
-
fontWeight: 'bold'
|
99
|
-
});
|
100
|
-
});
|
101
|
-
it('should correctly parse transform styles', () => {
|
102
|
-
const screenSize = {
|
103
|
-
width: 400,
|
104
|
-
height: 800
|
105
|
-
};
|
106
|
-
const breakpoint = 'sm';
|
107
|
-
const breakpoints = {
|
108
|
-
xs: 0,
|
109
|
-
sm: 400,
|
110
|
-
md: 800
|
111
|
-
};
|
112
|
-
const breakpointPairs = Object.entries(breakpoints);
|
113
|
-
const style = {
|
114
|
-
transform: [{
|
115
|
-
translateX: {
|
116
|
-
sm: 120,
|
117
|
-
md: 200
|
118
|
-
},
|
119
|
-
translateY: 200
|
120
|
-
}]
|
121
|
-
};
|
122
|
-
const parsedStyles = (0, _styles.parseStyle)(style, breakpoint, screenSize, breakpointPairs);
|
123
|
-
expect(parsedStyles).toEqual({
|
124
|
-
transform: [{
|
125
|
-
translateX: 120,
|
126
|
-
translateY: 200
|
127
|
-
}]
|
128
|
-
});
|
129
|
-
});
|
130
|
-
it('should correctly parse shadowOffset styles', () => {
|
131
|
-
const screenSize = {
|
132
|
-
width: 400,
|
133
|
-
height: 800
|
134
|
-
};
|
135
|
-
const breakpoint = 'sm';
|
136
|
-
const breakpoints = {
|
137
|
-
xs: 0,
|
138
|
-
sm: 400,
|
139
|
-
md: 800
|
140
|
-
};
|
141
|
-
const breakpointPairs = Object.entries(breakpoints);
|
142
|
-
const style = {
|
143
|
-
shadowOffset: {
|
144
|
-
width: 0,
|
145
|
-
height: 4
|
146
|
-
}
|
147
|
-
};
|
148
|
-
const styleWithBreakpoints = {
|
149
|
-
shadowOffset: {
|
150
|
-
width: 0,
|
151
|
-
height: {
|
152
|
-
sm: 10,
|
153
|
-
md: 20
|
154
|
-
}
|
155
|
-
}
|
156
|
-
};
|
157
|
-
const parsedStyles = (0, _styles.parseStyle)(style, breakpoint, screenSize, breakpointPairs);
|
158
|
-
const parsedStylesWithBreakpoints = (0, _styles.parseStyle)(styleWithBreakpoints, breakpoint, screenSize, breakpointPairs);
|
159
|
-
expect(parsedStyles).toEqual({
|
160
|
-
shadowOffset: {
|
161
|
-
width: 0,
|
162
|
-
height: 4
|
163
|
-
}
|
164
|
-
});
|
165
|
-
expect(parsedStylesWithBreakpoints).toEqual({
|
166
|
-
shadowOffset: {
|
167
|
-
width: 0,
|
168
|
-
height: 10
|
169
|
-
}
|
170
|
-
});
|
171
|
-
});
|
172
|
-
});
|
173
|
-
});
|
174
|
-
//# sourceMappingURL=styles.spec.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["_styles","require","describe","it","screenSize","width","height","breakpoint","breakpoints","xs","sm","md","breakpointPairs","Object","entries","dynamicFunction","isEven","backgroundColor","expect","proxifyFunction","toEqual","style","fontSize","fontWeight","parsedStyles","parseStyle","transform","translateX","translateY","shadowOffset","styleWithBreakpoints","parsedStylesWithBreakpoints"],"sourceRoot":"../../../src","sources":["utils/styles.spec.ts"],"mappings":";;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAIAC,QAAQ,CAAC,QAAQ,EAAE,MAAM;EACrBA,QAAQ,CAAC,iBAAiB,EAAE,MAAM;IAC9BC,EAAE,CAAC,yCAAyC,EAAE,MAAM;MAChD,MAAMC,UAAsB,GAAG;QAC3BC,KAAK,EAAE,GAAG;QACVC,MAAM,EAAE;MACZ,CAAC;MACD,MAAMC,UAAU,GAAG,IAAI;MACvB,MAAMC,WAAW,GAAG;QAChBC,EAAE,EAAE,CAAC;QACLC,EAAE,EAAE,GAAG;QACPC,EAAE,EAAE;MACR,CAAC;MACD,MAAMC,eAAe,GAAGC,MAAM,CACzBC,OAAO,CAACN,WAAW,CAAgD;MACxE,MAAMO,eAAe,GAAIC,MAAe,KAAM;QAC1CC,eAAe,EAAE;UACbP,EAAE,EAAEM,MAAM,GACJ,OAAO,GACP,KAAK;UACXL,EAAE,EAAEK,MAAM,GACJ,QAAQ,GACR;QACV;MACJ,CAAC,CAAC;MAEFE,MAAM,CAAC,IAAAC,uBAAe,EAACJ,eAAe,EAAER,UAAU,EAAEH,UAAU,EAAEQ,eAAe,CAAC,CAAC,IAAI,CAAC,CAAC,CAACQ,OAAO,CAAC;QAC5FH,eAAe,EAAE;MACrB,CAAC,CAAC;IACN,CAAC,CAAC;IAEFd,EAAE,CAAC,yDAAyD,EAAE,MAAM;MAChE,MAAMC,UAAsB,GAAG;QAC3BC,KAAK,EAAE,GAAG;QACVC,MAAM,EAAE;MACZ,CAAC;MACD,MAAMC,UAAU,GAAG,IAAI;MACvB,MAAMC,WAAW,GAAG;QAChBC,EAAE,EAAE,CAAC;QACLC,EAAE,EAAE,GAAG;QACPC,EAAE,EAAE;MACR,CAAC;MACD,MAAMC,eAAe,GAAGC,MAAM,CACzBC,OAAO,CAACN,WAAW,CAAgD;MACxE,MAAMO,eAAe,GAAIC,MAAe,KAAM;QAC1CC,eAAe,EAAE;UACb,UAAU,EAAED,MAAM,GACZ,OAAO,GACP,KAAK;UACX,SAAS,EAAEA,MAAM,GACX,QAAQ,GACR;QACV;MACJ,CAAC,CAAC;MAEFE,MAAM,CAAC,IAAAC,uBAAe,EAACJ,eAAe,EAAER,UAAU,EAAEH,UAAU,EAAEQ,eAAe,CAAC,CAAC,KAAK,CAAC,CAAC,CAACQ,OAAO,CAAC;QAC7FH,eAAe,EAAE;MACrB,CAAC,CAAC;IACN,CAAC,CAAC;IAEFd,EAAE,CAAC,kEAAkE,EAAE,MAAM;MACzE,MAAMC,UAAsB,GAAG;QAC3BC,KAAK,EAAE,GAAG;QACVC,MAAM,EAAE;MACZ,CAAC;MACD,MAAMC,UAAU,GAAG,IAAI;MACvB,MAAMC,WAAW,GAAG;QAChBC,EAAE,EAAE,CAAC;QACLC,EAAE,EAAE,GAAG;QACPC,EAAE,EAAE;MACR,CAAC;MACD,MAAMC,eAAe,GAAGC,MAAM,CACzBC,OAAO,CAACN,WAAW,CAAgD;MACxE,MAAMO,eAAe,GAAIC,MAAe,KAAM;QAC1CC,eAAe,EAAED,MAAM,GACjB,MAAM,GACN;MACV,CAAC,CAAC;MAEFE,MAAM,CAAC,IAAAC,uBAAe,EAACJ,eAAe,EAAER,UAAU,EAAEH,UAAU,EAAEQ,eAAe,CAAC,CAAC,KAAK,CAAC,CAAC,CAACQ,OAAO,CAAC;QAC7FH,eAAe,EAAE;MACrB,CAAC,CAAC;IACN,CAAC,CAAC;EACN,CAAC,CAAC;EAEFf,QAAQ,CAAC,YAAY,EAAE,MAAM;IACzBC,EAAE,CAAC,+BAA+B,EAAE,MAAM;MACtC,MAAMC,UAAsB,GAAG;QAC3BC,KAAK,EAAE,GAAG;QACVC,MAAM,EAAE;MACZ,CAAC;MACD,MAAMC,UAAU,GAAG,IAAI;MACvB,MAAMC,WAAW,GAAG;QAChBC,EAAE,EAAE,CAAC;QACLC,EAAE,EAAE,GAAG;QACPC,EAAE,EAAE;MACR,CAAC;MACD,MAAMC,eAAe,GAAGC,MAAM,CACzBC,OAAO,CAACN,WAAW,CAAgD;MACxE,MAAMa,KAAK,GAAG;QACVC,QAAQ,EAAE;UACNZ,EAAE,EAAE,EAAE;UACNC,EAAE,EAAE;QACR,CAAC;QACDM,eAAe,EAAE;UACbR,EAAE,EAAE,MAAM;UACVE,EAAE,EAAE;QACR,CAAC;QACDY,UAAU,EAAE;MAChB,CAAC;MACD,MAAMC,YAAY,GAAG,IAAAC,kBAAU,EAC3BJ,KAAK,EACLd,UAAU,EACVH,UAAU,EACVQ,eACJ,CAAC;MAEDM,MAAM,CAACM,YAAY,CAAC,CAACJ,OAAO,CAAC;QACzBE,QAAQ,EAAE,EAAE;QACZL,eAAe,EAAE,MAAM;QACvBM,UAAU,EAAE;MAChB,CAAC,CAAC;IACN,CAAC,CAAC;IAEFpB,EAAE,CAAC,yCAAyC,EAAE,MAAM;MAChD,MAAMC,UAAsB,GAAG;QAC3BC,KAAK,EAAE,GAAG;QACVC,MAAM,EAAE;MACZ,CAAC;MACD,MAAMC,UAAU,GAAG,IAAI;MACvB,MAAMC,WAAW,GAAG;QAChBC,EAAE,EAAE,CAAC;QACLC,EAAE,EAAE,GAAG;QACPC,EAAE,EAAE;MACR,CAAC;MACD,MAAMC,eAAe,GAAGC,MAAM,CACzBC,OAAO,CAACN,WAAW,CAAgD;MACxE,MAAMa,KAAK,GAAG;QACVK,SAAS,EAAE,CACP;UACIC,UAAU,EAAE;YACRjB,EAAE,EAAE,GAAG;YACPC,EAAE,EAAE;UACR,CAAC;UACDiB,UAAU,EAAE;QAChB,CAAC;MAET,CAAC;MAED,MAAMJ,YAAY,GAAG,IAAAC,kBAAU,EAC3BJ,KAAK,EACLd,UAAU,EACVH,UAAU,EACVQ,eACJ,CAAC;MAEDM,MAAM,CAACM,YAAY,CAAC,CAACJ,OAAO,CAAC;QACzBM,SAAS,EAAE,CACP;UACIC,UAAU,EAAE,GAAG;UACfC,UAAU,EAAE;QAChB,CAAC;MAET,CAAC,CAAC;IACN,CAAC,CAAC;IAEFzB,EAAE,CAAC,4CAA4C,EAAE,MAAM;MACnD,MAAMC,UAAsB,GAAG;QAC3BC,KAAK,EAAE,GAAG;QACVC,MAAM,EAAE;MACZ,CAAC;MACD,MAAMC,UAAU,GAAG,IAAI;MACvB,MAAMC,WAAW,GAAG;QAChBC,EAAE,EAAE,CAAC;QACLC,EAAE,EAAE,GAAG;QACPC,EAAE,EAAE;MACR,CAAC;MACD,MAAMC,eAAe,GAAGC,MAAM,CACzBC,OAAO,CAACN,WAAW,CAAgD;MACxE,MAAMa,KAAK,GAAG;QACVQ,YAAY,EAAE;UACVxB,KAAK,EAAE,CAAC;UACRC,MAAM,EAAE;QACZ;MACJ,CAAC;MACD,MAAMwB,oBAAoB,GAAG;QACzBD,YAAY,EAAE;UACVxB,KAAK,EAAE,CAAC;UACRC,MAAM,EAAE;YACJI,EAAE,EAAE,EAAE;YACNC,EAAE,EAAE;UACR;QACJ;MACJ,CAAC;MAED,MAAMa,YAAY,GAAG,IAAAC,kBAAU,EAC3BJ,KAAK,EACLd,UAAU,EACVH,UAAU,EACVQ,eACJ,CAAC;MACD,MAAMmB,2BAA2B,GAAG,IAAAN,kBAAU,EAC1CK,oBAAoB,EACpBvB,UAAU,EACVH,UAAU,EACVQ,eACJ,CAAC;MAEDM,MAAM,CAACM,YAAY,CAAC,CAACJ,OAAO,CAAC;QACzBS,YAAY,EAAE;UACVxB,KAAK,EAAE,CAAC;UACRC,MAAM,EAAE;QACZ;MACJ,CAAC,CAAC;MACFY,MAAM,CAACa,2BAA2B,CAAC,CAACX,OAAO,CAAC;QACxCS,YAAY,EAAE;UACVxB,KAAK,EAAE,CAAC;UACRC,MAAM,EAAE;QACZ;MACJ,CAAC,CAAC;IACN,CAAC,CAAC;EACN,CAAC,CAAC;AACN,CAAC,CAAC"}
|