kylefang/react-content-loader
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-content-loader.git synced 2026-05-19 11:34:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added named exports and removed type prop (#72)

Browse Source
This commit is contained in:
Mateusz Burzyński
2018-01-19 15:06:57 +01:00
committed by Danilo Woznica
parent 044e99df45
commit a3d1878800
10 changed files with 39 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -32,9 +32,10 @@ Npm: `$ npm i react-content-loader --save`
```jsx
// import the component
import ContentLoader from 'react-content-loader'
import ContentLoader, { Facebook } from 'react-content-loader'
const MyLoader = () => <ContentLoader type="facebook" />
const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook />
```
**Or in custom mode, using the
@@ -55,7 +56,6 @@ const MyLoader = () => (
| Name | Type | Default | Description |
| ------------------- | -------- | --------------- | --------------------------------------------------------------- |
| type | _String_ | `facebook` | Options: `facebook`, `instagram`, `list`, `bullet-list`, `code` |
| speed | _Number_ | `2` | Animation speed |
| width | _Number_ | `400` | **viewBox** width of SVG |
| height | _Number_ | `130` | **viewBox** height of SVG |

9
src/Wrap.js
View File

@@ -8,6 +8,15 @@ 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()

49
src/index.js
View File

@@ -1,13 +1,13 @@
//@flow
import * as React from 'react'
import Wrap from './Wrap'
import Wrap, { defaultProps } from './Wrap'
// Stylized
import FacebookStyle from './stylized/FacebookStyle'
import InstagramStyle from './stylized/InstagramStyle'
import CodeStyle from './stylized/CodeStyle'
import ListStyle from './stylized/ListStyle'
import BulletListStyle from './stylized/BulletListStyle'
export { default as Facebook } from './stylized/FacebookStyle'
export { default as Instagram } from './stylized/InstagramStyle'
export { default as Code } from './stylized/CodeStyle'
export { default as List } from './stylized/ListStyle'
export { default as BulletList } from './stylized/BulletListStyle'
export type Props = {
style: { [key: string]: any },
@@ -22,38 +22,11 @@ export type Props = {
}
const ContentLoader = (props: Props) => {
if (props.children) {
return <Wrap {...props}>{props.children}</Wrap>
}
switch (props.type.toLowerCase()) {
case 'instagram':
return <InstagramStyle {...props} />
case 'code':
return <CodeStyle {...props} />
case 'list':
return <ListStyle {...props} />
case 'bullet-list':
return <BulletListStyle {...props} />
default:
case 'facebook':
return <FacebookStyle {...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} />
return <Wrap {...mergedProps}>{children}</Wrap>
}
ContentLoader.defaultProps = {
type: 'facebook',
speed: 2,
width: 400,
height: 130,
primaryColor: '#f0f0f0',
secondaryColor: '#e0e0e0',
preserveAspectRatio: 'xMidYMid meet',
className: '',
};
export default ContentLoader

4
src/stylized/BulletListStyle.js
View File

@@ -1,10 +1,10 @@
//@flow
import * as React from 'react'
import Wrap from '../Wrap'
import Wrap, { defaultProps } from '../Wrap'
import type { WrapProps } from '../Wrap'
const BulletListStyle = (props: WrapProps): React.Element<*> => (
<Wrap {...props}>
<Wrap {...defaultProps} {...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" />

4
src/stylized/CodeStyle.js
View File

@@ -1,10 +1,10 @@
//@flow
import * as React from 'react'
import Wrap from '../Wrap'
import Wrap, { defaultProps } from '../Wrap'
import type { WrapProps } from '../Wrap'
const CodeStyle = (props: WrapProps): React.Element<*> => (
<Wrap {...props}>
<Wrap {...defaultProps} {...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" />

4
src/stylized/FacebookStyle.js
View File

@@ -1,10 +1,10 @@
//@flow
import * as React from 'react'
import Wrap from '../Wrap'
import Wrap, { defaultProps } from '../Wrap'
import type { WrapProps } from '../Wrap'
const FacebookStyle = (props: WrapProps): React.Element<*> => (
<Wrap {...props}>
<Wrap {...defaultProps} {...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" />

4
src/stylized/InstagramStyle.js
View File

@@ -1,10 +1,10 @@
//@flow
import * as React from 'react'
import Wrap from '../Wrap'
import Wrap, { defaultProps } from '../Wrap'
import type { WrapProps } from '../Wrap'
const InstagramStyle = (props: WrapProps): React.Element<*> => (
<Wrap {...props} height={480}>
<Wrap {...defaultProps} {...props} height={480}>
<circle cx="30" cy="30" r="30" />
<rect x="75" y="13" rx="4" ry="4" width="100" height="13" />

4
src/stylized/ListStyle.js
View File

@@ -1,10 +1,10 @@
//@flow
import * as React from 'react'
import Wrap from '../Wrap'
import Wrap, { defaultProps } from '../Wrap'
import type { WrapProps } from '../Wrap'
const ListStyle = (props: WrapProps): React.Element<*> => (
<Wrap {...props}>
<Wrap {...defaultProps} {...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" />

12
stories/index.js
View File

@@ -2,7 +2,7 @@ import React from 'react'
import { storiesOf } from '@storybook/react'
import ContentLoader from '../src/index'
import ContentLoader, { Facebook, Instagram, Code, List, BulletList } from '../src/index'
let defaultStyle = {
width: 400,
@@ -25,27 +25,27 @@ const MyLoader = () => {
storiesOf('ContentLoader', module)
.add('facebook style', () => (
<Container>
<ContentLoader />
<Facebook />
</Container>
))
.add('instagram style', () => (
<Container>
<ContentLoader type="instagram" />
<Instagram />
</Container>
))
.add('code style', () => (
<Container>
<ContentLoader type="code" />
<Code />
</Container>
))
.add('list style', () => (
<Container>
<ContentLoader type="list" />
<List />
</Container>
))
.add('bullet list style', () => (
<Container>
<ContentLoader type="bullet-list" />
<BulletList />
</Container>
))
.add('custom style', () => (

38
tests/index.js
View File

@@ -11,46 +11,8 @@ Enzyme.configure({ adapter: new Adapter() })
chai.use(chaiEnzyme())
import ContentLoader from '../src/index'
import FacebookStyle from '../src/stylized/FacebookStyle'
import InstagramStyle from '../src/stylized/InstagramStyle'
import CodeStyle from '../src/stylized/CodeStyle'
describe('<ContentLoader />:', () => {
describe('Type props are used', () => {
describe('when type is facebook', () => {
const wrapper = mount(<ContentLoader type={'facebook'} />)
it('should render <FacebookStyle />', () => {
expect(wrapper).to.have.descendants(FacebookStyle)
})
})
describe('when type is instagram', () => {
const wrapper = mount(<ContentLoader type={'instagram'} />)
it('should render <InstagramStyle />', () => {
expect(wrapper).to.have.descendants(InstagramStyle)
})
})
describe('when type is code', () => {
const wrapper = mount(<ContentLoader type={'code'} />)
it('should render <CodeStyle />', () => {
expect(wrapper).to.have.descendants(CodeStyle)
})
})
describe('when type is undefined', () => {
const wrapper = mount(<ContentLoader />)
it('should render <FacebookStyle />', () => {
expect(wrapper).to.have.descendants(FacebookStyle)
})
})
})
describe('when type is custom', () => {
const wrapper = mount(