jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change RatingButton to use Popover2

Browse Source 
Summary:
The original Popover component doesn't work when the popover goes out of bounds of the current container, and overflow is not visible, which is the case in the title bar.

This changes it to use a new absolutely positioned one instead.

Reviewed By: mweststrate

Differential Revision: D22724110

fbshipit-source-id: f41b6d154ccb66a94b63533fe9c30d2a2c49f1db
This commit is contained in:
John Knox
2020-07-24 07:11:49 -07:00
committed by Facebook GitHub Bot
parent d7a6356fb6
commit 9ada27526c
2 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
desktop/app/src/chrome/RatingButton.tsx
View File

@@ -7,10 +7,9 @@
* @format * @format
*/ */
import React, {Component, ReactElement} from 'react'; import React, {Component, ReactElement, RefObject} from 'react';
import { import {
Glyph, Glyph,
Popover,
FlexColumn, FlexColumn,
FlexRow, FlexRow,
Button, Button,
@@ -18,6 +17,7 @@ import {
styled, styled,
Input, Input,
} from 'flipper'; } from 'flipper';
import Popover from '../ui/components/Popover2';
import GK from '../fb-stubs/GK'; import GK from '../fb-stubs/GK';
import * as UserFeedback from '../fb-stubs/UserFeedback'; import * as UserFeedback from '../fb-stubs/UserFeedback';
import {FeedbackPrompt} from '../fb-stubs/UserFeedback'; import {FeedbackPrompt} from '../fb-stubs/UserFeedback';
@@ -295,6 +295,8 @@ class RatingButton extends Component<PropsFromState, State> {
hasTriggered: false, hasTriggered: false,
}; };
glyphRef: RefObject<HTMLDivElement> = React.createRef();
constructor(props: PropsFromState) { constructor(props: PropsFromState) {
super(props); super(props);
if (GK.get('flipper_rating')) { if (GK.get('flipper_rating')) {
@@ -351,7 +353,11 @@ class RatingButton extends Component<PropsFromState, State> {
} }
return ( return (
<div style={{position: 'relative'}}> <div style={{position: 'relative'}}>
<div onClick={this.onClick.bind(this)}> <div
role="button"
tabIndex={0}
onClick={this.onClick.bind(this)}
ref={this.glyphRef}>
<Glyph <Glyph
name="star" name="star"
color="grey" color="grey"
@@ -359,20 +365,17 @@ class RatingButton extends Component<PropsFromState, State> {
/> />
</div> </div>
{this.state.isShown ? ( {this.state.isShown ? (
<Popover <Popover id="rating-button" targetRef={this.glyphRef}>
onDismiss={() => {}} <FeedbackComponent
children={ submitRating={this.submitRating.bind(this)}
<FeedbackComponent submitComment={this.submitComment.bind(this)}
submitRating={this.submitRating.bind(this)} close={() => {
submitComment={this.submitComment.bind(this)} this.setState({isShown: false});
close={() => { }}
this.setState({isShown: false}); dismiss={this.onClick.bind(this)}
}} promptData={promptData}
dismiss={this.onClick.bind(this)} />
promptData={promptData} </Popover>
/>
}
/>
) : null} ) : null}
</div> </div>
); );

33
desktop/app/src/init.tsx
View File

@@ -35,6 +35,7 @@ import {CacheProvider} from '@emotion/core';
import {enableMapSet} from 'immer'; import {enableMapSet} from 'immer';
import os from 'os'; import os from 'os';
import QuickPerformanceLogger, {FLIPPER_QPL_EVENTS} from './fb-stubs/QPL'; import QuickPerformanceLogger, {FLIPPER_QPL_EVENTS} from './fb-stubs/QPL';
import {PopoverProvider} from './ui/components/PopoverProvider';
if (process.env.NODE_ENV === 'development' && os.platform() === 'darwin') { if (process.env.NODE_ENV === 'development' && os.platform() === 'darwin') {
// By default Node.JS has its internal certificate storage and doesn't use // By default Node.JS has its internal certificate storage and doesn't use
@@ -65,21 +66,23 @@ const AppFrame = () => {
return ( return (
<TooltipProvider> <TooltipProvider>
<ContextMenuProvider> <PopoverProvider>
<Provider store={store}> <ContextMenuProvider>
<CacheProvider value={cache}> <Provider store={store}>
{warnEmployee ? ( <CacheProvider value={cache}>
<WarningEmployee {warnEmployee ? (
onClick={() => { <WarningEmployee
setWarnEmployee(false); onClick={() => {
}} setWarnEmployee(false);
/> }}
) : ( />
<App logger={logger} /> ) : (
)} <App logger={logger} />
</CacheProvider> )}
</Provider> </CacheProvider>
</ContextMenuProvider> </Provider>
</ContextMenuProvider>
</PopoverProvider>
</TooltipProvider> </TooltipProvider>
); );
}; };