Improvements wrap (#74)

* Prettier stuff

* Centralized props

* Removed the export

Author: danilowoz

src/Wrap.js

@@ -8,15 +8,6 @@ export type WrapProps = {
   children?: React.ChildrenArray<*>,
 } & ContentLoaderProps
 
-export const defaultProps = {
-  speed: 2,
-  width: 400,
-  height: 130,
-  primaryColor: '#f0f0f0',
-  secondaryColor: '#e0e0e0',
-  preserveAspectRatio: 'xMidYMid meet',
-}
-
 const Wrap = (props: WrapProps): React.Element<*> => {
   const idClip = uid()
   const idGradient = uid()

src/index.js

@@ -1,7 +1,7 @@
 //@flow
 import * as React from 'react'
+import Wrap from './Wrap'
 
-import Wrap, { defaultProps } from './Wrap'
 // Stylized
 export { default as Facebook } from './stylized/FacebookStyle'
 export { default as Instagram } from './stylized/InstagramStyle'
@@ -21,11 +21,23 @@ export type Props = {
   className: string,
 }
 
+const defaultProps = {
+  speed: 2,
+  width: 400,
+  height: 130,
+  primaryColor: '#f0f0f0',
+  secondaryColor: '#e0e0e0',
+  preserveAspectRatio: 'xMidYMid meet',
+}
+
+const InitialComponent = props => (
+  <rect x="0" y="0" rx="5" ry="5" width={props.width} height={props.height} />
+)
+
 const ContentLoader = (props: Props) => {
   const mergedProps = { ...defaultProps, ...props }
-  const children = props.children
-    ? props.children
-    : <rect x="0" y="0" rx="5" ry="5" width={mergedProps.width} height={mergedProps.height} />
+  const children = props.children ? props.children : <InitialComponent {...mergedProps} />
+
   return <Wrap {...mergedProps}>{children}</Wrap>
 }
 

src/stylized/BulletListStyle.js

@@ -1,10 +1,10 @@
 //@flow
 import * as React from 'react'
-import Wrap, { defaultProps } from '../Wrap'
+import ContentLoader from '../index'
 import type { WrapProps } from '../Wrap'
 
 const BulletListStyle = (props: WrapProps): React.Element<*> => (
-  <Wrap {...defaultProps} {...props} >
+  <ContentLoader {...props}>
     <circle cx="10" cy="20" r="8" />
     <rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
     <circle cx="10" cy="50" r="8" />
@@ -13,7 +13,7 @@ const BulletListStyle = (props: WrapProps): React.Element<*> => (
     <rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
     <circle cx="10" cy="110" r="8" />
     <rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
-  </Wrap>
+  </ContentLoader>
 )
 
 export default BulletListStyle

src/stylized/CodeStyle.js

@@ -1,10 +1,10 @@
 //@flow
 import * as React from 'react'
-import Wrap, { defaultProps } from '../Wrap'
+import ContentLoader from '../index'
 import type { WrapProps } from '../Wrap'
 
 const CodeStyle = (props: WrapProps): React.Element<*> => (
-  <Wrap {...defaultProps} {...props} >
+  <ContentLoader {...props}>
     <rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
     <rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
     <rect x="190" y="0" rx="3" ry="3" width="10" height="10" />
@@ -17,7 +17,7 @@ const CodeStyle = (props: WrapProps): React.Element<*> => (
     <rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
 
     <rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
-  </Wrap>
+  </ContentLoader>
 )
 
 export default CodeStyle

src/stylized/FacebookStyle.js

@@ -1,17 +1,17 @@
 //@flow
 import * as React from 'react'
-import Wrap, { defaultProps } from '../Wrap'
+import ContentLoader from '../index'
 import type { WrapProps } from '../Wrap'
 
 const FacebookStyle = (props: WrapProps): React.Element<*> => (
-  <Wrap {...defaultProps} {...props} >
+  <ContentLoader {...props}>
     <rect x="70" y="15" rx="4" ry="4" width="117" height="6.4" />
     <rect x="70" y="35" rx="3" ry="3" width="85" height="6.4" />
     <rect x="0" y="80" rx="3" ry="3" width="350" height="6.4" />
     <rect x="0" y="100" rx="3" ry="3" width="380" height="6.4" />
     <rect x="0" y="120" rx="3" ry="3" width="201" height="6.4" />
     <circle cx="30" cy="30" r="30" />
-  </Wrap>
+  </ContentLoader>
 )
 
 export default FacebookStyle

src/stylized/InstagramStyle.js

@@ -1,16 +1,16 @@
 //@flow
 import * as React from 'react'
-import Wrap, { defaultProps } from '../Wrap'
+import ContentLoader from '../index'
 import type { WrapProps } from '../Wrap'
 
 const InstagramStyle = (props: WrapProps): React.Element<*> => (
-  <Wrap {...defaultProps} {...props} height={480}>
+  <ContentLoader {...props} height={480}>
     <circle cx="30" cy="30" r="30" />
 
     <rect x="75" y="13" rx="4" ry="4" width="100" height="13" />
     <rect x="75" y="37" rx="4" ry="4" width="50" height="8" />
     <rect x="0" y="70" rx="5" ry="5" width="400" height="400" />
-  </Wrap>
+  </ContentLoader>
 )
 
 export default InstagramStyle

src/stylized/ListStyle.js

@@ -1,17 +1,17 @@
 //@flow
 import * as React from 'react'
-import Wrap, { defaultProps } from '../Wrap'
+import ContentLoader from '../index'
 import type { WrapProps } from '../Wrap'
 
 const ListStyle = (props: WrapProps): React.Element<*> => (
-  <Wrap {...defaultProps} {...props}>
+  <ContentLoader {...props}>
     <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
     <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
     <rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
     <rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
     <rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
     <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
-  </Wrap>
+  </ContentLoader>
 )
 
 export default ListStyle

src/uid.js

@@ -1,2 +1,5 @@
 // @flow
-export default (): string => Math.random().toString(36).substring(2)
+export default (): string =>
+  Math.random()
+    .toString(36)
+    .substring(2)