Add style prop handling (#8)

Author: mlwilkerson

dist/components/FontAwesomeIcon.js

@@ -59,15 +59,11 @@ function normalizeIconArgs(icon) {
 
 function FontAwesomeIcon(props) {
   var iconArgs = props.icon,
-      maskArgs = props.mask,
-      _props$height = props.height,
-      height = _props$height === void 0 ? windowHeight * 0.1 : _props$height,
-      _props$width = props.width,
-      width = _props$width === void 0 ? windowWidth * 0.1 : _props$width;
+      height = props.height,
+      width = props.width,
+      style = props.style;
   var iconLookup = normalizeIconArgs(iconArgs);
-  var transform = objectWithKey('transform', typeof props.transform === 'string' ? _fontawesomeSvgCore.parse.transform(props.transform) : props.transform);
-  var mask = objectWithKey('mask', normalizeIconArgs(maskArgs));
-  var renderedIcon = (0, _fontawesomeSvgCore.icon)(iconLookup, _objectSpread({}, transform, mask));
+  var renderedIcon = (0, _fontawesomeSvgCore.icon)(iconLookup);
 
   if (!renderedIcon) {
     (0, _logger.default)("ERROR: icon not found for icon = ", iconArgs);
@@ -77,7 +73,8 @@ function FontAwesomeIcon(props) {
   var abstract = renderedIcon.abstract;
   var extraProps = {
     height: height,
-    width: width
+    width: width,
+    style: style
   };
   Object.keys(props).forEach(function (key) {
     if (!FontAwesomeIcon.defaultProps.hasOwnProperty(key)) {
@@ -89,25 +86,16 @@ function FontAwesomeIcon(props) {
 
 FontAwesomeIcon.displayName = 'FontAwesomeIcon';
 FontAwesomeIcon.propTypes = {
-  mask: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array, _propTypes.default.string]),
-  icon: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array, _propTypes.default.string]),
-  listItem: _propTypes.default.bool,
-  pull: _propTypes.default.oneOf(['right', 'left']),
-  pulse: _propTypes.default.bool,
-  rotation: _propTypes.default.oneOf([90, 180, 270]),
-  spin: _propTypes.default.bool,
-  transform: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])
+  height: _propTypes.default.number,
+  width: _propTypes.default.number,
+  style: _propTypes.default.shape(_objectSpread({}, _reactNative.ViewPropTypes.style)),
+  icon: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array, _propTypes.default.string])
 };
 FontAwesomeIcon.defaultProps = {
-  mask: null,
-  inverse: false,
   icon: null,
-  listItem: false,
-  pull: null,
-  pulse: false,
-  rotation: null,
-  spin: false,
-  transform: null
+  style: null,
+  height: windowHeight * 0.1,
+  width: windowWidth * 0.1
 };
 
 var convertCurry = _converter.default.bind(null, _react.default.createElement);

dist/converter.js

@@ -23,32 +23,55 @@ function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var svgObjectMap = {
   "svg": _reactNativeSvg.Svg,
-  "path": _reactNativeSvg.Path
+  "path": _reactNativeSvg.Path,
+  "rect": _reactNativeSvg.Rect,
+  "defs": _reactNativeSvg.Defs,
+  "mask": _reactNativeSvg.Mask,
+  "g": _reactNativeSvg.G,
+  "clipPath": _reactNativeSvg.ClipPath
 };
 
 function convert(createElement, element) {
   var extraProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
+  // console.log(`DEBUG: in convert. element.tag = ${element.tag} and extraProps = `, extraProps)
+  // console.log(`DEBUG: in convert. element.attributes = `, element.attributes)
   if (typeof element === 'string') {
     return element;
   }
 
-  var children = (element.children || []).map(convert.bind(null, createElement));
+  var children = (element.children || []).map(function (child) {
+    return convert(createElement, child, extraProps);
+  });
   var mixins = Object.keys(element.attributes || {}).reduce(function (acc, key) {
     var val = element.attributes[key];
 
     switch (key) {
       case 'class':
-      case 'fill':
       case 'role':
-      case 'style':
+      case 'style': // TODO: when react-native-svg supports the style prop, there may be a better way to do this.
+      // In the meantime, we're manually peeling off specific style properties, namely color, and passing them down
+      // to children as a fill prop
+      // See: https://github.com/react-native-community/react-native-svg/commit/e7d0eb6df676d4f63f9eba7c0cf5ddd6c4c85fbe
+
       case 'xmlns':
         delete element.attributes[key];
         break;
 
+      case 'fill':
+        // TODO: probably want to keep fill, but just translate 'currentColor' to 'black'
+        // When react-native-svg supports currentColor, pass it through
+        acc.attrs[key] = val === 'currentColor' ? 'black' : val;
+        break;
+
       default:
+        // console.log(`DEBUG: for element tag <${element.tag}>, setting prop key=val to ${key}=`, val)
         if (key.indexOf('aria-') === 0 || key.indexOf('data-') === 0) {
           delete element.attributes[key];
         } else {
@@ -61,7 +84,19 @@ function convert(createElement, element) {
   }, {
     attrs: {}
   });
-  return createElement.apply(void 0, [svgObjectMap[element.tag], _objectSpread({}, mixins.attrs, extraProps)].concat(_toConsumableArray(children)));
+
+  var style = // get rid of this key
+  // store the result here
+  extraProps.style,
+      modifiedExtraProps = _objectWithoutProperties(extraProps, ["style"]); // If a color was passed in as a style sheet on the style prop, set the fill attribute to its value
+
+
+  if (extraProps.style && extraProps.style.color) {
+    modifiedExtraProps['fill'] = extraProps.style.color;
+  } // console.log(`DEBUG: while creating element with tag=${element.tag}, we have extraProps: `, extraProps )
+
+
+  return createElement.apply(void 0, [svgObjectMap[element.tag], _objectSpread({}, mixins.attrs, modifiedExtraProps)].concat(_toConsumableArray(children)));
 }
 
 var _default = convert;

examples/Hello/App.js

@@ -32,13 +32,17 @@ export default class App extends Component<Props> {
         <Text style={styles.instructions}>And now, for some icons:</Text>
 
         <FontAwesomeIcon icon={ faCoffee } />
-        <FontAwesomeIcon icon={ faBeer } />
+        <FontAwesomeIcon icon={ faBeer } style={ styles.icon } />
+
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
+  icon: {
+    color: 'green'
+  },
   container: {
     flex: 1,
     justifyContent: 'center',

examples/Hello/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.5",
     "@fortawesome/free-solid-svg-icons": "^5.4.0",
-    "@fortawesome/react-native-fontawesome": "^0.0.1",
+    "@fortawesome/react-native-fontawesome": "https://github.com/FortAwesome/react-native-fontawesome",
     "react": "16.5.0",
     "react-native": "0.57.2",
     "react-native-svg": "^7.0.3"

examples/Hello/yarn.lock

@@ -664,10 +664,9 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "^0.2.5"
 
-"@fortawesome/react-native-fontawesome@^0.0.1":
+"@fortawesome/react-native-fontawesome@https://github.com/FortAwesome/react-native-fontawesome":
   version "0.0.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/react-native-fontawesome/-/react-native-fontawesome-0.0.1.tgz#d960f949c43c0ac4b1122f4b67aaff0a2eda5486"
-  integrity sha512-B4ga5xk+8wp3B2Ye5S2or177euOZyAVrh3TIX5sBOPzX7GnhpD9zFwqXLHLTkf91olgp4P6HQIQO218YKSrZBw==
+  resolved "https://github.com/FortAwesome/react-native-fontawesome#9f6ee143563c402e5c5443ee6d8aaf365c3025d7"
   dependencies:
     humps "^2.0.1"
     prop-types "^15.6.2"

src/components/FontAwesomeIcon.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import convert from '../converter'
 import PropTypes from 'prop-types'
-import { Dimensions, Text, View } from 'react-native'
+import { Dimensions, Text, View, ViewPropTypes } from 'react-native'
 import { icon, parse } from '@fortawesome/fontawesome-svg-core'
 import log from '../logger'
 
@@ -33,19 +33,19 @@ function normalizeIconArgs(icon) {
 }
 
 export default function FontAwesomeIcon(props) {
-  const { icon: iconArgs, height = windowHeight * 0.1, width  = windowWidth * 0.1 } = props
+  const { icon: iconArgs, height, width, style } = props
 
   const iconLookup = normalizeIconArgs(iconArgs)
 
-  const renderedIcon = icon(iconLookup, {})
+  const renderedIcon = icon(iconLookup)
 
   if (!renderedIcon) {
     log("ERROR: icon not found for icon = ", iconArgs)
     return null
   }
 
   const { abstract } = renderedIcon
-  const extraProps = { height, width }
+  const extraProps = { height, width, style }
 
   Object.keys(props).forEach(key => {
     if (!FontAwesomeIcon.defaultProps.hasOwnProperty(key)) {
@@ -64,6 +64,8 @@ FontAwesomeIcon.propTypes = {
 
   width: PropTypes.number,
 
+  style: PropTypes.shape({ ...ViewPropTypes.style }),
+
   icon: PropTypes.oneOfType([
     PropTypes.object,
     PropTypes.array,
@@ -72,7 +74,10 @@ FontAwesomeIcon.propTypes = {
 }
 
 FontAwesomeIcon.defaultProps = {
-  icon: null
+  icon: null,
+  style: null,
+  height: windowHeight * 0.1,
+  width: windowWidth * 0.1
 }
 
 const convertCurry = convert.bind(null, React.createElement)

src/components/__tests__/FontAwesomeIcon.test.js

@@ -2,6 +2,7 @@ import * as fontawesome from '@fortawesome/fontawesome-svg-core'
 import FontAwesomeIcon from '../FontAwesomeIcon'
 import React from 'react'
 import renderer from 'react-test-renderer'
+import { StyleSheet } from 'react-native'
 
 const faCoffee = {
   prefix: 'fas',
@@ -31,16 +32,25 @@ fontawesome.library.add(faCoffee, faCircle)
 
 test('renders correctly', () => {
   const tree = renderer.create(<FontAwesomeIcon height={10} width={10} icon={ ['fas', 'coffee'] } />).toJSON()
-  expect(tree).toMatchSnapshot();
+  expect(tree).toMatchSnapshot()
 })
 
 test('renders correctly with default height and width', () => {
   const tree = renderer.create(<FontAwesomeIcon icon={ ['fas', 'coffee'] } />).toJSON()
-  expect(tree).toMatchSnapshot();
+  expect(tree).toMatchSnapshot()
 })
 
 test('renders with icon object prop', () => {
   const tree = renderer.create(<FontAwesomeIcon icon={ faCoffee } />).toJSON()
-  expect(tree).toMatchSnapshot();
+  expect(tree).toMatchSnapshot()
 })
 
+test('renders with style prop setting color', () => {
+  const styles = StyleSheet.create({
+    icon: {
+      color: 'blue'
+    }
+  })
+  const tree = renderer.create(<FontAwesomeIcon icon={ faCoffee } style={ styles.icon }/>).toJSON()
+  expect(tree).toMatchSnapshot()
+})

src/components/__tests__/__snapshots__/FontAwesomeIcon.test.js.snap

@@ -51,7 +51,11 @@ exports[`renders correctly 1`] = `
     opacity={1}
     originX={0}
     originY={0}
-    propList={Array []}
+    propList={
+      Array [
+        "fill",
+      ]
+    }
     rotation={0}
     scaleX={1}
     scaleY={1}
@@ -122,7 +126,11 @@ exports[`renders correctly with default height and width 1`] = `
     opacity={1}
     originX={0}
     originY={0}
-    propList={Array []}
+    propList={
+      Array [
+        "fill",
+      ]
+    }
     rotation={0}
     scaleX={1}
     scaleY={1}
@@ -193,7 +201,87 @@ exports[`renders with icon object prop 1`] = `
     opacity={1}
     originX={0}
     originY={0}
-    propList={Array []}
+    propList={
+      Array [
+        "fill",
+      ]
+    }
+    rotation={0}
+    scaleX={1}
+    scaleY={1}
+    skewX={0}
+    skewY={0}
+    stroke={null}
+    strokeDasharray={null}
+    strokeDashoffset={null}
+    strokeLinecap={0}
+    strokeLinejoin={0}
+    strokeMiterlimit={4}
+    strokeOpacity={1}
+    strokeWidth="1"
+    x={0}
+    y={0}
+  />
+</RNSVGSvgView>
+`;
+
+exports[`renders with style prop setting color 1`] = `
+<RNSVGSvgView
+  align="xMidYMid"
+  bbHeight="133.4"
+  bbWidth="75"
+  fill="blue"
+  meetOrSlice={0}
+  minX={0}
+  minY={0}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "transparent",
+      },
+      undefined,
+      false,
+      Object {
+        "flex": 0,
+        "height": 133.4,
+        "width": 75,
+      },
+    ]
+  }
+  vbHeight={512}
+  vbWidth={640}
+>
+  <RNSVGPath
+    d="M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z"
+    fill={
+      Array [
+        0,
+        0,
+        0,
+        1,
+        1,
+      ]
+    }
+    fillOpacity={1}
+    fillRule={1}
+    matrix={
+      Array [
+        1,
+        0,
+        0,
+        1,
+        0,
+        0,
+      ]
+    }
+    opacity={1}
+    originX={0}
+    originY={0}
+    propList={
+      Array [
+        "fill",
+      ]
+    }
     rotation={0}
     scaleX={1}
     scaleY={1}