diff --git a/packages/demo/bsconfig.json b/packages/demo/bsconfig.json
index ca1b9034..3edb7165 100644
--- a/packages/demo/bsconfig.json
+++ b/packages/demo/bsconfig.json
@@ -1,8 +1,9 @@
{
"name": "reason-scripts",
- "sources": [
- "src"
- ],
+ "sources": {
+ "dir" : "src",
+ "subdirs" : true
+ },
"bs-dependencies": [
"bs-reform",
"reason-react",
diff --git a/packages/demo/src/App.re b/packages/demo/src/App.re
index 212e7c58..f4635f42 100644
--- a/packages/demo/src/App.re
+++ b/packages/demo/src/App.re
@@ -16,10 +16,13 @@ let make = (~message) => {
"New post form demo "->React.string
"Form with array field demo"->React.string
+
+ "Form with array todo demo"->React.string
{ReasonReact.string("Say hello to ReForm")} diff --git a/packages/demo/src/FavoriteColorsForm.re b/packages/demo/src/modules/FavoriteColorsForm.re similarity index 100% rename from packages/demo/src/FavoriteColorsForm.re rename to packages/demo/src/modules/FavoriteColorsForm.re diff --git a/packages/demo/src/PostAddNext.re b/packages/demo/src/modules/PostAddNext.re similarity index 100% rename from packages/demo/src/PostAddNext.re rename to packages/demo/src/modules/PostAddNext.re diff --git a/packages/demo/src/modules/TodoListForm.re b/packages/demo/src/modules/TodoListForm.re new file mode 100644 index 00000000..458246da --- /dev/null +++ b/packages/demo/src/modules/TodoListForm.re @@ -0,0 +1,91 @@ +open BsReform; + +module TodoLenses = [%lenses + type todo = { + content: string, + completed: bool, + } +]; + +module StateLenses = [%lenses type state = {todos: array(TodoLenses.todo)}]; + +module TodoForm = ReForm.Make(StateLenses); + +[@react.component] +let make = () => { + let {state, submit, arrayPush, arrayUpdateByIndex, arrayRemoveByIndex}: TodoForm.api = + TodoForm.use( + ~schema={ + TodoForm.Validation.Schema([| + Custom( + Todos, + ({todos}) => { + let length = Array.length(todos); + + length < 0 + || Belt.Array.some(todos, item => + Js.String.length(item.content) == 0 + ) + ? Error("Invalid todo") : Valid; + }, + ), + |]); + }, + ~onSubmit= + ({state}) => { + Js.log2("State", state); + None; + }, + ~initialState={todos: [||]}, + (), + ); + +