react-dropdown - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

example/main.js

@@ -1,20 +0,22 @@
-var React = require('react')
-var Dropdown = require('../index')
+'use strict';
 
-var App = React.createClass({
+import React from 'react';
+import Dropdown from '../';
 
-  getInitialState: function() {
-    return {
+class App extends React.Component {
+
+  constructor() {
+    this.state = {
       selected: { value: 'two', label: 'Two'}
     }
-  },
+  }
 
-  _onSelect: function(option) {
+  _onSelect(option) {
     console.log('You selected ', option.label)
     this.setState({selected: option})
-  },
+  }
 
-  render: function() {
+  render() {
 
-    var options = [
+    const options = [
       { value: 'one', label: 'One' },
@@ -36,3 +38,3 @@ { value: 'two', label: 'Two' },
 
-    var defaultOption = this.state.selected
+    let defaultOption = this.state.selected
 
@@ -57,3 +59,3 @@ return (
         </section>
-        <Dropdown options={options} onChange={this._onSelect} value={defaultOption} />
+        <Dropdown options={options} onChange={this._onSelect.bind(this)} value={defaultOption} />
         <div className='result'>
@@ -73,32 +75,50 @@ You selected
               {
-                "var Dropdown = require('react-dropdown')\n" +
-                "var React = require('react')\n" +
-                "\n" +
-                "var App = React.createClass({\n" +
-                "  _onSelect: function(option) {\n" +
-                "    console.log('You selected ', option.label)\n" +
-                "  },\n" +
-                "  render: function() {\n" +
-                "    var options = [\n" +
-                "      { value: 'one', label: 'One' },\n" +
-                "      { value: 'two', label: 'Two' },\n" +
-                "      {\n" +
-                "        type: 'group', name: 'group1', items: [\n" +
-                "          { value: 'three', label: 'Three' },\n" +
-                "          { value: 'four', label: 'Four' }\n" +
-                "        ]\n" +
-                "      },\n" +
-                "      {\n" +
-                "        type: 'group', name: 'group2', items: [\n" +
-                "          { value: 'five', label: 'Five' },\n" +
-                "          { value: 'six', label: 'Six' }\n" +
-                "        ]\n" +
-                "      }\n" +
-                "    ]\n" +
-                "\n" +
-                "    var defaultOption = { value: 'two', label: 'Two' }\n" +
-                "\n" +
-                "    <Dropdown options={options} onChange={this._onSelect} value={defaultOption} />\n" +
-                "  }\n" +
-                "})\n"
+                `
+                'use strict';
+
+                import React from 'react';
+                import Dropdown from '../';
+
+                class App extends React.Component {
+
+                  constructor() {
+                    this.state = {
+                      selected: { value: 'two', label: 'Two'}
+                    }
+                  }
+
+                  _onSelect(option) {
+                    console.log('You selected ', option.label)
+                    this.setState({selected: option})
+                  }
+
+                  render() {
+
+                    const options = [
+                      { value: 'one', label: 'One' },
+                      { value: 'two', label: 'Two' },
+                      {
+                        type: 'group', name: 'group1', items: [
+                          { value: 'three', label: 'Three' },
+                          { value: 'four', label: 'Four' }
+                        ]
+                      },
+                      {
+                        type: 'group', name: 'group2', items: [
+                          { value: 'five', label: 'Five' },
+                          { value: 'six', label: 'Six' }
+                        ]
+                      }
+                    ]
+
+                    let defaultOption = this.state.selected
+
+                    return (
+                      <Dropdown options={options} onChange={this._onSelect.bind(this)} value={defaultOption} />
+                    )
+                  }
+
+                }
+                React.render(<App />, document.body)
+                `
               }
@@ -118,6 +138,5 @@ </code>
   }
-})
 
-window['React'] = React
+}
 
-React.render(<App />, document.body)
+React.render(<App />, document.body)

example/package.json

@@ -5,9 +5,9 @@ {
     "browser-sync": "browser-sync start --server --files './bundle.js'",
-    "watch-js": "watchify main.js -t [ reactify --extension js --harmony ] -o bundle.js -dv",
+    "watch-js": "watchify main.js -t babelify -o bundle.js -dv",
     "watch": "npm run browser-sync & npm run watch-js"
   },
   "devDependencies": {
-    "reactify": "^0.15.2",
-    "watchify": "^2.1.1"
+    "babelify": "^5.0.4",
+    "watchify": "^2.6.0"
   }
 }

index.js

@@ -1,111 +0,106 @@
-'use strict'
+'use strict';
 
-var React = require('react/addons')
-var cx = React.addons.classSet
+import React from 'react';
+import classNames from 'classnames';
 
-var Dropdown = React.createClass({
+class Dropdown extends React.Component {
 
-  displayName: 'Dropdown',
+  displayName: 'Dropdown'
 
-  getInitialState: function() {
-    return {
+  constructor() {
+    this.state = {
       selected: undefined,
       isOpen: false
     }
-  },
+  }
 
-  componentWillMount: function() {
+  componentWillMount() {
     this.setState({
       selected: this.props.value || { label: 'Select...', value: '' }
-    })
-  },
+    });
+  }
 
-  componentWillReceiveProps: function(newProps) {
+  componentWillReceiveProps(newProps) {
     if (newProps.value && newProps.value !== this.state.selected) {
-      this.setState({selected: newProps.value})
+      this.setState({selected: newProps.value});
     }
-  },
+  }
 
-  handleMouseDown: function(event) {
+  handleMouseDown(event) {
 
-    if (event.type == 'mousedown' && event.button !== 0) return
-    event.stopPropagation()
-    event.preventDefault()
+    if (event.type == 'mousedown' && event.button !== 0) return;
+    event.stopPropagation();
+    event.preventDefault();
 
     this.setState({
       isOpen: !this.state.isOpen
-    })
-  },
+    });
+  }
 
-  setValue: function(option) {
-    var newState = {
+  setValue(option) {
+    let newState = {
       selected: option,
       isOpen: false
     }
-    this.fireChangeEvent(newState)
-    this.setState(newState)
-  },
+    this.fireChangeEvent(newState);
+    this.setState(newState);
+  }
 
-  fireChangeEvent: function(newState) {
-    if (newState.selected !== this.state.selected &&this.props.onChange) {
+  fireChangeEvent(newState) {
+    if (newState.selected !== this.state.selected && this.props.onChange) {
       this.props.onChange(newState.selected);
     }
-  },
+  }
 
-  renderOption: function (option) {
-    var optionClass = cx({
+  renderOption (option) {
+    let optionClass = classNames({
       'Dropdown-option': true,
       'is-selected': option == this.state.selected
-    })
+    });
 
-    return React.createElement("div", {key: option.value, className: optionClass, onMouseDown: this.setValue.bind(this, option), onClick: this.setValue.bind(this, option)}, option.label)
-  },
+    return <div key={option.value} className={optionClass} onMouseDown={this.setValue.bind(this, option)} onClick={this.setValue.bind(this, option)}>{option.label}</div>
+  }
 
-  buildMenu: function() {
-    var ops = this.props.options.map(function(option) {
+  buildMenu() {
+    let ops = this.props.options.map((option) => {
+      if (option.type == 'group') {
+        let groupTitle = (<div className='title'>{option.name}</div>);
+        let _options = option.items.map((item) => this.renderOption(item));
 
-      if (option.type == 'group') {
-        var groupTitle = (React.createElement("div", {className: "title"}, option.name))
-        var _options = option.items.map(function(item) {
-          return this.renderOption(item)
-        }.bind(this))
         return (
-          React.createElement("div", {className: "group", key: option.name}, 
-            groupTitle, 
-            _options
-          )
-        )
+          <div className='group' key={option.name}>
+            {groupTitle}
+            {_options}
+          </div>
+        );
       } else {
-        return this.renderOption(option)
+        return this.renderOption(option);
       }
+    })
 
-    }.bind(this))
+    return ops.length ? ops : <div className='Dropdown-noresults'>No opitons found</div>;
+  }
 
-    return ops.length ? ops : React.createElement("div", {className: "Dropdown-noresults"}, "No opitons found")
-  },
+  render() {
+    let value = (<div className='placeholder'>{this.state.selected.label}</div>);
+    let menu = this.state.isOpen ? <div className='Dropdown-menu'>{this.buildMenu()}</div> : null;
 
-  render: function() {
-    var value = ''
-
-    value = (React.createElement("div", {className: "placeholder"}, this.state.selected.label))
-    var menu = this.state.isOpen ? React.createElement("div", {className: "Dropdown-menu"}, this.buildMenu()) : null
-
-    var dropdownClass = cx({
+    let dropdownClass = classNames({
       'Dropdown': true,
       'is-open': this.state.isOpen
-    })
+    });
 
     return (
-      React.createElement("div", {className: dropdownClass}, 
-        React.createElement("div", {className: "Dropdown-control", onMouseDown: this.handleMouseDown, onTouchEnd: this.handleMouseDown}, 
-          value, 
-          React.createElement("span", {className: "Dropdown-arrow"})
-        ), 
-        menu
-      )
-    )
+      <div className={dropdownClass}>
+        <div className='Dropdown-control' onMouseDown={this.handleMouseDown.bind(this)} onTouchEnd={this.handleMouseDown.bind(this)}>
+          {value}
+          <span className='Dropdown-arrow' />
+        </div>
+        {menu}
+      </div>
+    );
   }
 
-})
+}
 
-module.exports = Dropdown
+export default Dropdown;

package.json

 {
   "name": "react-dropdown",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "React dropdown component",
@@ -11,3 +11,3 @@ "main": "index.js",
   "scripts": {
-    "build": "jsx src/ ./ --extension jsx"
+    "build": "node_modules/.bin/babel src/index.js > index.js"
   },
@@ -31,8 +31,13 @@ "keywords": [
   "homepage": "https://github.com/fraserxu/react-dropdown",
+  "peerDependencies": {
+    "react": ">=0.13.0"
+  },
   "dependencies": {
-    "react": "^0.12.1"
+    "react": "^0.13.1"
   },
   "devDependencies": {
-    "envify": "^3.2.0"
+    "babel": "^4.7.16",
+    "classnames": "^1.2.0",
+    "watchify": "^2.6.0"
   }
 }

README.md

@@ -22,12 +22,23 @@ react-dropdown
 ```JavaScript
-var Dropdown = require('react-dropdown ')
+'use strict';
 
-var App = React.createClass({
-  _onSelect: function(option) {
+import React from 'react';
+import Dropdown from '../';
+
+class App extends React.Component {
+
+  constructor() {
+    this.state = {
+      selected: { value: 'two', label: 'Two'}
+    }
+  }
+
+  _onSelect(option) {
     console.log('You selected ', option.label)
-  },
+    this.setState({selected: option})
+  }
 
-  render: function() {
+  render() {
 
-    var options = [
+    const options = [
       { value: 'one', label: 'One' },
@@ -49,21 +60,13 @@ { value: 'two', label: 'Two' },
 
-    var defaultOption = { value: 'two', label: 'Two'}
+    let defaultOption = this.state.selected
 
     return (
-      <div>
-        <Dropdown options={options} onChange={this._onSelect} value={defaultOption} />
-      </div>
+      <Dropdown options={options} onChange={this._onSelect.bind(this)} value={defaultOption} />
     )
   }
-})
 
-```
+}
+React.render(<App />, document.body)
 
-### Development
-
-**Build**: make sure you have `react-tools` installed golbally to use the `jsx` in your terminal.
-
 ```
-$ npm run build
-```
 
@@ -70,0 +73,0 @@ **Run example**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

80

increased by3.9%

Worsened metrics

Total package byte prevSize

1631966

decreased by-5.64%

Dependency count

2

increased by100%

Dev dependency count

3

increased by200%

Number of package files

11

decreased by-8.33%

Lines of code

22065

decreased by-2.35%

Dependency changes

• + Addedreact@0.13.3(transitive)

• - Removedreact@0.12.2(transitive)

• Updatedreact@^0.13.1