Add UNSAFE_ prefix for deprecated lifecycles

Fix palantir#3361 (comment)
lukyth · Aug 11, 2019 · a1a9dfd · a1a9dfd
1 parent e9c501c
commit a1a9dfd
Show file tree

Hide file tree

Showing 34 changed files with 49 additions and 49 deletions.
diff --git a/packages/core/src/common/abstractComponent.ts b/packages/core/src/common/abstractComponent.ts
@@ -35,7 +35,7 @@ export abstract class AbstractComponent<P, S> extends React.Component<P, S> {
         }
     }
 
-    public componentWillReceiveProps(nextProps: P & { children?: React.ReactNode }) {
+    public UNSAFE_componentWillReceiveProps(nextProps: P & { children?: React.ReactNode }) {
         if (!isNodeEnv("production")) {
             this.validateProps(nextProps);
         }

diff --git a/packages/core/src/common/abstractPureComponent.ts b/packages/core/src/common/abstractPureComponent.ts
@@ -35,7 +35,7 @@ export abstract class AbstractPureComponent<P, S = {}> extends React.PureCompone
         }
     }
 
-    public componentWillReceiveProps(nextProps: P & { children?: React.ReactNode }) {
+    public UNSAFE_componentWillReceiveProps(nextProps: P & { children?: React.ReactNode }) {
         if (!isNodeEnv("production")) {
             this.validateProps(nextProps);
         }

diff --git a/packages/core/src/components/collapse/collapse.tsx b/packages/core/src/components/collapse/collapse.tsx
@@ -125,7 +125,7 @@ export class Collapse extends AbstractPureComponent<ICollapseProps, ICollapseSta
     // The most recent non-0 height (once a height has been measured - is 0 until then)
     private height: number = 0;
 
-    public componentWillReceiveProps(nextProps: ICollapseProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: ICollapseProps) {
         if (this.props.isOpen !== nextProps.isOpen) {
             this.clearTimeouts();
             if (this.state.animationState !== AnimationStates.CLOSED && !nextProps.isOpen) {

diff --git a/packages/core/src/components/editable-text/editableText.tsx b/packages/core/src/components/editable-text/editableText.tsx
@@ -223,7 +223,7 @@ export class EditableText extends AbstractPureComponent<IEditableTextProps, IEdi
         this.updateInputDimensions();
     }
 
-    public componentWillReceiveProps(nextProps: IEditableTextProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: IEditableTextProps) {
         const state: IEditableTextState = {};
         if (nextProps.value != null) {
             state.value = nextProps.value;

diff --git a/packages/core/src/components/forms/controls.tsx b/packages/core/src/components/forms/controls.tsx
@@ -247,7 +247,7 @@ export class Checkbox extends React.PureComponent<ICheckboxProps, ICheckboxState
         );
     }
 
-    public componentWillReceiveProps({ indeterminate }: ICheckboxProps) {
+    public UNSAFE_componentWillReceiveProps({ indeterminate }: ICheckboxProps) {
         // put props into state if controlled by props
         if (indeterminate != null) {
             this.setState({ indeterminate });

diff --git a/packages/core/src/components/forms/numericInput.tsx b/packages/core/src/components/forms/numericInput.tsx
@@ -216,8 +216,8 @@ export class NumericInput extends AbstractPureComponent<HTMLInputProps & INumeri
     private incrementButtonHandlers = this.getButtonEventHandlers(IncrementDirection.UP);
     private decrementButtonHandlers = this.getButtonEventHandlers(IncrementDirection.DOWN);
 
-    public componentWillReceiveProps(nextProps: HTMLInputProps & INumericInputProps) {
-        super.componentWillReceiveProps(nextProps);
+    public UNSAFE_componentWillReceiveProps(nextProps: HTMLInputProps & INumericInputProps) {
+        super.UNSAFE_componentWillReceiveProps(nextProps);
 
         const value = getValueOrEmptyValue(nextProps.value);
 

diff --git a/packages/core/src/components/hotkeys/hotkeysTarget.tsx b/packages/core/src/components/hotkeys/hotkeysTarget.tsx
@@ -47,9 +47,9 @@ export function HotkeysTarget<T extends IConstructor<IHotkeysTargetComponent>>(W
         /** @internal */
         public localHotkeysEvents?: HotkeysEvents;
 
-        public componentWillMount() {
-            if (super.componentWillMount != null) {
-                super.componentWillMount();
+        public UNSAFE_componentWillMount() {
+            if (super.UNSAFE_componentWillMount != null) {
+                super.UNSAFE_componentWillMount();
             }
             this.localHotkeysEvents = new HotkeysEvents(HotkeyScope.LOCAL);
             this.globalHotkeysEvents = new HotkeysEvents(HotkeyScope.GLOBAL);

diff --git a/packages/core/src/components/overflow-list/overflowList.tsx b/packages/core/src/components/overflow-list/overflowList.tsx
@@ -137,7 +137,7 @@ export class OverflowList<T> extends React.Component<IOverflowListProps<T>, IOve
         this.repartition(false);
     }
 
-    public componentWillReceiveProps(nextProps: IOverflowListProps<T>) {
+    public UNSAFE_componentWillReceiveProps(nextProps: IOverflowListProps<T>) {
         const {
             collapseFrom,
             items,

diff --git a/packages/core/src/components/overlay/overlay.tsx b/packages/core/src/components/overlay/overlay.tsx
@@ -253,7 +253,7 @@ export class Overlay extends React.PureComponent<IOverlayProps, IOverlayState> {
         }
     }
 
-    public componentWillReceiveProps(nextProps: IOverlayProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: IOverlayProps) {
         this.setState({ hasEverOpened: this.state.hasEverOpened || nextProps.isOpen });
     }
 

diff --git a/packages/core/src/components/panel-stack/panelStack.tsx b/packages/core/src/components/panel-stack/panelStack.tsx
@@ -74,7 +74,7 @@ export class PanelStack extends AbstractPureComponent<IPanelStackProps, IPanelSt
         stack: this.props.stack != null ? this.props.stack.slice().reverse() : [this.props.initialPanel],
     };
 
-    public componentWillReceiveProps(nextProps: IPanelStackProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: IPanelStackProps) {
         if (this.props.stack !== nextProps.stack && this.props.stack != null && nextProps.stack != null) {
             this.setState({
                 direction: this.props.stack.length - nextProps.stack.length < 0 ? "push" : "pop",

diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx
@@ -222,8 +222,8 @@ export class Popover extends AbstractPureComponent<IPopoverProps, IPopoverState>
         this.updateDarkParent();
     }
 
-    public componentWillReceiveProps(nextProps: IPopoverProps) {
-        super.componentWillReceiveProps(nextProps);
+    public UNSAFE_componentWillReceiveProps(nextProps: IPopoverProps) {
+        super.UNSAFE_componentWillReceiveProps(nextProps);
 
         const nextIsOpen = this.getIsOpen(nextProps);
 

diff --git a/packages/core/src/components/slider/multiSlider.tsx b/packages/core/src/components/slider/multiSlider.tsx
@@ -171,7 +171,7 @@ export class MultiSlider extends AbstractPureComponent<IMultiSliderProps, ISlide
         );
     }
 
-    public componentWillMount() {
+    public UNSAFE_componentWillMount() {
         this.handleProps = getSortedInteractiveHandleProps(this.props);
     }
 
@@ -183,7 +183,7 @@ export class MultiSlider extends AbstractPureComponent<IMultiSliderProps, ISlide
         this.updateTickSize();
     }
 
-    public componentWillReceiveProps(nextProps: IMultiSliderProps & IChildrenProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: IMultiSliderProps & IChildrenProps) {
         this.setState({ labelPrecision: this.getLabelPrecision(nextProps) });
 
         const newHandleProps = getSortedInteractiveHandleProps(nextProps);

diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx
@@ -159,7 +159,7 @@ export class Tabs extends AbstractPureComponent<ITabsProps, ITabsState> {
         this.moveSelectionIndicator();
     }
 
-    public componentWillReceiveProps({ selectedTabId }: ITabsProps) {
+    public UNSAFE_componentWillReceiveProps({ selectedTabId }: ITabsProps) {
         if (selectedTabId !== undefined) {
             // keep state in sync with controlled prop, so state is canonical source of truth
             this.setState({ selectedTabId });

diff --git a/packages/core/src/components/tag-input/tagInput.tsx b/packages/core/src/components/tag-input/tagInput.tsx
@@ -222,8 +222,8 @@ export class TagInput extends AbstractPureComponent<ITagInputProps, ITagInputSta
         },
     };
 
-    public componentWillReceiveProps(nextProps: HTMLInputProps & ITagInputProps) {
-        super.componentWillReceiveProps(nextProps);
+    public UNSAFE_componentWillReceiveProps(nextProps: HTMLInputProps & ITagInputProps) {
+        super.UNSAFE_componentWillReceiveProps(nextProps);
 
         if (nextProps.inputValue !== this.props.inputValue) {
             this.setState({ inputValue: nextProps.inputValue || "" });

diff --git a/packages/datetime/src/dateInput.tsx b/packages/datetime/src/dateInput.tsx
@@ -231,8 +231,8 @@ export class DateInput extends AbstractPureComponent<IDateInputProps, IDateInput
         );
     }
 
-    public componentWillReceiveProps(nextProps: IDateInputProps) {
-        super.componentWillReceiveProps(nextProps);
+    public UNSAFE_componentWillReceiveProps(nextProps: IDateInputProps) {
+        super.UNSAFE_componentWillReceiveProps(nextProps);
         if (nextProps.value !== this.props.value) {
             this.setState({ value: nextProps.value });
         }

diff --git a/packages/datetime/src/datePicker.tsx b/packages/datetime/src/datePicker.tsx
@@ -156,8 +156,8 @@ export class DatePicker extends AbstractPureComponent<IDatePickerProps, IDatePic
         );
     }
 
-    public componentWillReceiveProps(nextProps: IDatePickerProps) {
-        super.componentWillReceiveProps(nextProps);
+    public UNSAFE_componentWillReceiveProps(nextProps: IDatePickerProps) {
+        super.UNSAFE_componentWillReceiveProps(nextProps);
         const { value } = nextProps;
         if (value === this.props.value) {
             // no action needed
@@ -273,7 +273,7 @@ export class DatePicker extends AbstractPureComponent<IDatePickerProps, IDatePic
             return;
         }
         if (this.props.value === undefined) {
-            // set now if uncontrolled, otherwise they'll be updated in `componentWillReceiveProps`
+            // set now if uncontrolled, otherwise they'll be updated in `UNSAFE_componentWillReceiveProps`
             this.setState({
                 displayMonth: day.getMonth(),
                 displayYear: day.getFullYear(),

diff --git a/packages/datetime/src/dateRangeInput.tsx b/packages/datetime/src/dateRangeInput.tsx
@@ -311,8 +311,8 @@ export class DateRangeInput extends AbstractPureComponent<IDateRangeInputProps,
         );
     }
 
-    public componentWillReceiveProps(nextProps: IDateRangeInputProps) {
-        super.componentWillReceiveProps(nextProps);
+    public UNSAFE_componentWillReceiveProps(nextProps: IDateRangeInputProps) {
+        super.UNSAFE_componentWillReceiveProps(nextProps);
 
         let nextState: IDateRangeInputState = {};
 
@@ -963,7 +963,7 @@ export class DateRangeInput extends AbstractPureComponent<IDateRangeInputProps,
     }
 
     // this is a slightly kludgy function, but it saves us a good amount of repeated code between
-    // the constructor and componentWillReceiveProps.
+    // the constructor and UNSAFE_componentWillReceiveProps.
     private getFormattedMinMaxDateString(props: IDateRangeInputProps, propName: "minDate" | "maxDate") {
         const date = props[propName];
         const defaultDate = DateRangeInput.defaultProps[propName];

diff --git a/packages/datetime/src/dateRangePicker.tsx b/packages/datetime/src/dateRangePicker.tsx
@@ -231,8 +231,8 @@ export class DateRangePicker extends AbstractPureComponent<IDateRangePickerProps
         );
     }
 
-    public componentWillReceiveProps(nextProps: IDateRangePickerProps) {
-        super.componentWillReceiveProps(nextProps);
+    public UNSAFE_componentWillReceiveProps(nextProps: IDateRangePickerProps) {
+        super.UNSAFE_componentWillReceiveProps(nextProps);
 
         if (
             !DateUtils.areRangesEqual(this.props.value, nextProps.value) ||

diff --git a/packages/datetime/src/dateTimePicker.tsx b/packages/datetime/src/dateTimePicker.tsx
@@ -101,7 +101,7 @@ export class DateTimePicker extends AbstractPureComponent<IDateTimePickerProps,
         );
     }
 
-    public componentWillReceiveProps(nextProps: IDatePickerProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: IDatePickerProps) {
         if (this.props.value === nextProps.value) {
             return;
         } else if (nextProps.value != null) {

diff --git a/packages/datetime/src/timePicker.tsx b/packages/datetime/src/timePicker.tsx
@@ -189,7 +189,7 @@ export class TimePicker extends React.Component<ITimePickerProps, ITimePickerSta
         /* tslint:enable:max-line-length */
     }
 
-    public componentWillReceiveProps(nextProps: ITimePickerProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: ITimePickerProps) {
         const didMinTimeChange = nextProps.minTime !== this.props.minTime;
         const didMaxTimeChange = nextProps.maxTime !== this.props.maxTime;
         const didBoundsChange = didMinTimeChange || didMaxTimeChange;

diff --git a/packages/docs-app/src/examples/core-examples/hotkeyPiano.tsx b/packages/docs-app/src/examples/core-examples/hotkeyPiano.tsx
@@ -122,7 +122,7 @@ class PianoKey extends React.Component<IPianoKeyProps, {}> {
         this.envelope.gain.connect(context.destination);
     }
 
-    public componentWillReceiveProps(nextProps: IPianoKeyProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: IPianoKeyProps) {
         if (this.props.pressed === false && nextProps.pressed === true) {
             this.envelope.on();
         } else if (this.props.pressed === true && nextProps.pressed === false) {

diff --git a/packages/docs-theme/src/components/baseExample.tsx b/packages/docs-theme/src/components/baseExample.tsx
@@ -49,7 +49,7 @@ export class BaseExample<S> extends React.Component<IBaseExampleProps, S> {
         );
     }
 
-    public componentWillMount() {
+    public UNSAFE_componentWillMount() {
         // HACKHACK: The docs app suffers from a Flash of Unstyled Content that causes some 'width: 100%' examples to
         // render incorrectly, because they mis-measure the horizontal space available to them. Until that bug is squashed,
         // this is the workaround: delay initial render with a requestAnimationFrame.

diff --git a/packages/docs-theme/src/components/documentation.tsx b/packages/docs-theme/src/components/documentation.tsx
@@ -238,7 +238,7 @@ export class Documentation extends React.PureComponent<IDocumentationProps, IDoc
         );
     }
 
-    public componentWillMount() {
+    public UNSAFE_componentWillMount() {
         addScrollbarStyle();
         this.updateHash();
     }
@@ -282,7 +282,7 @@ export class Documentation extends React.PureComponent<IDocumentationProps, IDoc
             // captures a pageview for new location hashes that are dynamically rendered without a full page request
             (window as any).ga("send", "pageview", { page: location.pathname + location.search + location.hash });
         }
-        // Don't call componentWillMount since the HotkeysTarget decorator will be invoked on every hashchange.
+        // Don't call UNSAFE_componentWillMount since the HotkeysTarget decorator will be invoked on every hashchange.
         this.updateHash();
     };
 

diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx
@@ -198,7 +198,7 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         });
     }
 
-    public componentWillReceiveProps(nextProps: IQueryListProps<T>) {
+    public UNSAFE_componentWillReceiveProps(nextProps: IQueryListProps<T>) {
         if (nextProps.activeItem !== undefined) {
             this.shouldCheckActiveItemInViewport = true;
             this.setState({ activeItem: nextProps.activeItem });

diff --git a/packages/select/src/components/select/suggest.tsx b/packages/select/src/components/select/suggest.tsx
@@ -136,7 +136,7 @@ export class Suggest<T> extends React.PureComponent<ISuggestProps<T>, ISuggestSt
         );
     }
 
-    public componentWillReceiveProps(nextProps: ISuggestProps<T>) {
+    public UNSAFE_componentWillReceiveProps(nextProps: ISuggestProps<T>) {
         // If the selected item prop changes, update the underlying state.
         if (nextProps.selectedItem !== undefined && nextProps.selectedItem !== this.state.selectedItem) {
             this.setState({ selectedItem: nextProps.selectedItem });

diff --git a/packages/table-dev-app/src/mutableTable.tsx b/packages/table-dev-app/src/mutableTable.tsx
@@ -347,15 +347,15 @@ export class MutableTable extends React.Component<{}, IMutableTableState> {
         );
     }
 
-    public componentWillMount() {
+    public UNSAFE_componentWillMount() {
         this.resetCellContent();
     }
 
     public componentDidMount() {
         this.syncFocusStyle();
     }
 
-    public componentWillUpdate(_nextProps: {}, nextState: IMutableTableState) {
+    public UNSAFE_componentWillUpdate(_nextProps: {}, nextState: IMutableTableState) {
         if (
             nextState.cellContent !== this.state.cellContent ||
             nextState.numRows !== this.state.numRows ||

diff --git a/packages/table/src/cell/editableCell.tsx b/packages/table/src/cell/editableCell.tsx
@@ -119,7 +119,7 @@ export class EditableCell extends React.Component<IEditableCellProps, IEditableC
         );
     }
 
-    public componentWillReceiveProps(nextProps: IEditableCellProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: IEditableCellProps) {
         const { value } = nextProps;
         if (value != null) {
             this.setState({ savedValue: value, dirtyValue: value });

diff --git a/packages/table/src/common/loadableContent.tsx b/packages/table/src/common/loadableContent.tsx
@@ -41,7 +41,7 @@ export class LoadableContent extends React.PureComponent<ILoadableContentProps,
         this.style = this.calculateStyle(props.variableLength);
     }
 
-    public componentWillReceiveProps(nextProps: ILoadableContentProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: ILoadableContentProps) {
         if ((!this.props.loading && nextProps.loading) || this.props.variableLength !== nextProps.variableLength) {
             this.style = this.calculateStyle(nextProps.variableLength);
         }

diff --git a/packages/table/src/headers/editableName.tsx b/packages/table/src/headers/editableName.tsx
@@ -68,7 +68,7 @@ export class EditableName extends React.PureComponent<IEditableNameProps, IEdita
         };
     }
 
-    public componentWillReceiveProps(nextProps: IEditableNameProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: IEditableNameProps) {
         const { name } = nextProps;
         if (name !== this.props.name) {
             this.setState({ savedName: name, dirtyName: name });

diff --git a/packages/table/src/headers/header.tsx b/packages/table/src/headers/header.tsx
@@ -239,7 +239,7 @@ export class Header extends React.Component<IInternalHeaderProps, IHeaderState>
         this.state = { hasValidSelection: this.isSelectedRegionsControlledAndNonEmpty(props) };
     }
 
-    public componentWillReceiveProps(nextProps?: IInternalHeaderProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps?: IInternalHeaderProps) {
         this.setState({ hasValidSelection: this.isSelectedRegionsControlledAndNonEmpty(nextProps) });
     }
 

diff --git a/packages/table/src/interactions/resizable.tsx b/packages/table/src/interactions/resizable.tsx
@@ -97,7 +97,7 @@ export class Resizable extends React.PureComponent<IResizableProps, IResizeableS
         };
     }
 
-    public componentWillReceiveProps(nextProps: IResizableProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: IResizableProps) {
         const { size } = nextProps;
         this.setState({
             size,

diff --git a/packages/table/src/table.tsx b/packages/table/src/table.tsx
@@ -696,9 +696,9 @@ export class Table extends AbstractComponent<ITableProps, ITableState> {
         );
     }
 
-    public componentWillReceiveProps(nextProps: ITableProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: ITableProps) {
         // calls validateProps
-        super.componentWillReceiveProps(nextProps);
+        super.UNSAFE_componentWillReceiveProps(nextProps);
 
         const {
             children,

diff --git a/packages/table/src/tableBodyCells.tsx b/packages/table/src/tableBodyCells.tsx
@@ -108,7 +108,7 @@ export class TableBodyCells extends React.Component<ITableBodyCellsProps, {}> {
         );
     }
 
-    public componentWillUpdate(nextProps?: ITableBodyCellsProps) {
+    public UNSAFE_componentWillUpdate(nextProps?: ITableBodyCellsProps) {
         const resetKeysBlacklist = { exclude: BATCHER_RESET_PROP_KEYS_BLACKLIST };
         const shouldResetBatcher = !CoreUtils.shallowCompareKeys(this.props, nextProps, resetKeysBlacklist);
         if (shouldResetBatcher) {

diff --git a/packages/timezone/src/components/timezone-picker/timezonePicker.tsx b/packages/timezone/src/components/timezone-picker/timezonePicker.tsx
@@ -167,7 +167,7 @@ export class TimezonePicker extends AbstractPureComponent<ITimezonePickerProps,
         );
     }
 
-    public componentWillReceiveProps(nextProps: ITimezonePickerProps) {
+    public UNSAFE_componentWillReceiveProps(nextProps: ITimezonePickerProps) {
         const { date: nextDate = new Date(), inputProps: nextInputProps = {} } = nextProps;
 
         if (this.props.showLocalTimezone !== nextProps.showLocalTimezone) {
-Original file line number
+Diff line change
@@ Expand Up @@
             }
         }
-        public componentWillReceiveProps(nextProps: IOverlayProps) {
+        public UNSAFE_componentWillReceiveProps(nextProps: IOverlayProps) {
             this.setState({ hasEverOpened: this.state.hasEverOpened || nextProps.isOpen });
         }
@@ Expand Down @@