react-x-editable/examples/dummy.jsx

React X editable using react-bootstrap.

import React, { Component } from 'react';
import {Label,
Panel,
Button,
OverlayTrigger,
Popover,
FormControl,
FormGroup,
HelpBlock
} from 'react-bootstrap';
import Editable from '../libs/js/Editable';
import CustomComponent from './CustomComponent';
import './styles/plugin.css';
import './styles/demo.css';
import '../libs/css/editable.css';



export default class Dummy extends Component {
  constructor(){
    super();
    this.state = {
      simpleTextField : false,
      emptyRequiredTextField : false,
      value : ""
    }
  }
  demoClick = () =>{
    this.setState({ value : "ni3galave"})
  }
  getTextField(){
    return (
      <FormGroup controlId="formBasicText" key={"FormGroup-aaaa"}>
        <FormControl
          autoFocus
          key={"FormControl-aa"}
          type="text"
          placeholder="Enter text"
          bsSize="sm"

        />
      </FormGroup>

    );
  }
  render(){

    return(
      <div className="text-center"><br/><br/><br/><br/><br/><br/><br/>
      <Button onClick={this.demoClick.bind(this)}>Demo</Button><br/><br/>
      <Editable
        name={"abc"}
        mode={"inline"}
        value={"abc"}
        display={(value, onOk) => {
          return "username:"+value;
        }}
        onSubmitCallback={(event) => {
          console.log(event)
          console.log("onSubmitCallback")
        }}
        onCancelCallback={(event) => {
          console.log(event)
          console.log("onCancelCallback")
        }}
        >

      </Editable>

      <br/><br/><br/><br/><br/>
    </div>
    )
  }
  render1(){
    const popoverLeft = (
  <Popover id="popover-positioned-scrolling-right" title="Popover right">
    <strong>Holy guacamole!</strong> Check this info.
  </Popover>
);
const popoverBottom= (
<Popover id="popover-positioned-scrolling-bottom" title="Popover bottom">
<strong>Holy guacamole!</strong>
{this.getTextField()}
</Popover>
);
    return(
      <div className="text-center">
        {this.getHTML()}
        AA
        <OverlayTrigger container={this} trigger="click" placement="right" overlay={popoverLeft}>
         <Button>Holy guacamole!</Button>
       </OverlayTrigger><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     <OverlayTrigger container={this} trigger="click" placement="left" overlay={popoverBottom} shouldUpdatePosition={true}>
        <Button>Holy guacamole!</Button>
      </OverlayTrigger><br />
    <OverlayTrigger container={this} trigger="click" placement="left" overlay={popoverLeft}>
         <Button>Holy guacamole!</Button>
       </OverlayTrigger><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
      </div>
    )
  }
  getHTML(){
    return (<div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
    )
  }
}