From 66fd0f707fc290db64ba3a729c96ceedd402258d Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Thu, 16 Apr 2020 10:53:23 +0100
Subject: [PATCH] Type enforcement and comments

---
 src/components/structures/FontSlider.js | 35 ++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/FontSlider.js b/src/components/structures/FontSlider.js
index e2e36c2c9f..0ae0092443 100644
--- a/src/components/structures/FontSlider.js
+++ b/src/components/structures/FontSlider.js
@@ -15,12 +15,29 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default class Slider extends React.Component {
+
+    static propTypes = {
+        // A callback for the new value onclick
+        updateFontSize: PropTypes.func,
+
+        // The current value of the slider
+        value: PropTypes.number,
+
+        // The range and values of the slider
+        // Currently only supports an ascending, constant interval range
+        values: PropTypes.arrayOf(PropTypes.number),
+
+        // A function for formatting the the values
+        displayFunc: PropTypes.func,
+    };
+
     render() {
         let dots = this.props.values.map(v => 
             <Dot active={v<=this.props.value} 
-                 value={this.props.displayFunc(v)} 
+                 label={this.props.displayFunc(v)} 
                  onClick={() => this.props.updateFontSize(v)}
                  key={v}
             />);
@@ -42,20 +59,32 @@ export default class Slider extends React.Component {
             </div>
         </div>
     }
-        
+
     offset(values, value) {
         return  (value - values[0]) / (values[values.length - 1] - values[0]) * 100;
     }
 }
 
 class Dot extends React.Component {
+
+    static propTypes = {
+        // Callback for behaviour onclick
+        onClick: PropTypes.func,
+
+        // Whether the dot should appear active
+        active: PropTypes.bool,
+
+        // The label on the dot
+        label: PropTypes.string,
+    }
+
     render () {
         let className = "mx_fontSlider_dot" + (this.props.active? " mx_fontSlider_dotActive": "");
 
         return <span onClick={this.props.onClick} className="mx_fontSlider_dotValue">
             <div className={className} />
             <div>
-                {this.props.value}
+                {this.props.label}
             </div>
         </span>
     }