Skip to content

feat(svg): add an interval prop #139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 6, 2019
Merged

feat(svg): add an interval prop #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0865c1e
feat(svg): add an interval prop
Mar 3, 2019
c9eca6a
Merge branch 'master' into feat-interval
danilowoz Mar 6, 2019
7b81425
docs(options): add interval prop
danilowoz Mar 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 4 additions & 0 deletions docs/intro.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
3 changes: 2 additions & 1 deletion docs/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
>
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions src/Holder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export const defaultProps: IContentLoaderProps = {
animate: true,
ariaLabel: 'Loading interface...',
height: 130,
interval: 0.25,
preserveAspectRatio: 'none',
primaryColor: '#f0f0f0',
primaryOpacity: 1,
Expand Down
18 changes: 12 additions & 6 deletions src/Svg.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import uid from './uid'
export default ({
rtl,
speed,
interval,
style,
width,
height,
Expand All @@ -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
Expand Down Expand Up @@ -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"
/>
)}
Expand All @@ -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"
/>
)}
Expand All @@ -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"
/>
)}
Expand Down
10 changes: 10 additions & 0 deletions src/__tests__/Holder.tests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ describe('Holder', () => {
<ContentLoader
rtl
speed={10}
interval={0.5}
width={200}
height={200}
animate={false}
Expand All @@ -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')
Expand Down
9 changes: 6 additions & 3 deletions src/__tests__/stylized/__snapshots__/BulletListStyle.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand Down
9 changes: 6 additions & 3 deletions src/__tests__/stylized/__snapshots__/CodeStyle.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand Down
9 changes: 6 additions & 3 deletions src/__tests__/stylized/__snapshots__/FacebookStyle.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand Down
9 changes: 6 additions & 3 deletions src/__tests__/stylized/__snapshots__/InstagramStyle.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand Down
9 changes: 6 additions & 3 deletions src/__tests__/stylized/__snapshots__/ListStyle.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions src/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export interface IContentLoaderProps {
secondaryColor?: string
secondaryOpacity?: number
speed?: number
interval?: number
style?: React.CSSProperties
uniquekey?: string
width?: number
Expand Down
Loading