font-picker-react - npm Package Compare versions

Comparing version 3.4.0 to 3.4.1

dist/FontPicker.d.ts

 import { Category, Font, FontManager, Script, SortOption, Variant } from "@samuelmeuli/font-manager";
-import React, { PureComponent } from "react";
+import React, { KeyboardEvent, PureComponent, ReactElement } from "react";
 declare type LoadingStatus = "loading" | "finished" | "error";
@@ -21,2 +21,3 @@ interface Props {
 export default class FontPicker extends PureComponent<Props, State> {
+    fontManager: FontManager;
     static defaultProps: {
@@ -34,13 +35,12 @@ defaultFamily: string;
     state: Readonly<State>;
-    fontManager: FontManager;
     constructor(props: Props);
     componentDidUpdate(prevProps: Props): void;
     onClose(e: MouseEvent): void;
-    onSelection(e: React.MouseEvent | React.KeyboardEvent): void;
+    onSelection(e: React.MouseEvent | KeyboardEvent): void;
     setActiveFontFamily(activeFontFamily: string): void;
-    generateFontList(fonts: Font[]): React.ReactElement;
+    generateFontList(fonts: Font[]): ReactElement;
     toggleExpanded(): void;
-    render(): React.ReactElement;
+    render(): ReactElement;
 }
 export {};
 //# sourceMappingURL=FontPicker.d.ts.map

dist/FontPicker.es.js

@@ -1,34 +0,63 @@
-import { FontManager, FONT_FAMILY_DEFAULT, OPTIONS_DEFAULTS } from '@samuelmeuli/font-manager';
+import { FONT_FAMILY_DEFAULT, OPTIONS_DEFAULTS, FontManager } from '@samuelmeuli/font-manager';
 import React, { PureComponent } from 'react';
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
 function getFontId(fontFamily) {
     return fontFamily.replace(/\s+/g, "-").toLowerCase();
 }
-class FontPicker extends PureComponent {
-    constructor(props) {
-        super(props);
-        this.state = {
+var FontPicker = (function (_super) {
+    __extends(FontPicker, _super);
+    function FontPicker(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
             expanded: false,
             loadingStatus: "loading",
         };
-        const { apiKey, activeFontFamily, pickerId, families, categories, scripts, variants, limit, sort, onChange, } = this.props;
-        const options = {
-            pickerId,
-            families,
-            categories,
-            scripts,
-            variants,
-            limit,
-            sort,
+        var _a = _this.props, apiKey = _a.apiKey, activeFontFamily = _a.activeFontFamily, pickerId = _a.pickerId, families = _a.families, categories = _a.categories, scripts = _a.scripts, variants = _a.variants, limit = _a.limit, sort = _a.sort, onChange = _a.onChange;
+        var options = {
+            pickerId: pickerId,
+            families: families,
+            categories: categories,
+            scripts: scripts,
+            variants: variants,
+            limit: limit,
+            sort: sort,
         };
-        this.fontManager = new FontManager(apiKey, activeFontFamily, options, onChange);
-        this.fontManager
+        _this.fontManager = new FontManager(apiKey, activeFontFamily, options, onChange);
+        _this.fontManager
             .init()
-            .then(() => {
-            this.setState({
+            .then(function () {
+            _this.setState({
                 loadingStatus: "finished",
             });
-        })
-            .catch((err) => {
-            this.setState({
+        })["catch"](function (err) {
+            _this.setState({
                 loadingStatus: "error",
@@ -39,9 +68,10 @@ });
         });
-        this.onClose = this.onClose.bind(this);
-        this.onSelection = this.onSelection.bind(this);
-        this.setActiveFontFamily = this.setActiveFontFamily.bind(this);
-        this.toggleExpanded = this.toggleExpanded.bind(this);
+        _this.onClose = _this.onClose.bind(_this);
+        _this.onSelection = _this.onSelection.bind(_this);
+        _this.setActiveFontFamily = _this.setActiveFontFamily.bind(_this);
+        _this.toggleExpanded = _this.toggleExpanded.bind(_this);
+        return _this;
     }
-    componentDidUpdate(prevProps) {
-        const { activeFontFamily, onChange } = this.props;
+    FontPicker.prototype.componentDidUpdate = function (prevProps) {
+        var _a = this.props, activeFontFamily = _a.activeFontFamily, onChange = _a.onChange;
         if (activeFontFamily !== prevProps.activeFontFamily) {
@@ -53,6 +83,6 @@ this.setActiveFontFamily(activeFontFamily);
         }
-    }
-    onClose(e) {
-        let targetEl = e.target;
-        const fontPickerEl = document.getElementById(`font-picker${this.fontManager.selectorSuffix}`);
+    };
+    FontPicker.prototype.onClose = function (e) {
+        var targetEl = e.target;
+        var fontPickerEl = document.getElementById("font-picker" + this.fontManager.selectorSuffix);
         while (true) {
@@ -70,30 +100,31 @@ if (targetEl === fontPickerEl) {
         }
-    }
-    onSelection(e) {
-        const target = e.target;
-        const activeFontFamily = target.textContent;
+    };
+    FontPicker.prototype.onSelection = function (e) {
+        var target = e.target;
+        var activeFontFamily = target.textContent;
         if (!activeFontFamily) {
-            throw Error(`Missing font family in clicked font button`);
+            throw Error("Missing font family in clicked font button");
         }
         this.setActiveFontFamily(activeFontFamily);
         this.toggleExpanded();
-    }
-    setActiveFontFamily(activeFontFamily) {
+    };
+    FontPicker.prototype.setActiveFontFamily = function (activeFontFamily) {
         this.fontManager.setActiveFont(activeFontFamily);
-    }
-    generateFontList(fonts) {
-        const { activeFontFamily } = this.props;
-        const { loadingStatus } = this.state;
+    };
+    FontPicker.prototype.generateFontList = function (fonts) {
+        var _this = this;
+        var activeFontFamily = this.props.activeFontFamily;
+        var loadingStatus = this.state.loadingStatus;
         if (loadingStatus !== "finished") {
             return React.createElement("div", null);
         }
-        return (React.createElement("ul", { className: "font-list" }, fonts.map((font) => {
-            const isActive = font.family === activeFontFamily;
-            const fontId = getFontId(font.family);
+        return (React.createElement("ul", { className: "font-list" }, fonts.map(function (font) {
+            var isActive = font.family === activeFontFamily;
+            var fontId = getFontId(font.family);
             return (React.createElement("li", { key: fontId, className: "font-list-item" },
-                React.createElement("button", { type: "button", id: `font-button-${fontId}${this.fontManager.selectorSuffix}`, className: `font-button ${isActive ? "active-font" : ""}`, onClick: this.onSelection, onKeyPress: this.onSelection }, font.family)));
+                React.createElement("button", { type: "button", id: "font-button-" + fontId + _this.fontManager.selectorSuffix, className: "font-button " + (isActive ? "active-font" : ""), onClick: _this.onSelection, onKeyPress: _this.onSelection }, font.family)));
         })));
-    }
-    toggleExpanded() {
-        const { expanded } = this.state;
+    };
+    FontPicker.prototype.toggleExpanded = function () {
+        var expanded = this.state.expanded;
         if (expanded) {
@@ -111,29 +142,30 @@ this.setState({
         }
-    }
-    render() {
-        const { activeFontFamily, sort } = this.props;
-        const { expanded, loadingStatus } = this.state;
-        const fonts = Array.from(this.fontManager.getFonts().values());
+    };
+    FontPicker.prototype.render = function () {
+        var _a = this.props, activeFontFamily = _a.activeFontFamily, sort = _a.sort;
+        var _b = this.state, expanded = _b.expanded, loadingStatus = _b.loadingStatus;
+        var fonts = Array.from(this.fontManager.getFonts().values());
         if (sort === "alphabet") {
-            fonts.sort((font1, font2) => font1.family.localeCompare(font2.family));
+            fonts.sort(function (font1, font2) { return font1.family.localeCompare(font2.family); });
         }
-        return (React.createElement("div", { id: `font-picker${this.fontManager.selectorSuffix}`, className: expanded ? "expanded" : "" },
+        return (React.createElement("div", { id: "font-picker" + this.fontManager.selectorSuffix, className: expanded ? "expanded" : "" },
             React.createElement("button", { type: "button", className: "dropdown-button", onClick: this.toggleExpanded, onKeyPress: this.toggleExpanded },
                 React.createElement("p", { className: "dropdown-font-family" }, activeFontFamily),
-                React.createElement("p", { className: `dropdown-icon ${loadingStatus}` })),
+                React.createElement("p", { className: "dropdown-icon " + loadingStatus })),
             loadingStatus === "finished" && this.generateFontList(fonts)));
-    }
-}
-FontPicker.defaultProps = {
-    defaultFamily: FONT_FAMILY_DEFAULT,
-    pickerId: OPTIONS_DEFAULTS.pickerId,
-    families: OPTIONS_DEFAULTS.families,
-    categories: OPTIONS_DEFAULTS.categories,
-    scripts: OPTIONS_DEFAULTS.scripts,
-    variants: OPTIONS_DEFAULTS.variants,
-    limit: OPTIONS_DEFAULTS.limit,
-    sort: OPTIONS_DEFAULTS.sort,
-    onChange: () => { },
-};
+    };
+    FontPicker.defaultProps = {
+        defaultFamily: FONT_FAMILY_DEFAULT,
+        pickerId: OPTIONS_DEFAULTS.pickerId,
+        families: OPTIONS_DEFAULTS.families,
+        categories: OPTIONS_DEFAULTS.categories,
+        scripts: OPTIONS_DEFAULTS.scripts,
+        variants: OPTIONS_DEFAULTS.variants,
+        limit: OPTIONS_DEFAULTS.limit,
+        sort: OPTIONS_DEFAULTS.sort,
+        onChange: function () { },
+    };
+    return FontPicker;
+}(PureComponent));
 
 export default FontPicker;

dist/FontPicker.js

@@ -9,32 +9,61 @@ 'use strict';
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
 function getFontId(fontFamily) {
     return fontFamily.replace(/\s+/g, "-").toLowerCase();
 }
-class FontPicker extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this.state = {
+var FontPicker = (function (_super) {
+    __extends(FontPicker, _super);
+    function FontPicker(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
             expanded: false,
             loadingStatus: "loading",
         };
-        const { apiKey, activeFontFamily, pickerId, families, categories, scripts, variants, limit, sort, onChange, } = this.props;
-        const options = {
-            pickerId,
-            families,
-            categories,
-            scripts,
-            variants,
-            limit,
-            sort,
+        var _a = _this.props, apiKey = _a.apiKey, activeFontFamily = _a.activeFontFamily, pickerId = _a.pickerId, families = _a.families, categories = _a.categories, scripts = _a.scripts, variants = _a.variants, limit = _a.limit, sort = _a.sort, onChange = _a.onChange;
+        var options = {
+            pickerId: pickerId,
+            families: families,
+            categories: categories,
+            scripts: scripts,
+            variants: variants,
+            limit: limit,
+            sort: sort,
         };
-        this.fontManager = new fontManager.FontManager(apiKey, activeFontFamily, options, onChange);
-        this.fontManager
+        _this.fontManager = new fontManager.FontManager(apiKey, activeFontFamily, options, onChange);
+        _this.fontManager
             .init()
-            .then(() => {
-            this.setState({
+            .then(function () {
+            _this.setState({
                 loadingStatus: "finished",
             });
-        })
-            .catch((err) => {
-            this.setState({
+        })["catch"](function (err) {
+            _this.setState({
                 loadingStatus: "error",
@@ -45,9 +74,10 @@ });
         });
-        this.onClose = this.onClose.bind(this);
-        this.onSelection = this.onSelection.bind(this);
-        this.setActiveFontFamily = this.setActiveFontFamily.bind(this);
-        this.toggleExpanded = this.toggleExpanded.bind(this);
+        _this.onClose = _this.onClose.bind(_this);
+        _this.onSelection = _this.onSelection.bind(_this);
+        _this.setActiveFontFamily = _this.setActiveFontFamily.bind(_this);
+        _this.toggleExpanded = _this.toggleExpanded.bind(_this);
+        return _this;
     }
-    componentDidUpdate(prevProps) {
-        const { activeFontFamily, onChange } = this.props;
+    FontPicker.prototype.componentDidUpdate = function (prevProps) {
+        var _a = this.props, activeFontFamily = _a.activeFontFamily, onChange = _a.onChange;
         if (activeFontFamily !== prevProps.activeFontFamily) {
@@ -59,6 +89,6 @@ this.setActiveFontFamily(activeFontFamily);
         }
-    }
-    onClose(e) {
-        let targetEl = e.target;
-        const fontPickerEl = document.getElementById(`font-picker${this.fontManager.selectorSuffix}`);
+    };
+    FontPicker.prototype.onClose = function (e) {
+        var targetEl = e.target;
+        var fontPickerEl = document.getElementById("font-picker" + this.fontManager.selectorSuffix);
         while (true) {
@@ -76,30 +106,31 @@ if (targetEl === fontPickerEl) {
         }
-    }
-    onSelection(e) {
-        const target = e.target;
-        const activeFontFamily = target.textContent;
+    };
+    FontPicker.prototype.onSelection = function (e) {
+        var target = e.target;
+        var activeFontFamily = target.textContent;
         if (!activeFontFamily) {
-            throw Error(`Missing font family in clicked font button`);
+            throw Error("Missing font family in clicked font button");
         }
         this.setActiveFontFamily(activeFontFamily);
         this.toggleExpanded();
-    }
-    setActiveFontFamily(activeFontFamily) {
+    };
+    FontPicker.prototype.setActiveFontFamily = function (activeFontFamily) {
         this.fontManager.setActiveFont(activeFontFamily);
-    }
-    generateFontList(fonts) {
-        const { activeFontFamily } = this.props;
-        const { loadingStatus } = this.state;
+    };
+    FontPicker.prototype.generateFontList = function (fonts) {
+        var _this = this;
+        var activeFontFamily = this.props.activeFontFamily;
+        var loadingStatus = this.state.loadingStatus;
         if (loadingStatus !== "finished") {
             return React__default.createElement("div", null);
         }
-        return (React__default.createElement("ul", { className: "font-list" }, fonts.map((font) => {
-            const isActive = font.family === activeFontFamily;
-            const fontId = getFontId(font.family);
+        return (React__default.createElement("ul", { className: "font-list" }, fonts.map(function (font) {
+            var isActive = font.family === activeFontFamily;
+            var fontId = getFontId(font.family);
             return (React__default.createElement("li", { key: fontId, className: "font-list-item" },
-                React__default.createElement("button", { type: "button", id: `font-button-${fontId}${this.fontManager.selectorSuffix}`, className: `font-button ${isActive ? "active-font" : ""}`, onClick: this.onSelection, onKeyPress: this.onSelection }, font.family)));
+                React__default.createElement("button", { type: "button", id: "font-button-" + fontId + _this.fontManager.selectorSuffix, className: "font-button " + (isActive ? "active-font" : ""), onClick: _this.onSelection, onKeyPress: _this.onSelection }, font.family)));
         })));
-    }
-    toggleExpanded() {
-        const { expanded } = this.state;
+    };
+    FontPicker.prototype.toggleExpanded = function () {
+        var expanded = this.state.expanded;
         if (expanded) {
@@ -117,29 +148,30 @@ this.setState({
         }
-    }
-    render() {
-        const { activeFontFamily, sort } = this.props;
-        const { expanded, loadingStatus } = this.state;
-        const fonts = Array.from(this.fontManager.getFonts().values());
+    };
+    FontPicker.prototype.render = function () {
+        var _a = this.props, activeFontFamily = _a.activeFontFamily, sort = _a.sort;
+        var _b = this.state, expanded = _b.expanded, loadingStatus = _b.loadingStatus;
+        var fonts = Array.from(this.fontManager.getFonts().values());
         if (sort === "alphabet") {
-            fonts.sort((font1, font2) => font1.family.localeCompare(font2.family));
+            fonts.sort(function (font1, font2) { return font1.family.localeCompare(font2.family); });
         }
-        return (React__default.createElement("div", { id: `font-picker${this.fontManager.selectorSuffix}`, className: expanded ? "expanded" : "" },
+        return (React__default.createElement("div", { id: "font-picker" + this.fontManager.selectorSuffix, className: expanded ? "expanded" : "" },
             React__default.createElement("button", { type: "button", className: "dropdown-button", onClick: this.toggleExpanded, onKeyPress: this.toggleExpanded },
                 React__default.createElement("p", { className: "dropdown-font-family" }, activeFontFamily),
-                React__default.createElement("p", { className: `dropdown-icon ${loadingStatus}` })),
+                React__default.createElement("p", { className: "dropdown-icon " + loadingStatus })),
             loadingStatus === "finished" && this.generateFontList(fonts)));
-    }
-}
-FontPicker.defaultProps = {
-    defaultFamily: fontManager.FONT_FAMILY_DEFAULT,
-    pickerId: fontManager.OPTIONS_DEFAULTS.pickerId,
-    families: fontManager.OPTIONS_DEFAULTS.families,
-    categories: fontManager.OPTIONS_DEFAULTS.categories,
-    scripts: fontManager.OPTIONS_DEFAULTS.scripts,
-    variants: fontManager.OPTIONS_DEFAULTS.variants,
-    limit: fontManager.OPTIONS_DEFAULTS.limit,
-    sort: fontManager.OPTIONS_DEFAULTS.sort,
-    onChange: () => { },
-};
+    };
+    FontPicker.defaultProps = {
+        defaultFamily: fontManager.FONT_FAMILY_DEFAULT,
+        pickerId: fontManager.OPTIONS_DEFAULTS.pickerId,
+        families: fontManager.OPTIONS_DEFAULTS.families,
+        categories: fontManager.OPTIONS_DEFAULTS.categories,
+        scripts: fontManager.OPTIONS_DEFAULTS.scripts,
+        variants: fontManager.OPTIONS_DEFAULTS.variants,
+        limit: fontManager.OPTIONS_DEFAULTS.limit,
+        sort: fontManager.OPTIONS_DEFAULTS.sort,
+        onChange: function () { },
+    };
+    return FontPicker;
+}(React.PureComponent));
 
 module.exports = FontPicker;

package.json

 {
 	"name": "font-picker-react",
-	"version": "3.4.0",
+	"version": "3.4.1",
 	"description": "Font selector component for Google Fonts",
@@ -47,21 +47,21 @@ "author": {
 	"dependencies": {
-		"@samuelmeuli/font-manager": "^1.2.0"
+		"@samuelmeuli/font-manager": "^1.3.1"
 	},
 	"peerDependencies": {
-		"@types/react": "^16.8.10",
+		"@types/react": "^16.0.0",
 		"react": "^16.0.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.5.5",
-		"@samuelmeuli/eslint-config": "^3.0.1",
+		"@babel/core": "^7.7.2",
+		"@samuelmeuli/eslint-config": "^4.0.1",
 		"@samuelmeuli/stylelint-config": "^1.0.2",
-		"@samuelmeuli/tsconfig": "^0.1.1",
-		"@storybook/react": "^5.1.11",
-		"@types/react": "^16.9.2",
-		"@typescript-eslint/eslint-plugin": "^2.0.0",
-		"@typescript-eslint/parser": "^2.0.0",
+		"@samuelmeuli/tsconfig": "^0.2.0",
+		"@storybook/react": "^5.2.6",
+		"@types/react": "^16.9.11",
+		"@typescript-eslint/eslint-plugin": "^2.7.0",
+		"@typescript-eslint/parser": "^2.7.0",
 		"babel-loader": "^8.0.6",
-		"eslint": "6.1.0",
+		"eslint": "6.6.0",
 		"eslint-config-airbnb": "18.0.1",
-		"eslint-config-prettier": "^6.1.0",
+		"eslint-config-prettier": "^6.5.0",
 		"eslint-plugin-import": "^2.18.2",
@@ -72,13 +72,13 @@ "eslint-plugin-jsx-a11y": "^6.2.3",
 		"eslint-plugin-simple-import-sort": "^4.0.0",
-		"husky": "^3.0.4",
-		"lint-staged": "^9.2.3",
-		"np": "^5.0.2",
+		"husky": "^3.0.9",
+		"lint-staged": "^9.4.3",
+		"np": "~5.0.0",
 		"npm-run-all": "^4.1.3",
-		"prettier": "^1.16.4",
-		"react": "^16.9.0",
-		"react-dom": "^16.9.0",
-		"rollup": "^1.19.4",
-		"rollup-plugin-typescript2": "^0.22.1",
-		"stylelint": "^10.1.0",
-		"typescript": "^3.5.3"
+		"prettier": "^1.19.1",
+		"react": "^16.11.0",
+		"react-dom": "^16.11.0",
+		"rollup": "^1.27.0",
+		"rollup-plugin-typescript2": "^0.25.2",
+		"stylelint": "^11.0.0",
+		"typescript": "^3.7.2"
 	},
@@ -88,5 +88,3 @@ "eslintConfig": {
 		"extends": [
-			"@samuelmeuli/eslint-config/react-typescript",
-			"prettier",
-			"prettier/@typescript-eslint"
+			"@samuelmeuli/eslint-config/typescript-react"
 		],
@@ -93,0 +91,0 @@ "env": {

New alerts

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

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

Improved metrics

Total package byte prevSize

26148

increased by19.42%

Lines of code

366

increased by17.31%

Dependency changes

• Updated@samuelmeuli/font-manager@^1.3.1