OLD | NEW |
1 part of widgets; | 1 part of widgets; |
2 | 2 |
3 abstract class FixedHeightScrollable extends Component { | 3 abstract class FixedHeightScrollable extends Component { |
4 | 4 |
| 5 // TODO(rafaelw): This component really shouldn't have an opinion |
| 6 // about how it is sized. The owning component should decide whether |
| 7 // it's explicitly sized or flexible or whatever... |
5 static Style _style = new Style(''' | 8 static Style _style = new Style(''' |
6 overflow: hidden; | 9 overflow: hidden; |
7 position: relative; | 10 position: relative; |
| 11 flex: 1; |
8 will-change: transform;''' | 12 will-change: transform;''' |
9 ); | 13 ); |
10 | 14 |
11 static Style _scrollAreaStyle = new Style(''' | 15 static Style _scrollAreaStyle = new Style(''' |
12 position:relative; | 16 position:relative; |
13 will-change: transform;''' | 17 will-change: transform;''' |
14 ); | 18 ); |
15 | 19 |
16 double itemHeight; | |
17 double height; | |
18 double minOffset; | 20 double minOffset; |
19 double maxOffset; | 21 double maxOffset; |
20 | 22 |
21 double _scrollOffset = 0.0; | 23 double _scrollOffset = 0.0; |
22 FlingCurve _flingCurve; | 24 FlingCurve _flingCurve; |
23 int _flingAnimationId; | 25 int _flingAnimationId; |
| 26 double _height = 0.0; |
| 27 double _itemHeight; |
24 | 28 |
25 FixedHeightScrollable({ | 29 FixedHeightScrollable({ |
26 Object key, | 30 Object key, |
27 this.itemHeight, | |
28 this.height, | |
29 this.minOffset, | 31 this.minOffset, |
30 this.maxOffset | 32 this.maxOffset |
31 }) : super(key: key) {} | 33 }) : super(key: key) {} |
32 | 34 |
33 | |
34 List<Node> renderItems(int start, int count); | 35 List<Node> renderItems(int start, int count); |
35 | 36 |
| 37 void didMount() { |
| 38 var root = getRoot(); |
| 39 var item = root.firstChild.firstChild; |
| 40 sky.ClientRect scrollRect = root.getBoundingClientRect(); |
| 41 sky.ClientRect itemRect = item.getBoundingClientRect(); |
| 42 assert(scrollRect.height > 0); |
| 43 assert(itemRect.height > 0); |
| 44 |
| 45 setState(() { |
| 46 _height = scrollRect.height; |
| 47 _itemHeight = itemRect.height; |
| 48 }); |
| 49 } |
| 50 |
36 Node render() { | 51 Node render() { |
37 int drawCount = (height / itemHeight).round() + 1; | 52 var itemNumber = 0; |
38 double alignmentDelta = -_scrollOffset % itemHeight; | 53 var drawCount = 1; |
39 if (alignmentDelta != 0.0) { | 54 var transformStyle = ''; |
40 alignmentDelta -= itemHeight; | 55 |
| 56 if (_height > 0.0) { |
| 57 drawCount = (_height / _itemHeight).round() + 1; |
| 58 double alignmentDelta = -_scrollOffset % _itemHeight; |
| 59 if (alignmentDelta != 0.0) { |
| 60 alignmentDelta -= _itemHeight; |
| 61 } |
| 62 |
| 63 double drawStart = _scrollOffset + alignmentDelta; |
| 64 itemNumber = (drawStart / _itemHeight).floor(); |
| 65 |
| 66 transformStyle = |
| 67 'transform: translateY(${(alignmentDelta).toStringAsFixed(2)}px)'; |
41 } | 68 } |
42 | 69 |
43 double drawStart = _scrollOffset + alignmentDelta; | |
44 int itemNumber = (drawStart / itemHeight).floor(); | |
45 | |
46 var transformStyle = | |
47 'transform: translateY(${(alignmentDelta).toStringAsFixed(2)}px)'; | |
48 | |
49 var items = renderItems(itemNumber, drawCount); | |
50 | |
51 return new Container( | 70 return new Container( |
52 style: _style, | 71 style: _style, |
53 children: [ | 72 children: [ |
54 new Container( | 73 new Container( |
55 style: _scrollAreaStyle, | 74 style: _scrollAreaStyle, |
56 inlineStyle: transformStyle, | 75 inlineStyle: transformStyle, |
57 children: items | 76 children: renderItems(itemNumber, drawCount) |
58 ) | 77 ) |
59 ] | 78 ] |
60 ) | 79 ) |
61 ..events.listen('gestureflingstart', _handleFlingStart) | 80 ..events.listen('gestureflingstart', _handleFlingStart) |
62 ..events.listen('gestureflingcancel', _handleFlingCancel) | 81 ..events.listen('gestureflingcancel', _handleFlingCancel) |
63 ..events.listen('gesturescrollupdate', _handleScrollUpdate) | 82 ..events.listen('gesturescrollupdate', _handleScrollUpdate) |
64 ..events.listen('wheel', _handleWheel); | 83 ..events.listen('wheel', _handleWheel); |
65 } | 84 } |
66 | 85 |
67 void didUnmount() { | 86 void didUnmount() { |
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
118 } | 137 } |
119 | 138 |
120 void _handleFlingCancel(sky.GestureEvent event) { | 139 void _handleFlingCancel(sky.GestureEvent event) { |
121 _stopFling(); | 140 _stopFling(); |
122 } | 141 } |
123 | 142 |
124 void _handleWheel(sky.WheelEvent event) { | 143 void _handleWheel(sky.WheelEvent event) { |
125 _scrollBy(-event.offsetY); | 144 _scrollBy(-event.offsetY); |
126 } | 145 } |
127 } | 146 } |
OLD | NEW |