Merge pull request #683 from Adslot/upgrade-react-to-v16

Upgrade: React 16
Adslot · Feb 9, 2018 · 525f7a4 · 525f7a4
2 parents f782db1 + 3fb1405
commit 525f7a4
Show file tree

Hide file tree

Showing 24 changed files with 5,947 additions and 1,366 deletions.
diff --git a/config/loadtests.js → config/load-tests.js b/config/loadtests.js → config/load-tests.js
@@ -1,3 +1,7 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+Enzyme.configure({ adapter: new Adapter() });
+
 if (ADSLOT_TEST_FILE) {
   require(ADSLOT_TEST_FILE);
 } else {

diff --git a/config/test.js b/config/test.js
@@ -33,7 +33,6 @@ const testConfig = merge(commonConfig, {
     ],
   },
   externals: {
-    cheerio: 'window',
     'react/addons': 'react',
     'react/lib/ExecutionEnvironment': 'react',
     'react/lib/ReactContext': 'react',

diff --git a/docs/components/Example/index.jsx b/docs/components/Example/index.jsx
@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { github } from 'react-syntax-highlighter/dist/styles';
+import SyntaxHighlighter, { prism } from 'react-syntax-highlighter/prism';
 import NotePanel from '../NotePanel';
 import { Button, Empty } from '../../../src';
 
@@ -26,7 +25,7 @@ class Example extends React.PureComponent {
         <div className="adslot-ui-example">{children}</div>
 
         <div className="adslot-ui-code-snippet">
-          <SyntaxHighlighter language="html" style={github}>
+          <SyntaxHighlighter language="jsx" style={prism}>
             {exampleCodeSnippet}
           </SyntaxHighlighter>
         </div>

diff --git a/docs/components/Example/styles.scss b/docs/components/Example/styles.scss
@@ -8,10 +8,7 @@
     max-width: 940px;
   }
 
-  .adslot-ui-code-snippet {
-    max-width: 940px;
-  }
-
+  .adslot-ui-code-snippet,
   .adslot-ui-proptype-table {
     max-width: 1100px;
   }

diff --git a/docs/components/Layout/styles.scss b/docs/components/Layout/styles.scss
@@ -13,8 +13,10 @@ body {
     padding: $spacing-etalon;
   }
 
-  pre {
-    display: inline;
+  .adslot-ui-proptype-table {
+    pre {
+      display: inline;
+    }
   }
 }
 

diff --git a/docs/components/NotePanel/styles.scss b/docs/components/NotePanel/styles.scss
@@ -7,6 +7,10 @@
     margin-top: $spacing-etalon;
   }
 
+  pre {
+    display: inline;
+  }
+
   .text {
     &-blue {
       color: $color-blue;

diff --git a/docs/examples/TreePickerExample.jsx b/docs/examples/TreePickerExample.jsx
@@ -9,19 +9,26 @@ class TreePickerExample extends React.Component {
     this.state = {
       itemType: 'segment value',
       treePickerPureSubtree: [],
+      selectedNodes: [],
       pickerSearchValue: '',
       subTree: [
         {
           id: '0',
           label: 'Northern Territory',
-          path: [{ id: '10', label: 'AU' }],
-          type: '',
+          path: [{ id: '10', label: 'Australia' }],
+          type: 'Territory',
         },
         {
           id: '1',
           label: 'Australian Capital Territory',
-          path: [{ id: '10', label: 'AU' }],
-          type: '',
+          path: [{ id: '10', label: 'Australia' }],
+          type: 'Territory',
+        },
+        {
+          id: '2',
+          label: 'Victoria',
+          path: [{ id: '10', label: 'Australia' }],
+          type: 'State',
         },
       ],
     };
@@ -49,7 +56,7 @@ class TreePickerExample extends React.Component {
       <TreePickerSimplePure
         itemType={this.state.itemType}
         hideIcon
-        selectedNodes={[]}
+        selectedNodes={this.state.selectedNodes}
         subtree={this.state.treePickerPureSubtree}
         emptySelectedListText={
           <div>
@@ -64,7 +71,8 @@ class TreePickerExample extends React.Component {
         searchValue={this.state.pickerSearchValue}
         onChange={this.setPickerSearchValue}
         searchOnClear={this.pickerSearchOnClear}
-        includeNode={_.noop}
+        includeNode={node => this.setState({ selectedNodes: _.concat([], this.state.selectedNodes, node) })}
+        removeNode={node => this.setState({ selectedNodes: _.reject(this.state.selectedNodes, { id: node.id }) })}
         additionalClassNames={this.state.pickerSearchValue ? undefined : ['background-highlighted', 'test-class']}
       />
     );

diff --git a/karma.conf.js b/karma.conf.js
@@ -18,7 +18,9 @@ module.exports = function configureKarma(config) {
     basePath: '',
     browsers: ['ChromeHeadless'],
     colors: true,
-    files: ['config/loadtests.js'],
+    files: [
+      'config/load-tests.js',
+    ],
     port: 8080,
     captureTimeout: 60000,
     frameworks: ['mocha', 'chai'],
@@ -33,7 +35,7 @@ module.exports = function configureKarma(config) {
     singleRun: true,
     reporters: _.compact([process.env.npm_config_coverage ? 'coverage' : null, 'mocha']),
     preprocessors: {
-      'config/loadtests.js': ['webpack'],
+      'config/load-tests.js': ['webpack'],
     },
     coverageReporter: {
       dir: 'coverage/',