├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── dist
    └── react-selectize.js
├── examples
    └── sightseeings.html
├── package.json
└── src
    └── react-selectize.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | bower_components/
3 | react-0.10.0/
4 | **/.*


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Igor Ovsyannikov
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | React wrapper for [Selectize ](http://brianreavis.github.io/selectize.js/)
 2 | ===============
 3 | 
 4 | ##NO LONGER MAINTAINED
 5 | 
 6 | **The package was made as temporary solution and will be no longer maintained. 
 7 | Although you can still use it i would strongly recommend to switch for mature React UI library [material-ui](https://github.com/callemall/material-ui) or alike.**
 8 | 
 9 | I have made simple React wrapper around selectize primarily for myself.
10 | But if you find it helpful, fill free to use.
11 | 
12 | And of course fill free to add merge requests or register issues.
13 | I will try to handle it as soon as i can.
14 | 
15 | 
16 | #Changelog
17 | - 07.04.2014 Fixed issue when selectize`s dropdown was reopenning after onChange event
18 | - 10.04.2014 Added ability to pass classes through props ('control-group' class removed)
19 | - 09.04.2015 Update for React v0.13. Incoroprate some PR. Mark as Obsolete.
20 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-selectize",
 3 |   "version": "0.1.0",
 4 |   "authors": [
 5 |     "igor ovsyannikov <garek@mail.ru>"
 6 |   ],
 7 |   "description": "React wrapper around Selectize",
 8 |   "main": "dist/react-selectize.js",
 9 |   "moduleType": [
10 |     "globals"
11 |   ],
12 |   "keywords": [
13 |     "selectize",
14 |     "react",
15 |     "javascript",
16 |     "library"
17 |   ],
18 |   "license": "MIT",
19 |   "homepage": "https://github.com/ggarek/react-selectize",
20 |   "ignore": [
21 |     "**/.*",
22 |     "node_modules",
23 |     "bower_components",
24 |     "test",
25 |     "tests"
26 |   ],
27 |   "dependencies": {
28 |     "selectize": "~0.9.0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/dist/react-selectize.js:
--------------------------------------------------------------------------------
 1 | /** @jsx React.DOM */
 2 | 
 3 | /* React selectize wrapper */
 4 | var ReactSelectize = React.createClass({displayName: "ReactSelectize",
 5 | 
 6 |   getDefaultProps: function () {
 7 |     return {
 8 |       valueField: "id",
 9 |       labelField: "name",
10 |       searchField: "name",
11 |       sortField: "id",
12 |       create: false,
13 |       items: []
14 |     };
15 |   },
16 | 
17 |   isMultiple: function (props) {
18 |     // Selectize becomes 'multiple' when 'maxItems' is passed via settings
19 |     return props.multiple || props.maxItems != undefined;
20 |   },
21 | 
22 |   buildOptions: function () {
23 |     var o = {};
24 | 
25 |     o.valueField = this.props.valueField;
26 |     o.labelField = this.props.labelField;
27 |     o.searchField = this.props.searchField;
28 |     o.sortField = this.props.sortField;
29 |     if(this.isMultiple(this.props)){
30 |       o.maxItems = this.props.maxItems || null;
31 |     }
32 |     o.options = this.props.items;
33 |     o.create = this.props.create;
34 | 
35 |     return o;
36 |   },
37 | 
38 |   getSelectizeControl: function () {
39 |     var selectId = "#" + this.props.selectId,
40 |       $select = $(selectId),
41 |       selectControl = $select[0] && $select[0].selectize;
42 | 
43 |     return selectControl;
44 |   },
45 | 
46 |   handleChange: function (e) {
47 | 
48 |     // IF Selectize is not multiple
49 |     if(!this.isMultiple(this.props)){
50 |       // THEN blur it before calling onChange to prevent dropdown reopening
51 |       this.getSelectizeControl().blur();
52 |     }
53 | 
54 |     if(this.props.onChange){
55 |       this.props.onChange(e);
56 |     }
57 |   },
58 | 
59 |   rebuildSelectize: function () {
60 |     var $select = null,
61 |       selectControl = this.getSelectizeControl(),
62 |       items = this.props.items;
63 | 
64 |     if(selectControl) {
65 |       // rebuild
66 |       selectControl.off();
67 |       selectControl.clearOptions();
68 |       selectControl.load(function (cb) { cb(items) });
69 |     } else {
70 |       // build new
71 |       $select = $("#" + this.props.selectId).selectize(this.buildOptions());
72 |       selectControl = $select[0].selectize;
73 |     }
74 | 
75 |     selectControl.setValue(this.props.value);
76 | 
77 |     if(this.props.onChange){
78 |       selectControl.on('change', this.handleChange);
79 |     }
80 |   },
81 | 
82 |   componentDidMount: function () {
83 |     this.rebuildSelectize();
84 |   },
85 | 
86 |   componentDidUpdate: function () {
87 |     this.rebuildSelectize();
88 |   },
89 | 
90 |   render: function () {
91 |     var classes = this.props.classes;
92 |     return React.createElement("div", {className: classes && classes.length > 0 ? classes.join(' ') : ''}, 
93 |       React.createElement("label", {htmlFor: this.props.selectId}, this.props.label), 
94 |       React.createElement("select", {id: this.props.selectId, placeholder: this.props.placeholder})
95 |     )
96 |   }
97 | });
98 | 


--------------------------------------------------------------------------------
/examples/sightseeings.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <link rel="stylesheet" href="../bower_components/selectize/dist/css/selectize.css" />
  5 |     <link rel="stylesheet" href="../bower_components/selectize/dist/css/selectize.default.css" />
  6 | 
  7 |     <style>
  8 |         .control-group {
  9 |             width: 200px;
 10 |         }
 11 |     </style>
 12 | 
 13 |     <script src="../bower_components/jquery/dist/jquery.js"></script>
 14 |     <script src="../bower_components/selectize/dist/js/standalone/selectize.js"></script>
 15 | 
 16 |     <script src="../node_modules/react/dist/react.js"></script>
 17 |     <script src="../node_modules/react/dist/JSXTransformer.js"></script>
 18 | 
 19 |     <script src="../dist/react-selectize.js"></script>
 20 | </head>
 21 | <body>
 22 |     <!--view-->
 23 |     <div id="example"></div>
 24 | 
 25 |     <!--Data stubs-->
 26 |     <script type="text/jsx">
 27 |         /** @jsx React.DOM */
 28 | 
 29 |         var CountryService = {
 30 |           getCountryList: function () {
 31 |             return [
 32 |               { name: "Russia", id: 1},
 33 |               { name: "Brazil", id: 2},
 34 |               { name: "Spain", id: 3},
 35 |             ];
 36 |           }
 37 |         };
 38 | 
 39 |         var CityService = {
 40 |           _data: {
 41 |             1: [
 42 |               { name: "Moscow", id: 1 },
 43 |               { name: "St.Petersburg", id: 2 },
 44 |               { name: "Smolensk", id: 3 },
 45 |             ],
 46 |             2: [
 47 |               { name: "Rio de Janeiro", id: 4 },
 48 |               { name: "Sao Paulo", id: 5 },
 49 |               { name: "Santa Catarina", id: 6}
 50 |             ],
 51 |             3: [
 52 |               { name: "Madrid", id: 7 },
 53 |               { name: "Salamanca", id: 8 },
 54 |               { name: "Zaragoza", id: 9 }
 55 |             ]
 56 |           },
 57 | 
 58 |           getCitiesByCountryId: function (countryId) {
 59 |             return this._data[countryId].slice();
 60 |           }
 61 |         };
 62 | 
 63 |         var SightsService = {
 64 |           _data: [
 65 |             { id: 1, cityId: 7, name: "Gran Via" },
 66 |             { id: 2, cityId: 7, name: "El Escorial" },
 67 |             { id: 3, cityId: 1, name: "Kremlin" },
 68 |             { id: 4, cityId: 2, name: "Petergof" },
 69 |             { id: 5, cityId: 4, name: "Cristo Redentor" },
 70 |             { id: 6, cityId: 5, name: "Credicard Hall" },
 71 |           ],
 72 | 
 73 |           getSightsByCityId: function (id) {
 74 |             return this._data.filter(function (item) {  return item.cityId == id })
 75 |           },
 76 | 
 77 |           getSightsByCityIds: function (ids) {
 78 |             var context = this,
 79 |                 result;
 80 |             result = Array.prototype.concat.apply([], ids.map(function (cityId) {
 81 |               return context.getSightsByCityId(cityId);
 82 |             }));
 83 | 
 84 |             console.log("Requested sights => ", result);
 85 | 
 86 |             return result;
 87 |           }
 88 |         };
 89 |     </script>
 90 | 
 91 |     <!--React component-->
 92 |     <script type="text/jsx">
 93 |     /** @jsx React.DOM */
 94 |     /* LocationPanel */
 95 |     var LocationPanel = React.createClass({
 96 | 
 97 |       getInitialState: function () {
 98 |         return {
 99 |           selectedCountryId: -1,
100 |           countries: CountryService.getCountryList(),
101 |           cities: []
102 |         }
103 |       },
104 | 
105 |       handleCountryChanged: function (value) {
106 |         if(!value) return;
107 | 
108 |         var countryId = Number(value[0]);
109 |         this.setState({
110 |           selectedCountryId: countryId,
111 |           cities: CityService.getCitiesByCountryId(countryId)
112 |         });
113 |       },
114 | 
115 |       handleCityChanged: function (value) {
116 |         if(!value) return;
117 | 
118 |         var ids = value.map(function (id) { return Number(id); });
119 | 
120 |         this.setState({
121 |           selectedCityIds: ids,
122 |           sights: SightsService.getSightsByCityIds(ids)
123 |         });
124 |       },
125 | 
126 |       render: function () {
127 |         return <div>
128 |           <ReactSelectize
129 |             items={this.state.countries}
130 |             value={this.state.selectedCountryId}
131 |             onChange={this.handleCountryChanged}
132 |             selectId="select-country"
133 |             placeholder="Pick a country.."
134 |             label="Country:"
135 |             />
136 | 
137 |           <ReactSelectize
138 |             items={this.state.cities}
139 |             value={this.state.selectedCityIds}
140 |             selectId="select-cities"
141 |             placeholder="Pick a city.."
142 |             label="City:"
143 |             multiple={true}
144 |             onChange={this.handleCityChanged}
145 |             />
146 | 
147 |           <ReactSelectize
148 |             items={this.state.sights}
149 |             selectId="select-sights"
150 |             placeholder="Pick a sightseeing.."
151 |             label="Sightseeings:"
152 |             multiple={true}
153 |             />
154 |         </div>
155 |       }
156 |     });
157 | 
158 |     /* Render app */
159 |     React.render(<LocationPanel />, document.getElementById('example'));
160 |     </script>
161 | </body>
162 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-selectize",
 3 |   "version": "0.1.0",
 4 |   "description": "React wrapper around Selectize",
 5 |   "main": "dist/react-selectize.js",
 6 |   "directories": {
 7 |     "example": "examples"
 8 |   },
 9 |   "scripts": {
10 |     "build": "rm -r dist/** && jsx src/ dist/",
11 |     "test": "echo \"Error: no test specified\" && exit 1"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "https://github.com/ggarek/react-selectize.git"
16 |   },
17 |   "keywords": [
18 |     "selectize",
19 |     "react"
20 |   ],
21 |   "author": "igor ovsyannikov <garek@mail.ru>",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/ggarek/react-selectize/issues"
25 |   },
26 |   "homepage": "https://github.com/ggarek/react-selectize",
27 |   "devDependencies": {
28 |     "react": "^0.13.1"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/react-selectize.js:
--------------------------------------------------------------------------------
 1 | /** @jsx React.DOM */
 2 | 
 3 | /* React selectize wrapper */
 4 | var ReactSelectize = React.createClass({
 5 | 
 6 |   getDefaultProps: function () {
 7 |     return {
 8 |       valueField: "id",
 9 |       labelField: "name",
10 |       searchField: "name",
11 |       sortField: "id",
12 |       create: false,
13 |       items: []
14 |     };
15 |   },
16 | 
17 |   isMultiple: function (props) {
18 |     // Selectize becomes 'multiple' when 'maxItems' is passed via settings
19 |     return props.multiple || props.maxItems != undefined;
20 |   },
21 | 
22 |   buildOptions: function () {
23 |     var o = {};
24 | 
25 |     o.valueField = this.props.valueField;
26 |     o.labelField = this.props.labelField;
27 |     o.searchField = this.props.searchField;
28 |     o.sortField = this.props.sortField;
29 |     if(this.isMultiple(this.props)){
30 |       o.maxItems = this.props.maxItems || null;
31 |     }
32 |     o.options = this.props.items;
33 |     o.create = this.props.create;
34 | 
35 |     return o;
36 |   },
37 | 
38 |   getSelectizeControl: function () {
39 |     var selectId = "#" + this.props.selectId,
40 |       $select = $(selectId),
41 |       selectControl = $select[0] && $select[0].selectize;
42 | 
43 |     return selectControl;
44 |   },
45 | 
46 |   handleChange: function (e) {
47 | 
48 |     // IF Selectize is not multiple
49 |     if(!this.isMultiple(this.props)){
50 |       // THEN blur it before calling onChange to prevent dropdown reopening
51 |       this.getSelectizeControl().blur();
52 |     }
53 | 
54 |     if(this.props.onChange){
55 |       this.props.onChange(e);
56 |     }
57 |   },
58 | 
59 |   rebuildSelectize: function () {
60 |     var $select = null,
61 |       selectControl = this.getSelectizeControl(),
62 |       items = this.props.items;
63 | 
64 |     if(selectControl) {
65 |       // rebuild
66 |       selectControl.off();
67 |       selectControl.clearOptions();
68 |       selectControl.load(function (cb) { cb(items) });
69 |     } else {
70 |       // build new
71 |       $select = $("#" + this.props.selectId).selectize(this.buildOptions());
72 |       selectControl = $select[0].selectize;
73 |     }
74 | 
75 |     selectControl.setValue(this.props.value);
76 | 
77 |     if(this.props.onChange){
78 |       selectControl.on('change', this.handleChange);
79 |     }
80 |   },
81 | 
82 |   componentDidMount: function () {
83 |     this.rebuildSelectize();
84 |   },
85 | 
86 |   componentDidUpdate: function () {
87 |     this.rebuildSelectize();
88 |   },
89 | 
90 |   render: function () {
91 |     var classes = this.props.classes;
92 |     return <div className={classes && classes.length > 0 ? classes.join(' ') : ''}>
93 |       <label htmlFor={this.props.selectId}>{this.props.label}</label>
94 |       <select id={this.props.selectId} placeholder={this.props.placeholder}></select>
95 |     </div>
96 |   }
97 | });
98 | 


--------------------------------------------------------------------------------