From db405644e3c1736cd6114059bc76d30226cf7138 Mon Sep 17 00:00:00 2001 From: Renato Ribeiro Date: Thu, 30 Nov 2017 22:42:31 -0200 Subject: [PATCH] add prettier and fix bugs --- .prettierrc | 11 +++++++++++ .storybook/components/Block.js | 12 ++++++------ .storybook/components/Code.js | 12 ++++++------ .storybook/components/MobileBreakpoint.js | 17 ++++++++++------- .storybook/components/Result.js | 12 ++++-------- .storybook/components/index.js | 6 +++--- .storybook/stories/index.js | 21 +++++++++++---------- src/index.js | 7 ++++--- src/presets.js | 13 ++++++------- src/utils/getDisplayName.js | 3 +-- src/utils/getWindowSizes.js | 4 ++-- src/withSizes.js | 13 ++++++------- 12 files changed, 70 insertions(+), 61 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..ea33558 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,11 @@ +{ + "requirePragma": false, + "printWidth": 80, + "tabWidth": 2, + "useTabs": false, + "semi": false, + "singleQuote": true, + "trailingComma": "es5", + "bracketSpacing": true, + "jsxBracketSameLine": false +} diff --git a/.storybook/components/Block.js b/.storybook/components/Block.js index 7a090ff..47b3ff0 100644 --- a/.storybook/components/Block.js +++ b/.storybook/components/Block.js @@ -1,8 +1,8 @@ -import React from 'react'; +import React from 'react' const wrapperStyle = { paddingBottom: '20px', -}; +} const titleStyle = { textTransform: 'uppercase', @@ -12,17 +12,17 @@ const titleStyle = { color: '#999', paddingBottom: '5px', fontWeight: 'bold', -}; +} const contentStyle = { border: '1px solid #DDD', -}; +} const Block = ({ children, title }) => (
{title}
{children}
-); +) -export default Block; +export default Block diff --git a/.storybook/components/Code.js b/.storybook/components/Code.js index b323797..b2a9f62 100644 --- a/.storybook/components/Code.js +++ b/.storybook/components/Code.js @@ -1,7 +1,7 @@ -import React from 'react'; -import SyntaxHighlighter from 'react-syntax-highlighter'; -import { github as theme } from 'react-syntax-highlighter/dist/styles'; -import Block from './Block'; +import React from 'react' +import SyntaxHighlighter from 'react-syntax-highlighter' +import { github as theme } from 'react-syntax-highlighter/dist/styles' +import Block from './Block' const Code = ({ children }) => ( @@ -9,6 +9,6 @@ const Code = ({ children }) => ( {children} -); +) -export default Code; +export default Code diff --git a/.storybook/components/MobileBreakpoint.js b/.storybook/components/MobileBreakpoint.js index cd5dfd1..738058b 100644 --- a/.storybook/components/MobileBreakpoint.js +++ b/.storybook/components/MobileBreakpoint.js @@ -1,17 +1,20 @@ -import React from 'react'; -import withSizes from '../../src/withSizes'; +import React from 'react' +import withSizes from '../../src/withSizes' const MobileBreakpoint = ({ isMobile, breakpoint, width }) => (
-
breakpoint: {breakpoint} | width: {width}
+
+ breakpoint: {breakpoint} | width: {width} +
{isMobile ? 'Is Mobile' : 'Is Not Mobile'}
-

+
+
-); +) const mapSizesToProps = ({ width }, { breakpoint }) => ({ isMobile: width < breakpoint, width, -}); +}) -export default withSizes(mapSizesToProps)(MobileBreakpoint); +export default withSizes(mapSizesToProps)(MobileBreakpoint) diff --git a/.storybook/components/Result.js b/.storybook/components/Result.js index 05bf533..c85b3ab 100644 --- a/.storybook/components/Result.js +++ b/.storybook/components/Result.js @@ -1,10 +1,6 @@ -import React from 'react'; -import Block from './Block'; +import React from 'react' +import Block from './Block' -const Result = ({ children }) => ( - - {children} - -); +const Result = ({ children }) => {children} -export default Result; +export default Result diff --git a/.storybook/components/index.js b/.storybook/components/index.js index ead3f97..4b225d3 100644 --- a/.storybook/components/index.js +++ b/.storybook/components/index.js @@ -1,3 +1,3 @@ -export Block from './Block'; -export Code from './Code'; -export Result from './Result'; +export Block from './Block' +export Code from './Code' +export Result from './Result' diff --git a/.storybook/stories/index.js b/.storybook/stories/index.js index ed44213..e06b920 100644 --- a/.storybook/stories/index.js +++ b/.storybook/stories/index.js @@ -1,26 +1,28 @@ -import React from 'react'; -import { storiesOf, action, linkTo } from '@kadira/storybook'; -import { Code, Result } from '../components'; -import MobileBreakpoint from '../components/MobileBreakpoint'; -import withSizes from '../../src/withSizes'; +import React from 'react' +import { storiesOf, action, linkTo } from '@kadira/storybook' +import { Code, Result } from '../components' +import MobileBreakpoint from '../components/MobileBreakpoint' +import withSizes from '../../src/withSizes' const mapSizesToProps = sizes => ({ backgroundColor: sizes.width > 800 ? 'green' : 'blue', isMobile: withSizes.isMobile(sizes), isTablet: withSizes.isTablet(sizes), isDesktop: withSizes.isDesktop(sizes), -}); +}) const ExampleSizedComponent = withSizes(mapSizesToProps)( ({ isMobile, isTablet, isDesktop, backgroundColor }) => (
-
Resize your window
+
+ Resize your window +
{isMobile && 'isMobile '} {isTablet && 'isTablet '} {isDesktop && 'isDesktop '}
) -); +) storiesOf('Sizes', module) .add('default behavior', () => ( @@ -29,7 +31,7 @@ storiesOf('Sizes', module) -{`import React from 'react'; + {`import React from 'react'; import withSizes from 'react-sizes'; const mapSizesToProps = sizes => ({ @@ -60,4 +62,3 @@ const ExampleSizedComponent = withSizes(mapSizesToProps)( )) -; diff --git a/src/index.js b/src/index.js index a4e7dd7..96ae634 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import withSizes from './withSizes' -import * as presets from './presets' - -export default Object.assign(withSizes, presets) +import createSizedComponent from './createSizedComponent' +import presets from './presets' +export { createSizedComponent, presets, withSizes } +export default withSizes diff --git a/src/presets.js b/src/presets.js index f34c2af..f45b772 100644 --- a/src/presets.js +++ b/src/presets.js @@ -2,12 +2,11 @@ export const isMobile = ({ width }) => width < 480 export const isTablet = ({ width }) => width >= 480 && width < 1024 export const isDesktop = ({ width }) => width >= 1024 -export const isGtMobile = (sizes) => !isMobile(sizes) -export const isGtTablet = (sizes) => isDesktop(sizes) +export const isGtMobile = sizes => !isMobile(sizes) +export const isGtTablet = sizes => isDesktop(sizes) -export const isStTablet = (sizes) => isMobile(sizes) -export const isStDesktop = (sizes) => !isDesktop(sizes) - -export const isTabletAndGreater = (sizes) => !isMobile(sizes) -export const isTabletAndSmaller = (sizes) => !isStDesktop(sizes) +export const isStTablet = sizes => isMobile(sizes) +export const isStDesktop = sizes => !isDesktop(sizes) +export const isTabletAndGreater = sizes => !isMobile(sizes) +export const isTabletAndSmaller = sizes => !isStDesktop(sizes) diff --git a/src/utils/getDisplayName.js b/src/utils/getDisplayName.js index c6e14a1..884322a 100644 --- a/src/utils/getDisplayName.js +++ b/src/utils/getDisplayName.js @@ -1,9 +1,8 @@ -const getDisplayName = (Component) => ( +const getDisplayName = Component => Component.displayName || Component.name || (typeof Component === 'string' && Component.length > 0 ? Component : 'Unknown') -) export default getDisplayName diff --git a/src/utils/getWindowSizes.js b/src/utils/getWindowSizes.js index b257e54..cd555a6 100644 --- a/src/utils/getWindowSizes.js +++ b/src/utils/getWindowSizes.js @@ -1,4 +1,4 @@ -const getSizes = () => { +const getWindowSizes = () => { const canUseDOM = typeof window !== 'undefined' return { @@ -8,4 +8,4 @@ const getSizes = () => { } } -export default getSizes +export default getWindowSizes diff --git a/src/withSizes.js b/src/withSizes.js index a737ca7..62188a4 100644 --- a/src/withSizes.js +++ b/src/withSizes.js @@ -7,10 +7,11 @@ import getDisplayName from './utils/getDisplayName' import shallowDiff from './utils/shallowDiff' import getWindowSizes from './utils/getWindowSizes' -const debug = process && process.env && - process.env.NODE_ENV === 'debug' +import * as presets from './presets' -const withSizes = (...mappedSizesToProps) => (WrappedComponent) => { +const debug = process && process.env && process.env.NODE_ENV === 'debug' + +const withSizes = (...mappedSizesToProps) => WrappedComponent => { const parseMappedSizesToProps = (dimensions, props) => mappedSizesToProps .map(check => check(dimensions, props)) @@ -34,9 +35,7 @@ const withSizes = (...mappedSizesToProps) => (WrappedComponent) => { } } - throttledDispatchSizes = ( - throttle(this.dispatchSizes, 200) - ) + throttledDispatchSizes = throttle(this.dispatchSizes, 200) /* Lifecycles */ @@ -60,4 +59,4 @@ const withSizes = (...mappedSizesToProps) => (WrappedComponent) => { } } -export default withSizes +export default Object.assign(withSizes, { ...presets })