kylefang/react-content-loader
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-content-loader.git synced 2026-03-28 22:46:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove custom components (#48)

Browse Source 
* Remove custom components https://github.com/danilowoz/react-content-loader/issues/46

* return <rect/> and <circle/> in stories, update readme.md, return test for 'when type is custom'

* fix indentation, move 'when type is custom' test from 'Type props are used' block
This commit is contained in:
Evgenij Kopitsa
2017-12-28 21:26:58 +03:00
committed by Danilo Woznica
parent 6c0a586400
commit 4e5bbf58c3
8 changed files with 21 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -46,14 +46,14 @@ your custom loaders
```jsx
// import the component
import ContentLoader, { Rect, Circle } from 'react-content-loader'
import ContentLoader from 'react-content-loader'
const MyLoader = () => {
return (
<ContentLoader height={140} speed={1} primaryColor={'#333'} secondaryColor={'#999'}>
<Circle x={195} y={30} radius={30} />
<Rect x={50} y={80} height={10} radius={5} width={300} />
<Rect x={75} y={100} height={10} radius={5} width={250} />
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
<rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
<circle cx="35" cy="35" r="35" />
</ContentLoader>
)
}

15
src/custom/Circle.js
View File

@@ -1,15 +0,0 @@
//@flow
import * as React from 'react'
type Props = {
x: number,
y: number,
radius: number,
}
const Circle = (props: Props): React.Element<*> => {
const { x = 0, y = 0, radius = 50 } = props
return <circle cx={x} cy={y} r={radius} />
}
export default Circle

17
src/custom/Rect.js
View File

@@ -1,17 +0,0 @@
//@flow
import * as React from 'react'
type Props = {
x: number,
y: number,
radius: number,
width: number,
height: number,
}
const Rect = (props: Props): React.Element<*> => {
const { x = 0, y = 0, radius = 0, width = 50, height = 50 } = props
return <rect x={x} y={y} rx={radius} ry={radius} width={width} height={height} />
}
export default Rect

4
src/index.js
View File

@@ -8,9 +8,6 @@ import InstagramStyle from './stylized/InstagramStyle'
import CodeStyle from './stylized/CodeStyle'
import ListStyle from './stylized/ListStyle'
import BulletListStyle from './stylized/BulletListStyle'
// Custom
import Rect from './custom/Rect'
import Circle from './custom/Circle'
export type Props = {
style: { [key: string]: any },
@@ -60,4 +57,3 @@ ContentLoader.defaultProps = {
};
export default ContentLoader
export { Rect, Circle }

7
stories/index.js
View File

@@ -3,7 +3,6 @@ import React from 'react'
import { storiesOf } from '@storybook/react'
import ContentLoader from '../src/index'
import { Rect, Circle } from '../src/index'
let defaultStyle = {
width: 400,
@@ -16,9 +15,9 @@ const Container = props => <div style={defaultStyle}>{props.children}</div>
const MyLoader = () => {
return (
<ContentLoader height={140} speed={1} primaryColor={'#333'} secondaryColor={'#999'}>
<Circle x={195} y={30} radius={30} />
<Rect x={50} y={80} height={10} radius={5} width={300} />
<Rect x={75} y={100} height={10} radius={5} width={250} />
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
<rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
<circle cx="35" cy="35" r="35" />
</ContentLoader>
)
}

27
tests/custom/Circle.js
View File

@@ -1,27 +0,0 @@
import React from 'react'
import Enzyme, { mount, render } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import chai, { expect } from 'chai'
import chaiEnzyme from 'chai-enzyme'
import sinon from 'sinon'
Enzyme.configure({ adapter: new Adapter() })
chai.use(chaiEnzyme())
import Circle from '../../src/custom/Circle'
describe('<Circle />', () => {
let wrapper
beforeEach(() => {
wrapper = mount(<Circle />)
})
it('has defaults props', () => {
const props = wrapper.props()
for (let key in props) expect(props[key]).to.not.equal(undefined)
})
})

26
tests/custom/Rect.js
View File

@@ -1,26 +0,0 @@
import React from 'react'
import Enzyme, { mount, render } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import chai, { expect } from 'chai'
import chaiEnzyme from 'chai-enzyme'
import sinon from 'sinon'
Enzyme.configure({ adapter: new Adapter() })
chai.use(chaiEnzyme())
import Rect from '../../src/custom/Rect'
describe('<Rect />', () => {
let wrapper
beforeEach(() => {
wrapper = mount(<Rect />)
})
it('has defaults props', () => {
const props = wrapper.props()
for (let key in props) expect(props[key]).to.not.equal(undefined)
})
})

28
tests/index.js
View File

@@ -15,9 +15,6 @@ import FacebookStyle from '../src/stylized/FacebookStyle'
import InstagramStyle from '../src/stylized/InstagramStyle'
import CodeStyle from '../src/stylized/CodeStyle'
import Rect from '../src/custom/Rect'
import Circle from '../src/custom/Circle'
describe('<ContentLoader />:', () => {
describe('Type props are used', () => {
describe('when type is facebook', () => {
@@ -52,18 +49,21 @@ describe('<ContentLoader />:', () => {
})
})
describe('when type is custom', () => {
const wrapper = mount(
<ContentLoader>
<Rect />
<Circle />
</ContentLoader>
)
})
it('should render custom element', () => {
expect(wrapper).to.have.descendants(Rect)
expect(wrapper).to.have.descendants(Circle)
})
describe('when type is custom', () => {
const wrapper = mount(
<ContentLoader>
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
<rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
<circle cx="35" cy="35" r="35" />
</ContentLoader>
)
it('should render custom element', () => {
expect(wrapper.find('rect')).to.have.length(3)
expect(wrapper.find('circle')).to.have.length(1)
})
})