Skip to content

Commit 3059488

Browse files
renatoribrenatorib
committed
add actual props to mapSizesToProps callback
1 parent 4f348af commit 3059488

File tree

9 files changed

+270
-137
lines changed

9 files changed

+270
-137
lines changed

‎.storybook/components/MobileBreakpoint.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import withSizes from '../../lib/withSizes';
3+
4+
const MobileBreakpoint = ({ isMobile, breakpoint, width }) => (
5+
<div>
6+
<div>breakpoint: {breakpoint} | width: {width}</div>
7+
<div>{isMobile ? 'Is Mobile' : 'Is Not Mobile'}</div>
8+
<br /><br />
9+
</div>
10+
);
11+
12+
const mapSizesToProps = ({ width }, { breakpoint }) => ({
13+
isMobile: width < breakpoint,
14+
width,
15+
});
16+
17+
export default withSizes(mapSizesToProps)(MobileBreakpoint);

‎.storybook/stories/index.js

+21-11
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import React from 'react';
22
import { storiesOf, action, linkTo } from '@kadira/storybook';
33
import { Code, Result } from '../components';
4-
import Sizes from '../../lib/Sizes';
4+
import MobileBreakpoint from '../components/MobileBreakpoint';
5+
import withSizes from '../../lib/withSizes';
56

67
const mapSizesToProps = sizes => ({
78
backgroundColor: sizes.width > 800 ? 'green' : 'blue',
8-
isMobile: Sizes.isMobile(sizes),
9-
isTablet: Sizes.isTablet(sizes),
10-
isDesktop: Sizes.isDesktop(sizes),
9+
isMobile: withSizes.isMobile(sizes),
10+
isTablet: withSizes.isTablet(sizes),
11+
isDesktop: withSizes.isDesktop(sizes),
1112
});
1213

13-
const ExampleSizedComponent = Sizes(mapSizesToProps)(
14+
const ExampleSizedComponent = withSizes(mapSizesToProps)(
1415
({ isMobile, isTablet, isDesktop, backgroundColor }) => (
1516
<div style={{ backgroundColor, color: 'white', padding: '30px' }}>
1617
<div><strong>Resize your window</strong></div>
@@ -29,16 +30,16 @@ storiesOf('Sizes', module)
2930
</Result>
3031
<Code>
3132
{`import React from 'react';
32-
import Sizes from 'react-sizes';
33+
import withSizes from 'react-sizes';
3334
3435
const mapSizesToProps = sizes => ({
3536
backgroundColor: sizes.width > 800 ? 'green' : 'blue',
36-
isMobile: Sizes.isMobile(sizes),
37-
isTablet: Sizes.isTablet(sizes),
38-
isDesktop: Sizes.isDesktop(sizes),
37+
isMobile: withSizes.isMobile(sizes),
38+
isTablet: withSizes.isTablet(sizes),
39+
isDesktop: withSizes.isDesktop(sizes),
3940
});
4041
41-
const ExampleSizedComponent = Sizes(mapSizesToProps)(
42+
const ExampleSizedComponent = withSizes(mapSizesToProps)(
4243
({ isMobile, isTablet, isDesktop, backgroundColor }) => (
4344
<div><strong>Resize your window</strong></div>
4445
<div style={{ backgroundColor, color: 'white', padding: '30px' }}>
@@ -50,4 +51,13 @@ const ExampleSizedComponent = Sizes(mapSizesToProps)(
5051
);`}
5152
</Code>
5253
</div>
53-
));
54+
))
55+
56+
.add('mobileBreakpoint', () => (
57+
<div>
58+
<MobileBreakpoint breakpoint={300} />
59+
<MobileBreakpoint breakpoint={500} />
60+
<MobileBreakpoint breakpoint={700} />
61+
</div>
62+
))
63+
;

‎.yarnclean

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# test directories
2+
__tests__
3+
test
4+
tests
5+
powered-test
6+
7+
# asset directories
8+
docs
9+
doc
10+
website
11+
images
12+
assets
13+
14+
# examples
15+
example
16+
examples
17+
18+
# code coverage directories
19+
coverage
20+
.nyc_output
21+
22+
# build scripts
23+
Makefile
24+
Gulpfile.js
25+
Gruntfile.js
26+
27+
# configs
28+
.tern-project
29+
.gitattributes
30+
.editorconfig
31+
.*ignore
32+
.eslintrc
33+
.jshintrc
34+
.flowconfig
35+
.documentup.json
36+
.yarn-metadata.json
37+
.*.yml
38+
*.yml
39+
40+
# misc
41+
*.gz
42+
*.md

‎README.md

+55-32
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ But it's not limited to this case. Just use that at your needs.
2727
#### With class component.
2828
```jsx
2929
import React, { Component } from 'react';
30-
import Sizes from 'react-sizes';
30+
import withSizes from 'react-sizes';
3131

3232
class MyComponent extends Component {
3333
render() {
@@ -41,16 +41,16 @@ const mapSizesToProps = ({ width }) => ({
4141
isMobile: width < 480,
4242
});
4343

44-
export Sizes(mapSizesToProps)(MyComponent);
44+
export default withSizes(mapSizesToProps)(MyComponent);
4545
```
4646
You can play with this example [here](https://codesandbox.io/s/Rg0DDOWnE).
4747

4848
#### As decorator.
4949
```jsx
5050
import React from 'react';
51-
import Sizes from 'react-sizes';
51+
import withSizes from 'react-sizes';
5252

53-
@Sizes(({ width }) => ({ isMobile: width < 480 }))
53+
@withSizes(({ width }) => ({ isMobile: width < 480 }))
5454
class MyComponent extends Component {
5555
render() {
5656
return (
@@ -62,10 +62,33 @@ class MyComponent extends Component {
6262
export default MyComponent;
6363
```
6464

65+
#### Interoperate with other libraries.
66+
```jsx
67+
import React from 'react';
68+
import withSizes from 'react-sizes';
69+
import { withState, compose } from 'recompose';
70+
71+
const enhancer = compose(
72+
withState('counter', 'setCounter', 0),
73+
withSizes(({ width }) => ({ isMobile: width < 480 })),
74+
);
75+
76+
const MyComponent = enhancer(({ isMobile, counter, setCounter }) => (
77+
<div>
78+
<div>
79+
Count: {counter} <button onClick={() => setCounter(n => n + 1)}>Increment</button>
80+
</div>
81+
<div>{isMobile ? 'Is Mobile' : 'Is Not Mobile'}</div>
82+
</div>
83+
));
84+
85+
export default MyComponent;
86+
```
87+
6588
#### With functional component.
6689
```jsx
6790
import React from 'react';
68-
import Sizes from 'react-sizes';
91+
import withSizes from 'react-sizes';
6992

7093
const MyComponent = ({ isMobile }) => (
7194
<div>{isMobile ? 'Is Mobile' : 'Is Not Mobile'}</div>
@@ -75,30 +98,30 @@ const mapSizesToProps = ({ width }) => ({
7598
isMobile: width < 480,
7699
});
77100

78-
export Sizes(mapSizesToProps)(MyComponent);
101+
export default withSizes(mapSizesToProps)(MyComponent);
79102
```
80103

81-
#### Interoperate with other libraries.
104+
#### Mess with props.
105+
(Added in 0.1.0)
82106
```jsx
83107
import React from 'react';
84-
import Sizes from 'react-sizes';
85-
import { withState, compose } from 'recompose';
108+
import withSizes from 'react-sizes';
86109

87-
const enhancer = compose(
88-
withState('counter', 'setCounter', 0),
89-
Sizes(({ width }) => ({ isMobile: width < 480 })),
110+
const MyComponent = ({ isMobile }) => (
111+
<div>{isMobile ? 'Is Mobile' : 'Is Not Mobile'}</div>
90112
);
91113

92-
const MyComponent = enhancer(({ isMobile, counter, setCounter }) => (
93-
<div>
94-
<div>
95-
Count: {counter} <button onClick={() => setCounter(n => n + 1)}>Increment</button>
96-
</div>
97-
<div>{isMobile ? 'Is Mobile' : 'Is Not Mobile'}</div>
98-
</div>
99-
));
114+
const mapSizesToProps = ({ width }, { mobileBreakpoint }) => ({
115+
isMobile: width < mobileBreakpoint,
116+
});
100117

101-
export default MyComponent;
118+
export default withSizes(mapSizesToProps)(MyComponent);
119+
```
120+
then:
121+
```jsx
122+
<MyComponent mobileBreakpoint={480} />
123+
<MyComponent mobileBreakpoint={400} />
124+
<MyComponent mobileBreakpoint={600} />
102125
```
103126

104127
#### With presets selectors.
@@ -108,26 +131,26 @@ export default MyComponent;
108131
- });
109132

110133
+ const mapSizesToProps = sizes => ({
111-
+ isMobile: Sizes.isMobile(sizes),
134+
+ isMobile: withSizes.isMobile(sizes),
112135
+ });
113136
```
114137

115138
## Presets Selectors
116139

117-
You can check all **our** presets selectors at our main code `src/Sizes.js`.
140+
You can check all **our** presets selectors at our main code `src/withSizes.js`.
118141
```js
119-
Sizes.isMobile = ({ width }) => width < 480;
120-
Sizes.isTablet = ({ width }) => width >= 480 && width < 1024;
121-
Sizes.isDesktop = ({ width }) => width >= 1024;
142+
withSizes.isMobile = ({ width }) => width < 480;
143+
withSizes.isTablet = ({ width }) => width >= 480 && width < 1024;
144+
withSizes.isDesktop = ({ width }) => width >= 1024;
122145

123-
Sizes.isGtMobile = (sizes) => !Sizes.isMobile(sizes);
124-
Sizes.isGtTablet = (sizes) => Sizes.isDesktop(sizes);
146+
withSizes.isGtMobile = (sizes) => !withSizes.isMobile(sizes);
147+
withSizes.isGtTablet = (sizes) => withSizes.isDesktop(sizes);
125148

126-
Sizes.isStTablet = (sizes) => Sizes.isMobile(sizes);
127-
Sizes.isStDesktop = (sizes) => !Sizes.isStDesktop(sizes);
149+
withSizes.isStTablet = (sizes) => withSizes.isMobile(sizes);
150+
withSizes.isStDesktop = (sizes) => !withSizes.isStDesktop(sizes);
128151

129-
Sizes.isTabletAndGreater = (sizes) => !Sizes.isMobile(sizes);
130-
Sizes.isTabletAndSmaller = (sizes) => !Sizes.isStDesktop(sizes);
152+
withSizes.isTabletAndGreater = (sizes) => !withSizes.isMobile(sizes);
153+
withSizes.isTabletAndSmaller = (sizes) => !withSizes.isStDesktop(sizes);
131154
```
132155

133156
If it don't fit to your needs, you can create your own selectors.

‎index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require('./lib/Sizes');
1+
module.exports = require('./lib/withSizes');

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"dev": "chokidar 'src/**/*' -c 'yarn build'",
1010
"storybook": "start-storybook -p 6006",
1111
"build-storybook": "build-storybook",
12-
"pub": "yarn build && np"
12+
"pub": "npm run build && np"
1313
},
1414
"repository": {
1515
"type": "git",
@@ -47,7 +47,7 @@
4747
"babel-preset-es2015": "^6.24.1",
4848
"babel-preset-react": "^6.24.1",
4949
"babel-preset-stage-2": "^6.24.1",
50-
"chokidar": "^1.6.1",
50+
"chokidar-cli": "^1.2.0",
5151
"del-cli": "^0.2.1",
5252
"np": "^2.13.1",
5353
"react-dom": "^15.5.3",

‎src/Sizes.js

-88
This file was deleted.

0 commit comments

Comments
 (0)