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

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
+2 -1
View File
@@ -21,9 +21,10 @@ Youll 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() {
+6075 -3979
View File
File diff suppressed because it is too large Load Diff
+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({ 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"
}, >
<h2 className="example__heading">{this.props.title}</h2>
render () { {this.props.children}
return <div key={this.props.id} id={`example-${this.props.id}`} className="example"> </div>
<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
};
+86 -82
View File
@@ -1,89 +1,93 @@
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', {
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 () { export default class ExampleComponents extends React.Component {
hljs.initHighlightingOnLoad() componentDidMount() {
}, hljs.initHighlightingOnLoad();
}
examples: [ renderExamples() {
{ return examples.map((example, index) => (
title: 'Default', <CodeExampleComponent
component: <Default /> key={`example-${index}`}
}, id={index}
{ title={example.title}
title: 'Change Button Label', >
component: <ChangeLabel /> {<example.component />}
}, </CodeExampleComponent>
{ ));
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 () { renderLeftColumn() {
return this.examples.map((example, index) => return examples.map((example, index) => (
<CodeExampleComponent key={`example-${index}`} id={index} title={example.title}> <li className="examples__navigation-item" key={`link-${index}`}>
{example.component} <a href={`#example-${index}`}>
</CodeExampleComponent> {example.title}
) </a>
}, </li>
));
}
renderLeftColumn () { render() {
return this.examples.map((example, index) => return (
<li className="examples__navigation-item" key={`link-${index}`}> <div>
<a href={`#example-${index}`}> <h1>Examples</h1>
{example.title} <ul className="examples__navigation">
</a> {this.renderLeftColumn()}
</li> </ul>
) <div className="examples">
}, {this.renderExamples()}
</div>
</div>
);
}
}
render () { ExampleComponents.displayName = "exampleComponents";
return (
<div>
<h1>Examples</h1>
<ul className="examples__navigation">
{this.renderLeftColumn()}
</ul>
<div className="examples">
{this.renderExamples()}
</div>
</div>
)
}
})
+51 -51
View File
@@ -1,55 +1,55 @@
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() {
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 items = [
let event = { { outlook: "Outlook" },
title: 'Sample Event', { outlookcom: "Outlook.com" },
description: 'This is the sample event provided as an example only', { apple: "iCal" },
location: 'Portland, OR', { yahoo: "Yahoo!" },
startTime: '2016-09-16T20:15:00-04:00', { google: "Google" }
endTime: '2016-09-16T21:45:00-04:00' ];
};
let items = [ return (
{ outlook: 'Outlook' }, <div className="row">
{ outlookcom: 'Outlook.com' }, <pre className="column example__code">
{ apple: 'iCal' }, <code className="js">
{ yahoo: 'Yahoo!' }, {"let items = ["}<br />
{ google: 'Google' } &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 ( ChangeDropdownLabels.displayName = "Change Dropdown Labels";
<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>
);
}
})
+51 -51
View File
@@ -1,55 +1,55 @@
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() {
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 items = [
let event = { { outlook: "Outlook" },
title: 'Sample Event', { outlookcom: "Outlook.com" },
description: 'This is the sample event provided as an example only', { apple: "Apple Calendar" },
location: 'Portland, OR', { yahoo: "Yahoo" },
startTime: '2016-09-16T20:15:00-04:00', { google: "Google" }
endTime: '2016-09-16T21:45:00-04:00' ];
};
let items = [ return (
{ outlook: 'Outlook' }, <div className="row">
{ outlookcom: 'Outlook.com' }, <pre className="column example__code">
{ apple: 'Apple Calendar' }, <code className="js">
{ yahoo: 'Yahoo' }, {"let items = ["}<br />
{ google: 'Google' } &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 ( ChangeDropdownOrder.displayName = "Change Dropdown Order";
<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>
);
}
})
+30 -30
View File
@@ -1,33 +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 ChangeLabel extends React.Component {
displayName: 'ChangeLabel', 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 () { return (
let event = { <div className="row">
title: 'Sample Event', <pre className="column example__code">
description: 'This is the sample event provided as an example only', <code className="jsx">
location: 'Portland, OR', {"<AddToCalendar"}<br />
startTime: '2016-09-16T20:15:00-04:00', &nbsp;&nbsp;&nbsp;
endTime: '2016-09-16T21:45:00-04:00' {"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 ( ChangeLabel.displayName = "ChangeLabel";
<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>
);
}
})
+40 -40
View File
@@ -1,44 +1,44 @@
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() {
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 icon = { "calendar-plus-o": "left" };
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' }; 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 ( ChangeTemplate.displayName = "ChangeTemplate";
<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>
);
}
})
+49 -46
View File
@@ -1,49 +1,52 @@
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() {
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 () { return (
let event = { <div className="row">
title: 'Sample Event', <pre className="column example__code">
description: 'This is the sample event provided as an example only', <code className="js">
location: 'Portland, OR', {"let event = \{"}<br />
startTime: '2016-09-16T20:15:00-04:00', &nbsp;&nbsp;&nbsp;
endTime: '2016-09-16T21:45:00-04:00' {" 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 ( Default.displayName = "Default";
<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>
);
}
})
+39 -42
View File
@@ -1,46 +1,43 @@
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() {
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 items = [{ outlook: "Outlook" }, { google: "Google" }];
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 = [ return (
{ outlook: 'Outlook' }, <div className="row">
{ google: 'Google' } <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 ( RemoveDropdownItem.displayName = "Remove Dropdown Item";
<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>
);
}
})
+30 -30
View File
@@ -1,33 +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 TextOnlyDropdown extends React.Component {
displayName: 'TextOnlyDropdown', 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 () { return (
let event = { <div className="row">
title: 'Sample Event', <pre className="column example__code">
description: 'This is the sample event provided as an example only', <code className="jsx">
location: 'Portland, OR', {"<AddToCalendar"}<br />
startTime: '2016-09-16T20:15:00-04:00', &nbsp;&nbsp;&nbsp;
endTime: '2016-09-16T21:45:00-04:00' {"event={event}"}<br />
}; &nbsp;&nbsp;&nbsp;
{"displayItemIcons=\{false\} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} displayItemIcons={false} />
</div>
</div>
);
}
}
return ( TextOnlyDropdown.displayName = "TextOnlyDropdown";
<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>
);
}
})
+34 -34
View File
@@ -1,38 +1,38 @@
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() {
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 icon = { textOnly: "none" };
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' }; 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 ( TextOnlyTemplate.displayName = "TextOnlyTemplate";
<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>
);
}
})
+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";
+40 -19
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">
@@ -19,7 +17,7 @@ export default React.createClass({
</a> </a>
</div> </div>
<div className="hero__example"> <div className="hero__example">
<HeroExample /> <HeroExample />
</div> </div>
</div> </div>
</div> </div>
@@ -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";
+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'
} }
] ]
}, },
+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"
} }
} }
+171 -157
View File
@@ -1,194 +1,208 @@
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 {
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 (
isCrappyIE = true; typeof window !== "undefined" &&
} window.navigator.msSaveOrOpenBlob &&
window.Blob
this.setState({isCrappyIE: isCrappyIE}); ) {
isCrappyIE = true;
} }
toggleCalendarDropdown() { this.setState({ isCrappyIE: isCrappyIE });
let showOptions = !this.state.optionsOpen; }
if (showOptions) { toggleCalendarDropdown() {
document.addEventListener('click', this.toggleCalendarDropdown, false); let showOptions = !this.state.optionsOpen;
} else {
document.removeEventListener('click', this.toggleCalendarDropdown);
}
this.setState({optionsOpen: showOptions}); if (showOptions) {
document.addEventListener("click", this.toggleCalendarDropdown, false);
} else {
document.removeEventListener("click", this.toggleCalendarDropdown);
} }
handleDropdownLinkClick(e) { this.setState({ optionsOpen: showOptions });
e.preventDefault(); }
let url = e.currentTarget.getAttribute('href');
if (this.state.isCrappyIE) { handleDropdownLinkClick(e) {
let blob = new Blob([url], {type: 'text/calendar'}); e.preventDefault();
window.navigator.msSaveOrOpenBlob(blob, 'download.ics'); let url = e.currentTarget.getAttribute("href");
} else {
window.open(url, '_blank');
}
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() { this.toggleCalendarDropdown();
let self = this; }
let items = this.props.listItems.map((listItem) => { renderDropdown() {
let currentItem = Object.keys(listItem)[0]; let self = this;
let currentLabel = listItem[currentItem];
let icon = null; let items = this.props.listItems.map(listItem => {
if (self.props.displayItemIcons) { let currentItem = Object.keys(listItem)[0];
let currentIcon = (currentItem === 'outlook' || currentItem === 'outlookcom') ? 'windows' : currentItem; let currentLabel = listItem[currentItem];
icon = <i className={'fa fa-' + currentIcon}/>;
}
return ( let icon = null;
<li key={helpers.getRandomKey()}> if (self.props.displayItemIcons) {
<a className={currentItem + '-link'} onClick={self.handleDropdownLinkClick} let currentIcon = currentItem === "outlook" ||
href={helpers.buildUrl(self.props.event, currentItem, self.state.isCrappyIE)} currentItem === "outlookcom"
target="_blank"> ? "windows"
{icon} : currentItem;
{currentLabel}</a> icon = <i className={"fa fa-" + currentIcon} />;
</li> }
);
});
return ( return (
<div className={this.props.dropdownClass}> <li key={helpers.getRandomKey()}>
<ul> <a
{items} className={currentItem + "-link"}
</ul> onClick={self.handleDropdownLinkClick}
</div> 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 buttonClass = this.state.optionsOpen
let buttonLabel = this.props.buttonLabel; ? this.props.buttonClassClosed + " " + this.props.buttonClassOpen
let buttonIcon = null; : this.props.buttonClassClosed;
let template = Object.keys(this.props.buttonTemplate);
if (template[0] !== 'textOnly') { return (
let iconPlacement = this.props.buttonTemplate[template]; <div className={this.props.buttonWrapperClass}>
let buttonIconClass = 'react-add-to-calendar__icon--' + iconPlacement + ' fa fa-'; <a className={buttonClass} onClick={this.toggleCalendarDropdown}>
{buttonLabel}
</a>
</div>
);
}
if (template[0] === 'caret') { render() {
buttonIconClass += (this.state.optionsOpen) ? 'caret-up' : 'caret-down'; let options = null;
} else { if (this.state.optionsOpen) {
buttonIconClass += template[0]; options = this.renderDropdown();
}
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 addToCalendarBtn = null;
let options = null; if (this.props.event) {
if (this.state.optionsOpen) { addToCalendarBtn = this.renderButton();
options = this.renderDropdown(); }
}
let addToCalendarBtn = null; return (
if (this.props.event) { <div className={this.props.rootClass}>
addToCalendarBtn = this.renderButton(); {addToCalendarBtn}
} {options}
</div>
return ( );
<div className={this.props.rootClass}> }
{addToCalendarBtn}
{options}
</div>
);
}
} }
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"
}; };
+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);
}) });
}) });
+5989
View File
File diff suppressed because it is too large Load Diff