font-picker-react - npm Package Compare versions

Comparing version 2.0.5 to 2.1.0

lib/FontPicker.js

@@ -9,29 +9,27 @@ 'use strict';
 
-var classCallCheck = function (instance, Constructor) {
+function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
   }
-};
+}
 
-var createClass = 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 _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);
   }
+}
 
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
 
-var inherits = function (subClass, superClass) {
+function _inherits(subClass, superClass) {
   if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+    throw new TypeError("Super expression must either be null or a function");
   }
@@ -42,3 +40,2 @@
       value: subClass,
-      enumerable: false,
       writable: true,
@@ -48,13 +45,37 @@ configurable: true
   });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
 
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   }
 
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
+  return self;
+}
 
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
 /**
@@ -88,207 +109,200 @@ * React interface for the font picker
 
-var FontPicker = function (_Component) {
-	inherits(FontPicker, _Component);
+var FontPicker =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(FontPicker, _Component);
 
-	function FontPicker(props) {
-		classCallCheck(this, FontPicker);
+  function FontPicker(props) {
+    var _this;
 
-		var _this = possibleConstructorReturn(this, (FontPicker.__proto__ || Object.getPrototypeOf(FontPicker)).call(this, props));
+    _classCallCheck(this, FontPicker);
 
-		_this.state = {
-			activeFont: _this.props.activeFont,
-			errorText: '',
-			expanded: false,
-			loadingStatus: 'loading' // possible values: 'loading', 'finished', 'error'
-		};
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(FontPicker).call(this, props));
+    _this.state = {
+      activeFont: _this.props.activeFont,
+      errorText: '',
+      expanded: false,
+      loadingStatus: 'loading' // possible values: 'loading', 'finished', 'error'
 
-		// Determine selector suffix from font picker's name
-		if (_this.props.options && _this.props.options.name) {
-			_this.pickerSuffix = '-' + _this.props.options.name;
-		} else {
-			_this.pickerSuffix = '';
-		}
+    }; // Determine selector suffix from font picker's name
 
-		// initialize FontManager object and generate the font list
-		_this.fontManager = new fontPicker.FontManager(_this.props.apiKey, _this.props.activeFont, _this.props.options);
-		_this.fontManager.init().then(function () {
-			// font list has finished loading
-			_this.setState({
-				errorText: '',
-				loadingStatus: 'finished'
-			});
-		}).catch(function (err) {
-			// error while loading font list
-			_this.setState({
-				errorText: 'Error trying to fetch the list of available fonts',
-				loadingStatus: 'error'
-			});
-			console.error(_this.state.errorText);
-			console.error(err);
-		});
+    if (_this.props.options && _this.props.options.name) {
+      _this.pickerSuffix = "-".concat(_this.props.options.name);
+    } else {
+      _this.pickerSuffix = '';
+    } // initialize FontManager object and generate the font list
 
-		// function bindings
-		_this.setActiveFont = _this.setActiveFont.bind(_this);
-		_this.onClose = _this.onClose.bind(_this);
-		_this.onScroll = _this.onScroll.bind(_this);
-		_this.toggleExpanded = _this.toggleExpanded.bind(_this);
-		return _this;
-	}
 
-	/**
-  * After every component update, check whether the activeFont prop has changed. If so, change the
-  * font in the fontManager as well
-  */
+    _this.fontManager = new fontPicker.FontManager(_this.props.apiKey, _this.props.activeFont, _this.props.options);
 
+    _this.fontManager.init().then(function () {
+      // font list has finished loading
+      _this.setState({
+        errorText: '',
+        loadingStatus: 'finished'
+      });
+    }).catch(function (err) {
+      // error while loading font list
+      _this.setState({
+        errorText: 'Error trying to fetch the list of available fonts',
+        loadingStatus: 'error'
+      });
 
-	createClass(FontPicker, [{
-		key: 'componentDidUpdate',
-		value: function componentDidUpdate() {
-			if (this.state.activeFont !== this.props.activeFont) {
-				this.setActiveFont(this.props.activeFont);
-			}
-		}
+      console.error(_this.state.errorText);
+      console.error(err);
+    }); // function bindings
 
-		/**
-   * EventListener for closing the font picker when clicking anywhere outside it
+
+    _this.setActiveFont = _this.setActiveFont.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.onClose = _this.onClose.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.onScroll = _this.onScroll.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.toggleExpanded = _this.toggleExpanded.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+  /**
+   * After every component update, check whether the activeFont prop has changed. If so, change the
+   * font in the fontManager as well
    */
 
-	}, {
-		key: 'onClose',
-		value: function onClose(e) {
-			var targetElement = e.target; // clicked element
 
-			do {
-				if (targetElement === document.getElementById('font-picker')) {
-					// click inside font picker
-					return;
-				}
-				// move up the DOM
-				targetElement = targetElement.parentNode;
-			} while (targetElement);
+  _createClass(FontPicker, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      if (this.state.activeFont !== this.props.activeFont) {
+        this.setActiveFont(this.props.activeFont);
+      }
+    }
+    /**
+     * EventListener for closing the font picker when clicking anywhere outside it
+     */
 
-			// click outside font picker
-			this.toggleExpanded();
-		}
+  }, {
+    key: "onClose",
+    value: function onClose(e) {
+      var targetElement = e.target; // clicked element
 
-		/**
-   * Download the font previews for all visible font entries and the five after them
-   */
+      do {
+        if (targetElement === document.getElementById('font-picker')) {
+          // click inside font picker
+          return;
+        } // move up the DOM
 
-	}, {
-		key: 'onScroll',
-		value: function onScroll(e) {
-			var elementHeight = e.target.scrollHeight / this.fontManager.fonts.length;
-			var downloadIndex = Math.ceil((e.target.scrollTop + e.target.clientHeight) / elementHeight);
-			this.fontManager.downloadPreviews(downloadIndex + 5);
-		}
 
-		/**
-   * Set the font with the given font list index as the active one
-   */
+        targetElement = targetElement.parentNode;
+      } while (targetElement); // click outside font picker
 
-	}, {
-		key: 'setActiveFont',
-		value: function setActiveFont(fontFamily) {
-			var activeFontIndex = this.fontManager.setActiveFont(fontFamily);
-			if (activeFontIndex === -1) {
-				// error trying to change font
-				this.setState({
-					activeFont: fontFamily,
-					errorText: 'Cannot update activeFont: The font "' + fontFamily + '" is not in the font list',
-					loadingStatus: 'error'
-				});
-				console.error(this.state.errorText);
-			} else {
-				// font change successful
-				this.setState({
-					activeFont: fontFamily,
-					errorText: '',
-					loadingStatus: 'finished'
-				});
-			}
-		}
 
-		/**
-   * Expand/collapse the picker's font list
-   */
+      this.toggleExpanded();
+    }
+    /**
+     * Download the font previews for all visible font entries and the five after them
+     */
 
-	}, {
-		key: 'toggleExpanded',
-		value: function toggleExpanded() {
-			if (this.state.expanded) {
-				this.setState({
-					expanded: false
-				});
-				document.removeEventListener('click', this.onClose);
-			} else {
-				this.setState({
-					expanded: true
-				});
-				document.addEventListener('click', this.onClose);
-			}
-		}
-	}, {
-		key: 'render',
-		value: function render() {
-			var _this2 = this;
+  }, {
+    key: "onScroll",
+    value: function onScroll(e) {
+      var elementHeight = e.target.scrollHeight / this.fontManager.fonts.length;
+      var downloadIndex = Math.ceil((e.target.scrollTop + e.target.clientHeight) / elementHeight);
+      this.fontManager.downloadPreviews(downloadIndex + 5);
+    }
+    /**
+     * Set the font with the given font list index as the active one
+     */
 
-			// generate <ul> with font list; fetch font previews on scroll
-			var fontList = void 0;
-			if (this.state.loadingStatus === 'finished') {
-				fontList = React__default.createElement(
-					'ul',
-					{ className: this.state.expanded ? 'expanded' : '', onScroll: this.onScroll },
-					this.fontManager.fonts.map(function (font) {
-						var isActive = font.family === _this2.state.activeFont;
-						var fontId = font.family.replace(/\s+/g, '-').toLowerCase();
-						return React__default.createElement(
-							'li',
-							{ key: font.family },
-							React__default.createElement(
-								'button',
-								{
-									type: 'button',
-									className: 'font-' + fontId + _this2.pickerSuffix + ' ' + (isActive ? 'active-font' : ''),
-									onClick: function onClick() {
-										_this2.toggleExpanded();
-										_this2.props.onChange(font);
-									},
-									onKeyPress: function onKeyPress() {
-										_this2.toggleExpanded();
-										_this2.props.onChange(font);
-									}
-								},
-								font.family
-							)
-						);
-					})
-				);
-			}
+  }, {
+    key: "setActiveFont",
+    value: function setActiveFont(fontFamily) {
+      var activeFontIndex = this.fontManager.setActiveFont(fontFamily);
 
-			// render font picker button and attach font list to it
-			return React__default.createElement(
-				'div',
-				{ id: 'font-picker' + this.pickerSuffix, title: this.state.errorText },
-				React__default.createElement(
-					'button',
-					{
-						type: 'button',
-						className: 'dropdown-button ' + (this.state.expanded ? 'expanded' : ''),
-						onClick: this.toggleExpanded,
-						onKeyPress: this.toggleExpanded
-					},
-					React__default.createElement(
-						'p',
-						{ className: 'dropdown-font-name' },
-						this.state.activeFont
-					),
-					React__default.createElement('div', { className: 'dropdown-icon ' + this.state.loadingStatus })
-				),
-				this.state.loadingStatus === 'finished' && fontList
-			);
-		}
-	}]);
-	return FontPicker;
+      if (activeFontIndex === -1) {
+        // error trying to change font
+        this.setState({
+          activeFont: fontFamily,
+          errorText: "Cannot update activeFont: The font \"".concat(fontFamily, "\" is not in the font list"),
+          loadingStatus: 'error'
+        });
+        console.error(this.state.errorText);
+      } else {
+        // font change successful
+        this.setState({
+          activeFont: fontFamily,
+          errorText: '',
+          loadingStatus: 'finished'
+        });
+      }
+    }
+    /**
+     * Expand/collapse the picker's font list
+     */
+
+  }, {
+    key: "toggleExpanded",
+    value: function toggleExpanded() {
+      if (this.state.expanded) {
+        this.setState({
+          expanded: false
+        });
+        document.removeEventListener('click', this.onClose);
+      } else {
+        this.setState({
+          expanded: true
+        });
+        document.addEventListener('click', this.onClose);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      // generate <ul> with font list; fetch font previews on scroll
+      var fontList;
+
+      if (this.state.loadingStatus === 'finished') {
+        fontList = React__default.createElement("ul", {
+          className: this.state.expanded ? 'expanded' : '',
+          onScroll: this.onScroll
+        }, this.fontManager.fonts.map(function (font) {
+          var isActive = font.family === _this2.state.activeFont;
+          var fontId = font.family.replace(/\s+/g, '-').toLowerCase();
+          return React__default.createElement("li", {
+            key: font.family
+          }, React__default.createElement("button", {
+            type: "button",
+            className: "font-".concat(fontId).concat(_this2.pickerSuffix, " ").concat(isActive ? 'active-font' : ''),
+            onClick: function onClick() {
+              _this2.toggleExpanded();
+
+              _this2.props.onChange(font);
+            },
+            onKeyPress: function onKeyPress() {
+              _this2.toggleExpanded();
+
+              _this2.props.onChange(font);
+            }
+          }, font.family));
+        }));
+      } // render font picker button and attach font list to it
+
+
+      return React__default.createElement("div", {
+        id: "font-picker".concat(this.pickerSuffix),
+        title: this.state.errorText
+      }, React__default.createElement("button", {
+        type: "button",
+        className: "dropdown-button ".concat(this.state.expanded ? 'expanded' : ''),
+        onClick: this.toggleExpanded,
+        onKeyPress: this.toggleExpanded
+      }, React__default.createElement("p", {
+        className: "dropdown-font-name"
+      }, this.state.activeFont), React__default.createElement("div", {
+        className: "dropdown-icon ".concat(this.state.loadingStatus)
+      })), this.state.loadingStatus === 'finished' && fontList);
+    }
+  }]);
+
+  return FontPicker;
 }(React.Component);
 
 module.exports = FontPicker;
+//# sourceMappingURL=FontPicker.js.map

package.json

 {
 	"name": "font-picker-react",
-	"version": "2.0.5",
+	"version": "2.1.0",
 	"description": "Font selector component for Google Fonts",
@@ -17,3 +17,4 @@ "keywords": [
 	"main": "lib/FontPicker.js",
-	"author": "Samuel Meuli <[e-mail]>",
+	"module": "lib/FontPicker.es.js",
+	"author": "Samuel Meuli <[e-mail]>",
 	"repository": "github:samuelmeuli/font-picker-react",
@@ -26,9 +27,9 @@ "homepage": "https://samuelmeuli.github.io/font-picker",
 		"start:storybook": "start-storybook --port 3000",
-		"build": "rollup --config",
-		"lint": "eslint .",
-		"precommit": "npm run lint",
-		"prepush": "npm run lint"
+		"build": "run-s build:*",
+		"build:clean": "rm -rf lib",
+		"build:rollup": "rollup --config",
+		"lint": "eslint ."
 	},
 	"dependencies": {
-		"font-picker": "^2.0.6"
+		"font-picker": "^2.1.0"
 	},
@@ -39,10 +40,7 @@ "peerDependencies": {
 	"devDependencies": {
-		"@storybook/addon-actions": "^3.4.10",
-		"@storybook/addon-links": "^3.4.10",
-		"@storybook/addons": "^3.4.10",
-		"@storybook/react": "^3.4.10",
-		"babel-core": "^6.26.3",
-		"babel-plugin-external-helpers": "^6.22.0",
-		"babel-preset-env": "^1.7.0",
-		"babel-preset-react": "^6.24.1",
+		"@babel/core": "^7.1.6",
+		"@babel/preset-env": "^7.1.6",
+		"@babel/preset-react": "^7.0.0",
+		"@storybook/react": "^4.0.6",
+		"babel-loader": "^8.0.4",
 		"eslint": "^4.19.1",
@@ -53,12 +51,18 @@ "eslint-config-airbnb": "^16.1.0",
 		"eslint-plugin-react": "^7.11.1",
-		"husky": "^0.14.3",
+		"husky": "^1.1.4",
 		"npm-run-all": "^4.1.3",
 		"react": "^16.4.2",
 		"react-dom": "^16.4.2",
-		"rollup": "^0.64.1",
-		"rollup-plugin-babel": "^3.0.7"
+		"rollup": "^0.67.1",
+		"rollup-plugin-babel": "^4.0.3"
 	},
 	"files": [
 		"lib/"
-	]
+	],
+	"husky": {
+		"hooks": {
+			"pre-commit": "yarn lint",
+			"pre-push": "yarn lint"
+		}
+	}
 }

README.md

@@ -88,3 +88,3 @@ # Font Picker for React
 * `git clone`
-* `npm install`
-* `npm start` to generate the library bundle using [Rollup](https://github.com/rollup/rollup) and and start the [Storybook](https://github.com/storybooks/storybook) for testing the component interactively (`localhost:3000`)
+* `yarn install`
+* `yarn start` to generate the library bundle using [Rollup](https://github.com/rollup/rollup) and and start the [Storybook](https://github.com/storybooks/storybook) for testing the component interactively (`localhost:3000`)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This 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

49983

increased by87.13%

Dev dependency count

16

decreased by-15.79%

Number of package files

7

increased by40%

Lines of code

511

increased by98.83%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedfont-picker@^2.1.0