From 7d01e01f63b66965e6063d17d14ae099cdca0643 Mon Sep 17 00:00:00 2001 From: Joshua Tuscan Date: Tue, 22 Sep 2020 16:10:03 -0400 Subject: [PATCH 1/2] adding name attribute and prop --- package/index.js | 189 ++++++++++++++++++++++++++--------------------- 1 file changed, 105 insertions(+), 84 deletions(-) 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 (
- {!this.state.submitted - ?
-
- {this.state.showLabel - ? - :null - } - - + {!this.state.submitted ? ( +
+ + {this.state.showLabel ? ( + + ) : null} + + - {this.state.showError - ?
- {!this.state.valid && this.state.isTyping - ?
{this.state.helpText}
- : null} + {this.state.showError ? ( +
+ {!this.state.valid && this.state.isTyping ? ( +
{this.state.helpText}
+ ) : null}
- : null} + ) : null}
- :

{this.state.completeMessage}

} + ) : ( +

{this.state.completeMessage}

+ )}
- ) + ); } } Rimp.propTypes = { - mailChimpUrl: string.isRequired -} + mailChimpUrl: string.isRequired, +}; From d0d1220fd6f43603b29f2a0314fd3e07477b4c81 Mon Sep 17 00:00:00 2001 From: Joshua Tuscan Date: Tue, 22 Sep 2020 16:18:46 -0400 Subject: [PATCH 2/2] bumping npm version --- package/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package/package.json b/package/package.json index f79739e..a2235dc 100644 --- a/package/package.json +++ b/package/package.json @@ -1,6 +1,6 @@ { "name": "rimp", - "version": "0.1.7", + "version": "0.1.8", "description": "", "main": "dist/index.js", "license": "MIT",