Support paintext Array for Editable select

Author: kunyan

src/EditableSelect.js

@@ -9,25 +9,45 @@ export default class EditableSelect extends React.Component {
     name: React.PropTypes.string.isRequired,
     onUpdate: React.PropTypes.func.isRequired,
     options: React.PropTypes.array.isRequired,
+    defaultOptionText: React.PropTypes.string,
   }
   constructor(props) {
     super(props);
-    const text = this.props.options.map((option) => {
-      return option.value === this.props.value ? option.text : '';
+    this.setState = this.setState.bind(this);
+
+    const options = this.convertOptions(this.props.options);
+    if (this.props.defaultOptionText) {
+      options.unshift({ text: this.props.defaultOptionText, value: null});
+    }
+    const selected = options.find((opt) => {
+      if (opt.value === this.props.value) {
+        return opt;
+      }
     });
+
+    let text = 'Invalid value';
+
+    if (selected) {
+      text = selected.text;
+    } else if (this.props.defaultOptionText) {
+      text = this.props.defaultOptionText;
+    }
     this.state = {
       isEditing: false,
+      options: options,
       text: text,
+      value: this.props.value,
     };
-    this.setState = this.setState.bind(this);
+
   }
+
   save = (event) => {
     event.preventDefault();
-    const obj = this.refs.select;
-    this.props.onUpdate(this.props.name, obj.value);
+    this.props.onUpdate(this.props.name, this.refs.el.value);
     this.setState({
       isEditing: false,
-      text: obj.options[obj.selectedIndex].text,
+      text: this.refs.el.options[this.refs.el.selectedIndex].text,
+      value: this.refs.el.value,
     });
   }
   cancel = () => {
@@ -36,14 +56,25 @@ export default class EditableSelect extends React.Component {
   handleLinkClick = () => {
     this.setState({isEditing: true});
   }
+
+  convertOptions= (options) => {
+    return options.map((opt) => {
+      if (typeof opt === 'string'
+        || typeof opt === 'number'
+        || typeof opt === 'boolean') {
+        return { text: opt, value: opt};
+      }
+      return {text: opt.text, value: opt.value};
+    });
+  }
   render() {
     if (this.state.isEditing) {
-      const options = this.props.options.map((option, index) => {
-        return <option key={index} value={option.value}>{option.text}</option>;
+      const options = this.state.options.map((opt, index) => {
+        return <option key={index} value={opt.value}>{opt.text}</option>;
       });
       return (
         <XEditable isLoading={false} save={this.save} cancel={this.cancel}>
-          <select ref='select' className='form-control input-sm' name={this.props.name} defaultValue={this.props.value} >
+          <select ref='el' className='form-control input-sm' name={this.props.name} defaultValue={this.state.value} >
             {options}
           </select>
         </XEditable>

test/app.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {EditableTextField, EditableSelect, EditableTextArea} from '../index';
+import {EditableTextField, EditableSelect, EditableTextArea} from '../src/index';
 
 const XTextField = class XTextField extends React.Component {
   constructor(props) {
@@ -30,22 +30,29 @@ const XSelect = class XSelect extends React.Component {
     this.setState({value: value});
   }
   render() {
-    const options = [
-      {
-        text: 'China',
-        value: 'CN'
-      }, {
-        text: 'India',
-        value: 'IN'
-      }, {
-        text: 'United Kingdom (UK)',
-        value: 'UK'
-      }, {
-        text: 'United States of America (USA)',
-        value: 'USA'
-      }
+    // const options = [
+    //   {
+    //     text: 'China',
+    //     value: 'CN'
+    //   }, {
+    //     text: 'India',
+    //     value: 'IN'
+    //   }, {
+    //     text: 'United Kingdom (UK)',
+    //     value: 'UK'
+    //   }, {
+    //     text: 'United States of America (USA)',
+    //     value: 'USA'
+    //   }
+    // ];
+    const options2 = [
+      'Hello',
+      'World',
+      'Sky',
+      'Air',
+      // 'UK',
     ];
-    return (<EditableSelect name='country' onUpdate={this.handleUpdate} value={this.state.value} options={options}/>);
+    return (<EditableSelect name='country' onUpdate={this.handleUpdate} value={this.state.value} options={options2} defaultOptionText='Not select'/>);
   }
 };