@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
488 lines (486 loc) • 21 kB
JavaScript
const _excluded = ["formId"];
function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/* eslint jsx-a11y/label-has-associated-control: 0 */
/**
* FeedbackForm module.
* @module @massds/mayflower-react/FeedbackForm
*/
import React from "react";
import PropTypes from "prop-types";
import CharacterCounter from "react-character-counter";
import classNames from "classnames";
import is from "is";
import Paragraph from "../Paragraph/index.mjs";
// These components exist to make it clear in FeedbackForm's render what's going on.
const RefererField = props => /*#__PURE__*/React.createElement("input", _extends({
type: "hidden"
}, props));
const NodeIdField = props => /*#__PURE__*/React.createElement("input", _extends({
type: "hidden"
}, props));
// Required for jsonp responses to work.
const JsonPField = () => /*#__PURE__*/React.createElement("input", {
type: "hidden",
name: "jsonp",
value: 1
});
// A hidden input field that prevents FormStack from looking for a required field that wasn't filled in.
const HiddenFields = props => {
const formId = props.formId,
rest = _objectWithoutPropertiesLoose(props, _excluded);
return /*#__PURE__*/React.createElement("input", _extends({
type: "hidden",
name: "hidden_fields",
id: "hidden_fields" + formId
}, rest));
};
HiddenFields.propTypes = process.env.NODE_ENV !== "production" ? {
/** The form id that the hidden input will be rendered within. */
formId: PropTypes.number
} : {};
let FeedbackForm = /*#__PURE__*/function (_React$Component) {
function FeedbackForm() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_defineProperty(_this, "state", {
yesText: '',
noText: '',
errorMessage: /*#__PURE__*/React.createElement(Paragraph, {
className: "error"
}, "Please go back and fill in any required fields (marked with an *)"),
feedbackChoice: null,
hasError: [],
success: false,
formSubmitted: false
});
_defineProperty(_this, "yesRadio", /*#__PURE__*/React.createRef());
_defineProperty(_this, "yesTextArea", /*#__PURE__*/React.createRef());
_defineProperty(_this, "noRadio", /*#__PURE__*/React.createRef());
_defineProperty(_this, "noTextArea", /*#__PURE__*/React.createRef());
_defineProperty(_this, "submitButton", /*#__PURE__*/React.createRef());
_defineProperty(_this, "defaultDisclaimer", () => /*#__PURE__*/React.createElement("div", {
id: "feedback-note",
className: "ma__disclaimer"
}, "We use your feedback to help us improve this site but we are not able to respond directly.", /*#__PURE__*/React.createElement("strong", null, "Please do not include personal or contact information."), ' ', "If you need a response, please locate the contact information elsewhere on this page or in the footer."));
_defineProperty(_this, "prefixLabel", id => "label" + id);
_defineProperty(_this, "prefixField", id => "field" + id);
_defineProperty(_this, "handleRadioChange", e => {
if (e.currentTarget === _this.yesRadio.current) {
return {
feedbackChoice: true
};
}
if (e.currentTarget === _this.noRadio.current) {
return {
feedbackChoice: false
};
}
return {};
});
// Handles the onChange event for the yes/no radio buttons as well as the yes/no textareas.
_defineProperty(_this, "handleChange", e => {
let newState = {};
e.persist();
if (e.currentTarget === _this.yesRadio.current || e.currentTarget === _this.noRadio.current) {
newState = Object.assign(newState, _this.handleRadioChange(e));
}
if (e.currentTarget === _this.yesTextArea.current) {
newState = Object.assign(newState, {
yesText: e.currentTarget.value
});
}
if (e.currentTarget === _this.noTextArea.current) {
newState = Object.assign(newState, {
noText: e.currentTarget.value
});
}
// If the form was previously submitted but the user made a new change, reset the form submitted status.
if (_this.state.formSubmitted && Object.keys(newState).length > 0) {
newState.formSubmitted = false;
newState.success = false;
newState.successMessage = '';
}
_this.setState(newState, _this.checkForErrors);
});
_defineProperty(_this, "removeError", (errors, idToRemove) => errors.filter(fieldId => !is.equal(fieldId, idToRemove)));
_defineProperty(_this, "checkForErrors", () => {
let hasError = [].concat(_this.state.hasError);
const _this$props = _this.props,
radioId = _this$props.radioId,
noFeedbackId = _this$props.noFeedbackId;
const _this$state = _this.state,
feedbackChoice = _this$state.feedbackChoice,
formSubmitted = _this$state.formSubmitted;
// The user has not selected yes or no.
if (!hasError.includes(radioId) && feedbackChoice === null) {
hasError.push(radioId);
}
if (hasError.includes(radioId) && !is.nil(feedbackChoice)) {
hasError = _this.removeError(hasError, radioId);
}
// The user has selected no but has not typed any feedback.
if (!hasError.includes(noFeedbackId) && feedbackChoice === false && formSubmitted && is.empty(_this.noTextArea.current.value)) {
hasError.push(noFeedbackId);
} else if (hasError.includes(noFeedbackId) && feedbackChoice === false && !is.empty(_this.noTextArea.current.value)) {
hasError = _this.removeError(hasError, noFeedbackId);
}
// If the user changed choices from no to yes, remove the error for no if there was one.
if (feedbackChoice === true && hasError.includes(noFeedbackId)) {
hasError = _this.removeError(hasError, noFeedbackId);
}
// Prevent calling setState too often while typing in textareas.
if (!is.equal(hasError, _this.state.hasError)) {
_this.setState({
hasError: hasError
});
}
return hasError;
});
_defineProperty(_this, "handleSubmit", e => {
e.preventDefault();
// Update the component state to know that the form was just submitted,
// then check the form for any errors based on this new state.
_this.setState({
formSubmitted: true
}, () => {
// checkForErrors doesn't immediately update state, so it returns what this.state.hasError is being set to.
const errors = _this.checkForErrors();
// If no remaining errors, submit form.
// Since we have to use jsonp and this component could be used with server side rendering, ensure that window exists.
if (window && is.array.empty(errors)) {
import("b-jsonp").then(module => {
const jsonp = module["default"];
const form = document.getElementById("fsForm" + _this.props.formId);
const data = new FormData(form);
const body = {};
new Map(data.entries()).forEach((value, key) => {
body[key] = value;
});
// This library leaves behind the script added by formstack in the head of the document.
// Any errors are handled by onSubmitError and the response is handled through onPostSubmit.
// jsonp requires you to pass a function for the last param though.
jsonp('https://www.formstack.com/forms/index.php', body, {
prefix: "form" + _this.props.formId,
name: 'onPostSubmit'
}, () => {});
});
}
});
});
return _this;
}
_inheritsLoose(FeedbackForm, _React$Component);
var _proto = FeedbackForm.prototype;
_proto.componentDidMount = function componentDidMount() {
if (window) {
// We don't have the FormStack class available, but we can fake like we do:
window["form" + this.props.formId] = {
onSubmitError: err => {
if (err) {
this.setState((state, props) => {
const hasError = [].concat(state.hasError);
hasError.push(props.radioId);
hasError.push(props.noFeedbackId);
const errorMessage = /*#__PURE__*/React.createElement(Paragraph, {
className: "error"
}, err.error);
return {
hasError: hasError,
errorMessage: errorMessage
};
});
}
},
onPostSubmit: () => {
this.setState({
success: true
});
}
};
}
};
_proto.render = function render() {
const _this$props2 = this.props,
yesFeedbackId = _this$props2.yesFeedbackId,
yesDisclaimer = _this$props2.yesDisclaimer,
noFeedbackId = _this$props2.noFeedbackId,
noDisclaimer = _this$props2.noDisclaimer,
refererId = _this$props2.refererId,
formId = _this$props2.formId,
formRef = _this$props2.formRef,
radioId = _this$props2.radioId,
nodeId = _this$props2.nodeId,
successMessage = _this$props2.successMessage;
const _this$state2 = this.state,
hasError = _this$state2.hasError,
success = _this$state2.success,
feedbackChoice = _this$state2.feedbackChoice,
formSubmitted = _this$state2.formSubmitted,
noText = _this$state2.noText,
yesText = _this$state2.yesText,
errorMessage = _this$state2.errorMessage;
const yesId = this.prefixField(yesFeedbackId);
const noId = this.prefixField(noFeedbackId);
const formProps = {
id: "fsForm" + formId,
method: 'post',
className: 'formForm',
onSubmit: this.handleSubmit,
action: 'https://www.formstack.com/forms/index.php',
encType: 'multipart/form-data'
};
// Allows other components to have direct access to the form element.
if (formRef) {
formProps.ref = formRef;
}
const refererProps = {
id: this.prefixField(refererId),
name: this.prefixField(refererId),
size: '50',
value: window.location.href,
className: 'ma__textarea fsField'
};
const yesFieldSetClassNames = classNames({
'radio-yes': true,
error: hasError.includes(yesFeedbackId)
});
const noFieldSetClassNames = classNames({
'radio-no': true,
error: hasError.includes(noFeedbackId)
});
const yesTextAreaClassNames = classNames({
'ma__textarea fsField': true
});
const noTextAreaClassNames = classNames({
'ma__textarea fsField required': true,
error: hasError.includes(noFeedbackId)
});
const radiosClassNames = hasError.includes(radioId) ? 'error' : null;
const messsageClassNames = classNames({
messages: true,
hide: success === false && is.array.empty(hasError)
});
const messageStyle = {
fontWeight: 'bold'
};
if (!is.array.empty(hasError)) {
messageStyle.color = 'red';
}
const characterCounterProps = {
maxLength: 10000,
wrapperStyle: {
display: 'block',
fontSize: '17px',
lineHeight: '1.625rem',
textAlign: 'right'
},
characterCounterStyle: {
position: 'relative',
display: 'block',
bottom: '32px',
right: '5px',
top: 'auto',
fontSize: '1rem',
fontWeight: 400,
lineHeight: '1.625rem'
},
overrideStyle: true
};
return success && formSubmitted ? /*#__PURE__*/React.createElement("div", {
className: "ma__feedback-form",
"data-mass-feedback-form": true
}, /*#__PURE__*/React.createElement("h2", {
className: "visually-hidden"
}, "Feedback"), /*#__PURE__*/React.createElement("form", _extends({
noValidate: true
}, formProps), /*#__PURE__*/React.createElement("fieldset", null, /*#__PURE__*/React.createElement("div", {
className: messsageClassNames,
style: messageStyle
}, is.fn(successMessage) && successMessage())))) : /*#__PURE__*/React.createElement("div", {
className: "ma__feedback-form",
"data-mass-feedback-form": true
}, /*#__PURE__*/React.createElement("h2", {
className: "visually-hidden"
}, "Feedback"), /*#__PURE__*/React.createElement("form", _extends({
noValidate: true
}, formProps), /*#__PURE__*/React.createElement("input", {
type: "hidden",
name: "form",
value: formId
}), /*#__PURE__*/React.createElement(JsonPField, null), /*#__PURE__*/React.createElement("input", {
type: "hidden",
name: "viewkey",
value: "vx39GBYJhi"
}), feedbackChoice === true && /*#__PURE__*/React.createElement(HiddenFields, {
formId: formId,
value: noId
}), feedbackChoice === false && /*#__PURE__*/React.createElement(HiddenFields, {
formId: formId,
value: yesId
}), /*#__PURE__*/React.createElement("input", {
type: "hidden",
name: "_submit",
value: "1"
}), /*#__PURE__*/React.createElement("input", {
type: "hidden",
name: "style_version",
value: "3"
}), /*#__PURE__*/React.createElement("input", {
type: "hidden",
id: "viewparam",
name: "viewparam",
value: "524744"
}), /*#__PURE__*/React.createElement(RefererField, refererProps), /*#__PURE__*/React.createElement(NodeIdField, {
id: "field58154059",
name: "field58154059",
value: nodeId
}), /*#__PURE__*/React.createElement(NodeIdField, {
id: "field57432673",
name: "field57432673",
value: nodeId
}), /*#__PURE__*/React.createElement("fieldset", {
className: radiosClassNames
}, /*#__PURE__*/React.createElement("legend", {
className: "fsLabel requiredLabel fsLabelVertical"
}, "Did you find what you were looking for on this webpage?", /*#__PURE__*/React.createElement("span", null, ' ', "*", /*#__PURE__*/React.createElement("span", {
className: "visually-hidden"
}, "required"))), /*#__PURE__*/React.createElement("div", {
className: "ma__input-group__items ma__input-group__items--inline"
}, /*#__PURE__*/React.createElement("div", {
className: "ma__input-group__item"
}, /*#__PURE__*/React.createElement("span", {
className: "ma__input-radio"
}, /*#__PURE__*/React.createElement("input", {
className: "fsField required",
id: this.prefixField(radioId) + "_1",
onChange: this.handleChange,
ref: this.yesRadio,
name: this.prefixField(radioId),
type: "radio",
value: "Yes"
}), /*#__PURE__*/React.createElement("label", {
className: "fsOptionLabel ma__input-radio__label",
htmlFor: this.prefixField(radioId) + "_1"
}, "Yes"))), /*#__PURE__*/React.createElement("div", {
className: "ma__input-group__item"
}, /*#__PURE__*/React.createElement("span", {
className: "ma__input-radio"
}, /*#__PURE__*/React.createElement("input", {
className: "fsField required",
id: this.prefixField(radioId) + "_2",
onChange: this.handleChange,
ref: this.noRadio,
name: this.prefixField(radioId),
type: "radio",
value: "No"
}), /*#__PURE__*/React.createElement("label", {
className: "fsOptionLabel ma__input-radio__label",
htmlFor: this.prefixField(radioId) + "_2"
}, "No"))))), feedbackChoice === false && /*#__PURE__*/React.createElement("fieldset", {
className: noFieldSetClassNames
}, /*#__PURE__*/React.createElement("label", {
htmlFor: noId
}, "If \"No,\" please tell us what you were looking for:", /*#__PURE__*/React.createElement("span", null, ' ', "*", /*#__PURE__*/React.createElement("span", {
className: "visually-hidden"
}, "required"))), /*#__PURE__*/React.createElement("div", {
className: "ma__textarea__wrapper"
}, /*#__PURE__*/React.createElement(CharacterCounter, _extends({
value: noText
}, characterCounterProps), /*#__PURE__*/React.createElement("textarea", {
id: noId,
ref: this.noTextArea,
onChange: this.handleChange,
className: noTextAreaClassNames,
name: noId,
"aria-required": "true",
maxLength: "10000",
disabled: feedbackChoice === false ? null : 'disabled',
"aria-describedby": "feedback-note"
}))), /*#__PURE__*/React.createElement("input", {
type: "hidden",
id: yesId,
name: yesId,
value: ""
}), /*#__PURE__*/React.createElement("span", null, is.fn(noDisclaimer) ? noDisclaimer() : this.defaultDisclaimer())), feedbackChoice === true && /*#__PURE__*/React.createElement("fieldset", {
className: yesFieldSetClassNames
}, /*#__PURE__*/React.createElement("label", {
htmlFor: yesId
}, "Is there anything else you would like to tell us?"), /*#__PURE__*/React.createElement("div", {
className: "ma__textarea__wrapper"
}, /*#__PURE__*/React.createElement(CharacterCounter, _extends({
value: yesText
}, characterCounterProps), /*#__PURE__*/React.createElement("textarea", {
ref: this.yesTextArea,
onChange: this.handleChange,
className: yesTextAreaClassNames,
id: yesId,
name: yesId,
maxLength: "10000",
disabled: feedbackChoice === true ? null : 'disabled',
"aria-describedby": "feedback-note2"
}))), /*#__PURE__*/React.createElement("input", {
type: "hidden",
id: noId,
name: noId,
value: ""
}), /*#__PURE__*/React.createElement("span", null, is.fn(yesDisclaimer) ? yesDisclaimer() : this.defaultDisclaimer())), /*#__PURE__*/React.createElement("fieldset", {
className: "ma_feedback-fieldset ma__mass-feedback-form__form--submit-wrapper"
}, /*#__PURE__*/React.createElement("div", {
className: messsageClassNames,
style: messageStyle
}, success === false && errorMessage), /*#__PURE__*/React.createElement("input", {
id: "submitButton2521317",
ref: this.submitButton,
className: "submitButton ma__button ma__button--uppercase",
style: {
display: 'block'
},
type: "submit",
value: "Send Feedback"
}))));
};
return FeedbackForm;
}(React.Component);
_defineProperty(FeedbackForm, "defaultProps", {
formId: 2521317,
radioId: 47054416,
yesFeedbackId: 52940022,
noFeedbackId: 47054414,
refererId: 47056299
});
export { FeedbackForm as default };
FeedbackForm.propTypes = process.env.NODE_ENV !== "production" ? {
/** A ref object as created by React.createRef(). Will be applied to the form element. */
formRef: PropTypes.oneOfType([PropTypes.func,
// eslint-disable-next-line react/forbid-prop-types
PropTypes.shape({
current: PropTypes.any
})]),
/** A function whose return value is displayed after a successful form submission. */
successMessage: PropTypes.func.isRequired,
/** The field id number for the yes textarea. */
yesFeedbackId: PropTypes.number,
/** The field id number for the no textarea. */
noFeedbackId: PropTypes.number,
/** The field id number for the referer. */
refererId: PropTypes.number,
/** The id number for the form from FormStack. */
formId: PropTypes.number,
/** The field id number for the yes/no radio buttons. */
radioId: PropTypes.number,
/** A drupal node id number for the referer. */
nodeId: PropTypes.number,
/** A function whose return value is rendered under the yes textarea. */
yesDisclaimer: PropTypes.func,
/** A function whose return value is rendered under the no textarea. */
noDisclaimer: PropTypes.func
} : {};