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;

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

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

class EditableExample extends PureComponent {
    state = {
        isEditing: false,
        currentBasic: 'Kitchen Printer',
    };

    handleEditRequest = (event) => {
        this.setState({ isEditing: true });
        action('editRequest')(event);
    }

    handleEditEnd = (event) => {
        if (!event.reset) {
            this.setState({ currentBasic: event.value });
        }

        this.setState({ isEditing: false });
        action('editEnd')(event);
    }

    render() {
        return (
            <DebugBox>
                <EditableTextLabel
                    inEdit={this.state.isEditing}
                    icon="printer"
                    basic={this.state.currentBasic}
                    aside="00:11:22:33"
                    tag="Online"
                    onEditRequest={this.handleEditRequest}
                    onEditEnd={this.handleEditEnd} />
            </DebugBox>
        );
    }
}

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

            <p>Interactive example:</p>
            <EditableExample />
        </div>
    );
}

export default Editable;

Update interactive examples for <EditableTextLabel>