feat: add size getters to the Area component (#174)

* feat: add `onSizeChanged` event to the Area component

* Remove area exposure and fix area example

* Update documentation

docs/component_APIs/area.md

@@ -42,6 +42,7 @@ render(<Example />);
 * [onMouseLeave](#onMouseLeave)
 * [onKeyUp](#onKeyUp)
 * [onKeyDown](#onKeyDown)
+* [onSizeChanged](#onSizeChanged)
 
 ## Reference
 
@@ -112,3 +113,11 @@ Return `true` to signal that this event got handled (always returning true will
 | **Type**                                                                                 | **Required** |
 | ---------------------------------------------------------------------------------------- | ------------ |
 | function({key: string, extKey: string, modifierKey: string, modifiers: Array\<string\>}) | No           |
+
+### onSizeChange
+
+Called when the area's size has changed.
+
+| **Type**                                    | **Required** |
+| ------------------------------------------- | ------------ |
+| function({ width: number, height: number }) | No           |

examples/area.js

@@ -12,7 +12,24 @@ import {
 } from '../src/';
 
 class Example extends Component {
-  state = { bool: false, val: 40, dragging: false, pos: { x: 50, y: 220 } };
+  state = {
+    bool: false,
+    val: 40,
+    dragging: false,
+    pos: { x: 50, y: 220 },
+    areaHeight: '',
+  };
+
+  constructor(props) {
+    super(props);
+    this.onAreaSizeChange = this.onAreaSizeChange.bind(this);
+  }
+
+  onAreaSizeChange({ height: areaHeight }) {
+    this.setState({
+      areaHeight,
+    });
+  }
 
   render() {
     return (
@@ -20,7 +37,11 @@ class Example extends Component {
         <Window title="Test" size={{ w: 600, h: 650 }} margined={true}>
           <Box padded>
             <Text stretchy={false}>Try dragging the circle!</Text>
+            <Text stretchy={false}>{`Area height: ${
+              this.state.areaHeight
+            } px`}</Text>
             <Area
+              onSizeChange={this.onAreaSizeChange}
               // onKeyUp={e => {
               //   console.log('up', e.key);
               //   return true;

src/components/Area.js

@@ -103,9 +103,19 @@ class Area extends DesktopComponent {
     this.root = root;
     this.props = { ...props };
     this.setDefaults(props);
+    this.width = null;
+    this.height = null;
 
     this.element = new libui.UiArea(
       (area, p) => {
+        const width = p.getAreaWidth();
+        const height = p.getAreaHeight();
+        if (width !== this.width || height !== this.height) {
+          this.width = width;
+          this.height = height;
+          this.props.onSizeChange({ width, height });
+        }
+
         for (let i = 0; i < this.children.length; i += 1) {
           if (typeof this.children[i] === 'object') {
             this.children[i].draw(this, area, p);
@@ -147,6 +157,7 @@ Area.propTypes = {
   onMouseLeave: PropTypes.func,
   onKeyUp: PropTypes.func,
   onKeyDown: PropTypes.func,
+  onSizeChange: PropTypes.func,
   children: PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.arrayOf(PropTypes.element),
@@ -158,10 +169,11 @@ Area.defaultProps = {
   onMouseMove: e => {},
   onMouseUp: e => {},
   onMouseDown: e => {},
-  onMouseEnter: area => {},
-  onMouseLeave: area => {},
-  onKeyUp: (area, event) => {},
-  onKeyDown: (area, event) => {},
+  onMouseEnter: () => {},
+  onMouseLeave: () => {},
+  onKeyUp: event => {},
+  onKeyDown: event => {},
+  onSizeChange: event => {},
 };
 
 function fallback(...vals) {

src/react-components/Area.js

@@ -43,6 +43,7 @@ class Area extends Component {
       onMouseLeave,
       onKeyUp,
       onKeyDown,
+      onSizeChange,
       ...groupProps
     } = this.props;
     const areaProps = {
@@ -61,6 +62,7 @@ class Area extends Component {
       onMouseLeave,
       onKeyUp,
       onKeyDown,
+      onSizeChange,
     };
     return React.createElement(
       HasAreaParentContext.Provider,