diff --git a/examples/Examples.re b/examples/Examples.re index 71c83dff7..dc85e8242 100644 --- a/examples/Examples.re +++ b/examples/Examples.re @@ -155,6 +155,11 @@ let state: state = { render: _ => NestedClickable.render(), source: "NestedClickable.re", }, + { + name: "Keyed List", + render: _ => KeyedListExample.render(), + source: "KeyedListExample.re", + }, ], selectedExample: "Animation", }; diff --git a/examples/KeyedListExample.re b/examples/KeyedListExample.re new file mode 100644 index 000000000..98ebcd188 --- /dev/null +++ b/examples/KeyedListExample.re @@ -0,0 +1,69 @@ +open Revery; +open Revery.UI; +open Revery.UI.Components; + +module Styles = { + open Style; + + let container = []; + + let toggle = [ + flexDirection(`Row), + justifyContent(`Center), + alignItems(`Center), + ]; + + let item = (~borderOpacity) => [ + border(~width=2, ~color=Color.rgba(0., 1., 1., borderOpacity)), + ]; + + let list = []; + + let text = [ + marginBottom(10), + fontFamily("Roboto-Regular.ttf"), + fontSize(16), + ]; +}; + +let toggle = (~checked, ~onChange, ()) => + + + + ; + +let%component item = (~label, ()) => { + let%hook (borderOpacity, _, _) = + Hooks.animation(Animation.(animate(Time.ms(500)) |> tween(1., 0.))); + + + + ; +}; + +let list = (~children, ()) => children ; + +let items = [ + (React.Key.create(), "Item 1"), + (React.Key.create(), "Item 2"), + (React.Key.create(), "Item 3"), + (React.Key.create(), "Item 4"), +]; + +let%component container = () => { + let%hook (checked, setChecked) = Hooks.state(false); + + let items = + checked ? items : List.filter(((_, label)) => label != "Item 3", items); + + + setChecked(checked => !checked)} /> + + {items + |> List.map(((_, label)) => ) + |> React.listToElement} + + ; +}; + +let render = () => ;