Skip to content

Commit db21b81

Browse files
matystlmatystl
committed
implemented getDOMNode
1 parent ee2753c commit db21b81

File tree

7 files changed

+63
-6
lines changed

7 files changed

+63
-6
lines changed

‎README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,12 @@ main() {
3636
}
3737
```
3838

39+
Inverse method to rendering component is unmountComponentAtNode
40+
41+
```dart
42+
unmountComponentAtNode(querySelector('#content'));
43+
```
44+
3945
##Using browser native elements
4046

4147
If you are familiar with React (without JSX extension) React-dart shouldn't surprise you much. All elements are defined as

‎example/test/get_dom_node_test.dart

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import "package:react/react.dart" as react;
2+
import "package:react/react_client.dart";
3+
import "dart:html";
4+
5+
var simpleComponent = react.registerComponent(() => new SimpleComponent());
6+
class SimpleComponent extends react.Component {
7+
componentWillMount() => print("mount");
8+
9+
componentWillUnmount() => print("unmount");
10+
11+
componentDidMount(root) {
12+
print("getDomNode is same as mounted element ${root == getDOMNode()}");
13+
}
14+
15+
var counter = 0;
16+
17+
render() =>
18+
react.div({}, [
19+
react.span({}, counter),
20+
react.button({"onClick": (_) => (getDOMNode() as HtmlElement).children.first.text = (++counter).toString()},"Increase counter"),
21+
]);
22+
}
23+
24+
var mountedNode = querySelector('#content');
25+
26+
void main() {
27+
setClientConfiguration();
28+
react.render(simpleComponent({}), mountedNode);
29+
}

‎example/test/get_dom_node_test.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<title>order_test</title>
6+
</head>
7+
8+
<body>
9+
<div id="content"></div>
10+
11+
<script src="packages/react/react.js"></script>
12+
<script type="application/dart" src="get_dom_node_test.dart"></script>
13+
<!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
14+
<script src="packages/browser/dart.js"></script>
15+
</body>
16+
</html>

‎lib/react.dart

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,18 @@ abstract class Component {
1111
Map props;
1212

1313
dynamic ref;
14+
dynamic getDOMNode;
1415
dynamic _jsRedraw;
1516

1617
/**
1718
* Bind the value of input to [state[key]].
1819
*/
1920
bind(key) => [state[key], (value) => setState({key: value})];
2021

21-
initComponentInternal(props, _jsRedraw, [ref = null]) {
22+
initComponentInternal(props, _jsRedraw, [ref = null, getDOMNode = null]) {
2223
this._jsRedraw = _jsRedraw;
2324
this.ref = ref;
25+
this.getDOMNode = getDOMNode;
2426
_initProps(props);
2527
}
2628

@@ -105,7 +107,7 @@ abstract class Component {
105107
void componentWillUpdate(nextProps, nextState) {}
106108

107109
void componentDidUpdate(prevProps, prevState, /*DOMElement */ rootNode) {}
108-
110+
109111
void componentWillUnmount() {}
110112

111113
Map getInitialState() => {};

‎lib/react_client.dart

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,13 @@ ReactComponentFactory _registerComponent(ComponentFactory componentFactory, [Ite
8080
if (ref[PROPS][INTERNAL] != null) return ref[PROPS][INTERNAL][COMPONENT];
8181
else return ref.callMethod('getDOMNode', []);
8282
};
83+
84+
var getDOMNode = () {
85+
return jsThis.callMethod("getDOMNode");
86+
};
8387

8488
Component component = componentFactory()
85-
..initComponentInternal(internal[PROPS], redraw, getRef);
89+
..initComponentInternal(internal[PROPS], redraw, getRef, getDOMNode);
8690

8791
internal[COMPONENT] = component;
8892
internal[IS_MOUNTED] = false;

‎lib/react_test.dart

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ _reactDom(String name) {
2929
};
3030
}
3131

32-
initializeComponent(Component component, [Map props = const {}, List children, redraw, ref]) {
32+
initializeComponent(Component component, [Map props = const {}, List children, redraw, ref, getDOMNode]) {
3333
if (redraw == null) redraw = () {};
34-
component.initComponentInternal(props, redraw, ref);
34+
component.initComponentInternal(props, redraw, ref, getDOMNode);
3535
component.initStateInternal();
3636
component.componentWillMount();
3737
}

‎pubspec.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
name: react
2-
version: 0.5.1
2+
version: 0.5.2
33
author: Clean Team <clean@vacuumlabs.com>
44
description: Bindings of the ReactJS library for building interactive interfaces.
55
homepage: http://cleandart.github.io/react-dart/

0 commit comments

Comments
 (0)