collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
68 lines (67 loc) • 3.31 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Todos = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Paper_1 = require("nice-ui/lib/4-card/Paper");
const MiniTitle_1 = require("nice-ui/lib/3-list-item/MiniTitle");
const Separator_1 = require("nice-ui/lib/3-list-item/Separator");
const nano_theme_1 = require("nano-theme");
const NewItem_1 = require("./NewItem");
const List_1 = require("./List");
const BasicButton_1 = tslib_1.__importDefault(require("nice-ui/lib/2-inline-block/BasicButton"));
const Flex_1 = require("nice-ui/lib/3-list-item/Flex");
const Split_1 = require("nice-ui/lib/3-list-item/Split");
const Space_1 = require("nice-ui/lib/3-list-item/Space");
const useStore_1 = require("../../hooks/useStore");
const css = {
block: (0, nano_theme_1.rule)({
bxz: 'border-box',
w: '100%',
maxW: '600px',
}),
title: (0, nano_theme_1.rule)({
pd: '16px',
bxz: 'border-box',
w: '100%',
}),
content: (0, nano_theme_1.rule)({
pd: '16px',
}),
};
const Todos = ({ store }) => {
const [tab, setTab] = React.useState('in-progress');
React.useLayoutEffect(() => {
try {
const view = store.getSnapshot();
if (!view || typeof view !== 'object')
return;
if (!Array.isArray(view.list)) {
store.update({ op: 'add', path: '/list', value: [] });
}
}
catch { }
}, [store]);
const view = (0, useStore_1.useStore)(store);
if (!view || typeof view !== 'object')
return null;
const hasCompleted = !!view.list?.find((task) => task.completed);
const header = (React.createElement(React.Fragment, null,
React.createElement("div", { className: css.title },
React.createElement(Split_1.Split, { style: { alignItems: 'center' } },
React.createElement(MiniTitle_1.MiniTitle, null, "Todos"),
React.createElement("div", { style: { minHeight: 24 } }, ((!!view.list?.length && hasCompleted) || tab === 'completed') && (React.createElement(Flex_1.Flex, { style: { alignItems: 'center' } },
React.createElement(BasicButton_1.default, { fill: tab === 'in-progress', width: 'auto', onClick: () => setTab('in-progress') }, "In progress"),
React.createElement(Space_1.Space, { horizontal: true, size: -2 }),
React.createElement(BasicButton_1.default, { fill: tab === 'completed', width: 'auto', onClick: hasCompleted ? () => setTab('completed') : undefined },
"Completed",
' ',
hasCompleted ? `(${view.list.reduce((acc, todo) => acc + (todo.completed ? 1 : 0), 0)})` : '')))))),
React.createElement(Separator_1.Separator, null)));
return (React.createElement(Paper_1.Paper, { className: css.block, fill: 1, round: true, contrast: true },
header,
React.createElement("div", { className: css.content },
React.createElement(List_1.List, { store: store, completed: tab === 'completed' }),
tab === 'in-progress' && React.createElement(NewItem_1.NewItem, { store: store }))));
};
exports.Todos = Todos;