font-picker-react
Advanced tools
Comparing version 3.3.0 to 3.4.0
@@ -1,272 +0,140 @@ | ||
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); } | ||
'use strict'; | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } | ||
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); } } | ||
var fontManager = require('@samuelmeuli/font-manager'); | ||
var React = require('react'); | ||
var React__default = _interopDefault(React); | ||
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 { FontManager, FONT_FAMILY_DEFAULT, OPTIONS_DEFAULTS } from "@samuelmeuli/font-manager"; | ||
import React, { PureComponent } from "react"; | ||
/** | ||
* Return the fontId based on the provided font family | ||
*/ | ||
function getFontId(fontFamily) { | ||
return fontFamily.replace(/\s+/g, "-").toLowerCase(); | ||
return fontFamily.replace(/\s+/g, "-").toLowerCase(); | ||
} | ||
var FontPicker = | ||
/*#__PURE__*/ | ||
function (_PureComponent) { | ||
_inherits(FontPicker, _PureComponent); | ||
// Instance of the FontManager class used for managing, downloading and applying fonts | ||
function FontPicker(props) { | ||
var _this; | ||
_classCallCheck(this, FontPicker); | ||
_this = _possibleConstructorReturn(this, _getPrototypeOf(FontPicker).call(this, props)); | ||
_defineProperty(_assertThisInitialized(_this), "state", { | ||
expanded: false, | ||
loadingStatus: "loading" | ||
}); | ||
_defineProperty(_assertThisInitialized(_this), "fontManager", void 0); | ||
var _this$props = _this.props, | ||
apiKey = _this$props.apiKey, | ||
activeFontFamily = _this$props.activeFontFamily, | ||
pickerId = _this$props.pickerId, | ||
families = _this$props.families, | ||
categories = _this$props.categories, | ||
scripts = _this$props.scripts, | ||
variants = _this$props.variants, | ||
limit = _this$props.limit, | ||
sort = _this$props.sort, | ||
onChange = _this$props.onChange; | ||
var options = { | ||
pickerId: pickerId, | ||
families: families, | ||
categories: categories, | ||
scripts: scripts, | ||
variants: variants, | ||
limit: limit, | ||
sort: sort | ||
}; // Initialize FontManager object and generate font list | ||
_this.fontManager = new FontManager(apiKey, activeFontFamily, options, onChange); | ||
_this.fontManager.init().then(function () { | ||
_this.setState({ | ||
loadingStatus: "finished" | ||
}); | ||
})["catch"](function (err) { | ||
// On error: Log error message | ||
_this.setState({ | ||
loadingStatus: "error" | ||
}); | ||
console.error("Error trying to fetch the list of available fonts"); | ||
console.error(err); | ||
}); // Function bindings | ||
_this.onClose = _this.onClose.bind(_assertThisInitialized(_this)); | ||
_this.onSelection = _this.onSelection.bind(_assertThisInitialized(_this)); | ||
_this.setActiveFontFamily = _this.setActiveFontFamily.bind(_assertThisInitialized(_this)); | ||
_this.toggleExpanded = _this.toggleExpanded.bind(_assertThisInitialized(_this)); | ||
return _this; | ||
} | ||
/** | ||
* After every component update, check whether the activeFontFamily prop has changed. If so, | ||
* call this.setActiveFontFamily with the new font | ||
*/ | ||
_createClass(FontPicker, [{ | ||
key: "componentDidUpdate", | ||
value: function componentDidUpdate(prevProps) { | ||
var _this$props2 = this.props, | ||
activeFontFamily = _this$props2.activeFontFamily, | ||
onChange = _this$props2.onChange; // If active font prop has changed: Update font family in font manager and component state | ||
if (activeFontFamily !== prevProps.activeFontFamily) { | ||
this.setActiveFontFamily(activeFontFamily); | ||
} // If onChange prop has changed: Update onChange function in font manager | ||
if (onChange !== prevProps.onChange) { | ||
this.fontManager.setOnChange(onChange); | ||
} | ||
class FontPicker extends React.PureComponent { | ||
constructor(props) { | ||
super(props); | ||
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, | ||
}; | ||
this.fontManager = new fontManager.FontManager(apiKey, activeFontFamily, options, onChange); | ||
this.fontManager | ||
.init() | ||
.then(() => { | ||
this.setState({ | ||
loadingStatus: "finished", | ||
}); | ||
}) | ||
.catch((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); | ||
} | ||
/** | ||
* EventListener for closing the font picker when clicking anywhere outside it | ||
*/ | ||
}, { | ||
key: "onClose", | ||
value: function onClose(e) { | ||
var targetEl = e.target; // Clicked element | ||
var fontPickerEl = document.getElementById("font-picker".concat(this.fontManager.selectorSuffix)); // eslint-disable-next-line no-constant-condition | ||
while (true) { | ||
if (targetEl === fontPickerEl) { | ||
// Click inside font picker: Exit | ||
return; | ||
componentDidUpdate(prevProps) { | ||
const { activeFontFamily, onChange } = this.props; | ||
if (activeFontFamily !== prevProps.activeFontFamily) { | ||
this.setActiveFontFamily(activeFontFamily); | ||
} | ||
if (targetEl.parentNode) { | ||
// Click outside font picker: Move up the DOM | ||
targetEl = targetEl.parentNode; | ||
} else { | ||
// DOM root is reached: Toggle picker, exit | ||
this.toggleExpanded(); | ||
return; | ||
if (onChange !== prevProps.onChange) { | ||
this.fontManager.setOnChange(onChange); | ||
} | ||
} | ||
} | ||
/** | ||
* Update the active font on font button click | ||
*/ | ||
}, { | ||
key: "onSelection", | ||
value: function onSelection(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(); | ||
onClose(e) { | ||
let targetEl = e.target; | ||
const fontPickerEl = document.getElementById(`font-picker${this.fontManager.selectorSuffix}`); | ||
while (true) { | ||
if (targetEl === fontPickerEl) { | ||
return; | ||
} | ||
if (targetEl.parentNode) { | ||
targetEl = targetEl.parentNode; | ||
} | ||
else { | ||
this.toggleExpanded(); | ||
return; | ||
} | ||
} | ||
} | ||
/** | ||
* Set the specified font as the active font in the fontManager and update activeFontFamily in the | ||
* state | ||
*/ | ||
}, { | ||
key: "setActiveFontFamily", | ||
value: function setActiveFontFamily(activeFontFamily) { | ||
this.fontManager.setActiveFont(activeFontFamily); | ||
onSelection(e) { | ||
const target = e.target; | ||
const activeFontFamily = target.textContent; | ||
if (!activeFontFamily) { | ||
throw Error(`Missing font family in clicked font button`); | ||
} | ||
this.setActiveFontFamily(activeFontFamily); | ||
this.toggleExpanded(); | ||
} | ||
/** | ||
* Generate <ul> with all font families | ||
*/ | ||
}, { | ||
key: "generateFontList", | ||
value: function generateFontList(fonts) { | ||
var _this2 = this; | ||
var activeFontFamily = this.props.activeFontFamily; | ||
var loadingStatus = this.state.loadingStatus; | ||
if (loadingStatus !== "finished") { | ||
return React.createElement("div", null); | ||
} | ||
return React.createElement("ul", null, fonts.map(function (font) { | ||
var isActive = font.family === activeFontFamily; | ||
var fontId = getFontId(font.family); | ||
return React.createElement("li", { | ||
key: fontId | ||
}, React.createElement("button", { | ||
type: "button", | ||
id: "font-button-".concat(fontId).concat(_this2.fontManager.selectorSuffix), | ||
className: isActive ? "active-font" : "", | ||
onClick: _this2.onSelection, | ||
onKeyPress: _this2.onSelection | ||
}, font.family)); | ||
})); | ||
setActiveFontFamily(activeFontFamily) { | ||
this.fontManager.setActiveFont(activeFontFamily); | ||
} | ||
/** | ||
* Expand/collapse the picker's font list | ||
*/ | ||
}, { | ||
key: "toggleExpanded", | ||
value: function toggleExpanded() { | ||
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); | ||
} | ||
generateFontList(fonts) { | ||
const { activeFontFamily } = this.props; | ||
const { loadingStatus } = this.state; | ||
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("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))); | ||
}))); | ||
} | ||
}, { | ||
key: "render", | ||
value: function render() { | ||
var _this$props3 = this.props, | ||
activeFontFamily = _this$props3.activeFontFamily, | ||
sort = _this$props3.sort; | ||
var _this$state = this.state, | ||
expanded = _this$state.expanded, | ||
loadingStatus = _this$state.loadingStatus; // Extract and sort font list | ||
var fonts = Array.from(this.fontManager.getFonts().values()); | ||
if (sort === "alphabet") { | ||
fonts.sort(function (font1, font2) { | ||
return font1.family.localeCompare(font2.family); | ||
}); | ||
} // Render font picker button and attach font list to it | ||
return React.createElement("div", { | ||
id: "font-picker".concat(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 ".concat(loadingStatus) | ||
})), loadingStatus === "finished" && this.generateFontList(fonts)); | ||
toggleExpanded() { | ||
const { expanded } = this.state; | ||
if (expanded) { | ||
this.setState({ | ||
expanded: false, | ||
}); | ||
document.removeEventListener("click", this.onClose); | ||
} | ||
else { | ||
this.setState({ | ||
expanded: true, | ||
}); | ||
document.addEventListener("click", this.onClose); | ||
} | ||
} | ||
}]); | ||
render() { | ||
const { activeFontFamily, sort } = this.props; | ||
const { expanded, loadingStatus } = this.state; | ||
const fonts = Array.from(this.fontManager.getFonts().values()); | ||
if (sort === "alphabet") { | ||
fonts.sort((font1, font2) => 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 = { | ||
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: () => { }, | ||
}; | ||
return FontPicker; | ||
}(PureComponent); | ||
_defineProperty(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 onChange() {} | ||
}); | ||
export { FontPicker as default }; | ||
module.exports = FontPicker; |
{ | ||
"name": "font-picker-react", | ||
"version": "3.3.0", | ||
"version": "3.4.0", | ||
"description": "Font selector component for Google Fonts", | ||
@@ -25,2 +25,3 @@ "author": { | ||
"main": "./dist/FontPicker.js", | ||
"module": "./dist/FontPicker.es.js", | ||
"types": "./dist/FontPicker.d.ts", | ||
@@ -32,8 +33,8 @@ "files": [ | ||
"start": "npm-run-all build:clean build:ts --parallel start:*", | ||
"start:ts": "babel ./src/FontPicker.tsx --out-file ./dist/FontPicker.js --watch", | ||
"start:ts": "rollup --config --sourcemap --watch", | ||
"start:storybook": "start-storybook --port 3000", | ||
"build": "run-s build:*", | ||
"build:clean": "rm -rf ./dist/ && mkdir ./dist/", | ||
"build:ts": "babel ./src/FontPicker.tsx --out-file ./dist/FontPicker.js", | ||
"build:types": "tsc --emitDeclarationOnly", | ||
"build:ts": "rollup --config", | ||
"test": "tsc --noEmit", | ||
"format": "prettier --write", | ||
@@ -44,3 +45,2 @@ "lint:css": "stylelint --fix --max-warnings 0", | ||
"lint:ts": "eslint --ext .ts,.tsx --fix --max-warnings 0", | ||
"typecheck": "tsc --noEmit", | ||
"version": "yarn build", | ||
@@ -50,3 +50,3 @@ "release": "np" | ||
"dependencies": { | ||
"@samuelmeuli/font-manager": "^1.1.1" | ||
"@samuelmeuli/font-manager": "^1.2.0" | ||
}, | ||
@@ -58,47 +58,31 @@ "peerDependencies": { | ||
"devDependencies": { | ||
"@babel/cli": "^7.5.5", | ||
"@babel/core": "^7.5.5", | ||
"@babel/plugin-proposal-class-properties": "^7.5.5", | ||
"@babel/preset-env": "^7.5.5", | ||
"@babel/preset-react": "^7.0.0", | ||
"@babel/preset-typescript": "^7.3.3", | ||
"@samuelmeuli/eslint-config": "^2.1.0", | ||
"@samuelmeuli/eslint-config": "^3.0.1", | ||
"@samuelmeuli/stylelint-config": "^1.0.2", | ||
"@samuelmeuli/tsconfig": "^0.1.1", | ||
"@storybook/react": "^5.0.5", | ||
"@types/react": "^16.8.10", | ||
"@typescript-eslint/eslint-plugin": "^1.5.0", | ||
"@typescript-eslint/parser": "^1.5.0", | ||
"@storybook/react": "^5.1.11", | ||
"@types/react": "^16.9.2", | ||
"@typescript-eslint/eslint-plugin": "^2.0.0", | ||
"@typescript-eslint/parser": "^2.0.0", | ||
"babel-loader": "^8.0.6", | ||
"eslint": "^5.15.3", | ||
"eslint-config-airbnb": "^17.1.0", | ||
"eslint-config-prettier": "^6.0.0", | ||
"eslint-plugin-import": "^2.14.0", | ||
"eslint-plugin-jsx-a11y": "^6.1.1", | ||
"eslint-plugin-react": "^7.11.1", | ||
"husky": "^3.0.2", | ||
"lint-staged": "^9.2.1", | ||
"eslint": "6.1.0", | ||
"eslint-config-airbnb": "18.0.1", | ||
"eslint-config-prettier": "^6.1.0", | ||
"eslint-plugin-import": "^2.18.2", | ||
"eslint-plugin-jsx-a11y": "^6.2.3", | ||
"eslint-plugin-react": "^7.14.3", | ||
"eslint-plugin-react-hooks": "^1.7.0", | ||
"eslint-plugin-simple-import-sort": "^4.0.0", | ||
"husky": "^3.0.4", | ||
"lint-staged": "^9.2.3", | ||
"np": "^5.0.2", | ||
"npm-run-all": "^4.1.3", | ||
"prettier": "^1.16.4", | ||
"react": "^16.8.6", | ||
"react-dom": "^16.8.6", | ||
"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" | ||
}, | ||
"babel": { | ||
"presets": [ | ||
"@babel/preset-typescript", | ||
"@babel/react", | ||
[ | ||
"@babel/preset-env", | ||
{ | ||
"modules": false | ||
} | ||
] | ||
], | ||
"plugins": [ | ||
"@babel/plugin-proposal-class-properties" | ||
] | ||
}, | ||
"eslintConfig": { | ||
@@ -121,2 +105,3 @@ "root": true, | ||
"./.storybook/**/*.js", | ||
"./rollup.config.js", | ||
"./stories/**/*.jsx" | ||
@@ -164,5 +149,5 @@ ] | ||
"hooks": { | ||
"pre-commit": "yarn typecheck && lint-staged" | ||
"pre-commit": "yarn test && lint-staged" | ||
} | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage 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
Major refactor
Supply chain riskPackage 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
21896
28
7
312