Skip to content

Commit a14e5a4

Browse files
josepotjosepot
committed
v0.0.3 Improved API signature
1 parent 11acf83 commit a14e5a4

File tree

9 files changed

+82
-146
lines changed

9 files changed

+82
-146
lines changed

‎.babelrc

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
{
22
"presets": ["es2015", "react"],
3-
"plugins": ["transform-exponentiation-operator"]
3+
"plugins": [
4+
"transform-exponentiation-operator",
5+
"transform-object-rest-spread"
6+
]
47
}

‎.eslintrc

+7
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,13 @@
66
},
77
"rules": {
88
"comma-dangle": ["error", "always-multiline"],
9+
"max-len": ["error", {
10+
"code": 80,
11+
"ignoreComments": true,
12+
"ignoreTemplateLiterals": true,
13+
"ignoreUrls": true,
14+
"ignoreTrailingComments": true
15+
}],
916
"react/jsx-filename-extension": 0,
1017
"react/forbid-prop-types": 0,
1118
"no-nested-ternary": 0,

‎example/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"react": "^15.4.2",
1010
"react-dom": "^15.4.2",
1111
"react-redux": "^5.0.3",
12-
"react-redux-scroll": "^1.0.0",
12+
"react-redux-scroll": "^0.0.2",
1313
"redux": "^3.6.0",
1414
"redux-logger": "^2.8.2"
1515
},

‎example/src/App.js

+22-120
Original file line numberDiff line numberDiff line change
@@ -2,140 +2,42 @@ import React, { Component } from 'react';
22
import { scrollToWhen } from '../../lib';
33
import logo from './logo.svg';
44
import './App.css';
5-
import { JUMP_TO, JUMP_TO_LAST } from './actions';
5+
import { JUMP_TO_HEADER, JUMP_TO_PARAGRAPH } from './actions';
66

7-
const Header = scrollToWhen(JUMP_TO, { duration: 1000 })(() =>
7+
const Header = scrollToWhen(JUMP_TO_HEADER, {
8+
scrollOptions: { duration: 1000 },
9+
})(() =>
810
<div className="App-header">
911
<img src={logo} className="App-logo" alt="logo" />
1012
<h2>Welcome to React</h2>
1113
</div>
1214
);
1315

14-
const LastParagraph = scrollToWhen(
15-
JUMP_TO_LAST,
16-
{ duration: 3000, easingFunction: 'EASE_IN_OUT_CUBIC', yAlignment: 'BOTTOM' },
17-
(dispatch, cancelled) => dispatch({ type: 'SCROLL_FINISHED', cancelled })
16+
const ScrollableParagraph = scrollToWhen(
17+
({ type, payload }, { paragraphId }) => (
18+
type === JUMP_TO_PARAGRAPH && paragraphId === payload ? {
19+
onEnd: (dispatch, cancelled) =>
20+
dispatch({ type: 'SCROLL_FINISHED', cancelled }),
21+
scrollOptions: { yAlignment: 'TOP', duration: 3000 },
22+
} : undefined
23+
),
24+
{ excludedProps: ['paragraphId'] }
1825
)('p');
1926

2027
class App extends Component {
2128
render() {
2229
return (
2330
<div className="App">
2431
<Header />
25-
<p className="App-intro">
26-
To get started, edit <code>src/App.js</code> and save to reload.
27-
To get started, edit <code>src/App.js</code> and save to reload.
28-
To get started, edit <code>src/App.js</code> and save to reload.
29-
To get started, edit <code>src/App.js</code> and save to reload.
30-
</p>
31-
<p className="App-intro">
32-
To get started, edit <code>src/App.js</code> and save to reload.
33-
To get started, edit <code>src/App.js</code> and save to reload.
34-
To get started, edit <code>src/App.js</code> and save to reload.
35-
To get started, edit <code>src/App.js</code> and save to reload.
36-
</p>
37-
<p className="App-intro">
38-
To get started, edit <code>src/App.js</code> and save to reload.
39-
To get started, edit <code>src/App.js</code> and save to reload.
40-
To get started, edit <code>src/App.js</code> and save to reload.
41-
To get started, edit <code>src/App.js</code> and save to reload.
42-
</p>
43-
<p className="App-intro">
44-
To get started, edit <code>src/App.js</code> and save to reload.
45-
To get started, edit <code>src/App.js</code> and save to reload.
46-
To get started, edit <code>src/App.js</code> and save to reload.
47-
To get started, edit <code>src/App.js</code> and save to reload.
48-
</p>
49-
<p className="App-intro">
50-
To get started, edit <code>src/App.js</code> and save to reload.
51-
To get started, edit <code>src/App.js</code> and save to reload.
52-
To get started, edit <code>src/App.js</code> and save to reload.
53-
To get started, edit <code>src/App.js</code> and save to reload.
54-
</p>
55-
<p className="App-intro">
56-
To get started, edit <code>src/App.js</code> and save to reload.
57-
To get started, edit <code>src/App.js</code> and save to reload.
58-
To get started, edit <code>src/App.js</code> and save to reload.
59-
To get started, edit <code>src/App.js</code> and save to reload.
60-
</p>
61-
<p className="App-intro">
62-
To get started, edit <code>src/App.js</code> and save to reload.
63-
To get started, edit <code>src/App.js</code> and save to reload.
64-
To get started, edit <code>src/App.js</code> and save to reload.
65-
To get started, edit <code>src/App.js</code> and save to reload.
66-
</p>
67-
<p className="App-intro">
68-
To get started, edit <code>src/App.js</code> and save to reload.
69-
To get started, edit <code>src/App.js</code> and save to reload.
70-
To get started, edit <code>src/App.js</code> and save to reload.
71-
To get started, edit <code>src/App.js</code> and save to reload.
72-
</p>
73-
<p className="App-intro">
74-
To get started, edit <code>src/App.js</code> and save to reload.
75-
To get started, edit <code>src/App.js</code> and save to reload.
76-
To get started, edit <code>src/App.js</code> and save to reload.
77-
To get started, edit <code>src/App.js</code> and save to reload.
78-
</p>
79-
<LastParagraph className="App-intro">
80-
Test.To get started, edit <code>src/App.js</code> and save to reload.
81-
To get started, edit <code>src/App.js</code> and save to reload.
82-
To get started, edit <code>src/App.js</code> and save to reload.
83-
To get started, edit <code>src/App.js</code> and save to reload.
84-
</LastParagraph>
85-
<p className="App-intro">
86-
To get started, edit <code>src/App.js</code> and save to reload.
87-
To get started, edit <code>src/App.js</code> and save to reload.
88-
To get started, edit <code>src/App.js</code> and save to reload.
89-
To get started, edit <code>src/App.js</code> and save to reload.
90-
</p>
91-
<p className="App-intro">
92-
To get started, edit <code>src/App.js</code> and save to reload.
93-
To get started, edit <code>src/App.js</code> and save to reload.
94-
To get started, edit <code>src/App.js</code> and save to reload.
95-
To get started, edit <code>src/App.js</code> and save to reload.
96-
</p>
97-
<p className="App-intro">
98-
To get started, edit <code>src/App.js</code> and save to reload.
99-
To get started, edit <code>src/App.js</code> and save to reload.
100-
To get started, edit <code>src/App.js</code> and save to reload.
101-
To get started, edit <code>src/App.js</code> and save to reload.
102-
</p>
103-
<p className="App-intro">
104-
To get started, edit <code>src/App.js</code> and save to reload.
105-
To get started, edit <code>src/App.js</code> and save to reload.
106-
To get started, edit <code>src/App.js</code> and save to reload.
107-
To get started, edit <code>src/App.js</code> and save to reload.
108-
</p>
109-
<p className="App-intro">
110-
To get started, edit <code>src/App.js</code> and save to reload.
111-
To get started, edit <code>src/App.js</code> and save to reload.
112-
To get started, edit <code>src/App.js</code> and save to reload.
113-
To get started, edit <code>src/App.js</code> and save to reload.
114-
</p>
115-
<p className="App-intro">
116-
To get started, edit <code>src/App.js</code> and save to reload.
117-
To get started, edit <code>src/App.js</code> and save to reload.
118-
To get started, edit <code>src/App.js</code> and save to reload.
119-
To get started, edit <code>src/App.js</code> and save to reload.
120-
</p>
121-
<p className="App-intro">
122-
To get started, edit <code>src/App.js</code> and save to reload.
123-
To get started, edit <code>src/App.js</code> and save to reload.
124-
To get started, edit <code>src/App.js</code> and save to reload.
125-
To get started, edit <code>src/App.js</code> and save to reload.
126-
</p>
127-
<p className="App-intro">
128-
To get started, edit <code>src/App.js</code> and save to reload.
129-
To get started, edit <code>src/App.js</code> and save to reload.
130-
To get started, edit <code>src/App.js</code> and save to reload.
131-
To get started, edit <code>src/App.js</code> and save to reload.
132-
</p>
133-
<p className="App-intro">
134-
To get started, edit <code>src/App.js</code> and save to reload.
135-
To get started, edit <code>src/App.js</code> and save to reload.
136-
To get started, edit <code>src/App.js</code> and save to reload.
137-
To get started, edit <code>src/App.js</code> and save to reload.
138-
</p>
32+
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(id =>
33+
<ScrollableParagraph paragraphId={id} key={id}>
34+
This paragraph {id} <br /><br />
35+
To get started, edit <code>src/App.js</code> and save to reload. <br />
36+
To get started, edit <code>src/App.js</code> and save to reload. <br />
37+
To get started, edit <code>src/App.js</code> and save to reload. <br />
38+
To get started, edit <code>src/App.js</code> and save to reload. <br />
39+
</ScrollableParagraph>
40+
)}
13941
</div>
14042
);
14143
}

‎example/src/actions.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
export const JUMP_TO = 'JUMP_TO';
2-
export const JUMP_TO_LAST = 'JUMP_TO_LAST';
1+
export const JUMP_TO_PARAGRAPH = 'JUMP_TO_PARAGRAPH';
2+
export const JUMP_TO_HEADER = 'JUMP_TO_HEADER';
33

4-
export const jumpTo = idx => ({ type: JUMP_TO, payload: idx });
5-
export const jumpToLast = () => ({ type: JUMP_TO_LAST });
4+
export const jumpToParagraph = id => ({ type: JUMP_TO_PARAGRAPH, payload: id });
5+
export const jumpToHeader = () => ({ type: JUMP_TO_HEADER });

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-redux-scroll",
3-
"version": "0.0.2",
3+
"version": "0.0.3",
44
"main": "./lib/index.js",
55
"module": "es/index.js",
66
"jsnext:main": "es/index.js",
@@ -43,6 +43,7 @@
4343
"babel-eslint": "^7.1.1",
4444
"babel-loader": "^6.4.0",
4545
"babel-plugin-transform-exponentiation-operator": "^6.22.0",
46+
"babel-plugin-transform-object-rest-spread": "^6.23.0",
4647
"babel-preset-es2015": "^6.22.0",
4748
"babel-preset-react": "^6.23.0",
4849
"babel-runtime": "^6.23.0",

‎src/middleware.js

+23-13
Original file line numberDiff line numberDiff line change
@@ -4,41 +4,51 @@ import CustomWeakSet from './utils/weakset';
44
let dispatch = null;
55
const idsManager = new IdsManager();
66
const subscriptions = {};
7+
const isProd = process.env.NODE_ENV === 'production';
78

89
const clearSubscription = (id) => {
910
if (subscriptions[id].cancelScroll) subscriptions[id].cancelScroll();
1011
idsManager.releaseId(id);
1112
subscriptions[id] = undefined;
1213
};
1314

14-
export const subscribe = (check, scroll, context, options, onEnd) => {
15+
export const subscribe = (check, scroll, context, onEnd, scrollOptions) => {
1516
const subscriptionId = idsManager.getNewId();
16-
subscriptions[subscriptionId] = { check, scroll, context, options, onEnd };
17+
subscriptions[subscriptionId] = {
18+
check,
19+
scroll,
20+
context,
21+
onEnd,
22+
scrollOptions,
23+
};
1724
return () => clearSubscription(subscriptionId);
1825
};
1926

2027
const emit = (action, state, prevState) => {
2128
const takenContexts = new CustomWeakSet();
2229
Object.keys(subscriptions)
23-
.filter(key => subscriptions[key].check(action, state, prevState))
24-
.forEach((winnerKey) => {
25-
const winner = subscriptions[winnerKey];
26-
const { context } = winner;
27-
if (takenContexts.has(context) && process.env.NODE_ENV !== 'production') {
30+
.map(key => ({
31+
key,
32+
options: subscriptions[key].check(action, state, prevState),
33+
}))
34+
.filter(({ options }) => !!options)
35+
.forEach(({ key, options }) => {
36+
const subscription = subscriptions[key];
37+
if (takenContexts.has(subscription.context) && !isProd) {
2838
console.warn( // eslint-disable-line no-console
2939
'A component was prevented from scrolling as a result of the ' +
3040
'lastest action because another scroll was triggered ' +
3141
'for the same context.'
3242
);
3343
} else {
34-
takenContexts.add(context);
35-
winner.cancelScroll = winner.scroll(
36-
context,
44+
takenContexts.add(subscription.context);
45+
subscription.cancelScroll = subscription.scroll(
46+
subscription.context,
3747
(canceled) => {
38-
winner.cancelScroll = undefined;
39-
winner.onEnd(dispatch, canceled);
48+
subscription.cancelScroll = undefined;
49+
(options.onEnd || subscription.onEnd)(dispatch, canceled);
4050
},
41-
winner.options
51+
{ ...(subscription.scrollOptions), ...(options.scrollOptions || {}) }
4252
);
4353
}
4454
});

‎src/scroll-to-when-hoc.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,11 @@ const getMatcher = (pattern) => {
1818

1919
export default (
2020
pattern,
21-
options = {},
22-
onEnd = Function.prototype,
23-
excludedProps = []
21+
{
22+
excludedProps = [],
23+
onEnd = Function.prototype,
24+
scrollOptions = {},
25+
} = {}
2426
) => (Component) => {
2527
const matcher = getMatcher(pattern);
2628

@@ -30,7 +32,8 @@ export default (
3032
this.scroll = this.scroll.bind(this);
3133
this.check = this.check.bind(this);
3234
this.state = {
33-
subscription: subscribe(this.check, this.scroll, window, options, onEnd),
35+
subscription: subscribe(
36+
this.check, this.scroll, window, onEnd, scrollOptions),
3437
};
3538
}
3639

@@ -39,8 +42,7 @@ export default (
3942
}
4043

4144
check(action, state, prevState) {
42-
return matcher(action, this.props, state, prevState) ?
43-
this.scroll.bind(this) : undefined;
45+
return matcher(action, this.props, state, prevState);
4446
}
4547

4648
scroll(...args) {

‎yarn.lock

+11
Original file line numberDiff line numberDiff line change
@@ -387,6 +387,10 @@ babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
387387
version "6.18.0"
388388
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
389389

390+
babel-plugin-syntax-object-rest-spread@^6.8.0:
391+
version "6.13.0"
392+
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
393+
390394
babel-plugin-transform-es2015-arrow-functions@^6.22.0:
391395
version "6.22.0"
392396
resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
@@ -570,6 +574,13 @@ babel-plugin-transform-flow-strip-types@^6.22.0:
570574
babel-plugin-syntax-flow "^6.18.0"
571575
babel-runtime "^6.22.0"
572576

577+
babel-plugin-transform-object-rest-spread@^6.23.0:
578+
version "6.23.0"
579+
resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.23.0.tgz#875d6bc9be761c58a2ae3feee5dc4895d8c7f921"
580+
dependencies:
581+
babel-plugin-syntax-object-rest-spread "^6.8.0"
582+
babel-runtime "^6.22.0"
583+
573584
babel-plugin-transform-react-display-name@^6.23.0:
574585
version "6.23.0"
575586
resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.23.0.tgz#4398910c358441dc4cef18787264d0412ed36b37"

0 commit comments

Comments
 (0)