diocl-ui-react.dart

class ToDoItem {
  String name;
  bool check;

  ToDoItem(this.name, [this.check = false]);
}

class ToDo {
  final List<ToDoItem> init;

  ToDo({required this.init});

  Element createElement() => ToDoState();
}

class ToDoState {
  String edit = '';
  final list = <ToDoItem>[];

  void initState() {
    list.addAll(widget.init);
  }

  Glyph  build() {
    return Box(
      color: 'gray',
      child: Column(
        childrend: [
          Row(
            children: [
              Edit(
                value: edit,
                onChange: (newVal) {
                  setState(() {
                    edit = newVal;
                  });
                }
              ),
              Button(
                'Add',
                onClick: () {
                  setState(() {
                    list.add(edit);
                  });
                }
              ),
              if (list.isNotEmpty)
                Button(
                  'Clear',
                  onClick: () {
                    setState(() {
                      list.clear();
                    });
                  }
                )
            ]
          ),
          ListView(
            childrend: list.map(buildItem).toList(),
          ),
        ]
      ),
    );
  }

  Glyph buildItem(ToDoItem item) {
    return ToDoItemWidget(
      item,
    );
  }
}

class ToDoItemWidget {
  final ToDoItem item;

  ToDoItemWidget(this.item);

  Element createState() => TodoItemState();
}

class TodoItemState {
  bool isEdit = false;
  Glyph build() {
    return Mouse(
      onDoubleClick: () {
        setState(() {
          isEdit = true;
        });
      },
      child: Row(
        children: [
          if (isEdit)
            Edit(
              value: widget.item.name,
              onChange: (newVal) {
                setState(() {
                  widget.item.name = newVal;
                  isEdit = false;
                });
              }
            );
          
          if (!isEdit)
            Text(widget.item.name),
    
          Checkbox(
            value: widget.item.check,
            onChange: (newVal) {
              setState(() {
                widget.item.check = newVal;
              });
            }
          ),
        ]
      )
    );
  }
}