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

feat(svg): add an interval prop (#139)

Browse Source 
* feat(svg): add an interval prop

Add an interval prop that controls the duration of the interval between two animations. For
instance, an interval of `.25` and an animation speed of `2` imply that the animation will
take 1.5s to complete, and wait 0.5s before starting again.

* docs(options): add interval prop
This commit is contained in:
Alexandre Kirszenberg
2019-03-06 21:51:02 +01:00
committed by Danilo Woznica
parent 21dbad682e
commit 6f26e2d5be
14 changed files with 1017 additions and 935 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -78,6 +78,10 @@ Defaults to `Loading interface...`. It's used to describe what element it is. Us
Defaults to `2`. Animation speed in seconds.
**`interval?: number`**
Defaults to `0.25`. Interval of time between runs of the animation, as a fraction of the animation speed.
**`className? string`**
Defaults to an empty string. The classname will be set in the `<svg />` element.

4
docs/intro.mdx
View File

@@ -73,6 +73,10 @@ Defaults to `Loading interface...`. It's used to describe what element it is. Us
Defaults to `2`. Animation speed in seconds.
**`interval?: number`**
Defaults to `0.25`. Interval of time between runs of the animation, as a fraction of the animation speed.
**`className? string`**
Defaults to an empty string. The classname will be set in the `<svg />` element.

3
docs/usage.mdx
View File

@@ -55,7 +55,8 @@ import FacebookStyle from '../src/stylized/FacebookStyle'
<Playground>
<ContentLoader
height={140}
speed={1}
speed={2}
interval={0.5}
primaryColor={'#333'}
secondaryColor={'#999'}
>

4
package.json
View File

@@ -57,8 +57,8 @@
"babel-jest": "^23.6.0",
"commitizen": "^3.0.5",
"cz-conventional-changelog": "^2.1.0",
"docz": "^0.12.13",
"docz-theme-default": "^0.12.13",
"docz": "^0.13.7",
"docz-theme-default": "^0.13.7",
"husky": "^1.1.2",
"jest": "^23.6.0",
"prettier": "^1.15.3",

1
src/Holder.tsx
View File

@@ -7,6 +7,7 @@ export const defaultProps: IContentLoaderProps = {
animate: true,
ariaLabel: 'Loading interface...',
height: 130,
interval: 0.25,
preserveAspectRatio: 'none',
primaryColor: '#f0f0f0',
primaryOpacity: 1,

18
src/Svg.tsx
View File

@@ -6,6 +6,7 @@ import uid from './uid'
export default ({
rtl,
speed,
interval,
style,
width,
height,
@@ -24,6 +25,8 @@ export default ({
const idClip = uniquekey ? `${uniquekey}-idClip` : uid()
const idGradient = uniquekey ? `${uniquekey}-idGradient` : uid()
const rtlStyle = rtl ? { transform: 'scaleX(-1)' } : {}
const keyTimes = `0; ${interval}; 1`
const dur = `${speed}s`
return (
<svg
@@ -57,8 +60,9 @@ export default ({
{animate && (
<animate
attributeName="offset"
values="-3; 1"
dur={`${speed}s`}
values={`-2; -2; 1`}
keyTimes={keyTimes}
dur={dur}
repeatCount="indefinite"
/>
)}
@@ -72,8 +76,9 @@ export default ({
{animate && (
<animate
attributeName="offset"
values="-2; 2"
dur={`${speed}s`}
values={`-1; -1; 2`}
keyTimes={keyTimes}
dur={dur}
repeatCount="indefinite"
/>
)}
@@ -87,8 +92,9 @@ export default ({
{animate && (
<animate
attributeName="offset"
values="-1; 3"
dur={`${speed}s`}
values={`0; 0; 3`}
keyTimes={keyTimes}
dur={dur}
repeatCount="indefinite"
/>
)}

10
src/__tests__/Holder.tests.tsx
View File

@@ -32,6 +32,7 @@ describe('Holder', () => {
<ContentLoader
rtl
speed={10}
interval={0.5}
width={200}
height={200}
animate={false}
@@ -58,6 +59,15 @@ describe('Holder', () => {
expect(propsFromFullfield.speed).toBe(10)
})
it("`interval` is a number and it's used", () => {
// defaultProps
expect(typeof propsFromEmpty.interval).toBe('number')
expect(propsFromEmpty.interval).toBe(0.25)
// custom props
expect(typeof propsFromFullfield.interval).toBe('number')
expect(propsFromFullfield.interval).toBe(0.5)
})
it("`height` is a number and it's used", () => {
// defaultProps
expect(typeof propsFromEmpty.height).toBe('number')

9
src/__tests__/stylized/__snapshots__/BulletListStyle.test.tsx.snap
View File

@@ -91,8 +91,9 @@ exports[`BulletListStyle renders correctly 1`] = `
<animate
attributeName="offset"
dur="20s"
keyTimes="0; 0.25; 1"
repeatCount="indefinite"
values="-3; 1"
values="-2; -2; 1"
/>
</stop>
<stop
@@ -103,8 +104,9 @@ exports[`BulletListStyle renders correctly 1`] = `
<animate
attributeName="offset"
dur="20s"
keyTimes="0; 0.25; 1"
repeatCount="indefinite"
values="-2; 2"
values="-1; -1; 2"
/>
</stop>
<stop
@@ -115,8 +117,9 @@ exports[`BulletListStyle renders correctly 1`] = `
<animate
attributeName="offset"
dur="20s"
keyTimes="0; 0.25; 1"
repeatCount="indefinite"
values="-1; 3"
values="0; 0; 3"
/>
</stop>
</linearGradient>

9
src/__tests__/stylized/__snapshots__/CodeStyle.test.tsx.snap
View File

@@ -111,8 +111,9 @@ exports[`CodeStyle renders correctly 1`] = `
<animate
attributeName="offset"
dur="20s"
keyTimes="0; 0.25; 1"
repeatCount="indefinite"
values="-3; 1"
values="-2; -2; 1"
/>
</stop>
<stop
@@ -123,8 +124,9 @@ exports[`CodeStyle renders correctly 1`] = `
<animate
attributeName="offset"
dur="20s"
keyTimes="0; 0.25; 1"
repeatCount="indefinite"
values="-2; 2"
values="-1; -1; 2"
/>
</stop>
<stop
@@ -135,8 +137,9 @@ exports[`CodeStyle renders correctly 1`] = `
<animate
attributeName="offset"
dur="20s"
keyTimes="0; 0.25; 1"
repeatCount="indefinite"
values="-1; 3"
values="0; 0; 3"
/>
</stop>
</linearGradient>

9
src/__tests__/stylized/__snapshots__/FacebookStyle.test.tsx.snap
View File

@@ -84,8 +84,9 @@ exports[`FacebookStyle renders correctly 1`] = `
<animate
attributeName="offset"
dur="20s"
keyTimes="0; 0.25; 1"
repeatCount="indefinite"
values="-3; 1"
values="-2; -2; 1"
/>
</stop>
<stop
@@ -96,8 +97,9 @@ exports[`FacebookStyle renders correctly 1`] = `
<animate
attributeName="offset"
dur="20s"
keyTimes="0; 0.25; 1"
repeatCount="indefinite"
values="-2; 2"
values="-1; -1; 2"
/>
</stop>
<stop
@@ -108,8 +110,9 @@ exports[`FacebookStyle renders correctly 1`] = `
<animate
attributeName="offset"
dur="20s"
keyTimes="0; 0.25; 1"
repeatCount="indefinite"
values="-1; 3"
values="0; 0; 3"
/>
</stop>
</linearGradient>

9
src/__tests__/stylized/__snapshots__/InstagramStyle.test.tsx.snap
View File

@@ -68,8 +68,9 @@ exports[`InstagramStyle renders correctly 1`] = `
<animate
attributeName="offset"
dur="20s"
keyTimes="0; 0.25; 1"
repeatCount="indefinite"
values="-3; 1"
values="-2; -2; 1"
/>
</stop>
<stop
@@ -80,8 +81,9 @@ exports[`InstagramStyle renders correctly 1`] = `
<animate
attributeName="offset"
dur="20s"
keyTimes="0; 0.25; 1"
repeatCount="indefinite"
values="-2; 2"
values="-1; -1; 2"
/>
</stop>
<stop
@@ -92,8 +94,9 @@ exports[`InstagramStyle renders correctly 1`] = `
<animate
attributeName="offset"
dur="20s"
keyTimes="0; 0.25; 1"
repeatCount="indefinite"
values="-1; 3"
values="0; 0; 3"
/>
</stop>
</linearGradient>

9
src/__tests__/stylized/__snapshots__/ListStyle.test.tsx.snap
View File

@@ -87,8 +87,9 @@ exports[`ListStyle renders correctly 1`] = `
<animate
attributeName="offset"
dur="20s"
keyTimes="0; 0.25; 1"
repeatCount="indefinite"
values="-3; 1"
values="-2; -2; 1"
/>
</stop>
<stop
@@ -99,8 +100,9 @@ exports[`ListStyle renders correctly 1`] = `
<animate
attributeName="offset"
dur="20s"
keyTimes="0; 0.25; 1"
repeatCount="indefinite"
values="-2; 2"
values="-1; -1; 2"
/>
</stop>
<stop
@@ -111,8 +113,9 @@ exports[`ListStyle renders correctly 1`] = `
<animate
attributeName="offset"
dur="20s"
keyTimes="0; 0.25; 1"
repeatCount="indefinite"
values="-1; 3"
values="0; 0; 3"
/>
</stop>
</linearGradient>

1
src/interface.ts
View File

@@ -30,6 +30,7 @@ export interface IContentLoaderProps {
secondaryColor?: string
secondaryOpacity?: number
speed?: number
interval?: number
style?: React.CSSProperties
uniquekey?: string
width?: number

1862
yarn.lock
View File

File diff suppressed because it is too large Load Diff