diff --git a/js/components/react_flow_type/react_flow_type.js b/js/components/react_flow_type/react_flow_type.js new file mode 100644 index 00000000..f82c5447 --- /dev/null +++ b/js/components/react_flow_type/react_flow_type.js @@ -0,0 +1,73 @@ +'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 + }, + + // Establish default settings/variables + // ==================================== + getDefaultProps() { + return { + maximum: 9999, + minimum: 1, + maxFont: 9999, + minFont: 1, + fontRatio: 35 + }; + }, + + getInitialState() { + return { + fontSize: 1 + }; + }, + + componentDidMount() { + window.addEventListener('resize', this.handleResize); + }, + + componentWillUnmount() { + window.removeEventListener('resize', this.handleResize); + }, + + renderChildren() { + return ReactAddons.Children.map(this.props.children, (child) => { + return ReactAddons.addons.cloneWithProps(child, { + style: { + fontSize: this.state.fontSize + } + }); + }); + }, + + render() { + return ( + + {this.renderChildren()} + + ); + } +}); + +export default FlowType; \ No newline at end of file