🔧

Author: wcandillon

Diff for: .gitignore

@@ -1,3 +1,6 @@
+#IDEs
+.idea
+
 # Logs
 logs
 *.log
@@ -35,3 +38,6 @@ jspm_packages
 
 # Optional REPL history
 .node_repl_history
+
+# Typescript
+build

Diff for: .idea/vcs.xml

@@ -0,0 +1,8 @@
+machine:
+  node:
+    version: 6.9.1
+deployment:
+  release:
+    branch: master
+    commands:
+        - npm run release || true

Diff for: circle.yml

@@ -0,0 +1,41 @@
+{
+  "name": "react-progressive-image",
+  "version": "0.0.0-development",
+  "description": "Progressively load images using a blur effect. Edit",
+  "main": "build/index.js",
+  "scripts": {
+    "lint": "tslint --project tsconfig.json",
+    "build": "tsc --pretty",
+    "watch": "tsc --watch --pretty",
+    "test": "npm run lint && npm run build",
+    "release": "semantic-release pre && npm publish && semantic-release post"
+  },
+  "files": [
+    "build"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wcandillon/react-progressive-image.git"
+  },
+  "keywords": [
+    "react",
+    "image",
+    "progressive",
+    "image",
+    "loading"
+  ],
+  "author": "William Candillon",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/wcandillon/react-progressive-image/issues"
+  },
+  "homepage": "https://github.com/wcandillon/react-progressive-image#readme",
+  "devDependencies": {
+    "@types/react": "^15.0.23",
+    "condition-circle": "^1.5.0",
+    "semantic-release": "^6.3.2",
+    "ts-npm-lint": "^0.1.0",
+    "tslint": "^5.1.0",
+    "typescript": "^2.3.2"
+  }
+}

Diff for: package.json

@@ -0,0 +1,55 @@
+import * as React from "react";
+
+interface ProgressiveImageProps extends React.HTMLProps<HTMLDivElement> {
+    preview: string;
+    src: string;
+    background?: boolean;
+}
+
+interface ProgressiveImageState {
+    src: string;
+    blur: number;
+}
+
+class ProgressiveImage extends React.Component<ProgressiveImageProps, ProgressiveImageState> {
+
+    private clonedProps: React.HTMLProps<HTMLDivElement> = {};
+
+    componentWillMount() {
+        const {src, preview} = this.props;
+        this.setState({ src: preview, blur: 10 });
+        this.cloneProps();
+        fetch(src).then(() => this.setState({ src, blur: 0 }));
+    }
+
+    render() {
+        const {style} = this.props;
+        return (
+            <div>
+                <style>{`
+                @-webkit-keyframes blur {
+                    0%  { -webkit-filter: blur(10px); }
+                    100% { -webkit-filter: blur(0); }
+                }
+                `}</style>
+                <div style={Object.assign(this.getStyle(), style)} {...this.clonedProps} />
+            </div>
+        );
+    }
+
+    private cloneProps() {
+        Object.keys(this.props)
+            .filter(prop => ["style", "src", "preview", "background"].indexOf(prop) === -1)
+            .forEach(prop => this.clonedProps[prop] = this.props[prop]);
+    }
+
+    private getStyle() {
+        const {src, blur} = this.state;
+        return {
+            backgroundImage: `url(${src})`,
+            filter: `blur(${blur}px)`,
+            animation: "blur 400ms",
+            animationTimingFunction: "ease"
+        };
+    }
+}

Diff for: src/index.tsx

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "target": "es6",
+        "module": "es6",
+        "moduleResolution": "node",
+        "jsx": "react",
+        "outDir": "build",
+        "rootDir": "src",
+        "allowSyntheticDefaultImports": true,
+        "noImplicitAny": true,
+        "experimentalDecorators": true,
+        "preserveConstEnums": true,
+        "sourceMap": true,
+        "strictNullChecks": true,
+        "declaration": true
+    },
+    "filesGlob": [
+        "src/**/*.ts",
+        "src/**/*.tsx"
+    ],
+    "exclude": [
+        "build",
+        "node_modules"
+    ],
+    "compileOnSave": false
+}

Diff for: tsconfig.json

@@ -0,0 +1,59 @@
+{
+    "rules": {
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "no-unused-variable": [true, {"ignore-pattern": "React"}],
+        "no-duplicate-variable": true,
+        "no-eval": true,
+        "no-internal-module": true,
+        "no-trailing-whitespace": true,
+        "no-unsafe-finally": true,
+        "no-var-keyword": true,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "double"
+        ],
+        "semicolon": [
+            true,
+            "always"
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "variable-name": [
+            true,
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-decl",
+            "check-operator",
+            "check-separator",
+            "check-type"
+        ]
+    }
+}