Merge pull request #5 from Fauntleroy/modernize

Thoroughly modernize Dropdown components
fixes #4

.gitignore

@@ -25,3 +25,6 @@ build/Release
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+
+# Ignore compiled files
+lib

.zuul.yml

@@ -3,4 +3,4 @@ browsers:
     - name: chrome
       version: latest
 browserify:
-    - transform: reactify
+    - transform: babelify

components/Dropdown.jsx

@@ -0,0 +1,84 @@
+import React, { cloneElement, createClass } from 'react';
+import { findDOMNode } from 'react-dom';
+import cx from 'classnames';
+
+import DropdownTrigger from './DropdownTrigger.js';
+import DropdownContent from './DropdownContent.js';
+
+var Dropdown = createClass({
+  getInitialState: function(){
+    return {
+      active: false
+    };
+  },
+  getDefaultProps: function(){
+    return {
+      className: ''
+    }
+  },
+  componentDidMount: function () {
+    window.addEventListener( 'click', this._onWindowClick );
+  },
+  componentWillUnmount: function () {
+    window.removeEventListener( 'click', this._onWindowClick );
+  },
+  render: function () {
+    const { children, className } = this.props;
+    // create component classes
+    const active = this.isActive();
+    var dropdown_classes = cx({
+      dropdown: true,
+      'dropdown--active': active
+    });
+    dropdown_classes += ' ' + className;
+    // stick callback on trigger element
+    const bound_children = React.Children.map( children, child => {
+      if( child.type === DropdownTrigger ){
+        child = cloneElement( child, {
+          ref: 'trigger',
+          onClick: this._onToggleClick
+        });
+      }
+      return child;
+    });
+    return <div className={dropdown_classes}>{bound_children}</div>;
+  },
+  isActive: function(){
+    return ( typeof this.props.active === 'boolean' ) ?
+      this.props.active :
+      this.state.active;
+  },
+  hide: function(){
+    this.setState({
+      active: false
+    });
+    if( this.props.onHide ){
+      this.props.onHide();
+    }
+  },
+  show: function(){
+    this.setState({
+      active: true
+    });
+    if( this.props.onShow ){
+      this.props.onShow();
+    }
+  },
+  _onWindowClick: function( event ){
+    const dropdown_element = findDOMNode( this );
+    if( event.target !== dropdown_element && !dropdown_element.contains( event.target ) && this.isActive() ){
+      this.hide();
+    }
+  },
+  _onToggleClick: function( event ){
+    event.preventDefault();
+    if( this.isActive() ){
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+});
+
+export { DropdownTrigger, DropdownContent };
+export default Dropdown;

components/DropdownContent.jsx

@@ -0,0 +1,20 @@
+import React, { createClass, PropTypes } from 'react';
+
+const DropdownContent = createClass({
+  propTypes: {
+    children: PropTypes.any,
+    className: PropTypes.string
+  },
+  getDefaultProps: function(){
+    return {
+      className: ''
+    }
+  },
+  render: function(){
+    const { children, className } = this.props;
+    const classes = 'dropdown__content ' + className;
+    return <div className={classes}>{children}</div>;
+  }
+});
+
+export default DropdownContent;

components/DropdownTrigger.jsx

@@ -0,0 +1,25 @@
+import React, { createClass, PropTypes } from 'react';
+
+const DropdownTrigger = createClass({
+  propTypes: {
+    children: PropTypes.any,
+    className: PropTypes.string,
+    onClick: PropTypes.func
+  },
+  getDefaultProps: function(){
+    return {
+      className: ''
+    };
+  },
+  render: function(){
+    const { children, className, onClick } = this.props;
+    const classes = 'dropdown__trigger ' + className;
+    return (
+      <a className={classes} href="#dropdown-trigger" onClick={onClick}>
+        {children}
+      </a>
+    );
+  }
+});
+
+export default DropdownTrigger;

package.json

@@ -2,10 +2,16 @@
   "name": "react-simple-dropdown",
   "version": "0.1.1",
   "description": "Non-prescriptive React.js dropdown toolkit",
-  "main": "components/Dropdown.js",
+  "main": "lib/components/Dropdown.js",
   "scripts": {
-    "test": "zuul -- test/**/*.{js,jsx}",
-    "test:browser": "zuul --local 55555 -- test/**/*.{js,jsx}"
+    "prepublish": "npm run build",
+    "postpublish": "npm run clean",
+    "test": "npm run build && zuul -- test/**/*.{js,jsx}",
+    "test:browser": "zuul --local 55555 -- test/**/*.{js,jsx}",
+    "build": "babel components/**/* --out-dir lib",
+    "watch": "npm run build -- -w",
+    "dev": "npm-run-all --parallel watch test:browser",
+    "clean": "trash lib"
   },
   "repository": {
     "type": "git",
@@ -31,15 +37,31 @@
     "classnames": "^2.1.2"
   },
   "devDependencies": {
-    "browserify": "^10.2.4",
+    "babel": "^6.3.13",
+    "babel-cli": "^6.3.15",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babelify": "^7.2.0",
     "dom-classes": "0.0.1",
-    "reactify": "^1.1.1",
+    "mkdirp": "^0.5.1",
+    "npm-run-all": "^1.4.0",
+    "react": "0.14.x",
+    "react-addons-test-utils": "^0.14.3",
+    "react-dom": "0.14.x",
     "simple-mock": "^0.3.1",
     "tape": "^4.0.0",
+    "trash-cli": "^1.2.0",
     "watchify": "^3.2.3",
     "zuul": "^3.1.0"
   },
   "peerDependencies": {
-    "react": "0.14.x"
+    "react": "0.14.x",
+    "react-dom": "0.14.x"
+  },
+  "babel": {
+    "presets": [
+      "es2015",
+      "react"
+    ]
   }
 }