@nodeject/ui-components
Version:
UI library for non-trivial components
58 lines (57 loc) • 2.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Todo = void 0;
var antd_1 = require("antd");
var use_methods_1 = require("use-methods");
var React = require("react");
var _1 = require("./");
var editable_label_1 = require("../editable-label");
var icons_1 = require("../icons");
var styles = require("./Todo.module.less");
var Text = antd_1.Typography.Text;
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(icons_1.CheckSquareIcon, null),
' ',
React.createElement(editable_label_1.EditableLabel, { canEdit: true, editOnClick: true, htmlTag: 'span', initialValue: props.title.text || 'todo', onSave: handleTodoTitleSave, setCursorOnFocus: 'selectAll' })))
};
var _a = use_methods_1.default(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(antd_1.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(_1.TodoList, { header: header, addTodoItem: addTodoItem, deleteTodoItem: deleteTodoItem, todoItemList: todoItemList, toggleTodo: toggleTodo, renameTodoItem: renameTodoItem })));
};
exports.Todo = Todo;
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;
}
};
};