import React from 'react';
import { TextOverflow } from '../../src';

const Example = React.createClass({

  propTypes: {},

  getInitialState() {
    return {
      text: 'short text'
    };
  },

  toggleTextVersion() {
    this.setState({text: this.state.text === 'short text' ? 'very long text translation' : 'short text'});
  },

  getTemplate() {
    return (
      <div>
        <button style={{maxWidth: 100}} onClick={this.toggleTextVersion}>
          <TextOverflow style={{color: 'blue'}} popover={{position: 'bottom', anchor: 'left'}}>
            {this.state.text}
          </TextOverflow>
        </button>
        <TextOverflow style={{color: 'blue', width: 150}}>
          sono un testo lungo lungo lungo
        </TextOverflow>
        <TextOverflow style={{color: 'blue', width: 150}}>
          <span>sono un testo lungo lungo lungo</span>
        </TextOverflow>
      </div>
    );
  },

  render() {
    return this.getTemplate();
  }

});

export default Example;

@@ -41,16 +41,35 @@
 Overflow
+, Popover, FlexView
  %7D from 
@@ -385,19 +385,49 @@
 %0A      %3C
-div
+FlexView style=%7B%7BmarginTop: 100%7D%7D
 %3E%0A      
@@ -453,16 +453,34 @@
 axWidth:
+ 100, marginRight:
  100%7D%7D o
@@ -559,16 +559,40 @@
 'blue'%7D%7D
+ label=%7Bthis.state.text%7D
  popover
@@ -634,84 +634,70 @@
 t'%7D%7D
-%3E%0A            %7Bthis.state.text%7D%0A          %3C/TextOverflow%3E%0A        %3C/button%3E%0A
+ /%3E%0A        %3C/button%3E%0A        %3Cdiv style=%7B%7BmaxWidth: 150%7D%7D%3E%0A  
     
@@ -739,34 +739,18 @@
 lue'
-, width: 150%7D%7D%3E%0A          
+%7D%7D label='
 sono
@@ -776,16 +776,18 @@
 go lungo
+'%3E
 %0A       
@@ -791,137 +791,141 @@
     
-%3C/TextOverflow%3E%0A        %3CTextOverflow style=%7B%7Bcolor: 'blue', width: 150%7D%7D%3E%0A          %3Cspan%3Esono un testo lungo lungo lungo%3C/span%3E
+    %7B(self) =%3E %3CPopover popover=%7B%7Bcontent: 'sono un testo lungo lungo lungo'%7D%7D style=%7B%7Bcolor: 'red', width:'100%25'%7D%7D%3E%7Bself%7D%3C/Popover%3E%7D
 %0A   
@@ -929,16 +929,18 @@
         
+  
 %3C/TextOv
@@ -957,15 +957,35 @@
     
+  
 %3C/div%3E%0A
+      %3C/FlexView%3E%0A
     

improve examples