Merge pull request meliorence#226 from archriss/4.1.1

v4.1.1

Author: Exilz

Demo/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "react": "^16.6.3",
     "react-native": "^0.58.3",
-    "react-native-render-html": "4.1.0"
+    "react-native-render-html": "4.1.1"
   },
   "devDependencies": {
     "babel-core": "^7.0.0-bridge.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-render-html",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "author": "Archriss",
   "license": "BSD-2-Clause",
   "repository": "https://github.com/archriss/react-native-render-html",

src/HTML.js

@@ -350,7 +350,7 @@ export default class HTML extends PureComponent {
                 let textChildrenInheritedStyles = {};
                 Object.keys(wrapperStyles).forEach((styleKey) => {
                     // Extract text-only styles
-                    if (TextOnlyPropTypes[styleKey]) {
+                    if (TextOnlyPropTypes.indexOf(styleKey) !== -1) {
                         textChildrenInheritedStyles[styleKey] = wrapperStyles[styleKey];
                         delete wrapperStyles[styleKey];
                     }

src/HTMLStyles.js

@@ -1,6 +1,5 @@
 import { PERC_SUPPORTED_STYLES, STYLESETS, ABSOLUTE_FONT_SIZE, stylePropTypes } from './HTMLUtils';
 import { generateDefaultBlockStyles, generateDefaultTextStyles } from './HTMLDefaultStyles';
-import checkPropTypes from './checkPropTypes';
 
 /**
 * Converts a html style string to an object
@@ -174,48 +173,41 @@ function cssToRNStyle (css, styleset, { emSize, ptSize, ignoredStyles, allowedSt
                     .split('-')
                     .map((item, index) => index === 0 ? item : item[0].toUpperCase() + item.substr(1))
                     .join(''),
-                value];
+                value
+            ];
         })
         .map(([key, value]) => {
-            if (!styleProps[key]) {
+            if (styleProps.indexOf(key) === -1) {
                 return undefined;
             }
 
-            const testStyle = {};
-            testStyle[key] = value;
-            const styleProp = {};
-            styleProp[key] = styleProps[key];
-            if (checkPropTypes(styleProp, testStyle, key, 'react-native-render-html') == null) {
-                if (typeof value === 'string') {
-                    if (value.search('inherit') !== -1) {
-                        return undefined;
-                    }
-                    value = value.replace('!important', '');
-                    // See if we can use the percentage directly
-                    if (value.search('%') !== -1 && PERC_SUPPORTED_STYLES.indexOf(key) !== -1) {
-                        return [key, value];
-                    }
-                    if (value.search('em') !== -1) {
-                        const pxSize = parseFloat(value.replace('em', '')) * emSize;
-                        return [key, pxSize];
-                    }
-                    if (value.search('pt') !== -1) {
-                        const pxSize = parseFloat(value.replace('pt', '')) * ptSize;
-                        return [key, pxSize];
-                    }
-                    // See if we can convert a 20px to a 20 automagically
-                    const numericValue = parseFloat(value.replace('px', ''));
-                    if (key !== 'fontWeight' && !isNaN(numericValue)) {
-                        testStyle[key] = numericValue;
-                        if (checkPropTypes(styleProp, testStyle, key, 'react-native-render-html') == null) {
-                            return [key, numericValue];
-                        }
-                    }
-                    if (key === 'fontSize') {
-                        return mapAbsoluteFontSize(key, value);
+            if (typeof value === 'string') {
+                if (value.search('inherit') !== -1 || value.search('calc') !== -1 || value.search('normal') !== -1) {
+                    return undefined;
+                }
+                value = value.replace('!important', '');
+                // See if we can use the percentage directly
+                if (value.search('%') !== -1 && PERC_SUPPORTED_STYLES.indexOf(key) !== -1) {
+                    return [key, value];
+                }
+                if (value.search('em') !== -1) {
+                    const pxSize = parseFloat(value.replace('em', '')) * emSize;
+                    return [key, pxSize];
+                }
+                if (value.search('pt') !== -1) {
+                    const pxSize = parseFloat(value.replace('pt', '')) * ptSize;
+                    return [key, pxSize];
+                }
+                // See if we can convert a 20px to a 20 automagically
+                const numericValue = parseFloat(value.replace('px', ''));
+                if (key !== 'fontWeight' && !isNaN(numericValue)) {
+                    if (styleProps.indexOf(key) !== -1) {
+                        return [key, numericValue];
                     }
                 }
-                return [key, value];
+                if (key === 'fontSize') {
+                    return mapAbsoluteFontSize(key, value);
+                }
             }
             return [key, value];
         })

src/HTMLUtils.js

@@ -1,14 +1,11 @@
-import TextStylesPropTypes from 'react-native/Libraries/Text/TextStylePropTypes';
-import DeprecatedViewStylePropTypes from 'react-native/Libraries/DeprecatedPropTypes/DeprecatedViewStylePropTypes';
-import DeprecatedImageStylesPropTypes from 'react-native/Libraries/DeprecatedPropTypes/DeprecatedImageStylePropTypes';
+// PropTypes have been deprecated since 0.58. This is why these array are now hardcoded. This lets us preserve
+// a style checking at runtime while keeping the module compatible with all react-native versions.
+const ImageStylePropTypes = ['display', 'width', 'height', 'start', 'end', 'top', 'left', 'right', 'bottom', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'margin', 'marginVertical', 'marginHorizontal', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'marginStart', 'marginEnd', 'padding', 'paddingVertical', 'paddingHorizontal', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingEnd', 'borderWidth', 'borderTopWidth', 'borderStartWidth', 'borderEndWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'position', 'flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'alignSelf', 'alignContent', 'overflow', 'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'aspectRatio', 'zIndex', 'direction', 'shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius', 'transform', 'transformMatrix', 'decomposedMatrix', 'scaleX', 'scaleY', 'rotation', 'translateX', 'translateY', 'resizeMode', 'backfaceVisibility', 'backgroundColor', 'borderColor', 'borderRadius', 'tintColor', 'opacity', 'overlayColor', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'];
+const ViewStylePropTypes = ['display', 'width', 'height', 'start', 'end', 'top', 'left', 'right', 'bottom', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'margin', 'marginVertical', 'marginHorizontal', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'marginStart', 'marginEnd', 'padding', 'paddingVertical', 'paddingHorizontal', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingEnd', 'borderWidth', 'borderTopWidth', 'borderStartWidth', 'borderEndWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'position', 'flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'alignSelf', 'alignContent', 'overflow', 'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'aspectRatio', 'zIndex', 'direction', 'shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius', 'transform', 'transformMatrix', 'decomposedMatrix', 'scaleX', 'scaleY', 'rotation', 'translateX', 'translateY', 'backfaceVisibility', 'backgroundColor', 'borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'borderStartColor', 'borderEndColor', 'borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStartRadius', 'borderTopEndRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStartRadius', 'borderBottomEndRadius', 'borderStyle', 'opacity', 'elevation'];
+const TextStylePropTypes = ['display', 'width', 'height', 'start', 'end', 'top', 'left', 'right', 'bottom', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'margin', 'marginVertical', 'marginHorizontal', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'marginStart', 'marginEnd', 'padding', 'paddingVertical', 'paddingHorizontal', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingEnd', 'borderWidth', 'borderTopWidth', 'borderStartWidth', 'borderEndWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'position', 'flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'alignSelf', 'alignContent', 'overflow', 'flex', 'flexGrow', 'flexShrink', 'flexBasis', 'aspectRatio', 'zIndex', 'direction', 'shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius', 'transform', 'transformMatrix', 'decomposedMatrix', 'scaleX', 'scaleY', 'rotation', 'translateX', 'translateY', 'backfaceVisibility', 'backgroundColor', 'borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'borderStartColor', 'borderEndColor', 'borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStartRadius', 'borderTopEndRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStartRadius', 'borderBottomEndRadius', 'borderStyle', 'opacity', 'elevation', 'color', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'fontVariant', 'textShadowOffset', 'textShadowRadius', 'textShadowColor', 'letterSpacing', 'lineHeight', 'textAlign', 'textAlignVertical', 'includeFontPadding', 'textDecorationLine', 'textDecorationStyle', 'textDecorationColor', 'textTransform', 'writingDirection']
 
 // Filter prop-types that are only applicable to <Text> and not <View>
-export let TextOnlyPropTypes = {};
-Object.keys(TextStylesPropTypes).forEach((prop) => {
-    if (!DeprecatedViewStylePropTypes[prop]) {
-        TextOnlyPropTypes[prop] = TextStylesPropTypes[prop];
-    }
-});
+export const TextOnlyPropTypes = TextStylePropTypes.filter((prop) => ViewStylePropTypes.indexOf(prop) === -1);
 
 // These tags should ALWAYS be mapped to View wrappers
 export const BLOCK_TAGS = ['address', 'article', 'aside', 'footer', 'hgroup', 'nav', 'section', 'blockquote', 'dd',
@@ -41,7 +38,8 @@ export const ABSOLUTE_FONT_SIZE = {
     'larger': 16,
     'length': null,
     'initial': null,
-    'inherit': null
+    'inherit': null,
+    'unset': null
 };
 
 export const IGNORED_TAGS = ['head', 'scripts', 'audio', 'video', 'track', 'embed', 'object', 'param', 'source', 'canvas', 'noscript',
@@ -57,20 +55,12 @@ export const PERC_SUPPORTED_STYLES = [
     'padding', 'paddingBottom', 'paddingTop', 'paddingLeft', 'paddingRight', 'paddingHorizontal', 'paddingVertical'
 ];
 
-// We have to do some munging here as the objects are wrapped
-const RNTextStylePropTypes = Object.keys(TextStylesPropTypes)
-    .reduce((acc, k) => { acc[k] = TextStylesPropTypes[k]; return acc; }, {});
-const RNViewStylePropTypes = Object.keys(DeprecatedViewStylePropTypes)
-    .reduce((acc, k) => { acc[k] = DeprecatedViewStylePropTypes[k]; return acc; }, {});
-const RNImageStylePropTypes = Object.keys(DeprecatedImageStylesPropTypes)
-    .reduce((acc, k) => { acc[k] = DeprecatedImageStylesPropTypes[k]; return acc; }, {});
-
 export const STYLESETS = Object.freeze({ VIEW: 'view', TEXT: 'text', IMAGE: 'image' });
-
-export const stylePropTypes = {};
-stylePropTypes[STYLESETS.VIEW] = Object.assign({}, RNViewStylePropTypes);
-stylePropTypes[STYLESETS.TEXT] = Object.assign({}, RNViewStylePropTypes, RNTextStylePropTypes);
-stylePropTypes[STYLESETS.IMAGE] = Object.assign({}, RNViewStylePropTypes, RNImageStylePropTypes);
+export const stylePropTypes = {
+    [STYLESETS.VIEW]: ViewStylePropTypes,
+    [STYLESETS.TEXT]: TextStylePropTypes,
+    [STYLESETS.IMAGE]: ImageStylePropTypes
+};
 
 /**
  * Returns an array with the tagname of every parent of a node.