[4.6.0] Updated some test files, added ImageLoader and fixed Message no-Avatar bug.

.eslintrc

@@ -8,6 +8,7 @@
     "react/no-danger": 0
   },
   "globals": {
+    "Image": true,
     "window": true
   },
   "plugins": [

.nycrc

@@ -0,0 +1,9 @@
+
+{
+  "reporter": [
+    "text"
+  ],
+  "exclude": [
+    "test/**/*"
+  ]
+}

.travis.yml

@@ -5,6 +5,7 @@ before_install:
   cd docs && npm install && cd ../
 before_script:
   npm run compile && npm run lint
+after_success: npm run coverage
 before_deploy:
   cd docs && npm run build && cd ../
 deploy:

README.md

@@ -2,6 +2,7 @@
 
 [![Build Status](https://travis-ci.org/anchorchat/anchor-ui.svg?branch=master)](https://travis-ci.org/anchorchat/anchor-ui)
 [![npm version](https://badge.fury.io/js/anchor-ui.svg)](https://badge.fury.io/js/anchor-ui)
+[![Coverage Status](https://img.shields.io/codecov/c/github/anchorchat/anchor-ui/develop.svg)](https://codecov.io/gh/anchorchat/anchor-ui/)
 
 UI kit for chat engines with React
 

codecov.yml

@@ -0,0 +1,4 @@
+comment:
+  layout: "diff, flags, files"
+  behavior: once
+  require_changes: true  # if true: only post the comment if coverage changes

docs/components.json

@@ -553,7 +553,7 @@
       }
     }
   },
-  "components/card/index.jsx": {
+  "components/card/component.jsx": {
     "description": "A Card is a piece of paper with unique related data",
     "displayName": "Card",
     "methods": [],
@@ -579,7 +579,7 @@
       }
     }
   },
-  "components/card-content/index.jsx": {
+  "components/card-content/component.jsx": {
     "description": "A Card is a piece of paper with unique related data",
     "displayName": "CardContent",
     "methods": [],
@@ -605,7 +605,7 @@
       }
     }
   },
-  "components/card-header/index.jsx": {
+  "components/card-header/component.jsx": {
     "description": "A Card is a piece of paper with unique related data",
     "displayName": "CardHeader",
     "methods": [],
@@ -701,7 +701,7 @@
       }
     }
   },
-  "components/channel-header/index.jsx": {
+  "components/channel-header/component.jsx": {
     "description": "A channel's header",
     "displayName": "ChannelHeader",
     "methods": [],
@@ -815,7 +815,7 @@
       }
     }
   },
-  "components/checkbox/index.jsx": {
+  "components/checkbox/component.jsx": {
     "description": "A checkbox is used to verify which options you want selected from a group.",
     "displayName": "Checkbox",
     "methods": [],
@@ -916,7 +916,7 @@
       }
     }
   },
-  "components/commands/index.jsx": {
+  "components/commands/component.jsx": {
     "description": "Used for displaying a list of commands",
     "displayName": "Commands",
     "methods": [
@@ -1211,7 +1211,7 @@
       }
     }
   },
-  "components/date-separator/index.jsx": {
+  "components/date-separator/component.jsx": {
     "description": "A separator to show above a Message",
     "displayName": "DateSeparator",
     "methods": [],
@@ -1281,7 +1281,7 @@
       }
     }
   },
-  "components/dialog/index.jsx": {
+  "components/dialog/component.jsx": {
     "description": "General purpose dialog",
     "displayName": "Dialog",
     "methods": [
@@ -1395,7 +1395,7 @@
       }
     }
   },
-  "components/divider/index.jsx": {
+  "components/divider/component.jsx": {
     "description": "Dividers group and separate content within lists and page layouts.",
     "displayName": "Divider",
     "methods": [],
@@ -1425,7 +1425,7 @@
       }
     }
   },
-  "components/emoji-filter/index.jsx": {
+  "components/emoji-filter/component.jsx": {
     "description": "Used for displaying a list of commands",
     "displayName": "EmojiFilter",
     "methods": [
@@ -3743,6 +3743,133 @@
       }
     }
   },
+  "components/image-loader/index.jsx": {
+    "description": "",
+    "displayName": "ImageLoader",
+    "methods": [
+      {
+        "name": "handleError",
+        "docblock": null,
+        "modifiers": [],
+        "params": [
+          {
+            "name": "error",
+            "type": null
+          }
+        ],
+        "returns": null
+      },
+      {
+        "name": "handleLoad",
+        "docblock": null,
+        "modifiers": [],
+        "params": [
+          {
+            "name": "e",
+            "type": null
+          }
+        ],
+        "returns": null
+      },
+      {
+        "name": "create",
+        "docblock": null,
+        "modifiers": [],
+        "params": [],
+        "returns": null
+      },
+      {
+        "name": "destroy",
+        "docblock": null,
+        "modifiers": [],
+        "params": [],
+        "returns": null
+      },
+      {
+        "name": "renderImage",
+        "docblock": null,
+        "modifiers": [],
+        "params": [],
+        "returns": null
+      }
+    ],
+    "props": {
+      "alt": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "The alt of the image to be loaded",
+        "defaultValue": {
+          "value": "''",
+          "computed": false
+        }
+      },
+      "error": {
+        "type": {
+          "name": "node"
+        },
+        "required": false,
+        "description": "Optional error component to show when image failed to load",
+        "defaultValue": {
+          "value": "null",
+          "computed": false
+        }
+      },
+      "imgProps": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "Optional props for the img element",
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        }
+      },
+      "onError": {
+        "type": {
+          "name": "func"
+        },
+        "required": false,
+        "description": "Callback fired when loading throws an error\n\nfunction(event: object) => void",
+        "defaultValue": {
+          "value": "() => {}",
+          "computed": false
+        }
+      },
+      "onLoad": {
+        "type": {
+          "name": "func"
+        },
+        "required": false,
+        "description": "Callback fired when image is finished loading\n\nfunction(event: object) => void",
+        "defaultValue": {
+          "value": "() => {}",
+          "computed": false
+        }
+      },
+      "placeholder": {
+        "type": {
+          "name": "node"
+        },
+        "required": false,
+        "description": "Placeholder to show while the image is loading",
+        "defaultValue": {
+          "value": "null",
+          "computed": false
+        }
+      },
+      "src": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": "The URL of the image to be loaded"
+      }
+    }
+  },
   "components/input/index.jsx": {
     "description": "General purpose form input",
     "displayName": "Input",
@@ -5137,6 +5264,50 @@
           "computed": false
         }
       },
+      "imagePlaceholder": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "Image placeholder url",
+        "defaultValue": {
+          "value": "'https://cdn.anchor.fish/client/assets/defaults/picture.f682bf93.jpg'",
+          "computed": false
+        }
+      },
+      "imageError": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "Image error url",
+        "defaultValue": {
+          "value": "'https://cdn.anchor.fish/client/assets/defaults/error.2838da1f.jpg'",
+          "computed": false
+        }
+      },
+      "onImageLoad": {
+        "type": {
+          "name": "func"
+        },
+        "required": false,
+        "description": "Callback fired when an image or giphy is finished loading\n\nfunction(event: object) => void",
+        "defaultValue": {
+          "value": "() => {}",
+          "computed": false
+        }
+      },
+      "onImageError": {
+        "type": {
+          "name": "func"
+        },
+        "required": false,
+        "description": "Callback fired when an image or giphy throws an error while loading\n\nfunction(event: object) => void",
+        "defaultValue": {
+          "value": "() => {}",
+          "computed": false
+        }
+      },
       "color": {
         "type": {
           "name": "string"

docs/src/components/image-loader/example.js

@@ -0,0 +1,44 @@
+export default `
+\`\`\`jsx
+import React, { Component } from 'react';
+import ImageLoader from 'anchor-ui/image-loader';
+
+class ImageLoaderExample extends Component {
+  handleOnLoad = () => {
+    console.log('Loaded image');
+  }
+
+  handleOnError = () => {
+    console.log('Failed to load image');
+  }
+
+  render() {
+    const imgProps = {
+      style: {
+        height: '200px',
+        width: 'auto'
+      },
+      onClick: () => console.log('clicked image')
+    };
+
+    const error = <p>Error while loading image!</p>;
+
+    const placeholder = <p>Loading image...</p>;
+
+    return (
+      <ImageLoader
+        src="https://static.pexels.com/photos/205508/pexels-photo-205508.jpeg"
+        alt="macbook and coffee"
+        imgProps={imgProps}
+        error={error}
+        placeholder={placeholder}
+        onError={this.handleOnError}
+        onLoad={this.handleOnLoad}
+      />
+    );
+  }
+}
+
+export default ImageLoaderExample;
+\`\`\`
+`;