mirror of
https://github.com/encounter/react-add-to-calendar.git
synced 2026-07-10 21:18:44 -07:00
updating dependencies and fixing errors from deprecated code in the latest react version which resolves #10
This commit is contained in:
@@ -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() {
|
||||||
|
|||||||
+6075
-3979
File diff suppressed because it is too large
Load Diff
@@ -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
|
||||||
|
};
|
||||||
|
|||||||
@@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -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' }
|
|
||||||
];
|
{"\{ outlook: 'Outlook' \}"}<br />
|
||||||
|
|
||||||
|
{"\{ outlookcom: 'Outlook.com' \}"}<br />
|
||||||
|
|
||||||
|
{"\{ apple: 'iCal' \}"}<br />
|
||||||
|
|
||||||
|
{"\{ yahoo: 'Yahoo!' \}"}<br />
|
||||||
|
|
||||||
|
{"\{ google: 'Google' \}"}<br />
|
||||||
|
{"];"}<br /><br />
|
||||||
|
</code>
|
||||||
|
<code className="jsx">
|
||||||
|
{"<AddToCalendar"}<br />
|
||||||
|
|
||||||
|
{"event={event}"}<br />
|
||||||
|
|
||||||
|
{"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/>
|
|
||||||
|
|
||||||
{"\{ outlook: 'Outlook' \}"}<br/>
|
|
||||||
|
|
||||||
{"\{ outlookcom: 'Outlook.com' \}"}<br/>
|
|
||||||
|
|
||||||
{"\{ apple: 'iCal' \}"}<br/>
|
|
||||||
|
|
||||||
{"\{ yahoo: 'Yahoo!' \}"}<br/>
|
|
||||||
|
|
||||||
{"\{ google: 'Google' \}"}<br/>
|
|
||||||
{"];"}<br/><br/>
|
|
||||||
</code>
|
|
||||||
<code className="jsx">
|
|
||||||
{"<AddToCalendar"}<br/>
|
|
||||||
|
|
||||||
{"event={event}"}<br/>
|
|
||||||
|
|
||||||
{"listItems=\{items\} />"}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
<div className="column">
|
|
||||||
<AddToCalendar event={event} listItems={items} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -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' }
|
|
||||||
];
|
{"\{ outlook: 'Outlook' \}"}<br />
|
||||||
|
|
||||||
|
{"\{ outlookcom: 'Outlook.com' \}"}<br />
|
||||||
|
|
||||||
|
{"\{ apple: 'Apple Calendar' \}"}<br />
|
||||||
|
|
||||||
|
{"\{ yahoo: 'Yahoo' \}"}<br />
|
||||||
|
|
||||||
|
{"\{ google: 'Google' \}"}<br />
|
||||||
|
{"];"}<br /><br />
|
||||||
|
</code>
|
||||||
|
<code className="jsx">
|
||||||
|
{"<AddToCalendar"}<br />
|
||||||
|
|
||||||
|
{"event={event}"}<br />
|
||||||
|
|
||||||
|
{"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/>
|
|
||||||
|
|
||||||
{"\{ outlook: 'Outlook' \}"}<br/>
|
|
||||||
|
|
||||||
{"\{ outlookcom: 'Outlook.com' \}"}<br/>
|
|
||||||
|
|
||||||
{"\{ apple: 'Apple Calendar' \}"}<br/>
|
|
||||||
|
|
||||||
{"\{ yahoo: 'Yahoo' \}"}<br/>
|
|
||||||
|
|
||||||
{"\{ google: 'Google' \}"}<br/>
|
|
||||||
{"];"}<br/><br/>
|
|
||||||
</code>
|
|
||||||
<code className="jsx">
|
|
||||||
{"<AddToCalendar"}<br/>
|
|
||||||
|
|
||||||
{"event={event}"}<br/>
|
|
||||||
|
|
||||||
{"listItems=\{items\} />"}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
<div className="column">
|
|
||||||
<AddToCalendar event={event} listItems={items} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -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',
|
|
||||||
endTime: '2016-09-16T21:45:00-04:00'
|
{"event={event}"}<br />
|
||||||
};
|
|
||||||
|
{'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/>
|
|
||||||
|
|
||||||
{"event={event}"}<br/>
|
|
||||||
|
|
||||||
{"buttonLabel=\"Put on my calendar\" />"}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
<div className="column">
|
|
||||||
<AddToCalendar event={event} buttonLabel="Put on my calendar" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -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 />
|
||||||
|
|
||||||
|
{"object property can be any Font Awesome icon"}<br />
|
||||||
|
|
||||||
|
{"and value can be 'left' or 'right'"}<br />
|
||||||
|
{"*/"}<br /><br />
|
||||||
|
</code>
|
||||||
|
<code className="jsx">
|
||||||
|
{"<AddToCalendar"}<br />
|
||||||
|
|
||||||
|
{"event={event}"}<br />
|
||||||
|
|
||||||
|
{"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/>
|
|
||||||
|
|
||||||
{"object property can be any Font Awesome icon"}<br/>
|
|
||||||
|
|
||||||
{"and value can be 'left' or 'right'"}<br/>
|
|
||||||
{"*/"}<br/><br/>
|
|
||||||
</code>
|
|
||||||
<code className="jsx">
|
|
||||||
{"<AddToCalendar"}<br/>
|
|
||||||
|
|
||||||
{"event={event}"}<br/>
|
|
||||||
|
|
||||||
{"buttonTemplate=\{icon\} />"}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
<div className="column">
|
|
||||||
<AddToCalendar event={event} buttonTemplate={icon} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -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',
|
|
||||||
endTime: '2016-09-16T21:45:00-04:00'
|
{" title: 'Sample Event',"}<br />
|
||||||
};
|
|
||||||
|
{
|
||||||
|
" description: 'This is the sample event provided as an example only',"
|
||||||
|
}
|
||||||
|
<br />
|
||||||
|
|
||||||
|
{" location: 'Portland, OR',"}<br />
|
||||||
|
|
||||||
|
{" startTime: '2016-09-16T20:15:00-04:00',"}<br />
|
||||||
|
|
||||||
|
{" endTime: '2016-09-16T21:45:00-04:00'"}<br />
|
||||||
|
{"\};"}<br /><br />
|
||||||
|
{"/*"}<br />
|
||||||
|
|
||||||
|
{"startTime and endTime can use any datetime"}<br />
|
||||||
|
|
||||||
|
{"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/>
|
|
||||||
|
|
||||||
{" title: 'Sample Event',"}<br/>
|
|
||||||
|
|
||||||
{" description: 'This is the sample event provided as an example only',"}<br/>
|
|
||||||
|
|
||||||
{" location: 'Portland, OR',"}<br/>
|
|
||||||
|
|
||||||
{" startTime: '2016-09-16T20:15:00-04:00',"}<br/>
|
|
||||||
|
|
||||||
{" endTime: '2016-09-16T21:45:00-04:00'"}<br/>
|
|
||||||
{"\};"}<br/><br/>
|
|
||||||
{"/*"}<br/>
|
|
||||||
|
|
||||||
{"startTime and endTime can use any datetime"}<br/>
|
|
||||||
|
|
||||||
{"string that is acceptable by MomentJS"}<br/>
|
|
||||||
{"*/"}
|
|
||||||
</code>
|
|
||||||
<code className="jsx">
|
|
||||||
{"<AddToCalendar event={event} />"}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
<div className="column">
|
|
||||||
<AddToCalendar event={event} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -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 />
|
||||||
|
|
||||||
|
{"\{ outlook: 'Outlook' \}"}<br />
|
||||||
|
|
||||||
|
{"\{ google: 'Google' \}"}<br />
|
||||||
|
{"];"}<br /><br />
|
||||||
|
</code>
|
||||||
|
<code className="jsx">
|
||||||
|
{"<AddToCalendar"}<br />
|
||||||
|
|
||||||
|
{"event={event}"}<br />
|
||||||
|
|
||||||
|
{"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/>
|
|
||||||
|
|
||||||
{"\{ outlook: 'Outlook' \}"}<br/>
|
|
||||||
|
|
||||||
{"\{ google: 'Google' \}"}<br/>
|
|
||||||
{"];"}<br/><br/>
|
|
||||||
</code>
|
|
||||||
<code className="jsx">
|
|
||||||
{"<AddToCalendar"}<br/>
|
|
||||||
|
|
||||||
{"event={event}"}<br/>
|
|
||||||
|
|
||||||
{"listItems=\{items\} />"}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
<div className="column">
|
|
||||||
<AddToCalendar event={event} listItems={items} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -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',
|
|
||||||
endTime: '2016-09-16T21:45:00-04:00'
|
{"event={event}"}<br />
|
||||||
};
|
|
||||||
|
{"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/>
|
|
||||||
|
|
||||||
{"event={event}"}<br/>
|
|
||||||
|
|
||||||
{"displayItemIcons=\{false\} />"}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
<div className="column">
|
|
||||||
<AddToCalendar event={event} displayItemIcons={false} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -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 />
|
||||||
|
|
||||||
|
{"event={event}"}<br />
|
||||||
|
|
||||||
|
{"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/>
|
|
||||||
|
|
||||||
{"event={event}"}<br/>
|
|
||||||
|
|
||||||
{"buttonTemplate=\{icon\} />"}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
<div className="column">
|
|
||||||
<AddToCalendar event={event} buttonTemplate={icon} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -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
@@ -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>
|
</a>
|
||||||
<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>
|
</a>
|
||||||
<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>
|
</a>
|
||||||
<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>
|
</a>
|
||||||
<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
@@ -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
@@ -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
@@ -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"
|
||||||
};
|
};
|
||||||
@@ -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);
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user