diocl-ui-no-ract.dart

class ToDo {
  final List<String> init;

  ToDo({required this.init}) {
    update();
  }

  final edit = OutVar<Edit>();
  final listView = OutVar<ListView>();
  final buttonsRow = OutVar<Row>();
  final buttonClear = OutVar<Button>();

  Glyph get initContent =>
    Box(
      color: 'gray',
      child: Column(
        childrend: [
          Row(
            outVar: buttonsRow,
            children: [
              Edit(outVar: edit),
              Button(
                'Add',
                onClick: () {
                  listView.add(ToDoItem(edit.text));
                  edit.text = '';
                  updateClearButton();
                }
              ),
            ]
          ),
          ListView(
            outVar: listView,
            children: init.map((val) => ToDoItem(val)).toList(),
          ),
        ]
      ),
    );

  void updateClearButton() {
    if (listView.len > 0 && buttonClear.isNotExist) {
      buttonsRow.add(
        Button(
          'Clear',
          outVar: buttonClear,
          onClick: () {
            listView.clear();
          }
        )
      );
    } else {
      buttonsRow.remove(buttonClear);
    }
  }
}

class ToDoItem {
  final row = OutVal<Row>();
  final nameText = OutVal<Text>();
  final nameEdit = OutVal<Editor>();
  final checkBox = OutVal<Checkbox>();


  ToDoItem(String name, [bool check = false]) {
    nameText.text = name;
    checkBox.value = check;
  }

  Glyph get initContent =>
    Mouse(
      onDoubleClick: () {
        if (nameText.isExist) {
          row.replace(
            nameText,
            buildEditor(),
          );
        }
      }
      child: Row(
        children: [
          Text(outVal: nameText),
          Checkbox(outVal: checkBox),
        ]
      ),
    );

  Glyph editor() {
    return Row(
      children: [
        Edit(
            outVal: nameEdit,
            value: nameText.text
        ),
        Button(
          text: 'Change',
          onClick: () {
            nameText.text = nameEdit.text;
            row.replace(
              nameEdit,
              Text(outVal: nameText)
            );
          },
        )
      ],
    );
  }
}