@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
510 lines (509 loc) • 23.8 kB
JavaScript
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactCharacterCounter = _interopRequireDefault(require("react-character-counter"));
var _classnames = _interopRequireDefault(require("classnames"));
var _is = _interopRequireDefault(require("is"));
var _index = _interopRequireDefault(require("../Paragraph/index.js"));
var _excluded = ["formId"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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
*/
// These components exist to make it clear in FeedbackForm's render what's going on.
var RefererField = function RefererField(props) {
return /*#__PURE__*/_react["default"].createElement("input", _extends({
type: "hidden"
}, props));
};
var NodeIdField = function NodeIdField(props) {
return /*#__PURE__*/_react["default"].createElement("input", _extends({
type: "hidden"
}, props));
};
// Required for jsonp responses to work.
var JsonPField = function JsonPField() {
return /*#__PURE__*/_react["default"].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.
var HiddenFields = function HiddenFields(props) {
var formId = props.formId,
rest = _objectWithoutPropertiesLoose(props, _excluded);
return /*#__PURE__*/_react["default"].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["default"].number
} : {};
var FeedbackForm = exports["default"] = /*#__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["default"].createElement(_index["default"], {
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["default"].createRef());
_defineProperty(_this, "yesTextArea", /*#__PURE__*/_react["default"].createRef());
_defineProperty(_this, "noRadio", /*#__PURE__*/_react["default"].createRef());
_defineProperty(_this, "noTextArea", /*#__PURE__*/_react["default"].createRef());
_defineProperty(_this, "submitButton", /*#__PURE__*/_react["default"].createRef());
_defineProperty(_this, "defaultDisclaimer", function () {
return /*#__PURE__*/_react["default"].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["default"].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", function (id) {
return "label" + id;
});
_defineProperty(_this, "prefixField", function (id) {
return "field" + id;
});
_defineProperty(_this, "handleRadioChange", function (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", function (e) {
var 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", function (errors, idToRemove) {
return errors.filter(function (fieldId) {
return !_is["default"].equal(fieldId, idToRemove);
});
});
_defineProperty(_this, "checkForErrors", function () {
var hasError = [].concat(_this.state.hasError);
var _this$props = _this.props,
radioId = _this$props.radioId,
noFeedbackId = _this$props.noFeedbackId;
var _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["default"].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["default"].empty(_this.noTextArea.current.value)) {
hasError.push(noFeedbackId);
} else if (hasError.includes(noFeedbackId) && feedbackChoice === false && !_is["default"].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["default"].equal(hasError, _this.state.hasError)) {
_this.setState({
hasError: hasError
});
}
return hasError;
});
_defineProperty(_this, "handleSubmit", function (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
}, function () {
// checkForErrors doesn't immediately update state, so it returns what this.state.hasError is being set to.
var 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["default"].array.empty(errors)) {
Promise.resolve().then(function () {
return _interopRequireWildcard(require("b-jsonp"));
}).then(function (module) {
var jsonp = module["default"];
var form = document.getElementById("fsForm" + _this.props.formId);
var data = new FormData(form);
var body = {};
new Map(data.entries()).forEach(function (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'
}, function () {});
});
}
});
});
return _this;
}
_inheritsLoose(FeedbackForm, _React$Component);
var _proto = FeedbackForm.prototype;
_proto.componentDidMount = function componentDidMount() {
var _this2 = this;
if (window) {
// We don't have the FormStack class available, but we can fake like we do:
window["form" + this.props.formId] = {
onSubmitError: function onSubmitError(err) {
if (err) {
_this2.setState(function (state, props) {
var hasError = [].concat(state.hasError);
hasError.push(props.radioId);
hasError.push(props.noFeedbackId);
var errorMessage = /*#__PURE__*/_react["default"].createElement(_index["default"], {
className: "error"
}, err.error);
return {
hasError: hasError,
errorMessage: errorMessage
};
});
}
},
onPostSubmit: function onPostSubmit() {
_this2.setState({
success: true
});
}
};
}
};
_proto.render = function render() {
var _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;
var _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;
var yesId = this.prefixField(yesFeedbackId);
var noId = this.prefixField(noFeedbackId);
var 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;
}
var refererProps = {
id: this.prefixField(refererId),
name: this.prefixField(refererId),
size: '50',
value: window.location.href,
className: 'ma__textarea fsField'
};
var yesFieldSetClassNames = (0, _classnames["default"])({
'radio-yes': true,
error: hasError.includes(yesFeedbackId)
});
var noFieldSetClassNames = (0, _classnames["default"])({
'radio-no': true,
error: hasError.includes(noFeedbackId)
});
var yesTextAreaClassNames = (0, _classnames["default"])({
'ma__textarea fsField': true
});
var noTextAreaClassNames = (0, _classnames["default"])({
'ma__textarea fsField required': true,
error: hasError.includes(noFeedbackId)
});
var radiosClassNames = hasError.includes(radioId) ? 'error' : null;
var messsageClassNames = (0, _classnames["default"])({
messages: true,
hide: success === false && _is["default"].array.empty(hasError)
});
var messageStyle = {
fontWeight: 'bold'
};
if (!_is["default"].array.empty(hasError)) {
messageStyle.color = 'red';
}
var 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["default"].createElement("div", {
className: "ma__feedback-form",
"data-mass-feedback-form": true
}, /*#__PURE__*/_react["default"].createElement("h2", {
className: "visually-hidden"
}, "Feedback"), /*#__PURE__*/_react["default"].createElement("form", _extends({
noValidate: true
}, formProps), /*#__PURE__*/_react["default"].createElement("fieldset", null, /*#__PURE__*/_react["default"].createElement("div", {
className: messsageClassNames,
style: messageStyle
}, _is["default"].fn(successMessage) && successMessage())))) : /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__feedback-form",
"data-mass-feedback-form": true
}, /*#__PURE__*/_react["default"].createElement("h2", {
className: "visually-hidden"
}, "Feedback"), /*#__PURE__*/_react["default"].createElement("form", _extends({
noValidate: true
}, formProps), /*#__PURE__*/_react["default"].createElement("input", {
type: "hidden",
name: "form",
value: formId
}), /*#__PURE__*/_react["default"].createElement(JsonPField, null), /*#__PURE__*/_react["default"].createElement("input", {
type: "hidden",
name: "viewkey",
value: "vx39GBYJhi"
}), feedbackChoice === true && /*#__PURE__*/_react["default"].createElement(HiddenFields, {
formId: formId,
value: noId
}), feedbackChoice === false && /*#__PURE__*/_react["default"].createElement(HiddenFields, {
formId: formId,
value: yesId
}), /*#__PURE__*/_react["default"].createElement("input", {
type: "hidden",
name: "_submit",
value: "1"
}), /*#__PURE__*/_react["default"].createElement("input", {
type: "hidden",
name: "style_version",
value: "3"
}), /*#__PURE__*/_react["default"].createElement("input", {
type: "hidden",
id: "viewparam",
name: "viewparam",
value: "524744"
}), /*#__PURE__*/_react["default"].createElement(RefererField, refererProps), /*#__PURE__*/_react["default"].createElement(NodeIdField, {
id: "field58154059",
name: "field58154059",
value: nodeId
}), /*#__PURE__*/_react["default"].createElement(NodeIdField, {
id: "field57432673",
name: "field57432673",
value: nodeId
}), /*#__PURE__*/_react["default"].createElement("fieldset", {
className: radiosClassNames
}, /*#__PURE__*/_react["default"].createElement("legend", {
className: "fsLabel requiredLabel fsLabelVertical"
}, "Did you find what you were looking for on this webpage?", /*#__PURE__*/_react["default"].createElement("span", null, ' ', "*", /*#__PURE__*/_react["default"].createElement("span", {
className: "visually-hidden"
}, "required"))), /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__input-group__items ma__input-group__items--inline"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__input-group__item"
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "ma__input-radio"
}, /*#__PURE__*/_react["default"].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["default"].createElement("label", {
className: "fsOptionLabel ma__input-radio__label",
htmlFor: this.prefixField(radioId) + "_1"
}, "Yes"))), /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__input-group__item"
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "ma__input-radio"
}, /*#__PURE__*/_react["default"].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["default"].createElement("label", {
className: "fsOptionLabel ma__input-radio__label",
htmlFor: this.prefixField(radioId) + "_2"
}, "No"))))), feedbackChoice === false && /*#__PURE__*/_react["default"].createElement("fieldset", {
className: noFieldSetClassNames
}, /*#__PURE__*/_react["default"].createElement("label", {
htmlFor: noId
}, "If \"No,\" please tell us what you were looking for:", /*#__PURE__*/_react["default"].createElement("span", null, ' ', "*", /*#__PURE__*/_react["default"].createElement("span", {
className: "visually-hidden"
}, "required"))), /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__textarea__wrapper"
}, /*#__PURE__*/_react["default"].createElement(_reactCharacterCounter["default"], _extends({
value: noText
}, characterCounterProps), /*#__PURE__*/_react["default"].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["default"].createElement("input", {
type: "hidden",
id: yesId,
name: yesId,
value: ""
}), /*#__PURE__*/_react["default"].createElement("span", null, _is["default"].fn(noDisclaimer) ? noDisclaimer() : this.defaultDisclaimer())), feedbackChoice === true && /*#__PURE__*/_react["default"].createElement("fieldset", {
className: yesFieldSetClassNames
}, /*#__PURE__*/_react["default"].createElement("label", {
htmlFor: yesId
}, "Is there anything else you would like to tell us?"), /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__textarea__wrapper"
}, /*#__PURE__*/_react["default"].createElement(_reactCharacterCounter["default"], _extends({
value: yesText
}, characterCounterProps), /*#__PURE__*/_react["default"].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["default"].createElement("input", {
type: "hidden",
id: noId,
name: noId,
value: ""
}), /*#__PURE__*/_react["default"].createElement("span", null, _is["default"].fn(yesDisclaimer) ? yesDisclaimer() : this.defaultDisclaimer())), /*#__PURE__*/_react["default"].createElement("fieldset", {
className: "ma_feedback-fieldset ma__mass-feedback-form__form--submit-wrapper"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: messsageClassNames,
style: messageStyle
}, success === false && errorMessage), /*#__PURE__*/_react["default"].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["default"].Component);
_defineProperty(FeedbackForm, "defaultProps", {
formId: 2521317,
radioId: 47054416,
yesFeedbackId: 52940022,
noFeedbackId: 47054414,
refererId: 47056299
});
FeedbackForm.propTypes = process.env.NODE_ENV !== "production" ? {
/** A ref object as created by React.createRef(). Will be applied to the form element. */
formRef: _propTypes["default"].oneOfType([_propTypes["default"].func,
// eslint-disable-next-line react/forbid-prop-types
_propTypes["default"].shape({
current: _propTypes["default"].any
})]),
/** A function whose return value is displayed after a successful form submission. */
successMessage: _propTypes["default"].func.isRequired,
/** The field id number for the yes textarea. */
yesFeedbackId: _propTypes["default"].number,
/** The field id number for the no textarea. */
noFeedbackId: _propTypes["default"].number,
/** The field id number for the referer. */
refererId: _propTypes["default"].number,
/** The id number for the form from FormStack. */
formId: _propTypes["default"].number,
/** The field id number for the yes/no radio buttons. */
radioId: _propTypes["default"].number,
/** A drupal node id number for the referer. */
nodeId: _propTypes["default"].number,
/** A function whose return value is rendered under the yes textarea. */
yesDisclaimer: _propTypes["default"].func,
/** A function whose return value is rendered under the no textarea. */
noDisclaimer: _propTypes["default"].func
} : {};
module.exports = exports.default;