Use transitionEnd for resetting min-height

mullvad · May 7, 2020 · 22a8931 · 22a8931
1 parent 8499452
commit 22a8931
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 23 deletions.
diff --git 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<IProps, IState> {
   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<IProps, IState> {
   }
 
   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
@@ -22,7 +22,7 @@ interface IBridgeLocationsProps {
   selectedElementRef?: React.Ref<React.ReactInstance>;
   onSelect?: (value: LocationSelection<SpecialBridgeLocationType>) => 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(
       <RelayLocations
         source={props.source}
         onWillExpand={props.onWillExpand}
-        onWillCollapse={props.onWillCollapse}
+        onTransitionEnd={props.onTransitionEnd}
       />
     </LocationList>
   );

diff --git 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<IProps> {
           <Accordion
             expanded={this.props.expanded}
             onWillExpand={this.onWillExpand}
-            onWillCollapse={this.props.onWillCollapse}
+            onTransitionEnd={this.props.onTransitionEnd}
             animationDuration={150}>
             {this.props.children}
           </Accordion>

diff --git 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<IProps> {
           <Accordion
             expanded={this.props.expanded}
             onWillExpand={this.onWillExpand}
-            onWillCollapse={this.props.onWillCollapse}
+            onTransitionEnd={this.props.onTransitionEnd}
             animationDuration={150}>
             {this.props.children}
           </Accordion>

diff --git a/gui/src/renderer/components/ExitLocations.tsx b/gui/src/renderer/components/ExitLocations.tsx
@@ -14,7 +14,7 @@ interface IExitLocationsProps {
   selectedElementRef?: React.Ref<React.ReactInstance>;
   onSelect?: (value: LocationSelection<never>) => 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(
       <RelayLocations
         source={props.source}
         onWillExpand={props.onWillExpand}
-        onWillCollapse={props.onWillCollapse}
+        onTransitionEnd={props.onTransitionEnd}
       />
     </LocationList>
   );

diff --git 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<T> {
@@ -272,7 +272,7 @@ export class RelayLocations extends Component<IRelayLocationsProps> {
               onSelect={this.handleSelection}
               onExpand={this.handleExpand}
               onWillExpand={this.props.onWillExpand}
-              onWillCollapse={this.props.onWillCollapse}
+              onTransitionEnd={this.props.onTransitionEnd}
               {...this.getCommonCellProps<CountryRow>(countryLocation)}>
               {relayCountry.cities.map((relayCity) => {
                 const cityLocation: RelayLocation = {
@@ -288,7 +288,7 @@ export class RelayLocations extends Component<IRelayLocationsProps> {
                     onSelect={this.handleSelection}
                     onExpand={this.handleExpand}
                     onWillExpand={this.props.onWillExpand}
-                    onWillCollapse={this.props.onWillCollapse}
+                    onTransitionEnd={this.props.onTransitionEnd}
                     {...this.getCommonCellProps<CityRow>(cityLocation)}>
                     {relayCity.relays.map((relay) => {
                       const relayLocation: RelayLocation = {

diff --git a/gui/src/renderer/components/SelectLocation.tsx b/gui/src/renderer/components/SelectLocation.tsx
@@ -140,7 +140,7 @@ export default class SelectLocation extends Component<IProps> {
                           selectedElementRef={this.selectedExitLocationRef}
                           onSelect={this.onSelectExitLocation}
                           onWillExpand={this.onWillExpand}
-                          onWillCollapse={this.spacePreAllocationViewRef.current?.reset}
+                          onTransitionEnd={this.spacePreAllocationViewRef.current?.reset}
                         />
                       ) : (
                         <BridgeLocations
@@ -151,7 +151,7 @@ export default class SelectLocation extends Component<IProps> {
                           selectedElementRef={this.selectedBridgeLocationRef}
                           onSelect={this.onSelectBridgeLocation}
                           onWillExpand={this.onWillExpand}
-                          onWillCollapse={this.spacePreAllocationViewRef.current?.reset}
+                          onTransitionEnd={this.spacePreAllocationViewRef.current?.reset}
                         />
                       )}
                     </View>
@@ -239,12 +239,11 @@ interface ISpacePreAllocationView {
 }
 
 class SpacePreAllocationView extends Component<ISpacePreAllocationView> {
-  ref = React.createRef<HTMLDivElement>();
+  private ref = React.createRef<HTMLDivElement>();
 
-  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';
     }
   }