Merge pull request #3212 from Yaska/newAPI

Use autoFocus where possible
keystonejs · Jul 26, 2016 · ad6c52c · ad6c52c
2 parents beff819 + 5119d9b
commit ad6c52c
Show file tree

Hide file tree

Showing 25 changed files with 66 additions and 62 deletions.
diff --git a/admin/client/App/screens/Item/components/EditFormHeader.js b/admin/client/App/screens/Item/components/EditFormHeader.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { findDOMNode } from 'react-dom';
 import Toolbar from './Toolbar';
 import ToolbarSection from './Toolbar/ToolbarSection';
 import { Button, FormIconField, FormInput, ResponsiveText } from 'elemental';
@@ -28,7 +29,7 @@ var Header = React.createClass({
 		const escapeKeyCode = 27;
 
 		if (event.which === escapeKeyCode) {
-			this.refs.searchField.blur();
+			findDOMNode(this.refs.searchField).blur();
 		}
 	},
 	renderDrilldown () {

diff --git a/admin/client/App/screens/List/components/Filtering/ListFiltersAdd.js b/admin/client/App/screens/List/components/Filtering/ListFiltersAdd.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { findDOMNode } from 'react-dom';
 import Transition from 'react-addons-css-transition-group';
 import classnames from 'classnames';
 import ListFiltersAddForm from './ListFiltersAddForm';
@@ -50,7 +51,7 @@ var ListFiltersAdd = React.createClass({
 		}, this.focusSearch);
 	},
 	focusSearch () {
-		this.refs.search.focus();
+		findDOMNode(this.refs.search).focus();
 	},
 	selectField (field) {
 		this.setState({

diff --git a/admin/client/App/screens/List/components/Filtering/ListFiltersAddForm.js b/admin/client/App/screens/List/components/Filtering/ListFiltersAddForm.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { findDOMNode } from 'react-dom';
 import Popout from '../../../../shared/Popout';
 
 import { Filters } from 'FieldTypes';
@@ -26,7 +27,7 @@ var ListFiltersAddForm = React.createClass({
 	},
 	updateHeight (bodyHeight) {
 		bodyHeight += 40; // TODO: remove magic number, currently accounts for padding
-		const footerHeight = this.refs.footer.offsetHeight;
+		const footerHeight = findDOMNode(this.refs.footer).offsetHeight;
 		const maxBodyHeight = this.props.maxHeight - footerHeight;
 		const newHeight = bodyHeight + footerHeight;
 		// console.log(bodyHeight, maxBodyHeight, '|', newHeight, this.props.maxHeight);

diff --git a/admin/client/App/screens/List/components/ListColumnsForm.js b/admin/client/App/screens/List/components/ListColumnsForm.js
@@ -30,10 +30,6 @@ var ListColumnsForm = React.createClass({
 			selectedColumns: this.getSelectedColumnsFromStore(),
 			isOpen: visible,
 			searchString: '',
-		}, () => {
-			if (visible) {
-				this.refs.search.focus();
-			}
 		});
 	},
 	toggleColumn (path, value) {
@@ -89,7 +85,7 @@ var ListColumnsForm = React.createClass({
 	render () {
 		return (
 			<InputGroup.Section className={this.props.className}>
-				<Button ref="target" id="listHeaderColumnButton" isActive={this.state.isOpen} onClick={() => this.togglePopout(!this.state.isOpen)}>
+				<Button id="listHeaderColumnButton" isActive={this.state.isOpen} onClick={() => this.togglePopout(!this.state.isOpen)}>
 					<span className={this.props.className + '__icon octicon octicon-list-unordered'} />
 					<span className={this.props.className + '__label'}>Columns</span>
 					<span className="disclosure-arrow" />
@@ -98,7 +94,7 @@ var ListColumnsForm = React.createClass({
 					<Popout.Header title="Columns" />
 					<Popout.Body scrollable>
 						<FormField style={{ borderBottom: '1px dashed rgba(0,0,0,0.1)', paddingBottom: '1em' }}>
-							<FormInput ref="search" value={this.state.searchString} onChange={this.updateSearch} placeholder="Find a column..." />
+							<FormInput autoFocus value={this.state.searchString} onChange={this.updateSearch} placeholder="Find a column..." />
 						</FormField>
 						<PopoutList>
 							{this.renderColumns()}

diff --git a/admin/client/App/screens/List/components/ListDownloadForm.js b/admin/client/App/screens/List/components/ListDownloadForm.js
@@ -115,7 +115,7 @@ var ListDownloadForm = React.createClass({
 								<SegmentedControl equalWidthSegments options={FORMAT_OPTIONS} value={this.state.format} onChange={this.changeFormat} />
 							</FormField>
 							<FormField label="Columns:">
-								<Checkbox autofocus label="Use currently selected" onChange={this.toggleCurrentlySelectedColumns} value checked={useCurrentColumns} />
+								<Checkbox autoFocus label="Use currently selected" onChange={this.toggleCurrentlySelectedColumns} value checked={useCurrentColumns} />
 							</FormField>
 							{this.renderColumnSelect()}
 						</Form>

diff --git a/admin/client/App/screens/List/components/ListSort.js b/admin/client/App/screens/List/components/ListSort.js
@@ -45,8 +45,6 @@ var ListSort = React.createClass({
 	openPopout () {
 		this.setState({
 			popoutIsOpen: true,
-		}, () => {
-			this.refs.search.focus();
 		});
 	},
 	closePopout () {
@@ -116,7 +114,7 @@ var ListSort = React.createClass({
 					<Popout.Body scrollable>
 						<FormField style={formFieldStyles}>
 							<FormInput
-								ref="search"
+								autoFocus
 								value={this.state.searchString}
 								onChange={this.updateSearch}
 								placeholder="Find a field..."

diff --git a/admin/client/App/screens/List/components/UpdateForm.js b/admin/client/App/screens/List/components/UpdateForm.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import Select from 'react-select';
+import { findDOMNode } from 'react-dom';
 import assign from 'object-assign';
 import { Fields } from 'FieldTypes';
 import InvalidFieldType from '../../../shared/InvalidFieldType';
@@ -25,13 +26,14 @@ var UpdateForm = React.createClass({
 		};
 	},
 	componentDidMount () {
-		if (this.refs.focusTarget) {
-			this.refs.focusTarget.focus();
-		}
+		this.doFocus();
 	},
 	componentDidUpdate () {
+		this.doFocus();
+	},
+	doFocus () {
 		if (this.refs.focusTarget) {
-			this.refs.focusTarget.focus();
+			findDOMNode(this.refs.focusTarget).focus();
 		}
 	},
 	getOptions () {
@@ -50,9 +52,7 @@ var UpdateForm = React.createClass({
 	updateOptions (fields) {
 		this.setState({
 			fields: fields,
-		}, () => {
-			this.refs.focusTarget.focus();
-		});
+		}, this.doFocus);
 	},
 	handleChange (value) {
 		console.log('handleChange:', value);

diff --git a/admin/client/App/screens/List/index.js b/admin/client/App/screens/List/index.js
@@ -4,6 +4,7 @@
  */
 
 import React from 'react';
+import { findDOMNode } from 'react-dom';
 import classnames from 'classnames';
 import { BlankState, Button, Container, FormInput, InputGroup, Pagination, Spinner } from 'elemental';
 import { connect } from 'react-redux';
@@ -141,7 +142,7 @@ const ListView = React.createClass({
 	handleSearchClear () {
 		this.props.dispatch(setActiveSearch(''));
 		this.setState({ searchString: '' });
-		this.refs.listSearchInput.focus();
+		findDOMNode(this.refs.listSearchInput).focus();
 	},
 	handleSearchKey (e) {
 		// clear on esc

diff --git a/admin/client/App/shared/ConfirmationDialog.js b/admin/client/App/shared/ConfirmationDialog.js
@@ -6,13 +6,6 @@ import React, { Component, PropTypes } from 'react';
 import { Modal, ModalBody, ModalFooter, Button } from 'elemental';
 
 class ConfirmationDialog extends Component {
-	componentWillReceiveProps (nextProps) {
-		if (!this.props.isOpen && nextProps.isOpen) {
-			setTimeout(() => {
-				this.refs.confirm.focus();
-			}, 0);
-		}
-	}
 	getBodyHtml () {
 		return {
 			__html: this.props.body,
@@ -37,7 +30,7 @@ class ConfirmationDialog extends Component {
 			>
 				<ModalBody dangerouslySetInnerHTML={this.getBodyHtml()} />
 				<ModalFooter>
-					<Button ref="confirm" size="sm" type={confirmationType} onClick={onConfirmation}>
+					<Button autoFocus size="sm" type={confirmationType} onClick={onConfirmation}>
 						{confirmationLabel}
 					</Button>
 					<Button size="sm" type="link-cancel" onClick={onCancel}>

diff --git a/admin/client/App/shared/CreateForm.js b/admin/client/App/shared/CreateForm.js
@@ -4,6 +4,7 @@
  */
 
 import React from 'react';
+import { findDOMNode } from 'react-dom';
 import assign from 'object-assign';
 import AlertMessages from './AlertMessages';
 import { Fields } from 'FieldTypes';
@@ -55,7 +56,7 @@ const CreateForm = React.createClass({
 	// Focus the first input field
 	focusTarget () {
 		if (this.refs.focusTarget) {
-			this.refs.focusTarget.focus();
+			findDOMNode(this.refs.focusTarget).focus();
 		}
 	},
 	// Handle input change events

diff --git a/fields/components/DateInput.js b/fields/components/DateInput.js
@@ -1,6 +1,7 @@
 import moment from 'moment';
 import DayPicker from 'react-day-picker';
 import React from 'react';
+import { findDOMNode } from 'react-dom';
 import Popout from '../../admin/client/App/shared/Popout';
 import { FormInput } from 'elemental';
 
@@ -46,7 +47,7 @@ module.exports = React.createClass({
 	},
 	focus () {
 		if (!this.refs.input) return;
-		this.refs.input.focus();
+		findDOMNode(this.refs.input).focus();
 	},
 	handleInputChange (e) {
 		const { value } = e.target;

diff --git a/fields/mixins/ArrayField.js b/fields/mixins/ArrayField.js
@@ -1,4 +1,5 @@
 var React = require('react');
+import { findDOMNode } from 'react-dom';
 
 var Button = require('elemental').Button;
 var FormField = require('elemental').FormField;
@@ -37,7 +38,7 @@ module.exports = {
 			values: newValues,
 		}, () => {
 			if (!this.state.values.length) return;
-			this.refs['item_' + this.state.values.length].focus();
+			findDOMNode(this.refs['item_' + this.state.values.length]).focus();
 		});
 		this.valueChanged(reduceValues(newValues));
 	},
@@ -47,7 +48,7 @@ module.exports = {
 		this.setState({
 			values: newValues,
 		}, function () {
-			this.refs.button.focus();
+			findDOMNode(this.refs.button).focus();
 		});
 		this.valueChanged(reduceValues(newValues));
 	},

diff --git a/fields/types/Field.js b/fields/types/Field.js
@@ -1,6 +1,7 @@
 import classnames from 'classnames';
 import evalDependsOn from '../utils/evalDependsOn.js';
 import React from 'react';
+import { findDOMNode } from 'react-dom';
 import { FormField, FormInput, FormNote } from 'elemental';
 import blacklist from 'blacklist';
 import CollapsedFieldLabel from '../components/CollapsedFieldLabel';
@@ -49,7 +50,7 @@ var Base = module.exports.Base = {
 	},
 	focus () {
 		if (!this.refs[this.spec.focusTargetRef]) return;
-		this.refs[this.spec.focusTargetRef].focus();
+		findDOMNode(this.refs[this.spec.focusTargetRef]).focus();
 	},
 	renderNote () {
 		if (!this.props.note) return null;

diff --git a/fields/types/code/CodeField.js b/fields/types/code/CodeField.js
@@ -2,6 +2,7 @@ import _ from 'lodash';
 import CodeMirror from 'codemirror';
 import Field from '../Field';
 import React from 'react';
+import { findDOMNode } from 'react-dom';
 import { FormInput } from 'elemental';
 import classnames from 'classnames';
 
@@ -34,7 +35,7 @@ module.exports = Field.create({
 			readOnly: this.shouldRenderField() ? false : true,
 		});
 
-		this.codeMirror = CodeMirror.fromTextArea(this.refs.codemirror, options);
+		this.codeMirror = CodeMirror.fromTextArea(findDOMNode(this.refs.codemirror), options);
 		this.codeMirror.setSize(null, this.props.height);
 		this.codeMirror.on('change', this.codemirrorValueChanged);
 		this.codeMirror.on('focus', this.focusChanged.bind(this, true));

diff --git a/fields/types/date/DateFilter.js b/fields/types/date/DateFilter.js
@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import { findDOMNode } from 'react-dom';
 import moment from 'moment';
 import DayPicker from 'react-day-picker';
 
@@ -64,7 +65,7 @@ var DateFilter = React.createClass({
 	componentDidMount () {
 		// focus the text input
 		if (this.props.filter.mode === 'between') {
-			this.refs[this.state.activeInputField].focus();
+			findDOMNode(this.refs[this.state.activeInputField]).focus();
 		} else {
 			this.refs.input.focus();
 		}
@@ -83,7 +84,7 @@ var DateFilter = React.createClass({
 	setFocus (mode) {
 		if (mode === 'between') {
 			setTimeout(() => {
-				this.refs[this.state.activeInputField].focus();
+				findDOMNode(this.refs[this.state.activeInputField]).focus();
 			}, 50);
 		} else {
 			setTimeout(() => {
@@ -120,7 +121,7 @@ var DateFilter = React.createClass({
 		this.setState(
 			{ activeInputField: newActiveField },
 			() => {
-				this.refs[newActiveField].focus();
+				findDOMNode(this.refs[newActiveField]).focus();
 			}
 		);
 	},

diff --git a/fields/types/datearray/DateArrayFilter.js b/fields/types/datearray/DateArrayFilter.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { findDOMNode } from 'react-dom';
 import moment from 'moment';
 import DayPicker from 'react-day-picker';
 
@@ -64,24 +65,24 @@ var DateFilter = React.createClass({
 	componentDidMount () {
 		// focus the text input
 		if (this.props.filter.mode === 'between') {
-			this.refs[this.state.activeInputField].focus();
+			findDOMNode(this.refs[this.state.activeInputField]).focus();
 		} else {
-			this.refs.input.focus();
+			findDOMNode(this.refs.input).focus();
 		}
 	},
 	updateFilter (value) {
 		this.props.onChange({ ...this.props.filter, ...value });
 	},
 	selectPresence (presence) {
 		this.updateFilter({ presence });
-		this.refs.input.focus();
+		findDOMNode(this.refs.input).focus();
 	},
 	selectMode (mode) {
 		this.updateFilter({ mode });
 		if (mode === 'between') {
-			setTimeout(() => { this.refs[this.state.activeInputField].focus(); }, 200);
+			setTimeout(() => { findDOMNode(this.refs[this.state.activeInputField]).focus(); }, 200);
 		} else {
-			this.refs.input.focus();
+			findDOMNode(this.refs.input).focus();
 		}
 	},
 	handleInputChange (e) {
@@ -110,7 +111,7 @@ var DateFilter = React.createClass({
 		this.setState(
 			{ activeInputField: newActiveField },
 			() => {
-				this.refs[newActiveField].focus();
+				findDOMNode(this.refs[newActiveField]).focus();
 			}
 		);
 	},

diff --git a/fields/types/geopoint/GeoPointFilter.js b/fields/types/geopoint/GeoPointFilter.js
@@ -74,7 +74,7 @@ var TextFilter = React.createClass({
 						label="Latitude"
 					>
 						<FormInput
-							autofocus
+							autoFocus
 							ref="latitude"
 							type="number"
 							required="true"

diff --git a/fields/types/location/LocationField.js b/fields/types/location/LocationField.js
@@ -100,14 +100,14 @@ module.exports = Field.create({
 		return <FormInput noedit>{this.formatValue() || '(no value)'}</FormInput>;
 	},
 
-	renderField (fieldPath, label, collapse, autofocus) {
+	renderField (fieldPath, label, collapse, autoFocus) {
 		if (this.state.collapsedFields[fieldPath]) {
 			return null;
 		}
 		const { value = {}, path } = this.props;
 		return (
 			<NestedFormField label={label}>
-				<FormInput autofocus={autofocus} name={path + '.' + fieldPath} value={value[fieldPath]} onChange={this.makeChanger(fieldPath)} placeholder={label} />
+				<FormInput autoFocus={autoFocus} name={path + '.' + fieldPath} value={value[fieldPath]} onChange={this.makeChanger(fieldPath)} placeholder={label} />
 			</NestedFormField>
 		);
 	},

diff --git a/fields/types/location/LocationFilter.js b/fields/types/location/LocationFilter.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { findDOMNode } from 'react-dom';
 
 import { FormField, FormInput, FormRow, SegmentedControl } from 'elemental';
 
@@ -44,7 +45,7 @@ var TextFilter = React.createClass({
 	},
 	toggleInverted (value) {
 		this.updateFilter('inverted', value);
-		this.refs.focusTarget.focus();
+		findDOMNode(this.refs.focusTarget).focus();
 	},
 	updateValue (e) {
 		this.updateFilter(e.target.name, e.target.value);
@@ -58,7 +59,7 @@ var TextFilter = React.createClass({
 					<SegmentedControl equalWidthSegments options={INVERTED_OPTIONS} value={filter.inverted} onChange={this.toggleInverted} />
 				</FormField>
 				<FormField>
-					<FormInput autofocus ref="focusTarget" value={filter.street} onChange={this.updateValue} name="street" placeholder="Address" />
+					<FormInput autoFocus ref="focusTarget" value={filter.street} onChange={this.updateValue} name="street" placeholder="Address" />
 				</FormField>
 				<FormRow>
 					<FormField width="two-thirds">