@nodeject/ui-components
Version:
UI library for non-trivial components
31 lines (30 loc) • 2.06 kB
JavaScript
import { Checkbox, List, Popover, Typography } from 'antd';
import * as React from 'react';
import { MoreHorizontalIcon } from '../icons';
import { AlignLeftRight } from '../layout';
import { EditableLabel } from '../editable-label';
import * as styles from './TodoItem.module.less';
var Text = Typography.Text;
export 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(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(List, null,
React.createElement(List.Item, { className: styles.todoItem, style: { padding: '.5rem', cursor: 'pointer' }, onClick: handleDeleteListItem }, "Delete item")));
return (React.createElement(List.Item, { className: styles.todoItem, key: id },
React.createElement(AlignLeftRight, { style: { width: '100%' }, left: React.createElement(React.Fragment, null,
React.createElement(Checkbox, { defaultChecked: isCompleted, onChange: handleToggle }),
" ",
item), right: React.createElement(Popover, { placement: 'bottomRight', title: 'Item Actions', content: popoverContent, trigger: 'click' },
React.createElement("div", { className: styles.actions },
React.createElement(MoreHorizontalIcon, null))) })));
};