diff --git a/gui/src/renderer/components/Accordion.tsx b/gui/src/renderer/components/Accordion.tsx index 1c8ea9f24f4a..1a26d765cd14 100644 --- a/gui/src/renderer/components/Accordion.tsx +++ b/gui/src/renderer/components/Accordion.tsx @@ -5,8 +5,8 @@ interface IProps { expanded: boolean; animationDuration: number; children?: React.ReactNode; - onWillExpand?: (nextHeight: number) => void; - onWillCollapse?: () => void; + onWillExpand?: (contentHeight: number) => void; + onTransitionEnd?: () => void; } interface IState { @@ -81,7 +81,6 @@ export default class Accordion extends React.Component { private collapse() { // First change height to height in px since it's not possible to transition to/from auto this.setState({ containerHeight: this.getContentHeightWithUnit() }, () => { - this.props.onWillCollapse?.(); // Make sure new height has been applied // eslint-disable-next-line @typescript-eslint/no-unused-expressions this.containerRef.current?.offsetHeight; @@ -98,13 +97,14 @@ export default class Accordion extends React.Component { } private onWillExpand() { - const nextHeight = this.getContentHeight(); - if (nextHeight) { - this.props.onWillExpand?.(nextHeight); + const contentHeight = this.getContentHeight(); + if (contentHeight) { + this.props.onWillExpand?.(contentHeight); } } private onTransitionEnd = () => { + this.props.onTransitionEnd?.(); if (this.props.expanded) { // Height auto enables the container to grow if the content changes size this.setState({ containerHeight: 'auto' }); diff --git a/gui/src/renderer/components/BridgeLocations.tsx b/gui/src/renderer/components/BridgeLocations.tsx index 8b7db239dea8..802797eb7769 100644 --- a/gui/src/renderer/components/BridgeLocations.tsx +++ b/gui/src/renderer/components/BridgeLocations.tsx @@ -22,7 +22,7 @@ interface IBridgeLocationsProps { selectedElementRef?: React.Ref; onSelect?: (value: LocationSelection) => void; onWillExpand?: (locationRect: DOMRect, expandedContentHeight: number) => void; - onWillCollapse?: () => void; + onTransitionEnd?: () => void; } const BridgeLocations = React.forwardRef(function BridgeLocationsT( @@ -54,7 +54,7 @@ const BridgeLocations = React.forwardRef(function BridgeLocationsT( ); diff --git a/gui/src/renderer/components/CityRow.tsx b/gui/src/renderer/components/CityRow.tsx index 7fc6e9a66c55..c015bd5f762c 100644 --- a/gui/src/renderer/components/CityRow.tsx +++ b/gui/src/renderer/components/CityRow.tsx @@ -20,7 +20,7 @@ interface IProps { onSelect?: (location: RelayLocation) => void; onExpand?: (location: RelayLocation, value: boolean) => void; onWillExpand?: (locationRect: DOMRect, expandedContentHeight: number) => void; - onWillCollapse?: () => void; + onTransitionEnd?: () => void; children?: RelayRowElement | RelayRowElement[]; } @@ -93,7 +93,7 @@ export default class CityRow extends Component { {this.props.children} diff --git a/gui/src/renderer/components/CountryRow.tsx b/gui/src/renderer/components/CountryRow.tsx index 16a2dbc36731..5218afdf73d6 100644 --- a/gui/src/renderer/components/CountryRow.tsx +++ b/gui/src/renderer/components/CountryRow.tsx @@ -19,7 +19,7 @@ interface IProps { onSelect?: (location: RelayLocation) => void; onExpand?: (location: RelayLocation, value: boolean) => void; onWillExpand?: (locationRect: DOMRect, expandedContentHeight: number) => void; - onWillCollapse?: () => void; + onTransitionEnd?: () => void; children?: CityRowElement | CityRowElement[]; } @@ -102,7 +102,7 @@ export default class CountryRow extends Component { {this.props.children} diff --git a/gui/src/renderer/components/ExitLocations.tsx b/gui/src/renderer/components/ExitLocations.tsx index b4c2d2803b89..e4174a0e7cb0 100644 --- a/gui/src/renderer/components/ExitLocations.tsx +++ b/gui/src/renderer/components/ExitLocations.tsx @@ -14,7 +14,7 @@ interface IExitLocationsProps { selectedElementRef?: React.Ref; onSelect?: (value: LocationSelection) => void; onWillExpand?: (locationRect: DOMRect, expandedContentHeight: number) => void; - onWillCollapse?: () => void; + onTransitionEnd?: () => void; } const ExitLocations = React.forwardRef(function ExitLocationsT( @@ -35,7 +35,7 @@ const ExitLocations = React.forwardRef(function ExitLocationsT( ); diff --git a/gui/src/renderer/components/LocationList.tsx b/gui/src/renderer/components/LocationList.tsx index 6d80e3047799..efd8969e4faa 100644 --- a/gui/src/renderer/components/LocationList.tsx +++ b/gui/src/renderer/components/LocationList.tsx @@ -247,7 +247,7 @@ interface IRelayLocationsProps { onSelect?: (location: RelayLocation) => void; onExpand?: (location: RelayLocation, expand: boolean) => void; onWillExpand?: (locationRect: DOMRect, expandedContentHeight: number) => void; - onWillCollapse?: () => void; + onTransitionEnd?: () => void; } interface ICommonCellProps { @@ -272,7 +272,7 @@ export class RelayLocations extends Component { onSelect={this.handleSelection} onExpand={this.handleExpand} onWillExpand={this.props.onWillExpand} - onWillCollapse={this.props.onWillCollapse} + onTransitionEnd={this.props.onTransitionEnd} {...this.getCommonCellProps(countryLocation)}> {relayCountry.cities.map((relayCity) => { const cityLocation: RelayLocation = { @@ -288,7 +288,7 @@ export class RelayLocations extends Component { onSelect={this.handleSelection} onExpand={this.handleExpand} onWillExpand={this.props.onWillExpand} - onWillCollapse={this.props.onWillCollapse} + onTransitionEnd={this.props.onTransitionEnd} {...this.getCommonCellProps(cityLocation)}> {relayCity.relays.map((relay) => { const relayLocation: RelayLocation = { diff --git a/gui/src/renderer/components/SelectLocation.tsx b/gui/src/renderer/components/SelectLocation.tsx index 8487887e6e52..de2f98128abf 100644 --- a/gui/src/renderer/components/SelectLocation.tsx +++ b/gui/src/renderer/components/SelectLocation.tsx @@ -140,7 +140,7 @@ export default class SelectLocation extends Component { selectedElementRef={this.selectedExitLocationRef} onSelect={this.onSelectExitLocation} onWillExpand={this.onWillExpand} - onWillCollapse={this.spacePreAllocationViewRef.current?.reset} + onTransitionEnd={this.spacePreAllocationViewRef.current?.reset} /> ) : ( { selectedElementRef={this.selectedBridgeLocationRef} onSelect={this.onSelectBridgeLocation} onWillExpand={this.onWillExpand} - onWillCollapse={this.spacePreAllocationViewRef.current?.reset} + onTransitionEnd={this.spacePreAllocationViewRef.current?.reset} /> )} @@ -239,12 +239,11 @@ interface ISpacePreAllocationView { } class SpacePreAllocationView extends Component { - ref = React.createRef(); + private ref = React.createRef(); - public allocate(additionalHeight: number) { - this.reset(); + public allocate(height: number) { if (this.ref.current) { - this.minHeight = this.ref.current.offsetHeight + additionalHeight + 'px'; + this.minHeight = this.ref.current.offsetHeight + height + 'px'; } }