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
{switch (url.path) { | ["new-post"] => | ["fav-colors"] => + | ["todo"] => | _ =>

{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: [||]}, + (), + ); + +

+
{ + ReactEvent.Synthetic.preventDefault(event); + submit(); + }}> + + {state.values.todos + ->Belt.Array.mapWithIndex((index, todo) => + <> +
+ + + {(todo.completed ? "Done" : "Not done") |> React.string} + + + + + ) + ->React.array} +
+
; +};