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

Upgrade to emotion v10

Browse Source 
Summary: React 16 is not compatible with react-emotion 9 (it prints warnings, see also https://github.com/emotion-js/emotion/issues/644). So we should upgrade to 10.

Reviewed By: mweststrate

Differential Revision: D18905889

fbshipit-source-id: c00d2dbbadb1c08544632cb9bfcd63f2b1818a25
This commit is contained in:
Anton Nikolaev
2019-12-11 09:41:32 -08:00
committed by Facebook Github Bot
parent c3dfcbe601
commit c0f902f81a
119 changed files with 977 additions and 1004 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/chrome/BugReporterDialog.tsx
View File

@@ -44,7 +44,7 @@ const Center = styled(Text)({
paddingRight: 20,
});
const Title = styled('div')({
const Title = styled.div({
fontWeight: 500,
marginTop: 8,
marginLeft: 2,
@@ -66,7 +66,7 @@ const DescriptionTextarea = styled(Textarea)({
flexGrow: 1,
});
const SubmitButtonContainer = styled('div')({
const SubmitButtonContainer = styled.div({
marginLeft: 'auto',
});
@@ -118,8 +118,8 @@ class BugReporterDialog extends Component<Props, State> {
error: null,
};
titleRef?: HTMLElement;
descriptionRef?: HTMLElement;
titleRef?: HTMLElement | null;
descriptionRef?: HTMLElement | null;
onDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
this.setState({description: e.target.value});
@@ -184,11 +184,11 @@ class BugReporterDialog extends Component<Props, State> {
);
};
setTitleRef = (ref: HTMLElement) => {
setTitleRef = (ref: HTMLElement | null) => {
this.titleRef = ref;
};
setDescriptionRef = (ref: HTMLElement) => {
setDescriptionRef = (ref: HTMLElement | null) => {
this.descriptionRef = ref;
};
@@ -240,7 +240,7 @@ class BugReporterDialog extends Component<Props, State> {
<TitleInput
placeholder="Title"
value={title}
innerRef={this.setTitleRef}
ref={this.setTitleRef}
onChange={this.onTitleChange}
disabled={submitting}
/>
@@ -248,7 +248,7 @@ class BugReporterDialog extends Component<Props, State> {
<DescriptionTextarea
placeholder="Describe your problem in as much detail as possible."
value={description}
innerRef={this.setDescriptionRef}
ref={this.setDescriptionRef}
onChange={this.onDescriptionChange}
disabled={submitting}
/>

4
src/chrome/DoctorBar.tsx
View File

@@ -114,12 +114,12 @@ export default connect<StateFromProps, DispatchFromProps, {}, Store>(null, {
finishHealthchecks,
})(DoctorBar);
const Container = styled('div')({
const Container = styled.div({
boxShadow: '2px 2px 2px #ccc',
userSelect: 'text',
});
const WarningContainer = styled('div')({
const WarningContainer = styled.div({
backgroundColor: colors.orange,
color: '#fff',
maxHeight: '600px',

10
src/chrome/ErrorBar.tsx
View File

@@ -120,12 +120,12 @@ function ErrorTile({
);
}
const ErrorBarContainer = styled('div')({
const ErrorBarContainer = styled.div({
boxShadow: '2px 2px 2px #ccc',
userSelect: 'text',
});
const DismissAllErrors = styled('div')({
const DismissAllErrors = styled.div({
boxShadow: '2px 2px 2px #ccc',
backgroundColor: colors.cherryDark3,
color: '#fff',
@@ -143,12 +143,12 @@ const DismissAllErrors = styled('div')({
alignItems: 'center',
});
const ErrorDetails = styled('div')({
const ErrorDetails = styled.div({
width: '100%',
marginTop: 4,
});
const ErrorRows = styled('div')({
const ErrorRows = styled.div({
backgroundColor: colors.cherry,
color: '#fff',
maxHeight: '600px',
@@ -160,7 +160,7 @@ const ErrorRows = styled('div')({
},
});
const ErrorRow = styled('div')({
const ErrorRow = styled.div({
padding: '4px 12px',
borderBottom: '1px solid ' + colors.cherryDark3,
verticalAlign: 'middle',

29
src/chrome/ListView.tsx
View File

@@ -66,24 +66,17 @@ const RowComponentContainer = styled(FlexColumn)({
maxHeight: 500,
});
const Padder = styled('div')(
({
paddingLeft,
paddingRight,
paddingBottom,
paddingTop,
}: {
paddingLeft?: number;
paddingRight?: number;
paddingBottom?: number;
paddingTop?: number;
}) => ({
paddingLeft: paddingLeft || 0,
paddingRight: paddingRight || 0,
paddingBottom: paddingBottom || 0,
paddingTop: paddingTop || 0,
}),
);
const Padder = styled.div<{
paddingLeft?: number;
paddingRight?: number;
paddingBottom?: number;
paddingTop?: number;
}>(({paddingLeft, paddingRight, paddingBottom, paddingTop}) => ({
paddingLeft: paddingLeft || 0,
paddingRight: paddingRight || 0,
paddingBottom: paddingBottom || 0,
paddingTop: paddingTop || 0,
}));
type RowComponentProps = {
name: string;

39
src/chrome/MainSidebar.tsx
View File

@@ -51,7 +51,6 @@ import {setActiveSheet} from '../reducers/application';
import UserAccount from './UserAccount';
import {connect} from 'react-redux';
import {BackgroundColorProperty} from 'csstype';
import {StyledOtherComponent} from 'create-emotion-styled';
import SupportRequestFormManager from '../fb-stubs/SupportRequestFormManager';
import SupportRequestDetails from '../fb-stubs/SupportRequestDetails';
import SupportRequestFormV2 from '../fb-stubs/SupportRequestFormV2';
@@ -59,7 +58,7 @@ import SupportRequestFormV2 from '../fb-stubs/SupportRequestFormV2';
type FlipperPlugins = typeof FlipperPlugin[];
type PluginsByCategory = [string, FlipperPlugins][];
const ListItem = styled('div')(({active}: {active?: boolean}) => ({
const ListItem = styled.div<{active?: boolean}>(({active}) => ({
paddingLeft: 10,
display: 'flex',
alignItems: 'center',
@@ -74,7 +73,7 @@ const ListItem = styled('div')(({active}: {active?: boolean}) => ({
},
}));
const SidebarButton = styled(Button)(({small}: {small?: boolean}) => ({
const SidebarButton = styled(Button)<{small?: boolean}>(({small}) => ({
fontWeight: 'bold',
fontSize: small ? 11 : 14,
width: '100%',
@@ -88,22 +87,22 @@ const SidebarButton = styled(Button)(({small}: {small?: boolean}) => ({
whiteSpace: 'nowrap',
}));
const PluginShape = styled(FlexBox)(
({backgroundColor}: {backgroundColor?: BackgroundColorProperty}) => ({
marginRight: 8,
backgroundColor,
borderRadius: 3,
flexShrink: 0,
width: 18,
height: 18,
justifyContent: 'center',
alignItems: 'center',
top: '-1px',
}),
);
const PluginShape = styled(FlexBox)<{
backgroundColor?: BackgroundColorProperty;
}>(({backgroundColor}) => ({
marginRight: 8,
backgroundColor,
borderRadius: 3,
flexShrink: 0,
width: 18,
height: 18,
justifyContent: 'center',
alignItems: 'center',
top: '-1px',
}));
const PluginName = styled(Text)(
(props: {isActive?: boolean; count?: number}) => ({
const PluginName = styled(Text)<{isActive?: boolean; count?: number}>(
props => ({
minWidth: 0,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
@@ -211,9 +210,7 @@ const Spinner = centerInSidebar(LoadingIndicator);
const ErrorIndicator = centerInSidebar(Glyph);
function centerInSidebar(
component: StyledOtherComponent<any, {}, any> | React.ComponentType<any>,
) {
function centerInSidebar(component: any) {
return styled(component)({
marginTop: '10px',
marginBottom: '10px',

12
src/chrome/Popover.tsx
View File

@@ -18,7 +18,7 @@ import {
} from 'flipper';
import React, {PureComponent} from 'react';
const Anchor = styled('img')({
const Anchor = styled.img({
zIndex: 6,
position: 'absolute',
bottom: 0,
@@ -100,13 +100,13 @@ const ItemImage = styled(FlexBox)({
flexShrink: 0,
});
const ItemContent = styled('div')({
const ItemContent = styled.div({
minWidth: 0,
paddingRight: 5,
flexGrow: 1,
});
const Section = styled('div')({
const Section = styled.div({
borderBottom: `1px solid ${colors.light05}`,
'&:last-child': {
borderBottom: 'none',
@@ -142,7 +142,7 @@ type Props = {
};
export default class Popover extends PureComponent<Props> {
_ref: Element | null | undefined;
_ref?: Element | null;
componentDidMount() {
window.document.addEventListener('click', this.handleClick);
@@ -158,7 +158,7 @@ export default class Popover extends PureComponent<Props> {
}
};
_setRef = (ref?: Element) => {
_setRef = (ref: Element | null) => {
this._ref = ref;
};
@@ -166,7 +166,7 @@ export default class Popover extends PureComponent<Props> {
return (
<>
<Anchor src="./anchor.svg" key="anchor" />
<PopoverContainer innerRef={this._setRef} key="popup">
<PopoverContainer ref={this._setRef} key="popup">
{this.props.sections.map(section => {
if (section.items.length > 0) {
return (

4
src/chrome/RatingButton.tsx
View File

@@ -41,7 +41,7 @@ class PredefinedComment extends Component<{
selected: boolean;
onClick: (_: unknown) => unknown;
}> {
static Container = styled('div')((props: {selected: boolean}) => {
static Container = styled.div<{selected: boolean}>(props => {
return {
border: '1px solid #f2f3f5',
cursor: 'pointer',
@@ -82,7 +82,7 @@ const DismissRow = styled(Row)({
marginTop: 10,
});
const DismissButton = styled('span')({
const DismissButton = styled.span({
'&:hover': {
textDecoration: 'underline',
cursor: 'pointer',

2
src/chrome/Sheet.tsx
View File

@@ -19,7 +19,7 @@ import {State as Store} from '../reducers';
import {ActiveSheet} from '../reducers/application';
const DialogContainer = styled('div')(({state}: {state: TransitionStatus}) => ({
const DialogContainer = styled.div<{state: TransitionStatus}>(({state}) => ({
transform: `translate(-50%, ${
state === 'entering' || state === 'exiting' || state === 'exited'
? 'calc(-100% - 20px)'

2
src/chrome/TitleBar.tsx
View File

@@ -43,7 +43,7 @@ import {clipboard} from 'electron';
import React from 'react';
import {State} from 'src/reducers';
const AppTitleBar = styled(FlexRow)(({focused}: {focused?: boolean}) => ({
const AppTitleBar = styled(FlexRow)<{focused?: boolean}>(({focused}) => ({
background: focused
? `linear-gradient(to bottom, ${colors.macOSTitleBarBackgroundTop} 0%, ${colors.macOSTitleBarBackgroundBottom} 100%)`
: colors.macOSTitleBarBackgroundBlur,

6
src/chrome/UserAccount.tsx
View File

@@ -28,7 +28,7 @@ const Container = styled(FlexRow)({
color: colors.blackAlpha80,
});
const ProfilePic = styled('img')({
const ProfilePic = styled.img({
borderRadius: '999em',
flexShrink: 0,
width: 24,
@@ -58,7 +58,7 @@ type Props = OwnProps & DispatchFromProps & StateFromProps;
class UserAccount extends PureComponent<Props> {
_ref: Element | null | undefined;
setRef = (ref: React.ReactInstance) => {
setRef = (ref: HTMLDivElement | null) => {
const element = findDOMNode(ref);
if (element instanceof HTMLElement) {
this._ref = element;
@@ -90,7 +90,7 @@ class UserAccount extends PureComponent<Props> {
const {user} = this.props;
const name = user ? user.name : null;
return name ? (
<Container innerRef={this.setRef} onClick={this.showDetails}>
<Container ref={this.setRef} onClick={this.showDetails}>
<ProfilePic
src={user.profile_picture ? user.profile_picture.uri : undefined}
/>

4
src/chrome/WelcomeScreen.tsx
View File

@@ -29,7 +29,7 @@ const Container = styled(FlexColumn)({
backgroundColor: colors.light02,
});
const Welcome = styled(FlexColumn)(({isMounted}: {isMounted?: boolean}) => ({
const Welcome = styled(FlexColumn)<{isMounted?: boolean}>(({isMounted}) => ({
width: 460,
background: colors.white,
borderRadius: 10,
@@ -85,7 +85,7 @@ const Icon = styled(Glyph)({
marginLeft: 6,
});
const Logo = styled('img')({
const Logo = styled.img({
width: 128,
height: 128,
alignSelf: 'center',

12
src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap
View File

@@ -17,7 +17,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
size={30}
/>
<span
className="css-91luyc"
className="css-1r5zvq8"
color="#6f6f6f"
>
Update
@@ -30,7 +30,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
className="css-12zzrdt"
/>
<div
className="css-1qfnye7"
className="css-1ee9nwd"
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
@@ -38,7 +38,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
Cancel
</div>
<div
className="css-1qfnye7"
className="css-1ee9nwd"
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
@@ -67,7 +67,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
size={30}
/>
<span
className="css-91luyc"
className="css-1r5zvq8"
color="#6f6f6f"
>
wubba lubba dub dub
@@ -80,7 +80,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
className="css-12zzrdt"
/>
<div
className="css-1qfnye7"
className="css-1ee9nwd"
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
@@ -88,7 +88,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
Cancel
</div>
<div
className="css-1qfnye7"
className="css-1ee9nwd"
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}

2
src/chrome/settings/ToggledSection.tsx
View File

@@ -14,7 +14,7 @@ const IndentedSection = styled(FlexColumn)({
paddingLeft: 50,
paddingBottom: 10,
});
const GreyedOutOverlay = styled('div')({
const GreyedOutOverlay = styled.div({
backgroundColor: '#EFEEEF',
borderRadius: 4,
opacity: 0.6,

4
src/chrome/settings/configFields.tsx
View File

@@ -23,7 +23,7 @@ const InfoText = styled(Text)({
paddingTop: 5,
});
const FileInputBox = styled(Input)(({isValid}: {isValid: boolean}) => ({
const FileInputBox = styled(Input)<{isValid: boolean}>(({isValid}) => ({
marginRight: 0,
flexGrow: 1,
fontFamily: 'monospace',
@@ -38,7 +38,7 @@ const CenteredGlyph = styled(Glyph)({
marginLeft: 10,
});
const GreyedOutOverlay = styled('div')({
const GreyedOutOverlay = styled.div({
backgroundColor: '#EFEEEF',
borderRadius: 4,
opacity: 0.6,