├── .gitignore
├── .npmignore
├── README.md
├── example
├── basic.jsx
├── example.config.js
├── index.html
├── main.js
└── server.config.js
├── mocha.opts
├── package.json
├── src
└── fader.jsx
└── tests
├── setup.js
└── test_helper.js
/.gitignore:
--------------------------------------------------------------------------------
1 | lib
2 | node_modules
3 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | mocha.opts
3 | .gitignore
4 | tests
5 | example
6 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #Fader
2 |
3 | Fade a component in for x amount of seconds, then make it disappear, and completely hide (return null) until you choose to fade it again.
4 |
5 | ##Install
6 |
7 | `npm install fader`
8 |
9 | ##Example
10 |
11 | ```js
12 | //when you set this.state.fade to true, it's triggered
13 |
14 |
15 | Fading in and out! For two seconds!
16 |
17 |
18 | ```
19 |
20 | The child component can be anything.
21 |
22 | ###Props
23 |
24 | - `time` in seconds, total time of the fade
25 | - `fade` every time it's set to true, it triggers a fade in and out
26 |
--------------------------------------------------------------------------------
/example/basic.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Fader from '../src/fader';
3 |
4 | export default class Basic extends React.Component {
5 |
6 | constructor(){
7 | super()
8 | this.state = {
9 | message: 'wait one second...'
10 | }
11 | }
12 |
13 | componentDidMount(){
14 | setTimeout(() => {
15 | this.setState({
16 | fade: true,
17 | message: 'setting fade to true again causes another fade (wait two more seconds)'
18 | })
19 | this.fade()
20 | },2000)
21 |
22 | }
23 |
24 | fade(){
25 | setTimeout(() => {
26 | this.setState({fade: true})
27 | },7000)
28 | }
29 |
30 | render() {
31 | return (
32 |
33 | {this.state.message}
34 |
35 |
36 | hey I'm fading in and out! For two seconds!
37 |
38 |
39 |
55 | {this.props.children}
56 |
57 | )
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/tests/setup.js:
--------------------------------------------------------------------------------
1 | /* globals global */
2 |
3 | require("babel/register")({
4 | stage: 0
5 | });
6 |
7 | function propagateToGlobal (window) {
8 | for (let key in window) {
9 | if (!window.hasOwnProperty(key)) continue
10 | if (key in global) continue
11 |
12 | global[key] = window[key]
13 | }
14 | }
15 |
16 | var jsdom = require('node-jsdom');
17 |
18 | var doc = jsdom.jsdom('');
19 | var win = doc.defaultView;
20 |
21 | global.document = doc;
22 | global.window = win;
23 |
24 | propagateToGlobal(win);
25 |
--------------------------------------------------------------------------------
/tests/test_helper.js:
--------------------------------------------------------------------------------
1 | import React from 'react/addons';
2 | import { expect } from 'chai';
3 | import { Test } from 'legit-tests';
4 | import { SetState, Find } from 'legit-tests/lib/middleware';
5 | import sinon from 'sinon';
6 |
7 | let { TestUtils } = React.addons,
8 | shallowRenderer = TestUtils.createRenderer();
9 |
10 | let createShallowComponent = (component, props) => {
11 | shallowRenderer.render(React.createElement(component, props));
12 | return shallowRenderer.getRenderOutput();
13 | }
14 |
15 | export {
16 | React,
17 | expect,
18 | TestUtils,
19 | createShallowComponent,
20 | Test,
21 | SetState,
22 | Find
23 | }
24 |
--------------------------------------------------------------------------------