font-picker-react - npm Package Compare versions

Comparing version 3.5.1 to 3.5.2

dist/FontPicker.d.ts

 import { Category, Font, FontManager, Script, SortOption, Variant } from "@samuelmeuli/font-manager";
-import React, { KeyboardEvent, PureComponent, ReactElement } from "react";
+import React, { PureComponent } from "react";
 declare type LoadingStatus = "loading" | "finished" | "error";
@@ -37,11 +37,12 @@ interface Props {
     constructor(props: Props);
-    componentDidUpdate(prevProps: Props): void;
-    onClose(e: MouseEvent): void;
-    onSelection(e: React.MouseEvent | KeyboardEvent): void;
-    setActiveFontFamily(activeFontFamily: string): void;
-    generateFontList(fonts: Font[]): ReactElement;
-    toggleExpanded(): void;
-    render(): ReactElement;
+    componentDidMount: () => void;
+    componentDidUpdate: (prevProps: Props) => void;
+    onClose: (e: MouseEvent) => void;
+    onSelection: (e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void;
+    setActiveFontFamily: (activeFontFamily: string) => void;
+    generateFontList: (fonts: Font[]) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+    toggleExpanded: () => void;
+    render: () => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
 }
 export {};
 //# sourceMappingURL=FontPicker.d.ts.map

dist/FontPicker.es.js

@@ -44,2 +44,95 @@ import { FONT_FAMILY_DEFAULT, OPTIONS_DEFAULTS, FontManager } from '@samuelmeuli/font-manager';
         };
+        _this.componentDidMount = function () {
+            _this.fontManager
+                .init()
+                .then(function () {
+                _this.setState({
+                    loadingStatus: "finished",
+                });
+            })["catch"](function (err) {
+                _this.setState({
+                    loadingStatus: "error",
+                });
+                console.error("Error trying to fetch the list of available fonts");
+                console.error(err);
+            });
+        };
+        _this.componentDidUpdate = function (prevProps) {
+            var _a = _this.props, activeFontFamily = _a.activeFontFamily, onChange = _a.onChange;
+            if (activeFontFamily !== prevProps.activeFontFamily) {
+                _this.setActiveFontFamily(activeFontFamily);
+            }
+            if (onChange !== prevProps.onChange) {
+                _this.fontManager.setOnChange(onChange);
+            }
+        };
+        _this.onClose = function (e) {
+            var targetEl = e.target;
+            var fontPickerEl = document.getElementById("font-picker" + _this.fontManager.selectorSuffix);
+            while (true) {
+                if (targetEl === fontPickerEl) {
+                    return;
+                }
+                if (targetEl.parentNode) {
+                    targetEl = targetEl.parentNode;
+                }
+                else {
+                    _this.toggleExpanded();
+                    return;
+                }
+            }
+        };
+        _this.onSelection = function (e) {
+            var target = e.target;
+            var activeFontFamily = target.textContent;
+            if (!activeFontFamily) {
+                throw Error("Missing font family in clicked font button");
+            }
+            _this.setActiveFontFamily(activeFontFamily);
+            _this.toggleExpanded();
+        };
+        _this.setActiveFontFamily = function (activeFontFamily) {
+            _this.fontManager.setActiveFont(activeFontFamily);
+        };
+        _this.generateFontList = function (fonts) {
+            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(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)));
+            })));
+        };
+        _this.toggleExpanded = function () {
+            var expanded = _this.state.expanded;
+            if (expanded) {
+                _this.setState({
+                    expanded: false,
+                });
+                document.removeEventListener("click", _this.onClose);
+            }
+            else {
+                _this.setState({
+                    expanded: true,
+                });
+                document.addEventListener("click", _this.onClose);
+            }
+        };
+        _this.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(function (font1, font2) { return font1.family.localeCompare(font2.family); });
+            }
+            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 })),
+                loadingStatus === "finished" && _this.generateFontList(fonts)));
+        };
         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, filter = _a.filter, limit = _a.limit, sort = _a.sort, onChange = _a.onChange;
@@ -57,100 +150,4 @@ var options = {
         _this.fontManager = new FontManager(apiKey, activeFontFamily, options, onChange);
-        _this.fontManager
-            .init()
-            .then(function () {
-            _this.setState({
-                loadingStatus: "finished",
-            });
-        })["catch"](function (err) {
-            _this.setState({
-                loadingStatus: "error",
-            });
-            console.error("Error trying to fetch the list of available fonts");
-            console.error(err);
-        });
-        _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;
     }
-    FontPicker.prototype.componentDidUpdate = function (prevProps) {
-        var _a = this.props, activeFontFamily = _a.activeFontFamily, onChange = _a.onChange;
-        if (activeFontFamily !== prevProps.activeFontFamily) {
-            this.setActiveFontFamily(activeFontFamily);
-        }
-        if (onChange !== prevProps.onChange) {
-            this.fontManager.setOnChange(onChange);
-        }
-    };
-    FontPicker.prototype.onClose = function (e) {
-        var targetEl = e.target;
-        var fontPickerEl = document.getElementById("font-picker" + this.fontManager.selectorSuffix);
-        while (true) {
-            if (targetEl === fontPickerEl) {
-                return;
-            }
-            if (targetEl.parentNode) {
-                targetEl = targetEl.parentNode;
-            }
-            else {
-                this.toggleExpanded();
-                return;
-            }
-        }
-    };
-    FontPicker.prototype.onSelection = function (e) {
-        var target = e.target;
-        var activeFontFamily = target.textContent;
-        if (!activeFontFamily) {
-            throw Error("Missing font family in clicked font button");
-        }
-        this.setActiveFontFamily(activeFontFamily);
-        this.toggleExpanded();
-    };
-    FontPicker.prototype.setActiveFontFamily = function (activeFontFamily) {
-        this.fontManager.setActiveFont(activeFontFamily);
-    };
-    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(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)));
-        })));
-    };
-    FontPicker.prototype.toggleExpanded = function () {
-        var expanded = this.state.expanded;
-        if (expanded) {
-            this.setState({
-                expanded: false,
-            });
-            document.removeEventListener("click", this.onClose);
-        }
-        else {
-            this.setState({
-                expanded: true,
-            });
-            document.addEventListener("click", this.onClose);
-        }
-    };
-    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(function (font1, font2) { return font1.family.localeCompare(font2.family); });
-        }
-        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 })),
-            loadingStatus === "finished" && this.generateFontList(fonts)));
-    };
     FontPicker.defaultProps = {
@@ -157,0 +154,0 @@ activeFontFamily: FONT_FAMILY_DEFAULT,

dist/FontPicker.js

@@ -49,2 +49,95 @@ 'use strict';
         };
+        _this.componentDidMount = function () {
+            _this.fontManager
+                .init()
+                .then(function () {
+                _this.setState({
+                    loadingStatus: "finished",
+                });
+            })["catch"](function (err) {
+                _this.setState({
+                    loadingStatus: "error",
+                });
+                console.error("Error trying to fetch the list of available fonts");
+                console.error(err);
+            });
+        };
+        _this.componentDidUpdate = function (prevProps) {
+            var _a = _this.props, activeFontFamily = _a.activeFontFamily, onChange = _a.onChange;
+            if (activeFontFamily !== prevProps.activeFontFamily) {
+                _this.setActiveFontFamily(activeFontFamily);
+            }
+            if (onChange !== prevProps.onChange) {
+                _this.fontManager.setOnChange(onChange);
+            }
+        };
+        _this.onClose = function (e) {
+            var targetEl = e.target;
+            var fontPickerEl = document.getElementById("font-picker" + _this.fontManager.selectorSuffix);
+            while (true) {
+                if (targetEl === fontPickerEl) {
+                    return;
+                }
+                if (targetEl.parentNode) {
+                    targetEl = targetEl.parentNode;
+                }
+                else {
+                    _this.toggleExpanded();
+                    return;
+                }
+            }
+        };
+        _this.onSelection = function (e) {
+            var target = e.target;
+            var activeFontFamily = target.textContent;
+            if (!activeFontFamily) {
+                throw Error("Missing font family in clicked font button");
+            }
+            _this.setActiveFontFamily(activeFontFamily);
+            _this.toggleExpanded();
+        };
+        _this.setActiveFontFamily = function (activeFontFamily) {
+            _this.fontManager.setActiveFont(activeFontFamily);
+        };
+        _this.generateFontList = function (fonts) {
+            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(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)));
+            })));
+        };
+        _this.toggleExpanded = function () {
+            var expanded = _this.state.expanded;
+            if (expanded) {
+                _this.setState({
+                    expanded: false,
+                });
+                document.removeEventListener("click", _this.onClose);
+            }
+            else {
+                _this.setState({
+                    expanded: true,
+                });
+                document.addEventListener("click", _this.onClose);
+            }
+        };
+        _this.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(function (font1, font2) { return font1.family.localeCompare(font2.family); });
+            }
+            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 })),
+                loadingStatus === "finished" && _this.generateFontList(fonts)));
+        };
         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, filter = _a.filter, limit = _a.limit, sort = _a.sort, onChange = _a.onChange;
@@ -62,100 +155,4 @@ var options = {
         _this.fontManager = new fontManager.FontManager(apiKey, activeFontFamily, options, onChange);
-        _this.fontManager
-            .init()
-            .then(function () {
-            _this.setState({
-                loadingStatus: "finished",
-            });
-        })["catch"](function (err) {
-            _this.setState({
-                loadingStatus: "error",
-            });
-            console.error("Error trying to fetch the list of available fonts");
-            console.error(err);
-        });
-        _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;
     }
-    FontPicker.prototype.componentDidUpdate = function (prevProps) {
-        var _a = this.props, activeFontFamily = _a.activeFontFamily, onChange = _a.onChange;
-        if (activeFontFamily !== prevProps.activeFontFamily) {
-            this.setActiveFontFamily(activeFontFamily);
-        }
-        if (onChange !== prevProps.onChange) {
-            this.fontManager.setOnChange(onChange);
-        }
-    };
-    FontPicker.prototype.onClose = function (e) {
-        var targetEl = e.target;
-        var fontPickerEl = document.getElementById("font-picker" + this.fontManager.selectorSuffix);
-        while (true) {
-            if (targetEl === fontPickerEl) {
-                return;
-            }
-            if (targetEl.parentNode) {
-                targetEl = targetEl.parentNode;
-            }
-            else {
-                this.toggleExpanded();
-                return;
-            }
-        }
-    };
-    FontPicker.prototype.onSelection = function (e) {
-        var target = e.target;
-        var activeFontFamily = target.textContent;
-        if (!activeFontFamily) {
-            throw Error("Missing font family in clicked font button");
-        }
-        this.setActiveFontFamily(activeFontFamily);
-        this.toggleExpanded();
-    };
-    FontPicker.prototype.setActiveFontFamily = function (activeFontFamily) {
-        this.fontManager.setActiveFont(activeFontFamily);
-    };
-    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(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)));
-        })));
-    };
-    FontPicker.prototype.toggleExpanded = function () {
-        var expanded = this.state.expanded;
-        if (expanded) {
-            this.setState({
-                expanded: false,
-            });
-            document.removeEventListener("click", this.onClose);
-        }
-        else {
-            this.setState({
-                expanded: true,
-            });
-            document.addEventListener("click", this.onClose);
-        }
-    };
-    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(function (font1, font2) { return font1.family.localeCompare(font2.family); });
-        }
-        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 })),
-            loadingStatus === "finished" && this.generateFontList(fonts)));
-    };
     FontPicker.defaultProps = {
@@ -162,0 +159,0 @@ activeFontFamily: fontManager.FONT_FAMILY_DEFAULT,

package.json

 {
 	"name": "font-picker-react",
-	"version": "3.5.1",
+	"version": "3.5.2",
 	"description": "Font selector component for Google Fonts",
@@ -38,7 +38,7 @@ "author": {
 		"test": "tsc --noEmit",
-		"lint:css": "stylelint --ignore-path ./.gitignore --max-warnings 0 '**/*.{css,sass,scss}'",
+		"lint:css": "stylelint --ignore-path ./.gitignore --max-warnings 0 \"**/*.{css,sass,scss}\"",
 		"lint:css:fix": "yarn lint:css --fix",
-		"lint:ts": "eslint --ext .ts,.tsx --ignore-path ./.gitignore --max-warnings 0 '**/*.{ts,tsx}'",
+		"lint:ts": "eslint --ext .ts,.tsx --ignore-path ./.gitignore --max-warnings 0 \"**/*.{ts,tsx}\"",
 		"lint:ts:fix": "yarn lint:ts --fix",
-		"format": "prettier --ignore-path ./.gitignore --list-different '**/*.{css,html,js,json,jsx,less,md,scss,ts,tsx,vue,yaml,yml}'",
+		"format": "prettier --ignore-path ./.gitignore --list-different \"**/*.{css,html,js,json,jsx,less,md,scss,ts,tsx,vue,yaml,yml}\"",
 		"format:fix": "yarn format --write",
@@ -45,0 +45,0 @@ "version": "yarn build",

No alert changes

Improved metrics

Total package byte prevSize

26742

increased by1.63%

Worsened metrics

Lines of code

367

decreased by-1.34%

No dependency changes