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

adding more examples and updating the docs

Browse Source
This commit is contained in:
Jason Salzman
2016-10-06 16:12:34 -07:00
parent 91a74e96cc
commit 5d9a12f58f
20 changed files with 10286 additions and 2538 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -2
View File
@@ -2,11 +2,11 @@
[![npm version](https://badge.fury.io/js/react-add-to-calendar.svg)](https://badge.fury.io/js/react-add-to-calendar)
[![Build Status](https://travis-ci.org/jasonsalzman/react-add-to-calendar.svg?branch=master)](https://travis-ci.org/jasonsalzman/react-add-to-calendar)
[![Dependency Status](https://david-dm.org/jasonsalzman/react-add-to-calendar.svg)](https://david-dm.org/jasonsalzman/react-add-to-calendar)
[![Dependency Status](https://img.shields.io/david/peer/webcomponents/generator-element.svg?maxAge=2592000)](https://david-dm.org/jasonsalzman/react-add-to-calendar)
[![codecov](https://codecov.io/gh/jasonsalzman/react-add-to-calendar/branch/master/graph/badge.svg)](https://codecov.io/gh/jasonsalzman/react-add-to-calendar)
[![Downloads](http://img.shields.io/npm/dm/react-add-to-calendar.svg)](https://npmjs.org/package/react-add-to-calendar)
A simple and reusable Add to Calendar component for React ([Demo](https://jasonsalzman.github.io/react-add-to-calendar/))
A simple, customizable, and reusable Add to Calendar button component for React ([Demo](https://jasonsalzman.github.io/react-add-to-calendar/))
## Installation
docs-site/bundle.js
+9792 -2405
View File
File diff suppressed because it is too large Load Diff
docs-site/index.html
+1 -1
View File
@@ -4,7 +4,7 @@
<link rel="stylesheet" type="text/css" href="style.css">
<title>React Add to Calendar Button crafted by Jason Salzman</title>
<meta charset="UTF-8">
<meta name="description" content="A simple and reusable Add to Calendar component for React.">
<meta name="description" content="A simple, customizable, and reusable Add to Calendar button component for React.">
<meta name="keywords" content="React, HTML, CSS, JavaScript, JSX, date, calendar, add to calendar, event">
</head>
docs-site/src/example_components.jsx
+76 -39
View File
@@ -1,52 +1,89 @@
import React from 'react'
import hljs from 'highlight.js'
import Default from './examples/default'
import ChangeLabel from './examples/changeLabel'
import ChangeTemplate from './examples/changeTemplate'
import TextOnlyTemplate from './examples/textOnlyTemplate'
import TextOnlyDropdown from './examples/textOnlyDropdown'
import ChangeDropdownOrder from './examples/changeDropdownOrder'
import RemoveDropdownItem from './examples/removeDropdownItem'
import ChangeDropdownLabels from './examples/changeDropdownLabels'
import CodeExampleComponent from './code_example_component'
import 'react-add-to-calendar/dist/react-add-to-calendar.css'
import './style.scss'
export default React.createClass({
displayName: 'exampleComponents',
displayName: 'exampleComponents',
componentDidMount () {
hljs.initHighlightingOnLoad()
},
componentDidMount () {
hljs.initHighlightingOnLoad()
},
examples: [
{
title: 'Default',
component: <Default />
examples: [
{
title: 'Default',
component: <Default />
},
{
title: 'Change Button Label',
component: <ChangeLabel />
},
{
title: 'Change Button Template',
component: <ChangeTemplate />
},
{
title: 'Text Only Button Template',
component: <TextOnlyTemplate />
},
{
title: 'Text Only Dropdown Items',
component: <TextOnlyDropdown />
},
{
title: 'Change Dropdown Order',
component: <ChangeDropdownOrder />
},
{
title: 'Remove Dropdown Item',
component: <RemoveDropdownItem />
},
{
title: 'Change Dropdown Labels',
component: <ChangeDropdownLabels />
}
],
renderExamples () {
return this.examples.map((example, index) =>
<CodeExampleComponent key={`example-${index}`} id={index} title={example.title}>
{example.component}
</CodeExampleComponent>
)
},
renderLeftColumn () {
return this.examples.map((example, index) =>
<li className="examples__navigation-item" key={`link-${index}`}>
<a href={`#example-${index}`}>
{example.title}
</a>
</li>
)
},
render () {
return (
<div>
<h1>Examples</h1>
<ul className="examples__navigation">
{this.renderLeftColumn()}
</ul>
<div className="examples">
{this.renderExamples()}
</div>
</div>
)
}
],
renderExamples () {
return this.examples.map((example, index) =>
<CodeExampleComponent key={`example-${index}`} id={index} title={example.title}>
{example.component}
</CodeExampleComponent>
)
},
renderLeftColumn () {
return this.examples.map((example, index) =>
<li className="examples__navigation-item" key={`link-${index}`}>
<a href={`#example-${index}`}>
{example.title}
</a>
</li>
)
},
render () {
return <div>
<h1>Examples</h1>
<ul className="examples__navigation">
{this.renderLeftColumn()}
</ul>
<div className="examples">
{this.renderExamples()}
</div>
</div>
}
})
docs-site/src/examples/changeDropdownLabels.jsx
+52
View File
@@ -0,0 +1,52 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
export default React.createClass({
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'
};
let items = [
{ outlook: 'Outlook' },
{ apple: 'iCal' },
{ yahoo: 'Yahoo!' },
{ google: 'Google' }
];
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let items = ["}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ outlook: 'Outlook' \}"}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ 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>
);
}
})
docs-site/src/examples/changeDropdownOrder.jsx
+52
View File
@@ -0,0 +1,52 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
export default React.createClass({
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'
};
let items = [
{ outlook: 'Outlook' },
{ apple: 'Apple Calendar' },
{ yahoo: 'Yahoo' },
{ google: 'Google' }
];
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let items = ["}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ outlook: 'Outlook' \}"}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ 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>
);
}
})
docs-site/src/examples/changeLabel.jsx
+33
View File
@@ -0,0 +1,33 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
export default React.createClass({
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'
};
return (
<div className="row">
<pre className="column example__code">
<code className="jsx">
{"<AddToCalendar"}<br/>
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br/>
&nbsp;&nbsp;&nbsp;
{"buttonLabel=\"Put on my calendar\" />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} buttonLabel="Put on my calendar" />
</div>
</div>
);
}
})
docs-site/src/examples/changeTemplate.jsx
+44
View File
@@ -0,0 +1,44 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
export default React.createClass({
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'
};
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>
);
}
})
docs-site/src/examples/default.jsx
+43 -13
View File
@@ -2,18 +2,48 @@ import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
export default React.createClass({
displayName: 'Default',
displayName: 'Default',
render () {
return <div className="row">
<pre className="column example__code">
<code className="jsx">
{"<AddToCalendar/>"}
</code>
</pre>
<div className="column">
<AddToCalendar/>
</div>
</div>
}
render () {
let event = {
title: 'Sample Event',
description: 'This is the sample event provided as an example only',
location: 'Portland, OR',
startTime: '2016-09-16T20:15:00-04:00',
endTime: '2016-09-16T21:45:00-04:00'
};
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let event = \{"}<br/>
&nbsp;&nbsp;&nbsp;
{" title: 'Sample Event',"}<br/>
&nbsp;&nbsp;&nbsp;
{" description: 'This is the sample event provided as an example only',"}<br/>
&nbsp;&nbsp;&nbsp;
{" location: 'Portland, OR',"}<br/>
&nbsp;&nbsp;&nbsp;
{" startTime: '2016-09-16T20:15:00-04:00',"}<br/>
&nbsp;&nbsp;&nbsp;
{" endTime: '2016-09-16T21:45:00-04:00'"}<br/>
{"\};"}<br/><br/>
{"/*"}<br/>
&nbsp;&nbsp;&nbsp;
{"startTime and endTime can use any datetime"}<br/>
&nbsp;&nbsp;&nbsp;
{"string that is acceptable by MomentJS"}<br/>
{"*/"}
</code>
<code className="jsx">
{"<AddToCalendar event={event} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} />
</div>
</div>
);
}
})
docs-site/src/examples/removeDropdownItem.jsx
+46
View File
@@ -0,0 +1,46 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
export default React.createClass({
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'
};
let items = [
{ outlook: 'Outlook' },
{ google: 'Google' }
];
return (
<div className="row">
<pre className="column example__code">
<code className="js">
{"let items = ["}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ outlook: 'Outlook' \}"}<br/>
&nbsp;&nbsp;&nbsp;
{"\{ google: 'Google' \}"}<br/>
{"];"}<br/><br/>
</code>
<code className="jsx">
{"<AddToCalendar"}<br/>
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br/>
&nbsp;&nbsp;&nbsp;
{"listItems=\{items\} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} listItems={items} />
</div>
</div>
);
}
})
docs-site/src/examples/textOnlyDropdown.jsx
+33
View File
@@ -0,0 +1,33 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
export default React.createClass({
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'
};
return (
<div className="row">
<pre className="column example__code">
<code className="jsx">
{"<AddToCalendar"}<br/>
&nbsp;&nbsp;&nbsp;
{"event={event}"}<br/>
&nbsp;&nbsp;&nbsp;
{"displayItemIcons=\{false\} />"}
</code>
</pre>
<div className="column">
<AddToCalendar event={event} displayItemIcons={false} />
</div>
</div>
);
}
})
docs-site/src/examples/textOnlyTemplate.jsx
+38
View File
@@ -0,0 +1,38 @@
import React from 'react'
import AddToCalendar from 'react-add-to-calendar'
export default React.createClass({
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'
};
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>
);
}
})
docs-site/src/root.jsx
+14 -17
View File
@@ -25,24 +25,21 @@ export default React.createClass({
</div>
<div className="wrapper">
<h1>React Add to Calendar Button</h1>
{ /* <p>
<a href="https://npmjs.org/package/react-datepicker">
<img src="https://badge.fury.io/js/react-datepicker.svg" className="badge" />
<p>
<a href="https://npmjs.org/package/react-add-to-calendar">
<img src="https://badge.fury.io/js/react-add-to-calendar.svg" className="badge" />
</a>&nbsp;&nbsp;
<a href="https://travis-ci.org/jasonsalzman/react-add-to-calendar">
<img src="https://travis-ci.org/jasonsalzman/react-add-to-calendar.svg?branch=master" className="badge" />
</a>&nbsp;&nbsp;
<a href="https://david-dm.org/jasonsalzman/react-add-to-calendar">
<img src="https://img.shields.io/david/peer/webcomponents/generator-element.svg?maxAge=2592000" className="badge" />
</a>&nbsp;&nbsp;
<a href={'https://npmjs.org/package/react-add-to-calendar'}>
<img src="https://img.shields.io/npm/dm/react-add-to-calendar.svg" className="badge" />
</a>
<a href="https://travis-ci.org/Hacker0x01/react-datepicker">
<img src="https://travis-ci.org/Hacker0x01/react-datepicker.svg?branch=master" className="badge" />
</a>
<a href="https://david-dm.org/Hacker0x01/react-datepicker">
<img src="https://david-dm.org/Hacker0x01/react-datepicker.svg" className="badge" />
</a>
<a href={'https://npmjs.org/package/react-datepicker' +
'?__hstc=72727564.ca821b01b5b29b1831f0936a681f0483.1428679773810.1435582678273.1438354735499.5' +
'&__hssc=72727564.1.1438354735499' +
'&__hsfp=2497064007'}>
<img src="https://img.shields.io/npm/dm/react-datepicker.svg" className="badge" />
</a>
</p> */}
<p>A simple and reusable Add to Calendar component for React.</p>
</p>
<p>A simple, customizable, and reusable Add to Calendar button component for React.</p>
<h2>Installation</h2>
<p>The package can be installed via NPM:</p>
docs/0.md
-48
View File
@@ -1,48 +0,0 @@
`0` (component)
===============
Props
-----
### `buttonLabel`
type: `string`
defaultValue: `'Add to My Calendar'`
### `buttonTemplate`
type: `object`
defaultValue: `{ caret: 'right' }`
### `displayItemIcons`
type: `bool`
defaultValue: `true`
### `event` (required)
type: `object`
defaultValue: `{
title: 'Sample Event',
description: 'This is the sample event provided as an example only',
location: 'Portland, OR',
startTime: '2016-09-16T20:15:00-04:00',
endTime: '2016-09-16T21:45:00-04:00'
}`
### `listItems`
type: `array`
defaultValue: `[
{ apple: 'Apple Calendar' },
{ google: 'Google' },
{ outlook: 'Outlook' },
{ yahoo: 'Yahoo' }
]`
docs/ReactAddToCalendar.md
+32 -2
View File
@@ -1,11 +1,23 @@
`ReactAddToCalendar` (component)
================================
`0` (component)
===============
Props
-----
### `buttonClassClosed`
type: `string`
defaultValue: `'react-add-to-calendar__button'`
### `buttonClassOpen`
type: `string`
defaultValue: `'react-add-to-calendar__button--light'`
### `buttonLabel`
type: `string`
@@ -18,12 +30,24 @@ type: `object`
defaultValue: `{ caret: 'right' }`
### `buttonWrapperClass`
type: `string`
defaultValue: `'react-add-to-calendar__wrapper'`
### `displayItemIcons`
type: `bool`
defaultValue: `true`
### `dropdownClass`
type: `string`
defaultValue: `'react-add-to-calendar__dropdown'`
### `event` (required)
type: `object`
@@ -46,3 +70,9 @@ defaultValue: `[
{ yahoo: 'Yahoo' }
]`
### `rootClass`
type: `string`
defaultValue: `'react-add-to-calendar'`
package.json
+1 -1
View File
@@ -2,7 +2,7 @@
"author": "Jason Salzman",
"name": "react-add-to-calendar",
"description": "A simple and reusable add to calendar button component for React",
"version": "0.0.1",
"version": "0.0.2",
"license": "MIT",
"homepage": "https://github.com/jasonsalzman/react-add-to-calendar",
"repository": {
scripts/buildDocs.sh
+2
View File
@@ -25,6 +25,7 @@ process.stdin.on('end', function() {
function buildDocs(api) {
// api is an object keyed by filepath. We use the file name as component name.
for (var filepath in api) {
process.stdout.write(filepath + '\n\n');
var name = getComponentName(filepath);
var markdown = generateMarkdown(name, api[filepath]);
var outputLocation = './docs/';
@@ -37,6 +38,7 @@ function getComponentName(filepath) {
var name = path.basename(filepath);
var ext;
while ((ext = path.extname(name))) {
process.stdout.write(name + '\n\n');
name = name.substring(0, name.length - ext.length);
}
return name;
scripts/release.sh
+1 -1
View File
@@ -7,7 +7,7 @@ git checkout .
npm version $1
react-docgen ./src/ReactAddToCalendar.js --resolver findAllComponentDefinitions | ./scripts/buildDocs.sh
react-docgen ./src/*.js --resolver findAllComponentDefinitions | ./scripts/buildDocs.sh
git add .
src/ReactAddToCalendar.js
+24 -9
View File
@@ -2,7 +2,7 @@ import React, {
Component,
} from 'react';
import helpersClass from './helpers.js';
import helpersClass from './helpers';
const helpers = new helpersClass();
export default class ReactAddToCalendar extends React.Component {
@@ -80,7 +80,7 @@ export default class ReactAddToCalendar extends React.Component {
});
return (
<div className="react-add-to-calendar__dropdown">
<div className={this.props.dropdownClass}>
<ul>
{items}
</ul>
@@ -119,11 +119,10 @@ export default class ReactAddToCalendar extends React.Component {
);
}
let buttonClass = (this.state.optionsOpen) ? 'react-add-to-calendar__button react-add-to-calendar__button--light' :
'react-add-to-calendar__button';
let buttonClass = (this.state.optionsOpen) ? this.props.buttonClassClosed + ' ' + this.props.buttonClassOpen : this.props.buttonClassClosed;
return (
<div className="react-add-to-calendar__wrapper">
<div className={this.props.buttonWrapperClass}>
<a id={this.state.componentId} className={buttonClass}
onClick={this.toggleCalendarDropdown}>{buttonLabel}</a>
</div>
@@ -142,7 +141,7 @@ export default class ReactAddToCalendar extends React.Component {
}
return (
<div className="react-add-to-calendar">
<div className={this.props.rootClass}>
{addToCalendarBtn}
{options}
</div>
@@ -153,17 +152,32 @@ export default class ReactAddToCalendar extends React.Component {
ReactAddToCalendar.displayName = 'Add To Calendar';
ReactAddToCalendar.propTypes = {
buttonClassClosed: React.PropTypes.string,
buttonClassOpen: React.PropTypes.string,
buttonLabel: React.PropTypes.string,
buttonTemplate: React.PropTypes.object,
buttonWrapperClass: React.PropTypes.string,
displayItemIcons: React.PropTypes.bool,
event: React.PropTypes.object.isRequired,
listItems: React.PropTypes.array
dropdownClass: React.PropTypes.string,
event: React.PropTypes.shape({
title: React.PropTypes.string,
description: React.PropTypes.string,
location: React.PropTypes.string,
startTime: React.PropTypes.string,
endTime: React.PropTypes.string
}).isRequired,
listItems: React.PropTypes.arrayOf(React.PropTypes.object),
rootClass: React.PropTypes.string
};
ReactAddToCalendar.defaultProps = {
buttonClassClosed: 'react-add-to-calendar__button',
buttonClassOpen: 'react-add-to-calendar__button--light',
buttonLabel: 'Add to My Calendar',
buttonTemplate: { caret: 'right' },
buttonWrapperClass: 'react-add-to-calendar__wrapper',
displayItemIcons: true,
dropdownClass: 'react-add-to-calendar__dropdown',
event: {
title: 'Sample Event',
description: 'This is the sample event provided as an example only',
@@ -176,5 +190,6 @@ ReactAddToCalendar.defaultProps = {
{ google: 'Google' },
{ outlook: 'Outlook' },
{ yahoo: 'Yahoo' }
]
],
rootClass: 'react-add-to-calendar'
};
src/helpers.js → src/helpers/index.js
View File