/
index.js
100 lines (93 loc) · 2.24 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import { StyleSheet } from "react-native";
const Config = {
deviceWidth: 375,
baseWidth: 375,
maxScale: 1.3,
minScale: 0.8,
scale: function (value) {
const ratio = this.deviceWidth / this.baseWidth;
return value * Math.min(Math.max(ratio, this.minScale), this.maxScale);
},
};
const propsToUpdate = [
"height",
"fontSize",
"letterSpacing",
"lineHeight",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderRadius",
"borderBottomWidth",
"borderTopWidth",
"borderRightWidth",
"borderLeftWidth",
"borderWidth",
"shadowRadius",
"translateX",
"translateY",
"marginLeft",
"marginRight",
"marginHorizontal",
"marginVertical",
"marginTop",
"marginBottom",
"margin",
"paddingLeft",
"paddingRight",
"paddingHorizontal",
"paddingVertical",
"padding",
"paddingTop",
"paddingBottom",
"top",
"left",
"bottom",
"right",
];
export const scale = (value) => Config.scale(value);
export const initialize = (config) => {
const { baseWidth, maxScale, minScale, deviceWidth } = config;
Config.deviceWidth = deviceWidth || Config.deviceWidth;
Config.maxScale = maxScale || Config.maxScale;
Config.minScale = minScale || Config.minScale;
Config.baseWidth = baseWidth || Config.baseWidth;
};
export const original = (obj) => {
return String(obj);
};
export const ScaledSheet = {
original,
initialize,
scale,
absoluteFill: StyleSheet.absoluteFill,
absoluteFillObject: StyleSheet.absoluteFillObject,
create: (obj) => {
return StyleSheet.create(ScaledSheet.mapObj(obj));
},
mapObj: (o) => {
const res = {};
Object.keys(o).forEach((objKey) => {
// map
const obj = o[objKey];
const resultObj = {};
Object.keys(obj).forEach((key) => {
const value = obj[key];
if (!propsToUpdate.includes(key)) {
resultObj[key] = value;
return;
}
if (typeof value === "number") {
resultObj[key] = Config.scale(value);
} else if (typeof value === "string") {
resultObj[key] = isNaN(value) ? value : parseFloat(value);
} else {
resultObj[key] = value;
}
});
res[objKey] = resultObj;
});
return res;
},
};