diff --git a/chrome/content/zotero-platform/mac/overlay.css b/chrome/content/zotero-platform/mac/overlay.css
index d457d308ff..acb230d456 100644
--- a/chrome/content/zotero-platform/mac/overlay.css
+++ b/chrome/content/zotero-platform/mac/overlay.css
@@ -1,3 +1,8 @@
+/* Force use of Lucida for HTML input elements (e.g., Editable) */
+input {
+ font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, -apple-system, sans-serif !important;
+}
+
#zotero-items-toolbar[state=collapsed]
{
margin-left: -8px !important;
diff --git a/chrome/content/zotero/components/editable.jsx b/chrome/content/zotero/components/editable.jsx
new file mode 100644
index 0000000000..eb170f9110
--- /dev/null
+++ b/chrome/content/zotero/components/editable.jsx
@@ -0,0 +1,117 @@
+/*
+ ***** BEGIN LICENSE BLOCK *****
+
+ Copyright © 2019 Corporation for Digital Scholarship
+ Vienna, Virginia, USA
+ https://digitalscholar.org
+
+ This file is part of Zotero.
+
+ Zotero is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ Zotero is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with Zotero. If not, see .
+
+ ***** END LICENSE BLOCK *****
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import EditableContent from './editable/content';
+import Input from './form/input';
+import TextAreaInput from './form/textArea';
+import SelectInput from './form/select';
+import { noop } from './utils';
+
+class Editable extends React.PureComponent {
+ get isActive() {
+ return (this.props.isActive || this.props.isBusy) && !this.props.isDisabled;
+ }
+
+ get isReadOnly() {
+ return this.props.isReadOnly || this.props.isBusy;
+ }
+
+ get className() {
+ const { input, inputComponent } = this.props;
+ return {
+ 'editable': true,
+ 'editing': this.isActive,
+ 'textarea': inputComponent === TextAreaInput || input && input.type === TextAreaInput,
+ 'select': inputComponent === SelectInput || input && input.type === SelectInput,
+ };
+ }
+
+ renderContent() {
+ const hasChildren = typeof this.props.children !== 'undefined';
+ return (
+
+ {
+ hasChildren ?
+ this.props.children :
+
+ }
+
+ );
+ }
+
+ renderControls() {
+ const { input: InputElement, inputComponent: InputComponent } = this.props;
+ if(InputElement) {
+ return InputElement;
+ } else {
+ const { className, innerRef, ...props } = this.props;
+ props.ref = innerRef;
+
+ return
+ }
+ }
+
+ render() {
+ const { isDisabled } = this.props;
+ return (
+ this.props.onClick(event) }
+ onFocus={ event => this.props.onFocus(event) }
+ onMouseDown={ event => this.props.onMouseDown(event) }
+ className={ cx(this.className) }
+ >
+ { this.isActive ? this.renderControls() : this.renderContent() }
+
+ );
+ }
+ static defaultProps = {
+ inputComponent: Input,
+ onClick: noop,
+ onFocus: noop,
+ onMouseDown: noop,
+ };
+
+ static propTypes = {
+ children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]),
+ input: PropTypes.element,
+ inputComponent: PropTypes.elementType,
+ isActive: PropTypes.bool,
+ isBusy: PropTypes.bool,
+ isDisabled: PropTypes.bool,
+ isReadOnly: PropTypes.bool,
+ };
+}
+
+
+export default React.forwardRef((props, ref) => );
\ No newline at end of file
diff --git a/chrome/content/zotero/components/editable/content.jsx b/chrome/content/zotero/components/editable/content.jsx
new file mode 100644
index 0000000000..d10dcab285
--- /dev/null
+++ b/chrome/content/zotero/components/editable/content.jsx
@@ -0,0 +1,91 @@
+/*
+ ***** BEGIN LICENSE BLOCK *****
+
+ Copyright © 2019 Corporation for Digital Scholarship
+ Vienna, Virginia, USA
+ https://digitalscholar.org
+
+ This file is part of Zotero.
+
+ Zotero is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ Zotero is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with Zotero. If not, see .
+
+ ***** END LICENSE BLOCK *****
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import TextAreaInput from '../form/textArea';
+import Select from '../form/select';
+
+class EditableContent extends React.PureComponent {
+ get hasValue() {
+ const { input, value } = this.props;
+ return !!(value || input && input.props.value);
+ }
+
+ get isSelect() {
+ const { input, inputComponent } = this.props;
+ return inputComponent === Select || input && input.type == Select;
+ }
+
+ get isTextarea() {
+ const { input, inputComponent } = this.props;
+ return inputComponent === TextAreaInput || input && input.type === TextAreaInput;
+ }
+
+ get displayValue() {
+ const { options, display, input } = this.props;
+ const value = this.props.value || input && input.props.value;
+ const placeholder = this.props.placeholder || input && input.props.placeholder;
+
+ if(!this.hasValue) { return placeholder; }
+ if(display) { return display; }
+
+ if(this.isSelect && options) {
+ const displayValue = options.find(e => e.value == value);
+ return displayValue ? displayValue.label : value;
+ }
+
+ return value;
+ }
+
+ render() {
+ const className = {
+ 'editable-content': true,
+ 'placeholder': !this.hasValue
+ };
+
+ return { this.displayValue }
;
+ }
+
+ static defaultProps = {
+ value: '',
+ placeholder: ''
+ };
+
+ static propTypes = {
+ display: PropTypes.string,
+ input: PropTypes.element,
+ inputComponent: PropTypes.elementType,
+ options: PropTypes.array,
+ placeholder: PropTypes.string,
+ value: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number
+ ])
+ };
+}
+
+export default EditableContent;
diff --git a/chrome/content/zotero/components/form/input.jsx b/chrome/content/zotero/components/form/input.jsx
index d70b131b56..12dfc56d2f 100644
--- a/chrome/content/zotero/components/form/input.jsx
+++ b/chrome/content/zotero/components/form/input.jsx
@@ -1,116 +1,209 @@
-/* eslint-disable react/no-deprecated */
-'use strict';
-
-const React = require('react');
-const PropTypes = require('prop-types');
-const cx = require('classnames');
-const { noop } = () => {};
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { noop } from '../utils';
+import { pickKeys } from '@zotero/immutable';
+//import AutoResizer from './auto-resizer';
+import Autosuggest from 'react-autosuggest';
class Input extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
+ suggestions: [],
value: props.value
};
+ this.suggestions = React.createRef();
+ this.showSuggestions = React.createRef(false);
+ this.preSuggestionValue = React.createRef();
+ this.selectedSuggestion = React.createRef();
}
cancel(event = null) {
- this.props.onCancel && this.props.onCancel(this.hasChanged, event);
+ this.props.onCancel(this.hasChanged, event);
this.hasBeenCancelled = true;
- this.input.blur();
+ this.props.innerRef.current && this.props.innerRef.current.blur();
}
commit(event = null) {
- this.props.onCommit && this.props.onCommit(this.state.value, this.hasChanged, event);
+ this.props.onCommit(this.state.value, this.hasChanged, event);
this.hasBeenCommitted = true;
}
focus() {
- if(this.input != null) {
- this.input.focus();
- this.props.selectOnFocus && this.input.select();
+ if (this.props.innerRef.current != null) {
+ this.props.innerRef.current.focus();
+ this.props.selectOnFocus && this.props.innerRef.current.select();
}
}
- componentWillReceiveProps({ value }) {
+ UNSAFE_componentWillReceiveProps({ value }) {
if (value !== this.props.value) {
this.setState({ value });
}
}
- handleChange({ target }) {
- this.setState({ value: target.value });
- this.props.onChange && this.props.onChange(target.value);
+ handleChange({ target }, options) {
+ var newValue = options.newValue || target.value;
+ this.setState({
+ value: newValue,
+ });
+ this.props.onChange(newValue);
}
handleBlur(event) {
- const shouldCancel = this.props.onBlur && this.props.onBlur(event);
+ if (this.selectedSuggestion.current) {
+ this.selectedSuggestion.current = null;
+ return;
+ }
if (this.hasBeenCancelled || this.hasBeenCommitted) { return; }
+ const shouldCancel = this.props.onBlur(event);
shouldCancel ? this.cancel(event) : this.commit(event);
}
handleFocus(event) {
- this.props.selectOnFocus && event.target.select();
- this.props.onFocus && this.props.onFocus(event);
+ !this.focused && this.props.selectOnFocus && event.target.select();
+ // Only focus the input once so that the entered text doesn't get selected when it matches
+ // a suggestion and the input gets rerendered with the suggestions drop-down
+ this.focused = true;
+ this.showSuggestions.current = false;
+ this.props.onFocus(event);
}
handleKeyDown(event) {
+ this.showSuggestions.current = true;
switch (event.key) {
case 'Escape':
this.cancel(event);
break;
+
case 'Enter':
- this.commit(event);
+ if (this.selectedSuggestion.current) {
+ let value = this.selectedSuggestion.current;
+ this.selectedSuggestion.current = null;
+ this.setState({ value });
+ }
+ else {
+ this.commit(event);
+ }
break;
- default:
- return;
}
+ this.props.onKeyDown(event);
+ }
+
+ handlePaste(event) {
+ this.props.onPaste && this.props.onPaste(event);
+ }
+
+ // Autosuggest will call this function every time you need to update suggestions.
+ // You already implemented this logic above, so just use it.
+ async handleSuggestionsFetchRequested({ value }) {
+ this.setState({
+ suggestions: await this.props.getSuggestions(value)
+ });
+ }
+
+ // Autosuggest will call this function every time you need to clear suggestions.
+ handleSuggestionsClearRequested() {
+ this.setState({
+ suggestions: []
+ });
+ }
+
+ getSuggestionValue(suggestion) {
+ return suggestion;
+ }
+
+ shouldRenderSuggestions(value) {
+ return value.length && this.showSuggestions.current;
+ }
+
+ renderSuggestion(suggestion) {
+ return
+ {suggestion}
+ ;
+ }
+
+ handleSuggestionSelected = (event, { suggestion, suggestionValue, suggestionIndex, sectionIndex, method }) => {
+ this.selectedSuggestion.current = suggestionValue;
+ // focusInputOnSuggestionClick in Autosuggest doesn't work with a custom renderInputComponent,
+ // so refocus the textbox manually
+ setTimeout(() => this.props.innerRef.current.focus());
+ }
+
+ get value() {
+ return this.state.value;
}
get hasChanged() {
return this.state.value !== this.props.value;
}
- render() {
+ renderInput() {
this.hasBeenCancelled = false;
this.hasBeenCommitted = false;
- const extraProps = Object.keys(this.props).reduce((aggr, key) => {
- if(key.match(/^(aria-|data-).*/)) {
- aggr[key] = this.props[key];
- }
- return aggr;
- }, {});
- const input = this.input = input }
- required={ this.props.isRequired }
- size={ this.props.size }
- spellCheck={ this.props.spellCheck }
- step={ this.props.step }
- tabIndex={ this.props.tabIndex }
- type={ this.props.type }
- value={ this.state.value }
- { ...extraProps }
- />;
+
+ const inputProps = {
+ disabled: this.props.isDisabled,
+ onBlur: this.handleBlur.bind(this),
+ onChange: this.handleChange.bind(this),
+ onFocus: this.handleFocus.bind(this),
+ onKeyDown: this.handleKeyDown.bind(this),
+ onPaste: this.handlePaste.bind(this),
+ readOnly: this.props.isReadOnly,
+ required: this.props.isRequired,
+ value: this.state.value,
+ ...pickKeys(this.props, ['autoFocus', 'className', 'form', 'id', 'inputMode', 'max',
+ 'maxLength', 'min', 'minLength', 'name', 'placeholder', 'type', 'spellCheck',
+ 'step', 'tabIndex']),
+ ...pickKeys(this.props, key => key.match(/^(aria-|data-).*/))
+ };
+
+ var input = this.props.autoComplete ? (
+ }
+ focusInputOnSuggestionClick={false}
+ shouldRenderSuggestions={this.shouldRenderSuggestions.bind(this)}
+ inputProps={inputProps}
+ />
+ ) : (
+
+ );
+
+ if(this.props.resize) {
+ /*input = (
+
+ { input }
+
+ );*/
+ }
+
return input;
}
+ render() {
+ const className = cx({
+ 'input-group': true,
+ 'input': true,
+ 'busy': this.props.isBusy
+ }, this.props.inputGroupClassName);
+ return (
+
+ { this.renderInput() }
+
+ );
+ }
+
static defaultProps = {
className: 'form-control',
onBlur: noop,
@@ -118,17 +211,23 @@ class Input extends React.PureComponent {
onChange: noop,
onCommit: noop,
onFocus: noop,
+ onKeyDown: noop,
+ onPaste: noop,
tabIndex: -1,
type: 'text',
value: '',
};
static propTypes = {
+ autoComplete: PropTypes.bool,
autoFocus: PropTypes.bool,
className: PropTypes.string,
form: PropTypes.string,
+ getSuggestions: PropTypes.func,
id: PropTypes.string,
+ inputGroupClassName: PropTypes.string,
inputMode: PropTypes.string,
+ isBusy: PropTypes.bool,
isDisabled: PropTypes.bool,
isReadOnly: PropTypes.bool,
isRequired: PropTypes.bool,
@@ -137,12 +236,15 @@ class Input extends React.PureComponent {
min: PropTypes.number,
minLength: PropTypes.number,
name: PropTypes.string,
- onBlur: PropTypes.func,
- onCancel: PropTypes.func,
- onChange: PropTypes.func,
- onCommit: PropTypes.func,
- onFocus: PropTypes.func,
+ onBlur: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired,
+ onChange: PropTypes.func.isRequired,
+ onCommit: PropTypes.func.isRequired,
+ onFocus: PropTypes.func.isRequired,
+ onKeyDown: PropTypes.func,
+ onPaste: PropTypes.func,
placeholder: PropTypes.string,
+ resize: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
selectOnFocus: PropTypes.bool,
spellCheck: PropTypes.bool,
step: PropTypes.number,
@@ -152,4 +254,6 @@ class Input extends React.PureComponent {
};
}
-module.exports = Input;
+export default React.forwardRef((props, ref) => );
\ No newline at end of file
diff --git a/chrome/content/zotero/components/form/select.jsx b/chrome/content/zotero/components/form/select.jsx
new file mode 100644
index 0000000000..d6144b94a6
--- /dev/null
+++ b/chrome/content/zotero/components/form/select.jsx
@@ -0,0 +1,221 @@
+/*
+ ***** BEGIN LICENSE BLOCK *****
+
+ Copyright © 2019 Corporation for Digital Scholarship
+ Vienna, Virginia, USA
+ https://digitalscholar.org
+
+ This file is part of Zotero.
+
+ Zotero is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ Zotero is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with Zotero. If not, see .
+
+ ***** END LICENSE BLOCK *****
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { noop } from '../utils';
+//import Spinner from '../ui/spinner';
+import Select from 'react-select';
+
+class SelectInput extends React.PureComponent {
+ constructor(props) {
+ super(props);
+ this.state = {
+ value: props.value
+ };
+ }
+
+ cancel(event = null) {
+ this.props.onCancel(this.hasChanged, event);
+ }
+
+ commit(event = null, value = null, force = false) {
+ this.props.onCommit(value || this.state.value, force ? true : this.hasChanged, event);
+ }
+
+ focus() {
+ if(this.input != null) {
+ this.input.focus();
+ }
+ }
+
+ UNSAFE_componentWillReceiveProps({ value }) {
+ if (value !== this.props.value) {
+ this.setState({ value });
+ }
+ }
+
+ handleChange(value, ev) {
+ value = value !== null || (value === null && this.props.clearable) ?
+ value : this.props.value;
+ this.setState({ value });
+
+ if(this.props.onChange(value) || this.forceCommitOnNextChange) {
+ if(!ev) {
+ //@NOTE: this is using undocumeneted feature of react-selct v1, but see #131
+ const source = typeof this.input.input.getInput === 'function' ?
+ this.input.input.getInput() : this.input.input;
+ ev = {
+ type: 'change',
+ currentTarget: source,
+ target: source
+ }
+ }
+ this.commit(ev, value, value !== this.props.value);
+ }
+ this.forceCommitOnNextChange = false;
+ }
+
+ handleBlur(event) {
+ this.props.onBlur(event);
+ this.cancel(event);
+ if(this.props.autoBlur) {
+ this.forceCommitOnNextChange = true;
+ }
+ }
+
+ handleFocus(event) {
+ this.props.onFocus(event);
+ }
+
+ handleKeyDown(event) {
+ switch (event.key) {
+ case 'Escape':
+ this.cancel(event);
+ break;
+ default:
+ return;
+ }
+ }
+
+ get hasChanged() {
+ return this.state.value !== this.props.value;
+ }
+
+ get defaultSelectProps() {
+ return {
+ simpleValue: true,
+ clearable: false,
+ };
+ }
+
+ renderInput(userType, viewport) {
+ const {
+ options,
+ autoFocus,
+ className,
+ id,
+ placeholder,
+ tabIndex,
+ value,
+ } = this.props;
+
+ const commonProps = {
+ disabled: this.props.isDisabled,
+ onBlur: this.handleBlur.bind(this),
+ onFocus: this.handleFocus.bind(this),
+ readOnly: this.props.isReadOnly,
+ ref: input => this.input = input,
+ required: this.props.isRequired,
+ };
+
+ if(userType === 'touch' || viewport.xxs || viewport.xs || viewport.sm) {
+ const props = {
+ ...commonProps,
+ onKeyDown: this.handleKeyDown.bind(this),
+ onChange: ev => this.handleChange(ev.target.value, ev),
+ autoFocus, id, placeholder, tabIndex, value
+ };
+ return (
+
+
+
+ { (options.find(o => o.value === value) || options[0] || {}).label }
+
+
+ { this.renderInput(userType, viewport) }
+ { this.renderSpinner() }
+
+ );
+ }
+
+ static defaultProps = {
+ className: 'form-control',
+ onBlur: noop,
+ onCancel: noop,
+ onChange: noop,
+ onCommit: noop,
+ onFocus: noop,
+ options: [],
+ tabIndex: -1,
+ value: '',
+ };
+
+ static propTypes = {
+ autoFocus: PropTypes.bool,
+ className: PropTypes.string,
+ id: PropTypes.string,
+ inputGroupClassName: PropTypes.string,
+ isBusy: PropTypes.bool,
+ isDisabled: PropTypes.bool,
+ isReadOnly: PropTypes.bool,
+ isRequired: PropTypes.bool,
+ onBlur: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired,
+ onChange: PropTypes.func.isRequired,
+ onCommit: PropTypes.func.isRequired,
+ onFocus: PropTypes.func.isRequired,
+ options: PropTypes.array.isRequired,
+ placeholder: PropTypes.string,
+ tabIndex: PropTypes.number,
+ value: PropTypes.string.isRequired,
+ };
+}
+
+export default SelectInput;
diff --git a/chrome/content/zotero/components/form/textArea.jsx b/chrome/content/zotero/components/form/textArea.jsx
new file mode 100644
index 0000000000..56c25fd298
--- /dev/null
+++ b/chrome/content/zotero/components/form/textArea.jsx
@@ -0,0 +1,208 @@
+/*
+ ***** BEGIN LICENSE BLOCK *****
+
+ Copyright © 2019 Corporation for Digital Scholarship
+ Vienna, Virginia, USA
+ https://digitalscholar.org
+
+ This file is part of Zotero.
+
+ Zotero is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ Zotero is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with Zotero. If not, see .
+
+ ***** END LICENSE BLOCK *****
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { noop } from '../utils';
+//import AutoResizer from './auto-resizer';
+//import Spinner from '../ui/spinner';
+
+class TextAreaInput extends React.PureComponent {
+ constructor(props) {
+ super(props);
+ this.state = {
+ value: props.value
+ };
+ }
+
+ cancel(event = null) {
+ this.props.onCancel(this.hasChanged, event);
+ }
+
+ commit(event = null) {
+ this.props.onCommit(this.state.value, this.hasChanged, event);
+ }
+
+ focus() {
+ if (this.props.innerRef != null) {
+ this.props.innerRef.focus();
+ this.props.selectOnFocus && this.props.innerRef.select();
+ }
+ }
+
+ UNSAFE_componentWillReceiveProps({ value }) {
+ if (value !== this.props.value) {
+ this.setState({ value });
+ }
+ }
+
+ handleChange({ target }) {
+ this.setState({ value: target.value });
+ this.props.onChange(target.value);
+ }
+
+ handleBlur(event) {
+ const shouldCancel = this.props.onBlur(event);
+ shouldCancel ? this.cancel(event) : this.commit(event);
+ }
+
+ handleFocus(event) {
+ this.props.selectOnFocus && event.target.select();
+ this.props.onFocus(event);
+ }
+
+ handleKeyDown(event) {
+ const { isSingleLine } = this.props;
+ switch (event.key) {
+ case 'Escape':
+ this.cancel(event);
+ break;
+
+ case 'Enter':
+ if(event.shiftKey || isSingleLine) {
+ event.preventDefault();
+ this.commit(event);
+ }
+ break;
+
+ default:
+ return;
+ }
+ }
+
+ get hasChanged() {
+ return this.state.value !== this.props.value;
+ }
+
+ renderInput() {
+ const extraProps = Object.keys(this.props).reduce((aggr, key) => {
+ if(key.match(/^(aria-|data-).*/)) {
+ aggr[key] = this.props[key];
+ }
+ return aggr;
+ }, {});
+ const input = ;
+
+ return this.props.resize ?
+ //
+ { input }
+ /* */:
+ input;
+ }
+
+ renderSpinner() {
+ return null;
+ //return this.props.isBusy ? : null;
+ }
+
+ render() {
+ const className = cx({
+ 'input-group': true,
+ 'textarea': true,
+ 'busy': this.props.isBusy
+ }, this.props.inputGroupClassName);
+ return (
+
+ { this.renderInput() }
+ { this.renderSpinner() }
+
+ );
+ }
+
+ static defaultProps = {
+ className: 'form-control',
+ onBlur: noop,
+ onCancel: noop,
+ onChange: noop,
+ onCommit: noop,
+ onFocus: noop,
+ tabIndex: -1,
+ value: '',
+ };
+
+ static propTypes = {
+ //autoComplete: PropTypes.bool,
+ autoFocus: PropTypes.bool,
+ className: PropTypes.string,
+ cols: PropTypes.number,
+ form: PropTypes.string,
+ id: PropTypes.string,
+ inputGroupClassName: PropTypes.string,
+ isBusy: PropTypes.bool,
+ isDisabled: PropTypes.bool,
+ isReadOnly: PropTypes.bool,
+ isRequired: PropTypes.bool,
+ isSingleLine: PropTypes.bool,
+ maxLength: PropTypes.number,
+ minLength: PropTypes.number,
+ name: PropTypes.string,
+ onBlur: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired,
+ onChange: PropTypes.func.isRequired,
+ onCommit: PropTypes.func.isRequired,
+ onFocus: PropTypes.func.isRequired,
+ placeholder: PropTypes.string,
+ resize: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+ rows: PropTypes.number,
+ selectOnFocus: PropTypes.bool,
+ spellCheck: PropTypes.bool,
+ tabIndex: PropTypes.number,
+ value: PropTypes.string.isRequired,
+ wrap: PropTypes.bool,
+ };
+}
+
+export default React.forwardRef((props, ref) => );
diff --git a/chrome/content/zotero/components/itemPane/tagsBox.jsx b/chrome/content/zotero/components/itemPane/tagsBox.jsx
new file mode 100644
index 0000000000..0d5ae12a47
--- /dev/null
+++ b/chrome/content/zotero/components/itemPane/tagsBox.jsx
@@ -0,0 +1,433 @@
+/*
+ ***** BEGIN LICENSE BLOCK *****
+
+ Copyright © 2019 Corporation for Digital Scholarship
+ Vienna, Virginia, USA
+ https://digitalscholar.org
+
+ This file is part of Zotero.
+
+ Zotero is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ Zotero is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with Zotero. If not, see .
+
+ ***** END LICENSE BLOCK *****
+*/
+
+import React, { useState, useEffect, useRef, useMemo, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import Editable from '../editable';
+import Input from '../form/input';
+import TextAreaInput from '../form/textArea';
+//import Button from '../form/button';
+
+const TagsBox = React.forwardRef((props, ref) => {
+ const [prevInitialTags, setPrevInitialTags] = useState([]);
+ const [tags, setTags] = useState([]);
+ const tagNames = useMemo(() => new Set(tags.map(t => t.tag)), [tags]);
+ const [selectedTag, setSelectedTag] = useState('');
+ const [newRow, setNewRow] = useState(false);
+ const [currentValue, setCurrentValue] = useState('');
+ const [isMultiline, setIsMultiline] = useState(false);
+ const [rows, setRows] = useState(1);
+ const rootRef = useRef(null);
+ const textboxRef = useRef(null);
+ const requestID = useRef(1);
+ const newRowID = useRef(1);
+ const resetSelectionOnRender = useRef(false);
+ const skipNextEdit = useRef(false);
+
+ const removeStr = Zotero.getString('general.remove');
+
+ useEffect(() => {
+ // Move cursor to end of textarea after paste
+ if (isMultiline) {
+ //let textarea = window.getSelection().anchorNode.querySelector('textarea');
+ let textarea = rootRef.current && rootRef.current.querySelector('textarea');
+ if (textarea) {
+ textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+ }
+ }
+ if (resetSelectionOnRender.current) {
+ resetSelectionOnRender.current = false;
+ if (props.onResetSelection) {
+ props.onResetSelection();
+ }
+ }
+ });
+
+ useImperativeHandle(ref, () => ({
+ blurOpenField
+ }));
+
+ function handleAddTag() {
+ setSelectedTag('');
+ showNewRow(true);
+ requestID.current++;
+ }
+
+ function showNewRow(show) {
+ setNewRow(show);
+ if (show) {
+ setSelectedTag('');
+ newRowID.current++;
+ }
+ }
+
+ function handleEdit(event) {
+ if (skipNextEdit.current) {
+ skipNextEdit.current = false;
+ return;
+ }
+ var tag = event.currentTarget.closest('[data-tag]').dataset.tag;
+ if (tag === '') {
+ return;
+ }
+ // If switching from input to textarea, don't change anything
+ if (isMultiline) {
+ return;
+ }
+ setCurrentValue(tag);
+ setSelectedTag(tag);
+ showNewRow(false);
+ }
+
+ function handleKeyDown(event) {
+ // With the delete button set to tabindex=-1, Tab doesn't work in the last tag for some
+ // reason, so blur it manually
+ if (!isMultiline && event.key == 'Tab' && !event.shiftKey) {
+ let target = event.currentTarget || event.target;
+ let oldTag = target.closest('[data-tag]').dataset.tag;
+ if (oldTag === '' && target.value === '') {
+ textboxRef.current.blur();
+ }
+ }
+ }
+
+ function handleMouseDown(event) {
+ // Prevent right-click on a tag from switching to edit mode
+ if (event.button != 0) {
+ event.stopPropagation();
+ event.preventDefault();
+ // The above works on its own, but setting the XUL context popup allows the event to go
+ // through if the confirmation prompt for "Remove All Tags" is cancelled, so we need
+ // to skip the next edit event as well
+ skipNextEdit.current = true;
+ }
+ }
+
+ function handleCommit(newTag, hasChanged, event) {
+ var oldTag = (event.currentTarget || event.target).closest('[data-tag]').dataset.tag;
+
+ var oldTags = tags;
+ var sortedTags = getSortedTags(oldTags);
+ var lastTag = sortedTags.length ? sortedTags[oldTags.length - 1] : null;
+
+ if (!isMultiline
+ && event.key == 'Enter'
+ && event.shiftKey) {
+ let trimmed = newTag.trim();
+ if (trimmed !== '') {
+ trimmed += "\n";
+ }
+ setCurrentValue(trimmed);
+ setIsMultiline(true);
+ setRows(6);
+ event.preventDefault();
+ return;
+ }
+
+ setCurrentValue('');
+ setSelectedTag('');
+ setIsMultiline(false);
+
+ // Tag hasn't changed
+ if (oldTag === newTag) {
+ // If Enter was pressed in an empty text box, hide it
+ if (newTag === '') {
+ showNewRow(false);
+ }
+ /*else if (oldTag == lastTag.tag) {
+ showNewRow(true);
+ }*/
+ resetSelectionOnRender.current = event.key == 'Enter';
+ return;
+ }
+
+ var newTags = [];
+
+ if (newTag !== '') {
+ // Split by newlines
+ let splitTags = newTag.split(/\r\n?|\n/)
+ .map(val => val.trim())
+ .filter(x => x);
+ let newTagsMap = new Map();
+
+ // Get all tags
+ for (let i = 0; i < oldTags.length; i++) {
+ let tag = oldTags[i];
+
+ // If this was the tag being edited, add the new value(s)
+ if (tag.tag == oldTag) {
+ for (let t of splitTags) {
+ newTagsMap.set(t, { tag: t });
+ }
+ if (oldTag == lastTag) {
+ showNewRow(true);
+ }
+ }
+ // Otherwise add the old one
+ else {
+ newTagsMap.set(tag.tag, tag);
+ }
+ }
+
+ // New tag at end
+ if (oldTag === '') {
+ for (let t of splitTags) {
+ newTagsMap.set(t, { tag: t });
+ }
+ // Call this again to increment the ref and avoid reusing the entered value in the
+ // next new row
+ showNewRow(true);
+ }
+ else {
+ resetSelectionOnRender.current = event.key == 'Enter';
+ }
+
+ newTags = [...newTagsMap.values()];
+ }
+ // Tag cleared
+ else {
+ newTags = oldTags.filter(tag => tag.tag != oldTag);
+ showNewRow(false);
+ resetSelectionOnRender.current = event.key == 'Enter';
+ }
+
+ setTags(getSortedTags(newTags));
+ props.onTagsUpdate(newTags);
+ }
+
+ function handleCancel() {
+ setCurrentValue('');
+ setSelectedTag('');
+ setIsMultiline(false);
+ showNewRow(false);
+ //setSuggestions([]);
+ resetSelectionOnRender.current = true;
+ requestID.current++;
+ }
+
+ function handleDelete(event) {
+ var tag = event.currentTarget.closest('[data-tag]').dataset.tag;
+ var oldTags = tags;
+
+ setSelectedTag('');
+
+ var newTags = oldTags.filter(t => t.tag !== tag);
+ setTags(newTags);
+ props.onTagsUpdate(newTags);
+ }
+
+ function handlePaste(event) {
+ var text = event.clipboardData.getData('text');
+ //paste = paste.toUpperCase();
+
+ var multiline = !!text.trim().match(/\n/);
+ if (multiline) {
+ //setCurrentValue(str.trim());
+
+ let field = event.target;
+ let newValue;
+ // TODO: Add newlines before and after if necessary
+ if (field.selectionStart || field.selectionStart == '0') {
+ let startPos = field.selectionStart;
+ let endPos = field.selectionEnd;
+ newValue = field.value.substring(0, startPos)
+ + text
+ + field.value.substring(endPos, field.value.length);
+ }
+ else {
+ newValue = field.value + text;
+ }
+
+ setCurrentValue(newValue);
+ setIsMultiline(true);
+ setRows(newValue.split(/\n/).length);
+ event.preventDefault();
+ }
+ }
+
+ function blurOpenField(event) {
+ if (textboxRef.current && event.target != textboxRef.current) {
+ textboxRef.current.blur();
+ }
+ }
+
+ function getSortedTags(tags) {
+ var sortedTags = [...tags];
+ sortedTags.sort((a, b) => a.tag.localeCompare(b.tag));
+ return sortedTags;
+ }
+
+ async function getFilteredSuggestions(value) {
+ var suggestions = await props.getSuggestions(value);
+ return suggestions.filter(s => !tagNames.has(s));
+ }
+
+ function tagsEqual(a, b) {
+ if (a.length != b.length) return false;
+ for (let i = 0; i < a.length; i++) {
+ if (a[i].tag !== b[i].tag || a[i].type !== b[i].type) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ function renderCount() {
+ var count = tags.length;
+ var str = 'pane.item.tags.count.';
+ // TODO: Switch to plural rules
+ switch (count) {
+ case 0:
+ str += 'zero';
+ break;
+ case 1:
+ str += 'singular';
+ break;
+ default:
+ str += 'plural';
+ break;
+ }
+ return Zotero.getString(str, [count]);
+ }
+
+ function renderTagRow(tag) {
+ // Icon
+ var iconFile = 'tag';
+ var title = '';
+ if (!tag.type || tag.newRow) {
+ title = Zotero.getString('pane.item.tags.icon.user');
+ }
+ else if (tag.type == 1) {
+ title = Zotero.getString('pane.item.tags.icon.automatic');
+ iconFile += '-automatic';
+ }
+
+ var selected = tag.tag === selectedTag;
+
+ // Style colored tags
+ var style = {};
+ if (!selected) {
+ let colorData = props.colors.get(tag.tag);
+ if (colorData) {
+ style.fontWeight = 'bold';
+ style.color = colorData.color;
+ }
+ }
+
+ return (
+
+ 
setSelectedTag(tag.tag)}
+ />
+
+
+
+ {props.editable
+ && ()}
+
+ );
+ }
+
+ // When the initial tags change (because the item was updated), update state with those
+ var initialTags = getSortedTags(props.initialTags);
+ if (!tagsEqual(initialTags, prevInitialTags)) {
+ setTags(initialTags);
+ setPrevInitialTags(initialTags);
+ }
+
+ var displayTags = [...tags];
+ if (newRow) {
+ displayTags.push({
+ tag: '',
+ newRow: true
+ });
+ }
+
+ return (
+
+
+
{renderCount()}
+
+
+
+ {displayTags.map(tag => renderTagRow(tag))}
+
+
+