mirror of
https://github.com/encounter/react-add-to-calendar.git
synced 2026-07-10 21:18:44 -07:00
fixing issue with IE11
This commit is contained in:
Jason Salzman
@@ -1,6 +1,6 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 Jason Salzman
|
||||
Copyright (c) 2016-2017 Jason Salzman
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
SOFTWARE.
|
||||
@@ -88,4 +88,4 @@ The examples are hosted within the docs folder and are ran in the simple add tha
|
||||
|
||||
## License
|
||||
|
||||
Copyright (c) 2016 Jason Salzman. Licensed under MIT license, see [LICENSE](LICENSE) for the full license.
|
||||
Copyright (c) 2016-2017 Jason Salzman. Licensed under MIT license, see [LICENSE](LICENSE) for the full license.
|
||||
+14909
-14857
File diff suppressed because one or more lines are too long
+1
-1
@@ -2,7 +2,7 @@
|
||||
"author": "Jason Salzman",
|
||||
"name": "react-add-to-calendar",
|
||||
"description": "A simple and reusable add to calendar button component for React",
|
||||
"version": "0.0.6",
|
||||
"version": "0.0.7",
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/jasonsalzman/react-add-to-calendar",
|
||||
"repository": {
|
||||
|
||||
+69
-68
@@ -1,24 +1,22 @@
|
||||
import React, {
|
||||
Component,
|
||||
} from 'react';
|
||||
import React, {Component} from 'react';
|
||||
|
||||
import helpersClass from './helpers';
|
||||
const helpers = new helpersClass();
|
||||
|
||||
export default class ReactAddToCalendar extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
optionsOpen: false,
|
||||
this.state = {
|
||||
optionsOpen: false,
|
||||
isCrappyIE: false
|
||||
};
|
||||
};
|
||||
|
||||
this.toggleCalendarDropdown = this.toggleCalendarDropdown.bind(this);
|
||||
this.handleDropdownLinkClick = this.handleDropdownLinkClick.bind(this);
|
||||
}
|
||||
this.toggleCalendarDropdown = this.toggleCalendarDropdown.bind(this);
|
||||
this.handleDropdownLinkClick = this.handleDropdownLinkClick.bind(this);
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
componentWillMount() {
|
||||
let isCrappyIE = false;
|
||||
if (typeof window !== 'undefined' && window.navigator.msSaveOrOpenBlob && window.Blob) {
|
||||
isCrappyIE = true;
|
||||
@@ -28,13 +26,13 @@ export default class ReactAddToCalendar extends React.Component {
|
||||
}
|
||||
|
||||
toggleCalendarDropdown() {
|
||||
let showOptions = !this.state.optionsOpen;
|
||||
let showOptions = !this.state.optionsOpen;
|
||||
|
||||
if (showOptions) {
|
||||
document.addEventListener('click', this.toggleCalendarDropdown, false);
|
||||
} else {
|
||||
document.removeEventListener('click', this.toggleCalendarDropdown);
|
||||
}
|
||||
document.addEventListener('click', this.toggleCalendarDropdown, false);
|
||||
} else {
|
||||
document.removeEventListener('click', this.toggleCalendarDropdown);
|
||||
}
|
||||
|
||||
this.setState({optionsOpen: showOptions});
|
||||
}
|
||||
@@ -43,8 +41,7 @@ export default class ReactAddToCalendar extends React.Component {
|
||||
e.preventDefault();
|
||||
let url = e.currentTarget.getAttribute('href');
|
||||
|
||||
if (this.state.isCrappyIE && (e.currentTarget.getAttribute('class') === 'ical-link' ||
|
||||
e.currentTarget.getAttribute('class') === 'outlook-calendar-link')) {
|
||||
if (this.state.isCrappyIE) {
|
||||
let blob = new Blob([url], {type: 'text/calendar'});
|
||||
window.navigator.msSaveOrOpenBlob(blob, 'download.ics');
|
||||
} else {
|
||||
@@ -63,15 +60,15 @@ export default class ReactAddToCalendar extends React.Component {
|
||||
|
||||
let icon = null;
|
||||
if (self.props.displayItemIcons) {
|
||||
let currentIcon = (currentItem === 'outlook') ? 'windows' : currentItem;
|
||||
let currentIcon = (currentItem === 'outlook')
|
||||
? 'windows'
|
||||
: currentItem;
|
||||
icon = <i className={'fa fa-' + currentIcon}/>;
|
||||
}
|
||||
|
||||
return (
|
||||
<li key={helpers.getRandomKey()}>
|
||||
<a className={currentItem + '-link'} onClick={self.handleDropdownLinkClick}
|
||||
href={helpers.buildUrl(self.props.event, currentItem, self.state.isCrappyIE)}
|
||||
target="_blank">
|
||||
<a className={currentItem + '-link'} onClick={self.handleDropdownLinkClick} href={helpers.buildUrl(self.props.event, currentItem, self.state.isCrappyIE)} target="_blank">
|
||||
{icon}
|
||||
{currentLabel}</a>
|
||||
</li>
|
||||
@@ -97,20 +94,22 @@ export default class ReactAddToCalendar extends React.Component {
|
||||
let buttonIconClass = 'react-add-to-calendar__icon--' + iconPlacement + ' fa fa-';
|
||||
|
||||
if (template[0] === 'caret') {
|
||||
buttonIconClass += (this.state.optionsOpen) ? 'caret-up' : 'caret-down';
|
||||
buttonIconClass += (this.state.optionsOpen)
|
||||
? 'caret-up'
|
||||
: 'caret-down';
|
||||
} else {
|
||||
buttonIconClass += template[0];
|
||||
}
|
||||
|
||||
buttonIcon = <i className={buttonIconClass}/>;
|
||||
buttonLabel = (iconPlacement === 'right') ?
|
||||
(
|
||||
buttonLabel = (iconPlacement === 'right')
|
||||
? (
|
||||
<span>
|
||||
{buttonLabel + ' '}
|
||||
{buttonIcon}
|
||||
</span>
|
||||
) :
|
||||
(
|
||||
)
|
||||
: (
|
||||
<span>
|
||||
{buttonIcon}
|
||||
{' ' + buttonLabel}
|
||||
@@ -118,18 +117,19 @@ export default class ReactAddToCalendar extends React.Component {
|
||||
);
|
||||
}
|
||||
|
||||
let buttonClass = (this.state.optionsOpen) ? this.props.buttonClassClosed + ' ' + this.props.buttonClassOpen : this.props.buttonClassClosed;
|
||||
let buttonClass = (this.state.optionsOpen)
|
||||
? this.props.buttonClassClosed + ' ' + this.props.buttonClassOpen
|
||||
: this.props.buttonClassClosed;
|
||||
|
||||
return (
|
||||
<div className={this.props.buttonWrapperClass}>
|
||||
<a className={buttonClass}
|
||||
onClick={this.toggleCalendarDropdown}>{buttonLabel}</a>
|
||||
<a className={buttonClass} onClick={this.toggleCalendarDropdown}>{buttonLabel}</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
let options = null;
|
||||
render() {
|
||||
let options = null;
|
||||
if (this.state.optionsOpen) {
|
||||
options = this.renderDropdown();
|
||||
}
|
||||
@@ -145,50 +145,51 @@ export default class ReactAddToCalendar extends React.Component {
|
||||
{options}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ReactAddToCalendar.displayName = 'Add To Calendar';
|
||||
|
||||
ReactAddToCalendar.propTypes = {
|
||||
buttonClassClosed: React.PropTypes.string,
|
||||
buttonClassOpen: React.PropTypes.string,
|
||||
buttonLabel: React.PropTypes.string,
|
||||
buttonClassClosed: React.PropTypes.string,
|
||||
buttonClassOpen: React.PropTypes.string,
|
||||
buttonLabel: React.PropTypes.string,
|
||||
buttonTemplate: React.PropTypes.object,
|
||||
buttonWrapperClass: React.PropTypes.string,
|
||||
displayItemIcons: React.PropTypes.bool,
|
||||
dropdownClass: React.PropTypes.string,
|
||||
event: React.PropTypes.shape({
|
||||
title: React.PropTypes.string,
|
||||
description: React.PropTypes.string,
|
||||
location: React.PropTypes.string,
|
||||
startTime: React.PropTypes.string,
|
||||
endTime: React.PropTypes.string
|
||||
}).isRequired,
|
||||
buttonWrapperClass: React.PropTypes.string,
|
||||
displayItemIcons: React.PropTypes.bool,
|
||||
dropdownClass: React.PropTypes.string,
|
||||
event: React.PropTypes.shape({title: React.PropTypes.string, description: React.PropTypes.string, location: React.PropTypes.string, startTime: React.PropTypes.string, endTime: React.PropTypes.string}).isRequired,
|
||||
listItems: React.PropTypes.arrayOf(React.PropTypes.object),
|
||||
rootClass: React.PropTypes.string
|
||||
rootClass: React.PropTypes.string
|
||||
};
|
||||
|
||||
ReactAddToCalendar.defaultProps = {
|
||||
buttonClassClosed: 'react-add-to-calendar__button',
|
||||
buttonClassOpen: 'react-add-to-calendar__button--light',
|
||||
buttonLabel: 'Add to My Calendar',
|
||||
buttonTemplate: { caret: 'right' },
|
||||
buttonWrapperClass: 'react-add-to-calendar__wrapper',
|
||||
displayItemIcons: true,
|
||||
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'
|
||||
},
|
||||
buttonClassClosed: 'react-add-to-calendar__button',
|
||||
buttonClassOpen: 'react-add-to-calendar__button--light',
|
||||
buttonLabel: 'Add to My Calendar',
|
||||
buttonTemplate: {
|
||||
caret: 'right'
|
||||
},
|
||||
buttonWrapperClass: 'react-add-to-calendar__wrapper',
|
||||
displayItemIcons: true,
|
||||
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' },
|
||||
{ yahoo: 'Yahoo' }
|
||||
{
|
||||
apple: 'Apple Calendar'
|
||||
}, {
|
||||
google: 'Google'
|
||||
}, {
|
||||
outlook: 'Outlook'
|
||||
}, {
|
||||
yahoo: 'Yahoo'
|
||||
}
|
||||
],
|
||||
rootClass: 'react-add-to-calendar'
|
||||
};
|
||||
rootClass: 'react-add-to-calendar'
|
||||
};
|
||||
Reference in New Issue
Block a user