Type enforcement and comments

This commit is contained in:
Jorik Schellekens 2020-04-16 10:53:23 +01:00
parent 647d99a17a
commit 66fd0f707f

View file

@ -15,12 +15,29 @@ limitations under the License.
*/ */
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
export default class Slider extends React.Component { 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() { render() {
let dots = this.props.values.map(v => let dots = this.props.values.map(v =>
<Dot active={v<=this.props.value} <Dot active={v<=this.props.value}
value={this.props.displayFunc(v)} label={this.props.displayFunc(v)}
onClick={() => this.props.updateFontSize(v)} onClick={() => this.props.updateFontSize(v)}
key={v} key={v}
/>); />);
@ -42,20 +59,32 @@ export default class Slider extends React.Component {
</div> </div>
</div> </div>
} }
offset(values, value) { offset(values, value) {
return (value - values[0]) / (values[values.length - 1] - values[0]) * 100; return (value - values[0]) / (values[values.length - 1] - values[0]) * 100;
} }
} }
class Dot extends React.Component { 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 () { render () {
let className = "mx_fontSlider_dot" + (this.props.active? " mx_fontSlider_dotActive": ""); let className = "mx_fontSlider_dot" + (this.props.active? " mx_fontSlider_dotActive": "");
return <span onClick={this.props.onClick} className="mx_fontSlider_dotValue"> return <span onClick={this.props.onClick} className="mx_fontSlider_dotValue">
<div className={className} /> <div className={className} />
<div> <div>
{this.props.value} {this.props.label}
</div> </div>
</span> </span>
} }