Skip to content

Commit db40564

Browse files
renatoribrenatorib
committed
add prettier and fix bugs
1 parent 60e3c0e commit db40564

12 files changed

+70
-61
lines changed

‎.prettierrc

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"requirePragma": false,
3+
"printWidth": 80,
4+
"tabWidth": 2,
5+
"useTabs": false,
6+
"semi": false,
7+
"singleQuote": true,
8+
"trailingComma": "es5",
9+
"bracketSpacing": true,
10+
"jsxBracketSameLine": false
11+
}

‎.storybook/components/Block.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from 'react';
1+
import React from 'react'
22

33
const wrapperStyle = {
44
paddingBottom: '20px',
5-
};
5+
}
66

77
const titleStyle = {
88
textTransform: 'uppercase',
@@ -12,17 +12,17 @@ const titleStyle = {
1212
color: '#999',
1313
paddingBottom: '5px',
1414
fontWeight: 'bold',
15-
};
15+
}
1616

1717
const contentStyle = {
1818
border: '1px solid #DDD',
19-
};
19+
}
2020

2121
const Block = ({ children, title }) => (
2222
<div style={wrapperStyle}>
2323
<div style={titleStyle}>{title}</div>
2424
<div style={contentStyle}>{children}</div>
2525
</div>
26-
);
26+
)
2727

28-
export default Block;
28+
export default Block

‎.storybook/components/Code.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import React from 'react';
2-
import SyntaxHighlighter from 'react-syntax-highlighter';
3-
import { github as theme } from 'react-syntax-highlighter/dist/styles';
4-
import Block from './Block';
1+
import React from 'react'
2+
import SyntaxHighlighter from 'react-syntax-highlighter'
3+
import { github as theme } from 'react-syntax-highlighter/dist/styles'
4+
import Block from './Block'
55

66
const Code = ({ children }) => (
77
<Block title="Code">
88
<SyntaxHighlighter language="jsx" style={theme} customStyle={{ margin: 0 }}>
99
{children}
1010
</SyntaxHighlighter>
1111
</Block>
12-
);
12+
)
1313

14-
export default Code;
14+
export default Code

‎.storybook/components/MobileBreakpoint.js

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
import React from 'react';
2-
import withSizes from '../../src/withSizes';
1+
import React from 'react'
2+
import withSizes from '../../src/withSizes'
33

44
const MobileBreakpoint = ({ isMobile, breakpoint, width }) => (
55
<div>
6-
<div>breakpoint: {breakpoint} | width: {width}</div>
6+
<div>
7+
breakpoint: {breakpoint} | width: {width}
8+
</div>
79
<div>{isMobile ? 'Is Mobile' : 'Is Not Mobile'}</div>
8-
<br /><br />
10+
<br />
11+
<br />
912
</div>
10-
);
13+
)
1114

1215
const mapSizesToProps = ({ width }, { breakpoint }) => ({
1316
isMobile: width < breakpoint,
1417
width,
15-
});
18+
})
1619

17-
export default withSizes(mapSizesToProps)(MobileBreakpoint);
20+
export default withSizes(mapSizesToProps)(MobileBreakpoint)

‎.storybook/components/Result.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
import React from 'react';
2-
import Block from './Block';
1+
import React from 'react'
2+
import Block from './Block'
33

4-
const Result = ({ children }) => (
5-
<Block title="Result">
6-
{children}
7-
</Block>
8-
);
4+
const Result = ({ children }) => <Block title="Result">{children}</Block>
95

10-
export default Result;
6+
export default Result

‎.storybook/components/index.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
export Block from './Block';
2-
export Code from './Code';
3-
export Result from './Result';
1+
export Block from './Block'
2+
export Code from './Code'
3+
export Result from './Result'

‎.storybook/stories/index.js

+11-10
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
1-
import React from 'react';
2-
import { storiesOf, action, linkTo } from '@kadira/storybook';
3-
import { Code, Result } from '../components';
4-
import MobileBreakpoint from '../components/MobileBreakpoint';
5-
import withSizes from '../../src/withSizes';
1+
import React from 'react'
2+
import { storiesOf, action, linkTo } from '@kadira/storybook'
3+
import { Code, Result } from '../components'
4+
import MobileBreakpoint from '../components/MobileBreakpoint'
5+
import withSizes from '../../src/withSizes'
66

77
const mapSizesToProps = sizes => ({
88
backgroundColor: sizes.width > 800 ? 'green' : 'blue',
99
isMobile: withSizes.isMobile(sizes),
1010
isTablet: withSizes.isTablet(sizes),
1111
isDesktop: withSizes.isDesktop(sizes),
12-
});
12+
})
1313

1414
const ExampleSizedComponent = withSizes(mapSizesToProps)(
1515
({ isMobile, isTablet, isDesktop, backgroundColor }) => (
1616
<div style={{ backgroundColor, color: 'white', padding: '30px' }}>
17-
<div><strong>Resize your window</strong></div>
17+
<div>
18+
<strong>Resize your window</strong>
19+
</div>
1820
{isMobile && 'isMobile '}
1921
{isTablet && 'isTablet '}
2022
{isDesktop && 'isDesktop '}
2123
</div>
2224
)
23-
);
25+
)
2426

2527
storiesOf('Sizes', module)
2628
.add('default behavior', () => (
@@ -29,7 +31,7 @@ storiesOf('Sizes', module)
2931
<ExampleSizedComponent />
3032
</Result>
3133
<Code>
32-
{`import React from 'react';
34+
{`import React from 'react';
3335
import withSizes from 'react-sizes';
3436
3537
const mapSizesToProps = sizes => ({
@@ -60,4 +62,3 @@ const ExampleSizedComponent = withSizes(mapSizesToProps)(
6062
<MobileBreakpoint breakpoint={700} />
6163
</div>
6264
))
63-
;

‎src/index.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import withSizes from './withSizes'
2-
import * as presets from './presets'
3-
4-
export default Object.assign(withSizes, presets)
2+
import createSizedComponent from './createSizedComponent'
3+
import presets from './presets'
54

5+
export { createSizedComponent, presets, withSizes }
6+
export default withSizes

‎src/presets.js

+6-7
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@ export const isMobile = ({ width }) => width < 480
22
export const isTablet = ({ width }) => width >= 480 && width < 1024
33
export const isDesktop = ({ width }) => width >= 1024
44

5-
export const isGtMobile = (sizes) => !isMobile(sizes)
6-
export const isGtTablet = (sizes) => isDesktop(sizes)
5+
export const isGtMobile = sizes => !isMobile(sizes)
6+
export const isGtTablet = sizes => isDesktop(sizes)
77

8-
export const isStTablet = (sizes) => isMobile(sizes)
9-
export const isStDesktop = (sizes) => !isDesktop(sizes)
10-
11-
export const isTabletAndGreater = (sizes) => !isMobile(sizes)
12-
export const isTabletAndSmaller = (sizes) => !isStDesktop(sizes)
8+
export const isStTablet = sizes => isMobile(sizes)
9+
export const isStDesktop = sizes => !isDesktop(sizes)
1310

11+
export const isTabletAndGreater = sizes => !isMobile(sizes)
12+
export const isTabletAndSmaller = sizes => !isStDesktop(sizes)

‎src/utils/getDisplayName.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
const getDisplayName = (Component) => (
1+
const getDisplayName = Component =>
22
Component.displayName ||
33
Component.name ||
44
(typeof Component === 'string' && Component.length > 0
55
? Component
66
: 'Unknown')
7-
)
87

98
export default getDisplayName

‎src/utils/getWindowSizes.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const getSizes = () => {
1+
const getWindowSizes = () => {
22
const canUseDOM = typeof window !== 'undefined'
33

44
return {
@@ -8,4 +8,4 @@ const getSizes = () => {
88
}
99
}
1010

11-
export default getSizes
11+
export default getWindowSizes

‎src/withSizes.js

+6-7
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ import getDisplayName from './utils/getDisplayName'
77
import shallowDiff from './utils/shallowDiff'
88
import getWindowSizes from './utils/getWindowSizes'
99

10-
const debug = process && process.env &&
11-
process.env.NODE_ENV === 'debug'
10+
import * as presets from './presets'
1211

13-
const withSizes = (...mappedSizesToProps) => (WrappedComponent) => {
12+
const debug = process && process.env && process.env.NODE_ENV === 'debug'
13+
14+
const withSizes = (...mappedSizesToProps) => WrappedComponent => {
1415
const parseMappedSizesToProps = (dimensions, props) =>
1516
mappedSizesToProps
1617
.map(check => check(dimensions, props))
@@ -34,9 +35,7 @@ const withSizes = (...mappedSizesToProps) => (WrappedComponent) => {
3435
}
3536
}
3637

37-
throttledDispatchSizes = (
38-
throttle(this.dispatchSizes, 200)
39-
)
38+
throttledDispatchSizes = throttle(this.dispatchSizes, 200)
4039

4140
/* Lifecycles */
4241

@@ -60,4 +59,4 @@ const withSizes = (...mappedSizesToProps) => (WrappedComponent) => {
6059
}
6160
}
6261

63-
export default withSizes
62+
export default Object.assign(withSizes, { ...presets })

0 commit comments

Comments
 (0)