collaborative-ui/lib/examples/Todos/NewItem.js

React component library for building real-time collaborative editing applications.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NewItem = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Button_1 = require("nice-ui/lib/2-inline-block/Button");
const useStore_1 = require("../../hooks/useStore");
const StrAdapterNative_1 = require("../../StrAdapterNative");
const TitleInput_1 = require("./inputs/TitleInput");
const Space_1 = require("nice-ui/lib/3-list-item/Space");
const Background_1 = require("./Background");
const NewItem = ({ store }) => {
    const inputRef = React.useRef(null);
    const view = (0, useStore_1.useStore)(store);
    const [text, setText] = React.useState('');
    if (!Array.isArray(view.list)) {
        return null;
    }
    return (React.createElement(Background_1.Background, null,
        React.createElement(StrAdapterNative_1.StrAdapterNative, { value: text, onChange: (next) => setText(next) }, (str) => (React.createElement(TitleInput_1.TitleInput, { inp: (el) => (inputRef.current = el), fullWidth: true, multiline: true, wrap: true, typeahead: text ? '' : 'Add task', str: str }))),
        !!text && React.createElement(Space_1.Space, { size: -1 }),
        !!text && (React.createElement(Button_1.Button, { size: -1, block: true, onClick: () => {
                const task = {
                    id: Math.random().toString(36).slice(2),
                    text: text,
                    completed: false,
                };
                setText('');
                store.update({ op: 'add', path: '/list/-', value: task });
                const input = inputRef.current;
                if (input)
                    input.focus();
            } }, "Add"))));
};
exports.NewItem = NewItem;