Form wrapper

dev/dev.js

@@ -1,15 +1,20 @@
 import React from 'react'
 import { render } from 'react-dom'
-import Img from '../src/index'
+import HubspotForm from '../src/index'
 
 const containerEl = document.createElement('div')
 document.body.appendChild(containerEl)
 
 render(
- <Img
- src='http:https://via.placeholder.com/500x1000'
- width={500}
- height={1000}
- />,
+ <HubspotForm onSubmit={e => console.log('Success!')}>
+ <form>
+ <div>
+ <input type='text' />
+ </div>
+ <div>
+ <button>Submit</button>
+ </div>
+ </form>
+ </HubspotForm>,
  containerEl
 )

src/index.js

@@ -1,78 +1,32 @@
 import React from 'react'
+import fetch from 'isomorphic-fetch'
 
 export default class extends React.Component {
  constructor(props){
  super(props)
- this.state = { loading: false }
- this.hideLoader = this.hideLoader.bind(this)
- this.showLoader = this.showLoader.bind(this)
- this.startTimeout = this.startTimeout.bind(this)
+ this.formSubmit = this.formSubmit.bind(this)
  }
- componentWillReceiveProps() {
- this.startTimeout()
- }
- componentDidMount() {
- if (this.img.complete) {
- this.hideLoader()
- }
- else {
- this.startTimeout()
+ componentDidMount(){
+ const form = this.parent.querySelector('form')
+ if(form){
+ form.addEventListener('submit', this.formSubmit)
  }
  }
- startTimeout() {
- clearTimeout(this.timeout)
- this.timeout = setTimeout(this.showLoader, 100)
- }
- showLoader() {
- if (!this.img.complete) {
- this.setState({ loading: true })
+ formSubmit(e){
+ e.preventDefault()
+ if(this.props.onSubmit){
+ this.props.onSubmit()
+ }
+ // Hubspot stuff here
+
+ if(this.props.onSuccess){
+ this.props.onSuccess()
  }
- }
- hideLoader() {
- clearTimeout(this.timeout)
- this.setState({ loading: false })
  }
  render(){
- const TagName = this.props.tagName || 'img'
  return (
- <div style={{
- maxWidth: this.props.width,
- maxHeight: this.props.height,
- margin: this.props.center ? 'auto' : ''
- }}>
- <div style={{
- position: 'relative',
- paddingBottom: `${(this.props.height / this.props.width) * 100}%`
- }}>
- <TagName
- type={this.props.type}
- srcSet={this.props.srcSet}
- sizes={this.props.sizes}
- src={this.props.src}
- ref={img => this.img = img}
- onLoad={this.hideLoader}
- onError={this.hideLoader}
- alt={this.props.alt}
- style={{
- position: 'absolute',
- width: '100%',
- maxWidth: '100%',
- top: 0,
- left: 0,
- display: this.state.loading ? 'none' : 'block'
- }}
- />
- {this.state.loading && this.props.loading &&
- <div style={{
- position: 'absolute',
- top: '50%',
- left: '50%',
- transform: 'translate(-50%, -50%)'
- }}>
- {this.props.loading}
- </div>
- }
- </div>
+ <div ref={el => this.parent = el}>
+ { this.props.children }
  </div>
  )
  }