From 370a3b43ddee9c24bcd30fdeec02edda6dbb3a1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Wed, 22 Jul 2015 16:12:52 +0200
Subject: [PATCH] add font rendering logic

---
 .../react_flow_type/react_flow_type.js        | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/js/components/react_flow_type/react_flow_type.js b/js/components/react_flow_type/react_flow_type.js
index f82c5447..caa3f6ca 100644
--- a/js/components/react_flow_type/react_flow_type.js
+++ b/js/components/react_flow_type/react_flow_type.js
@@ -25,8 +25,6 @@ let FlowType = React.createClass({
         children: React.PropTypes.element.isRequired // only supporting one child element at once right now
     },
 
-    // Establish default settings/variables
-    // ====================================
     getDefaultProps() {
         return {
             maximum: 9999,
@@ -39,18 +37,33 @@ let FlowType = React.createClass({
 
     getInitialState() {
         return {
-            fontSize: 1
+            // 32 because that's the default font display size
+            // doesn't really matter though
+            fontSize: 32
         };
     },
 
     componentDidMount() {
+        // Make changes upon resize, calculate changes and rerender
         window.addEventListener('resize', this.handleResize);
     },
 
     componentWillUnmount() {
+        // stop listening to window once the component was unmounted
         window.removeEventListener('resize', this.handleResize);
     },
 
+    handleResize() {
+        let elemWidth = this.refs.flowTypeElement.getDOMNode().offsetWidth;
+        let width = elemWidth > this.props.maximum ? this.props.maximum : elemWidth < this.props.minimum ? this.props.minimum : elemWidth;
+        let fontBase = width / this.props.fontRatio;
+        let fontSize = fontBase > this.props.maxFont ? this.props.maxFont : fontBase < this.props.minFont ? this.props.minFont : fontBase;
+
+        this.setState({ fontSize });
+    },
+
+    // The child the user passes to this component needs to have it's
+    // style.fontSize property to be updated
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child) => {
             return ReactAddons.addons.cloneWithProps(child, {
@@ -63,7 +76,7 @@ let FlowType = React.createClass({
 
     render() {
         return (
-            <span>
+            <span ref="flowTypeElement">
                 {this.renderChildren()}
             </span>
         );