1 | var __rest = (this && this.__rest) || function (s, e) {
|
2 | var t = {};
|
3 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4 | t[p] = s[p];
|
5 | if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8 | t[p[i]] = s[p[i]];
|
9 | }
|
10 | return t;
|
11 | };
|
12 | import React from 'react';
|
13 | import { Animated, Image as ImageNative, StyleSheet, View, TouchableOpacity, } from 'react-native';
|
14 | import { withTheme } from '../config';
|
15 | class Image extends React.Component {
|
16 | constructor() {
|
17 | super(...arguments);
|
18 | this.state = {
|
19 | placeholderOpacity: new Animated.Value(1),
|
20 | };
|
21 | this.onLoad = (e) => {
|
22 | const { transition, onLoad, transitionDuration } = this.props;
|
23 | if (!transition) {
|
24 | this.state.placeholderOpacity.setValue(0);
|
25 | return;
|
26 | }
|
27 | Animated.timing(this.state.placeholderOpacity, {
|
28 | toValue: 0,
|
29 | duration: transitionDuration,
|
30 | useNativeDriver: true,
|
31 | }).start();
|
32 | onLoad && onLoad(e);
|
33 | };
|
34 | }
|
35 | render() {
|
36 | const _a = this.props, { onPress, onLongPress, Component = onPress || onLongPress ? TouchableOpacity : View, placeholderStyle, PlaceholderContent, containerStyle, childrenContainerStyle = null, style = {}, ImageComponent = ImageNative, children } = _a, attributes = __rest(_a, ["onPress", "onLongPress", "Component", "placeholderStyle", "PlaceholderContent", "containerStyle", "childrenContainerStyle", "style", "ImageComponent", "children"]);
|
37 | const hasImage = Boolean(attributes.source);
|
38 | const _b = StyleSheet.flatten(style), { width, height } = _b, styleProps = __rest(_b, ["width", "height"]);
|
39 | return (<Component onPress={onPress} onLongPress={onLongPress} accessibilityIgnoresInvertColors={true} style={StyleSheet.flatten([styles.container, containerStyle])}>
|
40 | <ImageComponent testID="RNE__Image" transition={true} transitionDuration={360} {...attributes} onLoad={this.onLoad} style={StyleSheet.flatten([
|
41 | StyleSheet.absoluteFill,
|
42 | {
|
43 | width: width,
|
44 | height: height,
|
45 | },
|
46 | styleProps,
|
47 | ])}/>
|
48 |
|
49 | <Animated.View pointerEvents={hasImage ? 'none' : 'auto'} accessibilityElementsHidden={hasImage} importantForAccessibility={hasImage ? 'no-hide-descendants' : 'yes'} style={[
|
50 | styles.placeholderContainer,
|
51 | {
|
52 | opacity: hasImage ? this.state.placeholderOpacity : 1,
|
53 | },
|
54 | ]}>
|
55 | <View testID="RNE__Image__placeholder" style={StyleSheet.flatten([
|
56 | style,
|
57 | styles.placeholder,
|
58 | placeholderStyle,
|
59 | ])}>
|
60 | {PlaceholderContent}
|
61 | </View>
|
62 | </Animated.View>
|
63 |
|
64 | <View testID="RNE__Image__children__container" style={childrenContainerStyle !== null && childrenContainerStyle !== void 0 ? childrenContainerStyle : style}>
|
65 | {children}
|
66 | </View>
|
67 | </Component>);
|
68 | }
|
69 | }
|
70 | Image.getSize = ImageNative.getSize;
|
71 | Image.getSizeWithHeaders = ImageNative.getSizeWithHeaders;
|
72 | Image.prefetch = ImageNative.prefetch;
|
73 | Image.abortPrefetch = ImageNative.abortPrefetch;
|
74 | Image.queryCache = ImageNative.queryCache;
|
75 | Image.resolveAssetSource = ImageNative.resolveAssetSource;
|
76 | const styles = StyleSheet.create({
|
77 | container: {
|
78 | backgroundColor: 'transparent',
|
79 | position: 'relative',
|
80 | overflow: 'hidden',
|
81 | },
|
82 | placeholderContainer: Object.assign({}, StyleSheet.absoluteFillObject),
|
83 | placeholder: {
|
84 | backgroundColor: '#bdbdbd',
|
85 | alignItems: 'center',
|
86 | justifyContent: 'center',
|
87 | },
|
88 | });
|
89 | export { Image };
|
90 | export default withTheme(Image, 'Image');
|
91 |
|
\ | No newline at end of file |