@nodeject/ui-components/esm/todo/Todo.js

UI library for non-trivial components

import { Progress, Typography } from 'antd';
import useMethods from 'use-methods';
import * as React from 'react';
import { TodoList } from './';
import { EditableLabel } from '../editable-label';
import { CheckSquareIcon } from '../icons';
import * as styles from './Todo.module.less';
var Text = Typography.Text;
export var Todo = function (props) {
    var handleTodoTitleSave = function (value) {
        console.log(value);
    };
    var initialState = {
        id: props.id,
        todoItemList: props.todoItemList || [],
        title: (React.createElement(Text, { strong: true },
            React.createElement(CheckSquareIcon, null),
            ' ',
            React.createElement(EditableLabel, { canEdit: true, editOnClick: true, htmlTag: 'span', initialValue: props.title.text || 'todo', onSave: handleTodoTitleSave, setCursorOnFocus: 'selectAll' })))
    };
    var _a = useMethods(methods, initialState), _b = _a[0], id = _b.id, title = _b.title, todoItemList = _b.todoItemList, // <- latest state
    _c = _a[1] // <- callbacks for modifying state
    , addTodoItem = _c.addTodoItem, deleteTodoItem = _c.deleteTodoItem, renameTodoItem = _c.renameTodoItem, toggleTodo = _c.toggleTodo;
    var header = (React.createElement("div", null,
        title,
        React.createElement(Progress, { percent: Math.round(todoItemList.filter(function (i) { return i.isCompleted; }).length / todoItemList.length * 100) })));
    return (React.createElement("div", { className: styles.todo, id: id },
        React.createElement(TodoList, { header: header, addTodoItem: addTodoItem, deleteTodoItem: deleteTodoItem, todoItemList: todoItemList, toggleTodo: toggleTodo, renameTodoItem: renameTodoItem })));
};
var methods = function (state) {
    return {
        addTodoItem: function (title) {
            state.todoItemList.push({
                createdOn: Date.now().toString(),
                id: Date.now().toString(),
                isCompleted: false,
                title: title
            });
        },
        deleteTodoItem: function (id) {
            state.todoItemList.splice(state.todoItemList.findIndex(function (i) { return i.id === id; }), 1);
        },
        renameTodoItem: function (id, title) {
            var todo = state.todoItemList.find(function (item) { return item.id === id; });
            todo.title = title;
        },
        renameTodoList: function () { },
        toggleTodo: function (id) {
            var todo = state.todoItemList.find(function (item) { return item.id === id; });
            todo.isCompleted = !todo.isCompleted;
        }
    };
};