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

4
src/ui/components/Block.tsx
View File

@@ -7,12 +7,12 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
/**
* A Block styled div
*/
const Block = styled('div')({
const Block = styled.div({
display: 'block',
});
Block.displayName = 'Block';

4
src/ui/components/Bordered.tsx
View File

@@ -7,13 +7,13 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {colors} from './colors';
/**
* Puts a gray border around something
*/
const Bordered = styled('div')({
const Bordered = styled.div({
borderRadius: 4,
overflow: 'hidden',
border: `1px solid ${colors.macOSTitleBarButtonBorder}`,

2
src/ui/components/Box.tsx
View File

@@ -8,7 +8,7 @@
*/
import FlexBox from './FlexBox';
import styled from 'react-emotion';
import styled from '@emotion/styled';
const Box = styled(FlexBox)({
height: '100%',

155
src/ui/components/Button.tsx
View File

@@ -10,11 +10,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import electron, {MenuItemConstructorOptions} from 'electron';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {colors} from './colors';
import {connect} from 'react-redux';
import {findDOMNode} from 'react-dom';
import {keyframes} from 'react-emotion';
import {keyframes} from 'emotion';
import {State as Store} from '../../reducers/index';
import Glyph, {IconSize} from './Glyph';
@@ -106,88 +106,85 @@ const pulse = keyframes({
},
});
const StyledButton = styled('div')(
(props: {
windowIsFocused?: boolean;
compact?: boolean;
inButtonGroup?: boolean;
padded?: boolean;
pulse?: boolean;
disabled?: boolean;
dropdown?: Array<MenuItemConstructorOptions>;
}) => ({
backgroundColor:
props.windowIsFocused && !props.disabled
? colors.white
: colors.macOSTitleBarButtonBackgroundBlur,
backgroundImage: backgroundImage(props),
borderStyle: 'solid',
borderWidth: 1,
const StyledButton = styled.div<{
windowIsFocused?: boolean;
compact?: boolean;
inButtonGroup?: boolean;
padded?: boolean;
pulse?: boolean;
disabled?: boolean;
dropdown?: Array<MenuItemConstructorOptions>;
}>(props => ({
backgroundColor:
props.windowIsFocused && !props.disabled
? colors.white
: colors.macOSTitleBarButtonBackgroundBlur,
backgroundImage: backgroundImage(props),
borderStyle: 'solid',
borderWidth: 1,
borderColor: borderColor(props),
borderBottomColor: borderBottomColor(props),
color: color(props),
borderRadius: 4,
position: 'relative',
padding: props.padded ? '0 15px' : '0 6px',
height: props.compact === true ? 24 : 28,
margin: 0,
minWidth: 34,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
boxShadow:
props.pulse && props.windowIsFocused
? `0 0 0 ${colors.macOSTitleBarIconSelected}`
: '',
animation: props.pulse && props.windowIsFocused ? `${pulse} 1s infinite` : '',
'&:not(:first-child)': {
marginLeft: props.inButtonGroup === true ? 0 : 10,
borderTopLeftRadius: props.inButtonGroup === true ? 0 : 4,
borderBottomLeftRadius: props.inButtonGroup === true ? 0 : 4,
},
'&:not(:last-child)': {
borderTopRightRadius: props.inButtonGroup === true ? 0 : 4,
borderBottomRightRadius: props.inButtonGroup === true ? 0 : 4,
borderRight: props.inButtonGroup === true ? 0 : '',
},
'&:first-of-type': {
marginLeft: 0,
},
'&:active': props.disabled
? null
: {
borderColor: colors.macOSTitleBarButtonBorder,
borderBottomColor: colors.macOSTitleBarButtonBorderBottom,
background: `linear-gradient(to bottom, ${colors.macOSTitleBarButtonBackgroundActiveHighlight} 1px, ${colors.macOSTitleBarButtonBackgroundActive} 0%, ${colors.macOSTitleBarButtonBorderBlur} 100%)`,
},
'&:disabled': {
borderColor: borderColor(props),
borderBottomColor: borderBottomColor(props),
color: color(props),
borderRadius: 4,
position: 'relative',
padding: props.padded ? '0 15px' : '0 6px',
height: props.compact === true ? 24 : 28,
margin: 0,
minWidth: 34,
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
pointerEvents: 'none',
},
boxShadow:
props.pulse && props.windowIsFocused
? `0 0 0 ${colors.macOSTitleBarIconSelected}`
: '',
animation:
props.pulse && props.windowIsFocused ? `${pulse} 1s infinite` : '',
'&:not(:first-child)': {
marginLeft: props.inButtonGroup === true ? 0 : 10,
borderTopLeftRadius: props.inButtonGroup === true ? 0 : 4,
borderBottomLeftRadius: props.inButtonGroup === true ? 0 : 4,
},
'&:not(:last-child)': {
borderTopRightRadius: props.inButtonGroup === true ? 0 : 4,
borderBottomRightRadius: props.inButtonGroup === true ? 0 : 4,
borderRight: props.inButtonGroup === true ? 0 : '',
},
'&:first-of-type': {
marginLeft: 0,
},
'&:active': props.disabled
? null
: {
borderColor: colors.macOSTitleBarButtonBorder,
borderBottomColor: colors.macOSTitleBarButtonBorderBottom,
background: `linear-gradient(to bottom, ${colors.macOSTitleBarButtonBackgroundActiveHighlight} 1px, ${colors.macOSTitleBarButtonBackgroundActive} 0%, ${colors.macOSTitleBarButtonBorderBlur} 100%)`,
},
'&:disabled': {
borderColor: borderColor(props),
borderBottomColor: borderBottomColor(props),
pointerEvents: 'none',
},
'&:hover::before': {
content: props.dropdown ? "''" : 'normal',
position: 'absolute',
bottom: 1,
right: 2,
borderStyle: 'solid',
borderWidth: '4px 3px 0 3px',
borderColor: `${colors.macOSTitleBarIcon} transparent transparent transparent`,
},
}),
);
'&:hover::before': {
content: props.dropdown ? "''" : 'normal',
position: 'absolute',
bottom: 1,
right: 2,
borderStyle: 'solid',
borderWidth: '4px 3px 0 3px',
borderColor: `${colors.macOSTitleBarIcon} transparent transparent transparent`,
},
}));
StyledButton.displayName = 'Button:StyledButton';
const Icon = styled(Glyph)(({hasText}: {hasText: boolean}) => ({
const Icon = styled(Glyph)<{hasText: boolean}>(({hasText}) => ({
marginRight: hasText ? 3 : 0,
}));
Icon.displayName = 'Button:Icon';

4
src/ui/components/ButtonGroup.tsx
View File

@@ -7,11 +7,11 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import React, {Component} from 'react';
import PropTypes from 'prop-types';
const ButtonGroupContainer = styled('div')({
const ButtonGroupContainer = styled.div({
display: 'inline-flex',
marginLeft: 10,
'&:first-child': {

40
src/ui/components/ButtonGroupChain.tsx
View File

@@ -9,10 +9,10 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import Glyph from './Glyph';
const IconContainer = styled('div')({
const IconContainer = styled.div({
width: 0,
zIndex: 1,
display: 'inline-flex',
@@ -21,25 +21,23 @@ const IconContainer = styled('div')({
});
IconContainer.displayName = 'ButtonGroupChain:IconContainer';
const ButtonGroupChainContainer = styled('div')(
(props: {iconSize: number}) => ({
display: 'inline-flex',
marginLeft: 10,
'&:first-child>*:not(:first-child):nth-child(odd)': {
paddingLeft: props.iconSize + 6,
},
'&:first-child>*': {
borderRightStyle: 'none',
borderLeftStyle: 'none',
},
'&:first-child>:first-child': {
borderLeftStyle: 'solid',
},
'&:first-child>:last-child': {
borderRightStyle: 'solid',
},
}),
);
const ButtonGroupChainContainer = styled.div<{iconSize: number}>(props => ({
display: 'inline-flex',
marginLeft: 10,
'&:first-child>*:not(:first-child):nth-child(odd)': {
paddingLeft: props.iconSize + 6,
},
'&:first-child>*': {
borderRightStyle: 'none',
borderLeftStyle: 'none',
},
'&:first-child>:first-child': {
borderLeftStyle: 'solid',
},
'&:first-child>:last-child': {
borderRightStyle: 'solid',
},
}));
IconContainer.displayName = 'ButtonGroupChain:ButtonGroupChainContainer';
type Props = {

4
src/ui/components/CenteredView.tsx
View File

@@ -8,7 +8,7 @@
*/
import React from 'react';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {colors} from './colors';
import FlexColumn from './FlexColumn';
@@ -19,7 +19,7 @@ const Container = styled(FlexColumn)({
});
Container.displayName = 'CenteredView:Container';
const ContentWrapper = styled('div')({
const ContentWrapper = styled.div({
width: 500,
marginLeft: 'auto',
marginRight: 'auto',

4
src/ui/components/Checkbox.tsx
View File

@@ -8,7 +8,7 @@
*/
import {PureComponent} from 'react';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import React from 'react';
type CheckboxProps = {
@@ -18,7 +18,7 @@ type CheckboxProps = {
onChange: (checked: boolean) => void;
};
const CheckboxContainer = styled('input')({
const CheckboxContainer = styled.input({
display: 'inline-block',
marginRight: 5,
verticalAlign: 'middle',

4
src/ui/components/CodeBlock.tsx
View File

@@ -7,9 +7,9 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
const CodeBlock = styled('div')({
const CodeBlock = styled.div({
fontFamily: 'monospace',
});
CodeBlock.displayName = 'CodeBlock';

4
src/ui/components/ContextMenuProvider.tsx
View File

@@ -8,14 +8,14 @@
*/
import {Component} from 'react';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import electron, {MenuItemConstructorOptions} from 'electron';
import React from 'react';
import PropTypes from 'prop-types';
type MenuTemplate = Array<MenuItemConstructorOptions>;
const Container = styled('div')({
const Container = styled.div({
display: 'contents',
});
Container.displayName = 'ContextMenuProvider:Container';

2
src/ui/components/ErrorBlock.tsx
View File

@@ -7,7 +7,7 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import React from 'react';
import CodeBlock from './CodeBlock';

2
src/ui/components/ErrorBoundary.tsx
View File

@@ -12,7 +12,7 @@ import {Component} from 'react';
import Heading from './Heading';
import Button from './Button';
import View from './View';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import React from 'react';
const ErrorBoundaryContainer = styled(View)({

4
src/ui/components/FlexBox.tsx
View File

@@ -8,7 +8,7 @@
*/
import View from './View';
import styled from 'react-emotion';
import styled from '@emotion/styled';
type Props = {
/** Flexbox's shrink property. Set to `0`, to disable shrinking. */
@@ -18,7 +18,7 @@ type Props = {
/**
* A container using flexbox to layout its children
*/
const FlexBox = styled(View)(({shrink}: Props) => ({
const FlexBox = styled(View)<Props>(({shrink}) => ({
display: 'flex',
flexShrink: shrink == null || shrink ? 1 : 0,
}));

2
src/ui/components/FlexCenter.tsx
View File

@@ -8,7 +8,7 @@
*/
import View from './View';
import styled from 'react-emotion';
import styled from '@emotion/styled';
/**
* A container displaying its children horizontally and vertically centered.

2
src/ui/components/FlexColumn.tsx
View File

@@ -8,7 +8,7 @@
*/
import FlexBox from './FlexBox';
import styled from 'react-emotion';
import styled from '@emotion/styled';
/**
* A container displaying its children in a column

2
src/ui/components/FlexRow.tsx
View File

@@ -8,7 +8,7 @@
*/
import FlexBox from './FlexBox';
import styled from 'react-emotion';
import styled from '@emotion/styled';
/**
* A container displaying its children in a row

2
src/ui/components/FocusableBox.tsx
View File

@@ -10,7 +10,7 @@
import {Component} from 'react';
import Box from './Box';
import {colors} from './colors';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import React from 'react';
const FocusableBoxBorder = styled(Box)({

34
src/ui/components/Glyph.tsx
View File

@@ -8,13 +8,13 @@
*/
import React from 'react';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import PropTypes from 'prop-types';
import {getIconURL} from '../../utils/icons.js';
export type IconSize = 8 | 10 | 12 | 16 | 18 | 20 | 24 | 32;
const ColoredIconBlack = styled('img')(({size}: {size: number}) => ({
const ColoredIconBlack = styled.img<{size: number}>(({size}) => ({
height: size,
verticalAlign: 'middle',
width: size,
@@ -22,20 +22,22 @@ const ColoredIconBlack = styled('img')(({size}: {size: number}) => ({
}));
ColoredIconBlack.displayName = 'Glyph:ColoredIconBlack';
const ColoredIconCustom = styled('div')(
(props: {size: number; color?: string; src: string}) => ({
height: props.size,
verticalAlign: 'middle',
width: props.size,
backgroundColor: props.color,
display: 'inline-block',
maskImage: `url('${props.src}')`,
maskSize: '100% 100%',
WebkitMaskImage: `url('${props.src}')`,
WebkitMaskSize: '100% 100%',
flexShrink: 0,
}),
);
const ColoredIconCustom = styled.div<{
size: number;
color?: string;
src: string;
}>(props => ({
height: props.size,
verticalAlign: 'middle',
width: props.size,
backgroundColor: props.color,
display: 'inline-block',
maskImage: `url('${props.src}')`,
maskSize: '100% 100%',
WebkitMaskImage: `url('${props.src}')`,
WebkitMaskSize: '100% 100%',
flexShrink: 0,
}));
ColoredIconCustom.displayName = 'Glyph:ColoredIconCustom';
function ColoredIcon(

6
src/ui/components/HBox.tsx
View File

@@ -8,7 +8,7 @@
*/
import React from 'react';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import FlexRow from './FlexRow';
/**
@@ -16,8 +16,8 @@ import FlexRow from './FlexRow';
* It takes two children, 'left' and 'right'. One is assumed to have a fixed (or minimum) size,
* and the other will grow automatically
*/
const HBoxContainer = styled(FlexRow)(
({verticalAlign}: {verticalAlign: string}) => ({
const HBoxContainer = styled(FlexRow)<{verticalAlign: string}>(
({verticalAlign}) => ({
shrink: 0,
alignItems: verticalAlign,
}),

6
src/ui/components/Heading.tsx
View File

@@ -7,10 +7,10 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import React from 'react';
const LargeHeading = styled('div')({
const LargeHeading = styled.div({
fontSize: 18,
fontWeight: 'bold',
lineHeight: '20px',
@@ -19,7 +19,7 @@ const LargeHeading = styled('div')({
});
LargeHeading.displayName = 'Heading:LargeHeading';
const SmallHeading = styled('div')({
const SmallHeading = styled.div({
fontSize: 12,
color: '#90949c',
fontWeight: 'bold',

4
src/ui/components/HorizontalRule.tsx
View File

@@ -7,9 +7,9 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
const HorizontalRule = styled('div')({
const HorizontalRule = styled.div({
backgroundColor: '#c9ced4',
height: 1,
margin: '5px 0',

6
src/ui/components/Info.tsx
View File

@@ -7,7 +7,7 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import React from 'react';
import {colors} from './colors';
@@ -43,8 +43,8 @@ const bgColor = {
spinning: 'transparent',
};
const InfoWrapper = styled(FlexColumn)(
({type, small}: Pick<InfoProps, 'type' | 'small'>) => ({
const InfoWrapper = styled(FlexColumn)<Pick<InfoProps, 'type' | 'small'>>(
({type, small}) => ({
padding: small ? '0 4px' : 10,
borderRadius: 4,
color: color[type],

30
src/ui/components/Input.tsx
View File

@@ -7,7 +7,7 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {colors} from './colors';
export const inputStyle = (props: {
@@ -30,24 +30,18 @@ export const inputStyle = (props: {
},
});
const Input = styled('input')(
({
compact,
valid,
readOnly,
}: {
compact?: boolean;
valid?: boolean;
readOnly?: boolean;
}) => ({
...inputStyle({
compact: compact || false,
valid: valid !== false,
readOnly: readOnly === true,
}),
padding: compact ? '0 5px' : '0 10px',
const Input = styled.input<{
compact?: boolean;
valid?: boolean;
readOnly?: boolean;
}>(({compact, valid, readOnly}) => ({
...inputStyle({
compact: compact || false,
valid: valid !== false,
readOnly: readOnly === true,
}),
);
padding: compact ? '0 5px' : '0 10px',
}));
Input.displayName = 'Input';

18
src/ui/components/Interactive.tsx
View File

@@ -15,7 +15,7 @@ import {
maybeSnapTop,
SNAP_SIZE,
} from '../../utils/snap';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import invariant from 'invariant';
import React from 'react';
@@ -72,7 +72,7 @@ type InteractiveProps = {
onResize?: (width: number, height: number) => void;
resizing?: boolean;
resizable?: boolean | ResizingSides;
innerRef?: (elem: HTMLElement) => void;
innerRef?: (elem: HTMLElement | null) => void;
style?: Object;
className?: string;
children?: React.ReactNode;
@@ -90,7 +90,7 @@ type InteractiveState = {
resizingInitialCursor: CursorState | null | undefined;
};
const InteractiveContainer = styled('div')({
const InteractiveContainer = styled.div({
willChange: 'transform, height, width, z-index',
});
InteractiveContainer.displayName = 'Interactive:InteractiveContainer';
@@ -118,11 +118,11 @@ export default class Interactive extends React.Component<
}
globalMouse: boolean;
ref: HTMLElement | undefined;
ref?: HTMLElement | null;
nextTop: number | null | undefined;
nextLeft: number | null | undefined;
nextEvent: MouseEvent | null | undefined;
nextTop?: number | null;
nextLeft?: number | null;
nextEvent?: MouseEvent | null;
static defaultProps = {
minHeight: 0,
@@ -656,7 +656,7 @@ export default class Interactive extends React.Component<
});
}
setRef = (ref: HTMLElement) => {
setRef = (ref: HTMLElement | null) => {
this.ref = ref;
const {innerRef} = this.props;
@@ -706,7 +706,7 @@ export default class Interactive extends React.Component<
<InteractiveContainer
className={this.props.className}
hidden={this.props.hidden}
innerRef={this.setRef}
ref={this.setRef}
onMouseDown={this.startAction}
onMouseMove={this.onLocalMouseMove}
onMouseLeave={this.onMouseLeave} // eslint-disable-next-line

4
src/ui/components/Label.tsx
View File

@@ -7,9 +7,9 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
const Label = styled('div')({
const Label = styled.div({
fontSize: 12,
fontWeight: 'bold',
});

4
src/ui/components/Link.tsx
View File

@@ -7,13 +7,13 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {colors} from './colors';
import {Component} from 'react';
import {shell} from 'electron';
import React from 'react';
const StyledLink = styled('span')({
const StyledLink = styled.span({
color: colors.highlight,
'&:hover': {
cursor: 'pointer',

6
src/ui/components/LoadingIndicator.tsx
View File

@@ -7,8 +7,8 @@
* @format
*/
import styled from 'react-emotion';
import {keyframes} from 'react-emotion';
import styled from '@emotion/styled';
import {keyframes} from 'emotion';
const animation = keyframes({
'0%': {
@@ -19,7 +19,7 @@ const animation = keyframes({
},
});
const LoadingIndicator = styled('div')((props: {size: number}) => ({
const LoadingIndicator = styled.div<{size: number}>(props => ({
animation: `${animation} 1s infinite linear`,
width: props.size,
height: props.size,

18
src/ui/components/Markdown.tsx
View File

@@ -8,19 +8,19 @@
*/
import React, {PureComponent} from 'react';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import ReactMarkdown from 'react-markdown';
import {colors} from './colors';
import {shell} from 'electron';
const Container = styled('div')({
const Container = styled.div({
padding: 10,
});
const Row = styled('div')({
const Row = styled.div({
marginTop: 5,
marginBottom: 5,
});
const Heading = styled('div')((props: {level: number}) => ({
const Heading = styled.div<{level: number}>(props => ({
fontSize: props.level === 1 ? 18 : 12,
textTransform: props.level > 1 ? 'uppercase' : undefined,
color: props.level > 1 ? '#90949c' : undefined,
@@ -28,16 +28,16 @@ const Heading = styled('div')((props: {level: number}) => ({
marginBottom: 10,
fontWeight: props.level > 1 ? 'bold' : 'normal',
}));
const ListItem = styled('li')({
const ListItem = styled.li({
'list-style-type': 'circle',
'list-style-position': 'inside',
marginLeft: 10,
});
const Strong = styled('span')({
const Strong = styled.span({
fontWeight: 'bold',
color: '#1d2129',
});
const Emphasis = styled('span')({
const Emphasis = styled.span({
fontStyle: 'italic',
});
const Quote = styled(Row)({
@@ -45,7 +45,7 @@ const Quote = styled(Row)({
backgroundColor: '#f1f2f3',
fontSize: 13,
});
const Code = styled('span')({
const Code = styled.span({
fontFamily: '"Courier New", Courier, monospace',
backgroundColor: '#f1f2f3',
});
@@ -62,7 +62,7 @@ class CodeBlock extends PureComponent<{value: string; language: string}> {
);
}
}
const Link = styled('span')({
const Link = styled.span({
color: colors.blue,
});
class LinkReference extends PureComponent<{href: string}> {

124
src/ui/components/MarkerTimeline.tsx
View File

@@ -8,7 +8,7 @@
*/
import {Component} from 'react';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import Text from './Text';
import FlexRow from './FlexRow';
import {colors} from './colors';
@@ -29,7 +29,11 @@ type Props = {
maxGap: number;
};
const Markers = styled('div')((props: {totalTime: number}) => ({
type MouseEventHandler = (
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
) => void;
const Markers = styled.div<{totalTime: number}>(props => ({
position: 'relative',
margin: 10,
height: props.totalTime,
@@ -45,69 +49,67 @@ const Markers = styled('div')((props: {totalTime: number}) => ({
}));
Markers.displayName = 'MarkerTimeline:Markers';
const Point = styled(FlexRow)(
(props: {
positionY: number;
onClick: Function | undefined;
number: number | undefined;
threadColor: string;
selected: boolean;
cut: boolean;
}) => ({
const Point = styled(FlexRow)<{
positionY: number;
onClick: MouseEventHandler | undefined;
number: number | undefined;
threadColor: string;
selected: boolean;
cut: boolean;
}>(props => ({
position: 'absolute',
top: props.positionY,
left: 0,
right: 10,
cursor: props.onClick ? 'pointer' : 'default',
borderRadius: 3,
alignItems: 'flex-start',
lineHeight: '16px',
':hover': {
background: `linear-gradient(to top, rgba(255,255,255,0) 0, #ffffff 10px)`,
paddingBottom: 5,
zIndex: 2,
'> span': {
whiteSpace: 'initial',
},
},
'::before': {
position: 'relative',
textAlign: 'center',
fontSize: 8,
fontWeight: 500,
content: props.number ? `'${props.number}'` : '""',
display: 'inline-block',
width: 9,
height: 9,
flexShrink: 0,
color: 'rgba(0,0,0,0.4)',
lineHeight: '9px',
borderRadius: '999em',
border: '1px solid rgba(0,0,0,0.2)',
backgroundColor: props.threadColor,
marginRight: 6,
zIndex: 3,
boxShadow: props.selected
? `0 0 0 2px ${colors.macOSTitleBarIconSelected}`
: undefined,
},
'::after': {
content: props.cut ? '""' : undefined,
position: 'absolute',
top: props.positionY,
width: 11,
top: -20,
left: 0,
right: 10,
cursor: props.onClick ? 'pointer' : 'default',
borderRadius: 3,
alignItems: 'flex-start',
lineHeight: '16px',
':hover': {
background: `linear-gradient(to top, rgba(255,255,255,0) 0, #ffffff 10px)`,
paddingBottom: 5,
zIndex: 2,
'> span': {
whiteSpace: 'initial',
},
},
'::before': {
position: 'relative',
textAlign: 'center',
fontSize: 8,
fontWeight: 500,
content: props.number ? `'${props.number}'` : '""',
display: 'inline-block',
width: 9,
height: 9,
flexShrink: 0,
color: 'rgba(0,0,0,0.4)',
lineHeight: '9px',
borderRadius: '999em',
border: '1px solid rgba(0,0,0,0.2)',
backgroundColor: props.threadColor,
marginRight: 6,
zIndex: 3,
boxShadow: props.selected
? `0 0 0 2px ${colors.macOSTitleBarIconSelected}`
: undefined,
},
'::after': {
content: props.cut ? '""' : undefined,
position: 'absolute',
width: 11,
top: -20,
left: 0,
height: 2,
background: colors.white,
borderTop: `1px solid ${colors.light30}`,
borderBottom: `1px solid ${colors.light30}`,
transform: `skewY(-10deg)`,
},
}),
);
height: 2,
background: colors.white,
borderTop: `1px solid ${colors.light30}`,
borderBottom: `1px solid ${colors.light30}`,
transform: `skewY(-10deg)`,
},
}));
Point.displayName = 'MakerTimeline:Point';
const Time = styled('span')({
const Time = styled.span({
color: colors.light30,
fontWeight: 300,
marginRight: 4,

10
src/ui/components/ModalOverlay.tsx
View File

@@ -7,11 +7,11 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {Component} from 'react';
import React from 'react';
const Overlay = styled('div')({
const Overlay = styled.div({
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.6)',
bottom: 0,
@@ -29,9 +29,9 @@ export default class ModalOverlay extends Component<{
onClose: () => void;
children?: React.ReactNode;
}> {
ref: HTMLElement | null | undefined;
ref?: HTMLElement | null;
setRef = (ref: HTMLElement) => {
setRef = (ref: HTMLElement | null) => {
this.ref = ref;
};
@@ -45,7 +45,7 @@ export default class ModalOverlay extends Component<{
const {props} = this;
return (
<Overlay innerRef={this.setRef} onClick={this.onClick}>
<Overlay ref={this.setRef} onClick={this.onClick}>
{props.children}
</Overlay>
);

4
src/ui/components/MultiLineInput.tsx
View File

@@ -7,7 +7,7 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {colors} from './colors';
export const multilineStyle = (props: {valid: boolean}) => ({
@@ -26,7 +26,7 @@ export const multilineStyle = (props: {valid: boolean}) => ({
},
});
const MultiLineInput = styled('textarea')((props: {valid?: boolean}) => ({
const MultiLineInput = styled.textarea<{valid?: boolean}>(props => ({
...multilineStyle({valid: props.valid === undefined || props.valid}),
padding: '0 10px',
}));

30
src/ui/components/Orderable.tsx
View File

@@ -8,7 +8,7 @@
*/
import {Rect} from '../../utils/geometry';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {Component} from 'react';
import React from 'react';
@@ -38,26 +38,26 @@ type TabSizes = {
[key: string]: Rect;
};
const OrderableContainer = styled('div')({
const OrderableContainer = styled.div({
position: 'relative',
});
OrderableContainer.displayName = 'Orderable:OrderableContainer';
const OrderableItemContainer = styled('div')(
(props: {orientation: 'vertical' | 'horizontal'}) => ({
display: props.orientation === 'vertical' ? 'block' : 'inline-block',
}),
);
const OrderableItemContainer = styled.div<{
orientation: 'vertical' | 'horizontal';
}>(props => ({
display: props.orientation === 'vertical' ? 'block' : 'inline-block',
}));
OrderableItemContainer.displayName = 'Orderable:OrderableItemContainer';
class OrderableItem extends Component<{
orientation: OrderableOrientation;
id: string;
children?: React.ReactNode;
addRef: (key: string, ref: HTMLElement) => void;
addRef: (key: string, ref: HTMLElement | null) => void;
startMove: (KEY: string, event: React.MouseEvent) => void;
}> {
addRef = (ref: HTMLElement) => {
addRef = (ref: HTMLElement | null) => {
this.props.addRef(this.props.id, ref);
};
@@ -70,7 +70,7 @@ class OrderableItem extends Component<{
<OrderableItemContainer
orientation={this.props.orientation}
key={this.props.id}
innerRef={this.addRef}
ref={this.addRef}
onMouseDown={this.startMove}>
{this.props.children}
</OrderableItemContainer>
@@ -98,9 +98,9 @@ export default class Orderable extends React.Component<
mouseKey: 'offsetX' | 'offsetY' = 'offsetX';
screenKey: 'screenX' | 'screenY' = 'screenX';
containerRef: HTMLElement | undefined;
containerRef: HTMLElement | undefined | null;
tabRefs: {
[key: string]: HTMLElement | undefined;
[key: string]: HTMLElement | undefined | null;
};
static defaultProps = {
@@ -377,11 +377,11 @@ export default class Orderable extends React.Component<
this.reset();
}
addRef = (key: string, elem: HTMLElement | undefined) => {
addRef = (key: string, elem: HTMLElement | null) => {
this.tabRefs[key] = elem;
};
setContainerRef = (ref: HTMLElement) => {
setContainerRef = (ref: HTMLElement | null) => {
this.containerRef = ref;
};
@@ -406,7 +406,7 @@ export default class Orderable extends React.Component<
return (
<OrderableContainer
className={this.props.className}
innerRef={this.setContainerRef}>
ref={this.setContainerRef}>
{order.map(key => {
const item = items[key];
if (item) {

25
src/ui/components/Panel.tsx
View File

@@ -8,7 +8,7 @@
*/
import React from 'react';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import FlexColumn from './FlexColumn';
import FlexBox from './FlexBox';
import {colors} from './colors';
@@ -85,16 +85,17 @@ export default class Panel extends React.Component<
collapsable: true,
};
static PanelContainer = styled(FlexColumn)(
(props: {floating?: boolean; collapsed?: boolean}) => ({
flexShrink: 0,
padding: props.floating ? 10 : 0,
borderBottom: props.collapsed ? 'none' : BORDER,
}),
);
static PanelContainer = styled(FlexColumn)<{
floating?: boolean;
collapsed?: boolean;
}>(props => ({
flexShrink: 0,
padding: props.floating ? 10 : 0,
borderBottom: props.collapsed ? 'none' : BORDER,
}));
static PanelHeader = styled(FlexBox)(
(props: {floating?: boolean; padded?: boolean}) => ({
static PanelHeader = styled(FlexBox)<{floating?: boolean; padded?: boolean}>(
props => ({
backgroundColor: '#f6f7f9',
border: props.floating ? BORDER : 'none',
borderBottom: BORDER,
@@ -111,8 +112,8 @@ export default class Panel extends React.Component<
}),
);
static PanelBody = styled(FlexColumn)(
(props: {floating?: boolean; padded?: boolean}) => ({
static PanelBody = styled(FlexColumn)<{floating?: boolean; padded?: boolean}>(
props => ({
backgroundColor: '#fff',
border: props.floating ? BORDER : 'none',
borderBottomLeftRadius: 2,

12
src/ui/components/Popover.tsx
View File

@@ -9,10 +9,10 @@
import React, {PureComponent} from 'react';
import FlexColumn from './FlexColumn';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {colors} from './colors';
const Anchor = styled('img')({
const Anchor = styled.img({
zIndex: 6,
position: 'absolute',
bottom: 0,
@@ -26,7 +26,7 @@ type Opts = {
skewLeft?: boolean;
};
const PopoverContainer = styled(FlexColumn)((props: {opts?: Opts}) => ({
const PopoverContainer = styled(FlexColumn)<{opts?: Opts}>(props => ({
backgroundColor: colors.white,
borderRadius: 7,
border: '1px solid rgba(0,0,0,0.3)',
@@ -66,7 +66,7 @@ type Props = {
};
export default class Popover extends PureComponent<Props> {
_ref: Element | undefined;
_ref?: Element | null;
componentDidMount() {
window.document.addEventListener('click', this.handleClick);
@@ -90,7 +90,7 @@ export default class Popover extends PureComponent<Props> {
}
};
_setRef = (ref: Element | undefined) => {
_setRef = (ref: Element | null) => {
this._ref = ref;
};
@@ -99,7 +99,7 @@ export default class Popover extends PureComponent<Props> {
<>
<Anchor src="./anchor.svg" key="anchor" />
<PopoverContainer
innerRef={this._setRef}
ref={this._setRef}
key="popup"
opts={this.props.forceOpts || {}}>
{this.props.children}

14
src/ui/components/ResizeSensor.tsx
View File

@@ -7,11 +7,11 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {Component} from 'react';
import React from 'react';
const IFrame = styled('iframe')({
const IFrame = styled.iframe({
height: '100%',
width: '100%',
border: 'none',
@@ -30,26 +30,26 @@ export default class ResizeSensor extends Component<{
/** Callback when resize happened */
onResize: (e: UIEvent) => void;
}> {
iframe: HTMLIFrameElement | undefined;
iframe: HTMLIFrameElement | undefined | null;
setRef = (ref: HTMLIFrameElement | undefined) => {
setRef = (ref: HTMLIFrameElement | null) => {
this.iframe = ref;
};
render() {
return <IFrame innerRef={this.setRef} />;
return <IFrame ref={this.setRef} />;
}
componentDidMount() {
const {iframe} = this;
if (iframe != null && iframe.contentWindow != null) {
if (iframe && iframe.contentWindow != null) {
iframe.contentWindow.addEventListener('resize', this.handleResize);
}
}
componentWillUnmount() {
const {iframe} = this;
if (iframe != null && iframe.contentWindow != null) {
if (iframe && iframe.contentWindow != null) {
iframe.contentWindow.removeEventListener('resize', this.handleResize);
}
}

6
src/ui/components/RoundedSection.tsx
View File

@@ -8,19 +8,19 @@
*/
import React from 'react';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {colors} from './colors';
import Heading from './Heading';
import FlexColumn from './FlexColumn';
const Divider = styled('hr')({
const Divider = styled.hr({
margin: '16px -20px 20px -20px',
border: 'none',
borderTop: `1px solid ${colors.light05}`,
});
Divider.displayName = 'RoundedSection:Divider';
const Container = styled('div')({
const Container = styled.div({
background: colors.white,
borderRadius: 10,
boxShadow: '0 1px 3px rgba(0,0,0,0.25)',

6
src/ui/components/Select.tsx
View File

@@ -9,10 +9,10 @@
import {Component} from 'react';
import Text from './Text';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import React from 'react';
const Label = styled('label')({
const Label = styled.label({
display: 'flex',
alignItems: 'center',
});
@@ -24,7 +24,7 @@ const LabelText = styled(Text)({
});
LabelText.displayName = 'Select:LabelText';
const SelectMenu = styled('select')((props: {grow?: boolean}) => ({
const SelectMenu = styled.select<{grow?: boolean}>(props => ({
flexGrow: props.grow ? 1 : 0,
}));
SelectMenu.displayName = 'Select:SelectMenu';

37
src/ui/components/Sidebar.tsx
View File

@@ -11,7 +11,7 @@ import Interactive from './Interactive';
import FlexColumn from './FlexColumn';
import {colors} from './colors';
import {Component} from 'react';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {
BackgroundClipProperty,
HeightProperty,
@@ -27,25 +27,22 @@ SidebarInteractiveContainer.displayName = 'Sidebar:SidebarInteractiveContainer';
type SidebarPosition = 'left' | 'top' | 'right' | 'bottom';
const SidebarContainer = styled(FlexColumn)(
(props: {
position: 'right' | 'top' | 'left' | 'bottom';
backgroundColor?: BackgroundClipProperty;
overflow?: boolean;
}) => ({
backgroundColor:
props.backgroundColor || colors.macOSTitleBarBackgroundBlur,
borderLeft: props.position === 'right' ? '1px solid #b3b3b3' : 'none',
borderTop: props.position === 'bottom' ? '1px solid #b3b3b3' : 'none',
borderRight: props.position === 'left' ? '1px solid #b3b3b3' : 'none',
borderBottom: props.position === 'top' ? '1px solid #b3b3b3' : 'none',
height: '100%',
overflowX: 'hidden',
overflowY: 'auto',
textOverflow: props.overflow ? 'ellipsis' : 'auto',
whiteSpace: props.overflow ? 'nowrap' : 'normal',
}),
);
const SidebarContainer = styled(FlexColumn)<{
position: 'right' | 'top' | 'left' | 'bottom';
backgroundColor?: BackgroundClipProperty;
overflow?: boolean;
}>(props => ({
backgroundColor: props.backgroundColor || colors.macOSTitleBarBackgroundBlur,
borderLeft: props.position === 'right' ? '1px solid #b3b3b3' : 'none',
borderTop: props.position === 'bottom' ? '1px solid #b3b3b3' : 'none',
borderRight: props.position === 'left' ? '1px solid #b3b3b3' : 'none',
borderBottom: props.position === 'top' ? '1px solid #b3b3b3' : 'none',
height: '100%',
overflowX: 'hidden',
overflowY: 'auto',
textOverflow: props.overflow ? 'ellipsis' : 'auto',
whiteSpace: props.overflow ? 'nowrap' : 'normal',
}));
SidebarContainer.displayName = 'Sidebar:SidebarContainer';
type SidebarProps = {

2
src/ui/components/SidebarLabel.tsx
View File

@@ -9,7 +9,7 @@
import {colors} from './colors';
import Label from './Label';
import styled from 'react-emotion';
import styled from '@emotion/styled';
const SidebarLabel = styled(Label)({
color: colors.blackAlpha30,

6
src/ui/components/SmallText.tsx
View File

@@ -7,18 +7,18 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {colors} from './colors';
import Text from './Text';
/**
* Subtle text that should not draw attention
*/
const SmallText = styled(Text)(({center}: {center?: boolean}) => ({
const SmallText = styled(Text)<{center?: boolean}>(props => ({
color: colors.light20,
size: 10,
fontStyle: 'italic',
textAlign: center ? 'center' : undefined,
textAlign: props.center ? 'center' : undefined,
width: '100%',
}));
SmallText.displayName = 'SmallText';

33
src/ui/components/StackTrace.tsx
View File

@@ -13,7 +13,7 @@ import {colors} from './colors';
import ManagedTable from './table/ManagedTable';
import FlexRow from './FlexRow';
import Glyph from './Glyph';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import React from 'react';
import {BackgroundColorProperty} from 'csstype';
import {
@@ -23,22 +23,17 @@ import {
TableBodyColumn,
} from './table/types';
const Padder = styled('div')(
({
padded,
backgroundColor,
}: {
padded?: boolean;
backgroundColor?: BackgroundColorProperty;
}) => ({
padding: padded ? 10 : 0,
backgroundColor,
}),
);
const Padder = styled.div<{
padded?: boolean;
backgroundColor?: BackgroundColorProperty;
}>(({padded, backgroundColor}) => ({
padding: padded ? 10 : 0,
backgroundColor,
}));
Padder.displayName = 'StackTrace:Padder';
const Container = styled('div')(
({isCrash, padded}: {isCrash?: boolean; padded?: boolean}) => ({
const Container = styled.div<{isCrash?: boolean; padded?: boolean}>(
({isCrash, padded}) => ({
backgroundColor: isCrash ? colors.redTint : 'transprent',
border: padded
? `1px solid ${isCrash ? colors.red : colors.light15}`
@@ -49,7 +44,7 @@ const Container = styled('div')(
);
Container.displayName = 'StackTrace:Container';
const Title = styled(FlexRow)(({isCrash}: {isCrash?: boolean}) => ({
const Title = styled(FlexRow)<{isCrash?: boolean}>(({isCrash}) => ({
color: isCrash ? colors.red : 'inherit',
padding: 8,
alignItems: 'center',
@@ -57,15 +52,15 @@ const Title = styled(FlexRow)(({isCrash}: {isCrash?: boolean}) => ({
}));
Title.displayName = 'StackTrace:Title';
const Reason = styled(Text)(({isCrash}: {isCrash?: boolean}) => ({
const Reason = styled(Text)<{isCrash?: boolean}>(({isCrash}) => ({
color: isCrash ? colors.red : colors.light80,
fontWeight: 'bold',
fontSize: 13,
}));
Reason.displayName = 'StackTrace:Reason';
const Line = styled(Text)(
({isCrash, isBold}: {isCrash?: boolean; isBold?: boolean}) => ({
const Line = styled(Text)<{isCrash?: boolean; isBold?: boolean}>(
({isCrash, isBold}) => ({
color: isCrash ? colors.red : colors.light80,
fontWeight: isBold ? 'bold' : 'normal',
}),

2
src/ui/components/StarButton.tsx
View File

@@ -10,7 +10,7 @@
import React, {useState, useCallback} from 'react';
import {colors} from './colors';
import Glyph from './Glyph';
import styled from 'react-emotion';
import styled from '@emotion/styled';
const DownscaledGlyph = styled(Glyph)({
maskSize: '12px 12px',

6
src/ui/components/StatusIndicator.tsx
View File

@@ -7,7 +7,7 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {colors} from './colors';
import {BackgroundColorProperty, HeightProperty} from 'csstype';
@@ -18,8 +18,8 @@ type Props = {
title?: string;
};
const StatusIndicator = styled('div')(
({statusColor, diameter = 10, title}: Props) => ({
const StatusIndicator = styled.div<Props>(
({statusColor, diameter = 10, title}) => ({
alignSelf: 'center',
backgroundColor: statusColor,
border: `1px solid ${colors.blackAlpha30}`,

96
src/ui/components/Tabs.tsx
View File

@@ -8,7 +8,7 @@
*/
import FlexColumn from './FlexColumn';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import Orderable from './Orderable';
import FlexRow from './FlexRow';
import {colors} from './colors';
@@ -23,49 +23,47 @@ const TabList = styled(FlexRow)({
});
TabList.displayName = 'Tabs:TabList';
const TabListItem = styled('div')(
(props: {
active?: boolean;
width?: WidthProperty<number>;
container?: boolean;
}) => ({
background: props.container
? props.active
? 'linear-gradient(to bottom, #67a6f7 0%, #0072FA 100%)'
: `linear-gradient(to bottom, white 0%,${colors.macOSTitleBarButtonBackgroundBlur} 100%)`
: props.active
? colors.light15
: colors.light02,
borderBottom: props.container ? '1px solid #B8B8B8' : '1px solid #dddfe2',
boxShadow:
props.active && props.container
? 'inset 0px 0px 3px rgba(0,0,0,0.25)'
: 'none',
color: props.container && props.active ? colors.white : colors.dark80,
flex: props.container ? 'unset' : 1,
top: props.container ? -11 : 0,
fontWeight: 500,
fontSize: 13,
lineHeight: props.container ? '22px' : '28px',
overflow: 'hidden',
padding: '0 10px',
position: 'relative',
textAlign: 'center',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
'&:first-child': {
borderTopLeftRadius: props.container ? 3 : 0,
borderBottomLeftRadius: props.container ? 3 : 0,
},
'&:last-child': {
borderTopRightRadius: props.container ? 3 : 0,
borderBottomRightRadius: props.container ? 3 : 0,
},
'&:hover': {
backgroundColor: props.active ? colors.light15 : colors.light05,
},
}),
);
const TabListItem = styled.div<{
active?: boolean;
width?: WidthProperty<number>;
container?: boolean;
}>(props => ({
background: props.container
? props.active
? 'linear-gradient(to bottom, #67a6f7 0%, #0072FA 100%)'
: `linear-gradient(to bottom, white 0%,${colors.macOSTitleBarButtonBackgroundBlur} 100%)`
: props.active
? colors.light15
: colors.light02,
borderBottom: props.container ? '1px solid #B8B8B8' : '1px solid #dddfe2',
boxShadow:
props.active && props.container
? 'inset 0px 0px 3px rgba(0,0,0,0.25)'
: 'none',
color: props.container && props.active ? colors.white : colors.dark80,
flex: props.container ? 'unset' : 1,
top: props.container ? -11 : 0,
fontWeight: 500,
fontSize: 13,
lineHeight: props.container ? '22px' : '28px',
overflow: 'hidden',
padding: '0 10px',
position: 'relative',
textAlign: 'center',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
'&:first-child': {
borderTopLeftRadius: props.container ? 3 : 0,
borderBottomLeftRadius: props.container ? 3 : 0,
},
'&:last-child': {
borderTopRightRadius: props.container ? 3 : 0,
borderBottomRightRadius: props.container ? 3 : 0,
},
'&:hover': {
backgroundColor: props.active ? colors.light15 : colors.light05,
},
}));
TabListItem.displayName = 'Tabs:TabListItem';
const TabListAddItem = styled(TabListItem)({
@@ -76,7 +74,7 @@ const TabListAddItem = styled(TabListItem)({
});
TabListAddItem.displayName = 'Tabs:TabListAddItem';
const CloseButton = styled('div')({
const CloseButton = styled.div({
color: '#000',
float: 'right',
fontSize: 10,
@@ -96,12 +94,12 @@ const CloseButton = styled('div')({
});
CloseButton.displayName = 'Tabs:CloseButton';
const OrderableContainer = styled('div')({
const OrderableContainer = styled.div({
display: 'inline-block',
});
OrderableContainer.displayName = 'Tabs:OrderableContainer';
const TabContent = styled('div')({
const TabContent = styled.div({
height: '100%',
overflow: 'auto',
width: '100%',
@@ -233,7 +231,7 @@ export default function Tabs(props: {
continue;
}
let closeButton: HTMLDivElement | undefined;
let closeButton: HTMLDivElement | undefined | null;
tabs[key] = (
<TabListItem
@@ -253,7 +251,7 @@ export default function Tabs(props: {
{comp.props.label}
{closable && (
<CloseButton // eslint-disable-next-line react/jsx-no-bind
innerRef={ref => (closeButton = ref)} // eslint-disable-next-line react/jsx-no-bind
ref={ref => (closeButton = ref)} // eslint-disable-next-line react/jsx-no-bind
onMouseDown={() => {
if (isActive && onActive) {
const index = keys.indexOf(key);

4
src/ui/components/TabsContainer.tsx
View File

@@ -8,9 +8,9 @@
*/
import React from 'react';
import styled from 'react-emotion';
import styled from '@emotion/styled';
const Container = styled('div')({
const Container = styled.div({
backgroundColor: '#E3E3E3',
borderRadius: 4,
boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.1)',

77
src/ui/components/Text.tsx
View File

@@ -7,7 +7,7 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {
ColorProperty,
FontSizeProperty,
@@ -21,45 +21,42 @@ import {
/**
* A Text component.
*/
const Text = styled('span')(
(props: {
color?: ColorProperty;
bold?: boolean;
italic?: boolean;
underline?: boolean;
align?: TextAlignProperty;
size?: FontSizeProperty<number>;
code?: boolean;
family?: FontFamilyProperty;
selectable?: boolean;
wordWrap?: WordWrapProperty;
whiteSpace?: WhiteSpaceProperty;
cursor?: CursorProperty;
}) => ({
color: props.color ? props.color : 'inherit',
cursor: props.cursor ? props.cursor : 'auto',
display: 'inline',
fontWeight: props.bold ? 'bold' : 'inherit',
fontStyle: props.italic ? 'italic' : 'normal',
textAlign: props.align || 'left',
fontSize: props.size == null && props.code ? 12 : props.size,
textDecoration: props.underline ? 'underline' : 'initial',
fontFamily: props.code
? 'SF Mono, Monaco, Andale Mono, monospace'
: props.family,
overflow: props.code ? 'auto' : 'visible',
userSelect:
props.selectable ||
(props.code && typeof props.selectable === 'undefined')
? 'text'
: 'none',
wordWrap: props.code ? 'break-word' : props.wordWrap,
whiteSpace:
props.code && typeof props.whiteSpace === 'undefined'
? 'pre'
: props.whiteSpace,
}),
);
const Text = styled.span<{
color?: ColorProperty;
bold?: boolean;
italic?: boolean;
underline?: boolean;
align?: TextAlignProperty;
size?: FontSizeProperty<number>;
code?: boolean;
family?: FontFamilyProperty;
selectable?: boolean;
wordWrap?: WordWrapProperty;
whiteSpace?: WhiteSpaceProperty;
cursor?: CursorProperty;
}>(props => ({
color: props.color ? props.color : 'inherit',
cursor: props.cursor ? props.cursor : 'auto',
display: 'inline',
fontWeight: props.bold ? 'bold' : 'inherit',
fontStyle: props.italic ? 'italic' : 'normal',
textAlign: props.align || 'left',
fontSize: props.size == null && props.code ? 12 : props.size,
textDecoration: props.underline ? 'underline' : 'initial',
fontFamily: props.code
? 'SF Mono, Monaco, Andale Mono, monospace'
: props.family,
overflow: props.code ? 'auto' : 'visible',
userSelect:
props.selectable || (props.code && typeof props.selectable === 'undefined')
? 'text'
: 'none',
wordWrap: props.code ? 'break-word' : props.wordWrap,
whiteSpace:
props.code && typeof props.whiteSpace === 'undefined'
? 'pre'
: props.whiteSpace,
}));
Text.displayName = 'Text';
export default Text;

4
src/ui/components/TextParagraph.tsx
View File

@@ -7,12 +7,12 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
/**
* A TextParagraph component.
*/
const TextParagraph = styled('div')({
const TextParagraph = styled.div({
marginBottom: 10,
'&:last-child': {

34
src/ui/components/Textarea.tsx
View File

@@ -7,29 +7,23 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {inputStyle} from './Input';
const Textarea = styled('textarea')(
({
compact,
readOnly,
valid,
}: {
compact?: boolean;
readOnly?: boolean;
valid?: boolean;
}) => ({
...inputStyle({
compact: compact || false,
readOnly: readOnly || false,
valid: valid !== false,
}),
lineHeight: 'normal',
padding: compact ? '5px' : '8px',
resize: 'none',
const Textarea = styled.textarea<{
compact?: boolean;
readOnly?: boolean;
valid?: boolean;
}>(({compact, readOnly, valid}) => ({
...inputStyle({
compact: compact || false,
readOnly: readOnly || false,
valid: valid !== false,
}),
);
lineHeight: 'normal',
padding: compact ? '5px' : '8px',
resize: 'none',
}));
Textarea.displayName = 'Textarea';
export default Textarea;

4
src/ui/components/ToggleSwitch.tsx
View File

@@ -8,12 +8,12 @@
*/
import React from 'react';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {colors} from './colors';
import Text from './Text';
import FlexRow from './FlexRow';
export const StyledButton = styled('div')((props: {toggled: boolean}) => ({
export const StyledButton = styled.div<{toggled: boolean}>(props => ({
width: '30px',
height: '16px',
background: props.toggled ? colors.green : colors.grey,

41
src/ui/components/Toolbar.tsx
View File

@@ -10,30 +10,31 @@
import {colors} from './colors';
import FlexRow from './FlexRow';
import FlexBox from './FlexBox';
import styled from 'react-emotion';
import styled from '@emotion/styled';
/**
* A toolbar.
*/
const Toolbar = styled(FlexRow)(
(props: {position?: 'bottom' | 'top'; compact?: boolean}) => ({
backgroundColor: colors.light02,
borderBottom:
props.position === 'bottom'
? 'none'
: `1px solid ${colors.sectionHeaderBorder}`,
borderTop:
props.position === 'bottom'
? `1px solid ${colors.sectionHeaderBorder}`
: 'none',
flexShrink: 0,
height: props.compact ? 28 : 42,
lineHeight: '32px',
alignItems: 'center',
padding: 6,
width: '100%',
}),
);
const Toolbar = styled(FlexRow)<{
position?: 'bottom' | 'top';
compact?: boolean;
}>(props => ({
backgroundColor: colors.light02,
borderBottom:
props.position === 'bottom'
? 'none'
: `1px solid ${colors.sectionHeaderBorder}`,
borderTop:
props.position === 'bottom'
? `1px solid ${colors.sectionHeaderBorder}`
: 'none',
flexShrink: 0,
height: props.compact ? 28 : 42,
lineHeight: '32px',
alignItems: 'center',
padding: 6,
width: '100%',
}));
Toolbar.displayName = 'Toolbar';
export const Spacer = styled(FlexBox)({

10
src/ui/components/Tooltip.tsx
View File

@@ -8,11 +8,11 @@
*/
import TooltipProvider, {TooltipOptions} from './TooltipProvider';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import React, {Component} from 'react';
import PropTypes from 'prop-types';
const TooltipContainer = styled('div')({
const TooltipContainer = styled.div({
display: 'contents',
});
TooltipContainer.displayName = 'Tooltip:TooltipContainer';
@@ -38,7 +38,7 @@ export default class Tooltip extends Component<TooltipProps, TooltipState> {
TOOLTIP_PROVIDER: TooltipProvider;
};
ref: HTMLDivElement | undefined;
ref: HTMLDivElement | undefined | null;
state = {
open: false,
@@ -66,14 +66,14 @@ export default class Tooltip extends Component<TooltipProps, TooltipState> {
this.setState({open: false});
};
setRef = (ref: HTMLDivElement | undefined) => {
setRef = (ref: HTMLDivElement | null) => {
this.ref = ref;
};
render() {
return (
<TooltipContainer
innerRef={this.setRef}
ref={this.setRef}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}>
{this.props.children}

110
src/ui/components/TooltipProvider.tsx
View File

@@ -7,7 +7,7 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {colors} from './colors';
import {Component} from 'react';
import PropTypes from 'prop-types';
@@ -52,37 +52,35 @@ export type TooltipOptions = {
delay?: number; // in milliseconds
};
const TooltipBubble = styled('div')(
(props: {
top: TopProperty<number>;
left: LeftProperty<number>;
bottom: BottomProperty<number>;
right: RightProperty<number>;
options: {
backgroundColor: BackgroundColorProperty;
lineHeight: LineHeightProperty<number>;
padding: PaddingProperty<number>;
borderRadius: BorderRadiusProperty<number>;
width: WidthProperty<number>;
maxWidth: MaxWidthProperty<number>;
color: ColorProperty;
};
}) => ({
position: 'absolute',
zIndex: 99999999999,
backgroundColor: props.options.backgroundColor,
lineHeight: props.options.lineHeight,
padding: props.options.padding,
borderRadius: props.options.borderRadius,
width: props.options.width,
maxWidth: props.options.maxWidth,
top: props.top,
left: props.left,
bottom: props.bottom,
right: props.right,
color: props.options.color,
}),
);
const TooltipBubble = styled.div<{
top: TopProperty<number>;
left: LeftProperty<number>;
bottom: BottomProperty<number>;
right: RightProperty<number>;
options: {
backgroundColor: BackgroundColorProperty;
lineHeight: LineHeightProperty<number>;
padding: PaddingProperty<number>;
borderRadius: BorderRadiusProperty<number>;
width: WidthProperty<number>;
maxWidth: MaxWidthProperty<number>;
color: ColorProperty;
};
}>(props => ({
position: 'absolute',
zIndex: 99999999999,
backgroundColor: props.options.backgroundColor,
lineHeight: props.options.lineHeight,
padding: props.options.padding,
borderRadius: props.options.borderRadius,
width: props.options.width,
maxWidth: props.options.maxWidth,
top: props.top,
left: props.left,
bottom: props.bottom,
right: props.right,
color: props.options.color,
}));
TooltipBubble.displayName = 'TooltipProvider:TooltipBubble';
// vertical offset on bubble when position is 'below'
@@ -96,31 +94,29 @@ const TAIL_AB_POSITION_HORIZONTAL_OFFSET = 15;
// vertical offset on tail when position is 'toLeft' or 'toRight'
const TAIL_LR_POSITION_HORIZONTAL_OFFSET = 5;
const TooltipTail = styled('div')(
(props: {
top: TopProperty<number>;
left: LeftProperty<number>;
bottom: BottomProperty<number>;
right: RightProperty<number>;
options: {
backgroundColor: BackgroundColorProperty;
};
}) => ({
position: 'absolute',
display: 'block',
whiteSpace: 'pre',
height: '10px',
width: '10px',
lineHeight: '0',
zIndex: 99999999998,
transform: 'rotate(45deg)',
backgroundColor: props.options.backgroundColor,
top: props.top,
left: props.left,
bottom: props.bottom,
right: props.right,
}),
);
const TooltipTail = styled.div<{
top: TopProperty<number>;
left: LeftProperty<number>;
bottom: BottomProperty<number>;
right: RightProperty<number>;
options: {
backgroundColor: BackgroundColorProperty;
};
}>(props => ({
position: 'absolute',
display: 'block',
whiteSpace: 'pre',
height: '10px',
width: '10px',
lineHeight: '0',
zIndex: 99999999998,
transform: 'rotate(45deg)',
backgroundColor: props.options.backgroundColor,
top: props.top,
left: props.left,
bottom: props.bottom,
right: props.right,
}));
TooltipTail.displayName = 'TooltipProvider:TooltipTail';
type TooltipProps = {

2
src/ui/components/VBox.tsx
View File

@@ -7,7 +7,7 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import FlexColumn from './FlexColumn';
/**

4
src/ui/components/VerticalRule.tsx
View File

@@ -7,9 +7,9 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
const VerticalRule = styled('div')({
const VerticalRule = styled.div({
backgroundColor: '#c9ced4',
width: 3,
margin: '0',

4
src/ui/components/View.tsx
View File

@@ -7,14 +7,14 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
type Props = {
grow?: boolean;
scrollable?: boolean;
};
const View = styled('div')((props: Props) => ({
const View = styled.div<Props>(props => ({
height: props.grow ? '100%' : 'auto',
overflow: props.scrollable ? 'auto' : 'visible',
position: 'relative',

14
src/ui/components/VirtualList.tsx
View File

@@ -10,12 +10,12 @@
import FlexColumn from './FlexColumn';
import {Component} from 'react';
import View from './View';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import React from 'react';
import {HeightProperty, TopProperty} from 'csstype';
const Inner = styled(FlexColumn)(
({height}: {height: HeightProperty<number>}) => ({
const Inner = styled(FlexColumn)<{height: HeightProperty<number>}>(
({height}) => ({
alignItems: 'flex-start',
height,
minHeight: '100%',
@@ -26,7 +26,7 @@ const Inner = styled(FlexColumn)(
);
Inner.displayName = 'VirtualList:Inner';
const Content = styled(FlexColumn)(({top}: {top: TopProperty<number>}) => ({
const Content = styled(FlexColumn)<{top: TopProperty<number>}>(({top}) => ({
alignItems: 'flex-start',
height: '100%',
marginTop: top,
@@ -65,9 +65,9 @@ export default class VirtualList extends Component<
overscanCount: 10,
};
ref: HTMLElement | undefined;
ref: HTMLElement | undefined | null;
setRef = (ref: HTMLElement) => {
setRef = (ref: HTMLElement | null) => {
this.ref = ref;
};
@@ -136,7 +136,7 @@ export default class VirtualList extends Component<
<View
grow={true}
onScroll={this.handleScroll}
innerRef={this.setRef}
ref={this.setRef}
scrollable={true}>
{inner}
</View>

2
src/ui/components/console.tsx
View File

@@ -16,7 +16,7 @@ import Text from './Text';
import ManagedDataInspector from './data-inspector/ManagedDataInspector';
import Input from './Input';
import View from './View';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {TableBodyRow, TableRows} from './table/types';
import {PluginClient} from '../../plugin';

22
src/ui/components/data-inspector/DataDescription.tsx
View File

@@ -10,7 +10,7 @@
import Link from '../Link';
import {DataInspectorSetValue} from './DataInspector';
import {PureComponent} from 'react';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {SketchPicker} from 'react-color';
import {Component, Fragment} from 'react';
import Popover from '../Popover';
@@ -18,37 +18,37 @@ import {colors} from '../colors';
import Input from '../Input';
import React, {KeyboardEvent} from 'react';
const NullValue = styled('span')({
const NullValue = styled.span({
color: 'rgb(128, 128, 128)',
});
NullValue.displayName = 'DataDescription:NullValue';
const UndefinedValue = styled('span')({
const UndefinedValue = styled.span({
color: 'rgb(128, 128, 128)',
});
UndefinedValue.displayName = 'DataDescription:UndefinedValue';
const StringValue = styled('span')({
const StringValue = styled.span({
color: colors.cherryDark1,
});
StringValue.displayName = 'DataDescription:StringValue';
const ColorValue = styled('span')({
const ColorValue = styled.span({
color: colors.blueGrey,
});
ColorValue.displayName = 'DataDescription:ColorValue';
const SymbolValue = styled('span')({
const SymbolValue = styled.span({
color: 'rgb(196, 26, 22)',
});
SymbolValue.displayName = 'DataDescription:SymbolValue';
const NumberValue = styled('span')({
const NumberValue = styled.span({
color: colors.tealDark1,
});
NumberValue.displayName = 'DataDescription:NumberValue';
const ColorBox = styled('span')((props: {color: string}) => ({
const ColorBox = styled.span<{color: string}>(props => ({
backgroundColor: props.color,
boxShadow: 'inset 0 0 1px rgba(0, 0, 0, 1)',
display: 'inline-block',
@@ -59,18 +59,18 @@ const ColorBox = styled('span')((props: {color: string}) => ({
}));
ColorBox.displayName = 'DataDescription:ColorBox';
const FunctionKeyword = styled('span')({
const FunctionKeyword = styled.span({
color: 'rgb(170, 13, 145)',
fontStyle: 'italic',
});
FunctionKeyword.displayName = 'DataDescription:FunctionKeyword';
const FunctionName = styled('span')({
const FunctionName = styled.span({
fontStyle: 'italic',
});
FunctionName.displayName = 'DataDescription:FunctionName';
const ColorPickerDescription = styled('div')({
const ColorPickerDescription = styled.div({
display: 'inline',
position: 'relative',
});

18
src/ui/components/data-inspector/DataInspector.tsx
View File

@@ -12,7 +12,7 @@ import {MenuTemplate} from '../ContextMenu';
import {Component} from 'react';
import ContextMenu from '../ContextMenu';
import Tooltip from '../Tooltip';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import createPaste from '../../../fb-stubs/createPaste';
import {reportInteraction} from '../../../utils/InteractionTracker';
import DataPreview, {DataValueExtractor, InspectorName} from './DataPreview';
@@ -25,8 +25,8 @@ import {TooltipOptions} from '../TooltipProvider.js';
export {DataValueExtractor} from './DataPreview';
const BaseContainer = styled('div')(
(props: {depth?: number; disabled?: boolean}) => ({
const BaseContainer = styled.div<{depth?: number; disabled?: boolean}>(
props => ({
fontFamily: 'Menlo, monospace',
fontSize: 11,
lineHeight: '17px',
@@ -38,22 +38,22 @@ const BaseContainer = styled('div')(
);
BaseContainer.displayName = 'DataInspector:BaseContainer';
const RecursiveBaseWrapper = styled('span')({
const RecursiveBaseWrapper = styled.span({
color: colors.red,
});
RecursiveBaseWrapper.displayName = 'DataInspector:RecursiveBaseWrapper';
const Wrapper = styled('span')({
const Wrapper = styled.span({
color: '#555',
});
Wrapper.displayName = 'DataInspector:Wrapper';
const PropertyContainer = styled('span')({
const PropertyContainer = styled.span({
paddingTop: '2px',
});
PropertyContainer.displayName = 'DataInspector:PropertyContainer';
const ExpandControl = styled('span')({
const ExpandControl = styled.span({
color: '#6e6e6e',
fontSize: 10,
marginLeft: -11,
@@ -489,10 +489,10 @@ export default class DataInspector extends Component<DataInspectorProps> {
const keys = getSortedKeys({...value, ...diffValue});
const Added = styled('div')({
const Added = styled.div({
backgroundColor: colors.tealTint70,
});
const Removed = styled('div')({
const Removed = styled.div({
backgroundColor: colors.cherryTint70,
});

6
src/ui/components/data-inspector/DataPreview.tsx
View File

@@ -8,7 +8,7 @@
*/
import DataDescription from './DataDescription';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {getSortedKeys} from './utils';
import {PureComponent} from 'react';
import React from 'react';
@@ -26,12 +26,12 @@ export type DataValueExtractor = (
| undefined
| null;
export const InspectorName = styled('span')({
export const InspectorName = styled.span({
color: colors.grapeDark1,
});
InspectorName.displayName = 'DataInspector:InspectorName';
const PreviewContainer = styled('span')({
const PreviewContainer = styled.span({
fontStyle: 'italic',
});
PreviewContainer.displayName = 'DataPreview:PreviewContainer';

6
src/ui/components/desktop-toolbar.tsx
View File

@@ -7,11 +7,11 @@
* @format
*/
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {colors, darkColors} from './colors';
import React from 'react';
const DesktopDropdownContainer = styled('div')({
const DesktopDropdownContainer = styled.div({
borderBottom: `1px solid ${darkColors.dividers}`,
lineHeight: '25px',
marginTop: 5,
@@ -48,7 +48,7 @@ export function DesktopDropdown(props: {
);
}
const DesktopDropdownItemContainer = styled('div')(
const DesktopDropdownItemContainer = styled.div(
(props: {onClick?: Function; onHover?: Function}) => ({
listStyle: 'none',
opacity: props.onClick || props.onHover ? 1 : 0.5,

14
src/ui/components/elements-inspector/elements.tsx
View File

@@ -16,7 +16,7 @@ import FlexColumn from '../FlexColumn';
import Glyph from '../Glyph';
import {colors} from '../colors';
import Text from '../Text';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {clipboard, MenuItemConstructorOptions} from 'electron';
import React, {MouseEvent, KeyboardEvent} from 'react';
@@ -51,7 +51,7 @@ const backgroundColorHover = (props: {selected: boolean; focused: boolean}) => {
}
};
const ElementsRowContainer = styled(ContextMenu)((props: any) => ({
const ElementsRowContainer = styled(ContextMenu)<any>(props => ({
flexDirection: 'row',
alignItems: 'center',
backgroundColor: backgroundColor(props),
@@ -85,7 +85,7 @@ const ElementsRowDecoration = styled(FlexRow)({
});
ElementsRowDecoration.displayName = 'Elements:ElementsRowDecoration';
const ElementsLine = styled('div')((props: {childrenCount: number}) => ({
const ElementsLine = styled.div<{childrenCount: number}>(props => ({
backgroundColor: colors.light20,
height: props.childrenCount * ROW_HEIGHT - 4,
position: 'absolute',
@@ -97,7 +97,7 @@ const ElementsLine = styled('div')((props: {childrenCount: number}) => ({
}));
ElementsLine.displayName = 'Elements:ElementsLine';
const DecorationImage = styled('img')({
const DecorationImage = styled.img({
height: 12,
marginRight: 5,
width: 12,
@@ -121,12 +121,12 @@ const ElementsRowAttributeContainer = styled(NoShrinkText)({
ElementsRowAttributeContainer.displayName =
'Elements:ElementsRowAttributeContainer';
const ElementsRowAttributeKey = styled('span')({
const ElementsRowAttributeKey = styled.span({
color: colors.tomato,
});
ElementsRowAttributeKey.displayName = 'Elements:ElementsRowAttributeKey';
const ElementsRowAttributeValue = styled('span')({
const ElementsRowAttributeValue = styled.span({
color: colors.slateDark3,
});
ElementsRowAttributeValue.displayName = 'Elements:ElementsRowAttributeValue';
@@ -136,7 +136,7 @@ class PartialHighlight extends PureComponent<{
highlighted: string | undefined | null;
content: string;
}> {
static HighlightedText = styled('span')((props: {selected: boolean}) => ({
static HighlightedText = styled.span<{selected: boolean}>(props => ({
backgroundColor: colors.lemon,
color: props.selected ? `${colors.grapeDark3} !important` : 'auto',
}));

4
src/ui/components/filter/FilterRow.tsx
View File

@@ -11,10 +11,10 @@ import {Filter} from './types.js';
import React, {PureComponent} from 'react';
import ContextMenu from '../ContextMenu';
import textContent from '../../../utils/textContent';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {colors} from '../colors';
const FilterText = styled('div')({
const FilterText = styled.div({
display: 'flex',
alignSelf: 'baseline',
userSelect: 'none',

61
src/ui/components/searchable/FilterToken.tsx
View File

@@ -10,15 +10,14 @@
import {Filter} from '../filter/types';
import {PureComponent} from 'react';
import Text from '../Text';
import styled from 'react-emotion';
import {findDOMNode} from 'react-dom';
import styled from '@emotion/styled';
import {colors} from '../colors';
import electron, {MenuItemConstructorOptions} from 'electron';
import React from 'react';
import {ColorProperty} from 'csstype';
const Token = styled(Text)(
(props: {focused?: boolean; color?: ColorProperty}) => ({
const Token = styled(Text)<{focused?: boolean; color?: ColorProperty}>(
props => ({
display: 'inline-flex',
alignItems: 'center',
backgroundColor: props.focused
@@ -41,26 +40,27 @@ const Token = styled(Text)(
);
Token.displayName = 'FilterToken:Token';
const Key = styled(Text)(
(props: {type: 'exclude' | 'include' | 'enum'; focused?: boolean}) => ({
position: 'relative',
fontWeight: 500,
paddingRight: 12,
textTransform: 'capitalize',
lineHeight: '21px',
'&:after': {
content: props.type === 'exclude' ? '"≠"' : '"="',
paddingLeft: 5,
position: 'absolute',
top: -1,
right: 0,
fontSize: 14,
},
'&:active:after': {
backgroundColor: colors.macOSHighlightActive,
},
}),
);
const Key = styled(Text)<{
type: 'exclude' | 'include' | 'enum';
focused?: boolean;
}>(props => ({
position: 'relative',
fontWeight: 500,
paddingRight: 12,
textTransform: 'capitalize',
lineHeight: '21px',
'&:after': {
content: props.type === 'exclude' ? '"≠"' : '"="',
paddingLeft: 5,
position: 'absolute',
top: -1,
right: 0,
fontSize: 14,
},
'&:active:after': {
backgroundColor: colors.macOSHighlightActive,
},
}));
Key.displayName = 'FilterToken:Key';
const Value = styled(Text)({
@@ -73,7 +73,7 @@ const Value = styled(Text)({
});
Value.displayName = 'FilterToken:Value';
const Chevron = styled('div')((props: {focused?: boolean}) => ({
const Chevron = styled.div<{focused?: boolean}>(props => ({
border: 0,
paddingLeft: 3,
paddingRight: 1,
@@ -104,7 +104,7 @@ type Props = {
};
export default class FilterToken extends PureComponent<Props> {
_ref: Element | undefined;
_ref?: Element | null;
onMouseDown = () => {
if (
@@ -202,11 +202,8 @@ export default class FilterToken extends PureComponent<Props> {
}
};
setRef = (ref: React.ReactInstance) => {
const element = findDOMNode(ref);
if (element instanceof HTMLElement) {
this._ref = element;
}
setRef = (ref: HTMLSpanElement | null) => {
this._ref = ref;
};
render() {
@@ -240,7 +237,7 @@ export default class FilterToken extends PureComponent<Props> {
onMouseDown={this.onMouseDown}
focused={this.props.focused}
color={color}
innerRef={this.setRef}>
ref={this.setRef}>
<Key type={this.props.filter.type} focused={this.props.focused}>
{filter.key}
</Key>

46
src/ui/components/searchable/Searchable.tsx
View File

@@ -18,7 +18,7 @@ import Text from '../Text';
import FlexBox from '../FlexBox';
import Glyph from '../Glyph';
import FilterToken from './FilterToken';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import debounce from 'lodash.debounce';
import ToggleButton from '../ToggleSwitch';
import React from 'react';
@@ -40,24 +40,26 @@ export const SearchBox = styled(FlexBox)({
});
SearchBox.displayName = 'Searchable:SearchBox';
export const SearchInput = styled(Input)(
(props: {focus?: boolean; regex?: boolean; isValidInput?: boolean}) => ({
border: props.focus ? '1px solid black' : 0,
...(props.regex ? {fontFamily: 'monospace'} : {}),
padding: 0,
fontSize: '1em',
flexGrow: 1,
height: 'auto',
lineHeight: '100%',
marginLeft: 2,
width: '100%',
color: props.regex && !props.isValidInput ? colors.red : colors.black,
'&::-webkit-input-placeholder': {
color: colors.placeholder,
fontWeight: 300,
},
}),
);
export const SearchInput = styled(Input)<{
focus?: boolean;
regex?: boolean;
isValidInput?: boolean;
}>(props => ({
border: props.focus ? '1px solid black' : 0,
...(props.regex ? {fontFamily: 'monospace'} : {}),
padding: 0,
fontSize: '1em',
flexGrow: 1,
height: 'auto',
lineHeight: '100%',
marginLeft: 2,
width: '100%',
color: props.regex && !props.isValidInput ? colors.red : colors.black,
'&::-webkit-input-placeholder': {
color: colors.placeholder,
fontWeight: 300,
},
}));
SearchInput.displayName = 'Searchable:SearchInput';
const Clear = styled(Text)({
@@ -153,7 +155,7 @@ const Searchable = (
compiledRegex: null,
};
_inputRef: HTMLInputElement | undefined;
_inputRef: HTMLInputElement | undefined | null;
componentDidMount() {
window.document.addEventListener('keydown', this.onKeyDown);
@@ -348,7 +350,7 @@ const Searchable = (
}
}, 200);
setInputRef = (ref: HTMLInputElement | undefined) => {
setInputRef = (ref: HTMLInputElement | null) => {
this._inputRef = ref;
};
@@ -470,7 +472,7 @@ const Searchable = (
placeholder={placeholder}
onChange={this.onChangeSearchTerm}
value={this.state.searchTerm}
innerRef={this.setInputRef}
ref={this.setInputRef}
onFocus={this.onInputFocus}
onBlur={this.onInputBlur}
isValidInput={

4
src/ui/components/table/ManagedTable.tsx
View File

@@ -19,7 +19,7 @@ import {
} from './types';
import {MenuTemplate} from '../ContextMenu';
import React from 'react';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import AutoSizer from 'react-virtualized-auto-sizer';
import {VariableSizeList as List} from 'react-window';
import {clipboard, MenuItemConstructorOptions} from 'electron';
@@ -144,7 +144,7 @@ type ManagedTableState = {
shouldScrollToBottom: boolean;
};
const Container = styled(FlexColumn)((props: {canOverflow?: boolean}) => ({
const Container = styled(FlexColumn)<{canOverflow?: boolean}>(props => ({
overflow: props.canOverflow ? 'scroll' : 'visible',
flexGrow: 1,
}));

4
src/ui/components/table/ManagedTable_immutable.tsx
View File

@@ -20,7 +20,7 @@ import {
import {MenuTemplate} from '../ContextMenu';
import React from 'react';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import AutoSizer from 'react-virtualized-auto-sizer';
import {VariableSizeList as List} from 'react-window';
import {clipboard, MenuItemConstructorOptions} from 'electron';
@@ -141,7 +141,7 @@ type ManagedTableState = {
shouldScrollToBottom: boolean;
};
const Container = styled(FlexColumn)((props: {canOverflow?: boolean}) => ({
const Container = styled(FlexColumn)<{canOverflow?: boolean}>(props => ({
overflow: props.canOverflow ? 'scroll' : 'visible',
flexGrow: 1,
}));

20
src/ui/components/table/TableHead.tsx
View File

@@ -19,14 +19,14 @@ import {normaliseColumnWidth, isPercentage} from './utils';
import {PureComponent} from 'react';
import ContextMenu from '../ContextMenu';
import Interactive from '../Interactive';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import {colors} from '../colors';
import FlexRow from '../FlexRow';
import invariant from 'invariant';
import {MenuItemConstructorOptions} from 'electron';
import React from 'react';
const TableHeaderArrow = styled('span')({
const TableHeaderArrow = styled.span({
float: 'right',
});
TableHeaderArrow.displayName = 'TableHead:TableHeaderArrow';
@@ -41,13 +41,13 @@ const TableHeaderColumnInteractive = styled(Interactive)({
TableHeaderColumnInteractive.displayName =
'TableHead:TableHeaderColumnInteractive';
const TableHeaderColumnContainer = styled('div')({
const TableHeaderColumnContainer = styled.div({
padding: '0 8px',
});
TableHeaderColumnContainer.displayName = 'TableHead:TableHeaderColumnContainer';
const TableHeadContainer = styled(FlexRow)(
(props: {horizontallyScrollable?: boolean}) => ({
const TableHeadContainer = styled(FlexRow)<{horizontallyScrollable?: boolean}>(
props => ({
borderBottom: `1px solid ${colors.sectionHeaderBorder}`,
color: colors.light50,
flexShrink: 0,
@@ -62,8 +62,8 @@ const TableHeadContainer = styled(FlexRow)(
);
TableHeadContainer.displayName = 'TableHead:TableHeadContainer';
const TableHeadColumnContainer = styled('div')(
(props: {width: string | number}) => ({
const TableHeadColumnContainer = styled.div<{width: string | number}>(
props => ({
position: 'relative',
backgroundColor: colors.white,
flexShrink: props.width === 'flex' ? 1 : 0,
@@ -109,7 +109,7 @@ class TableHeadColumn extends PureComponent<{
title?: string;
horizontallyScrollable?: boolean;
}> {
ref: HTMLElement | undefined;
ref: HTMLElement | undefined | null;
componentDidMount() {
if (this.props.horizontallyScrollable && this.ref) {
@@ -164,7 +164,7 @@ class TableHeadColumn extends PureComponent<{
onColumnResize(id, normalizedWidth);
};
setRef = (ref: HTMLElement) => {
setRef = (ref: HTMLElement | null) => {
this.ref = ref;
};
@@ -192,7 +192,7 @@ class TableHeadColumn extends PureComponent<{
width={width}
title={title}
onClick={sortable === true ? this.onClick : undefined}
innerRef={this.setRef}>
ref={this.setRef}>
{children}
</TableHeadColumnContainer>
);

12
src/ui/components/table/TableRow.tsx
View File

@@ -15,7 +15,7 @@ import {
} from './types';
import React from 'react';
import FilterRow from '../filter/FilterRow';
import styled from 'react-emotion';
import styled from '@emotion/styled';
import FlexRow from '../FlexRow';
import {colors} from '../colors';
import {normaliseColumnWidth} from './utils';
@@ -58,8 +58,8 @@ const backgroundColor = (props: TableBodyRowContainerProps) => {
}
};
const TableBodyRowContainer = styled(FlexRow)(
(props: TableBodyRowContainerProps) => ({
const TableBodyRowContainer = styled(FlexRow)<TableBodyRowContainerProps>(
props => ({
backgroundColor: backgroundColor(props),
boxShadow: props.zebra ? 'none' : 'inset 0 -1px #E9EBEE',
color: props.highlighted ? colors.white : props.color || undefined,
@@ -86,7 +86,11 @@ const TableBodyRowContainer = styled(FlexRow)(
);
TableBodyRowContainer.displayName = 'TableRow:TableBodyRowContainer';
const TableBodyColumnContainer = styled('div')(
const TableBodyColumnContainer = styled.div<{
width?: any;
multiline?: boolean;
justifyContent: JustifyContentProperty;
}>(
(props: {
width?: any;
multiline?: boolean;

4
src/ui/components/table/TypeBasedValueRenderer.tsx
View File

@@ -7,7 +7,7 @@
* @format
*/
import {default as styled} from 'react-emotion';
import {default as styled} from '@emotion/styled';
import {colors} from '../colors';
import {default as Text} from '../Text';
import React from 'react';
@@ -37,7 +37,7 @@ const NonWrappingText = styled(Text)({
});
NonWrappingText.displayName = 'TypeBasedValueRenderer:NonWrappingText';
const BooleanValue = styled(NonWrappingText)((props: {active?: boolean}) => ({
const BooleanValue = styled(NonWrappingText)<{active?: boolean}>(props => ({
'&::before': {
content: '""',
display: 'inline-block',

2
src/ui/index.tsx
View File

@@ -7,7 +7,7 @@
* @format
*/
export {default as styled} from 'react-emotion';
export {default as styled} from '@emotion/styled';
export {default as Button} from './components/Button';
export {default as ToggleButton} from './components/ToggleSwitch';
export {default as ButtonNavigationGroup} from './components/ButtonNavigationGroup';