openstack-uicore-foundation/lib/components/forms/rsvp-form.js

ui reactjs components for openstack marketing site

!function(e,a){"object"==typeof exports&&"object"==typeof module?module.exports=a():"function"==typeof define&&define.amd?define("openstack-uicore-foundation",[],a):"object"==typeof exports?exports["openstack-uicore-foundation"]=a():e["openstack-uicore-foundation"]=a()}(this,(()=>(()=>{"use strict";var e={7017:(e,a,t)=>{t.d(a,{default:()=>u});var r=t(2462),l=t.n(r),s=t(9825),n=t.n(s),i=t(2015),o=t.n(i),d=t(6842),c=t.n(d),h=t(5028);t(1536);const p=["onChange","value","className","options","id","children","error","disabled","name","ariaLabelledBy"];class u extends o().Component{constructor(e){super(e);let a=!!e.value&&e.value.find((a=>!e.options.map((e=>e.value)).includes(a)));this.state={otherChecked:!!a},this.handleChange=this.handleChange.bind(this),this.handleOtherCBChange=this.handleOtherCBChange.bind(this)}handleChange(e){let a=this.props.options.map((e=>e.value)),t=this.props.value?[...this.props.value]:[];if("checkbox"===e.target.type)if(e.target.checked){const a=isNaN(e.target.value)?e.target.value:parseInt(e.target.value);t.push(a)}else t=t.filter((a=>a!=e.target.value));else t=t.filter((e=>a.includes(e))),t.push(e.target.value);let r={target:{id:this.props.id,value:t,type:"checkboxlist"}};this.props.onChange(r)}handleOtherCBChange(e){this.setState({otherChecked:e.target.checked})}render(){let e,a=this.props,{onChange:t,value:r,className:s,options:n,id:i,children:d,error:u,disabled:m,name:b,ariaLabelledBy:v}=a,{otherChecked:f}=(l()(a,p),this.state),g=this.props.hasOwnProperty("inline"),y=this.props.hasOwnProperty("allowOther"),C=!!r&&r.find((e=>!n.map((e=>e.value)).includes(e))),E=this.props.hasOwnProperty("error")&&""!==u,N=this.props.hasOwnProperty("disabled")&&1==m;return e=g?{paddingLeft:"22px",marginLeft:"20px",float:"left"}:{paddingLeft:"22px",marginTop:"7px"},o().createElement("div",{id:`chl_wrapper_${i}`,"aria-labelledby":v},o().createElement("div",{className:"checkboxes-div"+(E?" error":"")},n.map((a=>{let t=!!r&&r.includes(a.value);return o().createElement("div",{className:"form-check abc-checkbox",key:"radio_key_"+a.value,style:e},o().createElement("input",{type:"checkbox",id:`cb_${i}_${a.value}`,name:b||i,checked:t,disabled:N,onChange:this.handleChange,className:"form-check-input",value:a.value}),o().createElement("label",{className:"form-check-label",htmlFor:`cb_${i}_${a.value}`},o().createElement(h.default,null,a.label)))})),y&&o().createElement("div",{className:"form-check abc-checkbox",style:e},o().createElement("input",{type:"checkbox",id:"cb_other"+i,checked:f,disabled:N,onChange:this.handleOtherCBChange,className:"form-check-input",value:"other"}),o().createElement("label",{className:"form-check-label",htmlFor:"cb_other"+i},c().translate("general.other"))),y&&f&&o().createElement("div",{style:{paddingLeft:"22px",width:"50%"}},o().createElement("input",{className:"form-control",disabled:N,onChange:this.handleChange,value:C}))),E&&o().createElement("p",{className:"error-label"},u))}}u.defaultProps={ariaLabelledBy:null},u.propTypes={id:n().string.isRequired}},6604:(e,a,t)=>{t.d(a,{default:()=>v});var r=t(6031),l=t.n(r),s=t(1116),n=t.n(s),i=t(2462),o=t.n(i),d=t(2015),c=t.n(d),h=t(8466),p=t.n(h);const u=["onChange","value","className","error","clearable","disabled","overrideCSS","ariaLabelledBy"];function m(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);a&&(r=r.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,r)}return t}function b(e){for(var a=1;a<arguments.length;a++){var t=null!=arguments[a]?arguments[a]:{};a%2?m(Object(t),!0).forEach((function(a){n()(e,a,t[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):m(Object(t)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(t,a))}))}return e}class v extends c().Component{constructor(e){super(e),this.handleChange=this.handleChange.bind(this)}handleChange(e){let a=null;a=this.props.isMulti?e?e.map((e=>e.value)):null:e?e.value:null;let t={target:{id:this.props.id,value:a,type:"dropdown"}};this.props.onChange(t)}render(){let e=this.props,{onChange:a,value:t,className:r,error:s,clearable:n,disabled:i,overrideCSS:d,ariaLabelledBy:h}=e,m=o()(e,u),v=this.props.hasOwnProperty("error")&&""!=s,f=this.props.hasOwnProperty("clearable"),g=this.props.hasOwnProperty("disabled")&&1==i,y=null,C=r;this.props.hasOwnProperty("overrideCSS")&&0!=d||(C="dropdown "+r+" "+(v?"error":"")),y=this.props.isMulti?this.props.options.filter((e=>t.includes(e.value))):t instanceof Object||null==t?t:this.props.options.find((e=>e.value==t));const E={menu:e=>b(b({},e),{},{zIndex:999})};return c().createElement("div",null,c().createElement(p(),l()({className:C,value:y,onChange:this.handleChange,isClearable:f,isDisabled:g,styles:E,"aria-labelledby":h,formatOptionLabel:e=>c().createElement("span",{dangerouslySetInnerHTML:{__html:e.label}})},m)),v&&c().createElement("p",{className:"error-label"},s))}}v.defaultProps={ariaLabelledBy:null}},5639:(e,a,t)=>{t.d(a,{default:()=>h});var r=t(2462),l=t.n(r),s=t(2015),n=t.n(s),i=t(5028),o=t(9825),d=t.n(o);t(1536);const c=["onChange","value","className","error","ariaLabelledBy","disabled","options","id","name"];class h extends n().Component{constructor(e){super(e),this.state={value:e.value},this.handleChange=this.handleChange.bind(this)}handleChange(e){let a={target:{id:this.props.id,value:e.target.value,type:"radio"}};this.props.onChange(a)}getLabel(e,a,t,r){return t?n().createElement("label",{className:"form-check-label",htmlFor:`radio_${a}_${e.value}`,style:{display:"inline-block"}},n().createElement(i.default,null,e.label)):r?n().createElement("label",{className:"form-check-label",htmlFor:`radio_${a}_${e.value}`},e.label):n().createElement("label",{className:"form-check-label",htmlFor:`radio_${a}_${e.value}`,style:{display:"inline-block"}},n().createElement("h4",{style:{marginTop:"0px"}},e.label),n().createElement(i.default,null,e.description))}render(){let e,a=this.props,{onChange:t,value:r,className:s,error:i,ariaLabelledBy:o,disabled:d,options:h,id:p,name:u}=a,m=(l()(a,c),this.props.hasOwnProperty("error")&&""!=i),b=this.props.hasOwnProperty("inline"),v=this.props.hasOwnProperty("simple"),f=this.props.hasOwnProperty("disabled")&&1==d;return e=b?{paddingLeft:"22px",marginLeft:"20px",float:"left"}:{paddingLeft:"22px"},n().createElement("div",{id:`rl_wrapper_${p}`,"aria-labelledby":o},h.map((a=>{let t=a.value==r;return n().createElement("div",{className:"form-check abc-radio",key:`radio_key_${p}_${a.value}`,style:e},n().createElement("input",{className:"form-check-input",type:"radio",id:`radio_${p}_${a.value}`,value:a.value,checked:t,onChange:this.handleChange,disabled:f,name:u||`radio_${p}`}),this.getLabel(a,p,b,v))})),m&&n().createElement("p",{className:"error-label"},i))}}h.defaultProps={ariaLabelledBy:null},h.propTypes={id:d().string.isRequired}},7651:(e,a,t)=>{t.d(a,{default:()=>c});var r=t(6031),l=t.n(r),s=t(2462),n=t.n(s),i=t(2015),o=t.n(i);const d=["onChange","value","className","error","ariaLabelledBy","containerClassName"];class c extends o().Component{constructor(e){super(e),this.handleChange=this.handleChange.bind(this)}componentDidUpdate(e,a,t){this.props.value!==e.value&&(this.input.value=this.props.value)}handleChange(e){this.props.onChange(e)}render(){let e=this.props,{onChange:a,value:t,className:r,error:s,ariaLabelledBy:i,containerClassName:c}=e,h=n()(e,d),p=this.props.hasOwnProperty("error")&&""!==s,u=this.props.hasOwnProperty("className")?r:"form-control",m=this.props.hasOwnProperty("containerClassName")?c:"container-form-control";return o().createElement("div",{className:m},o().createElement("input",l()({className:`${u} ${p?"error":""}`,ref:e=>{this.input=e},defaultValue:t,"aria-labelledby":i,onChange:this.handleChange},h)),p&&o().createElement("p",{className:"error-label"},s))}}c.defaultProps={ariaLabelledBy:null}},5028:(e,a,t)=>{t.d(a,{default:()=>c});var r=t(6031),l=t.n(r),s=t(2462),n=t.n(s),i=t(2015),o=t.n(i);const d=["children","replaceNewLine","className"],c=e=>{let{children:a,replaceNewLine:t=!1,className:r=""}=e,s=n()(e,d);return o().createElement("span",l()({className:r,dangerouslySetInnerHTML:{__html:t?null==a?void 0:a.replace(/\n/g,"<br />"):a}},s))}},1116:e=>{e.exports=require("@babel/runtime/helpers/defineProperty")},6031:e=>{e.exports=require("@babel/runtime/helpers/extends")},2462:e=>{e.exports=require("@babel/runtime/helpers/objectWithoutProperties")},1536:e=>{e.exports=require("awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css")},6842:e=>{e.exports=require("i18n-react/dist/i18n-react")},9825:e=>{e.exports=require("prop-types")},2015:e=>{e.exports=require("react")},8466:e=>{e.exports=require("react-select")}},a={};function t(r){var l=a[r];if(void 0!==l)return l.exports;var s=a[r]={exports:{}};return e[r](s,s.exports,t),s.exports}(()=>{t.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return t.d(a,{a}),a}})(),(()=>{t.d=(e,a)=>{for(var r in a)t.o(a,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:a[r]})}})(),(()=>{t.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a)})(),(()=>{t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})();var r={};t.r(r),t.d(r,{default:()=>p});var l=t(2015),s=t.n(l),n=(t(1536),t(7651)),i=t(6604),o=t(5028),d=t(7017),c=t(5639);class h extends s().Component{constructor(e){super(e),this.state={answers:e.questions.map((e=>({question_id:e.id,value:null}))),errors:e.errors},this.handleChange=this.handleChange.bind(this),this.hasErrors=this.hasErrors.bind(this),this.handleSubmit=this.handleSubmit.bind(this)}renderQuestion(e){const{answers:a}=this.state,t=a.find((a=>a.question_id===e.id)).value;switch(e.class_name){case"RSVPMemberEmailQuestionTemplate":case"RSVPMemberFirstNameQuestionTemplate":case"RSVPMemberLastNameQuestionTemplate":case"RSVPTextBoxQuestionTemplate":return s().createElement(n.default,{id:e.id,value:t||"",onChange:this.handleChange,className:"form-control",error:this.hasErrors(e.id)});case"RSVPTextAreaQuestionTemplate":return s().createElement("textarea",{id:e.id,value:t||"",className:"form-control",onChange:this.handleChange});case"RSVPLiteralContentQuestionTemplate":return s().createElement("div",null,s().createElement(o.default,null,e.value));case"RSVPCheckBoxListQuestionTemplate":return s().createElement(d.default,{id:e.id,value:t,options:e.values.map((e=>({value:`${e.id}`,label:e.label}))),onChange:this.handleChange,error:this.hasErrors(e.id)});case"RSVPRadioButtonListQuestionTemplate":return s().createElement(c.default,{id:e.id,value:t,onChange:this.handleChange,options:e.values.map((e=>({value:`${e.id}`,label:e.label}))),error:this.hasErrors(e.id),simple:!0});case"RSVPDropDownQuestionTemplate":let a=e.is_country_selector?e.values.map((e=>({value:e.id,label:e.value}))):e.values;return s().createElement(i.default,{id:e.id,isMulti:e.is_multiselect,value:t,onChange:this.handleChange,placeholder:e.empty_string,options:a})}}handleChange(e){let a=[...this.state.answers],{value:t,id:r}=e.target;"datetime"===e.target.type&&(t=t.valueOf()/1e3),a.find((e=>e.question_id===parseInt(r))).value=t,this.setState({answers:a})}hasErrors(e){let{errors:a}=this.state;return e in a?a[e]:""}handleSubmit(e){e.preventDefault();let{onSubmit:a}=this.props,{answers:t}=this.state;a(t)}render(){let{questions:e,onSubmit:a}=this.props;return s().createElement("form",{className:"rsvp-form"},e.map((e=>s().createElement("div",{key:"question_"+e.id,className:"row form-group"},s().createElement("div",{className:"col-md-12"},s().createElement("label",null,s().createElement(o.default,null,e.label)," ",e.is_mandatory&&"*"),this.renderQuestion(e))))),a&&s().createElement("div",{className:"row"},s().createElement("div",{className:"col-md-12"},s().createElement("button",{className:"btn btn-primary",onClick:this.handleSubmit},"Submit"))))}}const p=h;return r})()));
//# sourceMappingURL=rsvp-form.js.map