Piku to-do item example

todo-item.design.js

// This file is automatically generated from the state chart and the frames

export default TodoItem;

const TodoItem = new EntityDefinition({
    name: 'Todo',

    isParallel: true,

    states: {
        Mode: {
            states: {
                Reading: {
                    on: {
                        edit: 'editing'
                    }
                },

                Editing: {
                    on: {
                        cancel: 'editing',
                        save: 'editing'
                    }
                }
            }

        },
        Completion: {
            states: {
                Pending: {
                    on: {
                        toggle: 'Done'
                    }
                },
                Done: {
                    on: {
                        toggle: 'Pending'
                    }
                }
            }
        },

        view: {
            base: (todo) => {
                const description = todo.get('description');

                return html`               
                <div>
                    <div data-section="todo">                    
                        <input type="checkbox">
                        
                        <div data-section="description">${description}</div>
                    </div>
                                    
                    <div data-section="quick-actions"></div>                                                              
                </div>            
            `;
            },

            variations: {
                'Mode.Editing': {
                    base: (todo) => {
                        const description = todo.get('newDescription');

                        return html`
                        <div data-section="todo">
                            <input type="checkbox">                        
                            <input data-section="description-input" type="text" value=${description}/>    
                        </div>
                    `;
                    },

                    variations: {
                        'Completion.Done': (todo) => {
                            const description = todo.get('description');

                            return html`
                                <div data-section="todo">
                                    <input type="checkbox" checked>                        
                                    <input data-section="description-input" type="text" value=${description}/>    
                                </div>
                            `;
                        }
                    }
                },

                'Mode.Done': () => {
                    const description = todo.get('description');

                    return html`
                        <div data-section="todo">
                            <input type="checkbox" checked>                        
                            <div data-section="description" style="text-decoration: line-through">${description}</div>
                        </div>
                    `;
                }
            }
        }
    }
});

todo-item.js

// This file is written by hand and attaches logic to the state chart

import TodoItem from './todo.design.js';

TodoItem
    .attributes({
        description: ''
    })
    .state('Mode.Editing', {

        attributes: {
            newDescription: ''
        },

        entry: (todo) => {
            todo.findSection('input').focus();
        },

        transition: {
            save: {
                condition: (todo) => todo.get('description') !== '',
                action: (todo) => {
                    const description = todo.get('newDescription');
                    todo.set('description', description);
                }
            }
        }
    })

    // define event handlers

    .select('delete-button', {
        click: (todo, event) => {
            todo.destroy();
        }
    })
    .select('description', {
        doubleClick: (todo) => {
            todo.transition('edit');
        }
    })
    .select('description-input', {
        onBlur: (todo) => todo.transition('save'),
        onKeyUp: (todo, event) => {
            if (event.key === 'Enter') {
                todo.transition('cancel');

            } else if (event.key === 'Esc') {
                todo.transition('save');
            }

        }
    });