revery-ui / revery

:zap: Native, high-performance, cross-platform desktop apps - built with Reason!
https://www.outrunlabs.com/revery/
MIT License
8.07k stars 196 forks source link

ScrollView does not work if children are added after initial mount #1054

Open WhoAteDaCake opened 3 years ago

WhoAteDaCake commented 3 years ago
open Revery;
open Revery.UI;
open Revery.UI.Components;

let containerStyle =
  Style.[
    position(`Absolute),
    top(0),
    bottom(0),
    left(0),
    right(0),
    alignItems(`Center),
    justifyContent(`Center),
    flexDirection(`Column),
  ];

let outerBox =
  Style.[width(200), height(200), backgroundColor(Colors.black)];

let innerBox =
  Style.[
    width(450),
    height(450),
    backgroundColor(Color.rgba(0., 1., 0., 0.5)),
  ];

let rec seq = (n, acc) => {
  if (n == 0) {
    acc
  } else {
    seq(n - 1, [n, ...acc])
  }
}

let allItems = seq(100, []);

module Sample = {
  let%component make = () => {
    let%hook (bounce, setBounce) = Hooks.state(true);
    let%hook (items, setItems) = Hooks.state([]);

    let%hook _ = Hooks.effect(OnMount,() => {
      setItems(_ => allItems)
      None
    });

    let rows = List.map(text => {
      <View style=Style.[height(30)]>
        <Text fontSize=16.0 text={Int.to_string(text)} />
      </View>
    }, items) |> React.listToElement;

    <View style=containerStyle>
      <Text text="Bounce" fontSize=20. style=Style.[marginBottom(10)] />
      <Checkbox
        onChange={() => setBounce(isBounce => !isBounce)}
        checked=bounce
        style=Style.[marginBottom(10)]
      />
      <ScrollView style=outerBox bounce>
        rows
      </ScrollView>
      <Text
        text="To scroll horizontally use Mouse Wheel while holding Shift Key"
        fontSize=20.
        style=Style.[marginTop(10)]
      />
    </View>;
  };
};

let make = () => <Sample />;

If you replace let%hook (items, setItems) = Hooks.state([]); with let%hook (items, setItems) = Hooks.state(allItems); the scrollbar will render correctly