@codeleap/mobile 2.4.1 → 2.4.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.
|
@@ -18,7 +18,7 @@ export declare type ImageProps = Omit<NativeImageProps, 'source' | 'style'> & {
|
|
|
18
18
|
}) | FormTypes.AnyFile | string | number;
|
|
19
19
|
resizeMode?: keyof typeof FastImage.resizeMode;
|
|
20
20
|
spotlight?: string;
|
|
21
|
-
|
|
21
|
+
maintainAspectRatio?: boolean;
|
|
22
22
|
withLoadingOverlay?: boolean | React.FC<LoadingOverlayProps>;
|
|
23
23
|
};
|
|
24
24
|
export declare const ImageComponent: React.FC<ImageProps>;
|
|
@@ -44,7 +44,7 @@ var utils_1 = require("../../utils");
|
|
|
44
44
|
var LoadingOverlay_1 = require("../LoadingOverlay");
|
|
45
45
|
__exportStar(require("./styles"), exports);
|
|
46
46
|
var ImageComponent = function (props) {
|
|
47
|
-
var variants = props.variants, style = props.style, _a = props.styles, componentStyleSheet = _a === void 0 ? {} : _a, _b = props.fast, fast = _b === void 0 ? true : _b, _c = props.spotlight, spotlight = _c === void 0 ? null : _c, _d = props.resizeMode, resizeMode = _d === void 0 ? 'contain' : _d, source = props.source, _e = props.withLoadingOverlay, withLoadingOverlay = _e === void 0 ? false : _e, _f = props.
|
|
47
|
+
var variants = props.variants, style = props.style, _a = props.styles, componentStyleSheet = _a === void 0 ? {} : _a, _b = props.fast, fast = _b === void 0 ? true : _b, _c = props.spotlight, spotlight = _c === void 0 ? null : _c, _d = props.resizeMode, resizeMode = _d === void 0 ? 'contain' : _d, source = props.source, _e = props.withLoadingOverlay, withLoadingOverlay = _e === void 0 ? false : _e, _f = props.maintainAspectRatio, maintainAspectRatio = _f === void 0 ? true : _f, imageProps = __rest(props, ["variants", "style", "styles", "fast", "spotlight", "resizeMode", "source", "withLoadingOverlay", "maintainAspectRatio"]);
|
|
48
48
|
var variantStyles = (0, common_1.useDefaultComponentStyle)('u:Image', { variants: variants, styles: componentStyleSheet, transform: react_native_1.StyleSheet.flatten });
|
|
49
49
|
var _g = React.useState(false), loading = _g[0], setLoading = _g[1];
|
|
50
50
|
var styles = react_native_1.StyleSheet.flatten([variantStyles.wrapper, style]);
|
|
@@ -67,7 +67,7 @@ var ImageComponent = function (props) {
|
|
|
67
67
|
android_ripple: null,
|
|
68
68
|
};
|
|
69
69
|
var aspectRatioStyle = React.useMemo(function () {
|
|
70
|
-
if (
|
|
70
|
+
if (!maintainAspectRatio || !imSource)
|
|
71
71
|
return null;
|
|
72
72
|
try {
|
|
73
73
|
// @ts-ignore
|
|
@@ -83,25 +83,40 @@ var ImageComponent = function (props) {
|
|
|
83
83
|
catch (e) {
|
|
84
84
|
return null;
|
|
85
85
|
}
|
|
86
|
-
}, [
|
|
87
|
-
var
|
|
88
|
-
|
|
89
|
-
|
|
86
|
+
}, [maintainAspectRatio, imSource]);
|
|
87
|
+
var loadEndedEarly = React.useRef(false);
|
|
88
|
+
var loadProps = React.useRef({
|
|
89
|
+
onLoadStart: function () {
|
|
90
|
+
if (withLoadingOverlay) {
|
|
91
|
+
setTimeout(function () {
|
|
92
|
+
if (!loadEndedEarly.current) {
|
|
93
|
+
setLoading(true);
|
|
94
|
+
}
|
|
95
|
+
}, 60);
|
|
96
|
+
}
|
|
97
|
+
}, onLoadEnd: function () {
|
|
98
|
+
loadEndedEarly.current = true;
|
|
99
|
+
if (withLoadingOverlay)
|
|
100
|
+
setLoading(false);
|
|
101
|
+
}
|
|
102
|
+
});
|
|
90
103
|
var Loading = common_1.TypeGuards.isFunction(withLoadingOverlay) ? withLoadingOverlay : LoadingOverlay_1.LoadingOverlay;
|
|
91
104
|
var showLoading = !!withLoadingOverlay;
|
|
92
105
|
var overlayStyle = React.useMemo(function () { return (0, common_1.getNestedStylesByKey)('overlay', variantStyles); }, [variantStyles]);
|
|
93
|
-
var loadingElement =
|
|
106
|
+
var loadingElement = React.useMemo(function () {
|
|
107
|
+
return showLoading ? (<Loading visible={loading} styles={overlayStyle}/>) : null;
|
|
108
|
+
}, [showLoading, loading]);
|
|
94
109
|
if (fast) {
|
|
95
110
|
return (<Wrapper {...wrapperProps}>
|
|
96
111
|
|
|
97
112
|
<fastImage_1.FastImage style={[aspectRatioStyle, styles]}
|
|
98
113
|
// @ts-ignore
|
|
99
|
-
tintColor={styles === null || styles === void 0 ? void 0 : styles.tintColor} source={imSource} resizeMode={fastImage_1.FastImage.resizeMode[resizeMode || 'contain']} {...loadProps} {...imageProps}/>
|
|
114
|
+
tintColor={styles === null || styles === void 0 ? void 0 : styles.tintColor} source={imSource} resizeMode={fastImage_1.FastImage.resizeMode[resizeMode || 'contain']} {...loadProps.current} {...imageProps}/>
|
|
100
115
|
{loadingElement}
|
|
101
116
|
</Wrapper>);
|
|
102
117
|
}
|
|
103
118
|
return <Wrapper {...wrapperProps}>
|
|
104
|
-
<react_native_1.Image style={[aspectRatioStyle, styles]} resizeMode={resizeMode} source={imSource} {...imageProps} {...loadProps}/>
|
|
119
|
+
<react_native_1.Image style={[aspectRatioStyle, styles]} resizeMode={resizeMode} source={imSource} {...imageProps} {...loadProps.current}/>
|
|
105
120
|
{loadingElement}
|
|
106
121
|
</Wrapper>;
|
|
107
122
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,2CASyB;AAEzB,6CAOqB;AACrB,qDAAmD;AAKnD,oDAA0D;AAC1D,0CAAwC;AACxC,qCAAqD;AACrD,oDAAuE;AAEvE,2CAAwB;AAuBjB,IAAM,cAAc,GAAyB,UAAC,KAAK;IAEtD,IAAA,QAAQ,GAUN,KAAK,SAVC,EACR,KAAK,GASH,KAAK,MATF,EACL,KAQE,KAAK,OARyB,EAAxB,mBAAmB,mBAAG,EAAE,KAAA,EAChC,KAOE,KAAK,KAPI,EAAX,IAAI,mBAAG,IAAI,KAAA,EACX,KAME,KAAK,UANS,EAAhB,SAAS,mBAAG,IAAI,KAAA,EAChB,KAKE,KAAK,WALe,EAAtB,UAAU,mBAAG,SAAS,KAAA,EACtB,MAAM,GAIJ,KAAK,OAJD,EACN,KAGE,KAAK,mBAHmB,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAC1B,KAEE,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Image/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -44,7 +44,7 @@ export type ImageProps = Omit<NativeImageProps, 'source' | 'style'> & {
|
|
|
44
44
|
| number
|
|
45
45
|
resizeMode?: keyof typeof FastImage.resizeMode
|
|
46
46
|
spotlight?: string
|
|
47
|
-
|
|
47
|
+
maintainAspectRatio?: boolean
|
|
48
48
|
withLoadingOverlay?: boolean | React.FC<LoadingOverlayProps>
|
|
49
49
|
}
|
|
50
50
|
|
|
@@ -61,7 +61,7 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
|
|
|
61
61
|
resizeMode = 'contain',
|
|
62
62
|
source,
|
|
63
63
|
withLoadingOverlay = false,
|
|
64
|
-
|
|
64
|
+
maintainAspectRatio = true,
|
|
65
65
|
...imageProps
|
|
66
66
|
} = props
|
|
67
67
|
|
|
@@ -86,10 +86,11 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
|
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
const aspectRatioStyle = React.useMemo(() => {
|
|
89
|
-
if (
|
|
89
|
+
if (!maintainAspectRatio|| !imSource) return null
|
|
90
90
|
try {
|
|
91
91
|
// @ts-ignore
|
|
92
92
|
const assetSource = NativeImage.resolveAssetSource(imSource)
|
|
93
|
+
|
|
93
94
|
const aspectRatio = assetSource.width / assetSource.height
|
|
94
95
|
|
|
95
96
|
if (Number.isNaN(aspectRatio)) {
|
|
@@ -102,24 +103,38 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
|
|
|
102
103
|
return null
|
|
103
104
|
}
|
|
104
105
|
|
|
105
|
-
}, [
|
|
106
|
+
}, [maintainAspectRatio, imSource])
|
|
106
107
|
|
|
108
|
+
const loadEndedEarly = React.useRef(false)
|
|
107
109
|
|
|
108
|
-
const loadProps = {
|
|
109
|
-
onLoadStart: () =>
|
|
110
|
-
|
|
110
|
+
const loadProps = React.useRef({
|
|
111
|
+
onLoadStart: () => {
|
|
112
|
+
if(withLoadingOverlay) {
|
|
113
|
+
setTimeout(() => {
|
|
114
|
+
if(!loadEndedEarly.current){
|
|
115
|
+
setLoading(true)
|
|
116
|
+
}
|
|
117
|
+
},60)
|
|
118
|
+
}
|
|
119
|
+
}, onLoadEnd: () => {
|
|
120
|
+
loadEndedEarly.current = true
|
|
121
|
+
if(withLoadingOverlay) setLoading(false)
|
|
122
|
+
}
|
|
123
|
+
})
|
|
111
124
|
|
|
112
125
|
const Loading = TypeGuards.isFunction(withLoadingOverlay) ? withLoadingOverlay : LoadingOverlay
|
|
113
126
|
const showLoading = !!withLoadingOverlay
|
|
114
127
|
|
|
115
128
|
const overlayStyle = React.useMemo(() => getNestedStylesByKey('overlay', variantStyles), [variantStyles])
|
|
116
129
|
|
|
117
|
-
const loadingElement =
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
130
|
+
const loadingElement = React.useMemo(() => {
|
|
131
|
+
return showLoading ? (
|
|
132
|
+
<Loading visible={loading} styles={overlayStyle}/>
|
|
133
|
+
|
|
134
|
+
) : null
|
|
135
|
+
}, [showLoading, loading])
|
|
121
136
|
|
|
122
|
-
|
|
137
|
+
|
|
123
138
|
if (fast) {
|
|
124
139
|
return (
|
|
125
140
|
<Wrapper {...wrapperProps}>
|
|
@@ -130,7 +145,7 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
|
|
|
130
145
|
tintColor={styles?.tintColor}
|
|
131
146
|
source={imSource}
|
|
132
147
|
resizeMode={FastImage.resizeMode[resizeMode || 'contain']}
|
|
133
|
-
{...loadProps}
|
|
148
|
+
{...loadProps.current}
|
|
134
149
|
{...imageProps}
|
|
135
150
|
/>
|
|
136
151
|
{loadingElement}
|
|
@@ -142,7 +157,7 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
|
|
|
142
157
|
style={[aspectRatioStyle, styles]}
|
|
143
158
|
resizeMode={resizeMode}
|
|
144
159
|
source={imSource} {...(imageProps as any)}
|
|
145
|
-
{...loadProps}
|
|
160
|
+
{...loadProps.current}
|
|
146
161
|
/>
|
|
147
162
|
{
|
|
148
163
|
loadingElement
|