mirror of
https://github.com/ascribe/onion.git
synced 2024-11-15 01:25:17 +01:00
remove react flow type
This commit is contained in:
parent
3afb036f24
commit
5cef512c0d
@ -1,92 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
/**
|
|
||||||
* This component is essentially a port of https://github.com/simplefocus/FlowType.JS
|
|
||||||
* to Reactjs in order to not being forced to use jQuery
|
|
||||||
*
|
|
||||||
* Author: Tim Daubenschütz
|
|
||||||
*
|
|
||||||
* Thanks to the guys at Simple Focus http://simplefocus.com/
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import ReactAddons from 'react/addons';
|
|
||||||
|
|
||||||
let FlowType = React.createClass({
|
|
||||||
propTypes: {
|
|
||||||
|
|
||||||
// standard FlowTypes.JS options
|
|
||||||
maximum: React.PropTypes.number,
|
|
||||||
minimum: React.PropTypes.number,
|
|
||||||
maxFont: React.PropTypes.number,
|
|
||||||
minFont: React.PropTypes.number,
|
|
||||||
fontRatio: React.PropTypes.number,
|
|
||||||
|
|
||||||
// react specific options
|
|
||||||
children: React.PropTypes.element.isRequired // only supporting one child element at once right now
|
|
||||||
},
|
|
||||||
|
|
||||||
getDefaultProps() {
|
|
||||||
return {
|
|
||||||
maximum: 9999,
|
|
||||||
minimum: 1,
|
|
||||||
maxFont: 9999,
|
|
||||||
minFont: 1,
|
|
||||||
fontRatio: 35
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
getInitialState() {
|
|
||||||
return {
|
|
||||||
// 32 because that's the default font display size
|
|
||||||
// doesn't really matter though
|
|
||||||
fontSize: 0
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
// Make changes upon resize, calculate changes and rerender
|
|
||||||
this.handleResize();
|
|
||||||
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, {
|
|
||||||
ref: 'flowTypeFontElement',
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
ref="flowTypeElement"
|
|
||||||
style={{
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
fontSize: this.state.fontSize
|
|
||||||
}}>
|
|
||||||
{this.props.children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default FlowType;
|
|
Loading…
Reference in New Issue
Block a user