diff --git a/.gitignore b/.gitignore index 1ff04e54..d2c24129 100644 --- a/.gitignore +++ b/.gitignore @@ -1,12 +1,12 @@ dependencies -/node_modules +node_modules # testing -/coverage +coverage # misc .DS_Store .env npm-debug.log* yarn-debug.log* -yarn-error.log* \ No newline at end of file +yarn-error.log* diff --git a/package.json b/package.json index 44b5d801..74967901 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,10 @@ "author": "Avare Kodcu ", "main": "src/index.js", "devDependencies": { - "react": "^15.6.1", "enzyme": "^2.9.1", "enzyme-to-json": "^1.5.1", + "lorem-ipsum": "^1.0.4", + "react": "^15.6.1", "react-dom": "^15.6.1", "react-scripts": "^1.0.10", "react-test-renderer": "^15.6.1" @@ -35,6 +36,15 @@ }, "homepage": "https://github.com/abdurrahmanekr/react-chat-elements#readme", "scripts": { + "start": "react-scripts start", + "test": "react-scripts test --env=jsdom", + "test:coverage": "npm run test -- --coverage --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/index.js" + }, + "dependencies": { + "classnames": "^2.2.5", + "react-icons": "^2.2.5", + "react-progressbar.js": "^0.2.0", + "react-spinkit": "^3.0.0", "test": "react-scripts test --env=jsdom", "test:coverage": "npm run test -- --coverage --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/index.js" } diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 00000000..302b29ec Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 00000000..f766bed7 --- /dev/null +++ b/public/index.html @@ -0,0 +1,16 @@ + + + + + + + + + React Chat Components + + + +
+ + + \ No newline at end of file diff --git a/src/MessageBox/MessageBox.css b/src/MessageBox/MessageBox.css new file mode 100644 index 00000000..78bc0bdd --- /dev/null +++ b/src/MessageBox/MessageBox.css @@ -0,0 +1,109 @@ +.rce-container-mbox { + flex-direction: column; + display: block; + overflow: hidden; +} +.rce-mbox { + position: relative; + background: white; + border-radius: 5px; + box-shadow: 1px 1px 1px 1px rgba(0,0,0,.2); + border-top-right-radius: 0px; + margin-right: 20px; + margin-top: 5px; + display: inline-block; + flex-direction: column; + margin-bottom: 5px; + padding: 6px 9px 8px 9px; + float: left; + min-width: 140px; + max-width: 70%; +} + +.rce-mbox.rce-mbox-right { + float: right; +} + +.rce-mbox-text { + font-size: 13.6px; +} + +.rce-mbox-time { + text-align: right; + color: rgba(0,0,0,0.45); + font-size: 12px; +} + +.rce-mbox-right-notch { + z-index: 1; + position: absolute; + right: -14px; + top: 0px; + width: 15px; + height: 15px; + fill: white; + filter: drop-shadow( 2px 0px 1px rgba(0,0,0,.2) ); +} + +.rce-mbox-photo { + margin-top: -3px; + margin-right: -6px; + margin-left: -6px; +} + +.rce-mbox-photo .rce-mbox-text { + padding: 5px 0px; + max-width: 300px; + margin: auto; +} + +.rce-mbox-photo--img { + position: relative; + display: flex; + overflow: hidden; + justify-content: center; + border-radius: 5px; + max-height: 300px; +} + +.rce-mbox-photo--img__block { + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + background-color: rgba(0,0,0,0.5); + border-radius: 5px; + display: flex; +} + +.rce-mbox-photo--img img { + height: 100%; +} + +.rce-mbox-photo--img__block-item { + margin: auto; + cursor: pointer; +} + +.rce-mbox-photo--download { + color: #efe; + display: flex; + justify-content: center; + background: none; + border: none; + font-size: 3.2em; + outline: none; + border: 1px solid #eee; + border-radius: 100%; + height: 100px; + width: 100px; +} + +.rce-mbox-photo--download:hover { + opacity: .7; +} + +.rce-mbox-photo--download:active { + opacity: .3; +} \ No newline at end of file diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js index 62cd1c0e..c2cd6266 100644 --- a/src/MessageBox/MessageBox.js +++ b/src/MessageBox/MessageBox.js @@ -1,7 +1,89 @@ -import React from 'react'; +import React, { Component } from 'react'; +import './MessageBox.css'; -const MessageBox = () => ( -
-); +import FaCloudDownload from 'react-icons/lib/fa/cloud-download'; -module.exports = MessageBox; \ No newline at end of file +const classNames = require('classnames'); +const ProgressBar = require('react-progressbar.js'); +const Circle = ProgressBar.Circle; + +export class MessageBox extends Component { + render() { + var positionCls = classNames('rce-mbox', { 'rce-mbox-right' : this.props.position === 'right' }); + var progressOptions = { + strokeWidth: 2.3, + color: '#efe', + trailColor: '#aaa', + trailWidth: 1, + step: (state, circle) => { + circle.path.setAttribute('trail', state.color); + circle.path.setAttribute('trailwidth-width', state.width); + + var value = Math.round(circle.value() * 100); + if (value === 0) + circle.setText(''); + else + circle.setText(value); + } + }; + + return ( +
+
+ { + this.props.type === 'text' && +
+ {this.props.text} +
+ } + + { + this.props.type === 'photo' && +
+
+ {this.props.data.alt}/ + { + this.props.data.status && + !this.props.data.status.download && +
+ { + !this.props.data.status.click && + + } + { + this.props.data.status.loading !== 0 && + + } +
+ } +
+
+ {this.props.text} +
+
+ } +
+ 12:30 +
+ + + +
+
+ ); + } +} + +export default MessageBox; \ No newline at end of file diff --git a/src/MessageBox/__tests__/__snapshots__/MessageBox.js.snap b/src/MessageBox/__tests__/__snapshots__/MessageBox.js.snap index 3ce1cafa..ddfd6c56 100644 --- a/src/MessageBox/__tests__/__snapshots__/MessageBox.js.snap +++ b/src/MessageBox/__tests__/__snapshots__/MessageBox.js.snap @@ -1,3 +1,26 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`MessageBox component should render without issues 1`] = `
`; +exports[`MessageBox component should render without issues 1`] = ` +
+
+
+ 12:30 +
+ + + +
+
+`; diff --git a/src/assets/img/leftArrow.svg b/src/assets/img/leftArrow.svg new file mode 100644 index 00000000..6a4e6500 --- /dev/null +++ b/src/assets/img/leftArrow.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/src/assets/img/rightArrow.svg b/src/assets/img/rightArrow.svg new file mode 100644 index 00000000..c8c15556 --- /dev/null +++ b/src/assets/img/rightArrow.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/src/assets/style.css b/src/assets/style.css new file mode 100644 index 00000000..8e2f622a --- /dev/null +++ b/src/assets/style.css @@ -0,0 +1,4 @@ +body { + font-family: verdana; + background: navajowhite; +} \ No newline at end of file diff --git a/src/example/App.js b/src/example/App.js new file mode 100644 index 00000000..9e47914b --- /dev/null +++ b/src/example/App.js @@ -0,0 +1,43 @@ +import React, { Component } from 'react'; +import MessageBox from '../MessageBox/MessageBox'; + +const loremIpsum = require('lorem-ipsum'); + +export class App extends Component { + random() { + return { + position: (parseInt(Math.random() * 10 % 2) && 'right'), + type: 'photo', + text: loremIpsum({count: 1, units: 'sentences'}), + data: { + uri: 'https://user-images.githubusercontent.com/15075759/29005175-1d023bea-7ade-11e7-86d5-21f87225ef56.png', + status: { + click: true, + loading: 0.5, + } + }, + date: new Date(), + }; + } + + render() { + var arr = [1,2,3,4,5,6,7,8,9,0]; + return ( +
+ { + arr.map((x, i) => { + var tmp = this.random(); + + return + }) + } +
+ ); + } +} +export default App; diff --git a/src/example/index.js b/src/example/index.js new file mode 100644 index 00000000..ee031720 --- /dev/null +++ b/src/example/index.js @@ -0,0 +1,13 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; + + +const render = Component => { + ReactDOM.render( + , + document.getElementById('root'), + ); +}; + +render(App); \ No newline at end of file diff --git a/src/index.js b/src/index.js index 7a1b6d1a..5fba75c9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,11 @@ -/* import css */ -import '../assets/css'; +import './assets/style.css'; + +import './example'; /* import components */ -import MessageBox from './MessageBox.js'; +import MessageBox from './MessageBox/MessageBox'; export { - MessageBox + MessageBox, }; \ No newline at end of file