Ensure that sky Nodes are in the document when didMount() is fired. Refactor FixedHeightScrollable to inspect heights rather than having the passed in
BUG=
R=abarth@chromium.org
Review URL: https://codereview.chromium.org/994553003
diff --git a/sky/examples/fn/widgets/fixedheightscrollable.dart b/sky/examples/fn/widgets/fixedheightscrollable.dart
index 83733ea..ea08322 100644
--- a/sky/examples/fn/widgets/fixedheightscrollable.dart
+++ b/sky/examples/fn/widgets/fixedheightscrollable.dart
@@ -2,9 +2,13 @@
abstract class FixedHeightScrollable extends Component {
+ // TODO(rafaelw): This component really shouldn't have an opinion
+ // about how it is sized. The owning component should decide whether
+ // it's explicitly sized or flexible or whatever...
static Style _style = new Style('''
overflow: hidden;
position: relative;
+ flex: 1;
will-change: transform;'''
);
@@ -13,48 +17,63 @@
will-change: transform;'''
);
- double itemHeight;
- double height;
double minOffset;
double maxOffset;
double _scrollOffset = 0.0;
FlingCurve _flingCurve;
int _flingAnimationId;
+ double _height = 0.0;
+ double _itemHeight;
FixedHeightScrollable({
Object key,
- this.itemHeight,
- this.height,
this.minOffset,
this.maxOffset
}) : super(key: key) {}
-
List<Node> renderItems(int start, int count);
+ void didMount() {
+ var root = getRoot();
+ var item = root.firstChild.firstChild;
+ sky.ClientRect scrollRect = root.getBoundingClientRect();
+ sky.ClientRect itemRect = item.getBoundingClientRect();
+ assert(scrollRect.height > 0);
+ assert(itemRect.height > 0);
+
+ setState(() {
+ _height = scrollRect.height;
+ _itemHeight = itemRect.height;
+ });
+ }
+
Node render() {
- int drawCount = (height / itemHeight).round() + 1;
- double alignmentDelta = -_scrollOffset % itemHeight;
- if (alignmentDelta != 0.0) {
- alignmentDelta -= itemHeight;
+ var itemNumber = 0;
+ var drawCount = 1;
+ var transformStyle = '';
+
+ if (_height > 0.0) {
+ drawCount = (_height / _itemHeight).round() + 1;
+ double alignmentDelta = -_scrollOffset % _itemHeight;
+ if (alignmentDelta != 0.0) {
+ alignmentDelta -= _itemHeight;
+ }
+
+ double drawStart = _scrollOffset + alignmentDelta;
+ itemNumber = (drawStart / _itemHeight).floor();
+
+ transformStyle =
+ 'transform: translateY(${(alignmentDelta).toStringAsFixed(2)}px)';
}
- double drawStart = _scrollOffset + alignmentDelta;
- int itemNumber = (drawStart / itemHeight).floor();
-
- var transformStyle =
- 'transform: translateY(${(alignmentDelta).toStringAsFixed(2)}px)';
-
- var items = renderItems(itemNumber, drawCount);
-
return new Container(
style: _style,
children: [
new Container(
style: _scrollAreaStyle,
inlineStyle: transformStyle,
- children: items
+ children: renderItems(itemNumber, drawCount)
)
]
)
diff --git a/sky/examples/stocks-fn/stocklist.dart b/sky/examples/stocks-fn/stocklist.dart
index 187eb68..c4ac95f 100644
--- a/sky/examples/stocks-fn/stocklist.dart
+++ b/sky/examples/stocks-fn/stocklist.dart
@@ -7,7 +7,7 @@
Stocklist({
Object key,
this.stocks
- }) : super(key: key, itemHeight: 80.0, height: 800.0, minOffset: 0.0);
+ }) : super(key: key, minOffset: 0.0);
List<Node> renderItems(int start, int count) {
var items = [];
diff --git a/sky/examples/stocks-fn/stockrow.dart b/sky/examples/stocks-fn/stockrow.dart
index 647571f..89354cb 100644
--- a/sky/examples/stocks-fn/stockrow.dart
+++ b/sky/examples/stocks-fn/stockrow.dart
@@ -6,7 +6,6 @@
static Style _style = new Style('''
transform: translateX(0);
- max-height: 48px;
display: flex;
align-items: center;
border-bottom: 1px solid #F4F4F4;
diff --git a/sky/framework/fn.dart b/sky/framework/fn.dart
index c921a4c..380dc52 100644
--- a/sky/framework/fn.dart
+++ b/sky/framework/fn.dart
@@ -247,6 +247,7 @@
// print("...no oldElement, initial render");
_root = sky.document.createElement(_tagName);
+ _parentInsertBefore(host, _root, insertBefore);
_syncNode();
for (var child in _children) {
@@ -254,7 +255,6 @@
assert(child._root is sky.Node);
}
- _parentInsertBefore(host, _root, insertBefore);
return false;
}
