@nodeject/ui-components
Version:
UI library for non-trivial components
35 lines (34 loc) • 2.22 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TodoListItem = void 0;
var antd_1 = require("antd");
var React = require("react");
var icons_1 = require("../icons");
var layout_1 = require("../layout");
var editable_label_1 = require("../editable-label");
var styles = require("./TodoItem.module.less");
var Text = antd_1.Typography.Text;
var TodoListItem = function (props) {
var deleteTodoItem = props.deleteTodoItem, id = props.id, isCompleted = props.isCompleted, renameTodoItem = props.renameTodoItem, title = props.title, toggleTodo = props.toggleTodo;
var handleRenameTodo = function (title) {
renameTodoItem(id, title);
};
var editableTitle = (React.createElement(editable_label_1.EditableLabel, { canEdit: true, editOnClick: true, htmlTag: isCompleted ? 'del' : 'span', initialValue: title, onSave: handleRenameTodo, setCursorOnFocus: 'selectAll' }));
var item = isCompleted ? (React.createElement(Text, { delete: isCompleted, type: 'secondary' }, editableTitle)) : (React.createElement(Text, null, editableTitle));
var handleToggle = function () {
toggleTodo(id);
};
var handleDeleteListItem = function () {
deleteTodoItem(id);
};
var popoverContent = (React.createElement(antd_1.List, null,
React.createElement(antd_1.List.Item, { className: styles.todoItem, style: { padding: '.5rem', cursor: 'pointer' }, onClick: handleDeleteListItem }, "Delete item")));
return (React.createElement(antd_1.List.Item, { className: styles.todoItem, key: id },
React.createElement(layout_1.AlignLeftRight, { style: { width: '100%' }, left: React.createElement(React.Fragment, null,
React.createElement(antd_1.Checkbox, { defaultChecked: isCompleted, onChange: handleToggle }),
" ",
item), right: React.createElement(antd_1.Popover, { placement: 'bottomRight', title: 'Item Actions', content: popoverContent, trigger: 'click' },
React.createElement("div", { className: styles.actions },
React.createElement(icons_1.MoreHorizontalIcon, null))) })));
};
exports.TodoListItem = TodoListItem;