From 28a295bcf11fb236b7a5e2f25b07c9f42bee917f 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] Interactive Summary: _typescript_ Reviewed By: passy Differential Revision: D16830548 fbshipit-source-id: d0530ef3491af95bece7fba610a4b1cf19c80bd1 --- .../{Interactive.js => Interactive.tsx} | 180 +++++++++--------- src/ui/components/Sidebar.tsx | 2 +- src/ui/components/table/TableHead.js | 2 +- src/ui/index.js | 2 +- 4 files changed, 97 insertions(+), 89 deletions(-) rename src/ui/components/{Interactive.js => Interactive.tsx} (83%) diff --git a/src/ui/components/Interactive.js b/src/ui/components/Interactive.tsx similarity index 83% rename from src/ui/components/Interactive.js rename to src/ui/components/Interactive.tsx index bf4de175a..cb9a5f73f 100644 --- a/src/ui/components/Interactive.js +++ b/src/ui/components/Interactive.tsx @@ -5,31 +5,34 @@ * @format */ -import type {Rect} from '../../utils/geometry.tsx'; -import LowPassFilter from '../../utils/LowPassFilter.tsx'; +import {Rect} from '../../utils/geometry'; +import LowPassFilter from '../../utils/LowPassFilter'; import { getDistanceTo, maybeSnapLeft, maybeSnapTop, SNAP_SIZE, -} from '../../utils/snap.tsx'; -import styled from '../styled/index.js'; +} from '../../utils/snap'; +import styled from 'react-emotion'; import invariant from 'invariant'; import React from 'react'; const WINDOW_CURSOR_BOUNDARY = 5; -type CursorState = {| - top: number, - left: number, -|}; +type CursorState = { + top: number; + left: number; +}; -type ResizingSides = ?{| - left?: boolean, - top?: boolean, - bottom?: boolean, - right?: boolean, -|}; +type ResizingSides = + | { + left?: boolean; + top?: boolean; + bottom?: boolean; + right?: boolean; + } + | null + | undefined; const ALL_RESIZABLE: ResizingSides = { bottom: true, @@ -38,52 +41,52 @@ const ALL_RESIZABLE: ResizingSides = { top: true, }; -type InteractiveProps = {| - isMovableAnchor?: (event: SyntheticMouseEvent<>) => boolean, - onMoveStart?: () => void, - onMoveEnd?: () => void, - onMove?: (top: number, left: number, event: SyntheticMouseEvent<>) => void, - id?: string, - movable?: boolean, - hidden?: boolean, - moving?: boolean, - grow?: boolean, - siblings?: $Shape<{[key: string]: $Shape}>, - updateCursor?: (cursor: ?string) => void, - zIndex?: number, - top?: number, - left?: number, - minTop: number, - minLeft: number, - width?: number | string, - height?: number | string, - minWidth: number, - minHeight: number, - maxWidth?: number, - maxHeight?: number, - onCanResize?: (sides: ResizingSides) => void, - onResizeStart?: () => void, - onResizeEnd?: () => void, - onResize?: (width: number, height: number) => void, - resizing?: boolean, - resizable?: boolean | ResizingSides, - innerRef?: (elem: HTMLElement) => void, - style?: Object, - className?: string, - children?: React$Element<*>, -|}; +type InteractiveProps = { + isMovableAnchor?: (event: React.MouseEvent) => boolean; + onMoveStart?: () => void; + onMoveEnd?: () => void; + onMove?: (top: number, left: number, event: MouseEvent) => void; + id?: string; + movable?: boolean; + hidden?: boolean; + moving?: boolean; + grow?: boolean; + siblings?: Partial<{[key: string]: Rect}>; + updateCursor?: (cursor?: string | null | undefined) => void; + zIndex?: number; + top?: number; + left?: number; + minTop?: number; + minLeft?: number; + width?: number | string; + height?: number | string; + minWidth: number; + minHeight: number; + maxWidth?: number; + maxHeight?: number; + onCanResize?: (sides: ResizingSides) => void; + onResizeStart?: () => void; + onResizeEnd?: () => void; + onResize?: (width: number, height: number) => void; + resizing?: boolean; + resizable?: boolean | ResizingSides; + innerRef?: (elem: HTMLElement) => void; + style?: Object; + className?: string; + children?: React.ReactNode; +}; -type InteractiveState = {| - moving: boolean, - movingInitialProps: ?InteractiveProps, - movingInitialCursor: ?CursorState, - cursor: ?string, - resizingSides: ResizingSides, - couldResize: boolean, - resizing: boolean, - resizingInitialRect: ?Rect, - resizingInitialCursor: ?CursorState, -|}; +type InteractiveState = { + moving: boolean; + movingInitialProps: InteractiveProps | null | undefined; + movingInitialCursor: CursorState | null | undefined; + cursor: string | null | undefined; + resizingSides: ResizingSides; + couldResize: boolean; + resizing: boolean; + resizingInitialRect: Rect | null | undefined; + resizingInitialCursor: CursorState | null | undefined; +}; const InteractiveContainer = styled('div')({ willChange: 'transform, height, width, z-index', @@ -91,7 +94,7 @@ const InteractiveContainer = styled('div')({ export default class Interactive extends React.Component< InteractiveProps, - InteractiveState, + InteractiveState > { constructor(props: InteractiveProps, context: Object) { super(props, context); @@ -114,9 +117,9 @@ export default class Interactive extends React.Component< globalMouse: boolean; ref: HTMLElement; - nextTop: ?number; - nextLeft: ?number; - nextEvent: ?SyntheticMouseEvent<>; + nextTop: number | null | undefined; + nextLeft: number | null | undefined; + nextEvent: MouseEvent | null | undefined; static defaultProps = { minHeight: 0, @@ -125,7 +128,7 @@ export default class Interactive extends React.Component< minWidth: 0, }; - onMouseMove = (event: SyntheticMouseEvent<>) => { + onMouseMove = (event: MouseEvent) => { if (this.state.moving) { this.calculateMove(event); } else if (this.state.resizing) { @@ -135,7 +138,7 @@ export default class Interactive extends React.Component< } }; - startAction = (event: SyntheticMouseEvent<>) => { + startAction = (event: React.MouseEvent) => { this.globalMouse = true; window.addEventListener('pointerup', this.endAction, {passive: true}); window.addEventListener('pointermove', this.onMouseMove, {passive: true}); @@ -148,7 +151,7 @@ export default class Interactive extends React.Component< } }; - startTitleAction(event: SyntheticMouseEvent<>) { + startTitleAction(event: React.MouseEvent) { if (this.state.couldResize) { this.startResizeAction(event); } else if (this.props.movable === true) { @@ -156,7 +159,7 @@ export default class Interactive extends React.Component< } } - startMoving(event: SyntheticMouseEvent<>) { + startMoving(event: React.MouseEvent) { const {onMoveStart} = this.props; if (onMoveStart) { onMoveStart(); @@ -229,13 +232,13 @@ export default class Interactive extends React.Component< return closeWindows; } - startWindowAction(event: SyntheticMouseEvent<>) { + startWindowAction(event: React.MouseEvent) { if (this.state.couldResize) { this.startResizeAction(event); } } - startResizeAction(event: SyntheticMouseEvent<>) { + startResizeAction(event: React.MouseEvent) { event.stopPropagation(); event.preventDefault(); @@ -254,7 +257,10 @@ export default class Interactive extends React.Component< }); } - componentDidUpdate(prevProps: InteractiveProps, prevState: InteractiveState) { + componentDidUpdate( + _prevProps: InteractiveProps, + prevState: InteractiveState, + ) { if (prevState.cursor !== this.state.cursor) { const {updateCursor} = this.props; if (updateCursor) { @@ -323,13 +329,13 @@ export default class Interactive extends React.Component< } }; - onClick = (e: SyntheticMouseEvent<>) => { + onClick = (e: React.MouseEvent) => { if (this.state.couldResize) { e.stopPropagation(); } }; - calculateMove(event: SyntheticMouseEvent<>) { + calculateMove(event: MouseEvent) { const {movingInitialCursor, movingInitialProps} = this.state; invariant(movingInitialProps, 'TODO'); @@ -380,7 +386,7 @@ export default class Interactive extends React.Component< onResize(width, height); } - move(top: number, left: number, event: SyntheticMouseEvent<>) { + move(top: number, left: number, event: MouseEvent) { top = Math.max(this.props.minTop, top); left = Math.max(this.props.minLeft, left); @@ -395,7 +401,7 @@ export default class Interactive extends React.Component< } } - calculateResize(event: SyntheticMouseEvent<>) { + calculateResize(event: MouseEvent) { const { resizingInitialCursor, resizingInitialRect, @@ -514,13 +520,15 @@ export default class Interactive extends React.Component< } checkIfResizable( - event: SyntheticMouseEvent<>, - ): ?{| - left: boolean, - right: boolean, - top: boolean, - bottom: boolean, - |} { + event: MouseEvent, + ): + | { + left: boolean; + right: boolean; + top: boolean; + bottom: boolean; + } + | undefined { const canResize = this.getResizable(); if (!canResize) { return; @@ -546,7 +554,7 @@ export default class Interactive extends React.Component< }; } - calculateResizable(event: SyntheticMouseEvent<>) { + calculateResizable(event: MouseEvent) { const resizing = this.checkIfResizable(event); if (!resizing) { return; @@ -629,7 +637,7 @@ export default class Interactive extends React.Component< const {onCanResize} = this.props; if (onCanResize) { - onCanResize(); + onCanResize({}); } this.setState({ @@ -648,16 +656,16 @@ export default class Interactive extends React.Component< } }; - onLocalMouseMove = (event: SyntheticMouseEvent<>) => { + onLocalMouseMove = (event: React.MouseEvent) => { if (!this.globalMouse) { - this.onMouseMove(event); + this.onMouseMove(event.nativeEvent); } }; render() { const {grow, height, left, movable, top, width, zIndex} = this.props; - const style: Object = { + const style: React.CSSProperties = { cursor: this.state.cursor, zIndex: zIndex == null ? 'auto' : zIndex, }; diff --git a/src/ui/components/Sidebar.tsx b/src/ui/components/Sidebar.tsx index f39b1aa04..79aa17155 100644 --- a/src/ui/components/Sidebar.tsx +++ b/src/ui/components/Sidebar.tsx @@ -5,7 +5,7 @@ * @format */ -import Interactive from './Interactive.js'; +import Interactive from './Interactive'; import FlexColumn from './FlexColumn.js'; import {colors} from './colors'; import {Component} from 'react'; diff --git a/src/ui/components/table/TableHead.js b/src/ui/components/table/TableHead.js index c125275af..4efc09c33 100644 --- a/src/ui/components/table/TableHead.js +++ b/src/ui/components/table/TableHead.js @@ -17,7 +17,7 @@ import type { import {normaliseColumnWidth, isPercentage} from './utils.js'; import {PureComponent} from 'react'; import ContextMenu from '../ContextMenu.js'; -import Interactive from '../Interactive.js'; +import Interactive from '../Interactive.tsx'; import styled from '../../styled/index.js'; import {colors} from '../colors.tsx'; diff --git a/src/ui/index.js b/src/ui/index.js index ad0313784..16f26e2c0 100644 --- a/src/ui/index.js +++ b/src/ui/index.js @@ -86,7 +86,7 @@ export {default as ErrorBoundary} from './components/ErrorBoundary.js'; // interactive components export type {OrderableOrder} from './components/Orderable.tsx'; -export {default as Interactive} from './components/Interactive.js'; +export {default as Interactive} from './components/Interactive.tsx'; export {default as Orderable} from './components/Orderable.tsx'; export {default as VirtualList} from './components/VirtualList.tsx';