mol-plugin-ui: use componentDidUpdated instead of getDerivedStateFromProps where appropriate

src/mol-plugin-ui/controls/action-menu.tsx

@@ -139,7 +139,7 @@ type SectionProps = {
     noOffset?: boolean,
     noAccent?: boolean
 }
-type SectionState = { items: ActionMenu.Items, current: ActionMenu.Item | undefined, isExpanded: boolean, hasCurrent: boolean, header?: ActionMenu.Header }
+type SectionState = { isExpanded: boolean, hasCurrent: boolean, header?: ActionMenu.Header }
 
 class Section extends React.PureComponent<SectionProps, SectionState> {
     static createState(props: SectionProps): SectionState {
@@ -152,8 +152,6 @@ class Section extends React.PureComponent<SectionProps, SectionState> {
                 : (!!props.current && !!ActionMenu.findItem(props.items, props.current.value)) || ActionMenu.hasSelectedItem(props.items);
 
         return {
-            items: props.items,
-            current: props.current,
             header,
             hasCurrent,
             isExpanded: hasCurrent || !!header?.initiallyExpanded
@@ -167,9 +165,10 @@ class Section extends React.PureComponent<SectionProps, SectionState> {
         e.currentTarget.blur();
     }
 
-    static getDerivedStateFromProps(props: SectionProps, state: SectionState) {
-        if (props.items === state.items && props.current === state.current) return null;
-        return Section.createState(props);
+    componentDidUpdate(prevProps: SectionProps) {
+        if (this.props.items !== prevProps.items || this.props.current !== prevProps.current) {
+            this.setState(Section.createState(this.props));
+        }
     }
 
     selectAll = () => {

src/mol-plugin-ui/controls/parameters.tsx

@@ -1011,8 +1011,9 @@ export class MappedControl extends React.PureComponent<ParamProps<PD.Mapped<any>
     }
 }
 
-class ObjectListEditor extends React.PureComponent<{ params: PD.Params, value: object, isUpdate?: boolean, apply: (value: any) => void, isDisabled?: boolean }, { params: PD.Params, value: object, current: object }> {
-    state = { params: {}, value: void 0 as any, current: void 0 as any };
+type ObjectListEditorProps = { params: PD.Params, value: object, isUpdate?: boolean, apply: (value: any) => void, isDisabled?: boolean }
+class ObjectListEditor extends React.PureComponent<ObjectListEditorProps, { current: object }> {
+    state = { current: void 0 as any };
 
     onChangeParam: ParamOnChange = e => {
         this.setState({ current: { ...this.state.current, [e.name]: e.value } });
@@ -1022,13 +1023,10 @@ class ObjectListEditor extends React.PureComponent<{ params: PD.Params, value: o
         this.props.apply(this.state.current);
     }
 
-    static getDerivedStateFromProps(props: _Props<ObjectListEditor>, state: _State<ObjectListEditor>): _State<ObjectListEditor> | null {
-        if (props.params === state.params && props.value === state.value) return null;
-        return {
-            params: props.params,
-            value: props.value,
-            current: props.value
-        };
+    componentDidUpdate(prevProps: ObjectListEditorProps) {
+        if (this.props.params !== prevProps.params || this.props.value !== prevProps.value) {
+            this.setState({ current: this.props.value });
+        }
     }
 
     render() {
@@ -1041,7 +1039,8 @@ class ObjectListEditor extends React.PureComponent<{ params: PD.Params, value: o
     }
 }
 
-class ObjectListItem extends React.PureComponent<{ param: PD.ObjectList, value: object, index: number, actions: ObjectListControl['actions'], isDisabled?: boolean }, { isExpanded: boolean }> {
+type ObjectListItemProps = { param: PD.ObjectList, value: object, index: number, actions: ObjectListControl['actions'], isDisabled?: boolean }
+class ObjectListItem extends React.PureComponent<ObjectListItemProps, { isExpanded: boolean }> {
     state = { isExpanded: false };
 
     update = (v: object) => {
@@ -1067,15 +1066,6 @@ class ObjectListItem extends React.PureComponent<{ param: PD.ObjectList, value:
         e.currentTarget.blur();
     };
 
-    static getDerivedStateFromProps(props: _Props<ObjectListEditor>, state: _State<ObjectListEditor>): _State<ObjectListEditor> | null {
-        if (props.params === state.params && props.value === state.value) return null;
-        return {
-            params: props.params,
-            value: props.value,
-            current: props.value
-        };
-    }
-
     render() {
         return <>
             <div className='msp-param-object-list-item'>

src/mol-plugin-ui/state/apply-action.tsx

@@ -54,9 +54,10 @@ class ApplyActionControl extends TransformControlBase<ApplyActionControl.Props,
     state = { plugin: this.plugin, ref: this.props.nodeRef, version: this.props.state.transforms.get(this.props.nodeRef).version, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false, isCollapsed: this.props.initiallyCollapsed };
 
     static getDerivedStateFromProps(props: ApplyActionControl.Props, state: ApplyActionControl.ComponentState) {
-        if (props.nodeRef === state.ref) return null;
         const version = props.state.transforms.get(props.nodeRef).version;
-        if (version === state.version) return null;
+        if (props.nodeRef === state.ref && version === state.version) {
+            return null;
+        }
 
         const source = props.state.cells.get(props.nodeRef)!.obj!;
         const params = props.action.definition.params

src/mol-plugin-ui/state/update-transform.tsx

@@ -24,7 +24,6 @@ namespace UpdateTransformControl {
     }
 
     export interface ComponentState extends TransformControlBase.ComponentState {
-        transform: StateTransform
     }
 }
 
@@ -84,19 +83,18 @@ class UpdateTransformControl extends TransformControlBase<UpdateTransformControl
 
     private _getInfo = memoizeLatest((t: StateTransform) => StateTransformParameters.infoFromTransform(this.plugin, this.props.state, t));
 
-    state: UpdateTransformControl.ComponentState = { transform: this.props.transform, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false, isCollapsed: this.props.initiallyCollapsed };
-
-    static getDerivedStateFromProps(props: UpdateTransformControl.Props, state: UpdateTransformControl.ComponentState) {
-        if (props.transform === state.transform) return null;
-        const cell = props.state.cells.get(props.transform.ref)!;
-        const newState: Partial<UpdateTransformControl.ComponentState> = {
-            transform: props.transform,
-            params: (cell.params && cell.params.values) || { },
-            isInitial: true,
-            error: void 0,
-            simpleOnly: state.simpleOnly
-        };
-        return newState;
+    state: UpdateTransformControl.ComponentState = { error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false, isCollapsed: this.props.initiallyCollapsed };
+
+    componentDidUpdate(prevProps: UpdateTransformControl.Props) {
+        if (this.props.transform !== prevProps.transform) {
+            const cell = this.props.state.cells.get(this.props.transform.ref)!;
+            this.setState({
+                params: cell.params?.values || { },
+                isInitial: true,
+                error: void 0,
+                simpleOnly: this.state.simpleOnly
+            });
+        }
     }
 }
 

src/mol-plugin-ui/structure/components.tsx

@@ -15,7 +15,6 @@ import { ActionMenu } from '../controls/action-menu';
 import { ExpandGroup, IconButton, ToggleButton, Button } from '../controls/common';
 import { ParameterControls } from '../controls/parameters';
 import { UpdateTransformControl } from '../state/update-transform';
-import { PluginContext } from '../../mol-plugin/context';
 import { getStructureThemeTypes } from '../../mol-plugin-state/helpers/structure-representation-params';
 import { StructureHierarchyManager } from '../../mol-plugin-state/manager/structure/hierarchy';
 import { GenericEntryListControls } from './generic';
@@ -131,8 +130,6 @@ class ComponentEditorControls extends PurePluginUIComponent<{}, ComponentEditorC
 }
 
 interface AddComponentControlsState {
-    plugin: PluginContext,
-    structures: ReadonlyArray<StructureRef>,
     params: ParamDefinition.Params,
     values: StructureComponentManager.AddParams
 }
@@ -143,23 +140,24 @@ interface AddComponentControlsProps {
 }
 
 class AddComponentControls extends PurePluginUIComponent<AddComponentControlsProps, AddComponentControlsState> {
-    static createState(plugin: PluginContext, structures: ReadonlyArray<StructureRef>): AddComponentControlsState {
-        const params = StructureComponentManager.getAddParams(plugin);
-        return { plugin, structures, params, values: ParamDefinition.getDefaultValues(params) };
+    createState(): AddComponentControlsState {
+        const params = StructureComponentManager.getAddParams(this.plugin);
+        return { params, values: ParamDefinition.getDefaultValues(params) };
     }
 
-    state = AddComponentControls.createState(this.plugin, this.props.structures);
+    state = this.createState();
 
     apply = () => {
-        this.plugin.managers.structure.component.add(this.state.values, this.state.structures);
+        this.plugin.managers.structure.component.add(this.state.values, this.props.structures);
         this.props.onApply();
     }
 
     paramsChanged = (values: any) => this.setState({ values })
 
-    static getDerivedStateFromProps(props: AddComponentControlsProps, state: AddComponentControlsState) {
-        if (props.structures === state.structures) return null;
-        return AddComponentControls.createState(state.plugin, props.structures)
+    componentDidUpdate(prevProps: AddComponentControlsProps) {
+        if (this.props.structures !== prevProps.structures) {
+            this.setState(this.createState());
+        }
     }
 
     render() {