Merge from upstream Zotero

Juris-M · Mar 31, 2019 · 97710aa · 97710aa
2 parents 4608648 + ecdcb65
commit 97710aa
Show file tree

Hide file tree

Showing 38 changed files with 2,959 additions and 1,248 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,19 +1,20 @@
 {
   "compact": false,
   "retainLines": true,
-  "presets": [],
+  "presets": [
+    "@babel/preset-react"
+  ],
   "ignore": [
     "chrome/content/zotero/include.js",
     "chrome/content/zotero/xpcom/citeproc.js",
     "resource/react.js",
     "resource/react-dom.js",
+    "resource/react-virtualized.js",
     "test/resource/*.js"
   ],
   "plugins": [
-    "syntax-jsx",
-    "transform-react-jsx",
-    "transform-react-display-name",
-    "transform-class-properties",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread",
     [
       "transform-es2015-modules-commonjs",
       {

diff --git a/.eslintrc b/.eslintrc
@@ -79,7 +79,6 @@
 		"callback-return": "off",
 		"camelcase": "error",
 		"capitalized-comments": "off",
-		"class-methods-use-this": "error",
 		"comma-dangle": "off",
 		"comma-spacing": [
 			"warn",
@@ -147,7 +146,6 @@
 			"unix"
 		],
 		"lines-around-comment": "error",
-		"lines-around-directive": "error",
 		"lines-between-class-members": "error",
 		"max-depth": "off",
 		"max-len": "off",
@@ -271,7 +269,8 @@
 		"no-unused-vars": [
 			"error",
 			{
-				"argsIgnorePattern": "^_"
+				"argsIgnorePattern": "^_",
+				"varsIgnorePattern": "^_"
 			}
 		],
 		"no-use-before-define": "off",
@@ -307,7 +306,11 @@
 			"error",
 			"never"
 		],
-		"padding-line-between-statements": "error",
+		"padding-line-between-statements": [
+			"error",
+			{ blankLine: "always", prev: "directive", next: "*" },
+			{ blankLine: "any",    prev: "directive", next: "directive" }
+		],
 		"prefer-arrow-callback": "off",
 		"prefer-const": "off",
 		"prefer-destructuring": "off",
@@ -359,7 +362,6 @@
 		"space-infix-ops": "warn",
 		"space-unary-ops": "error",
 		"spaced-comment": "warn",
-		"strict": "error",
 		"switch-colon-spacing": "error",
 		"symbol-description": "error",
 		"template-curly-spacing": [

diff --git a/chrome/content/zotero/components/search.jsx b/chrome/content/zotero/components/search.jsx
@@ -23,7 +23,7 @@ class Search extends React.PureComponent {
 		};
 	}
 
-	handleInput = (event) => {
+	handleChange = (event) => {
 		var value = event.target.value;
 		// Update controlled value and cancel button immediately
 		this.setState({
@@ -54,17 +54,17 @@ class Search extends React.PureComponent {
 	}
 
 	focus() {
-		this.inputRef.focus();
+		this.inputRef.current.focus();
 	}
 
 	render() {
 		return (
 			<div className="search">
 				<input
+					ref={this.inputRef}
 					type="search"
-					onInput={this.handleInput}
+					onChange={this.handleChange}
 					onKeyDown={this.handleKeyDown}
-					ref={this.inputRef}
 					value={this.state.immediateValue}
 				/>
 				{this.state.immediateValue !== ''

diff --git a/chrome/content/zotero/components/tag-selector.jsx b/chrome/content/zotero/components/tag-selector.jsx
@@ -3,21 +3,30 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const TagList = require('./tag-selector/tag-list');
-const Input = require('./form/input');
 const { Button } = require('./button');
 const { IconTagSelectorMenu } = require('./icons');
 const Search = require('./search');
 
-class TagSelector extends React.Component {
+class TagSelector extends React.PureComponent {
 	render() {
 		return (
 			<div className="tag-selector">
-				<TagList {...this.props} />
+				<TagList
+					ref={this.props.tagListRef}
+					tags={this.props.tags}
+					dragObserver={this.props.dragObserver}
+					onSelect={this.props.onSelect}
+					onTagContext={this.props.onTagContext}
+					loaded={this.props.loaded}
+					width={this.props.width}
+					height={this.props.height}
+					fontSize={this.props.fontSize}
+				/>
 				<div className="tag-selector-filter-container">
 					<Search
+						ref={this.props.searchBoxRef}
 						value={this.props.searchString}
 						onSearch={this.props.onSearch}
-						inputRef={this.searchBoxRef}
 						className="tag-selector-filter"
 					/>
 					<Button
@@ -34,24 +43,34 @@ class TagSelector extends React.Component {
 }
 
 TagSelector.propTypes = {
+	// TagList
+	tagListRef: PropTypes.object,
 	tags: PropTypes.arrayOf(PropTypes.shape({
 		name: PropTypes.string,
 		selected: PropTypes.bool,
 		color: PropTypes.string,
-		disabled: PropTypes.bool
+		disabled: PropTypes.bool,
+		width: PropTypes.number
 	})),
 	dragObserver: PropTypes.shape({
 		onDragOver: PropTypes.func,
 		onDragExit: PropTypes.func,
 		onDrop: PropTypes.func
 	}),
-	searchBoxRef: PropTypes.object,
-	searchString: PropTypes.string,
 	onSelect: PropTypes.func,
 	onTagContext: PropTypes.func,
+	loaded: PropTypes.bool,
+	width: PropTypes.number.isRequired,
+	height: PropTypes.number.isRequired,
+	fontSize: PropTypes.number.isRequired,
+
+	// Search
+	searchBoxRef: PropTypes.object,
+	searchString: PropTypes.string,
 	onSearch: PropTypes.func,
+
+	// Button
 	onSettings: PropTypes.func,
-	loaded: PropTypes.bool,
 };
 
 TagSelector.defaultProps = {