react-add-to-calendar
Version:
A simple and reusable add to calendar button component for React
1 lines • 12 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("moment")):"function"==typeof define&&define.amd?define(["react","moment"],t):"object"==typeof exports?exports.ReactAddToCalendar=t(require("react"),require("moment")):e.ReactAddToCalendar=t(e.React,e.moment)}(this,function(e,t){return function(e){function t(n){if(o[n])return o[n].exports;var a=o[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),l=o(1),c=n(l),u=o(2),d=n(u),p=o(7),m=n(p),f=new m.default,h=function(e){function t(e){a(this,t);var o=r(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.state={optionsOpen:e.optionsOpen||!1,isCrappyIE:!1},o.toggleCalendarDropdown=o.toggleCalendarDropdown.bind(o),o.handleDropdownLinkClick=o.handleDropdownLinkClick.bind(o),o}return i(t,e),s(t,[{key:"componentWillMount",value:function(){String.prototype.startsWith||(String.prototype.startsWith=function(e,t){return t=t||0,this.indexOf(e,t)===t});var e=!1;"undefined"!=typeof window&&window.navigator.msSaveOrOpenBlob&&window.Blob&&(e=!0),this.setState({isCrappyIE:e})}},{key:"toggleCalendarDropdown",value:function(){var e=!this.state.optionsOpen;e?document.addEventListener("click",this.toggleCalendarDropdown,!1):document.removeEventListener("click",this.toggleCalendarDropdown),this.setState({optionsOpen:e})}},{key:"handleDropdownLinkClick",value:function(e){e.preventDefault();var t=e.currentTarget.getAttribute("href");if(f.isMobile()||!t.startsWith("data")&&!t.startsWith("BEGIN"))window.open(t,"_blank");else{var o="download.ics",n=new Blob([t],{type:"text/calendar;charset=utf-8"});if(this.state.isCrappyIE)window.navigator.msSaveOrOpenBlob(n,o);else{var a=document.createElement("a");a.href=window.URL.createObjectURL(n),a.setAttribute("download",o),document.body.appendChild(a),a.click(),document.body.removeChild(a)}}this.toggleCalendarDropdown()}},{key:"renderDropdown",value:function(){var e=this,t=this.props.listItems.map(function(t){var o=Object.keys(t)[0],n=t[o],a=null;if(e.props.displayItemIcons){var r="outlook"===o||"outlookcom"===o?"windows":o;a=c.default.createElement("i",{className:"fa fa-"+r})}return c.default.createElement("li",{key:f.getRandomKey()},c.default.createElement("a",{className:o+"-link",onClick:e.handleDropdownLinkClick,href:f.buildUrl(e.props.event,o,e.state.isCrappyIE),target:"_blank"},a,n))});return c.default.createElement("div",{className:this.props.dropdownClass},c.default.createElement("ul",null,t))}},{key:"renderButton",value:function(){var e=this.props.buttonLabel,t=null,o=Object.keys(this.props.buttonTemplate);if("textOnly"!==o[0]){var n=this.props.buttonTemplate[o],a="react-add-to-calendar__icon--"===this.props.buttonIconClass?""+this.props.buttonIconClass+n:this.props.buttonIconClass,r=this.props.useFontAwesomeIcons?"fa fa-":"",i="caret"===o[0]?this.state.optionsOpen?"caret-up":"caret-down":o[0],s=a+" "+r+i;t=c.default.createElement("i",{className:s}),e="right"===n?c.default.createElement("span",null,e+" ",t):c.default.createElement("span",null,t," "+e)}var l=this.state.optionsOpen?this.props.buttonClassClosed+" "+this.props.buttonClassOpen:this.props.buttonClassClosed;return c.default.createElement("div",{className:this.props.buttonWrapperClass},c.default.createElement("a",{className:l,onClick:this.toggleCalendarDropdown},e))}},{key:"render",value:function(){var e=null;this.state.optionsOpen&&(e=this.renderDropdown());var t=null;return this.props.event&&(t=this.renderButton()),c.default.createElement("div",{className:this.props.rootClass},t,e)}}]),t}(c.default.Component);t.default=h,h.displayName="Add To Calendar",h.propTypes={buttonClassClosed:d.default.string,buttonClassOpen:d.default.string,buttonLabel:d.default.string,buttonTemplate:d.default.object,buttonIconClass:d.default.string,useFontAwesomeIcons:d.default.bool,buttonWrapperClass:d.default.string,displayItemIcons:d.default.bool,optionsOpen:d.default.bool,dropdownClass:d.default.string,event:d.default.shape({title:d.default.string,description:d.default.string,location:d.default.string,startTime:d.default.string,endTime:d.default.string}).isRequired,listItems:d.default.arrayOf(d.default.object),rootClass:d.default.string},h.defaultProps={buttonClassClosed:"react-add-to-calendar__button",buttonClassOpen:"react-add-to-calendar__button--light",buttonLabel:"Add to My Calendar",buttonTemplate:{caret:"right"},buttonIconClass:"react-add-to-calendar__icon--",useFontAwesomeIcons:!0,buttonWrapperClass:"react-add-to-calendar__wrapper",displayItemIcons:!0,optionsOpen:!1,dropdownClass:"react-add-to-calendar__dropdown",event:{title:"Sample Event",description:"This is the sample event provided as an example only",location:"Portland, OR",startTime:"2016-09-16T20:15:00-04:00",endTime:"2016-09-16T21:45:00-04:00"},listItems:[{apple:"Apple Calendar"},{google:"Google"},{outlook:"Outlook"},{outlookcom:"Outlook.com"},{yahoo:"Yahoo"}],rootClass:"react-add-to-calendar"}},function(t,o){t.exports=e},function(e,t,o){e.exports=o(3)()},function(e,t,o){"use strict";var n=o(4),a=o(5),r=o(6);e.exports=function(){function e(e,t,o,n,i,s){s!==r&&a(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var o={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return o.checkPropTypes=n,o.PropTypes=o,o}},function(e,t){"use strict";function o(e){return function(){return e}}var n=function(){};n.thatReturns=o,n.thatReturnsFalse=o(!1),n.thatReturnsTrue=o(!0),n.thatReturnsNull=o(null),n.thatReturnsThis=function(){return this},n.thatReturnsArgument=function(e){return e},e.exports=n},function(e,t,o){"use strict";function n(e,t,o,n,r,i,s,l){if(a(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var u=[o,n,r,i,s,l],d=0;c=new Error(t.replace(/%s/g,function(){return u[d++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var a=function(e){};e.exports=n},function(e,t){"use strict";var o="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=o},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),i=o(8),s=n(i),l=function(){function e(){a(this,e)}return r(e,[{key:"getRandomKey",value:function(){var e=Math.floor(999999999999*Math.random()).toString();return(new Date).getTime().toString()+"_"+e}},{key:"formatTime",value:function(e){var t=s.default.utc(e).format("YYYYMMDDTHHmmssZ");return t.replace("+00:00","Z")}},{key:"calculateDuration",value:function(e,t){var o=s.default.utc(t).format("DD/MM/YYYY HH:mm:ss"),n=s.default.utc(e).format("DD/MM/YYYY HH:mm:ss"),a=(0,s.default)(o,"DD/MM/YYYY HH:mm:ss").diff((0,s.default)(n,"DD/MM/YYYY HH:mm:ss")),r=s.default.duration(a);return Math.floor(r.asHours())+s.default.utc(a).format(":mm")}},{key:"buildUrl",value:function(e,t,o){var n="";switch(t){case"google":n="https://calendar.google.com/calendar/render",n+="?action=TEMPLATE",n+="&dates="+this.formatTime(e.startTime),n+="/"+this.formatTime(e.endTime),n+="&location="+encodeURIComponent(e.location),n+="&text="+encodeURIComponent(e.title),n+="&details="+encodeURIComponent(e.description);break;case"yahoo":var a=this.calculateDuration(e.startTime,e.endTime);n="https://calendar.yahoo.com/?v=60&view=d&type=20",n+="&title="+encodeURIComponent(e.title),n+="&st="+this.formatTime(e.startTime),n+="&dur="+a,n+="&desc="+encodeURIComponent(e.description),n+="&in_loc="+encodeURIComponent(e.location);break;case"outlookcom":n="https://outlook.live.com/owa/?rru=addevent",n+="&startdt="+this.formatTime(e.startTime),n+="&enddt="+this.formatTime(e.endTime),n+="&subject="+encodeURIComponent(e.title),n+="&location="+encodeURIComponent(e.location),n+="&body="+encodeURIComponent(e.description),n+="&allday=false",n+="&uid="+this.getRandomKey(),n+="&path=/calendar/view/Month";break;default:n=["BEGIN:VCALENDAR","VERSION:2.0","BEGIN:VEVENT","URL:"+document.URL,"DTSTART:"+this.formatTime(e.startTime),"DTEND:"+this.formatTime(e.endTime),"SUMMARY:"+e.title,"DESCRIPTION:"+e.description,"LOCATION:"+e.location,"END:VEVENT","END:VCALENDAR"].join("\n"),!o&&this.isMobile()&&(n=encodeURI("data:text/calendar;charset=utf8,"+n))}return n}},{key:"isMobile",value:function(){var e=!1;return function(t){(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(t)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(t.substr(0,4)))&&(e=!0)}(window.navigator.userAgent||window.navigator.vendor||window.opera),e}}]),e}();t.default=l},function(e,o){e.exports=t}])});