Avatar cmp flexible type added.

ChatItem avatarFlexible prop added.

Author: abdurrahmanekr

README.md

@@ -13,6 +13,7 @@ Reactjs chat elements
 9. [SideBar](#sidebar-component)
 10. [Navbar](#navbar-component)
 11. [Dropdown](#dropdown-component)
+12. [Avatar](#avatar)
 
 ## ChatItem Component
 
@@ -34,6 +35,7 @@ import { ChatItem } from 'react-chat-elements'
 | prop | default | type | description |
 | ---- | ---- | ---- | ---- |
 | avatar | none | string | ChatItem avatar photo url |
+| avatarFlexible | false | boolean | flexible ChatItem avatar photo |
 | alt | none | string | ChatItem avatar photo alt text |
 | title | none | string | ChatItem title |
 | subtitle | none | string | ChatItem subtitle |
@@ -326,9 +328,9 @@ import { Navbar } from 'react-chat-elements'
 import { Dropdown } from 'react-chat-elements'
 
 <Dropdown
-	buttonProps={{
-		text: 'Dropdown',
-	}}
+    buttonProps={{
+        text: 'Dropdown',
+    }}
     items={[
         'merhaba',
         'lorem',
@@ -348,3 +350,25 @@ import { Dropdown } from 'react-chat-elements'
 | items | none | array | dropdown items array |
 | onSelect | none | function | item on select |
 | buttonProps | none | object | button properties |
+
+
+## Avatar Component
+
+```javascript
+import { Avatar } from 'react-chat-elements'
+
+<Avatar
+    src={'https://facebook.github.io/react/img/logo.svg'}
+    alt={'logo'}
+    size="large"
+    type="circle flexible"/>
+```
+
+#### Avatar props
+
+| prop | default | type | description |
+| ---- | ---- | ---- | ---- |
+| src | none | image | image src |
+| alt | none | string | image alt description |
+| size | default | string | image size. default (25px), xsmall(30px), small(35px), medium(40px), large(45px), xlarge (55px) |
+| type | default | string | types: default, circle, rounded(border radius 5px), flexible |

example/App.js

@@ -77,6 +77,7 @@ export class App extends Component {
 				return {
 					id: String(Math.random()),
 					avatar: `data:image/png;base64,${this.photo()}`,
+					avatarFlexible: true,
 					alt: loremIpsum({ count: 2, units: 'words' }),
 					title: loremIpsum({ count: 2, units: 'words' }),
 					date: new Date(),

src/Avatar/Avatar.css

@@ -1,37 +1,52 @@
-.rce-avatar.default{
+.rce-avatar-container {
+	overflow: hidden;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	overflow: hidden;
+}
+
+.rce-avatar-container.flexible .rce-avatar {
+	height: auto !important;
+	width: 100% !important;
+	border-radius: unset !important;
+	overflow: unset !important;
+}
+
+.rce-avatar-container.default{
     width: 25px;
     height: 25px;
 }
 
-.rce-avatar.rounded{
+.rce-avatar-container.rounded{
     border-radius: 5px;
 }
 
-.rce-avatar.circle{
+.rce-avatar-container.circle{
     border-radius: 100%;
 }
 
-.rce-avatar.xsmall{
+.rce-avatar-container.xsmall{
     width: 30px;
     height: 30px;
 }
 
-.rce-avatar.small{
+.rce-avatar-container.small{
     width: 35px;
     height: 35px;
 }
 
-.rce-avatar.medium{
+.rce-avatar-container.medium{
     width: 40px;
     height: 40px;
 }
 
-.rce-avatar.large{
+.rce-avatar-container.large{
     width: 45px;
     height: 45px;
 }
 
-.rce-avatar.xlarge{
+.rce-avatar-container.xlarge{
     width: 55px;
     height: 55px;
-}
+}

src/Avatar/Avatar.js

@@ -6,7 +6,9 @@ const classNames = require('classnames');
 export class Avatar extends Component {
 	render() {
 		return (
-			<img alt={this.props.alt} src={this.props.src} className={classNames('rce-avatar', this.props.type, this.props.size, this.props.className)} />
+			<div className={classNames('rce-avatar-container', this.props.type, this.props.size, this.props.className)}>
+				<img alt={this.props.alt} src={this.props.src} className={'rce-avatar'} />
+			</div>
 		);
 	}
 }

src/Avatar/__tests__/__snapshots__/Avatar.js.snap

@@ -1,9 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Avatar component should render without issues 1`] = `
-<img
-  alt=""
-  className="rce-avatar default default"
-  src=""
-/>
+<div
+  className="rce-avatar-container default default"
+>
+  <img
+    alt=""
+    className="rce-avatar"
+    src=""
+  />
+</div>
 `;

src/ChatItem/ChatItem.js

@@ -15,7 +15,11 @@ export class ChatItem extends Component {
 				onClick={this.props.onClick}>
 				<div className="rce-citem">
 					<div className="rce-citem-avatar">
-						<Avatar src={this.props.avatar} alt={this.props.alt} size="large" type="circle"/>
+						<Avatar
+							src={this.props.avatar}
+							alt={this.props.alt}
+							size="large"
+							type={classNames('circle', {'flexible': this.props.avatarFlexible})}/>
 					</div>
 
 					<div className="rce-citem-body">
@@ -50,6 +54,7 @@ ChatItem.defaultProps = {
 	id: '',
 	onClick: null,
 	avatar: '',
+	avatarFlexible: false,
 	alt: '',
 	title: '',
 	subtitle: '',