fix(react): remove componentWillMount methods for React 17

momentum-design · Sep 25, 2019 · 2e112eb · 2e112eb
1 parent 825c3b0
commit 2e112eb
Show file tree

Hide file tree

Showing 17 changed files with 128 additions and 91 deletions.
diff --git a/react/src/app/containers/KitchenSink/index.js b/react/src/app/containers/KitchenSink/index.js
@@ -10,6 +10,7 @@ import CheckboxKitchenSink from '../../../lib/Checkbox/examples/KitchenSink';
 import CardKitchenSink from '../../../lib/Card/examples/KitchenSink';
 import InputKitchenSink from '../../../lib/Input/examples/KitchenSink';
 import RadioKitchenSink from '../../../lib/Radio/examples/KitchenSink';
+import SliderKitchenSink from '../../../lib/Slider/examples/KitchenSink';
 import EventOverlay from '../EventOverlay';
 
 export default class KitchenSink extends React.PureComponent {
@@ -60,6 +61,13 @@ export default class KitchenSink extends React.PureComponent {
                     keyboardKey="radio"
                     title="radio"
                   />
+                  <SidebarNavItem
+                    key={`SliderKitchenSink`}
+                    customAnchorNode={<NavLink activeClassName="md-active-nav" to={`/slider`} />}
+                    className="md-list-item--primary"
+                    keyboardKey="slider"
+                    title="slider"
+                  />
                   <SidebarNavItem
                     key={`EventOverlay`}
                     customAnchorNode={
@@ -100,6 +108,12 @@ export default class KitchenSink extends React.PureComponent {
                 path={`/radio`}
                 render={() => <RadioKitchenSink />}
               />
+              <Route
+                key={`SliderKitchenSink`}
+                exact
+                path={`/slider`}
+                render={() => <SliderKitchenSink />}
+              />
               <Route
                 key={`EventOverlay`}
                 exact

diff --git a/react/src/lib/Accordion/index.js b/react/src/lib/Accordion/index.js
@@ -11,13 +11,11 @@ class Accordion extends React.Component {
     focus: false,
   }
 
-  componentWillMount () {
+  componentDidMount () {
     if(!this.verifyChildren()) {
       throw new Error('Accordion should contain one or more AccordionGroup as children.');
     }
-  }
 
-  componentDidMount() {
     this.determineInitialFocus();
   }
 

diff --git a/react/src/lib/AccordionGroup/index.js b/react/src/lib/AccordionGroup/index.js
@@ -18,7 +18,7 @@ class AccordionGroup extends React.Component {
     };
   }
 
-  componentWillMount () {
+  componentDidMount () {
     if(!this.verifyChildren()) {
       throw new Error('AccordionGroup should contain 2 children ' +
         'AccordionHeader and AccordionContent respectively.');

diff --git a/react/src/lib/CheckboxGroup/index.js b/react/src/lib/CheckboxGroup/index.js
@@ -6,14 +6,11 @@ import PropTypes from 'prop-types';
 class CheckboxGroup extends React.Component {
   static displayName = 'CheckboxGroup';
 
-  state = {
-    values: []
-  }
-
-  componentWillMount() {
-    if (this.props.values) {
-      this.setState({ values: this.props.values });
-    }
+  constructor(props){
+    super(props);
+    this.state = {
+      values: props.values || []
+    };
   }
 
   handleToggle = value => {

diff --git a/react/src/lib/DatePicker/index.js b/react/src/lib/DatePicker/index.js
@@ -35,7 +35,7 @@ class DatePicker extends React.Component {
     };
   };
 
-  componentWillMount() {
+  componentDidMount() {
     const selectedDate = moment(this.props.selectedDate);
     const isValid =
       selectedDate.isValid()

diff --git a/react/src/lib/Lightbox/index.js b/react/src/lib/Lightbox/index.js
@@ -20,8 +20,8 @@ class Lightbox extends React.Component {
     window.addEventListener('resize', this.handleResize, true);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.index !== this.props.index && this.state.zoom > 1 && this.imgWrapper) {
+  componentDidUpdate(prevProps) {
+    if (prevProps.index !== this.props.index && this.state.zoom > 1 && this.imgWrapper) {
       const viewportNode = this.viewport;
       viewportNode.scrollTop = 0;
       viewportNode.scrollLeft = (this.imgWrapper.offsetWidth - viewportNode.offsetWidth) / 2;

diff --git a/react/src/lib/Radio/examples/Default.js b/react/src/lib/Radio/examples/Default.js
@@ -3,7 +3,7 @@ import { Radio, RadioGroup } from '@momentum-ui/react';
 export default class DefaultRadio extends React.Component {
   render() {
     return (
-      <RadioGroup>
+      <RadioGroup values={['me']}>
         <Radio
           value="me"
           label="me"

diff --git a/react/src/lib/RadioGroup/index.js b/react/src/lib/RadioGroup/index.js
@@ -4,15 +4,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 class RadioGroup extends React.Component {
-
-  state = {
-    values: [],
-  };
-
-  componentWillMount() {
-    if (this.props.values) {
-      this.setState({ values: this.props.values });
-    }
+  constructor(props){
+    super(props);
+    this.state = {
+      values: props.values || []
+    };
   }
 
   handleToggle = value => {

diff --git a/react/src/lib/Slider/examples/Cross.js b/react/src/lib/Slider/examples/Cross.js
@@ -6,10 +6,10 @@ export default class SliderCross extends React.Component {
   }
   render() {
     return (
-      <div className="row" key="child-2">
-        <div>
+      <div>
+        <h5>
           Low: {this.state.slider1.low} High: {this.state.slider1.high}
-        </div>
+        </h5>
         <Slider
           min={0}
           max={500}

diff --git a/react/src/lib/Slider/examples/Default.js b/react/src/lib/Slider/examples/Default.js
@@ -1,15 +1,25 @@
 import React from 'react';
 import { Slider } from '@momentum-ui/react';
 export default class DefaultSlider extends React.Component {
+  state = {
+    value: 200
+  }
+
+  handleChange = value => this.setState({ value })
+
   render() {
     return (
-      <Slider
-        min={0}
-        max={500}
-        tick={100}
-        value={200}
-        step={1}
-      />
+      <div>
+        <h5>Value: {this.state.value}</h5>
+        <Slider
+          min={0}
+          max={500}
+          tick={100}
+          value={200}
+          step={1}
+          onChange={this.handleChange}
+        />
+      </div>
     );
   }
 }
diff --git a/react/src/lib/Slider/examples/KitchenSink.js b/react/src/lib/Slider/examples/KitchenSink.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  SliderCross,
+  SliderDefault,
+  SliderTwoHandles,
+  SliderStep
+} from './index';
+import { Slider } from '@momentum-ui/react';
+export default class SliderKitchenSink extends React.Component {
+  render() {
+    return (
+      <div className='medium-6 columns'>
+        <div>
+          <Slider
+            min={0}
+            max={100}
+            value={{
+              low: 20,
+              high: 40
+            }}
+          />
+        </div>
+        <br/>
+        <SliderCross />
+        <br/>
+        <SliderDefault />
+        <br/>
+        <SliderTwoHandles />
+        <br/>
+        <SliderStep />
+      </div>
+    );
+  }
+}
diff --git a/react/src/lib/Slider/examples/Step.js b/react/src/lib/Slider/examples/Step.js
@@ -2,14 +2,13 @@ import React from 'react';
 import { Slider } from '@momentum-ui/react';
 export default class SliderStep extends React.Component {
   state = {
-    slider1: { low: 100, high: 200 },
-    slider2: { low: 100, high: 200 },
+    slider1: { low: 100, high: 200 }
   }
   render() {
     return (
-      <span>
-        <div className="row" key='child-0'>
-          <div>Low: {this.state.slider1.low} High: {this.state.slider1.high}</div>
+      <React.Fragment>
+        <div>
+          <h5>Low: {this.state.slider1.low} High: {this.state.slider1.high}</h5>
           <Slider
             min={0}
             max={500}
@@ -20,20 +19,7 @@ export default class SliderStep extends React.Component {
             onChange={value => this.setState({ slider1: value })}
           />
         </div>
-        <br key='child-1' />
-        <div className="row" key='child-2'>
-          <div>Low: {this.state.slider2.low} High: {this.state.slider2.high}</div>
-          <Slider
-            min={0}
-            max={500}
-            tick={100}
-            value={this.state.slider2}
-            step={50}
-            canCross
-            onChange={value => this.setState({ slider2: value })}
-          />
-        </div>
-      </span>
+      </React.Fragment>
     );
   }
 }
diff --git a/react/src/lib/Slider/examples/TwoHandles.js b/react/src/lib/Slider/examples/TwoHandles.js
@@ -6,10 +6,10 @@ export default class SliderTwoHandles extends React.Component {
   }
   render() {
     return (
-      <div className="row" key="child-0">
-        <div>
+      <div>
+        <h5>
           Low: {this.state.slider1.low} High: {this.state.slider1.high}
-        </div>
+        </h5>
         <Slider
           min={0}
           max={500}

diff --git a/react/src/lib/Slider/examples/index.js b/react/src/lib/Slider/examples/index.js
@@ -1,4 +1,5 @@
 export { default as SliderCross } from './Cross';
 export { default as SliderDefault } from './Default';
+export { default as SliderKitchenSink } from './KitchenSink';
 export { default as SliderStep } from './Step';
 export { default as SliderTwoHandles } from './TwoHandles';
diff --git a/react/src/lib/Slider/index.js b/react/src/lib/Slider/index.js
@@ -2,27 +2,25 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import SliderPointer from '@momentum-ui/react/Slider/SliderPointer';
+import SliderPointer from './SliderPointer';
 
 class Slider extends React.Component {
-
-  state = {
-    sliderLow: this.props.value.low || this.props.min,
-    sliderHigh: this.props.value.high || this.props.value,
-    scale: [this.props.min, this.props.max],
-    selectionWidth: null,
-  }
-
-  componentWillMount() {
-    const { min, max, tick } = this.props;
-
-    tick && this.getScale(min, max, tick);
-    this.getSelectionWidth();
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      sliderLow: props.value.low || props.min,
+      sliderHigh: props.value.high || props.value,
+      scale: this.getScale(),
+      selectionWidth: null,
+    };
   }
 
   componentDidMount() {
     const { min, max } = this.props;
     const { scale } = this.state;
+
+    this.getSelectionWidth();
     this.setScalePos(scale, min, max);
   }
 
@@ -33,17 +31,22 @@ class Slider extends React.Component {
     });
   };
 
-  getScale = (low = 0, high, tick) => {
-    let value = high;
-    let ticksArray = [high];
+  getScale = () => {
+    const { min, max, tick } = this.props;
+    if (tick) {
+      let value = max;
+      let ticksArray = [max];
+
+      while (value > 0 && (value - tick) >= min) {
+        value -= tick;
 
-    while (value > 0 && (value - tick) >= low) {
-      value -= tick;
+        ticksArray.unshift(Math.abs(Math.round(value / tick) * tick));
+      }
 
-      ticksArray.unshift(Math.abs(Math.round(value / tick) * tick));
+      return ticksArray;
+    } else {
+      return [min, max];
     }
-
-    this.setState({ scale: ticksArray });
   };
 
   getSliderWidth = () => {
@@ -155,7 +158,7 @@ class Slider extends React.Component {
     };
 
     return (
-      <div 
+      <div
         className={
           `md-slider` +
           `${(disabled && ` md-slider--disabled`) || ''}` +
@@ -165,13 +168,13 @@ class Slider extends React.Component {
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={
-          typeof this.props.value !== 'object' 
-          ? 
+          typeof this.props.value !== 'object'
+          ?
           sliderHigh : undefined
         }
         aria-valuetext={
-          typeof this.props.value === 'object' 
-          ? 
+          typeof this.props.value === 'object'
+          ?
           `Low is ${Math.min(sliderLow, sliderHigh)}, high is ${Math.max(sliderLow, sliderHigh)}` : undefined
         }
       >
@@ -183,13 +186,11 @@ class Slider extends React.Component {
           <SliderPointer
             position={((sliderLow - min) / (max - min)) * 100}
             onMove={(b) => this.onSliderMove('sliderLow', b)}
-            ref={ref => this.sliderLow = ref}
           />
         }
         <SliderPointer
           position={((sliderHigh - min) / (max - min)) * 100}
           onMove={(b) => this.onSliderMove('sliderHigh', b)}
-          ref={ref => this.sliderHigh = ref}
         />
         {renderTicks()}
       </div>