react-add-to-calendar-customizable-ui
Version:
A simple and reusable add to calendar button component for React
1 lines • 13.2 kB
JavaScript
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("moment")):"function"==typeof define&&define.amd?define(["react","moment"],e):"object"==typeof exports?exports.ReactAddToCalendar=e(require("react"),require("moment")):t.ReactAddToCalendar=e(t.React,t.moment)}(this,function(t,e){return function(t){function e(n){if(o[n])return o[n].exports;var a=o[n]={exports:{},id:n,loaded:!1};return t[n].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var o={};return e.m=t,e.c=o,e.p="",e(0)}([function(t,e,o){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var i=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},l=function(){function t(t,e){for(var o=0;o<e.length;o++){var n=e[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,o,n){return o&&t(e.prototype,o),n&&t(e,n),e}}(),d=o(1),u=n(d),c=o(2),p=n(c),m=o(7),f=n(m),h=new f.default,b=function(t){function e(t){a(this,e);var o=r(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return o.state={optionsOpen:t.optionsOpen||!1,isCrappyIE:!1},o.toggleCalendarDropdown=o.toggleCalendarDropdown.bind(o),o.handleDropdownLinkClick=o.handleDropdownLinkClick.bind(o),o}return s(e,t),l(e,[{key:"componentWillMount",value:function(){String.prototype.startsWith||(String.prototype.startsWith=function(t,e){return e=e||0,this.indexOf(t,e)===e});var t=!1;"undefined"!=typeof window&&window.navigator.msSaveOrOpenBlob&&window.Blob&&(t=!0),this.setState({isCrappyIE:t})}},{key:"toggleCalendarDropdown",value:function(){var t=!this.state.optionsOpen;t?document.addEventListener("click",this.toggleCalendarDropdown,!1):document.removeEventListener("click",this.toggleCalendarDropdown),this.setState({optionsOpen:t})}},{key:"handleDropdownLinkClick",value:function(t){t.preventDefault();var e=t.currentTarget.getAttribute("href");if(h.isMobile()||!e.startsWith("data")&&!e.startsWith("BEGIN"))window.open(e,"_blank");else{var o="download.ics",n=new Blob([e],{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 t=this,e=this,o=this.props.listItems.map(function(o,n){var a=Object.keys(o)[0],r=o[a],s=null;if(e.props.displayItemIcons){var l="outlook"===a||"outlookcom"===a?"windows":a;s=u.default.createElement("i",{className:"fa fa-"+l})}return u.default.createElement("li",{style:n===t.props.listItems.length-1?i({},t.props.dropdownListLastElementStyles):i({},t.props.dropdownListElementStyles),key:h.getRandomKey()},u.default.createElement("a",{className:a+"-link",style:t.props.dropdownItemStyles,onClick:e.handleDropdownLinkClick,href:h.buildUrl(e.props.event,a,e.state.isCrappyIE),target:"_blank"},s,r))});return u.default.createElement("div",{className:this.props.dropdownClass,style:this.props.dropdownContainerStyles},u.default.createElement("ul",{style:this.props.dropdownListStyles},o))}},{key:"renderButton",value:function(){switch(this.props.useCustomButtonLabel){case!1:var t=this.props.buttonLabel,e=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-":"",s="caret"===o[0]?this.state.optionsOpen?"caret-up":"caret-down":o[0],i=a+" "+r+s;e=u.default.createElement("i",{className:i}),t="right"===n?u.default.createElement("span",null,t+" ",e):u.default.createElement("span",null,e," "+t)}var l=this.state.optionsOpen?this.props.buttonClassClosed+" "+this.props.buttonClassOpen:this.props.buttonClassClosed;return u.default.createElement("div",{className:this.props.buttonWrapperClass},u.default.createElement("a",{className:l,onClick:this.toggleCalendarDropdown},t));case!0:return u.default.createElement("div",{className:this.props.buttonWrapperClass},u.default.createElement("a",{className:l,onClick:this.toggleCalendarDropdown},this.props.customButtonLabel))}}},{key:"render",value:function(){var t=null;this.state.optionsOpen&&(t=this.renderDropdown());var e=null;return this.props.event&&(e=this.renderButton()),u.default.createElement("div",{className:this.props.rootClass},e,t)}}]),e}(u.default.Component);e.default=b,b.displayName="Add To Calendar",b.propTypes={dropdownListLastElementStyles:p.default.object,dropdownListElementStyles:p.default.object,dropdownListStyles:p.default.object,dropdownItemStyles:p.default.object,dropdownContainerStyles:p.default.object,buttonClassClosed:p.default.string,buttonClassOpen:p.default.string,buttonLabel:p.default.string,useCustomButtonLabel:p.default.bool,customButtonLabel:p.default.object,buttonTemplate:p.default.object,buttonIconClass:p.default.string,useFontAwesomeIcons:p.default.bool,buttonWrapperClass:p.default.string,displayItemIcons:p.default.bool,optionsOpen:p.default.bool,dropdownClass:p.default.string,event:p.default.shape({title:p.default.string,description:p.default.string,location:p.default.string,startTime:p.default.string,endTime:p.default.string,allDay:p.default.bool}).isRequired,listItems:p.default.arrayOf(p.default.object),rootClass:p.default.string},b.defaultProps={dropdownListLastElementStyles:{},dropdownListElementStyles:{},dropdownListStyles:{},dropdownItemStyles:{},dropdownContainerStyles:{},buttonClassClosed:"react-add-to-calendar__button",buttonClassOpen:"react-add-to-calendar__button--light",buttonLabel:"Add to My Calendar",useCustomButtonLabel:!1,customButtonLabel:u.default.createElement("div",null),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",allDay:!1},listItems:[{apple:"Apple Calendar"},{google:"Google"},{outlook:"Outlook"},{outlookcom:"Outlook.com"},{yahoo:"Yahoo"}],rootClass:"react-add-to-calendar"}},function(e,o){e.exports=t},function(t,e,o){t.exports=o(3)()},function(t,e,o){"use strict";var n=o(4),a=o(5),r=o(6);t.exports=function(){function t(t,e,o,n,s,i){i!==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 e(){return t}t.isRequired=t;var o={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e};return o.checkPropTypes=n,o.PropTypes=o,o}},function(t,e){"use strict";function o(t){return function(){return t}}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(t){return t},t.exports=n},function(t,e,o){"use strict";function n(t,e,o,n,r,s,i,l){if(a(e),!t){var d;if(void 0===e)d=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,s,i,l],c=0;d=new Error(e.replace(/%s/g,function(){return u[c++]})),d.name="Invariant Violation"}throw d.framesToPop=1,d}}var a=function(t){};t.exports=n},function(t,e){"use strict";var o="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";t.exports=o},function(t,e,o){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function t(t,e){for(var o=0;o<e.length;o++){var n=e[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,o,n){return o&&t(e.prototype,o),n&&t(e,n),e}}(),s=o(8),i=n(s),l=function(){function t(){a(this,t)}return r(t,[{key:"getRandomKey",value:function(){var t=Math.floor(999999999999*Math.random()).toString();return(new Date).getTime().toString()+"_"+t}},{key:"formatTime",value:function(t,e){if(e)return i.default.utc(t).format("YYYYMMDD");var o=i.default.utc(t).format("YYYYMMDDTHHmmssZ");return o.replace("+00:00","Z")}},{key:"calculateDuration",value:function(t,e){var o=i.default.utc(e).format("DD/MM/YYYY HH:mm:ss"),n=i.default.utc(t).format("DD/MM/YYYY HH:mm:ss"),a=(0,i.default)(o,"DD/MM/YYYY HH:mm:ss").diff((0,i.default)(n,"DD/MM/YYYY HH:mm:ss")),r=i.default.duration(a);return Math.floor(r.asHours())+i.default.utc(a).format(":mm")}},{key:"buildUrl",value:function(t,e,o){var n="";switch(e){case"google":n="https://calendar.google.com/calendar/render",n+="?action=TEMPLATE",n+="&dates="+this.formatTime(t.startTime,t.allDay),n+="/"+this.formatTime(t.endTime,t.allDay),n+="&location="+encodeURIComponent(t.location),n+="&text="+encodeURIComponent(t.title),n+="&details="+encodeURIComponent(t.description);break;case"yahoo":var a=this.calculateDuration(t.startTime,t.endTime);n="https://calendar.yahoo.com/?v=60&view=d&type=20",n+="&title="+encodeURIComponent(t.title),n+="&st="+this.formatTime(t.startTime),n+="&dur="+a,n+="&desc="+encodeURIComponent(t.description),n+="&in_loc="+encodeURIComponent(t.location);break;case"outlookcom":n="https://outlook.live.com/owa/?rru=addevent",n+="&startdt="+this.formatTime(t.startTime),n+="&enddt="+this.formatTime(t.endTime),n+="&subject="+encodeURIComponent(t.title),n+="&location="+encodeURIComponent(t.location),n+="&body="+encodeURIComponent(t.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(t.startTime),"DTEND:"+this.formatTime(t.endTime),"SUMMARY:"+t.title,"DESCRIPTION:"+t.description,"LOCATION:"+t.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 t=!1;return function(e){(/(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(e)||/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(e.substr(0,4)))&&(t=!0)}(window.navigator.userAgent||window.navigator.vendor||window.opera),t}}]),t}();e.default=l},function(t,o){t.exports=e}])});