Skip to content

Commit 9ad9a1f

Browse files
wcandillonwcandillon
authored
feat(component): New Progressive Image Component
2 parents 5843d9e + 7863e20 commit 9ad9a1f

File tree

9 files changed

+1787
-0
lines changed

9 files changed

+1787
-0
lines changed

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
#IDEs
2+
.idea
3+
14
# Logs
25
logs
36
*.log
@@ -35,3 +38,6 @@ jspm_packages
3538

3639
# Optional REPL history
3740
.node_repl_history
41+
42+
# Typescript
43+
build

‎.idea/vcs.xml‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
# react-progressive-image
22
Progressively load images using a blur effect.
3+
4+
[![CircleCI](https://circleci.com/gh/wcandillon/react-progressive-image.svg?style=svg)](https://circleci.com/gh/wcandillon/react-progressive-image)

‎circle.yml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
machine:
2+
node:
3+
version: 6.9.1
4+
deployment:
5+
release:
6+
branch: master
7+
commands:
8+
- npm run release || true

‎package.json‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "react-progressive-image",
3+
"version": "0.0.0-development",
4+
"description": "Progressively load images using a blur effect. Edit",
5+
"main": "build/index.js",
6+
"scripts": {
7+
"lint": "tslint --project tsconfig.json",
8+
"build": "tsc --pretty",
9+
"watch": "tsc --watch --pretty",
10+
"test": "npm run lint && npm run build",
11+
"release": "semantic-release pre && npm publish && semantic-release post"
12+
},
13+
"files": [
14+
"build"
15+
],
16+
"repository": {
17+
"type": "git",
18+
"url": "git+https://github.com/wcandillon/react-progressive-image.git"
19+
},
20+
"keywords": [
21+
"react",
22+
"image",
23+
"progressive",
24+
"image",
25+
"loading"
26+
],
27+
"author": "William Candillon",
28+
"license": "Apache-2.0",
29+
"bugs": {
30+
"url": "https://github.com/wcandillon/react-progressive-image/issues"
31+
},
32+
"homepage": "https://github.com/wcandillon/react-progressive-image#readme",
33+
"devDependencies": {
34+
"@types/react": "^15.0.23",
35+
"condition-circle": "^1.5.0",
36+
"semantic-release": "^6.3.2",
37+
"ts-npm-lint": "^0.1.0",
38+
"tslint": "^5.1.0",
39+
"typescript": "^2.3.2"
40+
},
41+
"release": {
42+
"verifyConditions": "condition-circle"
43+
}
44+
}

‎src/index.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import * as React from "react";
2+
3+
export interface ProgressiveImageProps extends React.HTMLProps<HTMLDivElement> {
4+
preview: string;
5+
src: string;
6+
}
7+
8+
export interface ProgressiveBackgroundImageProps extends React.HTMLProps<HTMLImageElement> {
9+
preview: string;
10+
src: string;
11+
background: boolean;
12+
}
13+
14+
export interface ProgressiveImageState {
15+
src: string;
16+
blur: number;
17+
}
18+
19+
export class ProgressiveImage extends React.Component<ProgressiveImageProps & ProgressiveBackgroundImageProps, ProgressiveImageState> {
20+
21+
private clonedProps: React.HTMLProps<HTMLDivElement | HTMLImageElement> = {};
22+
23+
componentWillMount() {
24+
const {src, preview} = this.props;
25+
this.setState({ src: preview, blur: 10 });
26+
this.cloneProps();
27+
fetch(src).then(() => this.setState({ src, blur: 0 }));
28+
}
29+
30+
render() {
31+
const {src, style, background} = this.props;
32+
return (
33+
<div>
34+
<style>{`
35+
@-webkit-keyframes blur {
36+
0% { -webkit-filter: blur(10px); }
37+
100% { -webkit-filter: blur(0); }
38+
}
39+
`}</style>
40+
{
41+
background ?
42+
<div style={Object.assign(this.getBackgroundStyle(), style)} {...this.clonedProps} />
43+
:
44+
<img src={src} style={Object.assign(this.getStyle(), style)} {...this.clonedProps} />
45+
}
46+
47+
</div>
48+
);
49+
}
50+
51+
private cloneProps() {
52+
Object.keys(this.props)
53+
.filter(prop => ["style", "src", "preview", "background"].indexOf(prop) === -1)
54+
.forEach(prop => this.clonedProps[prop] = this.props[prop]);
55+
}
56+
57+
private getStyle() {
58+
const {blur} = this.state;
59+
return {
60+
filter: `blur(${blur}px)`,
61+
animation: "blur 400ms",
62+
animationTimingFunction: "ease"
63+
};
64+
}
65+
66+
private getBackgroundStyle() {
67+
const {src, blur} = this.state;
68+
return {
69+
backgroundImage: `url(${src})`,
70+
filter: `blur(${blur}px)`,
71+
animation: "blur 400ms",
72+
animationTimingFunction: "ease"
73+
};
74+
}
75+
}

‎tsconfig.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es6",
4+
"module": "es6",
5+
"moduleResolution": "node",
6+
"jsx": "react",
7+
"outDir": "build",
8+
"rootDir": "src",
9+
"allowSyntheticDefaultImports": true,
10+
"noImplicitAny": true,
11+
"experimentalDecorators": true,
12+
"preserveConstEnums": true,
13+
"sourceMap": true,
14+
"strictNullChecks": true,
15+
"declaration": true,
16+
"suppressImplicitAnyIndexErrors": true
17+
},
18+
"filesGlob": [
19+
"src/**/*.ts",
20+
"src/**/*.tsx"
21+
],
22+
"exclude": [
23+
"build",
24+
"node_modules"
25+
],
26+
"compileOnSave": false
27+
}

‎tslint.json‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"rules": {
3+
"class-name": true,
4+
"comment-format": [
5+
true,
6+
"check-space"
7+
],
8+
"indent": [
9+
true,
10+
"spaces"
11+
],
12+
"no-unused-variable": [true, {"ignore-pattern": "React"}],
13+
"no-duplicate-variable": true,
14+
"no-eval": true,
15+
"no-internal-module": true,
16+
"no-trailing-whitespace": true,
17+
"no-unsafe-finally": true,
18+
"no-var-keyword": true,
19+
"one-line": [
20+
true,
21+
"check-open-brace",
22+
"check-whitespace"
23+
],
24+
"quotemark": [
25+
true,
26+
"double"
27+
],
28+
"semicolon": [
29+
true,
30+
"always"
31+
],
32+
"triple-equals": [
33+
true,
34+
"allow-null-check"
35+
],
36+
"typedef-whitespace": [
37+
true,
38+
{
39+
"call-signature": "nospace",
40+
"index-signature": "nospace",
41+
"parameter": "nospace",
42+
"property-declaration": "nospace",
43+
"variable-declaration": "nospace"
44+
}
45+
],
46+
"variable-name": [
47+
true,
48+
"ban-keywords"
49+
],
50+
"whitespace": [
51+
true,
52+
"check-branch",
53+
"check-decl",
54+
"check-operator",
55+
"check-separator",
56+
"check-type"
57+
]
58+
}
59+
}

0 commit comments

Comments
 (0)