React no deprecated + TreeView.tsx

AJIXuMuK · AJIXuMuK · commit f0c35c3591d3 · 2022-08-04T20:30:49.000-04:00
diff --git a/src/controls/chartControl/ChartControl.tsx b/src/controls/chartControl/ChartControl.tsx
@@ -79,7 +79,7 @@ export class ChartControl extends React.Component<IChartControlProps, IChartCont
    *
    * @param nextProps
    */
-  public componentWillReceiveProps(nextProps: IChartControlProps): void {
+  public UNSAFE_componentWillReceiveProps(nextProps: IChartControlProps): void {
     if (nextProps.datapromise !== this.props.datapromise) {
       this.setState({
         isLoading: false
diff --git a/src/controls/dateTimePicker/DateTimePicker.tsx b/src/controls/dateTimePicker/DateTimePicker.tsx
@@ -69,7 +69,7 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
   /**
    * Called before the component receives new props, used for matching state with new props.
    */
-  public componentWillReceiveProps(nextProps: IDateTimePickerProps): void {
+  public UNSAFE_componentWillReceiveProps(nextProps: IDateTimePickerProps): void {
     if (!isEqual(nextProps.value, this.props.value)) {
       const { day, hours, minutes, seconds } = DateTimePicker.getDateComponents(nextProps.value, this.props.dateConvention);
       this.setState({ day, hours, minutes, seconds });
diff --git a/src/controls/fieldCollectionData/collectionNumberField/CollectionNumberField.tsx b/src/controls/fieldCollectionData/collectionNumberField/CollectionNumberField.tsx
@@ -24,7 +24,7 @@ export class CollectionNumberField extends React.Component<ICollectionNumberFiel
   /**
    * componentWillMount lifecycle hook
    */
-  public componentWillMount(): void {
+  public UNSAFE_componentWillMount(): void {
     this.setState({
       value: this.props.item[this.props.field.id]
     });
@@ -37,7 +37,7 @@ export class CollectionNumberField extends React.Component<ICollectionNumberFiel
    * @param nextProps
    * @param nextState
    */
-  public componentWillUpdate(nextProps: ICollectionNumberFieldProps, nextState: ICollectionNumberFieldState): void {
+  public UNSAFE_componentWillUpdate(nextProps: ICollectionNumberFieldProps, nextState: ICollectionNumberFieldState): void {
     if (!isEqual(nextProps.item, this.props.item)) {
       this.setState({
         value: nextProps.item[nextProps.field.id]
diff --git a/src/controls/fields/fieldUserRenderer/FieldUserRenderer.tsx b/src/controls/fields/fieldUserRenderer/FieldUserRenderer.tsx
@@ -115,7 +115,7 @@ export class FieldUserRenderer extends React.Component<IFieldUserRendererProps,
     };
   }
 
-  public componentWillReceiveProps(nextProps: IFieldUserRendererProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: IFieldUserRendererProps) {
     const currentPrincipals = this.props.users ? this.props.users.map(u => u.id) : [];
     const newPrincipals = nextProps.users ? nextProps.users.map(u => u.id) : [];
 
diff --git a/src/controls/filePicker/FilePicker.tsx b/src/controls/filePicker/FilePicker.tsx
@@ -103,7 +103,7 @@ export class FilePicker extends React.Component<
  *
  * @param nextProps
  */
-  public componentWillReceiveProps(nextProps: IFilePickerProps): void {
+  public UNSAFE_componentWillReceiveProps(nextProps: IFilePickerProps): void {
     if (nextProps.isPanelOpen || nextProps.isPanelOpen !== this.props.isPanelOpen) {
       this.setState({
         panelOpen: nextProps.isPanelOpen
diff --git a/src/controls/folderPicker/FolderPicker.tsx b/src/controls/folderPicker/FolderPicker.tsx
@@ -27,7 +27,7 @@ export class FolderPicker extends React.Component<IFolderPickerProps, IFolderPic
     };
   }
 
-  public componentWillReceiveProps(nextProps: IFolderPickerProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: IFolderPickerProps) {
 
     this.setState({
       selectedFolder: nextProps.defaultFolder,
diff --git a/src/controls/iFrameDialog/IFrameDialog.tsx b/src/controls/iFrameDialog/IFrameDialog.tsx
@@ -83,7 +83,7 @@ export class IFrameDialog extends React.Component<IFrameDialogProps, IFrameDialo
   /**
    * componentWillMount lifecycle hook
    */
-  public componentWillMount(): void {
+  public UNSAFE_componentWillMount(): void {
     this.setState({
       dialogId: `dialog-${Guid.newGuid().toString()}`
     });
@@ -96,7 +96,7 @@ export class IFrameDialog extends React.Component<IFrameDialogProps, IFrameDialo
     this.setDialogStyling();
   }
 
-  public componentWillReceiveProps(nextProps: IFrameDialogProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: IFrameDialogProps) {
     if (nextProps.hidden && nextProps.hidden !== this.props.hidden) {
       this.setState({
         isStylingSet: false
diff --git a/src/controls/listItemPicker/ComboBoxListItemPicker.tsx b/src/controls/listItemPicker/ComboBoxListItemPicker.tsx
@@ -80,7 +80,7 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic
     }
   }
 
-  public async componentWillReceiveProps(nextProps: IComboBoxListItemPickerProps): Promise<void> {
+  public async UNSAFE_componentWillReceiveProps(nextProps: IComboBoxListItemPickerProps): Promise<void> {
     if (nextProps.listId !== this.props.listId) {
       this.setState({
         selectedItems: [],
diff --git a/src/controls/listItemPicker/ListItemPicker.tsx b/src/controls/listItemPicker/ListItemPicker.tsx
@@ -37,7 +37,7 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
     this.loadField(this.props);
   }
 
-  public componentWillReceiveProps(nextProps: IListItemPickerProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: IListItemPickerProps) {
     let newSelectedItems: any[] | undefined;
     if (this.props.listId !== nextProps.listId) {
       newSelectedItems = [];
diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx
@@ -96,7 +96,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
    * @param prevProps
    * @param prevState
    */
-  public componentWillReceiveProps(nextProps: IListViewProps): void {
+  public UNSAFE_componentWillReceiveProps(nextProps: IListViewProps): void {
 
     const modifiedNextProps = this._filterFunctions(nextProps);
     const modifiedProps = this._filterFunctions(this.props);
diff --git a/src/controls/locationPicker/LocationPicker.tsx b/src/controls/locationPicker/LocationPicker.tsx
@@ -42,7 +42,7 @@ export class LocationPicker extends React.Component<ILocationPickerProps, ILocat
 
   }
 
-  public componentWillReceiveProps(nextProps: ILocationPickerProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: ILocationPickerProps) {
     if (!isEqual(nextProps.defaultValue, this.props.defaultValue)) {
       if (nextProps.defaultValue) {
         this.setState({ selectedItem: nextProps.defaultValue, currentMode: Mode.view });
diff --git a/src/controls/map/Map.tsx b/src/controls/map/Map.tsx
@@ -45,7 +45,7 @@ export class Map extends React.Component<IMapProps, IMapState> {
   /**
    * componentWillUpdate lifecycle hook
    */
-  public componentWillUpdate(nextProps: IMapProps, nextState: IMapState): void {
+  public UNSAFE_componentWillUpdate(nextProps: IMapProps, nextState: IMapState): void {
     if (!isEqual(this.props.coordinates, nextProps.coordinates)) {
       this.setState({
         coordinates: nextProps.coordinates
diff --git a/src/controls/peoplepicker/PeoplePickerComponent.tsx b/src/controls/peoplepicker/PeoplePickerComponent.tsx
@@ -45,15 +45,15 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
   /**
    * componentWillMount lifecycle hook
    */
-  public componentWillMount(): void {
+  public UNSAFE_componentWillMount(): void {
     this.getInitialPersons(this.props);
   }
 
 
   /**
    * componentWillUpdate lifecycle hook
    */
-  public componentWillUpdate(nextProps: IPeoplePickerProps, nextState: IPeoplePickerState): void {
+  public UNSAFE_componentWillUpdate(nextProps: IPeoplePickerProps, nextState: IPeoplePickerState): void {
     if (!isEqual(this.props.defaultSelectedUsers, nextProps.defaultSelectedUsers) ||
       this.props.groupName !== nextProps.groupName ||
       this.props.webAbsoluteUrl !== nextProps.webAbsoluteUrl ||
@@ -62,7 +62,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
     }
   }
 
-  public componentWillReceiveProps(nextProps: IPeoplePickerProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: IPeoplePickerProps) {
     if (nextProps.errorMessage !== this.props.errorMessage) {
       this.setState({
         errorMessage: nextProps.errorMessage
diff --git a/src/controls/richText/RichText.tsx b/src/controls/richText/RichText.tsx
@@ -195,7 +195,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
     return true;
   }
 
-  public componentWillReceiveProps(nextProps: IRichTextProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: IRichTextProps) {
     if (nextProps.value !== this.props.value && nextProps.value !== this.state.text) {
       this.setState({
         text: nextProps.value
diff --git a/src/controls/taxonomyPicker/TaxonomyPicker.tsx b/src/controls/taxonomyPicker/TaxonomyPicker.tsx
@@ -76,13 +76,13 @@ export class TaxonomyPicker extends React.Component<ITaxonomyPickerProps, ITaxon
   /**
    * componentWillMount lifecycle hook
    */
-  public componentWillMount(): void {
+  public UNSAFE_componentWillMount(): void {
     this.setState({
       activeNodes: this.props.initialValues || []
     });
   }
 
-  public componentWillReceiveProps(nextProps: ITaxonomyPickerProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: ITaxonomyPickerProps) {
     let newState: ITaxonomyPickerState | undefined;
     // Check if the initial values objects are not equal, if that is the case, data can be refreshed
     if (!isEqual(this.props.initialValues, nextProps.initialValues)) {
diff --git a/src/controls/taxonomyPicker/Term.tsx b/src/controls/taxonomyPicker/Term.tsx
@@ -44,7 +44,7 @@ export default class Term extends React.Component<ITermProps, ITermState> {
    * @param nextProps
    * @param nextContext
    */
-  public componentWillReceiveProps?(nextProps: ITermProps, nextContext: any): void {
+  public UNSAFE_componentWillReceiveProps?(nextProps: ITermProps, nextContext: any): void {
     // If multi-selection is turned off, only a single term can be selected
     //if (!this.props.multiSelection) {
       let active = nextProps.activeNodes.filter(item => item.key === this.props.term.Id);
diff --git a/src/controls/taxonomyPicker/TermParent.tsx b/src/controls/taxonomyPicker/TermParent.tsx
@@ -31,7 +31,7 @@ export default class TermParent extends React.Component<ITermParentProps, ITermP
   /**
    * componentWillMount
    */
-  public componentWillMount() {
+  public UNSAFE_componentWillMount() {
     // fix term depth if anchroid for rendering
     if (this.props.anchorId)
     {
diff --git a/src/controls/taxonomyPicker/termActions/ButtonTermAction.tsx b/src/controls/taxonomyPicker/termActions/ButtonTermAction.tsx
@@ -8,7 +8,7 @@ export default class ButtonTermAction extends React.Component<IConcreteTermActio
   /**
    * componentWillMount lifecycle hook
    */
-  public componentWillMount(): void {
+  public UNSAFE_componentWillMount(): void {
     this.checkForImmediateInvocations();
   }
 
diff --git a/src/controls/taxonomyPicker/termActions/DropdownTermAction.tsx b/src/controls/taxonomyPicker/termActions/DropdownTermAction.tsx
@@ -10,7 +10,7 @@ export class DropdownTermAction extends React.Component<IConcreteTermActionProps
   /**
    * componentWillMount lifecycle hook
    */
-  public componentWillMount(): void {
+  public UNSAFE_componentWillMount(): void {
     this.checkForImmediateInvocations();
   }
 
diff --git a/src/controls/taxonomyPicker/termActions/TermActionsControl.tsx b/src/controls/taxonomyPicker/termActions/TermActionsControl.tsx
@@ -24,7 +24,7 @@ export default class TermActionsControl extends React.Component<ITermActionsCont
   /**
    * componentWillMount lifecycle hook
    */
-  public componentWillMount(): void {
+  public UNSAFE_componentWillMount(): void {
     this.getAvailableActions();
   }
 
diff --git a/src/controls/treeView/ButtonTreeItemAction.tsx b/src/controls/treeView/ButtonTreeItemAction.tsx
@@ -12,7 +12,7 @@ export default class ButtonTreeItemAction extends React.Component<IConcreteTreeI
   /**
    * componentWillMount lifecycle hook
    */
-  public componentWillMount(): void {
+  public UNSAFE_componentWillMount(): void {
     this.checkForImmediateInvocations();
   }
 
diff --git a/src/controls/treeView/DropdownTreeItemAction.tsx b/src/controls/treeView/DropdownTreeItemAction.tsx
@@ -13,7 +13,7 @@ export class DropdownTreeItemAction extends React.Component<IConcreteTreeItemAct
   /**
    * componentWillMount lifecycle hook
    */
-  public componentWillMount(): void {
+  public UNSAFE_componentWillMount(): void {
     this.checkForImmediateInvocations();
   }
 
diff --git a/src/controls/treeView/TreeItem.tsx b/src/controls/treeView/TreeItem.tsx
@@ -144,7 +144,7 @@ export default class TreeItem extends React.Component<ITreeItemProps, ITreeItemS
    * @param nextProps
    * @param nextContext
    */
-  public componentWillReceiveProps(nextProps: ITreeItemProps): void {
+  public UNSAFE_componentWillReceiveProps(nextProps: ITreeItemProps): void {
     const {
       selectionMode,
       nodesToExpand,
diff --git a/src/controls/treeView/TreeItemActionsControl.tsx b/src/controls/treeView/TreeItemActionsControl.tsx
@@ -26,7 +26,7 @@ export default class TreeItemActionsControl extends React.Component<ITreeItemAct
   /**
    * componentWillMount lifecycle hook
    */
-  public componentWillMount(): void {
+  public UNSAFE_componentWillMount(): void {
     this.getAvailableActions();
   }
 
diff --git a/src/controls/treeView/TreeView.tsx b/src/controls/treeView/TreeView.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ThemeContext } from '@fluentui/react-theme-provider/lib/ThemeContext';
 import { Theme } from '@fluentui/react-theme-provider/lib/types';
-import { Json } from 'adaptive-expressions/lib/builtinFunctions';
 import uniqBy from 'lodash/uniqBy';
 import * as telemetry from '../../common/telemetry';
 import { getFluentUIThemeOrDefault } from '../../common/utilities/ThemeUtility';
@@ -56,7 +55,7 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
           result = key;
           return true;
         }
-        let temp = this.pathTo(children, target);
+        const temp = this.pathTo(children, target);
         if (temp) {
           if (!alreadyExistInNodesToExpand) {
             this.nodesToExpand.push(key);
@@ -70,7 +69,7 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
   }
 
   private getSelectedItems(treeItems: ITreeItem[], selectedKeys: string[], selectedChildren: boolean): ITreeItem[] {
-    let selectedItems: ITreeItem[] = [];
+    const selectedItems: ITreeItem[] = [];
 
     treeItems.forEach(item => {
       if (selectedKeys.indexOf(item.key) !== -1 && item.selectable !== false && !item.disabled) {
@@ -133,7 +132,7 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
    * Unselects all child nodes of selected parent.
    */
   private unSelectChildren(item, unselectArray: string[]): void {
-    const tempItem: any = item;
+    const tempItem: any = item; // eslint-disable-line @typescript-eslint/no-explicit-any
 
     if (tempItem.children) {
       tempItem.children.forEach(element => {
@@ -181,7 +180,7 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
     }
     else {
       // Remove the item from the list of active nodes
-      let unselectArray: string[] = [];
+      const unselectArray: string[] = [];
       unselectArray.push(item.key);
 
       if (this.checkIfChildrenShouldBeSelected(SelectChildrenMode.Unselect)) {
@@ -202,7 +201,7 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
     }
   }
 
-  private checkIfChildrenShouldBeSelected(testMode: SelectChildrenMode) {
+  private checkIfChildrenShouldBeSelected(testMode: SelectChildrenMode): boolean {
     let selectChildrenMode = SelectChildrenMode.None;
     if (this.props.selectChildrenMode) {
       selectChildrenMode = this.props.selectChildrenMode;
@@ -219,7 +218,7 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
     return false;
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     const {
       items,
       defaultSelectedKeys
@@ -232,7 +231,7 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
     }
   }
 
-  public componentWillReceiveProps(nextProps: ITreeViewProps): void {
+  public UNSAFE_componentWillReceiveProps(nextProps: ITreeViewProps): void {
     const {
       items,
       defaultSelectedKeys
@@ -285,6 +284,7 @@ export class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {
                 {
                   items.map((treeNodeItem, index) => (
                     <TreeItem
+                      key={treeNodeItem.key}
                       treeItem={treeNodeItem}
                       leftOffset={20}
                       isFirstRender={true}
diff --git a/src/extensions/ootbFields/components/Customizer/OotbFields.tsx b/src/extensions/ootbFields/components/Customizer/OotbFields.tsx
@@ -30,7 +30,7 @@ export default class OotbFields extends React.Component<IOotbFieldsProps, IOotbF
     this.state = {};
   }
 
-  public componentWillMount() {
+  public UNSAFE_componentWillMount() {
     FieldRendererHelper.getFieldRenderer(this.props.value, {
       className: this.props.className,
       cssProps: this.props.cssProps

Original file line number	Diff line number	Diff line change
`@@ -79,7 +79,7 @@ export class ChartControl extends React.Component<IChartControlProps, IChartCont`
`79`	`79`	`*`
`80`	`80`	`* @param nextProps`
`81`	`81`	`*/`
`82`		`- public componentWillReceiveProps(nextProps: IChartControlProps): void {`
	`82`	`+ public UNSAFE_componentWillReceiveProps(nextProps: IChartControlProps): void {`
`83`	`83`	`if (nextProps.datapromise !== this.props.datapromise) {`
`84`	`84`	`this.setState({`
`85`	`85`	`isLoading: false`
Original file line number	Diff line number	Diff line change
`@@ -115,7 +115,7 @@ export class FieldUserRenderer extends React.Component<IFieldUserRendererProps,`
`115`	`115`	`};`
`116`	`116`	`}`
`117`	`117`
`118`		`- public componentWillReceiveProps(nextProps: IFieldUserRendererProps) {`
	`118`	`+ public UNSAFE_componentWillReceiveProps(nextProps: IFieldUserRendererProps) {`
`119`	`119`	`const currentPrincipals = this.props.users ? this.props.users.map(u => u.id) : [];`
`120`	`120`	`const newPrincipals = nextProps.users ? nextProps.users.map(u => u.id) : [];`
`121`	`121`
Original file line number	Diff line number	Diff line change
`@@ -103,7 +103,7 @@ export class FilePicker extends React.Component<`
`103`	`103`	`*`
`104`	`104`	`* @param nextProps`
`105`	`105`	`*/`
`106`		`- public componentWillReceiveProps(nextProps: IFilePickerProps): void {`
	`106`	`+ public UNSAFE_componentWillReceiveProps(nextProps: IFilePickerProps): void {`
`107`	`107`	`if (nextProps.isPanelOpen \|\| nextProps.isPanelOpen !== this.props.isPanelOpen) {`
`108`	`108`	`this.setState({`
`109`	`109`	`panelOpen: nextProps.isPanelOpen`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export class FolderPicker extends React.Component<IFolderPickerProps, IFolderPic`
`27`	`27`	`};`
`28`	`28`	`}`
`29`	`29`
`30`		`- public componentWillReceiveProps(nextProps: IFolderPickerProps) {`
	`30`	`+ public UNSAFE_componentWillReceiveProps(nextProps: IFolderPickerProps) {`
`31`	`31`
`32`	`32`	`this.setState({`
`33`	`33`	`selectedFolder: nextProps.defaultFolder,`
Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,7 @@ export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPic`
`80`	`80`	`}`
`81`	`81`	`}`
`82`	`82`
`83`		`- public async componentWillReceiveProps(nextProps: IComboBoxListItemPickerProps): Promise<void> {`
	`83`	`+ public async UNSAFE_componentWillReceiveProps(nextProps: IComboBoxListItemPickerProps): Promise<void> {`
`84`	`84`	`if (nextProps.listId !== this.props.listId) {`
`85`	`85`	`this.setState({`
`86`	`86`	`selectedItems: [],`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI`
`37`	`37`	`this.loadField(this.props);`
`38`	`38`	`}`
`39`	`39`
`40`		`- public componentWillReceiveProps(nextProps: IListItemPickerProps) {`
	`40`	`+ public UNSAFE_componentWillReceiveProps(nextProps: IListItemPickerProps) {`
`41`	`41`	`let newSelectedItems: any[] \| undefined;`
`42`	`42`	`if (this.props.listId !== nextProps.listId) {`
`43`	`43`	`newSelectedItems = [];`