maille
Version:
Component library for MithrilJS
104 lines (103 loc) • 5.07 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const mithril_1 = __importDefault(require("mithril"));
const isEmail = __importStar(require("isemail"));
const uxwing_icon_1 = require("../uxwing-icon");
const component_1 = __importDefault(require("../card/component"));
const component_2 = __importDefault(require("../button/component"));
const types_1 = require("../../types");
const DEFAULT_ERROR_MSG = "Please enter a valid email address";
const DEFAULT_BRIEF = "Get updates emailed straight to your inbox";
const DEFAULT_MAILLE_BUTTON_CONTENTS = [mithril_1.default(uxwing_icon_1.Envelope, { fill: "white" }), mithril_1.default("span.xs-margin-left", "Subscribe")];
class SubscriptionCTA {
constructor() {
this.emailAddress = "";
this.submitAttempted = false;
this.subscribeFn = () => undefined;
}
view(vnode) {
if (vnode.attrs.subscribeForm && vnode.attrs.subscribeFn) {
throw new Error("Both attrs.subscribeForm and attrs.subscribeFn should not be specified");
}
if (!vnode.attrs.subscribeForm && !vnode.attrs.subscribeFn) {
throw new Error("Either attrs.subscribeForm (can be empty object) or attrs.subscribeFn must be specified");
}
// Update the internal subscribefn if it's changed
if (vnode.attrs.subscribeFn) {
this.subscribeFn = vnode.attrs.subscribeFn;
}
const brief = vnode.attrs.brief || DEFAULT_BRIEF;
// If not email show error
const invalidEmailErrorHolder = [];
if (this.submitAttempted && this.emailAddress && !isEmail.validate(this.emailAddress)) {
const errorMsg = vnode.attrs.errorMsg ? vnode.attrs.errorMsg : DEFAULT_ERROR_MSG;
invalidEmailErrorHolder.push(mithril_1.default("p.no-margin.error", errorMsg));
}
let buttonAttrs = {};
let formContainerTag = "div";
const formAttrs = Object.assign({}, vnode.attrs.formAttrs);
// If a form is specified, some options change
if (vnode.attrs.subscribeForm) {
buttonAttrs = { type: "submit" };
formContainerTag = "form";
Object.assign(formAttrs, vnode.attrs.subscribeForm, { method: "POST" });
}
const mailleButtonAttrs = vnode.attrs.mailleButtonAttrs || {};
const mailleButtonContents = vnode.attrs.mailleButtonContents || DEFAULT_MAILLE_BUTTON_CONTENTS;
return mithril_1.default(component_1.default, {
className: "iblk maille maille-mailing-list-cta",
rounded: true,
bordered: true,
}, mithril_1.default(".inner-container.flex.sm-pad", [
mithril_1.default("p", brief),
mithril_1.default(formContainerTag, formAttrs, [
mithril_1.default("input.email-address", {
type: "email",
name: "email",
placeholder: "your-email@domain.com",
onchange: (e) => this.emailAddress = e.target.value,
onkeyup: (e) => {
// If subscribeForm was specified don't do any of this
// native form functionality will do the work
if (vnode.attrs.subscribeForm) {
return;
}
e.redraw = false;
if (e.keyCode === types_1.KeyboardKeyCode.Enter) {
e.redraw = true;
this.doSubscribe();
}
},
}),
mithril_1.default(component_2.default, Object.assign(Object.assign({ className: "subscribe", attrs: Object.assign({ type: "submit" }, buttonAttrs), type: types_1.ButtonType.Primary, size: types_1.Size.Medium }, mailleButtonAttrs), { onclick: () => {
// If subscribeForm was specified don't do any of this
// native form functionality will do the work
if (vnode.attrs.subscribeForm) {
return;
}
this.doSubscribe();
} }), mailleButtonContents),
]),
invalidEmailErrorHolder,
]));
}
doSubscribe() {
this.submitAttempted = true;
// If an email address isn't present or valid then return early
if (!this.emailAddress || !isEmail.validate(this.emailAddress)) {
return;
}
this.subscribeFn(this.emailAddress);
}
}
exports.default = SubscriptionCTA;