diff --git a/src/mol-plugin-ui/controls/action-menu.tsx b/src/mol-plugin-ui/controls/action-menu.tsx
index db602197a123e604f52ce09a42ebbc01e169b75b..1df1ab8400fc5e6b404af2a7d5a7a8354f5ce1f2 100644
--- a/src/mol-plugin-ui/controls/action-menu.tsx
+++ b/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 = () => {
diff --git a/src/mol-plugin-ui/controls/parameters.tsx b/src/mol-plugin-ui/controls/parameters.tsx
index d03b7449074a0fe759611d2c0663e4da3f2469b2..dddf51b97792a1e0b6e0ab1711755cf9102ee7db 100644
--- a/src/mol-plugin-ui/controls/parameters.tsx
+++ b/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'>
diff --git a/src/mol-plugin-ui/state/apply-action.tsx b/src/mol-plugin-ui/state/apply-action.tsx
index ede50625e46aa690e58807bce2ef5ced8253dfdd..6bdf1ab406c412d53fd6a497d984e566b94fa512 100644
--- a/src/mol-plugin-ui/state/apply-action.tsx
+++ b/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
diff --git a/src/mol-plugin-ui/state/update-transform.tsx b/src/mol-plugin-ui/state/update-transform.tsx
index 165abb4a6b802965b35fca5eae1d5839346f60d6..5edf852ed7b0a515bd01114400e9f102809a2438 100644
--- a/src/mol-plugin-ui/state/update-transform.tsx
+++ b/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
+ });
+ }
}
}
diff --git a/src/mol-plugin-ui/structure/components.tsx b/src/mol-plugin-ui/structure/components.tsx
index 2c2e110bdea8d12a7b64ec40db1910cb39273f5b..a0e34263521094ee3ff7e4131c55aafe6930f5ef 100644
--- a/src/mol-plugin-ui/structure/components.tsx
+++ b/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() {