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