Feature Add remeasuring on node expanding for verification table.
@@ -29,6 +29,7 @@ export interface VerificationTableProps {
params: Entry[];
fieldsFilter: StatusType[];
status: StatusType;
+ onExpand: () => void;
}
interface VerificationTableState {
@@ -57,9 +58,25 @@ class VerificationTableBase extends Component<VerificationTableProps, Verificati
} : root;
}
- tooglerClick(root: TableNode) {
- root.isExpanded = !root.isExpanded;
- this.setState(this.state);
+ tooglerClick(targetNode: TableNode) {
+ this.setState({
+ ...this.state,
+ nodes: this.state.nodes.map(rootNode => this.findNode(rootNode, targetNode))
+ });
+ }
+
+ findNode(node: TableNode, targetNode: TableNode): TableNode {
+ if (node === targetNode) {
+ return {
+ ...targetNode,
+ isExpanded: !targetNode.isExpanded
+ };
+ }
+
+ return {
+ ...node,
+ subEntries: node.subEntries && node.subEntries.map(subNode => this.findNode(subNode, targetNode))
+ };
}
setExpandStatus(isCollapsed: boolean) {
@@ -79,6 +96,13 @@ class VerificationTableBase extends Component<VerificationTableProps, Verificati
}
}
+ componentDidUpdate(prevProps: VerificationTableProps, prevState: VerificationTableState) {
+ // handle expand state changing to remeasure card size
+ if (this.props.params === prevProps.params && this.state.nodes !== prevState.nodes) {
+ this.props.onExpand();
+ }
+ }
+
render({ fieldsFilter, status }: VerificationTableProps, { nodes }: VerificationTableState) {
const rootClass = createSelector("ver-table", status);
