UNPKG

12.9 kBJavaScriptView Raw
1import { parse, icon } from '@fortawesome/fontawesome-svg-core';
2import PropTypes from 'prop-types';
3import React from 'react';
4
5function ownKeys(object, enumerableOnly) {
6 var keys = Object.keys(object);
7
8 if (Object.getOwnPropertySymbols) {
9 var symbols = Object.getOwnPropertySymbols(object);
10 enumerableOnly && (symbols = symbols.filter(function (sym) {
11 return Object.getOwnPropertyDescriptor(object, sym).enumerable;
12 })), keys.push.apply(keys, symbols);
13 }
14
15 return keys;
16}
17
18function _objectSpread2(target) {
19 for (var i = 1; i < arguments.length; i++) {
20 var source = null != arguments[i] ? arguments[i] : {};
21 i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
22 _defineProperty(target, key, source[key]);
23 }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
24 Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
25 });
26 }
27
28 return target;
29}
30
31function _typeof(obj) {
32 "@babel/helpers - typeof";
33
34 return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
35 return typeof obj;
36 } : function (obj) {
37 return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
38 }, _typeof(obj);
39}
40
41function _defineProperty(obj, key, value) {
42 if (key in obj) {
43 Object.defineProperty(obj, key, {
44 value: value,
45 enumerable: true,
46 configurable: true,
47 writable: true
48 });
49 } else {
50 obj[key] = value;
51 }
52
53 return obj;
54}
55
56function _objectWithoutPropertiesLoose(source, excluded) {
57 if (source == null) return {};
58 var target = {};
59 var sourceKeys = Object.keys(source);
60 var key, i;
61
62 for (i = 0; i < sourceKeys.length; i++) {
63 key = sourceKeys[i];
64 if (excluded.indexOf(key) >= 0) continue;
65 target[key] = source[key];
66 }
67
68 return target;
69}
70
71function _objectWithoutProperties(source, excluded) {
72 if (source == null) return {};
73
74 var target = _objectWithoutPropertiesLoose(source, excluded);
75
76 var key, i;
77
78 if (Object.getOwnPropertySymbols) {
79 var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
80
81 for (i = 0; i < sourceSymbolKeys.length; i++) {
82 key = sourceSymbolKeys[i];
83 if (excluded.indexOf(key) >= 0) continue;
84 if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
85 target[key] = source[key];
86 }
87 }
88
89 return target;
90}
91
92function _toConsumableArray(arr) {
93 return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
94}
95
96function _arrayWithoutHoles(arr) {
97 if (Array.isArray(arr)) return _arrayLikeToArray(arr);
98}
99
100function _iterableToArray(iter) {
101 if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
102}
103
104function _unsupportedIterableToArray(o, minLen) {
105 if (!o) return;
106 if (typeof o === "string") return _arrayLikeToArray(o, minLen);
107 var n = Object.prototype.toString.call(o).slice(8, -1);
108 if (n === "Object" && o.constructor) n = o.constructor.name;
109 if (n === "Map" || n === "Set") return Array.from(o);
110 if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
111}
112
113function _arrayLikeToArray(arr, len) {
114 if (len == null || len > arr.length) len = arr.length;
115
116 for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
117
118 return arr2;
119}
120
121function _nonIterableSpread() {
122 throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
123}
124
125// Get CSS class list from a props object
126function classList(props) {
127 var _classes;
128
129 var beat = props.beat,
130 fade = props.fade,
131 beatFade = props.beatFade,
132 bounce = props.bounce,
133 shake = props.shake,
134 flash = props.flash,
135 spin = props.spin,
136 spinPulse = props.spinPulse,
137 spinReverse = props.spinReverse,
138 pulse = props.pulse,
139 fixedWidth = props.fixedWidth,
140 inverse = props.inverse,
141 border = props.border,
142 listItem = props.listItem,
143 flip = props.flip,
144 size = props.size,
145 rotation = props.rotation,
146 pull = props.pull; // map of CSS class names to properties
147
148 var classes = (_classes = {
149 'fa-beat': beat,
150 'fa-fade': fade,
151 'fa-beat-fade': beatFade,
152 'fa-bounce': bounce,
153 'fa-shake': shake,
154 'fa-flash': flash,
155 'fa-spin': spin,
156 'fa-spin-reverse': spinReverse,
157 'fa-spin-pulse': spinPulse,
158 'fa-pulse': pulse,
159 'fa-fw': fixedWidth,
160 'fa-inverse': inverse,
161 'fa-border': border,
162 'fa-li': listItem,
163 'fa-flip': flip === true,
164 'fa-flip-horizontal': flip === 'horizontal' || flip === 'both',
165 'fa-flip-vertical': flip === 'vertical' || flip === 'both'
166 }, _defineProperty(_classes, "fa-".concat(size), typeof size !== 'undefined' && size !== null), _defineProperty(_classes, "fa-rotate-".concat(rotation), typeof rotation !== 'undefined' && rotation !== null && rotation !== 0), _defineProperty(_classes, "fa-pull-".concat(pull), typeof pull !== 'undefined' && pull !== null), _defineProperty(_classes, 'fa-swap-opacity', props.swapOpacity), _classes); // map over all the keys in the classes object
167 // return an array of the keys where the value for the key is not null
168
169 return Object.keys(classes).map(function (key) {
170 return classes[key] ? key : null;
171 }).filter(function (key) {
172 return key;
173 });
174}
175
176// Camelize taken from humps
177// humps is copyright © 2012+ Dom Christie
178// Released under the MIT license.
179// Performant way to determine if object coerces to a number
180function _isNumerical(obj) {
181 obj = obj - 0; // eslint-disable-next-line no-self-compare
182
183 return obj === obj;
184}
185
186function camelize(string) {
187 if (_isNumerical(string)) {
188 return string;
189 } // eslint-disable-next-line no-useless-escape
190
191
192 string = string.replace(/[\-_\s]+(.)?/g, function (match, chr) {
193 return chr ? chr.toUpperCase() : '';
194 }); // Ensure 1st char is always lowercase
195
196 return string.substr(0, 1).toLowerCase() + string.substr(1);
197}
198
199var _excluded = ["style"];
200
201function capitalize(val) {
202 return val.charAt(0).toUpperCase() + val.slice(1);
203}
204
205function styleToObject(style) {
206 return style.split(';').map(function (s) {
207 return s.trim();
208 }).filter(function (s) {
209 return s;
210 }).reduce(function (acc, pair) {
211 var i = pair.indexOf(':');
212 var prop = camelize(pair.slice(0, i));
213 var value = pair.slice(i + 1).trim();
214 prop.startsWith('webkit') ? acc[capitalize(prop)] = value : acc[prop] = value;
215 return acc;
216 }, {});
217}
218
219function convert(createElement, element) {
220 var extraProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
221
222 if (typeof element === 'string') {
223 return element;
224 }
225
226 var children = (element.children || []).map(function (child) {
227 return convert(createElement, child);
228 });
229 /* eslint-disable dot-notation */
230
231 var mixins = Object.keys(element.attributes || {}).reduce(function (acc, key) {
232 var val = element.attributes[key];
233
234 switch (key) {
235 case 'class':
236 acc.attrs['className'] = val;
237 delete element.attributes['class'];
238 break;
239
240 case 'style':
241 acc.attrs['style'] = styleToObject(val);
242 break;
243
244 default:
245 if (key.indexOf('aria-') === 0 || key.indexOf('data-') === 0) {
246 acc.attrs[key.toLowerCase()] = val;
247 } else {
248 acc.attrs[camelize(key)] = val;
249 }
250
251 }
252
253 return acc;
254 }, {
255 attrs: {}
256 });
257
258 var _extraProps$style = extraProps.style,
259 existingStyle = _extraProps$style === void 0 ? {} : _extraProps$style,
260 remaining = _objectWithoutProperties(extraProps, _excluded);
261
262 mixins.attrs['style'] = _objectSpread2(_objectSpread2({}, mixins.attrs['style']), existingStyle);
263 /* eslint-enable */
264
265 return createElement.apply(void 0, [element.tag, _objectSpread2(_objectSpread2({}, mixins.attrs), remaining)].concat(_toConsumableArray(children)));
266}
267
268var PRODUCTION = false;
269
270try {
271 PRODUCTION = process.env.NODE_ENV === 'production';
272} catch (e) {}
273
274function log () {
275 if (!PRODUCTION && console && typeof console.error === 'function') {
276 var _console;
277
278 (_console = console).error.apply(_console, arguments);
279 }
280}
281
282function normalizeIconArgs(icon) {
283 // this has everything that it needs to be rendered which means it was probably imported
284 // directly from an icon svg package
285 if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {
286 return icon;
287 }
288
289 if (parse.icon) {
290 return parse.icon(icon);
291 } // if the icon is null, there's nothing to do
292
293
294 if (icon === null) {
295 return null;
296 } // if the icon is an object and has a prefix and an icon name, return it
297
298
299 if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName) {
300 return icon;
301 } // if it's an array with length of two
302
303
304 if (Array.isArray(icon) && icon.length === 2) {
305 // use the first item as prefix, second as icon name
306 return {
307 prefix: icon[0],
308 iconName: icon[1]
309 };
310 } // if it's a string, use it as the icon name
311
312
313 if (typeof icon === 'string') {
314 return {
315 prefix: 'fas',
316 iconName: icon
317 };
318 }
319}
320
321// creates an object with a key of key
322// and a value of value
323// if certain conditions are met
324function objectWithKey(key, value) {
325 // if the value is a non-empty array
326 // or it's not an array but it is truthy
327 // then create the object with the key and the value
328 // if not, return an empty array
329 return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
330}
331
332var FontAwesomeIcon = /*#__PURE__*/React.forwardRef(function (props, ref) {
333 var iconArgs = props.icon,
334 maskArgs = props.mask,
335 symbol = props.symbol,
336 className = props.className,
337 title = props.title,
338 titleId = props.titleId,
339 maskId = props.maskId;
340 var iconLookup = normalizeIconArgs(iconArgs);
341 var classes = objectWithKey('classes', [].concat(_toConsumableArray(classList(props)), _toConsumableArray(className.split(' '))));
342 var transform = objectWithKey('transform', typeof props.transform === 'string' ? parse.transform(props.transform) : props.transform);
343 var mask = objectWithKey('mask', normalizeIconArgs(maskArgs));
344 var renderedIcon = icon(iconLookup, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes), transform), mask), {}, {
345 symbol: symbol,
346 title: title,
347 titleId: titleId,
348 maskId: maskId
349 }));
350
351 if (!renderedIcon) {
352 log('Could not find icon', iconLookup);
353 return null;
354 }
355
356 var abstract = renderedIcon.abstract;
357 var extraProps = {
358 ref: ref
359 };
360 Object.keys(props).forEach(function (key) {
361 // eslint-disable-next-line no-prototype-builtins
362 if (!FontAwesomeIcon.defaultProps.hasOwnProperty(key)) {
363 extraProps[key] = props[key];
364 }
365 });
366 return convertCurry(abstract[0], extraProps);
367});
368FontAwesomeIcon.displayName = 'FontAwesomeIcon';
369FontAwesomeIcon.propTypes = {
370 beat: PropTypes.bool,
371 border: PropTypes.bool,
372 beatFade: PropTypes.bool,
373 bounce: PropTypes.bool,
374 className: PropTypes.string,
375 fade: PropTypes.bool,
376 flash: PropTypes.bool,
377 mask: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
378 maskId: PropTypes.string,
379 fixedWidth: PropTypes.bool,
380 inverse: PropTypes.bool,
381 flip: PropTypes.oneOf([true, false, 'horizontal', 'vertical', 'both']),
382 icon: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
383 listItem: PropTypes.bool,
384 pull: PropTypes.oneOf(['right', 'left']),
385 pulse: PropTypes.bool,
386 rotation: PropTypes.oneOf([0, 90, 180, 270]),
387 shake: PropTypes.bool,
388 size: PropTypes.oneOf(['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x']),
389 spin: PropTypes.bool,
390 spinPulse: PropTypes.bool,
391 spinReverse: PropTypes.bool,
392 symbol: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
393 title: PropTypes.string,
394 titleId: PropTypes.string,
395 transform: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
396 swapOpacity: PropTypes.bool
397};
398FontAwesomeIcon.defaultProps = {
399 border: false,
400 className: '',
401 mask: null,
402 maskId: null,
403 fixedWidth: false,
404 inverse: false,
405 flip: false,
406 icon: null,
407 listItem: false,
408 pull: null,
409 pulse: false,
410 rotation: null,
411 size: null,
412 spin: false,
413 spinPulse: false,
414 spinReverse: false,
415 beat: false,
416 fade: false,
417 beatFade: false,
418 bounce: false,
419 shake: false,
420 symbol: false,
421 title: '',
422 titleId: null,
423 transform: null,
424 swapOpacity: false
425};
426var convertCurry = convert.bind(null, React.createElement);
427
428export { FontAwesomeIcon };