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

updating dependencies and fixing errors from deprecated code in the latest react version which resolves #10

Browse Source
This commit is contained in:
Jason Salzman
2017-05-22 01:19:44 -07:00
parent 11dcf3aab0
commit 6b18fc020b
19 changed files with 12805 additions and 4666 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -1
View File
@@ -21,9 +21,10 @@ You’ll need to install React and Moment separately since they are not included
```js
var React = require('react');
var createReactClass = require('create-react-class');
var AddToCalendar = require('react-add-to-calendar');
var Example = React.createClass({
var Example = createReactClass({
displayName: 'Example',
getInitialState: function() {
docs-site/bundle.js
+6076 -3980
View File
File diff suppressed because it is too large Load Diff
docs-site/src/code_example_component.jsx
+23 -16
View File
@@ -1,18 +1,25 @@
import React from 'react'
import React, { Component } from "react";
import PropTypes from "prop-types";
export default React.createClass({
displayName: 'CodeExampleComponent',
propTypes: {
children: React.PropTypes.element,
id: React.PropTypes.number,
title: React.PropTypes.string
},
render () {
return <div key={this.props.id} id={`example-${this.props.id}`} className="example">
<h2 className="example__heading">{this.props.title}</h2>
{this.props.children}
</div>
export default class CodeExampleComponent extends React.Component {
render() {
return (
<div
key={this.props.id}
id={`example-${this.props.id}`}
className="example"
>
<h2 className="example__heading">{this.props.title}</h2>
{this.props.children}
</div>
);
}
})
}
CodeExampleComponent.displayName = "CodeExampleComponent";
CodeExampleComponent.propTypes = {
children: PropTypes.element,
id: PropTypes.number,
title: PropTypes.string
};
docs-site/src/example_components.jsx
+86 -82
View File
@@ -1,89 +1,93 @@
import React from 'react'
import hljs from 'highlight.js'
import Default from './examples/default'
import ChangeLabel from './examples/changeLabel'
import ChangeTemplate from './examples/changeTemplate'
import TextOnlyTemplate from './examples/textOnlyTemplate'
import TextOnlyDropdown from './examples/textOnlyDropdown'
import ChangeDropdownOrder from './examples/changeDropdownOrder'
import RemoveDropdownItem from './examples/removeDropdownItem'
import ChangeDropdownLabels from './examples/changeDropdownLabels'
import CodeExampleComponent from './code_example_component'
import React, { Component } from "react";
import hljs from "highlight.js";
import Default from "./examples/default";
import ChangeLabel from "./examples/changeLabel";
import ChangeTemplate from "./examples/changeTemplate";
import TextOnlyTemplate from "./examples/textOnlyTemplate";
import TextOnlyDropdown from "./examples/textOnlyDropdown";
import ChangeDropdownOrder from "./examples/changeDropdownOrder";
import RemoveDropdownItem from "./examples/removeDropdownItem";
import ChangeDropdownLabels from "./examples/changeDropdownLabels";
import CodeExampleComponent from "./code_example_component";
import 'react-add-to-calendar/dist/react-add-to-calendar.css'
import './style.scss'
import "react-add-to-calendar/dist/react-add-to-calendar.css";
import "./style.scss";
export default React.createClass({
displayName: 'exampleComponents',
const examples = [
{
title: "Default",
component: Default
},
{
title: "Change Button Label",
component: ChangeLabel
},
{
title: "Change Button Template",
component: ChangeTemplate
},
{
title: "Text Only Button Template",
component: TextOnlyTemplate
},
{
title: "Text Only Dropdown Items",
component: TextOnlyDropdown
},
{
title: "Change Dropdown Order",
component: ChangeDropdownOrder
},
{
title: "Remove Dropdown Item",
component: RemoveDropdownItem
},
{
title: "Change Dropdown Labels",
component: ChangeDropdownLabels
}
];
componentDidMount () {
hljs.initHighlightingOnLoad()
},
export default class ExampleComponents extends React.Component {
componentDidMount() {
hljs.initHighlightingOnLoad();
}
examples: [
{
title: 'Default',
component: <Default />
},
{
title: 'Change Button Label',
component: <ChangeLabel />
},
{
title: 'Change Button Template',
component: <ChangeTemplate />
},
{
title: 'Text Only Button Template',
component: <TextOnlyTemplate />
},
{
title: 'Text Only Dropdown Items',
component: <TextOnlyDropdown />
},
{
title: 'Change Dropdown Order',
component: <ChangeDropdownOrder />
},
{
title: 'Remove Dropdown Item',
component: <RemoveDropdownItem />
},
{
title: 'Change Dropdown Labels',
component: <ChangeDropdownLabels />
}
],
renderExamples() {
return examples.map((example, index) => (
<CodeExampleComponent
key={`example-${index}`}
id={index}
title={example.title}
>
{<example.component />}
</CodeExampleComponent>
));
}
renderExamples () {
return this.examples.map((example, index) =>
<CodeExampleComponent key={`example-${index}`} id={index} title={example.title}>
{example.component}
</CodeExampleComponent>
)
},
renderLeftColumn() {
return examples.map((example, index) => (
<li className="examples__navigation-item" key={`link-${index}`}>
<a href={`#example-${index}`}>
{example.title}
</a>
</li>
));
}
renderLeftColumn () {
return this.examples.map((example, index) =>
<li className="examples__navigation-item" key={`link-${index}`}>
<a href={`#example-${index}`}>
{example.title}
</a>
</li>
)
},
render() {
return (
<div>
<h1>Examples</h1>
<ul className="examples__navigation">
{this.renderLeftColumn()}
</ul>
<div className="examples">
{this.renderExamples()}
</div>
</div>
);
}
}
render () {
return (
<div>
<h1>Examples</h1>
<ul className="examples__navigation">
{this.renderLeftColumn()}
</ul>
<div className="examples">
{this.renderExamples()}
</div>
</div>
)
}
})
ExampleComponents.displayName = "exampleComponents";
docs-site/src/examples/changeDropdownLabels.jsx
+51 -51
View File
@@ -1,55 +1,55 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
import React, { Component } from "react";
import AddToCalendar from "react-add-to-calendar";
export default React.createClass({
displayName: 'Change Dropdown Labels',
export default class ChangeDropdownLabels extends React.Component {
render() {
let 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"
};
render () {
let 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'
};
let items = [
{ outlook: "Outlook" },
{ outlookcom: "Outlook.com" },
{ apple: "iCal" },
{ yahoo: "Yahoo!" },
{ google: "Google" }
];
let items = [
{ outlook: 'Outlook' },
{ outlookcom: 'Outlook.com' },
{ apple: 'iCal' },
{ yahoo: 'Yahoo!' },
{ google: 'Google' }
];
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let items = ["}<br />
&nbsp;&nbsp;&nbsp;
{"\{ outlook: 'Outlook' \}"}<br />
&nbsp;&nbsp;&nbsp;
{"\{ outlookcom: 'Outlook.com' \}"}<br />
&nbsp;&nbsp;&nbsp;
{"\{ apple: 'iCal' \}"}<br />
&nbsp;&nbsp;&nbsp;
{"\{ yahoo: 'Yahoo!' \}"}<br />
&nbsp;&nbsp;&nbsp;
{"\{ google: 'Google' \}"}<br />
{"];"}<br /><br />
</code>
<code className="jsx">
{"<AddToCalendar"}<br />
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br />
&nbsp;&nbsp;&nbsp;
{"listItems=\{items\} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} listItems={items} />
</div>
</div>
);
}
}
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let items = ["}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ outlook: 'Outlook' \}"}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ outlookcom: 'Outlook.com' \}"}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ apple: 'iCal' \}"}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ yahoo: 'Yahoo!' \}"}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ google: 'Google' \}"}<br/>
{"];"}<br/><br/>
</code>
<code className="jsx">
{"<AddToCalendar"}<br/>
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br/>
&nbsp;&nbsp;&nbsp;
{"listItems=\{items\} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} listItems={items} />
</div>
</div>
);
}
})
ChangeDropdownLabels.displayName = "Change Dropdown Labels";
docs-site/src/examples/changeDropdownOrder.jsx
+51 -51
View File
@@ -1,55 +1,55 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
import React, { Component } from "react";
import AddToCalendar from "react-add-to-calendar";
export default React.createClass({
displayName: 'Change Dropdown Order',
export default class ChangeDropdownOrder extends React.Component {
render() {
let 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"
};
render () {
let 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'
};
let items = [
{ outlook: "Outlook" },
{ outlookcom: "Outlook.com" },
{ apple: "Apple Calendar" },
{ yahoo: "Yahoo" },
{ google: "Google" }
];
let items = [
{ outlook: 'Outlook' },
{ outlookcom: 'Outlook.com' },
{ apple: 'Apple Calendar' },
{ yahoo: 'Yahoo' },
{ google: 'Google' }
];
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let items = ["}<br />
&nbsp;&nbsp;&nbsp;
{"\{ outlook: 'Outlook' \}"}<br />
&nbsp;&nbsp;&nbsp;
{"\{ outlookcom: 'Outlook.com' \}"}<br />
&nbsp;&nbsp;&nbsp;
{"\{ apple: 'Apple Calendar' \}"}<br />
&nbsp;&nbsp;&nbsp;
{"\{ yahoo: 'Yahoo' \}"}<br />
&nbsp;&nbsp;&nbsp;
{"\{ google: 'Google' \}"}<br />
{"];"}<br /><br />
</code>
<code className="jsx">
{"<AddToCalendar"}<br />
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br />
&nbsp;&nbsp;&nbsp;
{"listItems=\{items\} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} listItems={items} />
</div>
</div>
);
}
}
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let items = ["}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ outlook: 'Outlook' \}"}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ outlookcom: 'Outlook.com' \}"}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ apple: 'Apple Calendar' \}"}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ yahoo: 'Yahoo' \}"}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ google: 'Google' \}"}<br/>
{"];"}<br/><br/>
</code>
<code className="jsx">
{"<AddToCalendar"}<br/>
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br/>
&nbsp;&nbsp;&nbsp;
{"listItems=\{items\} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} listItems={items} />
</div>
</div>
);
}
})
ChangeDropdownOrder.displayName = "Change Dropdown Order";
docs-site/src/examples/changeLabel.jsx
+30 -30
View File
@@ -1,33 +1,33 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
import React, { Component } from "react";
import AddToCalendar from "react-add-to-calendar";
export default React.createClass({
displayName: 'ChangeLabel',
export default class ChangeLabel extends React.Component {
render() {
let 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"
};
render () {
let 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'
};
return (
<div className="row">
<pre className="column example__code">
<code className="jsx">
{"<AddToCalendar"}<br />
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br />
&nbsp;&nbsp;&nbsp;
{'buttonLabel="Put on my calendar" />'}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} buttonLabel="Put on my calendar" />
</div>
</div>
);
}
}
return (
<div className="row">
<pre className="column example__code">
<code className="jsx">
{"<AddToCalendar"}<br/>
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br/>
&nbsp;&nbsp;&nbsp;
{"buttonLabel=\"Put on my calendar\" />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} buttonLabel="Put on my calendar" />
</div>
</div>
);
}
})
ChangeLabel.displayName = "ChangeLabel";
docs-site/src/examples/changeTemplate.jsx
+40 -40
View File
@@ -1,44 +1,44 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
import React, { Component } from "react";
import AddToCalendar from "react-add-to-calendar";
export default React.createClass({
displayName: 'ChangeTemplate',
export default class ChangeTemplate extends React.Component {
render() {
let 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"
};
render () {
let 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'
};
let icon = { "calendar-plus-o": "left" };
let icon = { 'calendar-plus-o': 'left' };
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let icon = \{ 'calendar-plus-o': 'left' \};"}<br /><br />
{"/*"}<br />
&nbsp;&nbsp;&nbsp;
{"object property can be any Font Awesome icon"}<br />
&nbsp;&nbsp;&nbsp;
{"and value can be 'left' or 'right'"}<br />
{"*/"}<br /><br />
</code>
<code className="jsx">
{"<AddToCalendar"}<br />
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br />
&nbsp;&nbsp;&nbsp;
{"buttonTemplate=\{icon\} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} buttonTemplate={icon} />
</div>
</div>
);
}
}
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let icon = \{ 'calendar-plus-o': 'left' \};"}<br/><br/>
{"/*"}<br/>
&nbsp;&nbsp;&nbsp;
{"object property can be any Font Awesome icon"}<br/>
&nbsp;&nbsp;&nbsp;
{"and value can be 'left' or 'right'"}<br/>
{"*/"}<br/><br/>
</code>
<code className="jsx">
{"<AddToCalendar"}<br/>
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br/>
&nbsp;&nbsp;&nbsp;
{"buttonTemplate=\{icon\} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} buttonTemplate={icon} />
</div>
</div>
);
}
})
ChangeTemplate.displayName = "ChangeTemplate";
docs-site/src/examples/default.jsx
+49 -46
View File
@@ -1,49 +1,52 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
import React, { Component } from "react";
import AddToCalendar from "react-add-to-calendar";
export default React.createClass({
displayName: 'Default',
export default class Default extends React.Component {
render() {
let 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"
};
render () {
let 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'
};
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let event = \{"}<br />
&nbsp;&nbsp;&nbsp;
{" title: 'Sample Event',"}<br />
&nbsp;&nbsp;&nbsp;
{
" description: 'This is the sample event provided as an example only',"
}
<br />
&nbsp;&nbsp;&nbsp;
{" location: 'Portland, OR',"}<br />
&nbsp;&nbsp;&nbsp;
{" startTime: '2016-09-16T20:15:00-04:00',"}<br />
&nbsp;&nbsp;&nbsp;
{" endTime: '2016-09-16T21:45:00-04:00'"}<br />
{"\};"}<br /><br />
{"/*"}<br />
&nbsp;&nbsp;&nbsp;
{"startTime and endTime can use any datetime"}<br />
&nbsp;&nbsp;&nbsp;
{"string that is acceptable by MomentJS"}<br />
{"*/"}
</code>
<code className="jsx">
{"<AddToCalendar event={event} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} />
</div>
</div>
);
}
}
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let event = \{"}<br/>
&nbsp;&nbsp;&nbsp;
{" title: 'Sample Event',"}<br/>
&nbsp;&nbsp;&nbsp;
{" description: 'This is the sample event provided as an example only',"}<br/>
&nbsp;&nbsp;&nbsp;
{" location: 'Portland, OR',"}<br/>
&nbsp;&nbsp;&nbsp;
{" startTime: '2016-09-16T20:15:00-04:00',"}<br/>
&nbsp;&nbsp;&nbsp;
{" endTime: '2016-09-16T21:45:00-04:00'"}<br/>
{"\};"}<br/><br/>
{"/*"}<br/>
&nbsp;&nbsp;&nbsp;
{"startTime and endTime can use any datetime"}<br/>
&nbsp;&nbsp;&nbsp;
{"string that is acceptable by MomentJS"}<br/>
{"*/"}
</code>
<code className="jsx">
{"<AddToCalendar event={event} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} />
</div>
</div>
);
}
})
Default.displayName = "Default";
docs-site/src/examples/removeDropdownItem.jsx
+39 -42
View File
@@ -1,46 +1,43 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
import React, { Component } from "react";
import AddToCalendar from "react-add-to-calendar";
export default React.createClass({
displayName: 'Remove Dropdown Item',
export default class RemoveDropdownItem extends React.Component {
render() {
let 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"
};
render () {
let 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'
};
let items = [{ outlook: "Outlook" }, { google: "Google" }];
let items = [
{ outlook: 'Outlook' },
{ google: 'Google' }
];
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let items = ["}<br />
&nbsp;&nbsp;&nbsp;
{"\{ outlook: 'Outlook' \}"}<br />
&nbsp;&nbsp;&nbsp;
{"\{ google: 'Google' \}"}<br />
{"];"}<br /><br />
</code>
<code className="jsx">
{"<AddToCalendar"}<br />
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br />
&nbsp;&nbsp;&nbsp;
{"listItems=\{items\} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} listItems={items} />
</div>
</div>
);
}
}
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let items = ["}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ outlook: 'Outlook' \}"}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ google: 'Google' \}"}<br/>
{"];"}<br/><br/>
</code>
<code className="jsx">
{"<AddToCalendar"}<br/>
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br/>
&nbsp;&nbsp;&nbsp;
{"listItems=\{items\} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} listItems={items} />
</div>
</div>
);
}
})
RemoveDropdownItem.displayName = "Remove Dropdown Item";
docs-site/src/examples/textOnlyDropdown.jsx
+30 -30
View File
@@ -1,33 +1,33 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
import React, { Component } from "react";
import AddToCalendar from "react-add-to-calendar";
export default React.createClass({
displayName: 'TextOnlyDropdown',
export default class TextOnlyDropdown extends React.Component {
render() {
let 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"
};
render () {
let 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'
};
return (
<div className="row">
<pre className="column example__code">
<code className="jsx">
{"<AddToCalendar"}<br />
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br />
&nbsp;&nbsp;&nbsp;
{"displayItemIcons=\{false\} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} displayItemIcons={false} />
</div>
</div>
);
}
}
return (
<div className="row">
<pre className="column example__code">
<code className="jsx">
{"<AddToCalendar"}<br/>
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br/>
&nbsp;&nbsp;&nbsp;
{"displayItemIcons=\{false\} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} displayItemIcons={false} />
</div>
</div>
);
}
})
TextOnlyDropdown.displayName = "TextOnlyDropdown";
docs-site/src/examples/textOnlyTemplate.jsx
+34 -34
View File
@@ -1,38 +1,38 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
import React, { Component } from "react";
import AddToCalendar from "react-add-to-calendar";
export default React.createClass({
displayName: 'TextOnlyTemplate',
export default class TextOnlyTemplate extends React.Component {
render() {
let 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"
};
render () {
let 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'
};
let icon = { textOnly: "none" };
let icon = { textOnly: 'none' };
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let icon = \{ textOnly: 'none' \};"}<br /><br />
</code>
<code className="jsx">
{"<AddToCalendar"}<br />
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br />
&nbsp;&nbsp;&nbsp;
{"buttonTemplate=\{icon\} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} buttonTemplate={icon} />
</div>
</div>
);
}
}
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let icon = \{ textOnly: 'none' \};"}<br/><br/>
</code>
<code className="jsx">
{"<AddToCalendar"}<br/>
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br/>
&nbsp;&nbsp;&nbsp;
{"buttonTemplate=\{icon\} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} buttonTemplate={icon} />
</div>
</div>
);
}
})
TextOnlyTemplate.displayName = "TextOnlyTemplate";
docs-site/src/hero_example.jsx
+8 -8
View File
@@ -1,10 +1,10 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
import React, { Component } from "react";
import AddToCalendar from "react-add-to-calendar";
export default React.createClass({
displayName: 'HeroExample',
render () {
return <AddToCalendar buttonTemplate={{'calendar-plus-o': 'left'}}/>
export default class HeroExample extends React.Component {
render() {
return <AddToCalendar buttonTemplate={{ "calendar-plus-o": "left" }} />;
}
})
}
HeroExample.displayName = "HeroExample";
docs-site/src/root.jsx
+40 -19
View File
@@ -1,11 +1,9 @@
import React from 'react'
import ExampleComponents from './example_components.jsx'
import HeroExample from './hero_example.jsx'
import React, { Component } from "react";
import ExampleComponents from "./example_components.jsx";
import HeroExample from "./hero_example.jsx";
export default React.createClass({
displayName: 'Root',
render () {
export default class Root extends React.Component {
render() {
return (
<div>
<div className="hero">
@@ -19,7 +17,7 @@ export default React.createClass({
</a>
</div>
<div className="hero__example">
<HeroExample />
<HeroExample />
</div>
</div>
</div>
@@ -27,35 +25,58 @@ export default React.createClass({
<h1>React Add to Calendar Button</h1>
<p>
<a href="https://npmjs.org/package/react-add-to-calendar">
<img src="https://badge.fury.io/js/react-add-to-calendar.svg" className="badge" />
<img
src="https://badge.fury.io/js/react-add-to-calendar.svg"
className="badge"
/>
</a>&nbsp;&nbsp;
<a href="https://travis-ci.org/jasonsalzman/react-add-to-calendar">
<img src="https://travis-ci.org/jasonsalzman/react-add-to-calendar.svg?branch=master" className="badge" />
<img
src="https://travis-ci.org/jasonsalzman/react-add-to-calendar.svg?branch=master"
className="badge"
/>
</a>&nbsp;&nbsp;
<a href="https://david-dm.org/jasonsalzman/react-add-to-calendar">
<img src="https://img.shields.io/david/strongloop/express.svg?maxAge=2592000" className="badge" />
<img
src="https://img.shields.io/david/strongloop/express.svg?maxAge=2592000"
className="badge"
/>
</a>&nbsp;&nbsp;
<a href="https://david-dm.org/jasonsalzman/react-add-to-calendar">
<img src="https://img.shields.io/david/peer/webcomponents/generator-element.svg?maxAge=2592000" className="badge" />
<img
src="https://img.shields.io/david/peer/webcomponents/generator-element.svg?maxAge=2592000"
className="badge"
/>
</a>&nbsp;&nbsp;
<a href={'https://npmjs.org/package/react-add-to-calendar'}>
<img src="https://img.shields.io/npm/dm/react-add-to-calendar.svg" className="badge" />
<a href={"https://npmjs.org/package/react-add-to-calendar"}>
<img
src="https://img.shields.io/npm/dm/react-add-to-calendar.svg"
className="badge"
/>
</a>
</p>
<p>A simple, customizable, and reusable Add to Calendar button component for React.</p>
<p>
A simple, customizable, and reusable Add to Calendar button component for React.
</p>
<h2>Installation</h2>
<p>The package can be installed via NPM:</p>
<p><code>npm install react-add-to-calendar --save</code></p>
</div>
<div className="wrapper">
<ExampleComponents/>
<ExampleComponents />
</div>
<a href="https://github.com/jasonsalzman/react-add-to-calendar/">
<img className="github-ribbon" src="images/ribbon.png" alt="Fork me on GitHub" />
<img
className="github-ribbon"
src="images/ribbon.png"
alt="Fork me on GitHub"
/>
</a>
</div>
)
);
}
})
}
Root.displayName = "Root";
karma.conf.js
+2 -2
View File
@@ -56,7 +56,7 @@ module.exports = function(config) {
{
test: /\.js?$/,
include: path.resolve(__dirname, 'src'),
loader: 'isparta'
loader: 'istanbul-instrumenter'
}
]
},
@@ -127,4 +127,4 @@ module.exports = function(config) {
// how many browser should be started simultaneous
concurrency: Infinity
})
}
}
package.json
+49 -46
View File
@@ -27,69 +27,72 @@
"react-component"
],
"devDependencies": {
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-airbnb": "^2.0.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-airbnb": "^2.2.3",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"chai": "^3.5.0",
"codecov.io": "^0.1.6",
"css-loader": "^0.23.0",
"enzyme": "^2.4.0",
"eslint": "^1.10.3",
"eslint-config-standard": "^4.4.0",
"eslint-plugin-promise": "^1.1.0",
"eslint-plugin-react": "^3.14.0",
"eslint-plugin-standard": "^1.3.2",
"express": "^4.13.3",
"codecov": "^2.2.0",
"create-react-class": "^15.5.3",
"css-loader": "^0.28.2",
"enzyme": "^2.8.2",
"eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-node": "^4.2.2",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.0.1",
"eslint-plugin-standard": "^3.0.1",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^1.0.1",
"grunt": "1.0.1",
"grunt-babel": "^6.0.0",
"grunt-cli": "^1.2.0",
"grunt-contrib-sass": "1.0.0",
"grunt-contrib-watch": "1.0.0",
"grunt-eslint": "^17.3.2",
"grunt-eslint": "^19.0.0",
"grunt-karma": "^2.0.0",
"grunt-scss-lint": "^0.3.8",
"grunt-webpack": "^1.0.11",
"highlight.js": "^9.0.0",
"isparta-loader": "^2.0.0",
"jsdom": "^9.6.0",
"karma": "^1.2.0",
"grunt-scss-lint": "^0.5.0",
"grunt-webpack": "^1.0.18",
"highlight.js": "^9.11.0",
"istanbul-instrumenter-loader": "^2.0.0",
"jsdom": "^9.12.0",
"karma": "^1.7.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.0.0",
"karma-firefox-launcher": "^1.0.0",
"karma-mocha": "^1.0.1",
"karma-chrome-launcher": "^2.1.1",
"karma-coverage": "^1.1.1",
"karma-firefox-launcher": "^1.0.1",
"karma-mocha": "^1.3.0",
"karma-safari-launcher": "^1.0.0",
"karma-sinon": "^1.0.5",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0",
"lodash": "^4.3.0",
"mocha": "^3.0.2",
"karma-webpack": "^1.8.1",
"lodash": "^4.17.4",
"mocha": "^3.4.1",
"mocha-jsdom": "^1.1.0",
"node-sass": "^3.4.2",
"react": "^15.0.0",
"react-addons-test-utils": "^15.0.0",
"react-docgen": "^2.7.0",
"react-dom": "^15.0.0",
"node-sass": "^3.13.1",
"prop-types": "^15.5.10",
"react": "^15.5.4",
"react-docgen": "^2.15.0",
"react-dom": "^15.5.4",
"react-transform-hmr": "^1.0.4",
"sass-loader": "^4.0.0",
"sinon": "^1.15.4",
"style-loader": "^0.13.1",
"webpack": "^1.13.0",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.10.0"
"sass-loader": "^4.1.1",
"sinon": "^1.17.7",
"style-loader": "^0.18.0",
"webpack": "^1.15.0",
"webpack-dev-middleware": "^1.10.2",
"webpack-dev-server": "^1.16.4",
"webpack-hot-middleware": "^2.18.0"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0",
"react-dom": "^0.14.0 || ^15.0.0"
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"dependencies": {
"moment": "^2.15.1"
"moment": "^2.18.1"
},
"scripts": {
"build": "NODE_ENV=production grunt build",
@@ -97,6 +100,6 @@
"test": "NODE_ENV=test grunt travis",
"eslint": "eslint **/*.js",
"prepublish": "npm run build",
"codecov": "cat coverage/*/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js"
"codecov": "cat coverage/*/lcov.info | ./node_modules/codecov/bin/codecov"
}
}
}
src/ReactAddToCalendar.js
+172 -158
View File
@@ -1,194 +1,208 @@
import React, {
Component,
} from 'react';
import React, { Component } from "react";
import PropTypes from "prop-types";
import helpersClass from './helpers';
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() {
let isCrappyIE = false;
if (typeof window !== 'undefined' && window.navigator.msSaveOrOpenBlob && window.Blob) {
isCrappyIE = true;
}
this.setState({isCrappyIE: isCrappyIE});
componentWillMount() {
let isCrappyIE = false;
if (
typeof window !== "undefined" &&
window.navigator.msSaveOrOpenBlob &&
window.Blob
) {
isCrappyIE = true;
}
toggleCalendarDropdown() {
let showOptions = !this.state.optionsOpen;
this.setState({ isCrappyIE: isCrappyIE });
}
if (showOptions) {
document.addEventListener('click', this.toggleCalendarDropdown, false);
} else {
document.removeEventListener('click', this.toggleCalendarDropdown);
}
toggleCalendarDropdown() {
let showOptions = !this.state.optionsOpen;
this.setState({optionsOpen: showOptions});
if (showOptions) {
document.addEventListener("click", this.toggleCalendarDropdown, false);
} else {
document.removeEventListener("click", this.toggleCalendarDropdown);
}
handleDropdownLinkClick(e) {
e.preventDefault();
let url = e.currentTarget.getAttribute('href');
this.setState({ optionsOpen: showOptions });
}
if (this.state.isCrappyIE) {
let blob = new Blob([url], {type: 'text/calendar'});
window.navigator.msSaveOrOpenBlob(blob, 'download.ics');
} else {
window.open(url, '_blank');
}
handleDropdownLinkClick(e) {
e.preventDefault();
let url = e.currentTarget.getAttribute("href");
this.toggleCalendarDropdown();
if (this.state.isCrappyIE) {
let blob = new Blob([url], { type: "text/calendar" });
window.navigator.msSaveOrOpenBlob(blob, "download.ics");
} else {
window.open(url, "_blank");
}
renderDropdown() {
let self = this;
this.toggleCalendarDropdown();
}
let items = this.props.listItems.map((listItem) => {
let currentItem = Object.keys(listItem)[0];
let currentLabel = listItem[currentItem];
renderDropdown() {
let self = this;
let icon = null;
if (self.props.displayItemIcons) {
let currentIcon = (currentItem === 'outlook' || currentItem === 'outlookcom') ? 'windows' : currentItem;
icon = <i className={'fa fa-' + currentIcon}/>;
}
let items = this.props.listItems.map(listItem => {
let currentItem = Object.keys(listItem)[0];
let currentLabel = listItem[currentItem];
return (
<li key={helpers.getRandomKey()}>
<a className={currentItem + '-link'} onClick={self.handleDropdownLinkClick}
href={helpers.buildUrl(self.props.event, currentItem, self.state.isCrappyIE)}
target="_blank">
{icon}
{currentLabel}</a>
</li>
);
});
let icon = null;
if (self.props.displayItemIcons) {
let currentIcon = currentItem === "outlook" ||
currentItem === "outlookcom"
? "windows"
: currentItem;
icon = <i className={"fa fa-" + currentIcon} />;
}
return (
<div className={this.props.dropdownClass}>
<ul>
{items}
</ul>
</div>
);
return (
<li key={helpers.getRandomKey()}>
<a
className={currentItem + "-link"}
onClick={self.handleDropdownLinkClick}
href={helpers.buildUrl(
self.props.event,
currentItem,
self.state.isCrappyIE
)}
target="_blank"
>
{icon}
{currentLabel}
</a>
</li>
);
});
return (
<div className={this.props.dropdownClass}>
<ul>
{items}
</ul>
</div>
);
}
renderButton() {
let buttonLabel = this.props.buttonLabel;
let buttonIcon = null;
let template = Object.keys(this.props.buttonTemplate);
if (template[0] !== "textOnly") {
let iconPlacement = this.props.buttonTemplate[template];
let buttonIconClass =
"react-add-to-calendar__icon--" + iconPlacement + " fa fa-";
if (template[0] === "caret") {
buttonIconClass += this.state.optionsOpen ? "caret-up" : "caret-down";
} else {
buttonIconClass += template[0];
}
buttonIcon = <i className={buttonIconClass} />;
buttonLabel = iconPlacement === "right"
? <span>
{buttonLabel + " "}
{buttonIcon}
</span>
: <span>
{buttonIcon}
{" " + buttonLabel}
</span>;
}
renderButton() {
let buttonLabel = this.props.buttonLabel;
let buttonIcon = null;
let template = Object.keys(this.props.buttonTemplate);
let buttonClass = this.state.optionsOpen
? this.props.buttonClassClosed + " " + this.props.buttonClassOpen
: this.props.buttonClassClosed;
if (template[0] !== 'textOnly') {
let iconPlacement = this.props.buttonTemplate[template];
let buttonIconClass = 'react-add-to-calendar__icon--' + iconPlacement + ' fa fa-';
return (
<div className={this.props.buttonWrapperClass}>
<a className={buttonClass} onClick={this.toggleCalendarDropdown}>
{buttonLabel}
</a>
</div>
);
}
if (template[0] === 'caret') {
buttonIconClass += (this.state.optionsOpen) ? 'caret-up' : 'caret-down';
} else {
buttonIconClass += template[0];
}
buttonIcon = <i className={buttonIconClass}/>;
buttonLabel = (iconPlacement === 'right') ?
(
<span>
{buttonLabel + ' '}
{buttonIcon}
</span>
) :
(
<span>
{buttonIcon}
{' ' + buttonLabel}
</span>
);
}
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>
</div>
);
render() {
let options = null;
if (this.state.optionsOpen) {
options = this.renderDropdown();
}
render() {
let options = null;
if (this.state.optionsOpen) {
options = this.renderDropdown();
}
let addToCalendarBtn = null;
if (this.props.event) {
addToCalendarBtn = this.renderButton();
}
let addToCalendarBtn = null;
if (this.props.event) {
addToCalendarBtn = this.renderButton();
}
return (
<div className={this.props.rootClass}>
{addToCalendarBtn}
{options}
</div>
);
}
return (
<div className={this.props.rootClass}>
{addToCalendarBtn}
{options}
</div>
);
}
}
ReactAddToCalendar.displayName = 'Add To Calendar';
ReactAddToCalendar.displayName = "Add To Calendar";
ReactAddToCalendar.propTypes = {
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,
listItems: React.PropTypes.arrayOf(React.PropTypes.object),
rootClass: React.PropTypes.string
buttonClassClosed: PropTypes.string,
buttonClassOpen: PropTypes.string,
buttonLabel: PropTypes.string,
buttonTemplate: PropTypes.object,
buttonWrapperClass: PropTypes.string,
displayItemIcons: PropTypes.bool,
dropdownClass: PropTypes.string,
event: PropTypes.shape({
title: PropTypes.string,
description: PropTypes.string,
location: PropTypes.string,
startTime: PropTypes.string,
endTime: PropTypes.string
}).isRequired,
listItems: PropTypes.arrayOf(PropTypes.object),
rootClass: 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'
},
listItems: [
{ apple: 'Apple Calendar' },
{ google: 'Google' },
{ outlook: 'Outlook' },
{ outlookcom: 'Outlook.com' },
{ yahoo: 'Yahoo' },
],
rootClass: 'react-add-to-calendar'
};
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" },
{ outlookcom: "Outlook.com" },
{ yahoo: "Yahoo" }
],
rootClass: "react-add-to-calendar"
};
test/add-to-calendar_test.js
+34 -30
View File
@@ -1,38 +1,42 @@
import React from 'react'
import ReactDOM from 'react-dom'
import TestUtils from 'react-addons-test-utils'
import AddToCalendar from '../src/ReactAddToCalendar.js'
import React from "react";
import ReactDOM from "react-dom";
import TestUtils from "react-dom/test-utils";
import createReactClass from "create-react-class";
import AddToCalendar from "../src/ReactAddToCalendar.js";
describe('AddToCalendar', () => {
it('should show the options menu when the button is clicked', () => {
describe("AddToCalendar", () => {
it("should show the options menu when the button is clicked", () => {
var 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'
}
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"
};
var addToCalendar = TestUtils.renderIntoDocument(
<AddToCalendar event={event} />
)
var button = TestUtils.findRenderedDOMComponentWithTag(addToCalendar, 'a')
TestUtils.Simulate.click(ReactDOM.findDOMNode(button))
var dropdown = TestUtils.findRenderedDOMComponentWithClass(addToCalendar, 'react-add-to-calendar__dropdown')
expect(dropdown).to.exist
})
);
var button = TestUtils.findRenderedDOMComponentWithTag(addToCalendar, "a");
TestUtils.Simulate.click(ReactDOM.findDOMNode(button));
var dropdown = TestUtils.findRenderedDOMComponentWithClass(
addToCalendar,
"react-add-to-calendar__dropdown"
);
expect(dropdown).to.exist;
});
it('should mount and unmount properly', done => {
var TestComponent = React.createClass({
displayName: 'TestComponent',
it("should mount and unmount properly", done => {
var TestComponent = createReactClass({
displayName: "TestComponent",
getInitialState () {
return { mounted: true }
getInitialState() {
return { mounted: true };
},
render () {
return this.state.mounted ? <AddToCalendar /> : null
render() {
return this.state.mounted ? <AddToCalendar /> : null;
}
})
var element = TestUtils.renderIntoDocument(<TestComponent />)
element.setState({ mounted: false }, done)
})
})
});
var element = TestUtils.renderIntoDocument(<TestComponent />);
element.setState({ mounted: false }, done);
});
});
yarn.lock
+5989
View File
File diff suppressed because it is too large Load Diff