Orderable

Summary: _typescript_

Reviewed By: priteshrnandgaonkar

Differential Revision: D16828817

fbshipit-source-id: 24e35d29730d2b336a478fee41baa84af2892d12

src/ui/components/Orderable.tsx

@@ -5,58 +5,59 @@
  * @format
  */
 
-import type {Rect} from '../../utils/geometry.tsx';
+import {Rect} from '../../utils/geometry';
-import styled from '../styled/index.js';
+import styled from 'react-emotion';
 import {Component} from 'react';
-
+import React from 'react';
-const React = require('react');
 
 export type OrderableOrder = Array<string>;
 
 type OrderableOrientation = 'horizontal' | 'vertical';
 
 type OrderableProps = {
-  items: {[key: string]: React.Element<*>},
+  items: {[key: string]: React.ReactNode};
-  orientation: OrderableOrientation,
+  orientation: OrderableOrientation;
-  onChange?: (order: OrderableOrder, key: string) => void,
+  onChange?: (order: OrderableOrder, key: string) => void;
-  order?: ?OrderableOrder,
+  order?: OrderableOrder | null | undefined;
-  className?: string,
+  className?: string;
-  reverse?: boolean,
+  reverse?: boolean;
-  altKey?: boolean,
+  altKey?: boolean;
-  moveDelay?: number,
+  moveDelay?: number;
-  dragOpacity?: number,
+  dragOpacity?: number;
-  ignoreChildEvents?: boolean,
+  ignoreChildEvents?: boolean;
 };
 
-type OrderableState = {|
+type OrderableState = {
-  order?: ?OrderableOrder,
+  order?: OrderableOrder | null | undefined;
-  movingOrder?: ?OrderableOrder,
+  movingOrder?: OrderableOrder | null | undefined;
-|};
+};
 
 type TabSizes = {
-  [key: string]: Rect,
+  [key: string]: Rect;
 };
 
 const OrderableContainer = styled('div')({
   position: 'relative',
 });
 
-const OrderableItemContainer = styled('div')(props => ({
+const OrderableItemContainer = styled('div')(
+  (props: {orientation: 'vertical' | 'horizontal'}) => ({
     display: props.orientation === 'vertical' ? 'block' : 'inline-block',
-}));
+  }),
+);
 
 class OrderableItem extends Component<{
-  orientation: OrderableOrientation,
+  orientation: OrderableOrientation;
-  id: string,
+  id: string;
-  children?: React$Node,
+  children?: React.ReactNode;
-  addRef: (key: string, ref: HTMLElement) => void,
+  addRef: (key: string, ref: HTMLElement) => void;
-  startMove: (KEY: string, event: SyntheticMouseEvent<>) => void,
+  startMove: (KEY: string, event: React.MouseEvent) => void;
 }> {
   addRef = (ref: HTMLElement) => {
     this.props.addRef(this.props.id, ref);
   };
 
-  startMove = (event: SyntheticMouseEvent<>) => {
+  startMove = (event: React.MouseEvent) => {
     this.props.startMove(this.props.id, event);
   };
 
@@ -75,7 +76,7 @@ class OrderableItem extends Component<{
 
 export default class Orderable extends React.Component<
   OrderableProps,
-  OrderableState,
+  OrderableState
 > {
   constructor(props: OrderableProps, context: Object) {
     super(props, context);
@@ -84,8 +85,8 @@ export default class Orderable extends React.Component<
     this.setProps(props);
   }
 
-  _mousemove: ?Function;
+  _mousemove: (this: GlobalEventHandlers, ev: MouseEvent) => any | undefined;
-  _mouseup: ?Function;
+  _mouseup: (this: GlobalEventHandlers, ev: MouseEvent) => any | undefined;
   timer: any;
 
   sizeKey: 'width' | 'height';
@@ -93,9 +94,9 @@ export default class Orderable extends React.Component<
   mouseKey: 'offsetX' | 'offsetY';
   screenKey: 'screenX' | 'screenY';
 
-  containerRef: ?HTMLElement;
+  containerRef: HTMLElement | undefined;
   tabRefs: {
-    [key: string]: ?HTMLElement,
+    [key: string]: HTMLElement | undefined;
   };
 
   static defaultProps = {
@@ -122,15 +123,17 @@ export default class Orderable extends React.Component<
     this.setProps(nextProps);
   }
 
-  startMove = (key: string, event: SyntheticMouseEvent<*>) => {
+  startMove = (key: string, event: React.MouseEvent<Element, MouseEvent>) => {
     if (this.props.altKey === true && event.altKey === false) {
       return;
     }
 
     if (this.props.ignoreChildEvents === true) {
       const tabRef = this.tabRefs[key];
-      // $FlowFixMe parentNode not implemented
+      if (
-      if (event.target !== tabRef && event.target.parentNode !== tabRef) {
+        event.currentTarget !== tabRef &&
+        event.currentTarget.parentNode !== tabRef
+      ) {
         return;
       }
     }
@@ -155,7 +158,7 @@ export default class Orderable extends React.Component<
     }
   };
 
-  _startMove(activeKey: string, event: SyntheticMouseEvent<>) {
+  _startMove(activeKey: string, event: React.MouseEvent) {
     // $FlowFixMe
     const clickOffset = event.nativeEvent[this.mouseKey];
 
@@ -283,7 +286,11 @@ export default class Orderable extends React.Component<
     this.setState({movingOrder: order});
   }
 
-  moveTabs(order: OrderableOrder, activeKey: ?string, sizes: TabSizes) {
+  moveTabs(
+    order: OrderableOrder,
+    activeKey: string | null | undefined,
+    sizes: TabSizes,
+  ) {
     let offset = 0;
     for (const key of order) {
       const size = sizes[key];
@@ -369,7 +376,7 @@ export default class Orderable extends React.Component<
     this.reset();
   }
 
-  addRef = (key: string, elem: ?HTMLElement) => {
+  addRef = (key: string, elem: HTMLElement | undefined) => {
     this.tabRefs[key] = elem;
   };
 

src/ui/components/Tabs.js

@@ -7,7 +7,7 @@
 
 import FlexColumn from './FlexColumn.js';
 import styled from '../styled/index.js';
-import Orderable from './Orderable.js';
+import Orderable from './Orderable.tsx';
 import FlexRow from './FlexRow.js';
 import {colors} from './colors.tsx';
 import Tab from './Tab.js';

src/ui/index.js

@@ -85,9 +85,9 @@ export {ErrorBlockContainer} from './components/ErrorBlock.js';
 export {default as ErrorBoundary} from './components/ErrorBoundary.js';
 
 // interactive components
-export type {OrderableOrder} from './components/Orderable.js';
+export type {OrderableOrder} from './components/Orderable.tsx';
 export {default as Interactive} from './components/Interactive.js';
-export {default as Orderable} from './components/Orderable.js';
+export {default as Orderable} from './components/Orderable.tsx';
 export {default as VirtualList} from './components/VirtualList.js';
 
 // base components