Ogc 1493 react mode

src/onegov/feriennet/assets/js/volunteer-cart.jsx

@@ -1,4 +1,4 @@
-var VolunteerCart = React.createClass({
+var VolunteerCart = createReactClass({
     getInitialState: function() {
         return {'items': []};
     },

src/onegov/form/assets/js/format.jsx

@@ -1,4 +1,4 @@
-var FormcodeFormat = React.createClass({
+var FormcodeFormat = createReactClass({
     getInitialState: function() {
         return {fields: []};
     },
@@ -28,7 +28,7 @@ var FormcodeFormat = React.createClass({
     }
 });
 
-var FormcodeFormatFields = React.createClass({
+var FormcodeFormatFields = createReactClass({
     render: function() {
         var self = this;
         return (
@@ -49,7 +49,7 @@ var FormcodeFormatFields = React.createClass({
     }
 });
 
-var FormcodeFormatField = React.createClass({
+var FormcodeFormatField = createReactClass({
     handleClick: function() {
         var format = '[' + this.props.field.human_id + ']';
         formcodeUtils.updateTarget(this.props.target, format, null, ' ');

src/onegov/form/assets/js/select.jsx

@@ -1,4 +1,4 @@
-var FormcodeSelect = React.createClass({
+var FormcodeSelect = createReactClass({
     getInitialState: function() {
         var values = this.getTarget().value.split('\n').filter(function(line) {
             return line.trim() !== '';
@@ -119,7 +119,7 @@ var FormcodeSelect = React.createClass({
     }
 });
 
-var FormcodeSelectField = React.createClass({
+var FormcodeSelectField = createReactClass({
     handleChange: function() {
         this.props.handler(this.props.id);
     },

src/onegov/form/assets/js/snippets.jsx

@@ -4,7 +4,7 @@
 */
 
 // Renders the formsnippets given by FormApp
-var FormSnippets = React.createClass({
+var FormSnippets = createReactClass({
     render: function() {
         var self = this;
 
@@ -36,7 +36,7 @@ var FormSnippets = React.createClass({
 });
 
 // Renders a single formsnippet and handles the insertion logic
-var FormSnippet = React.createClass({
+var FormSnippet = createReactClass({
     insertSnippet: function(snippet) {
         formcodeUtils.updateTarget(this.props.target, snippet, this.props.snippet[0]);
     },

src/onegov/form/assets/js/togglebutton.jsx

@@ -1,7 +1,7 @@
 // Takes its children and wraps them in a toggleable element, which is a button
 // that pops up a menu when clicked.
 
-var ToggleButton = React.createClass({  // eslint-disable-line no-unused-vars
+var ToggleButton = createReactClass({  // eslint-disable-line no-unused-vars
     getInitialState: function() {
         return {
             visible: false

src/onegov/form/assets/js/watcher.jsx

@@ -58,7 +58,7 @@ var FormcodeWatcherRegistry = function() {
 
 window.formcodeWatcherRegistry = FormcodeWatcherRegistry();
 
-var WatchedFields = React.createClass({
+var WatchedFields = createReactClass({
     getInitialState: function() {
         return {fields: []};
     },

src/onegov/org/app.py

@@ -735,6 +735,7 @@ def get_editor_asset() -> 'Iterator[str]':
 
 @OrgApp.webasset('timeline')
 def get_timeline_asset() -> 'Iterator[str]':
+    yield 'react-transition-group.js'
     yield 'timeline.jsx'
 
 
@@ -805,8 +806,9 @@ def get_common_asset() -> 'Iterator[str]':
     yield 'foundation.topbar.js'
     yield 'intercooler.js'
     yield 'underscore.js'
-    yield 'react.js'
-    yield 'react-dom.js'
+    yield 'react.min.js'
+    yield 'react-dom.min.js'
+    yield 'create-react-class.min.js'
     yield 'form_dependencies.js'
     yield 'confirm.jsx'
     yield 'typeahead.jsx'

src/onegov/org/assets/js/confirm.jsx

@@ -21,7 +21,7 @@
     Renders the zurb foundation reveal model. Takes question, yes and no
     as options (those are the texts for the respective elements).
 */
-var Confirmation = React.createClass({
+var Confirmation = createReactClass({
     render: function() {
         return (
             <div className="reveal-modal medium dialog" data-reveal role="dialog">
@@ -42,7 +42,7 @@ var Confirmation = React.createClass({
     The confirmation, if no 'yes' button is supplied (to inform the user
     why some action can't be taken).
 */
-var DenyConfirmation = React.createClass({
+var DenyConfirmation = createReactClass({
     render: function() {
         return (
             <div className="reveal-modal medium dialog" data-reveal role="dialog">

src/onegov/org/assets/js/many.jsx

@@ -3,7 +3,7 @@
     add zero, one or many things at once without leaving the form.
 */
 
-var ManyFields = React.createClass({
+var ManyFields = createReactClass({
     render: function() {
         return (
             <div className="many-fields">
@@ -33,7 +33,7 @@ var ManyFields = React.createClass({
     }
 });
 
-var ManyDates = React.createClass({
+var ManyDates = createReactClass({
     getInitialState: function() {
         var state = {
             values: _.clone(this.props.data.values)
@@ -132,7 +132,7 @@ var ManyDates = React.createClass({
     }
 });
 
-var ManyDateTimeRanges = React.createClass({
+var ManyDateTimeRanges = createReactClass({
     getInitialState: function() {
         var state = {
             values: _.clone(this.props.data.values)
@@ -245,7 +245,7 @@ var ManyDateTimeRanges = React.createClass({
     }
 });
 
-var DateTimePickerField = React.createClass({
+var DateTimePickerField = createReactClass({
     componentWillMount: function() {
         this.id = _.uniqueId(this.props.type + '-');
     },
@@ -295,7 +295,7 @@ var DateTimePickerField = React.createClass({
     }
 });
 
-var ManyLinks = React.createClass({
+var ManyLinks = createReactClass({
     getInitialState: function() {
         var state = {
             values: _.clone(this.props.data.values)
@@ -408,7 +408,7 @@ var ManyLinks = React.createClass({
     }
 });
 
-var StringField = React.createClass({
+var StringField = createReactClass({
     componentWillMount: function() {
         this.id = _.uniqueId(this.props.type + '-');
     },

src/onegov/org/assets/js/monthly-view.jsx

@@ -71,7 +71,7 @@ var BUTTON_LABELS = {
     }
 };
 
-var MonthlyView = React.createClass({
+var MonthlyView = createReactClass({
     render: function() {
         var locale = $('html').attr('lang').substring(0, 2);
 

src/onegov/org/assets/js/prompt.jsx

@@ -17,7 +17,7 @@
     Renders the zurb foundation reveal model. Takes question, yes and no
     as options (those are the texts for the respective elements).
 */
-var Prompt = React.createClass({
+var Prompt = createReactClass({
 
     getInitialState: function() {
         return {
@@ -31,7 +31,7 @@ var Prompt = React.createClass({
 
     render: function() {
         return (
-            <div className="reveal-modal medium dialog" data-reveal role="dialog">
+            <div>
                 <h2>{this.props.question}</h2>
                 <p>{this.props.info}</p>
 
@@ -58,7 +58,10 @@ var Prompt = React.createClass({
 */
 var showPrompt = function(options) {
     var el = $("<div class='prompt row'>");
-
+    var dialog = $("<div class='reveal-modal medium dialog'>")
+    dialog.attr('data-reveal', "")
+    dialog.attr('role', "dialog")
+    dialog.appendTo(el)
     $('body').append(el);
 
     var prompt = ReactDOM.render(
@@ -70,33 +73,31 @@ var showPrompt = function(options) {
             value={options.value}
             placeholder={options.placeholder}
         />,
-        el.get(0)
+        dialog.get(0)
     );
 
-    var prompt_el = $(ReactDOM.findDOMNode(prompt));
-
-    prompt_el.find('a.cancel').click(function() {
-        dropPrompt(prompt_el);
+    dialog.find('a.cancel').click(function() {
+        dropPrompt(dialog);
         return false;
     });
 
-    prompt_el.find('a.ok').click(function() {
+    dialog.find('a.ok').click(function() {
         options.success.call(options.target, prompt.state.value.trim());
-        dropPrompt(prompt_el);
+        dropPrompt(dialog);
         return false;
     });
 
-    prompt_el.find('input, a.ok').enter(function(e) {
+    dialog.find('input, a.ok').enter(function(e) {
         options.success.call(options.target, prompt.state.value.trim());
-        dropPrompt(prompt_el);
+        dropPrompt(dialog);
         return false;
     });
 
     $('body').one('opened.fndtn.reveal', function() {
-        prompt_el.find('input').focus().select();
+        dialog.find('input').focus().select();
     });
 
-    prompt_el.foundation('reveal', 'open');
+    dialog.foundation('reveal', 'open');
 };
 
 var dropPrompt = function(el) {