react-avatar
Advanced tools
react-avatar - npm Package Compare versions
Comparing version 3.6.0 to 3.7.0
@@ -7,2 +7,3 @@ import "core-js/modules/es7.symbol.async-iterator"; | ||
| import "core-js/modules/es6.array.iterator"; | ||
| import "core-js/modules/es6.object.to-string"; | ||
| import "core-js/modules/es6.object.keys"; | ||
@@ -9,0 +10,0 @@ |
361
es/index.js
| 'use strict'; | ||
| import "core-js/modules/es7.symbol.async-iterator"; | ||
| import "core-js/modules/es6.symbol"; | ||
| import "core-js/modules/web.dom.iterable"; | ||
| import "core-js/modules/es6.array.iterator"; | ||
| import "core-js/modules/es6.object.keys"; | ||
| import "core-js/modules/es6.object.set-prototype-of"; | ||
| import "core-js/modules/es6.regexp.replace"; | ||
| import "core-js/modules/es6.function.name"; | ||
| import "core-js/modules/es6.object.assign"; | ||
| 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); } | ||
| 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; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } | ||
| function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
| function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } | ||
| function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
| function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } | ||
| function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
| 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; } | ||
| import React, { PureComponent } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { Cache } from './cache'; | ||
| import { withConfig, ConfigProvider } from './context'; | ||
| import { getRandomColor, parseSize, setGroupedTimeout } from './utils'; | ||
| import InternalState from './internal-state'; | ||
| import createAvatarComponent from './avatar'; | ||
| import gravatarSource from './sources/Gravatar'; | ||
@@ -51,309 +14,17 @@ import facebookSource from './sources/Facebook'; | ||
| import redirectSource from './sources/AvatarRedirect'; | ||
| var SOURCES = [facebookSource, googleSource, githubSource, twitterSource, redirectSource('twitter', 'twitterHandle'), redirectSource('instagram', 'instagramId'), redirectSource('vkontakte', 'vkontakteId'), skypeSource, gravatarSource, srcSource, valueSource, iconSource]; // Collect propTypes for each individual source | ||
| var sourcePropTypes = SOURCES.reduce(function (r, s) { | ||
| return Object.assign(r, s.propTypes); | ||
| }, {}); | ||
| export { getRandomColor } from './utils'; | ||
| export { ConfigProvider } from './context'; | ||
| export { Cache } from './cache'; | ||
| function matchSource(Source, props, cb) { | ||
| var cache = props.cache; | ||
| var instance = new Source(props); | ||
| if (!instance.isCompatible(props)) return cb(); | ||
| instance.get(function (state) { | ||
| var failedBefore = state && state.hasOwnProperty('src') && cache.hasSourceFailedBefore(state.src); | ||
| if (!failedBefore && state) { | ||
| cb(state); | ||
| } else { | ||
| cb(); | ||
| } | ||
| }); | ||
| } | ||
| export var Avatar = | ||
| /*#__PURE__*/ | ||
| function (_PureComponent) { | ||
| _inherits(Avatar, _PureComponent); | ||
| function Avatar(props) { | ||
| var _this; | ||
| _classCallCheck(this, Avatar); | ||
| _this = _possibleConstructorReturn(this, _getPrototypeOf(Avatar).call(this, props)); | ||
| _defineProperty(_assertThisInitialized(_this), "_createFetcher", function (internal) { | ||
| return function (errEvent) { | ||
| var cache = _this.props.cache; | ||
| if (!internal.isActive(_this.state)) return; // Mark img source as failed for future reference | ||
| if (errEvent && errEvent.type === 'error') cache.sourceFailed(errEvent.target.src); | ||
| var pointer = internal.sourcePointer; | ||
| if (SOURCES.length === pointer) return; | ||
| var source = SOURCES[pointer]; | ||
| internal.sourcePointer++; | ||
| matchSource(source, _this.props, function (nextState) { | ||
| if (!nextState) return setTimeout(internal.fetch, 0); | ||
| if (!internal.isActive(_this.state)) return; // Reset other values to prevent them from sticking (#51) | ||
| nextState = _objectSpread({ | ||
| src: null, | ||
| value: null, | ||
| color: null | ||
| }, nextState); | ||
| _this.setState(function (state) { | ||
| // Internal state has been reset => we received new props | ||
| return internal.isActive(state) ? nextState : {}; | ||
| }); | ||
| }); | ||
| }; | ||
| }); | ||
| _defineProperty(_assertThisInitialized(_this), "fetch", function () { | ||
| var internal = new InternalState(); | ||
| internal.fetch = _this._createFetcher(internal); | ||
| _this.setState({ | ||
| internal: internal | ||
| }, internal.fetch); | ||
| }); | ||
| _defineProperty(_assertThisInitialized(_this), "_scaleTextNode", function (node) { | ||
| var retryTTL = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16; | ||
| var _this$props = _this.props, | ||
| unstyled = _this$props.unstyled, | ||
| textSizeRatio = _this$props.textSizeRatio, | ||
| textMarginRatio = _this$props.textMarginRatio; | ||
| if (!node || unstyled || _this.state.src || !_this.mounted) return; | ||
| var spanNode = node.parentNode; | ||
| var tableNode = spanNode.parentNode; | ||
| var _spanNode$getBounding = spanNode.getBoundingClientRect(), | ||
| containerWidth = _spanNode$getBounding.width, | ||
| containerHeight = _spanNode$getBounding.height; // Whenever the avatar element is not visible due to some CSS | ||
| // (such as display: none) on any parent component we will check | ||
| // whether the component has become visible. | ||
| // | ||
| // The time between checks grows up to half a second in an attempt | ||
| // to reduce flicker / performance issues. | ||
| if (containerWidth == 0 && containerHeight == 0) { | ||
| var ttl = Math.min(retryTTL * 1.5, 500); | ||
| setGroupedTimeout(function () { | ||
| return _this._scaleTextNode(node, ttl); | ||
| }, ttl); | ||
| return; | ||
| } // If the tableNode (outer-container) does not have its fontSize set yet, | ||
| // we'll set it according to "textSizeRatio" | ||
| if (!tableNode.style.fontSize) { | ||
| var baseFontSize = containerHeight / textSizeRatio; | ||
| tableNode.style.fontSize = "".concat(baseFontSize, "px"); | ||
| } // Reset font-size such that scaling works correctly (#133) | ||
| spanNode.style.fontSize = null; // Measure the actual width of the text after setting the container size | ||
| var _node$getBoundingClie = node.getBoundingClientRect(), | ||
| textWidth = _node$getBoundingClie.width; | ||
| if (textWidth < 0) return; // Calculate the maximum width for the text based on "textMarginRatio" | ||
| var maxTextWidth = containerWidth * (1 - 2 * textMarginRatio); // If the text is too wide, scale it down by (maxWidth / actualWidth) | ||
| if (textWidth > maxTextWidth) spanNode.style.fontSize = "calc(1em * ".concat(maxTextWidth / textWidth, ")"); | ||
| }); | ||
| _this.state = { | ||
| internal: null, | ||
| src: null, | ||
| value: null, | ||
| color: props.color | ||
| }; | ||
| return _this; | ||
| } | ||
| _createClass(Avatar, [{ | ||
| key: "componentDidMount", | ||
| value: function componentDidMount() { | ||
| this.mounted = true; | ||
| this.fetch(); | ||
| } | ||
| }, { | ||
| key: "componentWillReceiveProps", | ||
| value: function componentWillReceiveProps(newProps) { | ||
| var needsUpdate = false; // This seems redundant | ||
| // | ||
| // Props that need to be in `state` are | ||
| // `value`, `src` and `color` | ||
| for (var prop in sourcePropTypes) { | ||
| needsUpdate = needsUpdate || newProps[prop] !== this.props[prop]; | ||
| } | ||
| if (needsUpdate) setTimeout(this.fetch, 0); | ||
| } | ||
| }, { | ||
| key: "componentWillUnmount", | ||
| value: function componentWillUnmount() { | ||
| this.mounted = false; | ||
| if (this.state.internal) { | ||
| this.state.internal.active = false; | ||
| } | ||
| } | ||
| }, { | ||
| key: "_renderAsImage", | ||
| value: function _renderAsImage() { | ||
| var _this$props2 = this.props, | ||
| className = _this$props2.className, | ||
| round = _this$props2.round, | ||
| unstyled = _this$props2.unstyled, | ||
| name = _this$props2.name, | ||
| value = _this$props2.value; | ||
| var internal = this.state.internal; | ||
| var size = parseSize(this.props.size); | ||
| var alt = name || value; | ||
| var imageStyle = unstyled ? null : { | ||
| maxWidth: '100%', | ||
| width: size.str, | ||
| height: size.str, | ||
| borderRadius: round === true ? '100%' : round | ||
| }; | ||
| return React.createElement("img", { | ||
| className: className + ' sb-avatar__image', | ||
| width: size.str, | ||
| height: size.str, | ||
| style: imageStyle, | ||
| src: this.state.src, | ||
| alt: alt, | ||
| onError: internal && internal.fetch | ||
| }); | ||
| } | ||
| }, { | ||
| key: "_renderAsText", | ||
| value: function _renderAsText() { | ||
| var _this$props3 = this.props, | ||
| className = _this$props3.className, | ||
| round = _this$props3.round, | ||
| unstyled = _this$props3.unstyled; | ||
| var size = parseSize(this.props.size); | ||
| var initialsStyle = unstyled ? null : { | ||
| width: size.str, | ||
| height: size.str, | ||
| lineHeight: 'initial', | ||
| textAlign: 'center', | ||
| textTransform: 'uppercase', | ||
| color: this.props.fgColor, | ||
| background: this.state.color, | ||
| borderRadius: round === true ? '100%' : round | ||
| }; | ||
| var tableStyle = unstyled ? null : { | ||
| display: 'table', | ||
| tableLayout: 'fixed', | ||
| width: '100%', | ||
| height: '100%' | ||
| }; | ||
| var spanStyle = unstyled ? null : { | ||
| display: 'table-cell', | ||
| verticalAlign: 'middle', | ||
| fontSize: '100%', | ||
| whiteSpace: 'nowrap' | ||
| }; | ||
| return React.createElement("div", { | ||
| className: className + ' sb-avatar__text', | ||
| style: initialsStyle | ||
| }, React.createElement("div", { | ||
| style: tableStyle | ||
| }, React.createElement("span", { | ||
| style: spanStyle | ||
| }, React.createElement("span", { | ||
| ref: this._scaleTextNode, | ||
| key: this.state.value | ||
| }, this.state.value)))); | ||
| } | ||
| }, { | ||
| key: "render", | ||
| value: function render() { | ||
| var _this$props4 = this.props, | ||
| className = _this$props4.className, | ||
| unstyled = _this$props4.unstyled, | ||
| round = _this$props4.round, | ||
| style = _this$props4.style, | ||
| onClick = _this$props4.onClick; | ||
| var _this$state = this.state, | ||
| src = _this$state.src, | ||
| sourceName = _this$state.sourceName; | ||
| var size = parseSize(this.props.size); | ||
| var hostStyle = unstyled ? null : _objectSpread({ | ||
| display: 'inline-block', | ||
| verticalAlign: 'middle', | ||
| width: size.str, | ||
| height: size.str, | ||
| borderRadius: round === true ? '100%' : round, | ||
| fontFamily: 'Helvetica, Arial, sans-serif' | ||
| }, style); | ||
| var classNames = [className, 'sb-avatar']; | ||
| if (sourceName) { | ||
| var source = sourceName.toLowerCase().replace(/[^a-z0-9-]+/g, '-') // only allow alphanumeric | ||
| .replace(/^-+|-+$/g, ''); // trim `-` | ||
| classNames.push('sb-avatar--' + source); | ||
| } | ||
| return React.createElement("div", { | ||
| className: classNames.join(' '), | ||
| onClick: onClick, | ||
| style: hostStyle | ||
| }, src ? this._renderAsImage() : this._renderAsText()); | ||
| } | ||
| }]); | ||
| return Avatar; | ||
| }(PureComponent); | ||
| _defineProperty(Avatar, "displayName", 'Avatar'); | ||
| _defineProperty(Avatar, "propTypes", _objectSpread({}, sourcePropTypes, { | ||
| className: PropTypes.string, | ||
| fgColor: PropTypes.string, | ||
| color: PropTypes.string, | ||
| colors: PropTypes.arrayOf(PropTypes.string), | ||
| round: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), | ||
| style: PropTypes.object, | ||
| size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | ||
| textSizeRatio: PropTypes.number, | ||
| textMarginRatio: PropTypes.number, | ||
| unstyled: PropTypes.bool, | ||
| cache: PropTypes.object, | ||
| onClick: PropTypes.func | ||
| })); | ||
| _defineProperty(Avatar, "defaultProps", { | ||
| className: '', | ||
| fgColor: '#FFF', | ||
| round: false, | ||
| size: 100, | ||
| textSizeRatio: 3, | ||
| textMarginRatio: .15, | ||
| unstyled: false | ||
| var SOURCES = [facebookSource, googleSource, githubSource, twitterSource, redirectSource('twitter', 'twitterHandle'), redirectSource('instagram', 'instagramId'), redirectSource('vkontakte', 'vkontakteId'), skypeSource, gravatarSource, srcSource, valueSource, iconSource]; | ||
| export * from './avatar'; | ||
| export { default as createAvatarComponent } from './avatar'; | ||
| export default createAvatarComponent({ | ||
| sources: SOURCES | ||
| }); | ||
| _defineProperty(Avatar, "getRandomColor", getRandomColor); | ||
| _defineProperty(Avatar, "Cache", Cache); | ||
| _defineProperty(Avatar, "ConfigProvider", ConfigProvider); | ||
| export default Object.assign(withConfig(Avatar), { | ||
| getRandomColor: getRandomColor, | ||
| ConfigProvider: ConfigProvider, | ||
| Cache: Cache | ||
| }); | ||
| export { default as GravatarSource } from './sources/Gravatar'; | ||
| export { default as FacebookSource } from './sources/Facebook'; | ||
| export { default as TwitterSource } from './sources/Twitter'; | ||
| export { default as GoogleSource } from './sources/Google'; | ||
| export { default as GithubSource } from './sources/Github'; | ||
| export { default as SkypeSource } from './sources/Skype'; | ||
| export { default as ValueSource } from './sources/Value'; | ||
| export { default as SrcSource } from './sources/Src'; | ||
| export { default as IconSource } from './sources/Icon'; | ||
| export { default as RedirectSource } from './sources/AvatarRedirect'; |
@@ -6,2 +6,3 @@ 'use strict'; | ||
| import "core-js/modules/es6.regexp.to-string"; | ||
| import "core-js/modules/es6.object.to-string"; | ||
| import "core-js/modules/es7.symbol.async-iterator"; | ||
@@ -16,3 +17,3 @@ import "core-js/modules/es6.symbol"; | ||
| function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
| function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
@@ -19,0 +20,0 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } |
@@ -42,2 +42,6 @@ import * as React from "react"; | ||
| /** | ||
| * The alt attribute used on the avatar img tag. If not set we will fallback to either name or value | ||
| */ | ||
| alt?: string; | ||
| /** | ||
| * Used in combination with `name` and `value`. Give the background a fixed color with a hex like for example #FF0000 | ||
@@ -44,0 +48,0 @@ */ |
@@ -20,2 +20,4 @@ "use strict"; | ||
| require("core-js/modules/es6.object.to-string"); | ||
| require("core-js/modules/es6.object.keys"); | ||
@@ -22,0 +24,0 @@ |
458
lib/index.js
| 'use strict'; | ||
| require("core-js/modules/es6.object.keys"); | ||
| require("core-js/modules/web.dom.iterable"); | ||
| require("core-js/modules/es6.array.iterator"); | ||
| require("core-js/modules/es6.object.to-string"); | ||
| require("core-js/modules/es6.string.iterator"); | ||
| require("core-js/modules/es6.weak-map"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| Object.defineProperty(exports, "Cache", { | ||
| var _exportNames = { | ||
| createAvatarComponent: true, | ||
| GravatarSource: true, | ||
| FacebookSource: true, | ||
| TwitterSource: true, | ||
| GoogleSource: true, | ||
| GithubSource: true, | ||
| SkypeSource: true, | ||
| ValueSource: true, | ||
| SrcSource: true, | ||
| IconSource: true, | ||
| RedirectSource: true | ||
| }; | ||
| Object.defineProperty(exports, "createAvatarComponent", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _cache.Cache; | ||
| return _avatar.default; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "ConfigProvider", { | ||
| Object.defineProperty(exports, "GravatarSource", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _context.ConfigProvider; | ||
| return _Gravatar.default; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "getRandomColor", { | ||
| Object.defineProperty(exports, "FacebookSource", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _utils.getRandomColor; | ||
| return _Facebook.default; | ||
| } | ||
| }); | ||
| exports.default = exports.Avatar = void 0; | ||
| Object.defineProperty(exports, "TwitterSource", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _Twitter.default; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "GoogleSource", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _Google.default; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "GithubSource", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _Github.default; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "SkypeSource", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _Skype.default; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "ValueSource", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _Value.default; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "SrcSource", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _Src.default; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "IconSource", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _Icon.default; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "RedirectSource", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _AvatarRedirect.default; | ||
| } | ||
| }); | ||
| exports.default = void 0; | ||
| require("core-js/modules/es7.symbol.async-iterator"); | ||
| var _avatar = _interopRequireWildcard(require("./avatar")); | ||
| require("core-js/modules/es6.symbol"); | ||
| Object.keys(_avatar).forEach(function (key) { | ||
| if (key === "default" || key === "__esModule") return; | ||
| if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
| Object.defineProperty(exports, key, { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _avatar[key]; | ||
| } | ||
| }); | ||
| }); | ||
| require("core-js/modules/web.dom.iterable"); | ||
| require("core-js/modules/es6.array.iterator"); | ||
| require("core-js/modules/es6.object.keys"); | ||
| require("core-js/modules/es6.object.set-prototype-of"); | ||
| require("core-js/modules/es6.regexp.replace"); | ||
| require("core-js/modules/es6.function.name"); | ||
| require("core-js/modules/es6.object.assign"); | ||
| var _react = _interopRequireWildcard(require("react")); | ||
| var _propTypes = _interopRequireDefault(require("prop-types")); | ||
| var _cache = require("./cache"); | ||
| var _context = require("./context"); | ||
| var _utils = require("./utils"); | ||
| var _internalState = _interopRequireDefault(require("./internal-state")); | ||
| var _Gravatar = _interopRequireDefault(require("./sources/Gravatar")); | ||
@@ -78,334 +134,12 @@ | ||
| function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
| function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } | ||
| 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); } | ||
| function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
| 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; } | ||
| var SOURCES = [_Facebook.default, _Google.default, _Github.default, _Twitter.default, (0, _AvatarRedirect.default)('twitter', 'twitterHandle'), (0, _AvatarRedirect.default)('instagram', 'instagramId'), (0, _AvatarRedirect.default)('vkontakte', 'vkontakteId'), _Skype.default, _Gravatar.default, _Src.default, _Value.default, _Icon.default]; | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } | ||
| function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
| function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } | ||
| function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
| function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } | ||
| function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
| 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; } | ||
| var SOURCES = [_Facebook.default, _Google.default, _Github.default, _Twitter.default, (0, _AvatarRedirect.default)('twitter', 'twitterHandle'), (0, _AvatarRedirect.default)('instagram', 'instagramId'), (0, _AvatarRedirect.default)('vkontakte', 'vkontakteId'), _Skype.default, _Gravatar.default, _Src.default, _Value.default, _Icon.default]; // Collect propTypes for each individual source | ||
| var sourcePropTypes = SOURCES.reduce(function (r, s) { | ||
| return Object.assign(r, s.propTypes); | ||
| }, {}); | ||
| function matchSource(Source, props, cb) { | ||
| var cache = props.cache; | ||
| var instance = new Source(props); | ||
| if (!instance.isCompatible(props)) return cb(); | ||
| instance.get(function (state) { | ||
| var failedBefore = state && state.hasOwnProperty('src') && cache.hasSourceFailedBefore(state.src); | ||
| if (!failedBefore && state) { | ||
| cb(state); | ||
| } else { | ||
| cb(); | ||
| } | ||
| }); | ||
| } | ||
| var Avatar = | ||
| /*#__PURE__*/ | ||
| function (_PureComponent) { | ||
| _inherits(Avatar, _PureComponent); | ||
| function Avatar(props) { | ||
| var _this; | ||
| _classCallCheck(this, Avatar); | ||
| _this = _possibleConstructorReturn(this, _getPrototypeOf(Avatar).call(this, props)); | ||
| _defineProperty(_assertThisInitialized(_this), "_createFetcher", function (internal) { | ||
| return function (errEvent) { | ||
| var cache = _this.props.cache; | ||
| if (!internal.isActive(_this.state)) return; // Mark img source as failed for future reference | ||
| if (errEvent && errEvent.type === 'error') cache.sourceFailed(errEvent.target.src); | ||
| var pointer = internal.sourcePointer; | ||
| if (SOURCES.length === pointer) return; | ||
| var source = SOURCES[pointer]; | ||
| internal.sourcePointer++; | ||
| matchSource(source, _this.props, function (nextState) { | ||
| if (!nextState) return setTimeout(internal.fetch, 0); | ||
| if (!internal.isActive(_this.state)) return; // Reset other values to prevent them from sticking (#51) | ||
| nextState = _objectSpread({ | ||
| src: null, | ||
| value: null, | ||
| color: null | ||
| }, nextState); | ||
| _this.setState(function (state) { | ||
| // Internal state has been reset => we received new props | ||
| return internal.isActive(state) ? nextState : {}; | ||
| }); | ||
| }); | ||
| }; | ||
| }); | ||
| _defineProperty(_assertThisInitialized(_this), "fetch", function () { | ||
| var internal = new _internalState.default(); | ||
| internal.fetch = _this._createFetcher(internal); | ||
| _this.setState({ | ||
| internal: internal | ||
| }, internal.fetch); | ||
| }); | ||
| _defineProperty(_assertThisInitialized(_this), "_scaleTextNode", function (node) { | ||
| var retryTTL = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16; | ||
| var _this$props = _this.props, | ||
| unstyled = _this$props.unstyled, | ||
| textSizeRatio = _this$props.textSizeRatio, | ||
| textMarginRatio = _this$props.textMarginRatio; | ||
| if (!node || unstyled || _this.state.src || !_this.mounted) return; | ||
| var spanNode = node.parentNode; | ||
| var tableNode = spanNode.parentNode; | ||
| var _spanNode$getBounding = spanNode.getBoundingClientRect(), | ||
| containerWidth = _spanNode$getBounding.width, | ||
| containerHeight = _spanNode$getBounding.height; // Whenever the avatar element is not visible due to some CSS | ||
| // (such as display: none) on any parent component we will check | ||
| // whether the component has become visible. | ||
| // | ||
| // The time between checks grows up to half a second in an attempt | ||
| // to reduce flicker / performance issues. | ||
| if (containerWidth == 0 && containerHeight == 0) { | ||
| var ttl = Math.min(retryTTL * 1.5, 500); | ||
| (0, _utils.setGroupedTimeout)(function () { | ||
| return _this._scaleTextNode(node, ttl); | ||
| }, ttl); | ||
| return; | ||
| } // If the tableNode (outer-container) does not have its fontSize set yet, | ||
| // we'll set it according to "textSizeRatio" | ||
| if (!tableNode.style.fontSize) { | ||
| var baseFontSize = containerHeight / textSizeRatio; | ||
| tableNode.style.fontSize = "".concat(baseFontSize, "px"); | ||
| } // Reset font-size such that scaling works correctly (#133) | ||
| spanNode.style.fontSize = null; // Measure the actual width of the text after setting the container size | ||
| var _node$getBoundingClie = node.getBoundingClientRect(), | ||
| textWidth = _node$getBoundingClie.width; | ||
| if (textWidth < 0) return; // Calculate the maximum width for the text based on "textMarginRatio" | ||
| var maxTextWidth = containerWidth * (1 - 2 * textMarginRatio); // If the text is too wide, scale it down by (maxWidth / actualWidth) | ||
| if (textWidth > maxTextWidth) spanNode.style.fontSize = "calc(1em * ".concat(maxTextWidth / textWidth, ")"); | ||
| }); | ||
| _this.state = { | ||
| internal: null, | ||
| src: null, | ||
| value: null, | ||
| color: props.color | ||
| }; | ||
| return _this; | ||
| } | ||
| _createClass(Avatar, [{ | ||
| key: "componentDidMount", | ||
| value: function componentDidMount() { | ||
| this.mounted = true; | ||
| this.fetch(); | ||
| } | ||
| }, { | ||
| key: "componentWillReceiveProps", | ||
| value: function componentWillReceiveProps(newProps) { | ||
| var needsUpdate = false; // This seems redundant | ||
| // | ||
| // Props that need to be in `state` are | ||
| // `value`, `src` and `color` | ||
| for (var prop in sourcePropTypes) { | ||
| needsUpdate = needsUpdate || newProps[prop] !== this.props[prop]; | ||
| } | ||
| if (needsUpdate) setTimeout(this.fetch, 0); | ||
| } | ||
| }, { | ||
| key: "componentWillUnmount", | ||
| value: function componentWillUnmount() { | ||
| this.mounted = false; | ||
| if (this.state.internal) { | ||
| this.state.internal.active = false; | ||
| } | ||
| } | ||
| }, { | ||
| key: "_renderAsImage", | ||
| value: function _renderAsImage() { | ||
| var _this$props2 = this.props, | ||
| className = _this$props2.className, | ||
| round = _this$props2.round, | ||
| unstyled = _this$props2.unstyled, | ||
| name = _this$props2.name, | ||
| value = _this$props2.value; | ||
| var internal = this.state.internal; | ||
| var size = (0, _utils.parseSize)(this.props.size); | ||
| var alt = name || value; | ||
| var imageStyle = unstyled ? null : { | ||
| maxWidth: '100%', | ||
| width: size.str, | ||
| height: size.str, | ||
| borderRadius: round === true ? '100%' : round | ||
| }; | ||
| return _react.default.createElement("img", { | ||
| className: className + ' sb-avatar__image', | ||
| width: size.str, | ||
| height: size.str, | ||
| style: imageStyle, | ||
| src: this.state.src, | ||
| alt: alt, | ||
| onError: internal && internal.fetch | ||
| }); | ||
| } | ||
| }, { | ||
| key: "_renderAsText", | ||
| value: function _renderAsText() { | ||
| var _this$props3 = this.props, | ||
| className = _this$props3.className, | ||
| round = _this$props3.round, | ||
| unstyled = _this$props3.unstyled; | ||
| var size = (0, _utils.parseSize)(this.props.size); | ||
| var initialsStyle = unstyled ? null : { | ||
| width: size.str, | ||
| height: size.str, | ||
| lineHeight: 'initial', | ||
| textAlign: 'center', | ||
| textTransform: 'uppercase', | ||
| color: this.props.fgColor, | ||
| background: this.state.color, | ||
| borderRadius: round === true ? '100%' : round | ||
| }; | ||
| var tableStyle = unstyled ? null : { | ||
| display: 'table', | ||
| tableLayout: 'fixed', | ||
| width: '100%', | ||
| height: '100%' | ||
| }; | ||
| var spanStyle = unstyled ? null : { | ||
| display: 'table-cell', | ||
| verticalAlign: 'middle', | ||
| fontSize: '100%', | ||
| whiteSpace: 'nowrap' | ||
| }; | ||
| return _react.default.createElement("div", { | ||
| className: className + ' sb-avatar__text', | ||
| style: initialsStyle | ||
| }, _react.default.createElement("div", { | ||
| style: tableStyle | ||
| }, _react.default.createElement("span", { | ||
| style: spanStyle | ||
| }, _react.default.createElement("span", { | ||
| ref: this._scaleTextNode, | ||
| key: this.state.value | ||
| }, this.state.value)))); | ||
| } | ||
| }, { | ||
| key: "render", | ||
| value: function render() { | ||
| var _this$props4 = this.props, | ||
| className = _this$props4.className, | ||
| unstyled = _this$props4.unstyled, | ||
| round = _this$props4.round, | ||
| style = _this$props4.style, | ||
| onClick = _this$props4.onClick; | ||
| var _this$state = this.state, | ||
| src = _this$state.src, | ||
| sourceName = _this$state.sourceName; | ||
| var size = (0, _utils.parseSize)(this.props.size); | ||
| var hostStyle = unstyled ? null : _objectSpread({ | ||
| display: 'inline-block', | ||
| verticalAlign: 'middle', | ||
| width: size.str, | ||
| height: size.str, | ||
| borderRadius: round === true ? '100%' : round, | ||
| fontFamily: 'Helvetica, Arial, sans-serif' | ||
| }, style); | ||
| var classNames = [className, 'sb-avatar']; | ||
| if (sourceName) { | ||
| var source = sourceName.toLowerCase().replace(/[^a-z0-9-]+/g, '-') // only allow alphanumeric | ||
| .replace(/^-+|-+$/g, ''); // trim `-` | ||
| classNames.push('sb-avatar--' + source); | ||
| } | ||
| return _react.default.createElement("div", { | ||
| className: classNames.join(' '), | ||
| onClick: onClick, | ||
| style: hostStyle | ||
| }, src ? this._renderAsImage() : this._renderAsText()); | ||
| } | ||
| }]); | ||
| return Avatar; | ||
| }(_react.PureComponent); | ||
| exports.Avatar = Avatar; | ||
| _defineProperty(Avatar, "displayName", 'Avatar'); | ||
| _defineProperty(Avatar, "propTypes", _objectSpread({}, sourcePropTypes, { | ||
| className: _propTypes.default.string, | ||
| fgColor: _propTypes.default.string, | ||
| color: _propTypes.default.string, | ||
| colors: _propTypes.default.arrayOf(_propTypes.default.string), | ||
| round: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]), | ||
| style: _propTypes.default.object, | ||
| size: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]), | ||
| textSizeRatio: _propTypes.default.number, | ||
| textMarginRatio: _propTypes.default.number, | ||
| unstyled: _propTypes.default.bool, | ||
| cache: _propTypes.default.object, | ||
| onClick: _propTypes.default.func | ||
| })); | ||
| _defineProperty(Avatar, "defaultProps", { | ||
| className: '', | ||
| fgColor: '#FFF', | ||
| round: false, | ||
| size: 100, | ||
| textSizeRatio: 3, | ||
| textMarginRatio: .15, | ||
| unstyled: false | ||
| var _default = (0, _avatar.default)({ | ||
| sources: SOURCES | ||
| }); | ||
| _defineProperty(Avatar, "getRandomColor", _utils.getRandomColor); | ||
| _defineProperty(Avatar, "Cache", _cache.Cache); | ||
| _defineProperty(Avatar, "ConfigProvider", _context.ConfigProvider); | ||
| var _default = Object.assign((0, _context.withConfig)(Avatar), { | ||
| getRandomColor: _utils.getRandomColor, | ||
| ConfigProvider: _context.ConfigProvider, | ||
| Cache: _cache.Cache | ||
| }); | ||
| exports.default = _default; |
@@ -20,2 +20,4 @@ 'use strict'; | ||
| require("core-js/modules/es6.object.to-string"); | ||
| require("core-js/modules/es7.symbol.async-iterator"); | ||
@@ -33,3 +35,3 @@ | ||
| function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
| function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
@@ -36,0 +38,0 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } |
| { | ||
| "name": "react-avatar", | ||
| "version": "3.6.0", | ||
| "version": "3.7.0", | ||
| "description": "Universal React avatar component makes it possible to generate avatars based on user information.", | ||
@@ -9,2 +9,3 @@ "main": "lib/index.js", | ||
| "typings": "index.d.ts", | ||
| "sideEffects": false, | ||
| "scripts": { | ||
@@ -51,3 +52,3 @@ "prepack": "npm -s run test && npm -s run build", | ||
| "@babel/preset-react": "^7.0.0", | ||
| "@types/react": "^15.0.0", | ||
| "@types/react": "^16.0.0", | ||
| "babel-eslint": "^6.0.0", | ||
@@ -60,4 +61,4 @@ "babel-loader": "^8.0.2", | ||
| "gh-pages": "^1.2.0", | ||
| "react": "^15.0.0", | ||
| "react-dom": "^15.0.0", | ||
| "react": "^16.0.0", | ||
| "react-dom": "^16.0.0", | ||
| "webpack": "^4.19.0", | ||
@@ -64,0 +65,0 @@ "webpack-bundle-analyzer": "^3.0.2", |
@@ -114,2 +114,3 @@ # <Avatar> [](https://travis-ci.org/Sitebase/react-avatar) [](https://www.npmjs.com/package/react-avatar) [](https://www.npmjs.com/package/react-avatar)   | ||
| | `value` | *string* | | Show a value as avatar | | ||
| | `alt` | *string* | `name` or `value` | The `alt` attribute used on the avatar `img` tag. If not set we will fallback to either `name` or `value` | | ||
| | `color` | *string* | random | Used in combination with `name` and `value`. Give the background a fixed color with a hex like for example #FF0000 | | ||
@@ -236,2 +237,52 @@ | `fgColor` | *string* | #FFF | Used in combination with `name` and `value`. Give the text a fixed color with a hex like for example #FF0000 | | ||
| ## Reducing bundle size | ||
| ### Webpack 4 | ||
| When using webpack 4 you can rely on [tree shaking](https://webpack.js.org/guides/tree-shaking/) to drop unused sources when creating your Avatar component like the example below. | ||
| ```javascript | ||
| import { createAvatarComponent, TwitterSource } from 'react-avatar'; | ||
| const Avatar = createAvatarComponent({ | ||
| sources: [ TwitterSource ] | ||
| }); | ||
| ``` | ||
| Exported sources: | ||
| - GravatarSource | ||
| - FacebookSource | ||
| - TwitterSource | ||
| - GoogleSource | ||
| - GithubSource | ||
| - SkypeSource | ||
| - ValueSource | ||
| - SrcSource | ||
| - IconSource | ||
| - RedirectSource | ||
| ### Without Webpack >= 4 | ||
| If you are using a version of webpack that does not support tree shaking or are using a different bundler you'll need to import only those files you need. | ||
| #### ES6 modules | ||
| ```javascript | ||
| import createAvatarComponent from 'react-avatar/es/avatar'; | ||
| import TwitterSource from 'react-avatar/es/sources/Twitter'; | ||
| const Avatar = createAvatarComponent({ | ||
| sources: [ TwitterSource ] | ||
| }); | ||
| ``` | ||
| #### Transpiled ES5 javascript / commonjs | ||
| ```javascript | ||
| const createAvatarComponent = require('react-avatar/lib/avatar').default; | ||
| const TwitterSource = require('react-avatar/lib/sources/Twitter').default; | ||
| const Avatar = createAvatarComponent({ | ||
| sources: [ TwitterSource ] | ||
| }); | ||
| ``` | ||
| ## Products using React Avatar | ||
@@ -238,0 +289,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by8.26%
125272
- Number of package files
- increased by5.88%
36
- Lines of code
- increased by7.26%
2363
- Number of lines in readme file
- increased by19.39%
314
No dependency changes