From 3691305b4de75f907e1b8746ca98a636c91a19cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20B=C3=BCchele?= Date: Tue, 20 Aug 2019 03:18:32 -0700 Subject: [PATCH] MarkerTimeline Summary: _typescript_ Reviewed By: priteshrnandgaonkar Differential Revision: D16828814 fbshipit-source-id: 13b86338a73a4838857a31e16ea184e35ebfa7d0 --- .../{MarkerTimeline.js => MarkerTimeline.tsx} | 166 ++++++++++-------- ...lectron.js => MarkerTimeline.electron.tsx} | 0 ....snap => MarkerTimeline.electron.tsx.snap} | 0 src/ui/index.js | 2 +- 4 files changed, 89 insertions(+), 79 deletions(-) rename src/ui/components/{MarkerTimeline.js => MarkerTimeline.tsx} (58%) rename src/ui/components/__tests__/{MarkerTimeline.electron.js => MarkerTimeline.electron.tsx} (100%) rename src/ui/components/__tests__/__snapshots__/{MarkerTimeline.electron.js.snap => MarkerTimeline.electron.tsx.snap} (100%) diff --git a/src/ui/components/MarkerTimeline.js b/src/ui/components/MarkerTimeline.tsx similarity index 58% rename from src/ui/components/MarkerTimeline.js rename to src/ui/components/MarkerTimeline.tsx index bb950ae18..8c546a252 100644 --- a/src/ui/components/MarkerTimeline.js +++ b/src/ui/components/MarkerTimeline.tsx @@ -6,27 +6,28 @@ */ import {Component} from 'react'; -import styled from '../styled/index.js'; -import Text from './Text.js'; -import FlexRow from './FlexRow.js'; -import {colors} from './colors.tsx'; +import styled from 'react-emotion'; +import Text from './Text'; +import FlexRow from './FlexRow'; +import {colors} from './colors'; +import React from 'react'; type DataPoint = { - time: number, - color?: string, - label: string, - key: string, + time: number; + color?: string; + label: string; + key: string; }; -type Props = {| - onClick?: (keys: Array) => mixed, - selected?: ?string, - points: Array, - lineHeight: number, - maxGap: number, -|}; +type Props = { + onClick?: (keys: Array) => void; + selected?: string | null | undefined; + points: DataPoint[]; + lineHeight: number; + maxGap: number; +}; -const Markers = styled('div')(props => ({ +const Markers = styled('div')((props: {totalTime: number}) => ({ position: 'relative', margin: 10, height: props.totalTime, @@ -41,61 +42,70 @@ const Markers = styled('div')(props => ({ }, })); -const Point = styled(FlexRow)(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}` - : null, - }, - '::after': { - content: props.cut ? '""' : null, +const Point = styled(FlexRow)( + (props: { + positionY: number; + onClick: Function; + number: number; + threadColor: string; + selected: boolean; + cut: boolean; + }) => ({ position: 'absolute', - width: 11, - top: -20, + top: props.positionY, left: 0, - height: 2, - background: colors.white, - borderTop: `1px solid ${colors.light30}`, - borderBottom: `1px solid ${colors.light30}`, - transform: `skewY(-10deg)`, - }, -})); + 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}` + : null, + }, + '::after': { + content: props.cut ? '""' : null, + 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)`, + }, + }), +); const Time = styled('span')({ color: colors.light30, - fontWeight: '300', + fontWeight: 300, marginRight: 4, marginTop: -2, }); @@ -107,17 +117,17 @@ const Code = styled(Text)({ }); type TimePoint = { - timestamp: number, - markerNames: Array, - markerKeys: Array, - isCut: boolean, - positionY: number, - color: string, + timestamp: number; + markerNames: Array; + markerKeys: Array; + isCut: boolean; + positionY: number; + color: string; }; -type State = {| - timePoints: Array, -|}; +type State = { + timePoints: Array; +}; export default class MarkerTimeline extends Component { static defaultProps = { @@ -126,9 +136,9 @@ export default class MarkerTimeline extends Component { }; static getDerivedStateFromProps(props: Props) { - const sortedMarkers: Array<[number, Array]> = Array.from( + const sortedMarkers: [number, DataPoint[]][] = Array.from( props.points - .reduce((acc: Map>, cv: DataPoint) => { + .reduce((acc: Map, cv: DataPoint) => { const list = acc.get(cv.time); if (list) { list.push(cv); @@ -136,7 +146,7 @@ export default class MarkerTimeline extends Component { acc.set(cv.time, [cv]); } return acc; - }, (new Map(): Map>)) + }, new Map()) .entries(), ).sort((a, b) => a[0] - b[0]); diff --git a/src/ui/components/__tests__/MarkerTimeline.electron.js b/src/ui/components/__tests__/MarkerTimeline.electron.tsx similarity index 100% rename from src/ui/components/__tests__/MarkerTimeline.electron.js rename to src/ui/components/__tests__/MarkerTimeline.electron.tsx diff --git a/src/ui/components/__tests__/__snapshots__/MarkerTimeline.electron.js.snap b/src/ui/components/__tests__/__snapshots__/MarkerTimeline.electron.tsx.snap similarity index 100% rename from src/ui/components/__tests__/__snapshots__/MarkerTimeline.electron.js.snap rename to src/ui/components/__tests__/__snapshots__/MarkerTimeline.electron.tsx.snap diff --git a/src/ui/index.js b/src/ui/index.js index c58d97f46..09fdeab60 100644 --- a/src/ui/index.js +++ b/src/ui/index.js @@ -144,7 +144,7 @@ export {default as Heading} from './components/Heading.js'; // filters export type {Filter} from './components/filter/types.js'; -export {default as MarkerTimeline} from './components/MarkerTimeline.js'; +export {default as MarkerTimeline} from './components/MarkerTimeline.tsx'; export {default as StackTrace} from './components/StackTrace.js';