import React from 'react';
import { action } from '@kadira/storybook';

import EditableTextLabel from 'src/EditableTextLabel';
import DebugBox from '../DebugBox';

function Editable() {
    return (
        <div>
            <DebugBox>
                <EditableTextLabel
                    icon="printer"
                    basic="Kitchen Printer A"
                    aside="00:11:22:33"
                    tag="Online"
                    onEditRequest={action('editRequest')} />
            </DebugBox>

            <DebugBox>
                <EditableTextLabel
                    inEdit
                    icon="printer"
                    basic="Kitchen Printer A"
                    aside="00:11:22:33"
                    tag="Online"
                    onEditEnd={action('editEnd')} />
            </DebugBox>

            <DebugBox>
                <EditableTextLabel
                    status="loading"
                    icon="printer"
                    basic="Kitchen Printer A"
                    aside="00:11:22:33"
                    tag="Online" />
            </DebugBox>
        </div>
    );
}

export default Editable;

@@ -5,16 +5,35 @@
 rt React
+, %7B PureComponent %7D
  from 'r
@@ -180,16 +180,13 @@
 ';%0A%0A
-function
+class
  Edi
@@ -194,229 +194,382 @@
 able
-() %7B%0A    return (%0A        %3Cdiv%3E%0A            %3CDebugBox%3E%0A                %3CEditableTextLabel%0A                    icon=%22printer%22
+Example extends PureComponent %7B%0A    state = %7B%0A        isEditing: false,%0A        currentBasic: 'Kitchen Printer',%0A    %7D;%0A%0A    handleEditRequest = (event) =%3E %7B%0A        this.setState(%7B isEditing: true %7D);%0A        action('editRequest')(event);
 %0A    
+%7D%0A%0A
     
-            basic=%22Kitchen Printer A%22%0A                    aside=%2200:11:22:33%22%0A  
+handleEditEnd = (event) =%3E %7B%0A        if (!event.reset) %7B%0A            this.setState(%7B currentBasic: event.value %7D);%0A
         
     
@@ -556,34 +556,35 @@
 lue %7D);%0A        
-  
+%7D%0A%0A
         tag=%22Onl
@@ -580,105 +580,116 @@
    t
-ag=%22Online%22%0A                    onEditRequest=%7Baction('editRequest')%7D /%3E%0A            %3C/DebugBox%3E%0A
+his.setState(%7B isEditing: false %7D);%0A        action('editEnd')(event);%0A    %7D%0A%0A    render() %7B%0A        return (
 %0A   
@@ -769,16 +769,39 @@
   inEdit
+=%7Bthis.state.isEditing%7D
 %0A       
@@ -854,35 +854,41 @@
   basic=
-%22Kitchen Printer A%22
+%7Bthis.state.currentBasic%7D
 %0A       
@@ -983,59 +983,94 @@
 Edit
-End=%7Baction('editEnd')%7D /%3E%0A            %3C/DebugBox%3E%0A
+Request=%7Bthis.handleEditRequest%7D%0A                    onEditEnd=%7Bthis.handleEditEnd%7D /%3E
 %0A   
@@ -1071,32 +1071,33 @@
 /%3E%0A            %3C
+/
 DebugBox%3E%0A      
@@ -1102,34 +1102,54 @@
     
+);%0A
     
-    %3CEditableTextLabel
+%7D%0A%7D%0A%0Afunction Editable() %7B%0A    return (
 %0A   
@@ -1145,32 +1145,38 @@
 eturn (%0A        
+%3Cdiv%3E%0A
             stat
@@ -1175,29 +1175,27 @@
     
-status=%22loading%22%0A    
+%3CEditableTextLabel%0A
     
@@ -1233,28 +1233,24 @@
             
- 
-   
 basic=%22Kitch
@@ -1263,14 +1263,10 @@
 nter
- A%22%0A  
+%22%0A
     
@@ -1269,34 +1269,32 @@
                 
-  
 aside=%2200:11:22:
@@ -1289,36 +1289,32 @@
 e=%2200:11:22:33%22%0A
-    
                 
@@ -1325,20 +1325,121 @@
 %22Online%22
+%0A                onEditRequest=%7Baction('editRequest')%7D%0A                onEditEnd=%7Baction('editEnd')%7D
  /%3E%0A
+%0A
         
@@ -1439,33 +1439,81 @@
            %3C
-/DebugBox
+p%3EInteractive example:%3C/p%3E%0A            %3CEditableExample /
 %3E%0A        %3C/

Update interactive examples for <EditableTextLabel>