Skip to content

Commit 71c7cb2

Browse files
mlwilkersonmlwilkerson
authored
Initial basic implementation (FortAwesome#1)
* Carry over the core of `@fortawesome/react-fontawesome` * Add height and width props with defaults * Add example Hello app * Configure Babel * Move humps to dependencies from devDependencies
1 parent 20df106 commit 71c7cb2

23 files changed

+6370
-97
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -54,3 +54,5 @@ buck-out/
5454

5555
# Bundle artifact
5656
*.jsbundle
57+
58+
*.swp

‎babel.config.js

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
module.exports = function (api) {
2-
api.cache(false);
3-
4-
const presets = ["module:metro-react-native-babel-preset"];
2+
api.cache(false)
53

64
return {
7-
presets
8-
};
9-
}
5+
presets: [
6+
"@babel/preset-env",
7+
"@babel/preset-react"
8+
]
9+
}
10+
}

‎dist/components/FontAwesomeIcon.js

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = FontAwesomeIcon;
7+
8+
var _react = _interopRequireDefault(require("react"));
9+
10+
var _converter = _interopRequireDefault(require("../converter"));
11+
12+
var _propTypes = _interopRequireDefault(require("prop-types"));
13+
14+
var _reactNative = require("react-native");
15+
16+
var _fontawesomeSvgCore = require("@fortawesome/fontawesome-svg-core");
17+
18+
var _logger = _interopRequireDefault(require("../logger"));
19+
20+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21+
22+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
23+
24+
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
25+
26+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
27+
28+
var _Dimensions$get = _reactNative.Dimensions.get('window'),
29+
windowWidth = _Dimensions$get.width,
30+
windowHeight = _Dimensions$get.height;
31+
32+
function objectWithKey(key, value) {
33+
return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
34+
}
35+
36+
function normalizeIconArgs(icon) {
37+
if (icon === null) {
38+
return null;
39+
}
40+
41+
if (_typeof(icon) === 'object' && icon.prefix && icon.iconName) {
42+
return icon;
43+
}
44+
45+
if (Array.isArray(icon) && icon.length === 2) {
46+
return {
47+
prefix: icon[0],
48+
iconName: icon[1]
49+
};
50+
}
51+
52+
if (typeof icon === 'string') {
53+
return {
54+
prefix: 'fas',
55+
iconName: icon
56+
};
57+
}
58+
}
59+
60+
function FontAwesomeIcon(props) {
61+
var iconArgs = props.icon,
62+
maskArgs = props.mask,
63+
_props$height = props.height,
64+
height = _props$height === void 0 ? windowHeight * 0.1 : _props$height,
65+
_props$width = props.width,
66+
width = _props$width === void 0 ? windowWidth * 0.1 : _props$width;
67+
var iconLookup = normalizeIconArgs(iconArgs);
68+
var transform = objectWithKey('transform', typeof props.transform === 'string' ? _fontawesomeSvgCore.parse.transform(props.transform) : props.transform);
69+
var mask = objectWithKey('mask', normalizeIconArgs(maskArgs));
70+
var renderedIcon = (0, _fontawesomeSvgCore.icon)(iconLookup, _objectSpread({}, transform, mask));
71+
72+
if (!renderedIcon) {
73+
(0, _logger.default)("ERROR: icon not found for icon = ", iconArgs);
74+
return null;
75+
}
76+
77+
var abstract = renderedIcon.abstract;
78+
var extraProps = {
79+
height: height,
80+
width: width
81+
};
82+
Object.keys(props).forEach(function (key) {
83+
if (!FontAwesomeIcon.defaultProps.hasOwnProperty(key)) {
84+
extraProps[key] = props[key];
85+
}
86+
});
87+
return convertCurry(abstract[0], extraProps);
88+
}
89+
90+
FontAwesomeIcon.displayName = 'FontAwesomeIcon';
91+
FontAwesomeIcon.propTypes = {
92+
mask: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array, _propTypes.default.string]),
93+
icon: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array, _propTypes.default.string]),
94+
listItem: _propTypes.default.bool,
95+
pull: _propTypes.default.oneOf(['right', 'left']),
96+
pulse: _propTypes.default.bool,
97+
rotation: _propTypes.default.oneOf([90, 180, 270]),
98+
spin: _propTypes.default.bool,
99+
transform: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])
100+
};
101+
FontAwesomeIcon.defaultProps = {
102+
mask: null,
103+
inverse: false,
104+
icon: null,
105+
listItem: false,
106+
pull: null,
107+
pulse: false,
108+
rotation: null,
109+
spin: false,
110+
transform: null
111+
};
112+
113+
var convertCurry = _converter.default.bind(null, _react.default.createElement);

‎dist/converter.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = void 0;
7+
8+
var _humps = _interopRequireDefault(require("humps"));
9+
10+
var _reactNativeSvg = require("react-native-svg");
11+
12+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13+
14+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
15+
16+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
17+
18+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
19+
20+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
21+
22+
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
23+
24+
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; } }
25+
26+
var svgObjectMap = {
27+
"svg": _reactNativeSvg.Svg,
28+
"path": _reactNativeSvg.Path
29+
};
30+
31+
function convert(createElement, element) {
32+
var extraProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
33+
34+
if (typeof element === 'string') {
35+
return element;
36+
}
37+
38+
var children = (element.children || []).map(convert.bind(null, createElement));
39+
var mixins = Object.keys(element.attributes || {}).reduce(function (acc, key) {
40+
var val = element.attributes[key];
41+
42+
switch (key) {
43+
case 'class':
44+
case 'fill':
45+
case 'role':
46+
case 'style':
47+
case 'xmlns':
48+
delete element.attributes[key];
49+
break;
50+
51+
default:
52+
if (key.indexOf('aria-') === 0 || key.indexOf('data-') === 0) {
53+
delete element.attributes[key];
54+
} else {
55+
acc.attrs[_humps.default.camelize(key)] = val;
56+
}
57+
58+
}
59+
60+
return acc;
61+
}, {
62+
attrs: {}
63+
});
64+
return createElement.apply(void 0, [svgObjectMap[element.tag], _objectSpread({}, mixins.attrs, extraProps)].concat(_toConsumableArray(children)));
65+
}
66+
67+
var _default = convert;
68+
exports.default = _default;

‎dist/logger.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = _default;
7+
var PRODUCTION = false;
8+
9+
function _default() {
10+
if (!PRODUCTION && console && typeof console.error === 'function') {
11+
var _console;
12+
13+
(_console = console).error.apply(_console, arguments);
14+
}
15+
}

‎examples/Hello/.babelrc

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": ["babel-preset-expo"],
3+
"env": {
4+
"development": {
5+
"plugins": ["transform-react-jsx-source"]
6+
}
7+
}
8+
}

‎examples/Hello/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules/**/*
2+
.expo/*
3+
npm-debug.*

‎examples/Hello/.watchmanconfig

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎examples/Hello/App.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react'
2+
import { Dimensions, StyleSheet, Text, ScrollView } from 'react-native'
3+
import { Svg, Path, ClipPath, Defs, Mask, G, Rect } from 'react-native-svg'
4+
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
5+
import { faCoffee, faBeer } from '@fortawesome/free-solid-svg-icons'
6+
7+
const { width, height } = Dimensions.get('window')
8+
9+
export default class App extends React.Component {
10+
render() {
11+
return (
12+
<ScrollView style={styles.contentContainer}>
13+
<Text>Show me some icons:</Text>
14+
<FontAwesomeIcon icon={ faCoffee } />
15+
<FontAwesomeIcon icon={ faBeer } />
16+
</ScrollView>
17+
)
18+
}
19+
}
20+
21+
const styles = StyleSheet.create({
22+
contentContainer: {
23+
paddingVertical: 50,
24+
marginLeft: 20
25+
},
26+
})

‎examples/Hello/app.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"expo": {
3+
"name": "Hello",
4+
"description": "This project is really great.",
5+
"slug": "Hello",
6+
"privacy": "public",
7+
"sdkVersion": "30.0.0",
8+
"platforms": ["ios", "android"],
9+
"version": "1.0.0",
10+
"orientation": "portrait",
11+
"icon": "./assets/icon.png",
12+
"splash": {
13+
"image": "./assets/splash.png",
14+
"resizeMode": "contain",
15+
"backgroundColor": "#ffffff"
16+
},
17+
"updates": {
18+
"fallbackToCacheTimeout": 0
19+
},
20+
"assetBundlePatterns": [
21+
"**/*"
22+
],
23+
"ios": {
24+
"supportsTablet": true
25+
}
26+
}
27+
}

‎examples/Hello/assets/icon.png

2.91 KB
Loading

‎examples/Hello/assets/splash.png

7.01 KB
Loading

‎examples/Hello/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "empty-project-template",
3+
"main": "node_modules/expo/AppEntry.js",
4+
"private": true,
5+
"scripts": {
6+
"start": "expo start",
7+
"android": "expo start --android",
8+
"ios": "expo start --ios",
9+
"eject": "expo eject"
10+
},
11+
"dependencies": {
12+
"@fortawesome/fontawesome-svg-core": "^1.2.4",
13+
"@fortawesome/free-solid-svg-icons": "^5.3.1",
14+
"@fortawesome/react-native-fontawesome": "git+ssh://[email protected]/FortAwesome/react-native-fontawesome#dev",
15+
"expo": "^30.0.1",
16+
"react": "16.3.1",
17+
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
18+
"react-native-fontawesome": "git+ssh://[email protected]/FortAwesome/react-native-fontawesome#dev",
19+
"react-native-svg": "^7.0.3"
20+
}
21+
}

0 commit comments

Comments
 (0)