├── .gitignore ├── .npmignore ├── test ├── Huxleyfolder │ ├── single controlled.record.json │ ├── multi.record.json │ ├── change listening.record.json │ └── single.record.json ├── Huxleyfile.json ├── single.html ├── single_controlled.html ├── multi.html └── change.html ├── bower.json ├── package.json ├── README.md └── react-chosen.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | bower_components 3 | node_modules 4 | *.hux 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | bower.json 4 | test 5 | -------------------------------------------------------------------------------- /test/Huxleyfolder/single controlled.record.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "action": "screenshot" 4 | }, 5 | { 6 | "action": "click", 7 | "y": 22, 8 | "x": 69 9 | }, 10 | { 11 | "action": "click", 12 | "y": 78, 13 | "x": 72 14 | }, 15 | { 16 | "action": "screenshot" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /test/Huxleyfolder/multi.record.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "action": "screenshot" 4 | }, 5 | { 6 | "action": "click", 7 | "y": 43, 8 | "x": 54 9 | }, 10 | { 11 | "action": "click", 12 | "y": 124, 13 | "x": 63 14 | }, 15 | { 16 | "action": "screenshot" 17 | }, 18 | { 19 | "action": "click", 20 | "y": 23, 21 | "x": 66 22 | }, 23 | { 24 | "action": "screenshot" 25 | } 26 | ] 27 | -------------------------------------------------------------------------------- /test/Huxleyfolder/change listening.record.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "action": "screenshot" 4 | }, 5 | { 6 | "action": "click", 7 | "y": 44, 8 | "x": 82 9 | }, 10 | { 11 | "action": "click", 12 | "y": 123, 13 | "x": 78 14 | }, 15 | { 16 | "action": "screenshot" 17 | }, 18 | { 19 | "action": "click", 20 | "y": 20, 21 | "x": 63 22 | }, 23 | { 24 | "action": "screenshot" 25 | } 26 | ] 27 | -------------------------------------------------------------------------------- /test/Huxleyfolder/single.record.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "action": "screenshot" 4 | }, 5 | { 6 | "action": "click", 7 | "y": 17, 8 | "x": 85 9 | }, 10 | { 11 | "action": "click", 12 | "y": 73, 13 | "x": 81 14 | }, 15 | { 16 | "action": "screenshot" 17 | }, 18 | { 19 | "action": "click", 20 | "y": 21, 21 | "x": 85 22 | }, 23 | { 24 | "action": "keypress", 25 | "key": "h" 26 | }, 27 | { 28 | "action": "screenshot" 29 | } 30 | ] 31 | -------------------------------------------------------------------------------- /test/Huxleyfile.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "single", 4 | "screenSize": [150, 200], 5 | "url": "http://localhost:8000/test/single.html" 6 | }, 7 | { 8 | "name": "single controlled", 9 | "screenSize": [150, 200], 10 | "url": "http://localhost:8000/test/single_controlled.html" 11 | }, 12 | { 13 | "name": "change listening", 14 | "screenSize": [150, 200], 15 | "url": "http://localhost:8000/test/change.html" 16 | }, 17 | { 18 | "name": "multi", 19 | "screenSize": [150, 200], 20 | "url": "http://localhost:8000/test/multi.html" 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-chosen", 3 | "version": "0.3.8", 4 | "author": "chenglou ", 5 | "description": "React wrapper for Chosen jQuery.", 6 | "main": "react-chosen.js", 7 | "ignore": [ 8 | "**/.*", 9 | "node_modules", 10 | "components", 11 | "bower_components", 12 | "test" 13 | ], 14 | "keywords": [ 15 | "facebook", 16 | "react", 17 | "chosen", 18 | "harvest", 19 | "select", 20 | "dropdown", 21 | "wrapper" 22 | ], 23 | "dependencies": { 24 | "chosen": "1.4.2", 25 | "jquery": "~2.1.0", 26 | "react": "~0.13.0" 27 | }, 28 | "license": "MIT" 29 | } 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-chosen", 3 | "version": "0.3.8", 4 | "description": "React wrapper for Chosen jQuery.", 5 | "main": "react-chosen.js", 6 | "ignore": [ 7 | "test", 8 | "bower_components" 9 | ], 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/chenglou/react-chosen.git" 16 | }, 17 | "keywords": [ 18 | "facebook", 19 | "react", 20 | "chosen", 21 | "harvest", 22 | "select", 23 | "dropdown", 24 | "wrapper" 25 | ], 26 | "author": "chenglou ", 27 | "license": "MIT", 28 | "bugs": { 29 | "url": "https://github.com/chenglou/react-chosen/issues" 30 | }, 31 | "homepage": "https://github.com/chenglou/react-chosen", 32 | "dependencies": { 33 | "drmonty-chosen": "~1.4.2", 34 | "jquery": "^2.1.1", 35 | "react": "^0.14.0" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /test/single.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /test/single_controlled.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /test/multi.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-chosen 2 | 3 | #### This project has been deprecated. Please use [React-select](https://github.com/JedWatson/react-select), a pure React-based solution, instead. Thanks! 4 | 5 | [React](http://facebook.github.io/react/) wrapper for [Chosen](http://harvesthq.github.io/chosen/) jQuery. 6 | 7 | ## install 8 | 9 | ```sh 10 | bower install react-chosen 11 | ``` 12 | 13 | Or simply drop the script somewhere on your page (after React and Chosen of course): 14 | 15 | ```html 16 | 17 | ``` 18 | 19 | The npm build works, but unfortunately not well: 20 | 21 | ```sh 22 | npm install react-chosen 23 | ``` 24 | 25 | Due to the awkwardness of Chosen and jQuery on npm, you'll still have to include jQuery as a global dependency. Installing via npm is not recommended. 26 | 27 | ## API 28 | 29 | Please refer to [Chosen](http://harvesthq.github.io/chosen/)'s API. It's pretty much the same, except: 30 | 31 | - Every Chosen option employs camelCase, e.g. disable_search_threshold -> disableSearchThreshold. 32 | 33 | - Just like React's [controlled component](http://facebook.github.io/react/docs/forms.html#controlled-components), `value` controls your select and makes it immune to changes unless you specify so. 34 | 35 | ## Example 36 | 37 | ```html 38 | /** @jsx React.DOM */ 39 | React.renderComponent( 40 | 41 | 42 | 43 | 44 | , document.body); 45 | 46 | // or multi-select 47 | React.renderComponent( 48 | 49 | 50 | 51 | 52 | 53 | , document.body); 54 | ``` 55 | 56 | ## License 57 | 58 | MIT. 59 | -------------------------------------------------------------------------------- /test/change.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /react-chosen.js: -------------------------------------------------------------------------------- 1 | (function (root, factory) { 2 | 3 | if (typeof define === 'function' && define.amd) { 4 | define(['react', 'jquery'], factory); 5 | } else if (typeof module === 'object' && typeof module.exports === 'object') { 6 | module.exports = factory(require('react'), require('jquery')); 7 | } else { 8 | root.Chosen = factory(root.React, root.jQuery); 9 | } 10 | 11 | }(this, function (React, $) { 12 | 13 | var Chosen = React.createClass({ 14 | displayName: 'Chosen', 15 | 16 | componentDidUpdate: function() { 17 | // chosen doesn't refresh the options by itself, babysit it 18 | $(this.refs.select).trigger('chosen:updated'); 19 | }, 20 | 21 | handleChange: function(a, b, c) { 22 | // force the update makes it so that we reset chosen to whatever 23 | // controlled value the parent dictated 24 | this.forceUpdate(); 25 | this.props.onChange && this.props.onChange(a, b, c); 26 | }, 27 | 28 | componentDidMount: function() { 29 | var props = this.props; 30 | var select = $(this.refs.select); 31 | $(select) 32 | .chosen({ 33 | allow_single_deselect: props.allowSingleDeselect, 34 | disable_search: props.disableSearch, 35 | disable_search_threshold: props.disableSearchThreshold, 36 | enable_split_word_search: props.enableSplitWordSearch, 37 | inherit_select_classes: props.inheritSelectClasses, 38 | max_selected_options: props.maxSelectedOptions, 39 | no_results_text: props.noResultsText, 40 | placeholder_text_multiple: props.placeholderTextMultiple, 41 | placeholder_text_single: props.placeholderTextSingle, 42 | search_contains: props.searchContains, 43 | single_backstroke_delete: props.singleBackstrokeDelete, 44 | width: props.width, 45 | display_disabled_options: props.displayDisabledOptions, 46 | display_selected_options: props.displaySelectedOptions 47 | }) 48 | .on('chosen:maxselected', this.props.onMaxSelected) 49 | .change(this.handleChange); 50 | }, 51 | 52 | componentWillUnmount: function() { 53 | $(this.refs.select).off('chosen:maxselected change'); 54 | }, 55 | 56 | render: function() { 57 | var selectProps = $.extend({}, this.props, {ref: "select"}); 58 | return React.createElement("div", null, 59 | React.createElement("select", selectProps, this.props.children) 60 | ); 61 | } 62 | }); 63 | 64 | return Chosen; 65 | 66 | })); 67 | --------------------------------------------------------------------------------