Show/hide handlers

examples/App.jsx

@@ -365,6 +365,8 @@ export default class App extends Component {
                             title="Enter username"
                             value="ni3galave"
                             handleSubmit={this.handleSubmit}
+							handleShow={function(arg){console.log('show', arg)}}
+							handleHide={function(arg){console.log('hide', arg)}}
                           />
                         <Panel collapsible expanded={this.state.simpleTextFieldInline} >
                                         <pre> {`<Editable

libs/js/Editable.jsx

@@ -46,6 +46,8 @@ export default class Editable extends Component {
         onInputChange : props.onInputChange ?  props.onInputChange : null,
         //handle callback if provided
         handleSubmit : props.handleSubmit ? props.handleSubmit : null,
+        handleShow: props.handleShow ? () => props.handleShow(this) : null,
+        handleHide: props.handleHide ? () => props.handleHide(this) : null,
         //for internal use
         editable: false,
         valueUpdated : false,
@@ -86,7 +88,7 @@ export default class Editable extends Component {
 
   }
   setEditable = (editable) => {
-    if(!this.state.disabled) this.setState({editable});
+    if(!this.state.disabled) this.setState({editable}, editable ? this.state.handleShow : this.state.handleHide);
   }
 
   onSubmit = () => {
@@ -112,10 +114,11 @@ export default class Editable extends Component {
     }
   }
   getValueForAnchor(){
+    if(this.props.display){
+      return this.props.display(this.value);
+    }
     if(this.value){
-      if(this.props.display){
-        return this.props.display(this.value);
-      } else if(this.props.seperator && _.isArray(this.value)){
+      if(this.props.seperator && _.isArray(this.value)){
         return _.join(this.value, this.props.seperator);
       }else if(_.isArray(this.value)){
         return _.join(this.value, ',');
@@ -244,6 +247,7 @@ Editable.defaultProps = {
   mode : "inline",
   disabled : false,
   emptyValueText : "empty",
+  autoFocus: true,
   //depend on mode
   placement : "right",
 };
@@ -254,6 +258,7 @@ Editable.propTypes = {
     mode : PropTypes.string,
     showButtons : PropTypes.bool,
     disabled : PropTypes.bool,
+    autoFocus: PropTypes.bool,
     validate : PropTypes.func,
     display: PropTypes.func,
     onInputChange : PropTypes.func,

libs/js/Select.jsx

@@ -59,6 +59,7 @@ export default class Select extends Component {
     return (
         <FormGroup controlId="formControlsSelect" validationState={this.props.validation.type} >
             <FormControl
+                autoFocus={this.props.autoFocus}
                 componentClass="select"
                 placeholder={this.props.placeholder}
                 bsSize="small"

libs/js/Text.jsx

@@ -36,6 +36,7 @@ export default class Text extends Component {
     return (
       <FormGroup controlId="formBasicText" validationState={this.props.validation.type} key={"FormGroup"+this.props.name}>
         <FormControl
+          autoFocus={this.props.autoFocus}
           key={"form-control"+this.props.name}
           type="text"
           placeholder={this.props.placeholder}

libs/js/Textarea.jsx

@@ -37,6 +37,7 @@ export default class Textarea extends Component {
     return (
         <FormGroup controlId="formBasicTextarea" validationState={this.props.validation.type}>
          <FormControl
+            autoFocus={this.props.autoFocus}
              style={{height: '200px'}}
              componentClass="textarea"
              bsSize="sm"