Rename deprecated React APIs

Author: dmt0

dev/App.js

@@ -118,7 +118,7 @@ class App extends Component {
     this.updateState = this.updateState.bind(this);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     // curl https://api.github.com/repos/plotly/plotly.js/contents/test/image/mocks \
     // | jq '[.[] | .name ]' > mocks.json
     fetch('/mocks.json')

examples/demo/src/App.js

@@ -27,7 +27,7 @@ class App extends Component {
     this.loadMock = this.loadMock.bind(this);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     fetch('https://api.github.com/repos/plotly/plotly.js/contents/test/image/mocks')
       .then(response => response.json())
       .then(mocks => this.setState({mocks}));

src/components/containers/PlotlyFold.js

@@ -177,7 +177,7 @@ class PlotlyFold extends Fold {
     this.determineVisibility(props, context);
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
+  UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
     this.determineVisibility(nextProps, nextContext);
   }
 

src/components/containers/PlotlySection.js

@@ -43,7 +43,7 @@ export default class PlotlySection extends Section {
     this.determineVisibility(props, context);
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
+  UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
     this.determineVisibility(nextProps, nextContext);
   }
 

src/components/containers/TraceAccordion.js

@@ -17,7 +17,7 @@ class TraceAccordion extends Component {
     this.setLocals(props, context);
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
+  UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
     this.setLocals(nextProps, nextContext);
   }
 

src/components/containers/TraceMarkerSection.js

@@ -8,7 +8,7 @@ class TraceMarkerSection extends Component {
     this.setLocals(context);
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
+  UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
     this.setLocals(nextContext);
   }
 

src/components/fields/DataSelector.js

@@ -19,7 +19,7 @@ export class UnconnectedDataSelector extends Component {
     this.setLocals(props, context);
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
+  UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
     this.setLocals(nextProps, nextContext);
   }
 

src/components/fields/DropdownCustom.js

@@ -22,7 +22,7 @@ export class UnconnectedDropdownCustom extends Component {
     };
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     this.setLocals(props);
   }
 

src/components/fields/HoverLabelNameLength.js

@@ -18,7 +18,7 @@ export class UnconnectedHoverLabelNameLength extends Component {
     return props.fullValue > 0 ? 'clip' : props.fullValue === 0 ? 'hide' : 'no-clip';
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.fullValue !== this.props.fullValue) {
       this.setState({
         currentOption: this.getCurrentOption(nextProps),

src/components/fields/LineSelectors.js

@@ -67,7 +67,7 @@ class LineSelector extends Component {
     this.setLocals(props, context);
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
+  UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
     this.setLocals(nextProps, nextContext);
   }
 

src/components/fields/LocationSelector.js

@@ -65,7 +65,7 @@ class UnconnectedLocationSelector extends Component {
     this.setMode = this.setMode.bind(this);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.setState({
       mode: this.props.container.locations ? 'location' : 'latlon',
     });

src/components/fields/SymbolSelector.js

@@ -351,7 +351,7 @@ class SymbolSelector extends Component {
     this.setLocals(props, context);
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
+  UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
     this.setLocals(nextProps, nextContext);
   }
 

src/components/fields/TraceSelector.js

@@ -61,7 +61,7 @@ class TraceSelector extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
+  UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
     const {container, fullContainer, updateContainer} = nextProps;
     this.setTraceDefaults(container, fullContainer, updateContainer);
     this.setLocals(nextProps, nextContext);

src/components/fields/VisibilitySelect.js

@@ -16,7 +16,7 @@ export class UnconnectedVisibilitySelect extends Component {
     this.setLocals(props);
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     this.setLocals(props);
   }
 

src/components/widgets/CheckboxGroup.js

@@ -10,7 +10,7 @@ class CheckboxGroup extends Component {
     this.handleChange = this.handleChange.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({options: nextProps.options});
   }
 

src/components/widgets/Dropzone.js

@@ -40,7 +40,7 @@ class Dropzone extends Component {
     return <div className="dropzone-container__message">{_('File loaded!')}</div>;
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const _ = this.context.localize;
 
     if (this.props.value && this.props.value !== '') {

src/components/widgets/FlaglistCheckboxGroup.js

@@ -37,7 +37,7 @@ class FlaglistCheckboxGroup extends Component {
   }
 
   // Sync local state to parent props.
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState({activeOption: this.parseFlags(nextProps.activeOption)});
   }
 

src/components/widgets/NumericInput.js

@@ -31,7 +31,7 @@ export default class NumericInput extends Component {
         }`;
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.value !== this.state.value) {
       this.setState({value: nextProps.value});
     }

src/components/widgets/RadioBlocks.js

@@ -10,7 +10,7 @@ class RadioBlocks extends Component {
     this.renderOption = this.renderOption.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     // Reset the value to the graph's actual value
     if (nextProps.activeOption !== this.state.activeOption) {
       this.setState({

src/components/widgets/TextArea.js

@@ -12,7 +12,7 @@ export default class TextArea extends Component {
     this.onChange = this.onChange.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     // Reset the value to the graph's actual value
     if (nextProps.value !== this.state.value) {
       this.setState({

src/components/widgets/TextInput.js

@@ -9,7 +9,7 @@ export default class TextInput extends Component {
     this.state = {value: props.value};
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.value !== this.state.value) {
       this.setState({value: nextProps.value});
     }

src/components/widgets/text_editors/LaTeX.js

@@ -19,7 +19,7 @@ export default class LaTeX extends TextArea {
     this.onBlur = this.onBlur.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const unwrappedNextValue = this.unwrap(nextProps.value);
 
     if (unwrappedNextValue !== this.state.value) {

src/components/widgets/text_editors/RichText/LinkEditor.js

@@ -26,7 +26,7 @@ class LinkEditor extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const {props} = this;
 
     // Update position if we are editing a new link

src/components/widgets/text_editors/RichText/index.js

@@ -41,7 +41,7 @@ class RichText extends Component {
      * After this, as long as this component is mounted, it owns the source
      * of truth for the annotation value via `this.state.editorState`.
      * This state may be updated externally via a prop update.
-     * See `componentWillReceiveProps`.
+     * See `UNSAFE_componentWillReceiveProps`.
      */
     this.state = {
       editorState: props.value.toString().trim().length
@@ -67,7 +67,7 @@ class RichText extends Component {
     this.renderLinkEditor = this.renderLinkEditor.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const {linkEditorFocus, editorFocus} = this.state;
 
     /*

src/lib/connectAggregationToTransform.js

@@ -11,7 +11,7 @@ export default function connectAggregationToTransform(WrappedComponent) {
       this.setLocals(props, context);
     }
 
-    componentWillReceiveProps(nextProps, nextContext) {
+    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
       this.setLocals(nextProps, nextContext);
     }
 

src/lib/connectAnnotationToLayout.js

@@ -14,7 +14,7 @@ export default function connectAnnotationToLayout(WrappedComponent) {
       this.setLocals(props, context);
     }
 
-    componentWillReceiveProps(nextProps, nextContext) {
+    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
       this.setLocals(nextProps, nextContext);
     }
 

src/lib/connectCartesianSubplotToLayout.js

@@ -11,7 +11,7 @@ export default function connectCartesianSubplotToLayout(WrappedComponent) {
       this.setLocals(props, context);
     }
 
-    componentWillReceiveProps(nextProps, nextContext) {
+    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
       this.setLocals(nextProps, nextContext);
     }
 

src/lib/connectImageToLayout.js

@@ -14,7 +14,7 @@ export default function connectImageToLayout(WrappedComponent) {
       this.setLocals(props, context);
     }
 
-    componentWillReceiveProps(nextProps, nextContext) {
+    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
       this.setLocals(nextProps, nextContext);
     }
 

src/lib/connectLayersToMapbox.js

@@ -14,7 +14,7 @@ export default function connectLayersToMapbox(WrappedComponent) {
       this.setLocals(props, context);
     }
 
-    componentWillReceiveProps(nextProps, nextContext) {
+    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
       this.setLocals(nextProps, nextContext);
     }
 

src/lib/connectNonCartesianSubplotToLayout.js

@@ -11,7 +11,7 @@ export default function connectNonCartesianSubplotToLayout(WrappedComponent) {
       this.setLocals(props, context);
     }
 
-    componentWillReceiveProps(nextProps, nextContext) {
+    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
       this.setLocals(nextProps, nextContext);
     }
 

src/lib/connectRangeSelectorToAxis.js

@@ -13,7 +13,7 @@ export default function connectRangeSelectorToAxis(WrappedComponent) {
       this.setLocals(props, context);
     }
 
-    componentWillReceiveProps(nextProps, nextContext) {
+    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
       this.setLocals(nextProps, nextContext);
     }
 

src/lib/connectShapeToLayout.js

@@ -14,7 +14,7 @@ export default function connectShapeToLayout(WrappedComponent) {
       this.setLocals(props, context);
     }
 
-    componentWillReceiveProps(nextProps, nextContext) {
+    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
       this.setLocals(nextProps, nextContext);
     }
 

src/lib/connectSliderToLayout.js

@@ -10,7 +10,7 @@ export default function connectSliderToLayout(WrappedComponent) {
       this.setLocals(props, context);
     }
 
-    componentWillReceiveProps(nextProps, nextContext) {
+    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
       this.setLocals(nextProps, nextContext);
     }
 

src/lib/connectToContainer.js

@@ -41,7 +41,7 @@ export default function connectToContainer(WrappedComponent, config = {}) {
       this.setLocals(props, context);
     }
 
-    componentWillReceiveProps(nextProps, nextContext) {
+    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
       this.setLocals(nextProps, nextContext);
     }
 

src/lib/connectTraceToPlot.js

@@ -23,7 +23,7 @@ export default function connectTraceToPlot(WrappedComponent) {
       this.setLocals(props, context);
     }
 
-    componentWillReceiveProps(nextProps, nextContext) {
+    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
       this.setLocals(nextProps, nextContext);
     }
 

src/lib/connectTransformToTrace.js

@@ -13,7 +13,7 @@ export default function connectTransformToTrace(WrappedComponent) {
       this.setLocals(props, context);
     }
 
-    componentWillReceiveProps(nextProps, nextContext) {
+    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
       this.setLocals(nextProps, nextContext);
     }
 

src/lib/connectUpdateMenuToLayout.js

@@ -10,7 +10,7 @@ export default function connectUpdateMenuToLayout(WrappedComponent) {
       this.setLocals(props, context);
     }
 
-    componentWillReceiveProps(nextProps, nextContext) {
+    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
       this.setLocals(nextProps, nextContext);
     }