Add: support of value props for select2 with examples

rkit · Feb 3, 2016 · d7146f4 · d7146f4
1 parent a85ad15
commit d7146f4
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 5 deletions.
diff --git a/examples/src/components/Tags.js b/examples/src/components/Tags.js
@@ -1,22 +1,35 @@
 import React, { Component } from 'react';
 import Select2 from '../../../src/components/Select2';
 import '../../../css/select2.css';
-
+import $ from 'jquery';
+/* eslint react/jsx-no-bind: 0, arrow-spacing: 0 */
 export default class Tags extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value1: ['feature'],
+      value2: null,
+    };
+  }
   render() {
+    const { value1, value2 } = this.state;
     return (
       <div>
         Basic usage<br/>
         <Select2
           multiple
           data={['bug', 'feature', 'documents', 'discussion']}
+          value={ value1 }
+          onChange={(e)=> {
+            this.setState({ value1: $(e.target).val() });
+          }}
           options={
             {
               placeholder: 'search by tags',
             }
           }
         />
-
+        <button onClick={ ()=> this.setState({ value1: ['bug', 'discussion'] }) }>Set 'bug' 'discussion' value</button>
         <br/><br/>
 
         With data as an object<br/>
@@ -28,11 +41,16 @@ export default class Tags extends Component {
             { text: 'documents', id: 3 },
             { text: 'discussion', id: 4 },
           ]}
+          defaultValue={ 1 }
+          value={ value2 }
+          onChange={ (e)=> {
+            this.setState({ value2: +$(e.target).val() });
+          }}
           options={{
             placeholder: 'search by tags',
           }}
         />
-
+        <button onClick={ ()=> this.setState({ value2: 3 }) }>Set 'documents' value</button>
         <br/><br/>
 
         With callbacks<br/>

diff --git a/examples/webpack.config.js b/examples/webpack.config.js
@@ -35,6 +35,8 @@ module.exports = {
     noParse: [],
   },
 
+  devtool: 'eval-source-map',
+
   plugins: [
     new ExtractTextPlugin('[name].css'),
     new webpack.optimize.DedupePlugin(),

diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "input"
   ],
   "dependencies": {
+    "fbjs": "^0.7.0",
     "jquery": "^2.1.4",
     "react": "^0.14.0",
     "react-dom": "^0.14.1",

diff --git a/src/components/Select2.js b/src/components/Select2.js
@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import $ from 'jquery';
 import 'select2';
+import shallowEqual from 'fbjs/lib/shallowEqual';
 
 export default class Select2 extends Component {
   static propTypes = {
@@ -10,6 +11,11 @@ export default class Select2 extends Component {
       PropTypes.array,
       PropTypes.string,
     ]),
+    value: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.array,
+      PropTypes.string,
+    ]),
     data: PropTypes.array,
     events: PropTypes.array,
     options: PropTypes.object,
@@ -45,6 +51,16 @@ export default class Select2 extends Component {
     this.props.events.forEach(event => {
       this.el.on(event[0], this.props[event[1]]);
     });
+    const { defaultValue, value } = this.props;
+    if (!defaultValue && value !== (void 0)) {
+      this.setValue(value);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.el && nextProps.value !== this.props.value) {
+      this.setValue(nextProps.value);
+    }
   }
 
   componentWillUnmount() {
@@ -54,9 +70,15 @@ export default class Select2 extends Component {
     this.el.select2('destroy');
   }
 
-  render() {
-    const { data, ...params } = this.props;
+  setValue(value) {
+    const elVal = this.el.val();
+    if (!shallowEqual(elVal, value)) {
+      this.el.val(value).trigger('change');
+    }
+  }
 
+  render() {
+    const { data, value, ...params } = this.props;
     return (
       <select {...params}>
         {data.map((item, k) => {