diff --git a/package/index.js b/package/index.js index 2db42a0..daf60db 100644 --- a/package/index.js +++ b/package/index.js @@ -1,12 +1,12 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import reqwest from 'reqwest' +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import reqwest from "reqwest"; -const { string } = PropTypes +const { string } = PropTypes; export default class Rimp extends Component { - constructor (props) { - super(props) + constructor(props) { + super(props); this.state = { buttonValue: props.buttonValue, buttonStyles: props.buttonStyles, @@ -24,123 +24,144 @@ export default class Rimp extends Component { showError: props.showError, helpText: props.helpText, mailChimpUrl: props.mailChimpUrl, - submitted: false - } + submitted: false, + name: props.name, + }; - this.handleSubmit = this.handleSubmit.bind(this) - this.validateEmail = this.validateEmail.bind(this) - this.returnStyles = this.returnStyles.bind(this) + this.handleSubmit = this.handleSubmit.bind(this); + this.validateEmail = this.validateEmail.bind(this); + this.returnStyles = this.returnStyles.bind(this); } - static get defaultProps () { + static get defaultProps() { return { - buttonValue: 'submit', - buttonStyles: 'button', - placeholder: 'enter your email address', - formWrapper: 'flex flex-justify-between flex-align-center', - containerStyles: 'newsletter__form', - completeMessage: 'Thanks for subscribing', - helpText: 'Please provide a valid email address', - labelText: 'Email address:', - labelStyles: 'newsletter__form--label', - formID: 'newsletter_email__input', + buttonValue: "submit", + buttonStyles: "button", + placeholder: "enter your email address", + formWrapper: "flex flex-justify-between flex-align-center", + containerStyles: "newsletter__form", + completeMessage: "Thanks for subscribing", + helpText: "Please provide a valid email address", + labelText: "Email address:", + labelStyles: "newsletter__form--label", + formID: "newsletter_email__input", showLabel: false, showError: true, - emailAddress: '', - mailChimpUrl: null - } + emailAddress: "", + mailChimpUrl: null, + name: "Email", + }; } - handleSubmit (e) { - e.preventDefault() - let self = this - let isValid = this.state.valid + handleSubmit(e) { + e.preventDefault(); + let self = this; + let isValid = this.state.valid; if (isValid) { reqwest({ - method: 'get', - type: 'jsonp', - contentType: 'application/json', + method: "get", + type: "jsonp", + contentType: "application/json", url: this.state.mailChimpUrl, - data: {EMAIL: this.state.emailAddress, STATUS: 'subscribed'}, - jsonpCallback: 'c' + data: { EMAIL: this.state.emailAddress, STATUS: "subscribed" }, + jsonpCallback: "c", }) - .then(function (resp) { - self.setState({ - submitted: true + .then(function (resp) { + self.setState({ + submitted: true, + }); }) - }) - .fail(function (err, msg) { - console.log(err) - self.setState({ - submitted: true - }) - }) - .always(function (resp) { - self.setState({ - submitted: true + .fail(function (err, msg) { + console.log(err); + self.setState({ + submitted: true, + }); }) - }) + .always(function (resp) { + self.setState({ + submitted: true, + }); + }); self.setState({ - submitted: true - }) + submitted: true, + }); } } - validateEmail (e) { + validateEmail(e) { this.setState({ - isTyping: true - }) - function validateEmail (email) { - var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ - return re.test(email) + isTyping: true, + }); + function validateEmail(email) { + var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + return re.test(email); } if (validateEmail(e.currentTarget.value)) { this.setState({ valid: true, - emailAddress: e.currentTarget.value - }) + emailAddress: e.currentTarget.value, + }); } else { this.setState({ - valid: false - }) + valid: false, + }); } } - returnStyles () { - let styles = `${this.state.containerStyles}` + returnStyles() { + let styles = `${this.state.containerStyles}`; if (this.state.isTyping) { - styles += ` ${this.state.valid ? 'valid' : 'not-valid'}` + styles += ` ${this.state.valid ? "valid" : "not-valid"}`; } - return styles + return styles; } - render () { + render() { return (