@draftbit/core 50.6.4-8a5d9a.2 → 50.6.4-9f92d3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/ExpoImage.js +1 -1
- package/lib/typescript/src/components/ExpoImage.d.ts +5 -10
- package/lib/typescript/src/components/ExpoImage.js +12 -3
- package/lib/typescript/src/components/ExpoImage.js.map +1 -1
- package/lib/typescript/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/components/ExpoImage.js +12 -3
- package/src/components/ExpoImage.js.map +1 -1
- package/src/components/ExpoImage.tsx +31 -26
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "50.6.4-
|
|
3
|
+
"version": "50.6.4-9f92d3.2+9f92d3b",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"types": "lib/typescript/src/index.d.ts",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@date-io/date-fns": "^1.3.13",
|
|
43
43
|
"@dotlottie/react-player": "1.6.1",
|
|
44
44
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
45
|
-
"@draftbit/theme": "^50.6.4-
|
|
45
|
+
"@draftbit/theme": "^50.6.4-9f92d3.2+9f92d3b",
|
|
46
46
|
"@expo/vector-icons": "^14.0.0",
|
|
47
47
|
"@gorhom/bottom-sheet": "5.0.0-alpha.7",
|
|
48
48
|
"@lottiefiles/react-lottie-player": "3.5.3",
|
|
@@ -123,5 +123,5 @@
|
|
|
123
123
|
],
|
|
124
124
|
"testEnvironment": "node"
|
|
125
125
|
},
|
|
126
|
-
"gitHead": "
|
|
126
|
+
"gitHead": "9f92d3b1f942508944979153b0591387d9929463"
|
|
127
127
|
}
|
|
@@ -37,7 +37,7 @@ const resizeModeToContentFit = (resizeMode) => {
|
|
|
37
37
|
};
|
|
38
38
|
return (_a = mapping[resizeMode]) !== null && _a !== void 0 ? _a : "cover";
|
|
39
39
|
};
|
|
40
|
-
const ExpoImage = ({ source, resizeMode = "cover", style,
|
|
40
|
+
const ExpoImage = ({ source, resizeMode = "cover", style, transitionDuration = 300, transitionEffect = "cross-dissolve", transitionTiming = "ease-in-out", contentFit = "cover", contentPosition = "center", cachePolicy = "memory-disk", allowDownscaling = true, blurRadius, blurhash, ...props }) => {
|
|
41
41
|
let imageSource = source === null || source === undefined
|
|
42
42
|
? Config.placeholderImageURL
|
|
43
43
|
: source;
|
|
@@ -46,9 +46,16 @@ const ExpoImage = ({ source, resizeMode = "cover", style, placeholder, transitio
|
|
|
46
46
|
const finalContentFit = resizeMode
|
|
47
47
|
? resizeModeToContentFit(resizeMode)
|
|
48
48
|
: contentFit;
|
|
49
|
+
const transition = {
|
|
50
|
+
timing: transitionTiming,
|
|
51
|
+
duration: transitionDuration,
|
|
52
|
+
effect: transitionEffect,
|
|
53
|
+
};
|
|
49
54
|
if (aspectRatio) {
|
|
50
55
|
return (React.createElement(AspectRatio, { style: [style, { width, height, aspectRatio }] },
|
|
51
|
-
React.createElement(Image, { ...props, source: imageSource, contentFit: finalContentFit, placeholder:
|
|
56
|
+
React.createElement(Image, { ...props, source: imageSource, contentFit: finalContentFit, placeholder: {
|
|
57
|
+
blurhash,
|
|
58
|
+
}, transition: transition, contentPosition: contentPosition, cachePolicy: cachePolicy, allowDownscaling: allowDownscaling, blurRadius: blurRadius, style: [
|
|
52
59
|
style,
|
|
53
60
|
{
|
|
54
61
|
height: "100%",
|
|
@@ -56,7 +63,9 @@ const ExpoImage = ({ source, resizeMode = "cover", style, placeholder, transitio
|
|
|
56
63
|
},
|
|
57
64
|
] })));
|
|
58
65
|
}
|
|
59
|
-
return (React.createElement(Image, { ...props, source: source, contentFit: finalContentFit, placeholder:
|
|
66
|
+
return (React.createElement(Image, { ...props, source: source, contentFit: finalContentFit, placeholder: {
|
|
67
|
+
blurhash,
|
|
68
|
+
}, transition: transition, contentPosition: contentPosition, cachePolicy: cachePolicy, allowDownscaling: allowDownscaling, blurRadius: blurRadius, style: style }));
|
|
60
69
|
};
|
|
61
70
|
export default ExpoImage;
|
|
62
71
|
//# sourceMappingURL=ExpoImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpoImage.js","sourceRoot":"","sources":["ExpoImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAuC,MAAM,cAAc,CAAC;AAC/E,OAAO,EACL,KAAK,GAIN,MAAM,YAAY,CAAC;AACpB,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,WAAW,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"ExpoImage.js","sourceRoot":"","sources":["ExpoImage.tsx"],"names":[],"mappings":"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"}
|
|
@@ -16,29 +16,22 @@ type ImageStyleProp = {
|
|
|
16
16
|
};
|
|
17
17
|
|
|
18
18
|
interface ExtendedImageProps extends ExpoImageProps {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
| "flip-from-top"
|
|
30
|
-
| "flip-from-right"
|
|
31
|
-
| "flip-from-bottom"
|
|
32
|
-
| "flip-from-left"
|
|
33
|
-
| "curl-up"
|
|
34
|
-
| "curl-down";
|
|
35
|
-
timing?: "ease-in-out" | "ease-in" | "ease-out" | "linear";
|
|
36
|
-
};
|
|
19
|
+
transitionDuration?: number;
|
|
20
|
+
transitionEffect?:
|
|
21
|
+
| "cross-dissolve"
|
|
22
|
+
| "flip-from-top"
|
|
23
|
+
| "flip-from-right"
|
|
24
|
+
| "flip-from-bottom"
|
|
25
|
+
| "flip-from-left"
|
|
26
|
+
| "curl-up"
|
|
27
|
+
| "curl-down";
|
|
28
|
+
transitionTiming?: "ease-in-out" | "ease-in" | "ease-out" | "linear";
|
|
37
29
|
contentFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
|
|
38
30
|
contentPosition?: ImageContentPosition;
|
|
39
31
|
cachePolicy?: "none" | "disk" | "memory" | "memory-disk";
|
|
40
32
|
allowDownscaling?: boolean;
|
|
41
|
-
|
|
33
|
+
blurRadius?: number;
|
|
34
|
+
blurhash?: string;
|
|
42
35
|
}
|
|
43
36
|
|
|
44
37
|
const generateDimensions = ({
|
|
@@ -93,13 +86,15 @@ const ExpoImage: React.FC<ExtendedImageProps> = ({
|
|
|
93
86
|
source,
|
|
94
87
|
resizeMode = "cover",
|
|
95
88
|
style,
|
|
96
|
-
|
|
97
|
-
|
|
89
|
+
transitionDuration = 300,
|
|
90
|
+
transitionEffect = "cross-dissolve",
|
|
91
|
+
transitionTiming = "ease-in-out",
|
|
98
92
|
contentFit = "cover",
|
|
99
93
|
contentPosition = "center",
|
|
100
94
|
cachePolicy = "memory-disk",
|
|
101
95
|
allowDownscaling = true,
|
|
102
|
-
|
|
96
|
+
blurRadius,
|
|
97
|
+
blurhash,
|
|
103
98
|
...props
|
|
104
99
|
}) => {
|
|
105
100
|
let imageSource =
|
|
@@ -116,6 +111,12 @@ const ExpoImage: React.FC<ExtendedImageProps> = ({
|
|
|
116
111
|
? resizeModeToContentFit(resizeMode)
|
|
117
112
|
: contentFit;
|
|
118
113
|
|
|
114
|
+
const transition = {
|
|
115
|
+
timing: transitionTiming,
|
|
116
|
+
duration: transitionDuration,
|
|
117
|
+
effect: transitionEffect,
|
|
118
|
+
};
|
|
119
|
+
|
|
119
120
|
if (aspectRatio) {
|
|
120
121
|
return (
|
|
121
122
|
<AspectRatio style={[style, { width, height, aspectRatio }]}>
|
|
@@ -123,12 +124,14 @@ const ExpoImage: React.FC<ExtendedImageProps> = ({
|
|
|
123
124
|
{...props}
|
|
124
125
|
source={imageSource as ImageSourcePropType}
|
|
125
126
|
contentFit={finalContentFit}
|
|
126
|
-
placeholder={
|
|
127
|
+
placeholder={{
|
|
128
|
+
blurhash,
|
|
129
|
+
}}
|
|
127
130
|
transition={transition}
|
|
128
131
|
contentPosition={contentPosition}
|
|
129
132
|
cachePolicy={cachePolicy}
|
|
130
133
|
allowDownscaling={allowDownscaling}
|
|
131
|
-
|
|
134
|
+
blurRadius={blurRadius}
|
|
132
135
|
style={[
|
|
133
136
|
style,
|
|
134
137
|
{
|
|
@@ -146,12 +149,14 @@ const ExpoImage: React.FC<ExtendedImageProps> = ({
|
|
|
146
149
|
{...props}
|
|
147
150
|
source={source as ImageSourcePropType}
|
|
148
151
|
contentFit={finalContentFit}
|
|
149
|
-
placeholder={
|
|
152
|
+
placeholder={{
|
|
153
|
+
blurhash,
|
|
154
|
+
}}
|
|
150
155
|
transition={transition}
|
|
151
156
|
contentPosition={contentPosition}
|
|
152
157
|
cachePolicy={cachePolicy}
|
|
153
158
|
allowDownscaling={allowDownscaling}
|
|
154
|
-
|
|
159
|
+
blurRadius={blurRadius}
|
|
155
160
|
style={style}
|
|
156
161
|
/>
|
|
157
162
|
);
|