Merge pull request mui#2 from nathanmarks/next-flow

modalManager and space after colon linting
nathanmarks · Jul 8, 2016 · afad7eb · afad7eb
2 parents 29e4599 + 3c8e827
commit afad7eb
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 25 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -17,17 +17,14 @@ module.exports = {
     }
   },
   plugins: [
-    "flow-vars",
+    'flowtype',
+    'flow-vars',
     'babel',
     'react',
     'mocha',
     'material-ui',
   ],
   rules: {
-    // Flow
-    "flow-vars/define-flow-type": 1,
-    "flow-vars/use-flow-type": 1,
-
     // Errors
     'array-bracket-spacing': ['error', 'never'],
     'arrow-spacing': 'error',
@@ -92,6 +89,11 @@ module.exports = {
     // Babel
     'babel/object-curly-spacing': ['error', 'never'],
 
+    // Flow
+    'flow-vars/define-flow-type': 'error',
+    'flow-vars/use-flow-type': 'error',
+    'flowtype/space-after-type-colon': ['error', 'always'],
+
     // React
     'react/display-name': 'error',
     'react/jsx-boolean-value': ['error', 'always'],

diff --git a/package.json b/package.json
@@ -89,6 +89,7 @@
     "eslint": "^2.9.0",
     "eslint-plugin-babel": "^3.2.0",
     "eslint-plugin-flow-vars": "^0.4.0",
+    "eslint-plugin-flowtype": "^2.3.0",
     "eslint-plugin-material-ui": "./packages/eslint-plugin-material-ui",
     "eslint-plugin-mocha": "^3.0.0",
     "eslint-plugin-react": "^5.0.1",

diff --git a/src/internal/Modal.js b/src/internal/Modal.js
@@ -18,14 +18,7 @@ import coerce from '../utils/coerce';
 // Modals don't open on the server
 // so this won't break concurrency
 // ...........Could also put this on context....
-// TODO: refactor #createModalManager into a type-checked class
-declare class ModalManager{
-  add(modal:Modal):void;
-  remove(modal:Modal):void;
-  isTopModal(modal:Modal):boolean;
-}
-
-const modalManager:ModalManager = createModalManager();
+const modalManager = createModalManager();
 
 export const styleSheet = createStyleSheet('Modal', (theme) => {
   return {
@@ -42,9 +35,9 @@ export const styleSheet = createStyleSheet('Modal', (theme) => {
 });
 
 type DefaultProps = {
-  modalManager: ModalManager,
+  modalManager: typeof modalManager,
   show: boolean,
-}
+};
 
 type Props = {
   /**
@@ -55,7 +48,7 @@ type Props = {
    * The CSS class name of the root element.
    */
   className?: string,
-  modalManager: ModalManager,
+  modalManager: typeof modalManager,
   /**
    * Callback fired after the Modal finishes transitioning out
    */
@@ -67,7 +60,7 @@ type Props = {
 
 type State = {
   exited: boolean,
-}
+};
 
 export default class Modal extends Component<DefaultProps, Props, State> {
   static contextTypes = {

diff --git a/src/internal/modalManager.js b/src/internal/modalManager.js
@@ -1,9 +1,15 @@
+// @flow
 import css from 'dom-helpers/style';
 import isWindow from 'dom-helpers/query/isWindow';
 import ownerDocument from 'dom-helpers/ownerDocument';
 import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
 import {hideSiblings, showSiblings, ariaHidden} from '../utils/manageAriaHidden';
 
+type modalManagerArg = {
+  container: HTMLElement,
+  hideSiblingNodes: boolean,
+};
+
 /**
  * State managment helper for modals/layers.
  * Simplified, but inspired by react-overlay's ModalManager class
@@ -13,14 +19,14 @@ import {hideSiblings, showSiblings, ariaHidden} from '../utils/manageAriaHidden'
 export function createModalManager({
   container = window.document.body,
   hideSiblingNodes = true,
-} = {}) {
+}: modalManagerArg = {}) {
   const modals = [];
   const modalManager = {add, remove, isTopModal};
 
   let prevOverflow;
   let prevPadding;
 
-  function add(modal) {
+  function add(modal: Object): number {
     let modalIdx = modals.indexOf(modal);
 
     if (modalIdx !== -1) {
@@ -34,7 +40,9 @@ export function createModalManager({
       hideSiblings(container, modal.mountNode);
     }
 
-    const containerStyle = {overflow: 'hidden'};
+    const containerStyle = {};
+
+    containerStyle.overflow = 'hidden';
 
     // Save our current overflow so we can revert
     // back to it when all modals are closed!
@@ -50,7 +58,7 @@ export function createModalManager({
     return modalIdx;
   }
 
-  function remove(modal) {
+  function remove(modal: Object): number {
     const modalIdx = modals.indexOf(modal);
 
     if (modalIdx === -1) {
@@ -60,8 +68,8 @@ export function createModalManager({
     modals.splice(modalIdx, 1);
 
     if (modals.length === 0) {
-      container.style.overflow = prevOverflow;
-      container.style.paddingRight = prevPadding;
+      container.style.overflow = typeof prevOverflow === 'string' ? prevOverflow : '';
+      container.style.paddingRight = typeof prevPadding === 'string' ? prevPadding : '';
       prevOverflow = undefined;
       prevPadding = undefined;
       if (hideSiblingNodes) {
@@ -75,7 +83,7 @@ export function createModalManager({
     return modalIdx;
   }
 
-  function isTopModal(modal) {
+  function isTopModal(modal: Object): boolean {
     return !!modals.length && modals[modals.length - 1] === modal;
   }
 

diff --git a/src/internal/transitions/Slide.js b/src/internal/transitions/Slide.js
@@ -42,7 +42,11 @@ export default class Slide extends Component<DefaultProps, Props, void> {
 
   handleEnter:TransitionHandler = (element) => {
     element.style.transform = this.getTranslateValue();
-    element.style.transition = this.context.theme.transitions.create('transform', `${this.props.transitionDuration}ms`);
+    const duration = this.props.transitionDuration ? this.props.transitionDuration.toString() : '0';
+    element.style.transition = this.context.theme.transitions.create(
+      'transform',
+      `${duration}ms`
+    );
   };
 
   handleEntering:TransitionHandler = (element) => {