openstack
/
fuel-ui
Code Issues Proposed changes

React 0.14 ReactDOM & addons warnings fix 

Implements: blueprint react-0-14

Change-Id: Ic03fd78277fc15e7837292711ad05c6c9b21726d
This commit is contained in:
Kate Pimenova 2015-12-25 16:52:59 +03:00
parent e651b92271
commit 8941168b1f
14 changed files with 70 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
static/app.js
View File

@ -21,6 +21,7 @@ define(
'i18n',
'backbone',
'react',
'react-dom',
'utils',
'models',
'keystone_client',
@ -41,7 +42,7 @@ define(
'bootstrap',
'./styles/main.less'
],
function($, _, i18n, Backbone, React, utils, models, KeystoneClient, RootComponent, dialogs, LoginPage, WelcomePage, ClusterPage, ClustersPage, EquipmentPage, ReleasesPage, PluginsPage, NotificationsPage, SupportPage, CapacityPage) {
function($, _, i18n, Backbone, React, ReactDOM, utils, models, KeystoneClient, RootComponent, dialogs, LoginPage, WelcomePage, ClusterPage, ClustersPage, EquipmentPage, ReleasesPage, PluginsPage, NotificationsPage, SupportPage, CapacityPage) {
'use strict';
class Router extends Backbone.Router {
@ -211,7 +212,7 @@ function($, _, i18n, Backbone, React, utils, models, KeystoneClient, RootCompone
}
renderLayout() {
var wrappedRootComponent = React.render(
var wrappedRootComponent = ReactDOM.render(
React.createElement(
RootComponent,
_.pick(this, 'version', 'user', 'fuelSettings', 'statistics', 'notifications')

7
static/component_mixins.js
View File

@ -21,8 +21,9 @@ define([
'i18n',
'dispatcher',
'react',
'react-dom',
'react.backbone'
], function($, _, Backbone, utils, i18n, dispatcher, React) {
], function($, _, Backbone, utils, i18n, dispatcher, React, ReactDOM) {
'use strict';
return {
@ -110,7 +111,7 @@ define([
};
},
handleBodyClick: function(e) {
if (!$(e.target).closest(React.findDOMNode(this)).length) {
if (!$(e.target).closest(ReactDOM.findDOMNode(this)).length) {
_.defer(_.partial(this.props.toggle, false));
}
},
@ -137,7 +138,7 @@ define([
startRenaming: function(e) {
e.preventDefault();
$('html').on(this.state.renamingMixinEventName, _.bind(function(e) {
if (e && !$(e.target).closest(React.findDOMNode(this.refs[refname])).length) {
if (e && !$(e.target).closest(ReactDOM.findDOMNode(this.refs[refname])).length) {
this.endRenaming();
} else {
e.preventDefault();

5
static/views/cluster_page_tabs/dashboard_tab.js
View File

@ -19,6 +19,7 @@ define(
'i18n',
'jquery',
'react',
'react-dom',
'utils',
'models',
'dispatcher',
@ -26,7 +27,7 @@ define(
'component_mixins',
'views/controls'
],
function(_, i18n, $, React, utils, models, dispatcher, dialogs, componentMixins, controls) {
function(_, i18n, $, React, ReactDOM, utils, models, dispatcher, dialogs, componentMixins, controls) {
'use strict';
var namespace = 'cluster_page.dashboard_tab.';
@ -236,7 +237,7 @@ function(_, i18n, $, React, utils, models, dispatcher, dialogs, componentMixins,
if (task) task.destroy();
},
componentDidMount: function() {
$('.result-details', React.findDOMNode(this))
$('.result-details', ReactDOM.findDOMNode(this))
.on('show.bs.collapse', this.setState.bind(this, {collapsed: true}, null))
.on('hide.bs.collapse', this.setState.bind(this, {collapsed: false}, null));
},

10
static/views/cluster_page_tabs/logs_tab.js
View File

@ -22,9 +22,11 @@ define(
'utils',
'models',
'component_mixins',
'views/controls'
'views/controls',
'react-addons-pure-render-mixin',
'react-addons-create-fragment'
],
function($, _, i18n, React, utils, models, componentMixins, controls) {
function($, _, i18n, React, utils, models, componentMixins, controls, PureRenderMixin, ReactFragment) {
'use strict';
var LogsTab = React.createClass({
@ -135,7 +137,7 @@ function($, _, i18n, React, utils, models, componentMixins, controls) {
var LogFilterBar = React.createClass({
// PureRenderMixin added for prevention the rerender LogFilterBar (because of polling) in Mozilla browser
mixins: [React.addons.PureRenderMixin],
mixins: [PureRenderMixin],
getInitialState: function() {
return _.extend({}, this.props.selectedLogs, {
sourcesLoadingState: 'loading',
@ -232,7 +234,7 @@ function($, _, i18n, React, utils, models, componentMixins, controls) {
}
}, this);
}
return React.addons.createFragment(options);
return ReactFragment(options);
},
handleShowButtonClick: function() {
this.setState({locked: true});

11
static/views/cluster_page_tabs/network_tab.js
View File

@ -20,19 +20,20 @@ define(
'i18n',
'backbone',
'react',
'react-dom',
'models',
'dispatcher',
'utils',
'views/dialogs',
'component_mixins',
'views/controls',
'views/cluster_page_tabs/setting_section'
'views/cluster_page_tabs/setting_section',
'react-addons-transition-group'
],
function($, _, i18n, Backbone, React, models, dispatcher, utils, dialogs, componentMixins, controls, SettingSection) {
function($, _, i18n, Backbone, React, ReactDOM, models, dispatcher, utils, dialogs, componentMixins, controls, SettingSection, CSSTransitionGroup) {
'use strict';
var CSSTransitionGroup = React.addons.CSSTransitionGroup,
parametersNS = 'cluster_page.network_tab.networking_parameters.',
var parametersNS = 'cluster_page.network_tab.networking_parameters.',
networkTabNS = 'cluster_page.network_tab.',
defaultNetworkSubtabs = ['neutron_l2', 'neutron_l3', 'network_settings', 'network_verification', 'nova_configuration'];
@ -1204,7 +1205,7 @@ function($, _, i18n, Backbone, React, models, dispatcher, utils, dialogs, compon
} else if (e.key == 'Escape') {
this.endRenaming();
e.stopPropagation();
React.findDOMNode(this).focus();
ReactDOM.findDOMNode(this).focus();
}
},
startNodeNetworkGroupRenaming: function(e) {

12
static/views/cluster_page_tabs/nodes_tab.js
View File

@ -18,18 +18,18 @@ define(
'jquery',
'underscore',
'react',
'react-dom',
'views/controls',
'views/cluster_page_tabs/nodes_tab_screens/cluster_nodes_screen',
'views/cluster_page_tabs/nodes_tab_screens/add_nodes_screen',
'views/cluster_page_tabs/nodes_tab_screens/edit_nodes_screen',
'views/cluster_page_tabs/nodes_tab_screens/edit_node_disks_screen',
'views/cluster_page_tabs/nodes_tab_screens/edit_node_interfaces_screen'
'views/cluster_page_tabs/nodes_tab_screens/edit_node_interfaces_screen',
'react-addons-transition-group'
],
function($, _, React, controls, ClusterNodesScreen, AddNodesScreen, EditNodesScreen, EditNodeDisksScreen, EditNodeInterfacesScreen) {
function($, _, React, ReactDOM, controls, ClusterNodesScreen, AddNodesScreen, EditNodesScreen, EditNodeDisksScreen, EditNodeInterfacesScreen, ReactTransitionGroup) {
'use strict';
var ReactTransitionGroup = React.addons.TransitionGroup;
var NodesTab = React.createClass({
getInitialState: function() {
var screen = this.getScreen();
@ -129,10 +129,10 @@ function($, _, React, controls, ClusterNodesScreen, AddNodesScreen, EditNodesScr
// see https://github.com/facebook/react/issues/1950 for more info
var ScreenTransitionWrapper = React.createClass({
componentWillEnter: function(cb) {
$(React.findDOMNode(this)).hide().delay('fast').fadeIn('fast', cb);
$(ReactDOM.findDOMNode(this)).hide().delay('fast').fadeIn('fast', cb);
},
componentWillLeave: function(cb) {
$(React.findDOMNode(this)).fadeOut('fast', cb);
$(ReactDOM.findDOMNode(this)).fadeOut('fast', cb);
},
render: function() {
if (this.props.loading) return (

7
static/views/cluster_page_tabs/nodes_tab_screens/edit_node_disks_screen.js
View File

@ -20,12 +20,13 @@ define(
'i18n',
'backbone',
'react',
'react-dom',
'utils',
'models',
'component_mixins',
'views/controls'
],
function($, _, i18n, Backbone, React, utils, models, ComponentMixins, controls) {
function($, _, i18n, Backbone, React, ReactDOM, utils, models, ComponentMixins, controls) {
'use strict';
var EditNodeDisksScreen = React.createClass({
@ -219,7 +220,7 @@ function($, _, i18n, Backbone, React, utils, models, ComponentMixins, controls)
return {collapsed: true};
},
componentDidMount: function() {
$('.disk-details', React.findDOMNode(this))
$('.disk-details', ReactDOM.findDOMNode(this))
.on('show.bs.collapse', this.setState.bind(this, {collapsed: true}, null))
.on('hide.bs.collapse', this.setState.bind(this, {collapsed: false}, null));
},
@ -233,7 +234,7 @@ function($, _, i18n, Backbone, React, utils, models, ComponentMixins, controls)
this.props.disk.trigger('change', this.props.disk);
},
toggleDisk: function(name) {
$(React.findDOMNode(this.refs[name])).collapse('toggle');
$(ReactDOM.findDOMNode(this.refs[name])).collapse('toggle');
},
render: function() {
var disk = this.props.disk,

5
static/views/cluster_page_tabs/nodes_tab_screens/node_list_screen.js
View File

@ -20,6 +20,7 @@ define(
'i18n',
'backbone',
'react',
'react-dom',
'utils',
'models',
'dispatcher',
@ -28,7 +29,7 @@ define(
'component_mixins',
'views/cluster_page_tabs/nodes_tab_screens/node'
],
function($, _, i18n, Backbone, React, utils, models, dispatcher, controls, dialogs, componentMixins, Node) {
function($, _, i18n, Backbone, React, ReactDOM, utils, models, dispatcher, controls, dialogs, componentMixins, Node) {
'use strict';
var NodeListScreen, MultiSelectControl, NumberRangeControl, ManagementPanel, NodeLabelsPanel, RolePanel, SelectAllMixin, NodeList, NodeGroup;
@ -805,7 +806,7 @@ function($, _, i18n, Backbone, React, utils, models, dispatcher, controls, dialo
activateSearch: function() {
this.setState({activeSearch: true});
$('html').on('click.search', _.bind(function(e) {
if (!this.props.search && this.refs.search && !$(e.target).closest(React.findDOMNode(this.refs.search)).length) {
if (!this.props.search && this.refs.search && !$(e.target).closest(ReactDOM.findDOMNode(this.refs.search)).length) {
this.setState({activeSearch: false});
}
}, this));

7
static/views/cluster_page_tabs/settings_tab.js
View File

@ -22,13 +22,12 @@ define(
'utils',
'models',
'component_mixins',
'views/cluster_page_tabs/setting_section'
'views/cluster_page_tabs/setting_section',
'react-addons-transition-group'
],
function($, _, i18n, React, utils, models, componentMixins, SettingSection) {
function($, _, i18n, React, utils, models, componentMixins, SettingSection, CSSTransitionGroup) {
'use strict';
var CSSTransitionGroup = React.addons.CSSTransitionGroup;
var SettingsTab = React.createClass({
mixins: [
componentMixins.backboneMixin('cluster', 'change:status'),

14
static/views/controls.js vendored
View File

@ -20,8 +20,8 @@
* Based on https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Input.jsx
**/
define(['i18n', 'jquery', 'underscore', 'react', 'utils', 'component_mixins'],
function(i18n, $, _, React, utils, componentMixins) {
define(['i18n', 'jquery', 'underscore', 'react', 'react-dom', 'utils', 'component_mixins'],
function(i18n, $, _, React, ReactDOM, utils, componentMixins) {
'use strict';
var controls = {};
@ -63,7 +63,7 @@ define(['i18n', 'jquery', 'underscore', 'react', 'utils', 'component_mixins'],
return this.props.type == 'radio' || this.props.type == 'checkbox';
},
getInputDOMNode: function() {
return React.findDOMNode(this.refs.input);
return ReactDOM.findDOMNode(this.refs.input);
},
debouncedChange: _.debounce(function() {
return this.onChange();
@ -85,7 +85,7 @@ define(['i18n', 'jquery', 'underscore', 'react', 'utils', 'component_mixins'],
},
removeFile: function() {
if (!this.props.disabled) {
React.findDOMNode(this.refs.form).reset();
ReactDOM.findDOMNode(this.refs.form).reset();
this.saveFile(null, null);
}
},
@ -359,17 +359,17 @@ define(['i18n', 'jquery', 'underscore', 'react', 'utils', 'component_mixins'],
this.removeTooltip();
},
addTooltip: function() {
$(React.findDOMNode(this.refs.tooltip)).tooltip({
$(ReactDOM.findDOMNode(this.refs.tooltip)).tooltip({
container: this.props.container,
placement: this.props.placement,
title: this.props.text
});
},
updateTooltipTitle: function() {
$(React.findDOMNode(this.refs.tooltip)).attr('title', this.props.text).tooltip('fixTitle');
$(ReactDOM.findDOMNode(this.refs.tooltip)).attr('title', this.props.text).tooltip('fixTitle');
},
removeTooltip: function() {
$(React.findDOMNode(this.refs.tooltip)).tooltip('destroy');
$(ReactDOM.findDOMNode(this.refs.tooltip)).tooltip('destroy');
},
render: function() {
if (!this.props.wrap) return React.cloneElement(React.Children.only(this.props.children), {ref: 'tooltip'});

28
static/views/dialogs.js
View File

@ -20,13 +20,15 @@ define(
'i18n',
'backbone',
'react',
'react-dom',
'utils',
'models',
'dispatcher',
'views/controls',
'component_mixins'
'component_mixins',
'react-addons-linked-state-mixin'
],
function($, _, i18n, Backbone, React, utils, models, dispatcher, controls, componentMixins) {
function($, _, i18n, Backbone, React, ReactDOM, utils, models, dispatcher, controls, componentMixins, LinkedStateMixin) {
'use strict';
var dialogs = {};
@ -65,13 +67,13 @@ function($, _, i18n, Backbone, React, utils, models, dispatcher, controls, compo
if (showOptions.preventDuplicate && activeDialog.constructor === this) {
result.reject();
} else {
$(React.findDOMNode(activeDialog)).on('hidden.bs.modal', () => {
$(ReactDOM.findDOMNode(activeDialog)).on('hidden.bs.modal', () => {
this.show(dialogOptions).then(result.resolve, result.reject);
});
}
return result;
} else {
return React.render(React.createElement(this, dialogOptions), $('#modal-container')[0]).getResult();
return ReactDOM.render(React.createElement(this, dialogOptions), $('#modal-container')[0]).getResult();
}
}
},
@ -87,7 +89,7 @@ function($, _, i18n, Backbone, React, utils, models, dispatcher, controls, compo
componentDidMount: function() {
setActiveDialog(this);
Backbone.history.on('route', this.close, this);
var $el = $(React.findDOMNode(this));
var $el = $(ReactDOM.findDOMNode(this));
$el.on('hidden.bs.modal', this.handleHidden);
$el.on('shown.bs.modal', () => $el.find('input:enabled:first').focus());
$el.modal(_.defaults(
@ -101,15 +103,15 @@ function($, _, i18n, Backbone, React, utils, models, dispatcher, controls, compo
},
componentWillUnmount: function() {
Backbone.history.off(null, null, this);
$(React.findDOMNode(this)).off('shown.bs.modal hidden.bs.modal');
$(ReactDOM.findDOMNode(this)).off('shown.bs.modal hidden.bs.modal');
this.rejectResult();
setActiveDialog(null);
},
handleHidden: function() {
React.unmountComponentAtNode(React.findDOMNode(this).parentNode);
ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode);
},
close: function() {
$(React.findDOMNode(this)).modal('hide');
$(ReactDOM.findDOMNode(this)).modal('hide');
this.rejectResult();
},
closeOnLinkClick: function(e) {
@ -218,7 +220,7 @@ function($, _, i18n, Backbone, React, utils, models, dispatcher, controls, compo
this.startCountdown();
},
componentDidMount() {
$(React.findDOMNode(this)).on('shown.bs.modal', () => $(React.findDOMNode(this.refs['retry-button'])).focus());
$(ReactDOM.findDOMNode(this)).on('shown.bs.modal', () => $(ReactDOM.findDOMNode(this.refs['retry-button'])).focus());
},
startCountdown() {
this.activeTimeout = _.delay(this.countdown, 1000);
@ -705,13 +707,13 @@ function($, _, i18n, Backbone, React, utils, models, dispatcher, controls, compo
if (name && name != this.state.title) this.setState({title: name});
},
assignAccordionEvents: function() {
$('.panel-collapse', React.findDOMNode(this))
$('.panel-collapse', ReactDOM.findDOMNode(this))
.on('show.bs.collapse', function(e) {$(e.currentTarget).siblings('.panel-heading').find('i').removeClass('glyphicon-plus').addClass('glyphicon-minus');})
.on('hide.bs.collapse', function(e) {$(e.currentTarget).siblings('.panel-heading').find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus');})
.on('hidden.bs.collapse', function(e) {e.stopPropagation();});
},
toggle: function(groupIndex) {
$(React.findDOMNode(this.refs['togglable_' + groupIndex])).collapse('toggle');
$(ReactDOM.findDOMNode(this.refs['togglable_' + groupIndex])).collapse('toggle');
},
onVMsConfChange: function() {
this.setState({VMsConfValidationError: null});
@ -758,7 +760,7 @@ function($, _, i18n, Backbone, React, utils, models, dispatcher, controls, compo
} else if (e.key == 'Escape') {
this.endRenaming();
e.stopPropagation();
React.findDOMNode(this).focus();
ReactDOM.findDOMNode(this).focus();
}
},
renderBody: function() {
@ -1076,7 +1078,7 @@ function($, _, i18n, Backbone, React, utils, models, dispatcher, controls, compo
dialogs.ChangePasswordDialog = React.createClass({
mixins: [
dialogMixin,
React.addons.LinkedStateMixin
LinkedStateMixin
],
getDefaultProps: function() {
return {

11
static/views/login_page.js
View File

@ -19,10 +19,11 @@ define(
'underscore',
'i18n',
'react',
'react-dom',
'dispatcher',
'utils'
],
function($, _, i18n, React, dispatcher, utils) {
function($, _, i18n, React, ReactDOM, dispatcher, utils) {
'use strict';
var LoginPage = React.createClass({
@ -59,7 +60,7 @@ function($, _, i18n, React, dispatcher, utils) {
return keystoneClient.authenticate(username, password, {force: true})
.fail((xhr) => {
$(React.findDOMNode(this.refs.username)).focus();
$(ReactDOM.findDOMNode(this.refs.username)).focus();
var status = xhr && xhr.status;
var error = 'login_error';
@ -93,7 +94,7 @@ function($, _, i18n, React, dispatcher, utils) {
});
},
componentDidMount: function() {
$(React.findDOMNode(this.refs.username)).focus();
$(ReactDOM.findDOMNode(this.refs.username)).focus();
},
getInitialState: function() {
return {
@ -107,8 +108,8 @@ function($, _, i18n, React, dispatcher, utils) {
onSubmit: function(e) {
e.preventDefault();
var username = React.findDOMNode(this.refs.username).value;
var password = React.findDOMNode(this.refs.password).value;
var username = ReactDOM.findDOMNode(this.refs.username).value;
var password = ReactDOM.findDOMNode(this.refs.password).value;
this.setState({actionInProgress: true});

5
static/views/wizard.js
View File

@ -19,6 +19,7 @@ define(
'underscore',
'i18n',
'react',
'react-dom',
'backbone',
'utils',
'models',
@ -26,7 +27,7 @@ define(
'views/dialogs',
'views/controls'
],
function($, _, i18n, React, Backbone, utils, models, componentMixins, dialogs, controls) {
function($, _, i18n, React, ReactDOM, Backbone, utils, models, componentMixins, dialogs, controls) {
'use strict';
var AVAILABILITY_STATUS_ICONS = {
@ -121,7 +122,7 @@ function($, _, i18n, React, Backbone, utils, models, componentMixins, dialogs, c
}
},
componentDidMount: function() {
$(React.findDOMNode(this)).find('input:enabled').first().focus();
$(ReactDOM.findDOMNode(this)).find('input:enabled').first().focus();
},
areComponentsMutuallyExclusive: function(components) {
if (components.length <= 1) {

3
webpack.config.js
View File

@ -34,8 +34,7 @@ module.exports = {
modulesDirectories: ['static', 'node_modules', 'vendor/custom'],
extensions: ['', '.js'],
alias: {
underscore: 'lodash',
react: 'react/addons'
underscore: 'lodash'
}
},
node: {},