encounter/react-add-to-calendar
0
0
Fork 0
mirror of https://github.com/encounter/react-add-to-calendar.git synced 2026-07-10 21:18:44 -07:00
Code Issues Packages Projects Releases Wiki Activity

fixing build

Browse Source
This commit is contained in:
Jason Salzman
2017-01-23 19:41:01 -08:00
parent b4a1337142
commit 7f4d7bd18f
3 changed files with 1268 additions and 1213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-site/bundle.js
+1187 -1130
View File
File diff suppressed because it is too large Load Diff
package.json
+1 -1
View File
@@ -2,7 +2,7 @@
"author": "Jason Salzman", "author": "Jason Salzman",
"name": "react-add-to-calendar", "name": "react-add-to-calendar",
"description": "A simple and reusable add to calendar button component for React", "description": "A simple and reusable add to calendar button component for React",
"version": "0.0.7", "version": "0.0.8",
"license": "MIT", "license": "MIT",
"homepage": "https://github.com/jasonsalzman/react-add-to-calendar", "homepage": "https://github.com/jasonsalzman/react-add-to-calendar",
"repository": { "repository": {
src/ReactAddToCalendar.js
+66 -68
View File
@@ -1,22 +1,24 @@
import React, {Component} from 'react'; import React, {
Component,
} from 'react';
import helpersClass from './helpers'; import helpersClass from './helpers';
const helpers = new helpersClass(); const helpers = new helpersClass();
export default class ReactAddToCalendar extends React.Component { export default class ReactAddToCalendar extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
optionsOpen: false, optionsOpen: false,
isCrappyIE: false isCrappyIE: false
}; };
this.toggleCalendarDropdown = this.toggleCalendarDropdown.bind(this); this.toggleCalendarDropdown = this.toggleCalendarDropdown.bind(this);
this.handleDropdownLinkClick = this.handleDropdownLinkClick.bind(this); this.handleDropdownLinkClick = this.handleDropdownLinkClick.bind(this);
} }
componentWillMount() { componentWillMount() {
let isCrappyIE = false; let isCrappyIE = false;
if (typeof window !== 'undefined' && window.navigator.msSaveOrOpenBlob && window.Blob) { if (typeof window !== 'undefined' && window.navigator.msSaveOrOpenBlob && window.Blob) {
isCrappyIE = true; isCrappyIE = true;
@@ -26,13 +28,13 @@ export default class ReactAddToCalendar extends React.Component {
} }
toggleCalendarDropdown() { toggleCalendarDropdown() {
let showOptions = !this.state.optionsOpen; let showOptions = !this.state.optionsOpen;
if (showOptions) { if (showOptions) {
document.addEventListener('click', this.toggleCalendarDropdown, false); document.addEventListener('click', this.toggleCalendarDropdown, false);
} else { } else {
document.removeEventListener('click', this.toggleCalendarDropdown); document.removeEventListener('click', this.toggleCalendarDropdown);
} }
this.setState({optionsOpen: showOptions}); this.setState({optionsOpen: showOptions});
} }
@@ -60,15 +62,15 @@ export default class ReactAddToCalendar extends React.Component {
let icon = null; let icon = null;
if (self.props.displayItemIcons) { if (self.props.displayItemIcons) {
let currentIcon = (currentItem === 'outlook') let currentIcon = (currentItem === 'outlook') ? 'windows' : currentItem;
? 'windows'
: currentItem;
icon = <i className={'fa fa-' + currentIcon}/>; icon = <i className={'fa fa-' + currentIcon}/>;
} }
return ( return (
<li key={helpers.getRandomKey()}> <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} {icon}
{currentLabel}</a> {currentLabel}</a>
</li> </li>
@@ -94,22 +96,20 @@ export default class ReactAddToCalendar extends React.Component {
let buttonIconClass = 'react-add-to-calendar__icon--' + iconPlacement + ' fa fa-'; let buttonIconClass = 'react-add-to-calendar__icon--' + iconPlacement + ' fa fa-';
if (template[0] === 'caret') { if (template[0] === 'caret') {
buttonIconClass += (this.state.optionsOpen) buttonIconClass += (this.state.optionsOpen) ? 'caret-up' : 'caret-down';
? 'caret-up'
: 'caret-down';
} else { } else {
buttonIconClass += template[0]; buttonIconClass += template[0];
} }
buttonIcon = <i className={buttonIconClass}/>; buttonIcon = <i className={buttonIconClass}/>;
buttonLabel = (iconPlacement === 'right') buttonLabel = (iconPlacement === 'right') ?
? ( (
<span> <span>
{buttonLabel + ' '} {buttonLabel + ' '}
{buttonIcon} {buttonIcon}
</span> </span>
) ) :
: ( (
<span> <span>
{buttonIcon} {buttonIcon}
{' ' + buttonLabel} {' ' + buttonLabel}
@@ -117,19 +117,18 @@ export default class ReactAddToCalendar extends React.Component {
); );
} }
let buttonClass = (this.state.optionsOpen) let buttonClass = (this.state.optionsOpen) ? this.props.buttonClassClosed + ' ' + this.props.buttonClassOpen : this.props.buttonClassClosed;
? this.props.buttonClassClosed + ' ' + this.props.buttonClassOpen
: this.props.buttonClassClosed;
return ( return (
<div className={this.props.buttonWrapperClass}> <div className={this.props.buttonWrapperClass}>
<a className={buttonClass} onClick={this.toggleCalendarDropdown}>{buttonLabel}</a> <a className={buttonClass}
onClick={this.toggleCalendarDropdown}>{buttonLabel}</a>
</div> </div>
); );
} }
render() { render() {
let options = null; let options = null;
if (this.state.optionsOpen) { if (this.state.optionsOpen) {
options = this.renderDropdown(); options = this.renderDropdown();
} }
@@ -145,51 +144,50 @@ export default class ReactAddToCalendar extends React.Component {
{options} {options}
</div> </div>
); );
} }
} }
ReactAddToCalendar.displayName = 'Add To Calendar'; ReactAddToCalendar.displayName = 'Add To Calendar';
ReactAddToCalendar.propTypes = { ReactAddToCalendar.propTypes = {
buttonClassClosed: React.PropTypes.string, buttonClassClosed: React.PropTypes.string,
buttonClassOpen: React.PropTypes.string, buttonClassOpen: React.PropTypes.string,
buttonLabel: React.PropTypes.string, buttonLabel: React.PropTypes.string,
buttonTemplate: React.PropTypes.object, buttonTemplate: React.PropTypes.object,
buttonWrapperClass: React.PropTypes.string, buttonWrapperClass: React.PropTypes.string,
displayItemIcons: React.PropTypes.bool, displayItemIcons: React.PropTypes.bool,
dropdownClass: React.PropTypes.string, 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, 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), listItems: React.PropTypes.arrayOf(React.PropTypes.object),
rootClass: React.PropTypes.string rootClass: React.PropTypes.string
}; };
ReactAddToCalendar.defaultProps = { ReactAddToCalendar.defaultProps = {
buttonClassClosed: 'react-add-to-calendar__button', buttonClassClosed: 'react-add-to-calendar__button',
buttonClassOpen: 'react-add-to-calendar__button--light', buttonClassOpen: 'react-add-to-calendar__button--light',
buttonLabel: 'Add to My Calendar', buttonLabel: 'Add to My Calendar',
buttonTemplate: { buttonTemplate: { caret: 'right' },
caret: 'right' buttonWrapperClass: 'react-add-to-calendar__wrapper',
}, displayItemIcons: true,
buttonWrapperClass: 'react-add-to-calendar__wrapper', dropdownClass: 'react-add-to-calendar__dropdown',
displayItemIcons: true, event: {
dropdownClass: 'react-add-to-calendar__dropdown', title: 'Sample Event',
event: { description: 'This is the sample event provided as an example only',
title: 'Sample Event', location: 'Portland, OR',
description: 'This is the sample event provided as an example only', startTime: '2016-09-16T20:15:00-04:00',
location: 'Portland, OR', endTime: '2016-09-16T21:45:00-04:00'
startTime: '2016-09-16T20:15:00-04:00', },
endTime: '2016-09-16T21:45:00-04:00'
},
listItems: [ listItems: [
{ { apple: 'Apple Calendar' },
apple: 'Apple Calendar' { google: 'Google' },
}, { { outlook: 'Outlook' },
google: 'Google' { yahoo: 'Yahoo' }
}, {
outlook: 'Outlook'
}, {
yahoo: 'Yahoo'
}
], ],
rootClass: 'react-add-to-calendar' rootClass: 'react-add-to-calendar'
}; };