reverted HTMLImage

src/HTMLImage.js

@@ -0,0 +1,166 @@
+import React, { PureComponent } from 'react';
+import { Image, View, Text } from 'react-native';
+import PropTypes from 'prop-types';
+
+export default class HTMLImage extends PureComponent {
+    constructor (props) {
+        super(props);
+        const { styleWidth, styleHeight } = this.getDimensionsFromStyle(props.style, props.height, props.width);
+        this.state = {
+            width: props.imagesInitialDimensions.width,
+            height: props.imagesInitialDimensions.height,
+            indeterminate: !(styleWidth && styleHeight)
+        };
+    }
+
+    static propTypes = {
+        source: PropTypes.object.isRequired,
+        alt: PropTypes.string,
+        height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        style: Image.propTypes.style,
+        imagesMaxWidth: PropTypes.number,
+        imagesInitialDimensions: PropTypes.shape({
+            width: PropTypes.number,
+            height: PropTypes.number
+        })
+    }
+
+    static defaultProps = {
+        imagesInitialDimensions: {
+            width: 100,
+            height: 100
+        }
+    }
+
+    componentDidMount () {
+        this.getImageSize();
+        this.mounted = true;
+    }
+
+    componentWillUnmount () {
+        this.mounted = false;
+    }
+
+    componentWillReceiveProps (nextProps) {
+        this.getImageSize(nextProps);
+    }
+
+    getDimensionsFromStyle (style, height, width) {
+        let styleWidth;
+        let styleHeight;
+
+        if (height) {
+            styleHeight = height;
+        }
+        if (width) {
+            styleWidth = width;
+        }
+        if (Array.isArray(style)) {
+            style.forEach((styles) => {
+                if (!width && styles['width']) {
+                    styleWidth = styles['width'];
+                }
+                if (!height && styles['height']) {
+                    styleHeight = styles['height'];
+                }
+            });
+        } else {
+            if (!width && style['width']) {
+                styleWidth = style['width'];
+            }
+            if (!height && style['height']) {
+                styleHeight = style['height'];
+            }
+        }
+
+        return { styleWidth, styleHeight };
+    }
+
+    getImageSize (props = this.props) {
+        const { source, imagesMaxWidth, style, height, width } = props;
+        const { styleWidth, styleHeight } = this.getDimensionsFromStyle(style, height, width);
+
+        if (styleWidth && styleHeight) {
+            return this.mounted && this.setState({
+                width: typeof styleWidth === 'string' && styleWidth.search('%') !== -1 ? styleWidth : parseInt(styleWidth, 10),
+                height: typeof styleHeight === 'string' && styleHeight.search('%') !== -1 ? styleHeight : parseInt(styleHeight, 10),
+                indeterminate: false
+            });
+        }
+        // Fetch image dimensions only if they aren't supplied or if with or height is missing
+        Image.getSize(
+            source.uri,
+            (originalWidth, originalHeight) => {
+                if (!imagesMaxWidth) {
+                    return this.mounted && this.setState({ width: originalWidth, height: originalHeight });
+                }
+                const optimalWidth = imagesMaxWidth <= originalWidth ? imagesMaxWidth : originalWidth;
+                const optimalHeight = (optimalWidth * originalHeight) / originalWidth;
+                this.mounted && this.setState({ width: optimalWidth, height: optimalHeight, indeterminate: false, error: false });
+            },
+            () => {
+                this.mounted && this.setState({ error: true });
+            }
+        );
+    }
+
+    optimizeSizeForDevice (style, imagesMaxWidth) {
+        if (imagesMaxWidth > 0) {
+            const styleWidth = style.width > imagesMaxWidth ? imagesMaxWidth: style.width;
+            const styleHeight = style.height > 0 ? (style.height/style.width)*styleWidth : style.height;
+            return {
+                width: styleWidth,
+                height: styleHeight
+            };
+        }
+        return {};
+    }
+
+    validImage (source, style, imagesMaxWidth, props = {}) {
+        let overridenSizeStyle = {};
+        if (style instanceof Array) {
+            style.forEach((item) => {
+                if (item.width && item.height) {
+                    overridenSizeStyle = this.optimizeSizeForDevice(item, imagesMaxWidth);
+                }
+            });
+        } else if (style.width && style.height) {
+            overridenSizeStyle = this.optimizeSizeForDevice(style, imagesMaxWidth);
+        }
+        return (
+            <Image
+              source={source}
+              style={[{ width: this.state.width, height: this.state.height, resizeMode: 'contain' }, style, overridenSizeStyle ]}
+              {...props}
+            />
+        );
+    }
+
+    get errorImage () {
+        return (
+            <View style={{ width: 50, height: 50, borderWidth: 1, borderColor: 'lightgray', overflow: 'hidden', justifyContent: 'center' }}>
+                { this.props.alt ? <Text style={{ textAlign: 'center', fontStyle: 'italic' }}>{ this.props.alt }</Text> : false }
+            </View>
+        );
+    }
+
+
+    get placeholderImage () {
+        return (
+            <View style={{width: this.props.imagesInitialDimensions.width, height: this.props.imagesInitialDimensions.height}} />
+        );
+    }
+
+    render () {
+        const { source, style, imagesMaxWidth, passProps } = this.props;
+
+        if (this.state.error) {
+            return this.errorImage;
+        } 
+        if (this.state.indeterminate) {
+            return this.placeholderImage;
+        }
+        return this.validImage(source, style, passProps);
+    }
+}