react-dropdown - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

example/main.js

@@ -5,2 +5,14 @@ var React = require('react')
 var App = React.createClass({
+
+  getInitialState: function() {
+    return {
+      selected: { value: 'two', label: 'Two'}
+    }
+  },
+
+  _onSelect: function(option) {
+    console.log('You selected ', option.label)
+    this.setState({selected: option})
+  },
+
   render: function() {
@@ -25,10 +37,79 @@
 
-    function onChange(value) {
-      console.log('Selected ', value)
-    }
+    var defaultOption = this.state.selected
 
     return (
       <div>
-        <Dropdown options={options} onChange={onChange}/>
+        <header>
+          <h2><a href='https://github.com/fraserxu/react-dropdown'>react-dropdown</a></h2>
+        </header>
+        <section className='description'>
+          <p>
+            Simple Dropdown component for React, inspired by <a href='https://github.com/JedWatson/react-select'>react-select</a>
+          </p>
+          <div className='code'>
+            <pre>
+              { "$ npm install react-dropdown --save" }
+            </pre>
+          </div>
+        </section>
+        <section>
+          <h3>Usage: </h3>
+        </section>
+        <Dropdown options={options} onChange={this._onSelect} value={defaultOption} />
+        <div className='result'>
+          You selected
+          <strong> {this.state.selected ?
+            this.state.selected.label
+            : ''
+          }</strong>
+        </div>
+        <section>
+          <h3>Code: </h3>
+        </section>
+        <div className='code'>
+          <pre>
+            <code>
+              {
+                "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"
+              }
+            </code>
+          </pre>
+        </div>
+        <section>
+          <h3>License: </h3>
+        </section>
+        <footer>
+          <p>MIT | Build for <a href='https://csviz.org'>CSViz</a> project @<a href='http://wiredcraft.com'>Wiredcraft</a></p>
+        </footer>
       </div>
+
     )
@@ -35,0 +116,0 @@ }

index.js

@@ -12,8 +12,3 @@ 'use strict'
     return {
-      selected: {
-        label: 'Select...',
-        value: ''
-      },
-      onChange: function() {},
-      options: this.props.options,
+      selected: undefined,
       isOpen: false
@@ -23,2 +18,14 @@ }
 
+  componentWillMount: function() {
+    this.setState({
+      selected: this.props.value || { label: 'Select...', value: '' }
+    })
+  },
+
+  componentWillReceiveProps: function(newProps) {
+    if (newProps.value && newProps.value !== this.state.selected) {
+      this.setState({selected: newProps.value})
+    }
+  },
+
   handleMouseDown: function(event) {
@@ -56,10 +63,10 @@
 
-    return <div key={option.value} className={optionClass} onMouseDown={this.setValue.bind(this, option)} onClick={this.setValue.bind(this, option)}>{option.label}</div>
+    return React.createElement("div", {key: option.value, className: optionClass, onMouseDown: this.setValue.bind(this, option), onClick: this.setValue.bind(this, option)}, option.label)
   },
 
   buildMenu: function() {
-    var ops = this.state.options.map(function(option) {
+    var ops = this.props.options.map(function(option) {
 
       if (option.type == 'group') {
-        var groupTitle = (<div className='title'>{option.name}</div>)
+        var groupTitle = (React.createElement("div", {className: "title"}, option.name))
         var _options = option.items.map(function(item) {
@@ -69,6 +76,6 @@ return this.renderOption(item)
         return (
-          <div className='group' key={option.name}>
-            {groupTitle}
-            {_options}
-          </div>
+          React.createElement("div", {className: "group", key: option.name}, 
+            groupTitle, 
+            _options
+          )
         )
@@ -81,3 +88,3 @@ } else {
 
-    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")
   },
@@ -88,4 +95,4 @@
 
-    value = (<div className='placeholder'>{this.state.selected.label}</div>)
-    var menu = this.state.isOpen ? <div className='Dropdown-menu'>{this.buildMenu()}</div> : null
+    value = (React.createElement("div", {className: "placeholder"}, this.state.selected.label))
+    var menu = this.state.isOpen ? React.createElement("div", {className: "Dropdown-menu"}, this.buildMenu()) : null
 
@@ -98,9 +105,9 @@ var dropdownClass = cx({
     return (
-      <div className={dropdownClass}>
-        <div className='Dropdown-control' onMouseDown={this.handleMouseDown} onTouchEnd={this.handleMouseDown}>
-          {value}
-          <span className='Dropdown-arrow' />
-        </div>
-        {menu}
-      </div>
+      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
+      )
     )
@@ -107,0 +114,0 @@ }

package.json

 {
   "name": "react-dropdown",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React dropdown component",
@@ -10,2 +10,5 @@ "main": "index.js",
   },
+  "scripts": {
+    "build": "jsx src/ ./ --extension jsx"
+  },
   "keywords": [
@@ -12,0 +15,0 @@ "react",

README.md

@@ -24,3 +24,7 @@ react-dropdown
 
-var Pie = React.createClass({
+var App = React.createClass({
+  _onSelect: function(option) {
+    console.log('You selected ', option.label)
+  },
+
   render: function() {
@@ -45,9 +49,7 @@
 
-    function onChange(value) {
-      console.log('Selected ', value)
-    }
+    var defaultOption = { value: 'two', label: 'Two'}
 
     return (
       <div>
-        <Dropdown options={options} onChange={onChange}/>
+        <Dropdown options={options} onChange={this._onSelect} value={defaultOption} />
       </div>
@@ -60,4 +62,18 @@ )
 
+### Development
+
+**Build**: make sure you have `react-tools` installed golbally to use the `jsx` in your terminal.
+
+```
+$ npm run build
+```
+
+**Run example**
+
+```
+$ cd example && npm install && npm run watch
+```
+
 ### License
 
-MIT
+MIT | Build for [CSViz](https://csviz.org) project @[Wiredcraft](http://wiredcraft.com)

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

Total package byte prevSize

1729601

increased by1.09%

Number of package files

12

increased by9.09%

Lines of code

22596

increased by1.43%

Number of lines in readme file

77

increased by28.33%

No dependency changes