diff options
| author | Oskar Nyberg <oskar@mullvad.net> | 2023-04-19 14:06:50 +0200 |
|---|---|---|
| committer | Oskar Nyberg <oskar@mullvad.net> | 2023-04-19 14:06:50 +0200 |
| commit | 6ba4724c1019bd377a47d5543ab4bfa636e4ba03 (patch) | |
| tree | f78d9469556d5c8e1f206acfd5f30d6a0a9fe475 | |
| parent | 07d38405c12e5c224efdcae47089665e7f8c2335 (diff) | |
| download | mullvadvpn-6ba4724c1019bd377a47d5543ab4bfa636e4ba03.tar.xz mullvadvpn-6ba4724c1019bd377a47d5543ab4bfa636e4ba03.zip | |
Enable pointer events on the new view when transitioning
| -rw-r--r-- | gui/src/renderer/components/TransitionContainer.tsx | 16 |
1 files changed, 6 insertions, 10 deletions
diff --git a/gui/src/renderer/components/TransitionContainer.tsx b/gui/src/renderer/components/TransitionContainer.tsx index 53f149ba6a..56315d5dcb 100644 --- a/gui/src/renderer/components/TransitionContainer.tsx +++ b/gui/src/renderer/components/TransitionContainer.tsx @@ -39,17 +39,11 @@ interface IState { nextItemTransition?: Partial<IItemStyle>; } -export const StyledTransitionContainer = styled.div( - {}, - (props: { disableUserInteraction: boolean }) => ({ - flex: 1, - pointerEvents: props.disableUserInteraction ? 'none' : undefined, - }), -); +export const StyledTransitionContainer = styled.div({ flex: 1 }); export const StyledTransitionContent = styled.div.attrs({ 'data-testid': 'transition-content' })( {}, - (props: { transition?: IItemStyle }) => { + (props: { transition?: IItemStyle; disableUserInteraction?: boolean }) => { const x = `${props.transition?.x ?? 0}%`; const y = `${props.transition?.y ?? 0}%`; const duration = props.transition?.duration ?? 450; @@ -66,6 +60,7 @@ export const StyledTransitionContent = styled.div.attrs({ 'data-testid': 'transi willChange: 'transform', transform: `translate3d(${x}, ${y}, 0)`, transition: `transform ${duration}ms ease-in-out`, + pointerEvents: props.disableUserInteraction ? 'none' : undefined, }; }, ); @@ -132,13 +127,14 @@ export default class TransitionContainer extends React.Component<IProps, IState> const willExit = this.state.queuedItem !== undefined || this.state.nextItem !== undefined; return ( - <StyledTransitionContainer disableUserInteraction={willExit}> + <StyledTransitionContainer> {this.state.currentItem && ( <WillExit key={this.state.currentItem.view.props.routePath} value={willExit}> <StyledTransitionContent ref={this.setCurrentContentRef} transition={this.state.currentItemStyle} - onTransitionEnd={this.onTransitionEnd}> + onTransitionEnd={this.onTransitionEnd} + disableUserInteraction={willExit}> {this.state.currentItem.view} </StyledTransitionContent> </WillExit> |